diff --git a/.eslintrc.js b/.eslintrc.js
index 14567f43430060..ce4aea3c023092 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -510,6 +510,10 @@ module.exports = {
       // typescript and javascript for front and back end
       files: ['x-pack/legacy/plugins/siem/**/*.{js,ts,tsx}'],
       plugins: ['eslint-plugin-node', 'react'],
+      env: {
+        mocha: true,
+        jest: true,
+      },
       rules: {
         'accessor-pairs': 'error',
         'array-callback-return': 'error',
@@ -564,8 +568,7 @@ module.exports = {
         'no-shadow-restricted-names': 'error',
         'no-sparse-arrays': 'error',
         'no-this-before-super': 'error',
-        // This will be turned on after bug fixes are mostly complete
-        // 'no-undef': 'warn',
+        'no-undef': 'error',
         'no-unreachable': 'error',
         'no-unsafe-finally': 'error',
         'no-useless-call': 'error',
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 516f5e71577e6d..bea2f4e74297e8 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -13,6 +13,8 @@
 
 # APM
 /x-pack/legacy/plugins/apm/  @elastic/apm-ui
+/x-pack/test/functional/apps/apm/  @elastic/apm-ui
+/src/legacy/core_plugins/apm_oss/  @elastic/apm-ui
 
 # Beats
 /x-pack/legacy/plugins/beats_management/  @elastic/beats
diff --git a/STYLEGUIDE.md b/STYLEGUIDE.md
index 152a0e2c488712..5fd3ef5e8ff4bf 100644
--- a/STYLEGUIDE.md
+++ b/STYLEGUIDE.md
@@ -141,6 +141,39 @@ function addBar(foos, foo) {
 }
 ```
 
+### Avoid `any` whenever possible
+
+Since TypeScript 3.0 and the introduction of the
+[`unknown` type](https://mariusschulz.com/blog/the-unknown-type-in-typescript) there are rarely any
+reasons to use `any` as a type. Nearly all places of former `any` usage can be replace by either a
+generic or `unknown` (in cases the type is really not known).
+
+You should always prefer using those mechanisms over using `any`, since they are stricter typed and
+less likely to introduce bugs in the future due to insufficient types.
+
+If you’re not having `any` in your plugin or are starting a new plugin, you should enable the
+[`@typescript-eslint/no-explicit-any`](https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-explicit-any.md)
+linting rule for your plugin via the [`.eslintrc.js`](https://github.com/elastic/kibana/blob/master/.eslintrc.js) config.
+
+### Avoid non-null assertions
+
+You should try avoiding non-null assertions (`!.`) wherever possible. By using them you tell
+TypeScript, that something is not null even though by it’s type it could be. Usage of non-null
+assertions is most often a side-effect of you actually checked that the variable is not `null`
+but TypeScript doesn’t correctly carry on that information till the usage of the variable.
+
+In most cases it’s possible to replace the non-null assertion by structuring your code/checks slightly different
+or using [user defined type guards](https://www.typescriptlang.org/docs/handbook/advanced-types.html#user-defined-type-guards)
+to properly tell TypeScript what type a variable has.
+
+Using non-null assertion increases the risk for future bugs. In case the condition under which we assumed that the
+variable can’t be null has changed (potentially even due to changes in compeltely different files), the non-null
+assertion would now wrongly disable proper type checking for us.
+
+If you’re not using non-null assertions in your plugin or are starting a new plugin, consider enabling the
+[`@typescript-eslint/no-non-null-assertion`](https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-non-null-assertion.md)
+linting rule for you plugin in the [`.eslintrc.js`](https://github.com/elastic/kibana/blob/master/.eslintrc.js) config.
+
 ### Return/throw early from functions
 
 To avoid deep nesting of if-statements, always return a function's value as early
diff --git a/config/kibana.yml b/config/kibana.yml
index 7d49fb37e03208..9525a6423d90a0 100644
--- a/config/kibana.yml
+++ b/config/kibana.yml
@@ -18,10 +18,6 @@
 # default to `true` starting in Kibana 7.0.
 #server.rewriteBasePath: false
 
-# Specifies the default route when opening Kibana. You can use this setting to modify
-# the landing page when opening Kibana.
-#server.defaultRoute: /app/kibana
-
 # The maximum payload size in bytes for incoming server requests.
 #server.maxPayloadBytes: 1048576
 
diff --git a/docs/api/saved-objects/find.asciidoc b/docs/api/saved-objects/find.asciidoc
index fd80951b1c9f25..f20ded78e07434 100644
--- a/docs/api/saved-objects/find.asciidoc
+++ b/docs/api/saved-objects/find.asciidoc
@@ -41,6 +41,11 @@ experimental[] Retrieve a paginated set of {kib} saved objects by various condit
 `has_reference`::
   (Optional, object) Filters to objects that have a relationship with the type and ID combination.
 
+`filter`::
+  (Optional, string) The filter is a KQL string with the caveat that if you filter with an attribute from your type saved object.
+  It should look like that savedObjectType.attributes.title: "myTitle". However, If you used a direct attribute of a saved object like `updatedAt`,
+  you will have to define your filter like that savedObjectType.updatedAt > 2018-12-22.
+
 NOTE: As objects change in {kib}, the results on each page of the response also
 change. Use the find API for traditional paginated results, but avoid using it to export large amounts of data.
 
diff --git a/docs/development/core/public/kibana-plugin-public.applicationsetup.registermountcontext.md b/docs/development/core/public/kibana-plugin-public.applicationsetup.registermountcontext.md
index 0b5bd8eeb36eca..f264ba500ed6ef 100644
--- a/docs/development/core/public/kibana-plugin-public.applicationsetup.registermountcontext.md
+++ b/docs/development/core/public/kibana-plugin-public.applicationsetup.registermountcontext.md
@@ -9,7 +9,7 @@ Register a context provider for application mounting. Will only be available to
 <b>Signature:</b>
 
 ```typescript
-registerMountContext<T extends keyof AppMountContext>(contextName: T, provider: IContextProvider<AppMountContext, T>): void;
+registerMountContext<T extends keyof AppMountContext>(contextName: T, provider: IContextProvider<App['mount'], T>): void;
 ```
 
 ## Parameters
@@ -17,7 +17,7 @@ registerMountContext<T extends keyof AppMountContext>(contextName: T, provider:
 |  Parameter | Type | Description |
 |  --- | --- | --- |
 |  contextName | <code>T</code> | The key of [AppMountContext](./kibana-plugin-public.appmountcontext.md) this provider's return value should be attached to. |
-|  provider | <code>IContextProvider&lt;AppMountContext, T&gt;</code> | A [IContextProvider](./kibana-plugin-public.icontextprovider.md) function |
+|  provider | <code>IContextProvider&lt;App['mount'], T&gt;</code> | A [IContextProvider](./kibana-plugin-public.icontextprovider.md) function |
 
 <b>Returns:</b>
 
diff --git a/docs/development/core/public/kibana-plugin-public.applicationstart.registermountcontext.md b/docs/development/core/public/kibana-plugin-public.applicationstart.registermountcontext.md
index fc86aaf658b681..62821fcbb92bad 100644
--- a/docs/development/core/public/kibana-plugin-public.applicationstart.registermountcontext.md
+++ b/docs/development/core/public/kibana-plugin-public.applicationstart.registermountcontext.md
@@ -9,7 +9,7 @@ Register a context provider for application mounting. Will only be available to
 <b>Signature:</b>
 
 ```typescript
-registerMountContext<T extends keyof AppMountContext>(contextName: T, provider: IContextProvider<AppMountContext, T>): void;
+registerMountContext<T extends keyof AppMountContext>(contextName: T, provider: IContextProvider<App['mount'], T>): void;
 ```
 
 ## Parameters
@@ -17,7 +17,7 @@ registerMountContext<T extends keyof AppMountContext>(contextName: T, provider:
 |  Parameter | Type | Description |
 |  --- | --- | --- |
 |  contextName | <code>T</code> | The key of [AppMountContext](./kibana-plugin-public.appmountcontext.md) this provider's return value should be attached to. |
-|  provider | <code>IContextProvider&lt;AppMountContext, T&gt;</code> | A [IContextProvider](./kibana-plugin-public.icontextprovider.md) function |
+|  provider | <code>IContextProvider&lt;App['mount'], T&gt;</code> | A [IContextProvider](./kibana-plugin-public.icontextprovider.md) function |
 
 <b>Returns:</b>
 
diff --git a/docs/development/core/public/kibana-plugin-public.contextsetup.createcontextcontainer.md b/docs/development/core/public/kibana-plugin-public.contextsetup.createcontextcontainer.md
index 2644596354e383..5334eee8425779 100644
--- a/docs/development/core/public/kibana-plugin-public.contextsetup.createcontextcontainer.md
+++ b/docs/development/core/public/kibana-plugin-public.contextsetup.createcontextcontainer.md
@@ -9,9 +9,9 @@ Creates a new [IContextContainer](./kibana-plugin-public.icontextcontainer.md) f
 <b>Signature:</b>
 
 ```typescript
-createContextContainer<TContext extends {}, THandlerReturn, THandlerParmaters extends any[] = []>(): IContextContainer<TContext, THandlerReturn, THandlerParmaters>;
+createContextContainer<THandler extends HandlerFunction<any>>(): IContextContainer<THandler>;
 ```
 <b>Returns:</b>
 
-`IContextContainer<TContext, THandlerReturn, THandlerParmaters>`
+`IContextContainer<THandler>`
 
diff --git a/docs/development/core/public/kibana-plugin-public.handlercontexttype.md b/docs/development/core/public/kibana-plugin-public.handlercontexttype.md
new file mode 100644
index 00000000000000..b083449d2b703f
--- /dev/null
+++ b/docs/development/core/public/kibana-plugin-public.handlercontexttype.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-public](./kibana-plugin-public.md) &gt; [HandlerContextType](./kibana-plugin-public.handlercontexttype.md)
+
+## HandlerContextType type
+
+Extracts the type of the first argument of a [HandlerFunction](./kibana-plugin-public.handlerfunction.md) to represent the type of the context.
+
+<b>Signature:</b>
+
+```typescript
+export declare type HandlerContextType<T extends HandlerFunction<any>> = T extends HandlerFunction<infer U> ? U : never;
+```
diff --git a/docs/development/core/public/kibana-plugin-public.handlerfunction.md b/docs/development/core/public/kibana-plugin-public.handlerfunction.md
new file mode 100644
index 00000000000000..98c342c17691d9
--- /dev/null
+++ b/docs/development/core/public/kibana-plugin-public.handlerfunction.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-public](./kibana-plugin-public.md) &gt; [HandlerFunction](./kibana-plugin-public.handlerfunction.md)
+
+## HandlerFunction type
+
+A function that accepts a context object and an optional number of additional arguments. Used for the generic types in [IContextContainer](./kibana-plugin-public.icontextcontainer.md)
+
+<b>Signature:</b>
+
+```typescript
+export declare type HandlerFunction<T extends object> = (context: T, ...args: any[]) => any;
+```
diff --git a/docs/development/core/public/kibana-plugin-public.handlerparameters.md b/docs/development/core/public/kibana-plugin-public.handlerparameters.md
new file mode 100644
index 00000000000000..f46c4b649e9436
--- /dev/null
+++ b/docs/development/core/public/kibana-plugin-public.handlerparameters.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-public](./kibana-plugin-public.md) &gt; [HandlerParameters](./kibana-plugin-public.handlerparameters.md)
+
+## HandlerParameters type
+
+Extracts the types of the additional arguments of a [HandlerFunction](./kibana-plugin-public.handlerfunction.md)<!-- -->, excluding the [HandlerContextType](./kibana-plugin-public.handlercontexttype.md)<!-- -->.
+
+<b>Signature:</b>
+
+```typescript
+export declare type HandlerParameters<T extends HandlerFunction<any>> = T extends (context: any, ...args: infer U) => any ? U : never;
+```
diff --git a/docs/development/core/public/kibana-plugin-public.icontextcontainer.createhandler.md b/docs/development/core/public/kibana-plugin-public.icontextcontainer.createhandler.md
index 2a995df45757f3..af3b5e3fc2eb65 100644
--- a/docs/development/core/public/kibana-plugin-public.icontextcontainer.createhandler.md
+++ b/docs/development/core/public/kibana-plugin-public.icontextcontainer.createhandler.md
@@ -9,7 +9,7 @@ Create a new handler function pre-wired to context for the plugin.
 <b>Signature:</b>
 
 ```typescript
-createHandler(pluginOpaqueId: PluginOpaqueId, handler: IContextHandler<TContext, THandlerReturn, THandlerParameters>): (...rest: THandlerParameters) => THandlerReturn extends Promise<any> ? THandlerReturn : Promise<THandlerReturn>;
+createHandler(pluginOpaqueId: PluginOpaqueId, handler: THandler): (...rest: HandlerParameters<THandler>) => ShallowPromise<ReturnType<THandler>>;
 ```
 
 ## Parameters
@@ -17,11 +17,11 @@ createHandler(pluginOpaqueId: PluginOpaqueId, handler: IContextHandler<TContext,
 |  Parameter | Type | Description |
 |  --- | --- | --- |
 |  pluginOpaqueId | <code>PluginOpaqueId</code> | The plugin opaque ID for the plugin that registers this handler. |
-|  handler | <code>IContextHandler&lt;TContext, THandlerReturn, THandlerParameters&gt;</code> | Handler function to pass context object to. |
+|  handler | <code>THandler</code> | Handler function to pass context object to. |
 
 <b>Returns:</b>
 
-`(...rest: THandlerParameters) => THandlerReturn extends Promise<any> ? THandlerReturn : Promise<THandlerReturn>`
+`(...rest: HandlerParameters<THandler>) => ShallowPromise<ReturnType<THandler>>`
 
 A function that takes `THandlerParameters`<!-- -->, calls `handler` with a new context, and returns a Promise of the `handler` return value.
 
diff --git a/docs/development/core/public/kibana-plugin-public.icontextcontainer.md b/docs/development/core/public/kibana-plugin-public.icontextcontainer.md
index 0bc7c8f3808d16..f16c07b3d7906d 100644
--- a/docs/development/core/public/kibana-plugin-public.icontextcontainer.md
+++ b/docs/development/core/public/kibana-plugin-public.icontextcontainer.md
@@ -9,7 +9,7 @@ An object that handles registration of context providers and configuring handler
 <b>Signature:</b>
 
 ```typescript
-export interface IContextContainer<TContext extends {}, THandlerReturn, THandlerParameters extends any[] = []> 
+export interface IContextContainer<THandler extends HandlerFunction<any>> 
 ```
 
 ## Methods
diff --git a/docs/development/core/public/kibana-plugin-public.icontextcontainer.registercontext.md b/docs/development/core/public/kibana-plugin-public.icontextcontainer.registercontext.md
index 2cf10a6ec841d6..775f95bd7affaa 100644
--- a/docs/development/core/public/kibana-plugin-public.icontextcontainer.registercontext.md
+++ b/docs/development/core/public/kibana-plugin-public.icontextcontainer.registercontext.md
@@ -9,7 +9,7 @@ Register a new context provider.
 <b>Signature:</b>
 
 ```typescript
-registerContext<TContextName extends keyof TContext>(pluginOpaqueId: PluginOpaqueId, contextName: TContextName, provider: IContextProvider<TContext, TContextName, THandlerParameters>): this;
+registerContext<TContextName extends keyof HandlerContextType<THandler>>(pluginOpaqueId: PluginOpaqueId, contextName: TContextName, provider: IContextProvider<THandler, TContextName>): this;
 ```
 
 ## Parameters
@@ -18,7 +18,7 @@ registerContext<TContextName extends keyof TContext>(pluginOpaqueId: PluginOpaqu
 |  --- | --- | --- |
 |  pluginOpaqueId | <code>PluginOpaqueId</code> | The plugin opaque ID for the plugin that registers this context. |
 |  contextName | <code>TContextName</code> | The key of the <code>TContext</code> object this provider supplies the value for. |
-|  provider | <code>IContextProvider&lt;TContext, TContextName, THandlerParameters&gt;</code> | A [IContextProvider](./kibana-plugin-public.icontextprovider.md) to be called each time a new context is created. |
+|  provider | <code>IContextProvider&lt;THandler, TContextName&gt;</code> | A [IContextProvider](./kibana-plugin-public.icontextprovider.md) to be called each time a new context is created. |
 
 <b>Returns:</b>
 
diff --git a/docs/development/core/public/kibana-plugin-public.icontexthandler.md b/docs/development/core/public/kibana-plugin-public.icontexthandler.md
deleted file mode 100644
index 2251b1131c3138..00000000000000
--- a/docs/development/core/public/kibana-plugin-public.icontexthandler.md
+++ /dev/null
@@ -1,18 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-public](./kibana-plugin-public.md) &gt; [IContextHandler](./kibana-plugin-public.icontexthandler.md)
-
-## IContextHandler type
-
-A function registered by a plugin to perform some action.
-
-<b>Signature:</b>
-
-```typescript
-export declare type IContextHandler<TContext extends {}, TReturn, THandlerParameters extends any[] = []> = (context: TContext, ...rest: THandlerParameters) => TReturn;
-```
-
-## Remarks
-
-A new `TContext` will be built for each handler before invoking.
-
diff --git a/docs/development/core/public/kibana-plugin-public.icontextprovider.md b/docs/development/core/public/kibana-plugin-public.icontextprovider.md
index a84917d6e14420..40f0ee3782f6da 100644
--- a/docs/development/core/public/kibana-plugin-public.icontextprovider.md
+++ b/docs/development/core/public/kibana-plugin-public.icontextprovider.md
@@ -9,7 +9,7 @@ A function that returns a context value for a specific key of given context type
 <b>Signature:</b>
 
 ```typescript
-export declare type IContextProvider<TContext extends Record<string, any>, TContextName extends keyof TContext, TProviderParameters extends any[] = []> = (context: Partial<TContext>, ...rest: TProviderParameters) => Promise<TContext[TContextName]> | TContext[TContextName];
+export declare type IContextProvider<THandler extends HandlerFunction<any>, TContextName extends keyof HandlerContextType<THandler>> = (context: Partial<HandlerContextType<THandler>>, ...rest: HandlerParameters<THandler>) => Promise<HandlerContextType<THandler>[TContextName]> | HandlerContextType<THandler>[TContextName];
 ```
 
 ## Remarks
diff --git a/docs/development/core/public/kibana-plugin-public.md b/docs/development/core/public/kibana-plugin-public.md
index e2ef807a75018c..7531cf9a063336 100644
--- a/docs/development/core/public/kibana-plugin-public.md
+++ b/docs/development/core/public/kibana-plugin-public.md
@@ -91,11 +91,13 @@ The plugin integrates with the core system via lifecycle events: `setup`<!-- -->
 |  [AppUnmount](./kibana-plugin-public.appunmount.md) | A function called when an application should be unmounted from the page. This function should be synchronous. |
 |  [ChromeHelpExtension](./kibana-plugin-public.chromehelpextension.md) |  |
 |  [ChromeNavLinkUpdateableFields](./kibana-plugin-public.chromenavlinkupdateablefields.md) |  |
+|  [HandlerContextType](./kibana-plugin-public.handlercontexttype.md) | Extracts the type of the first argument of a [HandlerFunction](./kibana-plugin-public.handlerfunction.md) to represent the type of the context. |
+|  [HandlerFunction](./kibana-plugin-public.handlerfunction.md) | A function that accepts a context object and an optional number of additional arguments. Used for the generic types in [IContextContainer](./kibana-plugin-public.icontextcontainer.md) |
+|  [HandlerParameters](./kibana-plugin-public.handlerparameters.md) | Extracts the types of the additional arguments of a [HandlerFunction](./kibana-plugin-public.handlerfunction.md)<!-- -->, excluding the [HandlerContextType](./kibana-plugin-public.handlercontexttype.md)<!-- -->. |
 |  [HttpBody](./kibana-plugin-public.httpbody.md) |  |
 |  [HttpHandler](./kibana-plugin-public.httphandler.md) |  |
 |  [HttpSetup](./kibana-plugin-public.httpsetup.md) |  |
 |  [HttpStart](./kibana-plugin-public.httpstart.md) |  |
-|  [IContextHandler](./kibana-plugin-public.icontexthandler.md) | A function registered by a plugin to perform some action. |
 |  [IContextProvider](./kibana-plugin-public.icontextprovider.md) | A function that returns a context value for a specific key of given context type. |
 |  [OverlayBannerMount](./kibana-plugin-public.overlaybannermount.md) | A function that will mount the banner inside the provided element. |
 |  [OverlayBannerUnmount](./kibana-plugin-public.overlaybannerunmount.md) | A function that will unmount the banner from the element. |
diff --git a/docs/development/core/public/kibana-plugin-public.savedobjectsclient.find.md b/docs/development/core/public/kibana-plugin-public.savedobjectsclient.find.md
index 80ddb1aea18d15..a4fa3f17d0d94f 100644
--- a/docs/development/core/public/kibana-plugin-public.savedobjectsclient.find.md
+++ b/docs/development/core/public/kibana-plugin-public.savedobjectsclient.find.md
@@ -9,5 +9,5 @@ Search for objects
 <b>Signature:</b>
 
 ```typescript
-find: <T extends SavedObjectAttributes>(options: Pick<SavedObjectFindOptionsServer, "search" | "type" | "defaultSearchOperator" | "searchFields" | "sortField" | "hasReference" | "page" | "perPage" | "fields">) => Promise<SavedObjectsFindResponsePublic<T>>;
+find: <T extends SavedObjectAttributes>(options: Pick<SavedObjectFindOptionsServer, "search" | "filter" | "type" | "page" | "perPage" | "sortField" | "fields" | "searchFields" | "hasReference" | "defaultSearchOperator">) => Promise<SavedObjectsFindResponsePublic<T>>;
 ```
diff --git a/docs/development/core/public/kibana-plugin-public.savedobjectsclient.md b/docs/development/core/public/kibana-plugin-public.savedobjectsclient.md
index 2ad9591426ab26..00a71d25cea38a 100644
--- a/docs/development/core/public/kibana-plugin-public.savedobjectsclient.md
+++ b/docs/development/core/public/kibana-plugin-public.savedobjectsclient.md
@@ -20,7 +20,7 @@ export declare class SavedObjectsClient
 |  [bulkGet](./kibana-plugin-public.savedobjectsclient.bulkget.md) |  | <code>(objects?: {</code><br/><code>        id: string;</code><br/><code>        type: string;</code><br/><code>    }[]) =&gt; Promise&lt;SavedObjectsBatchResponse&lt;SavedObjectAttributes&gt;&gt;</code> | Returns an array of objects by id |
 |  [create](./kibana-plugin-public.savedobjectsclient.create.md) |  | <code>&lt;T extends SavedObjectAttributes&gt;(type: string, attributes: T, options?: SavedObjectsCreateOptions) =&gt; Promise&lt;SimpleSavedObject&lt;T&gt;&gt;</code> | Persists an object |
 |  [delete](./kibana-plugin-public.savedobjectsclient.delete.md) |  | <code>(type: string, id: string) =&gt; Promise&lt;{}&gt;</code> | Deletes an object |
-|  [find](./kibana-plugin-public.savedobjectsclient.find.md) |  | <code>&lt;T extends SavedObjectAttributes&gt;(options: Pick&lt;SavedObjectFindOptionsServer, &quot;search&quot; &#124; &quot;type&quot; &#124; &quot;defaultSearchOperator&quot; &#124; &quot;searchFields&quot; &#124; &quot;sortField&quot; &#124; &quot;hasReference&quot; &#124; &quot;page&quot; &#124; &quot;perPage&quot; &#124; &quot;fields&quot;&gt;) =&gt; Promise&lt;SavedObjectsFindResponsePublic&lt;T&gt;&gt;</code> | Search for objects |
+|  [find](./kibana-plugin-public.savedobjectsclient.find.md) |  | <code>&lt;T extends SavedObjectAttributes&gt;(options: Pick&lt;SavedObjectFindOptionsServer, &quot;search&quot; &#124; &quot;filter&quot; &#124; &quot;type&quot; &#124; &quot;page&quot; &#124; &quot;perPage&quot; &#124; &quot;sortField&quot; &#124; &quot;fields&quot; &#124; &quot;searchFields&quot; &#124; &quot;hasReference&quot; &#124; &quot;defaultSearchOperator&quot;&gt;) =&gt; Promise&lt;SavedObjectsFindResponsePublic&lt;T&gt;&gt;</code> | Search for objects |
 |  [get](./kibana-plugin-public.savedobjectsclient.get.md) |  | <code>&lt;T extends SavedObjectAttributes&gt;(type: string, id: string) =&gt; Promise&lt;SimpleSavedObject&lt;T&gt;&gt;</code> | Fetches a single object |
 
 ## Methods
diff --git a/docs/development/core/public/kibana-plugin-public.savedobjectsfindoptions.filter.md b/docs/development/core/public/kibana-plugin-public.savedobjectsfindoptions.filter.md
new file mode 100644
index 00000000000000..82237134e0b22c
--- /dev/null
+++ b/docs/development/core/public/kibana-plugin-public.savedobjectsfindoptions.filter.md
@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-public](./kibana-plugin-public.md) &gt; [SavedObjectsFindOptions](./kibana-plugin-public.savedobjectsfindoptions.md) &gt; [filter](./kibana-plugin-public.savedobjectsfindoptions.filter.md)
+
+## SavedObjectsFindOptions.filter property
+
+<b>Signature:</b>
+
+```typescript
+filter?: string;
+```
diff --git a/docs/development/core/public/kibana-plugin-public.savedobjectsfindoptions.md b/docs/development/core/public/kibana-plugin-public.savedobjectsfindoptions.md
index f90c60ebdd0dc1..4c916431d4333f 100644
--- a/docs/development/core/public/kibana-plugin-public.savedobjectsfindoptions.md
+++ b/docs/development/core/public/kibana-plugin-public.savedobjectsfindoptions.md
@@ -17,6 +17,7 @@ export interface SavedObjectsFindOptions extends SavedObjectsBaseOptions
 |  --- | --- | --- |
 |  [defaultSearchOperator](./kibana-plugin-public.savedobjectsfindoptions.defaultsearchoperator.md) | <code>'AND' &#124; 'OR'</code> |  |
 |  [fields](./kibana-plugin-public.savedobjectsfindoptions.fields.md) | <code>string[]</code> | An array of fields to include in the results |
+|  [filter](./kibana-plugin-public.savedobjectsfindoptions.filter.md) | <code>string</code> |  |
 |  [hasReference](./kibana-plugin-public.savedobjectsfindoptions.hasreference.md) | <code>{</code><br/><code>        type: string;</code><br/><code>        id: string;</code><br/><code>    }</code> |  |
 |  [page](./kibana-plugin-public.savedobjectsfindoptions.page.md) | <code>number</code> |  |
 |  [perPage](./kibana-plugin-public.savedobjectsfindoptions.perpage.md) | <code>number</code> |  |
diff --git a/docs/development/core/server/kibana-plugin-server.basepath.get.md b/docs/development/core/server/kibana-plugin-server.basepath.get.md
new file mode 100644
index 00000000000000..04feca7ccc5a87
--- /dev/null
+++ b/docs/development/core/server/kibana-plugin-server.basepath.get.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-server](./kibana-plugin-server.md) &gt; [BasePath](./kibana-plugin-server.basepath.md) &gt; [get](./kibana-plugin-server.basepath.get.md)
+
+## BasePath.get property
+
+returns `basePath` value, specific for an incoming request.
+
+<b>Signature:</b>
+
+```typescript
+get: (request: LegacyRequest | KibanaRequest<unknown, unknown, unknown>) => string;
+```
diff --git a/docs/development/core/server/kibana-plugin-server.basepath.md b/docs/development/core/server/kibana-plugin-server.basepath.md
new file mode 100644
index 00000000000000..bfa1ea02aec178
--- /dev/null
+++ b/docs/development/core/server/kibana-plugin-server.basepath.md
@@ -0,0 +1,28 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-server](./kibana-plugin-server.md) &gt; [BasePath](./kibana-plugin-server.basepath.md)
+
+## BasePath class
+
+Access or manipulate the Kibana base path
+
+<b>Signature:</b>
+
+```typescript
+export declare class BasePath 
+```
+
+## Properties
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [get](./kibana-plugin-server.basepath.get.md) |  | <code>(request: LegacyRequest &#124; KibanaRequest&lt;unknown, unknown, unknown&gt;) =&gt; string</code> | returns <code>basePath</code> value, specific for an incoming request. |
+|  [prepend](./kibana-plugin-server.basepath.prepend.md) |  | <code>(path: string) =&gt; string</code> | returns a new <code>basePath</code> value, prefixed with passed <code>url</code>. |
+|  [remove](./kibana-plugin-server.basepath.remove.md) |  | <code>(path: string) =&gt; string</code> | returns a new <code>basePath</code> value, cleaned up from passed <code>url</code>. |
+|  [serverBasePath](./kibana-plugin-server.basepath.serverbasepath.md) |  | <code>string</code> | returns the server's basePath<!-- -->See [BasePath.get](./kibana-plugin-server.basepath.get.md) for getting the basePath value for a specific request |
+|  [set](./kibana-plugin-server.basepath.set.md) |  | <code>(request: LegacyRequest &#124; KibanaRequest&lt;unknown, unknown, unknown&gt;, requestSpecificBasePath: string) =&gt; void</code> | sets <code>basePath</code> value, specific for an incoming request. |
+
+## Remarks
+
+The constructor for this class is marked as internal. Third-party code should not call the constructor directly or create subclasses that extend the `BasePath` class.
+
diff --git a/docs/development/core/server/kibana-plugin-server.basepath.prepend.md b/docs/development/core/server/kibana-plugin-server.basepath.prepend.md
new file mode 100644
index 00000000000000..113e8d9bf48803
--- /dev/null
+++ b/docs/development/core/server/kibana-plugin-server.basepath.prepend.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-server](./kibana-plugin-server.md) &gt; [BasePath](./kibana-plugin-server.basepath.md) &gt; [prepend](./kibana-plugin-server.basepath.prepend.md)
+
+## BasePath.prepend property
+
+returns a new `basePath` value, prefixed with passed `url`<!-- -->.
+
+<b>Signature:</b>
+
+```typescript
+prepend: (path: string) => string;
+```
diff --git a/docs/development/core/server/kibana-plugin-server.basepath.remove.md b/docs/development/core/server/kibana-plugin-server.basepath.remove.md
new file mode 100644
index 00000000000000..c5f1092d2969d9
--- /dev/null
+++ b/docs/development/core/server/kibana-plugin-server.basepath.remove.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-server](./kibana-plugin-server.md) &gt; [BasePath](./kibana-plugin-server.basepath.md) &gt; [remove](./kibana-plugin-server.basepath.remove.md)
+
+## BasePath.remove property
+
+returns a new `basePath` value, cleaned up from passed `url`<!-- -->.
+
+<b>Signature:</b>
+
+```typescript
+remove: (path: string) => string;
+```
diff --git a/docs/development/core/server/kibana-plugin-server.basepath.serverbasepath.md b/docs/development/core/server/kibana-plugin-server.basepath.serverbasepath.md
new file mode 100644
index 00000000000000..d7e45a92dba6d7
--- /dev/null
+++ b/docs/development/core/server/kibana-plugin-server.basepath.serverbasepath.md
@@ -0,0 +1,15 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-server](./kibana-plugin-server.md) &gt; [BasePath](./kibana-plugin-server.basepath.md) &gt; [serverBasePath](./kibana-plugin-server.basepath.serverbasepath.md)
+
+## BasePath.serverBasePath property
+
+returns the server's basePath
+
+See [BasePath.get](./kibana-plugin-server.basepath.get.md) for getting the basePath value for a specific request
+
+<b>Signature:</b>
+
+```typescript
+readonly serverBasePath: string;
+```
diff --git a/docs/development/core/server/kibana-plugin-server.basepath.set.md b/docs/development/core/server/kibana-plugin-server.basepath.set.md
new file mode 100644
index 00000000000000..cec70ee853bfa4
--- /dev/null
+++ b/docs/development/core/server/kibana-plugin-server.basepath.set.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-server](./kibana-plugin-server.md) &gt; [BasePath](./kibana-plugin-server.basepath.md) &gt; [set](./kibana-plugin-server.basepath.set.md)
+
+## BasePath.set property
+
+sets `basePath` value, specific for an incoming request.
+
+<b>Signature:</b>
+
+```typescript
+set: (request: LegacyRequest | KibanaRequest<unknown, unknown, unknown>, requestSpecificBasePath: string) => void;
+```
diff --git a/docs/development/core/server/kibana-plugin-server.contextsetup.createcontextcontainer.md b/docs/development/core/server/kibana-plugin-server.contextsetup.createcontextcontainer.md
index f44e6a3d7640b7..7096bfc43a520b 100644
--- a/docs/development/core/server/kibana-plugin-server.contextsetup.createcontextcontainer.md
+++ b/docs/development/core/server/kibana-plugin-server.contextsetup.createcontextcontainer.md
@@ -9,9 +9,9 @@ Creates a new [IContextContainer](./kibana-plugin-server.icontextcontainer.md) f
 <b>Signature:</b>
 
 ```typescript
-createContextContainer<TContext extends {}, THandlerReturn, THandlerParmaters extends any[] = []>(): IContextContainer<TContext, THandlerReturn, THandlerParmaters>;
+createContextContainer<THandler extends HandlerFunction<any>>(): IContextContainer<THandler>;
 ```
 <b>Returns:</b>
 
-`IContextContainer<TContext, THandlerReturn, THandlerParmaters>`
+`IContextContainer<THandler>`
 
diff --git a/docs/development/core/server/kibana-plugin-server.coresetup.http.md b/docs/development/core/server/kibana-plugin-server.coresetup.http.md
index 254f2728abef16..8474f4ef940dc6 100644
--- a/docs/development/core/server/kibana-plugin-server.coresetup.http.md
+++ b/docs/development/core/server/kibana-plugin-server.coresetup.http.md
@@ -14,7 +14,7 @@ http: {
         registerOnPostAuth: HttpServiceSetup['registerOnPostAuth'];
         basePath: HttpServiceSetup['basePath'];
         isTlsEnabled: HttpServiceSetup['isTlsEnabled'];
-        registerRouteHandlerContext: <T extends keyof RequestHandlerContext>(name: T, provider: RequestHandlerContextProvider<RequestHandlerContext>) => RequestHandlerContextContainer<RequestHandlerContext>;
+        registerRouteHandlerContext: <T extends keyof RequestHandlerContext>(name: T, provider: RequestHandlerContextProvider<T>) => RequestHandlerContextContainer;
         createRouter: () => IRouter;
     };
 ```
diff --git a/docs/development/core/server/kibana-plugin-server.coresetup.md b/docs/development/core/server/kibana-plugin-server.coresetup.md
index ed487a570f2863..528557e91bd17f 100644
--- a/docs/development/core/server/kibana-plugin-server.coresetup.md
+++ b/docs/development/core/server/kibana-plugin-server.coresetup.md
@@ -18,5 +18,5 @@ export interface CoreSetup
 |  --- | --- | --- |
 |  [context](./kibana-plugin-server.coresetup.context.md) | <code>{</code><br/><code>        createContextContainer: ContextSetup['createContextContainer'];</code><br/><code>    }</code> |  |
 |  [elasticsearch](./kibana-plugin-server.coresetup.elasticsearch.md) | <code>{</code><br/><code>        adminClient$: Observable&lt;ClusterClient&gt;;</code><br/><code>        dataClient$: Observable&lt;ClusterClient&gt;;</code><br/><code>        createClient: (type: string, clientConfig?: Partial&lt;ElasticsearchClientConfig&gt;) =&gt; ClusterClient;</code><br/><code>    }</code> |  |
-|  [http](./kibana-plugin-server.coresetup.http.md) | <code>{</code><br/><code>        createCookieSessionStorageFactory: HttpServiceSetup['createCookieSessionStorageFactory'];</code><br/><code>        registerOnPreAuth: HttpServiceSetup['registerOnPreAuth'];</code><br/><code>        registerAuth: HttpServiceSetup['registerAuth'];</code><br/><code>        registerOnPostAuth: HttpServiceSetup['registerOnPostAuth'];</code><br/><code>        basePath: HttpServiceSetup['basePath'];</code><br/><code>        isTlsEnabled: HttpServiceSetup['isTlsEnabled'];</code><br/><code>        registerRouteHandlerContext: &lt;T extends keyof RequestHandlerContext&gt;(name: T, provider: RequestHandlerContextProvider&lt;RequestHandlerContext&gt;) =&gt; RequestHandlerContextContainer&lt;RequestHandlerContext&gt;;</code><br/><code>        createRouter: () =&gt; IRouter;</code><br/><code>    }</code> |  |
+|  [http](./kibana-plugin-server.coresetup.http.md) | <code>{</code><br/><code>        createCookieSessionStorageFactory: HttpServiceSetup['createCookieSessionStorageFactory'];</code><br/><code>        registerOnPreAuth: HttpServiceSetup['registerOnPreAuth'];</code><br/><code>        registerAuth: HttpServiceSetup['registerAuth'];</code><br/><code>        registerOnPostAuth: HttpServiceSetup['registerOnPostAuth'];</code><br/><code>        basePath: HttpServiceSetup['basePath'];</code><br/><code>        isTlsEnabled: HttpServiceSetup['isTlsEnabled'];</code><br/><code>        registerRouteHandlerContext: &lt;T extends keyof RequestHandlerContext&gt;(name: T, provider: RequestHandlerContextProvider&lt;T&gt;) =&gt; RequestHandlerContextContainer;</code><br/><code>        createRouter: () =&gt; IRouter;</code><br/><code>    }</code> |  |
 
diff --git a/docs/development/core/server/kibana-plugin-server.handlercontexttype.md b/docs/development/core/server/kibana-plugin-server.handlercontexttype.md
new file mode 100644
index 00000000000000..e8f1f346e8b8e7
--- /dev/null
+++ b/docs/development/core/server/kibana-plugin-server.handlercontexttype.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-server](./kibana-plugin-server.md) &gt; [HandlerContextType](./kibana-plugin-server.handlercontexttype.md)
+
+## HandlerContextType type
+
+Extracts the type of the first argument of a [HandlerFunction](./kibana-plugin-server.handlerfunction.md) to represent the type of the context.
+
+<b>Signature:</b>
+
+```typescript
+export declare type HandlerContextType<T extends HandlerFunction<any>> = T extends HandlerFunction<infer U> ? U : never;
+```
diff --git a/docs/development/core/server/kibana-plugin-server.handlerfunction.md b/docs/development/core/server/kibana-plugin-server.handlerfunction.md
new file mode 100644
index 00000000000000..97acd37946fc94
--- /dev/null
+++ b/docs/development/core/server/kibana-plugin-server.handlerfunction.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-server](./kibana-plugin-server.md) &gt; [HandlerFunction](./kibana-plugin-server.handlerfunction.md)
+
+## HandlerFunction type
+
+A function that accepts a context object and an optional number of additional arguments. Used for the generic types in [IContextContainer](./kibana-plugin-server.icontextcontainer.md)
+
+<b>Signature:</b>
+
+```typescript
+export declare type HandlerFunction<T extends object> = (context: T, ...args: any[]) => any;
+```
diff --git a/docs/development/core/server/kibana-plugin-server.handlerparameters.md b/docs/development/core/server/kibana-plugin-server.handlerparameters.md
new file mode 100644
index 00000000000000..3dd7998a71a1f2
--- /dev/null
+++ b/docs/development/core/server/kibana-plugin-server.handlerparameters.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-server](./kibana-plugin-server.md) &gt; [HandlerParameters](./kibana-plugin-server.handlerparameters.md)
+
+## HandlerParameters type
+
+Extracts the types of the additional arguments of a [HandlerFunction](./kibana-plugin-server.handlerfunction.md)<!-- -->, excluding the [HandlerContextType](./kibana-plugin-server.handlercontexttype.md)<!-- -->.
+
+<b>Signature:</b>
+
+```typescript
+export declare type HandlerParameters<T extends HandlerFunction<any>> = T extends (context: any, ...args: infer U) => any ? U : never;
+```
diff --git a/docs/development/core/server/kibana-plugin-server.httpserversetup.basepath.md b/docs/development/core/server/kibana-plugin-server.httpserversetup.basepath.md
index 5cfb2f5c4e8b43..173262de10494f 100644
--- a/docs/development/core/server/kibana-plugin-server.httpserversetup.basepath.md
+++ b/docs/development/core/server/kibana-plugin-server.httpserversetup.basepath.md
@@ -4,13 +4,10 @@
 
 ## HttpServerSetup.basePath property
 
+[BasePath](./kibana-plugin-server.basepath.md)
+
 <b>Signature:</b>
 
 ```typescript
-basePath: {
-        get: (request: KibanaRequest | LegacyRequest) => string;
-        set: (request: KibanaRequest | LegacyRequest, basePath: string) => void;
-        prepend: (url: string) => string;
-        remove: (url: string) => string;
-    };
+basePath: IBasePath;
 ```
diff --git a/docs/development/core/server/kibana-plugin-server.httpserversetup.md b/docs/development/core/server/kibana-plugin-server.httpserversetup.md
index f495de850aff5e..7a126383116e7b 100644
--- a/docs/development/core/server/kibana-plugin-server.httpserversetup.md
+++ b/docs/development/core/server/kibana-plugin-server.httpserversetup.md
@@ -17,7 +17,7 @@ export interface HttpServerSetup
 |  Property | Type | Description |
 |  --- | --- | --- |
 |  [auth](./kibana-plugin-server.httpserversetup.auth.md) | <code>{</code><br/><code>        get: GetAuthState;</code><br/><code>        isAuthenticated: IsAuthenticated;</code><br/><code>        getAuthHeaders: GetAuthHeaders;</code><br/><code>    }</code> |  |
-|  [basePath](./kibana-plugin-server.httpserversetup.basepath.md) | <code>{</code><br/><code>        get: (request: KibanaRequest &#124; LegacyRequest) =&gt; string;</code><br/><code>        set: (request: KibanaRequest &#124; LegacyRequest, basePath: string) =&gt; void;</code><br/><code>        prepend: (url: string) =&gt; string;</code><br/><code>        remove: (url: string) =&gt; string;</code><br/><code>    }</code> |  |
+|  [basePath](./kibana-plugin-server.httpserversetup.basepath.md) | <code>IBasePath</code> | [BasePath](./kibana-plugin-server.basepath.md) |
 |  [createCookieSessionStorageFactory](./kibana-plugin-server.httpserversetup.createcookiesessionstoragefactory.md) | <code>&lt;T&gt;(cookieOptions: SessionStorageCookieOptions&lt;T&gt;) =&gt; Promise&lt;SessionStorageFactory&lt;T&gt;&gt;</code> | Creates cookie based session storage factory [SessionStorageFactory](./kibana-plugin-server.sessionstoragefactory.md) |
 |  [isTlsEnabled](./kibana-plugin-server.httpserversetup.istlsenabled.md) | <code>boolean</code> | Flag showing whether a server was configured to use TLS connection. |
 |  [registerAuth](./kibana-plugin-server.httpserversetup.registerauth.md) | <code>(handler: AuthenticationHandler) =&gt; void</code> | To define custom authentication and/or authorization mechanism for incoming requests. A handler should return a state to associate with the incoming request. The state can be retrieved later via http.auth.get(..) Only one AuthenticationHandler can be registered. |
diff --git a/docs/development/core/server/kibana-plugin-server.httpservicesetup.md b/docs/development/core/server/kibana-plugin-server.httpservicesetup.md
index 92bf158ad33129..eec63cf5c80931 100644
--- a/docs/development/core/server/kibana-plugin-server.httpservicesetup.md
+++ b/docs/development/core/server/kibana-plugin-server.httpservicesetup.md
@@ -10,6 +10,6 @@
 ```typescript
 export declare type HttpServiceSetup = Omit<HttpServerSetup, 'registerRouter'> & {
     createRouter: (path: string, plugin?: PluginOpaqueId) => IRouter;
-    registerRouteHandlerContext: <T extends keyof RequestHandlerContext>(pluginOpaqueId: PluginOpaqueId, contextName: T, provider: RequestHandlerContextProvider<RequestHandlerContext>) => RequestHandlerContextContainer<RequestHandlerContext>;
+    registerRouteHandlerContext: <T extends keyof RequestHandlerContext>(pluginOpaqueId: PluginOpaqueId, contextName: T, provider: RequestHandlerContextProvider<T>) => RequestHandlerContextContainer;
 };
 ```
diff --git a/docs/development/core/server/kibana-plugin-server.ibasepath.md b/docs/development/core/server/kibana-plugin-server.ibasepath.md
new file mode 100644
index 00000000000000..2baa8d623ce97b
--- /dev/null
+++ b/docs/development/core/server/kibana-plugin-server.ibasepath.md
@@ -0,0 +1,15 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-server](./kibana-plugin-server.md) &gt; [IBasePath](./kibana-plugin-server.ibasepath.md)
+
+## IBasePath type
+
+Access or manipulate the Kibana base path
+
+[BasePath](./kibana-plugin-server.basepath.md)
+
+<b>Signature:</b>
+
+```typescript
+export declare type IBasePath = Pick<BasePath, keyof BasePath>;
+```
diff --git a/docs/development/core/server/kibana-plugin-server.icontextcontainer.createhandler.md b/docs/development/core/server/kibana-plugin-server.icontextcontainer.createhandler.md
index c5549ab017e530..09a9e28d6d0fe8 100644
--- a/docs/development/core/server/kibana-plugin-server.icontextcontainer.createhandler.md
+++ b/docs/development/core/server/kibana-plugin-server.icontextcontainer.createhandler.md
@@ -9,7 +9,7 @@ Create a new handler function pre-wired to context for the plugin.
 <b>Signature:</b>
 
 ```typescript
-createHandler(pluginOpaqueId: PluginOpaqueId, handler: IContextHandler<TContext, THandlerReturn, THandlerParameters>): (...rest: THandlerParameters) => THandlerReturn extends Promise<any> ? THandlerReturn : Promise<THandlerReturn>;
+createHandler(pluginOpaqueId: PluginOpaqueId, handler: THandler): (...rest: HandlerParameters<THandler>) => ShallowPromise<ReturnType<THandler>>;
 ```
 
 ## Parameters
@@ -17,11 +17,11 @@ createHandler(pluginOpaqueId: PluginOpaqueId, handler: IContextHandler<TContext,
 |  Parameter | Type | Description |
 |  --- | --- | --- |
 |  pluginOpaqueId | <code>PluginOpaqueId</code> | The plugin opaque ID for the plugin that registers this handler. |
-|  handler | <code>IContextHandler&lt;TContext, THandlerReturn, THandlerParameters&gt;</code> | Handler function to pass context object to. |
+|  handler | <code>THandler</code> | Handler function to pass context object to. |
 
 <b>Returns:</b>
 
-`(...rest: THandlerParameters) => THandlerReturn extends Promise<any> ? THandlerReturn : Promise<THandlerReturn>`
+`(...rest: HandlerParameters<THandler>) => ShallowPromise<ReturnType<THandler>>`
 
 A function that takes `THandlerParameters`<!-- -->, calls `handler` with a new context, and returns a Promise of the `handler` return value.
 
diff --git a/docs/development/core/server/kibana-plugin-server.icontextcontainer.md b/docs/development/core/server/kibana-plugin-server.icontextcontainer.md
index 1ab699be105b4b..114da31442ff9b 100644
--- a/docs/development/core/server/kibana-plugin-server.icontextcontainer.md
+++ b/docs/development/core/server/kibana-plugin-server.icontextcontainer.md
@@ -9,7 +9,7 @@ An object that handles registration of context providers and configuring handler
 <b>Signature:</b>
 
 ```typescript
-export interface IContextContainer<TContext extends {}, THandlerReturn, THandlerParameters extends any[] = []> 
+export interface IContextContainer<THandler extends HandlerFunction<any>> 
 ```
 
 ## Methods
diff --git a/docs/development/core/server/kibana-plugin-server.icontextcontainer.registercontext.md b/docs/development/core/server/kibana-plugin-server.icontextcontainer.registercontext.md
index 1a63f63dc91b46..30d3fc154d1e93 100644
--- a/docs/development/core/server/kibana-plugin-server.icontextcontainer.registercontext.md
+++ b/docs/development/core/server/kibana-plugin-server.icontextcontainer.registercontext.md
@@ -9,7 +9,7 @@ Register a new context provider.
 <b>Signature:</b>
 
 ```typescript
-registerContext<TContextName extends keyof TContext>(pluginOpaqueId: PluginOpaqueId, contextName: TContextName, provider: IContextProvider<TContext, TContextName, THandlerParameters>): this;
+registerContext<TContextName extends keyof HandlerContextType<THandler>>(pluginOpaqueId: PluginOpaqueId, contextName: TContextName, provider: IContextProvider<THandler, TContextName>): this;
 ```
 
 ## Parameters
@@ -18,7 +18,7 @@ registerContext<TContextName extends keyof TContext>(pluginOpaqueId: PluginOpaqu
 |  --- | --- | --- |
 |  pluginOpaqueId | <code>PluginOpaqueId</code> | The plugin opaque ID for the plugin that registers this context. |
 |  contextName | <code>TContextName</code> | The key of the <code>TContext</code> object this provider supplies the value for. |
-|  provider | <code>IContextProvider&lt;TContext, TContextName, THandlerParameters&gt;</code> | A [IContextProvider](./kibana-plugin-server.icontextprovider.md) to be called each time a new context is created. |
+|  provider | <code>IContextProvider&lt;THandler, TContextName&gt;</code> | A [IContextProvider](./kibana-plugin-server.icontextprovider.md) to be called each time a new context is created. |
 
 <b>Returns:</b>
 
diff --git a/docs/development/core/server/kibana-plugin-server.icontexthandler.md b/docs/development/core/server/kibana-plugin-server.icontexthandler.md
deleted file mode 100644
index c1f5acc22734aa..00000000000000
--- a/docs/development/core/server/kibana-plugin-server.icontexthandler.md
+++ /dev/null
@@ -1,18 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-server](./kibana-plugin-server.md) &gt; [IContextHandler](./kibana-plugin-server.icontexthandler.md)
-
-## IContextHandler type
-
-A function registered by a plugin to perform some action.
-
-<b>Signature:</b>
-
-```typescript
-export declare type IContextHandler<TContext extends {}, TReturn, THandlerParameters extends any[] = []> = (context: TContext, ...rest: THandlerParameters) => TReturn;
-```
-
-## Remarks
-
-A new `TContext` will be built for each handler before invoking.
-
diff --git a/docs/development/core/server/kibana-plugin-server.icontextprovider.md b/docs/development/core/server/kibana-plugin-server.icontextprovider.md
index 250e6a2be3f6ae..39ace8b9bc57ee 100644
--- a/docs/development/core/server/kibana-plugin-server.icontextprovider.md
+++ b/docs/development/core/server/kibana-plugin-server.icontextprovider.md
@@ -9,7 +9,7 @@ A function that returns a context value for a specific key of given context type
 <b>Signature:</b>
 
 ```typescript
-export declare type IContextProvider<TContext extends Record<string, any>, TContextName extends keyof TContext, TProviderParameters extends any[] = []> = (context: Partial<TContext>, ...rest: TProviderParameters) => Promise<TContext[TContextName]> | TContext[TContextName];
+export declare type IContextProvider<THandler extends HandlerFunction<any>, TContextName extends keyof HandlerContextType<THandler>> = (context: Partial<HandlerContextType<THandler>>, ...rest: HandlerParameters<THandler>) => Promise<HandlerContextType<THandler>[TContextName]> | HandlerContextType<THandler>[TContextName];
 ```
 
 ## Remarks
diff --git a/docs/development/core/server/kibana-plugin-server.internalcorestart.md b/docs/development/core/server/kibana-plugin-server.internalcorestart.md
deleted file mode 100644
index 4943249d284b04..00000000000000
--- a/docs/development/core/server/kibana-plugin-server.internalcorestart.md
+++ /dev/null
@@ -1,12 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-server](./kibana-plugin-server.md) &gt; [InternalCoreStart](./kibana-plugin-server.internalcorestart.md)
-
-## InternalCoreStart interface
-
-
-<b>Signature:</b>
-
-```typescript
-export interface InternalCoreStart 
-```
diff --git a/docs/development/core/server/kibana-plugin-server.md b/docs/development/core/server/kibana-plugin-server.md
index baecb180096de9..3c01e7aeef325b 100644
--- a/docs/development/core/server/kibana-plugin-server.md
+++ b/docs/development/core/server/kibana-plugin-server.md
@@ -16,12 +16,11 @@ The plugin integrates with the core system via lifecycle events: `setup`<!-- -->
 
 |  Class | Description |
 |  --- | --- |
+|  [BasePath](./kibana-plugin-server.basepath.md) | Access or manipulate the Kibana base path |
 |  [ClusterClient](./kibana-plugin-server.clusterclient.md) | Represents an Elasticsearch cluster API client and allows to call API on behalf of the internal Kibana user and the actual user that is derived from the request headers (via <code>asScoped(...)</code>). |
 |  [ElasticsearchErrorHelpers](./kibana-plugin-server.elasticsearcherrorhelpers.md) | Helpers for working with errors returned from the Elasticsearch service.Since the internal data of errors are subject to change, consumers of the Elasticsearch service should always use these helpers to classify errors instead of checking error internals such as <code>body.error.header[WWW-Authenticate]</code> |
 |  [KibanaRequest](./kibana-plugin-server.kibanarequest.md) | Kibana specific abstraction for an incoming request. |
 |  [SavedObjectsErrorHelpers](./kibana-plugin-server.savedobjectserrorhelpers.md) |  |
-|  [SavedObjectsSchema](./kibana-plugin-server.savedobjectsschema.md) |  |
-|  [SavedObjectsSerializer](./kibana-plugin-server.savedobjectsserializer.md) |  |
 |  [ScopedClusterClient](./kibana-plugin-server.scopedclusterclient.md) | Serves the same purpose as "normal" <code>ClusterClient</code> but exposes additional <code>callAsCurrentUser</code> method that doesn't use credentials of the Kibana internal user (as <code>callAsInternalUser</code> does) to request Elasticsearch API, but rather passes HTTP headers extracted from the current user request to the API |
 
 ## Enumerations
@@ -51,7 +50,6 @@ The plugin integrates with the core system via lifecycle events: `setup`<!-- -->
 |  [HttpServiceStart](./kibana-plugin-server.httpservicestart.md) |  |
 |  [IContextContainer](./kibana-plugin-server.icontextcontainer.md) | An object that handles registration of context providers and configuring handlers with context. |
 |  [IKibanaSocket](./kibana-plugin-server.ikibanasocket.md) | A tiny abstraction for TCP socket. |
-|  [InternalCoreStart](./kibana-plugin-server.internalcorestart.md) |  |
 |  [IRouter](./kibana-plugin-server.irouter.md) | Registers route handlers for specified resource path and method. |
 |  [KibanaRequestRoute](./kibana-plugin-server.kibanarequestroute.md) | Request specific route information exposed to a handler. |
 |  [LegacyRequest](./kibana-plugin-server.legacyrequest.md) |  |
@@ -95,7 +93,6 @@ The plugin integrates with the core system via lifecycle events: `setup`<!-- -->
 |  [SavedObjectsMigrationVersion](./kibana-plugin-server.savedobjectsmigrationversion.md) | Information about the migrations that have been applied to this SavedObject. When Kibana starts up, KibanaMigrator detects outdated documents and migrates them based on this value. For each migration that has been applied, the plugin's name is used as a key and the latest migration version as the value. |
 |  [SavedObjectsRawDoc](./kibana-plugin-server.savedobjectsrawdoc.md) | A raw document as represented directly in the saved object index. |
 |  [SavedObjectsResolveImportErrorsOptions](./kibana-plugin-server.savedobjectsresolveimporterrorsoptions.md) | Options to control the "resolve import" operation. |
-|  [SavedObjectsService](./kibana-plugin-server.savedobjectsservice.md) |  |
 |  [SavedObjectsUpdateOptions](./kibana-plugin-server.savedobjectsupdateoptions.md) |  |
 |  [SavedObjectsUpdateResponse](./kibana-plugin-server.savedobjectsupdateresponse.md) |  |
 |  [SessionStorage](./kibana-plugin-server.sessionstorage.md) | Provides an interface to store and retrieve data across requests. |
@@ -119,10 +116,13 @@ The plugin integrates with the core system via lifecycle events: `setup`<!-- -->
 |  [ElasticsearchClientConfig](./kibana-plugin-server.elasticsearchclientconfig.md) |  |
 |  [GetAuthHeaders](./kibana-plugin-server.getauthheaders.md) | Get headers to authenticate a user against Elasticsearch. |
 |  [GetAuthState](./kibana-plugin-server.getauthstate.md) | Get authentication state for a request. Returned by <code>auth</code> interceptor. |
+|  [HandlerContextType](./kibana-plugin-server.handlercontexttype.md) | Extracts the type of the first argument of a [HandlerFunction](./kibana-plugin-server.handlerfunction.md) to represent the type of the context. |
+|  [HandlerFunction](./kibana-plugin-server.handlerfunction.md) | A function that accepts a context object and an optional number of additional arguments. Used for the generic types in [IContextContainer](./kibana-plugin-server.icontextcontainer.md) |
+|  [HandlerParameters](./kibana-plugin-server.handlerparameters.md) | Extracts the types of the additional arguments of a [HandlerFunction](./kibana-plugin-server.handlerfunction.md)<!-- -->, excluding the [HandlerContextType](./kibana-plugin-server.handlercontexttype.md)<!-- -->. |
 |  [Headers](./kibana-plugin-server.headers.md) | Http request headers to read. |
 |  [HttpResponsePayload](./kibana-plugin-server.httpresponsepayload.md) | Data send to the client as a response payload. |
 |  [HttpServiceSetup](./kibana-plugin-server.httpservicesetup.md) |  |
-|  [IContextHandler](./kibana-plugin-server.icontexthandler.md) | A function registered by a plugin to perform some action. |
+|  [IBasePath](./kibana-plugin-server.ibasepath.md) | Access or manipulate the Kibana base path[BasePath](./kibana-plugin-server.basepath.md) |
 |  [IContextProvider](./kibana-plugin-server.icontextprovider.md) | A function that returns a context value for a specific key of given context type. |
 |  [IsAuthenticated](./kibana-plugin-server.isauthenticated.md) | Return authentication status for a request. |
 |  [KibanaResponseFactory](./kibana-plugin-server.kibanaresponsefactory.md) | Creates an object containing request response payload, HTTP headers, error details, and other data transmitted to the client. |
@@ -138,8 +138,6 @@ The plugin integrates with the core system via lifecycle events: `setup`<!-- -->
 |  [RequestHandler](./kibana-plugin-server.requesthandler.md) | A function executed when route path matched requested resource path. Request handler is expected to return a result of one of [KibanaResponseFactory](./kibana-plugin-server.kibanaresponsefactory.md) functions. |
 |  [RequestHandlerContextContainer](./kibana-plugin-server.requesthandlercontextcontainer.md) | An object that handles registration of http request context providers. |
 |  [RequestHandlerContextProvider](./kibana-plugin-server.requesthandlercontextprovider.md) | Context provider for request handler. Extends request context object with provided functionality or data. |
-|  [RequestHandlerParams](./kibana-plugin-server.requesthandlerparams.md) | Parameters passed to the request handler function. |
-|  [RequestHandlerReturn](./kibana-plugin-server.requesthandlerreturn.md) | Expected outcome the request handler function. |
 |  [ResponseError](./kibana-plugin-server.responseerror.md) | Error message and optional data send to the client in case of error. |
 |  [ResponseErrorAttributes](./kibana-plugin-server.responseerrorattributes.md) | Additional data to provide error details. |
 |  [ResponseHeaders](./kibana-plugin-server.responseheaders.md) | Http response headers to set. |
diff --git a/docs/development/core/server/kibana-plugin-server.requesthandlercontextcontainer.md b/docs/development/core/server/kibana-plugin-server.requesthandlercontextcontainer.md
index afdb4885970696..b76a9ce7d235ca 100644
--- a/docs/development/core/server/kibana-plugin-server.requesthandlercontextcontainer.md
+++ b/docs/development/core/server/kibana-plugin-server.requesthandlercontextcontainer.md
@@ -9,5 +9,5 @@ An object that handles registration of http request context providers.
 <b>Signature:</b>
 
 ```typescript
-export declare type RequestHandlerContextContainer<TContext> = IContextContainer<TContext, RequestHandlerReturn | Promise<RequestHandlerReturn>, RequestHandlerParams>;
+export declare type RequestHandlerContextContainer = IContextContainer<RequestHandler<any, any, any>>;
 ```
diff --git a/docs/development/core/server/kibana-plugin-server.requesthandlercontextprovider.md b/docs/development/core/server/kibana-plugin-server.requesthandlercontextprovider.md
index 0d9cc6b70b80c0..ea7294b721aabd 100644
--- a/docs/development/core/server/kibana-plugin-server.requesthandlercontextprovider.md
+++ b/docs/development/core/server/kibana-plugin-server.requesthandlercontextprovider.md
@@ -9,5 +9,5 @@ Context provider for request handler. Extends request context object with provid
 <b>Signature:</b>
 
 ```typescript
-export declare type RequestHandlerContextProvider<TContext> = IContextProvider<TContext, keyof TContext, RequestHandlerParams>;
+export declare type RequestHandlerContextProvider<TContextName extends keyof RequestHandlerContext> = IContextProvider<RequestHandler<any, any, any>, TContextName>;
 ```
diff --git a/docs/development/core/server/kibana-plugin-server.requesthandlerparams.md b/docs/development/core/server/kibana-plugin-server.requesthandlerparams.md
deleted file mode 100644
index 7f466845b4d460..00000000000000
--- a/docs/development/core/server/kibana-plugin-server.requesthandlerparams.md
+++ /dev/null
@@ -1,13 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-server](./kibana-plugin-server.md) &gt; [RequestHandlerParams](./kibana-plugin-server.requesthandlerparams.md)
-
-## RequestHandlerParams type
-
-Parameters passed to the request handler function.
-
-<b>Signature:</b>
-
-```typescript
-export declare type RequestHandlerParams = [KibanaRequest, KibanaResponseFactory];
-```
diff --git a/docs/development/core/server/kibana-plugin-server.requesthandlerreturn.md b/docs/development/core/server/kibana-plugin-server.requesthandlerreturn.md
deleted file mode 100644
index 6c01e21b6ecbe9..00000000000000
--- a/docs/development/core/server/kibana-plugin-server.requesthandlerreturn.md
+++ /dev/null
@@ -1,13 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-server](./kibana-plugin-server.md) &gt; [RequestHandlerReturn](./kibana-plugin-server.requesthandlerreturn.md)
-
-## RequestHandlerReturn type
-
-Expected outcome the request handler function.
-
-<b>Signature:</b>
-
-```typescript
-export declare type RequestHandlerReturn = KibanaResponse;
-```
diff --git a/docs/development/core/server/kibana-plugin-server.savedobjectsfindoptions.filter.md b/docs/development/core/server/kibana-plugin-server.savedobjectsfindoptions.filter.md
new file mode 100644
index 00000000000000..308bebbeaf60b8
--- /dev/null
+++ b/docs/development/core/server/kibana-plugin-server.savedobjectsfindoptions.filter.md
@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-server](./kibana-plugin-server.md) &gt; [SavedObjectsFindOptions](./kibana-plugin-server.savedobjectsfindoptions.md) &gt; [filter](./kibana-plugin-server.savedobjectsfindoptions.filter.md)
+
+## SavedObjectsFindOptions.filter property
+
+<b>Signature:</b>
+
+```typescript
+filter?: string;
+```
diff --git a/docs/development/core/server/kibana-plugin-server.savedobjectsfindoptions.md b/docs/development/core/server/kibana-plugin-server.savedobjectsfindoptions.md
index ad81c439d902c0..dfd51d480db926 100644
--- a/docs/development/core/server/kibana-plugin-server.savedobjectsfindoptions.md
+++ b/docs/development/core/server/kibana-plugin-server.savedobjectsfindoptions.md
@@ -17,6 +17,7 @@ export interface SavedObjectsFindOptions extends SavedObjectsBaseOptions
 |  --- | --- | --- |
 |  [defaultSearchOperator](./kibana-plugin-server.savedobjectsfindoptions.defaultsearchoperator.md) | <code>'AND' &#124; 'OR'</code> |  |
 |  [fields](./kibana-plugin-server.savedobjectsfindoptions.fields.md) | <code>string[]</code> | An array of fields to include in the results |
+|  [filter](./kibana-plugin-server.savedobjectsfindoptions.filter.md) | <code>string</code> |  |
 |  [hasReference](./kibana-plugin-server.savedobjectsfindoptions.hasreference.md) | <code>{</code><br/><code>        type: string;</code><br/><code>        id: string;</code><br/><code>    }</code> |  |
 |  [page](./kibana-plugin-server.savedobjectsfindoptions.page.md) | <code>number</code> |  |
 |  [perPage](./kibana-plugin-server.savedobjectsfindoptions.perpage.md) | <code>number</code> |  |
diff --git a/docs/development/core/server/kibana-plugin-server.savedobjectsschema._constructor_.md b/docs/development/core/server/kibana-plugin-server.savedobjectsschema._constructor_.md
deleted file mode 100644
index f4fb88fa6d4f11..00000000000000
--- a/docs/development/core/server/kibana-plugin-server.savedobjectsschema._constructor_.md
+++ /dev/null
@@ -1,20 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-server](./kibana-plugin-server.md) &gt; [SavedObjectsSchema](./kibana-plugin-server.savedobjectsschema.md) &gt; [(constructor)](./kibana-plugin-server.savedobjectsschema._constructor_.md)
-
-## SavedObjectsSchema.(constructor)
-
-Constructs a new instance of the `SavedObjectsSchema` class
-
-<b>Signature:</b>
-
-```typescript
-constructor(schemaDefinition?: SavedObjectsSchemaDefinition);
-```
-
-## Parameters
-
-|  Parameter | Type | Description |
-|  --- | --- | --- |
-|  schemaDefinition | <code>SavedObjectsSchemaDefinition</code> |  |
-
diff --git a/docs/development/core/server/kibana-plugin-server.savedobjectsschema.getconverttoaliasscript.md b/docs/development/core/server/kibana-plugin-server.savedobjectsschema.getconverttoaliasscript.md
deleted file mode 100644
index 5baf075463558a..00000000000000
--- a/docs/development/core/server/kibana-plugin-server.savedobjectsschema.getconverttoaliasscript.md
+++ /dev/null
@@ -1,22 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-server](./kibana-plugin-server.md) &gt; [SavedObjectsSchema](./kibana-plugin-server.savedobjectsschema.md) &gt; [getConvertToAliasScript](./kibana-plugin-server.savedobjectsschema.getconverttoaliasscript.md)
-
-## SavedObjectsSchema.getConvertToAliasScript() method
-
-<b>Signature:</b>
-
-```typescript
-getConvertToAliasScript(type: string): string | undefined;
-```
-
-## Parameters
-
-|  Parameter | Type | Description |
-|  --- | --- | --- |
-|  type | <code>string</code> |  |
-
-<b>Returns:</b>
-
-`string | undefined`
-
diff --git a/docs/development/core/server/kibana-plugin-server.savedobjectsschema.getindexfortype.md b/docs/development/core/server/kibana-plugin-server.savedobjectsschema.getindexfortype.md
deleted file mode 100644
index ba1c439c8c6b4e..00000000000000
--- a/docs/development/core/server/kibana-plugin-server.savedobjectsschema.getindexfortype.md
+++ /dev/null
@@ -1,23 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-server](./kibana-plugin-server.md) &gt; [SavedObjectsSchema](./kibana-plugin-server.savedobjectsschema.md) &gt; [getIndexForType](./kibana-plugin-server.savedobjectsschema.getindexfortype.md)
-
-## SavedObjectsSchema.getIndexForType() method
-
-<b>Signature:</b>
-
-```typescript
-getIndexForType(config: Config, type: string): string | undefined;
-```
-
-## Parameters
-
-|  Parameter | Type | Description |
-|  --- | --- | --- |
-|  config | <code>Config</code> |  |
-|  type | <code>string</code> |  |
-
-<b>Returns:</b>
-
-`string | undefined`
-
diff --git a/docs/development/core/server/kibana-plugin-server.savedobjectsschema.ishiddentype.md b/docs/development/core/server/kibana-plugin-server.savedobjectsschema.ishiddentype.md
deleted file mode 100644
index f67b12a4d14c3d..00000000000000
--- a/docs/development/core/server/kibana-plugin-server.savedobjectsschema.ishiddentype.md
+++ /dev/null
@@ -1,22 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-server](./kibana-plugin-server.md) &gt; [SavedObjectsSchema](./kibana-plugin-server.savedobjectsschema.md) &gt; [isHiddenType](./kibana-plugin-server.savedobjectsschema.ishiddentype.md)
-
-## SavedObjectsSchema.isHiddenType() method
-
-<b>Signature:</b>
-
-```typescript
-isHiddenType(type: string): boolean;
-```
-
-## Parameters
-
-|  Parameter | Type | Description |
-|  --- | --- | --- |
-|  type | <code>string</code> |  |
-
-<b>Returns:</b>
-
-`boolean`
-
diff --git a/docs/development/core/server/kibana-plugin-server.savedobjectsschema.isnamespaceagnostic.md b/docs/development/core/server/kibana-plugin-server.savedobjectsschema.isnamespaceagnostic.md
deleted file mode 100644
index 2ca0abd7e4aa7e..00000000000000
--- a/docs/development/core/server/kibana-plugin-server.savedobjectsschema.isnamespaceagnostic.md
+++ /dev/null
@@ -1,22 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-server](./kibana-plugin-server.md) &gt; [SavedObjectsSchema](./kibana-plugin-server.savedobjectsschema.md) &gt; [isNamespaceAgnostic](./kibana-plugin-server.savedobjectsschema.isnamespaceagnostic.md)
-
-## SavedObjectsSchema.isNamespaceAgnostic() method
-
-<b>Signature:</b>
-
-```typescript
-isNamespaceAgnostic(type: string): boolean;
-```
-
-## Parameters
-
-|  Parameter | Type | Description |
-|  --- | --- | --- |
-|  type | <code>string</code> |  |
-
-<b>Returns:</b>
-
-`boolean`
-
diff --git a/docs/development/core/server/kibana-plugin-server.savedobjectsschema.md b/docs/development/core/server/kibana-plugin-server.savedobjectsschema.md
deleted file mode 100644
index 0808811804eaf5..00000000000000
--- a/docs/development/core/server/kibana-plugin-server.savedobjectsschema.md
+++ /dev/null
@@ -1,27 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-server](./kibana-plugin-server.md) &gt; [SavedObjectsSchema](./kibana-plugin-server.savedobjectsschema.md)
-
-## SavedObjectsSchema class
-
-<b>Signature:</b>
-
-```typescript
-export declare class SavedObjectsSchema 
-```
-
-## Constructors
-
-|  Constructor | Modifiers | Description |
-|  --- | --- | --- |
-|  [(constructor)(schemaDefinition)](./kibana-plugin-server.savedobjectsschema._constructor_.md) |  | Constructs a new instance of the <code>SavedObjectsSchema</code> class |
-
-## Methods
-
-|  Method | Modifiers | Description |
-|  --- | --- | --- |
-|  [getConvertToAliasScript(type)](./kibana-plugin-server.savedobjectsschema.getconverttoaliasscript.md) |  |  |
-|  [getIndexForType(config, type)](./kibana-plugin-server.savedobjectsschema.getindexfortype.md) |  |  |
-|  [isHiddenType(type)](./kibana-plugin-server.savedobjectsschema.ishiddentype.md) |  |  |
-|  [isNamespaceAgnostic(type)](./kibana-plugin-server.savedobjectsschema.isnamespaceagnostic.md) |  |  |
-
diff --git a/docs/development/core/server/kibana-plugin-server.savedobjectsserializer._constructor_.md b/docs/development/core/server/kibana-plugin-server.savedobjectsserializer._constructor_.md
deleted file mode 100644
index c05e97d3dbcdf8..00000000000000
--- a/docs/development/core/server/kibana-plugin-server.savedobjectsserializer._constructor_.md
+++ /dev/null
@@ -1,20 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-server](./kibana-plugin-server.md) &gt; [SavedObjectsSerializer](./kibana-plugin-server.savedobjectsserializer.md) &gt; [(constructor)](./kibana-plugin-server.savedobjectsserializer._constructor_.md)
-
-## SavedObjectsSerializer.(constructor)
-
-Constructs a new instance of the `SavedObjectsSerializer` class
-
-<b>Signature:</b>
-
-```typescript
-constructor(schema: SavedObjectsSchema);
-```
-
-## Parameters
-
-|  Parameter | Type | Description |
-|  --- | --- | --- |
-|  schema | <code>SavedObjectsSchema</code> |  |
-
diff --git a/docs/development/core/server/kibana-plugin-server.savedobjectsserializer.generaterawid.md b/docs/development/core/server/kibana-plugin-server.savedobjectsserializer.generaterawid.md
deleted file mode 100644
index 4705f48a201aee..00000000000000
--- a/docs/development/core/server/kibana-plugin-server.savedobjectsserializer.generaterawid.md
+++ /dev/null
@@ -1,26 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-server](./kibana-plugin-server.md) &gt; [SavedObjectsSerializer](./kibana-plugin-server.savedobjectsserializer.md) &gt; [generateRawId](./kibana-plugin-server.savedobjectsserializer.generaterawid.md)
-
-## SavedObjectsSerializer.generateRawId() method
-
-Given a saved object type and id, generates the compound id that is stored in the raw document.
-
-<b>Signature:</b>
-
-```typescript
-generateRawId(namespace: string | undefined, type: string, id?: string): string;
-```
-
-## Parameters
-
-|  Parameter | Type | Description |
-|  --- | --- | --- |
-|  namespace | <code>string &#124; undefined</code> |  |
-|  type | <code>string</code> |  |
-|  id | <code>string</code> |  |
-
-<b>Returns:</b>
-
-`string`
-
diff --git a/docs/development/core/server/kibana-plugin-server.savedobjectsserializer.israwsavedobject.md b/docs/development/core/server/kibana-plugin-server.savedobjectsserializer.israwsavedobject.md
deleted file mode 100644
index e190e7bce8c011..00000000000000
--- a/docs/development/core/server/kibana-plugin-server.savedobjectsserializer.israwsavedobject.md
+++ /dev/null
@@ -1,24 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-server](./kibana-plugin-server.md) &gt; [SavedObjectsSerializer](./kibana-plugin-server.savedobjectsserializer.md) &gt; [isRawSavedObject](./kibana-plugin-server.savedobjectsserializer.israwsavedobject.md)
-
-## SavedObjectsSerializer.isRawSavedObject() method
-
-Determines whether or not the raw document can be converted to a saved object.
-
-<b>Signature:</b>
-
-```typescript
-isRawSavedObject(rawDoc: RawDoc): any;
-```
-
-## Parameters
-
-|  Parameter | Type | Description |
-|  --- | --- | --- |
-|  rawDoc | <code>RawDoc</code> |  |
-
-<b>Returns:</b>
-
-`any`
-
diff --git a/docs/development/core/server/kibana-plugin-server.savedobjectsserializer.md b/docs/development/core/server/kibana-plugin-server.savedobjectsserializer.md
deleted file mode 100644
index dd3f52554a81ea..00000000000000
--- a/docs/development/core/server/kibana-plugin-server.savedobjectsserializer.md
+++ /dev/null
@@ -1,27 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-server](./kibana-plugin-server.md) &gt; [SavedObjectsSerializer](./kibana-plugin-server.savedobjectsserializer.md)
-
-## SavedObjectsSerializer class
-
-<b>Signature:</b>
-
-```typescript
-export declare class SavedObjectsSerializer 
-```
-
-## Constructors
-
-|  Constructor | Modifiers | Description |
-|  --- | --- | --- |
-|  [(constructor)(schema)](./kibana-plugin-server.savedobjectsserializer._constructor_.md) |  | Constructs a new instance of the <code>SavedObjectsSerializer</code> class |
-
-## Methods
-
-|  Method | Modifiers | Description |
-|  --- | --- | --- |
-|  [generateRawId(namespace, type, id)](./kibana-plugin-server.savedobjectsserializer.generaterawid.md) |  | Given a saved object type and id, generates the compound id that is stored in the raw document. |
-|  [isRawSavedObject(rawDoc)](./kibana-plugin-server.savedobjectsserializer.israwsavedobject.md) |  | Determines whether or not the raw document can be converted to a saved object. |
-|  [rawToSavedObject(doc)](./kibana-plugin-server.savedobjectsserializer.rawtosavedobject.md) |  | Converts a document from the format that is stored in elasticsearch to the saved object client format. |
-|  [savedObjectToRaw(savedObj)](./kibana-plugin-server.savedobjectsserializer.savedobjecttoraw.md) |  | Converts a document from the saved object client format to the format that is stored in elasticsearch. |
-
diff --git a/docs/development/core/server/kibana-plugin-server.savedobjectsserializer.rawtosavedobject.md b/docs/development/core/server/kibana-plugin-server.savedobjectsserializer.rawtosavedobject.md
deleted file mode 100644
index b36cdb3be64da9..00000000000000
--- a/docs/development/core/server/kibana-plugin-server.savedobjectsserializer.rawtosavedobject.md
+++ /dev/null
@@ -1,24 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-server](./kibana-plugin-server.md) &gt; [SavedObjectsSerializer](./kibana-plugin-server.savedobjectsserializer.md) &gt; [rawToSavedObject](./kibana-plugin-server.savedobjectsserializer.rawtosavedobject.md)
-
-## SavedObjectsSerializer.rawToSavedObject() method
-
-Converts a document from the format that is stored in elasticsearch to the saved object client format.
-
-<b>Signature:</b>
-
-```typescript
-rawToSavedObject(doc: RawDoc): SanitizedSavedObjectDoc;
-```
-
-## Parameters
-
-|  Parameter | Type | Description |
-|  --- | --- | --- |
-|  doc | <code>RawDoc</code> |  |
-
-<b>Returns:</b>
-
-`SanitizedSavedObjectDoc`
-
diff --git a/docs/development/core/server/kibana-plugin-server.savedobjectsserializer.savedobjecttoraw.md b/docs/development/core/server/kibana-plugin-server.savedobjectsserializer.savedobjecttoraw.md
deleted file mode 100644
index 4854a97a845b89..00000000000000
--- a/docs/development/core/server/kibana-plugin-server.savedobjectsserializer.savedobjecttoraw.md
+++ /dev/null
@@ -1,24 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-server](./kibana-plugin-server.md) &gt; [SavedObjectsSerializer](./kibana-plugin-server.savedobjectsserializer.md) &gt; [savedObjectToRaw](./kibana-plugin-server.savedobjectsserializer.savedobjecttoraw.md)
-
-## SavedObjectsSerializer.savedObjectToRaw() method
-
-Converts a document from the saved object client format to the format that is stored in elasticsearch.
-
-<b>Signature:</b>
-
-```typescript
-savedObjectToRaw(savedObj: SanitizedSavedObjectDoc): RawDoc;
-```
-
-## Parameters
-
-|  Parameter | Type | Description |
-|  --- | --- | --- |
-|  savedObj | <code>SanitizedSavedObjectDoc</code> |  |
-
-<b>Returns:</b>
-
-`RawDoc`
-
diff --git a/docs/development/core/server/kibana-plugin-server.savedobjectsservice.addscopedsavedobjectsclientwrapperfactory.md b/docs/development/core/server/kibana-plugin-server.savedobjectsservice.addscopedsavedobjectsclientwrapperfactory.md
deleted file mode 100644
index 6e0d1a827750cf..00000000000000
--- a/docs/development/core/server/kibana-plugin-server.savedobjectsservice.addscopedsavedobjectsclientwrapperfactory.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-server](./kibana-plugin-server.md) &gt; [SavedObjectsService](./kibana-plugin-server.savedobjectsservice.md) &gt; [addScopedSavedObjectsClientWrapperFactory](./kibana-plugin-server.savedobjectsservice.addscopedsavedobjectsclientwrapperfactory.md)
-
-## SavedObjectsService.addScopedSavedObjectsClientWrapperFactory property
-
-<b>Signature:</b>
-
-```typescript
-addScopedSavedObjectsClientWrapperFactory: ScopedSavedObjectsClientProvider<Request>['addClientWrapperFactory'];
-```
diff --git a/docs/development/core/server/kibana-plugin-server.savedobjectsservice.getsavedobjectsrepository.md b/docs/development/core/server/kibana-plugin-server.savedobjectsservice.getsavedobjectsrepository.md
deleted file mode 100644
index 13ccad7ed01ae5..00000000000000
--- a/docs/development/core/server/kibana-plugin-server.savedobjectsservice.getsavedobjectsrepository.md
+++ /dev/null
@@ -1,22 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-server](./kibana-plugin-server.md) &gt; [SavedObjectsService](./kibana-plugin-server.savedobjectsservice.md) &gt; [getSavedObjectsRepository](./kibana-plugin-server.savedobjectsservice.getsavedobjectsrepository.md)
-
-## SavedObjectsService.getSavedObjectsRepository() method
-
-<b>Signature:</b>
-
-```typescript
-getSavedObjectsRepository(...rest: any[]): any;
-```
-
-## Parameters
-
-|  Parameter | Type | Description |
-|  --- | --- | --- |
-|  rest | <code>any[]</code> |  |
-
-<b>Returns:</b>
-
-`any`
-
diff --git a/docs/development/core/server/kibana-plugin-server.savedobjectsservice.getscopedsavedobjectsclient.md b/docs/development/core/server/kibana-plugin-server.savedobjectsservice.getscopedsavedobjectsclient.md
deleted file mode 100644
index c762de041edf5f..00000000000000
--- a/docs/development/core/server/kibana-plugin-server.savedobjectsservice.getscopedsavedobjectsclient.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-server](./kibana-plugin-server.md) &gt; [SavedObjectsService](./kibana-plugin-server.savedobjectsservice.md) &gt; [getScopedSavedObjectsClient](./kibana-plugin-server.savedobjectsservice.getscopedsavedobjectsclient.md)
-
-## SavedObjectsService.getScopedSavedObjectsClient property
-
-<b>Signature:</b>
-
-```typescript
-getScopedSavedObjectsClient: ScopedSavedObjectsClientProvider<Request>['getClient'];
-```
diff --git a/docs/development/core/server/kibana-plugin-server.savedobjectsservice.importexport.md b/docs/development/core/server/kibana-plugin-server.savedobjectsservice.importexport.md
deleted file mode 100644
index f9b4e46712f4a1..00000000000000
--- a/docs/development/core/server/kibana-plugin-server.savedobjectsservice.importexport.md
+++ /dev/null
@@ -1,16 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-server](./kibana-plugin-server.md) &gt; [SavedObjectsService](./kibana-plugin-server.savedobjectsservice.md) &gt; [importExport](./kibana-plugin-server.savedobjectsservice.importexport.md)
-
-## SavedObjectsService.importExport property
-
-<b>Signature:</b>
-
-```typescript
-importExport: {
-        objectLimit: number;
-        importSavedObjects(options: SavedObjectsImportOptions): Promise<SavedObjectsImportResponse>;
-        resolveImportErrors(options: SavedObjectsResolveImportErrorsOptions): Promise<SavedObjectsImportResponse>;
-        getSortedObjectsForExport(options: SavedObjectsExportOptions): Promise<Readable>;
-    };
-```
diff --git a/docs/development/core/server/kibana-plugin-server.savedobjectsservice.md b/docs/development/core/server/kibana-plugin-server.savedobjectsservice.md
deleted file mode 100644
index d9e23e6f15928e..00000000000000
--- a/docs/development/core/server/kibana-plugin-server.savedobjectsservice.md
+++ /dev/null
@@ -1,30 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-server](./kibana-plugin-server.md) &gt; [SavedObjectsService](./kibana-plugin-server.savedobjectsservice.md)
-
-## SavedObjectsService interface
-
-
-<b>Signature:</b>
-
-```typescript
-export interface SavedObjectsService<Request = any> 
-```
-
-## Properties
-
-|  Property | Type | Description |
-|  --- | --- | --- |
-|  [addScopedSavedObjectsClientWrapperFactory](./kibana-plugin-server.savedobjectsservice.addscopedsavedobjectsclientwrapperfactory.md) | <code>ScopedSavedObjectsClientProvider&lt;Request&gt;['addClientWrapperFactory']</code> |  |
-|  [getScopedSavedObjectsClient](./kibana-plugin-server.savedobjectsservice.getscopedsavedobjectsclient.md) | <code>ScopedSavedObjectsClientProvider&lt;Request&gt;['getClient']</code> |  |
-|  [importExport](./kibana-plugin-server.savedobjectsservice.importexport.md) | <code>{</code><br/><code>        objectLimit: number;</code><br/><code>        importSavedObjects(options: SavedObjectsImportOptions): Promise&lt;SavedObjectsImportResponse&gt;;</code><br/><code>        resolveImportErrors(options: SavedObjectsResolveImportErrorsOptions): Promise&lt;SavedObjectsImportResponse&gt;;</code><br/><code>        getSortedObjectsForExport(options: SavedObjectsExportOptions): Promise&lt;Readable&gt;;</code><br/><code>    }</code> |  |
-|  [SavedObjectsClient](./kibana-plugin-server.savedobjectsservice.savedobjectsclient.md) | <code>typeof SavedObjectsClient</code> |  |
-|  [schema](./kibana-plugin-server.savedobjectsservice.schema.md) | <code>SavedObjectsSchema</code> |  |
-|  [types](./kibana-plugin-server.savedobjectsservice.types.md) | <code>string[]</code> |  |
-
-## Methods
-
-|  Method | Description |
-|  --- | --- |
-|  [getSavedObjectsRepository(rest)](./kibana-plugin-server.savedobjectsservice.getsavedobjectsrepository.md) |  |
-
diff --git a/docs/development/core/server/kibana-plugin-server.savedobjectsservice.savedobjectsclient.md b/docs/development/core/server/kibana-plugin-server.savedobjectsservice.savedobjectsclient.md
deleted file mode 100644
index 4a7722928e85e0..00000000000000
--- a/docs/development/core/server/kibana-plugin-server.savedobjectsservice.savedobjectsclient.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-server](./kibana-plugin-server.md) &gt; [SavedObjectsService](./kibana-plugin-server.savedobjectsservice.md) &gt; [SavedObjectsClient](./kibana-plugin-server.savedobjectsservice.savedobjectsclient.md)
-
-## SavedObjectsService.SavedObjectsClient property
-
-<b>Signature:</b>
-
-```typescript
-SavedObjectsClient: typeof SavedObjectsClient;
-```
diff --git a/docs/development/core/server/kibana-plugin-server.savedobjectsservice.schema.md b/docs/development/core/server/kibana-plugin-server.savedobjectsservice.schema.md
deleted file mode 100644
index be5682e6f034e4..00000000000000
--- a/docs/development/core/server/kibana-plugin-server.savedobjectsservice.schema.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-server](./kibana-plugin-server.md) &gt; [SavedObjectsService](./kibana-plugin-server.savedobjectsservice.md) &gt; [schema](./kibana-plugin-server.savedobjectsservice.schema.md)
-
-## SavedObjectsService.schema property
-
-<b>Signature:</b>
-
-```typescript
-schema: SavedObjectsSchema;
-```
diff --git a/docs/development/core/server/kibana-plugin-server.savedobjectsservice.types.md b/docs/development/core/server/kibana-plugin-server.savedobjectsservice.types.md
deleted file mode 100644
index a783ef4270f186..00000000000000
--- a/docs/development/core/server/kibana-plugin-server.savedobjectsservice.types.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-server](./kibana-plugin-server.md) &gt; [SavedObjectsService](./kibana-plugin-server.savedobjectsservice.md) &gt; [types](./kibana-plugin-server.savedobjectsservice.types.md)
-
-## SavedObjectsService.types property
-
-<b>Signature:</b>
-
-```typescript
-types: string[];
-```
diff --git a/docs/management/index-patterns.asciidoc b/docs/management/index-patterns.asciidoc
index 25c07dc5024840..8d9ef515108eda 100644
--- a/docs/management/index-patterns.asciidoc
+++ b/docs/management/index-patterns.asciidoc
@@ -35,8 +35,11 @@ image:management/index-patterns/images/rollup-index-pattern.png["Menu with rollu
 
 {kib} makes it easy for you to create an index pattern by walking you through 
 the process. Just start typing in the *Index pattern* field, and {kib} looks for 
-the names of {es} indices that match your input. If you want to include 
-system indices in your search, toggle the switch in the upper right.
+the names of {es} indices that match your input. Make sure that the name of the 
+index pattern is unique.
+
+If you want to include system indices in your search, toggle the switch in the 
+upper right.
 
 [role="screenshot"]
 image:management/index-patterns/images/create-index-pattern.png["Create index pattern"]
diff --git a/docs/settings/monitoring-settings.asciidoc b/docs/settings/monitoring-settings.asciidoc
index 7330c7e144b60e..97fb891c95bdba 100644
--- a/docs/settings/monitoring-settings.asciidoc
+++ b/docs/settings/monitoring-settings.asciidoc
@@ -21,7 +21,7 @@ To control how data is collected from your {es} nodes, you configure
 {ref}/monitoring-settings.html[`xpack.monitoring.collection`
 settings] in `elasticsearch.yml`. To control how monitoring data is collected
 from Logstash, you configure
-{logstash-ref}/configuring-logstash.html#monitoring-settings[`xpack.monitoring` settings]
+{logstash-ref}/monitoring-internal-collection.html#monitoring-settings[`xpack.monitoring` settings]
 in `logstash.yml`.
 
 For more information, see
diff --git a/docs/setup/settings.asciidoc b/docs/setup/settings.asciidoc
index 7f9034c48e232f..5b3db22a39ea64 100644
--- a/docs/setup/settings.asciidoc
+++ b/docs/setup/settings.asciidoc
@@ -256,10 +256,6 @@ deprecation warning at startup. This setting cannot end in a slash (`/`).
 `server.customResponseHeaders:`:: *Default: `{}`* Header names and values to
   send on all responses to the client from the Kibana server.
 
-[[server-default]]`server.defaultRoute:`:: *Default: "/app/kibana"* This setting
-specifies the default route when opening Kibana. You can use this setting to
-modify the landing page when opening Kibana. Supported on {ece}.
-
 `server.host:`:: *Default: "localhost"* This setting specifies the host of the
 back end server.
 
diff --git a/kibana.d.ts b/kibana.d.ts
index e0b20f6fa28af6..d242965e9bdd5a 100644
--- a/kibana.d.ts
+++ b/kibana.d.ts
@@ -42,7 +42,7 @@ export namespace Legacy {
   export type Request = LegacyKibanaServer.Request;
   export type ResponseToolkit = LegacyKibanaServer.ResponseToolkit;
   export type SavedObjectsClient = LegacyKibanaServer.SavedObjectsClient;
-  export type SavedObjectsService = LegacyKibanaServer.SavedObjectsService;
+  export type SavedObjectsService = LegacyKibanaServer.SavedObjectsLegacyService;
   export type Server = LegacyKibanaServer.Server;
 
   export type InitPluginFunction = LegacyKibanaPluginSpec.InitPluginFunction;
diff --git a/package.json b/package.json
index b8aca7cf2c4092..e60819102eb918 100644
--- a/package.json
+++ b/package.json
@@ -105,9 +105,9 @@
   "dependencies": {
     "@babel/core": "^7.5.5",
     "@babel/register": "^7.5.5",
-    "@elastic/charts": "^12.0.2",
+    "@elastic/charts": "^12.1.0",
     "@elastic/datemath": "5.0.2",
-    "@elastic/eui": "14.3.0",
+    "@elastic/eui": "14.4.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "8.1.1-kibana2",
     "@elastic/numeral": "2.3.3",
@@ -160,7 +160,6 @@
     "expiry-js": "0.1.7",
     "file-loader": "4.2.0",
     "font-awesome": "4.7.0",
-    "fp-ts": "^2.0.5",
     "getos": "^3.1.0",
     "glob": "^7.1.2",
     "glob-all": "^3.1.0",
@@ -177,7 +176,6 @@
     "https-proxy-agent": "^2.2.2",
     "inert": "^5.1.0",
     "inline-style": "^2.0.0",
-    "io-ts": "^2.0.1",
     "joi": "^13.5.2",
     "jquery": "^3.4.1",
     "js-yaml": "3.13.1",
@@ -242,7 +240,7 @@
     "style-loader": "0.23.1",
     "symbol-observable": "^1.2.0",
     "tar": "4.4.13",
-    "terser-webpack-plugin": "^1.4.1",
+    "terser-webpack-plugin": "^2.1.2",
     "thread-loader": "^2.1.3",
     "tinygradient": "0.4.3",
     "tinymath": "1.2.1",
@@ -375,10 +373,11 @@
     "eslint-config-prettier": "6.3.0",
     "eslint-plugin-babel": "^5.3.0",
     "eslint-plugin-ban": "1.3.0",
+    "eslint-plugin-cypress": "^2.6.1",
     "eslint-plugin-import": "2.18.2",
     "eslint-plugin-jest": "22.17.0",
     "eslint-plugin-jsx-a11y": "6.2.3",
-    "eslint-plugin-mocha": "5.3.0",
+    "eslint-plugin-mocha": "6.1.1",
     "eslint-plugin-no-unsanitized": "3.0.2",
     "eslint-plugin-node": "9.2.0",
     "eslint-plugin-prefer-object-spread": "1.2.1",
@@ -421,7 +420,7 @@
     "license-checker": "^16.0.0",
     "listr": "^0.14.1",
     "load-grunt-config": "^3.0.1",
-    "mocha": "3.5.3",
+    "mocha": "6.2.1",
     "multistream": "^2.1.1",
     "murmurhash3js": "3.0.1",
     "mutation-observer": "^1.0.3",
diff --git a/packages/eslint-config-kibana/package.json b/packages/eslint-config-kibana/package.json
index 8c6359e66a7a5d..da2a37cc41ad3c 100644
--- a/packages/eslint-config-kibana/package.json
+++ b/packages/eslint-config-kibana/package.json
@@ -24,7 +24,7 @@
     "eslint-plugin-jsx-a11y": "6.2.3",
     "eslint-plugin-import": "2.18.2",
     "eslint-plugin-jest": "^22.17.0",
-    "eslint-plugin-mocha": "^5.3.0",
+    "eslint-plugin-mocha": "^6.1.1",
     "eslint-plugin-no-unsanitized": "3.0.2",
     "eslint-plugin-prefer-object-spread": "1.2.1",
     "eslint-plugin-react": "7.13.0",
diff --git a/packages/kbn-babel-code-parser/src/can_require.js b/packages/kbn-babel-code-parser/src/can_require.js
index e590c249e9806f..4d85910abe6ed6 100644
--- a/packages/kbn-babel-code-parser/src/can_require.js
+++ b/packages/kbn-babel-code-parser/src/can_require.js
@@ -17,18 +17,18 @@
  * under the License.
  */
 
-export function canRequire(cwd, entry) {
+export function canRequire(entry, cwd = require.resolve.paths(entry) || []) {
   try {
     // We will try to test if we can resolve
     // this entry through the require.resolve
     // setting as the start looking path the
-    // given cwd. Require.resolve will keep
+    // given cwd. That cwd variable could be
+    // a path or an array of paths
+    // from where Require.resolve will keep
     // looking recursively as normal starting
-    // from that location.
+    // from those locations.
     return require.resolve(entry, {
-      paths: [
-        cwd
-      ]
+      paths: [].concat(cwd)
     });
   } catch (e) {
     return false;
diff --git a/packages/kbn-babel-code-parser/src/code_parser.js b/packages/kbn-babel-code-parser/src/code_parser.js
index 8d76b1032561ac..0f53bd249bb5cc 100644
--- a/packages/kbn-babel-code-parser/src/code_parser.js
+++ b/packages/kbn-babel-code-parser/src/code_parser.js
@@ -79,7 +79,7 @@ export async function parseEntries(cwd, entries, strategy, results, wasParsed =
   const sanitizedCwd = cwd || process.cwd();
 
   // Test each entry against canRequire function
-  const entriesQueue = entries.map(entry => canRequire(sanitizedCwd, entry));
+  const entriesQueue = entries.map(entry => canRequire(entry));
 
   while(entriesQueue.length) {
     // Get the first element in the queue as
diff --git a/packages/kbn-babel-code-parser/src/strategies.js b/packages/kbn-babel-code-parser/src/strategies.js
index 317ded014210b1..89621bc53bd534 100644
--- a/packages/kbn-babel-code-parser/src/strategies.js
+++ b/packages/kbn-babel-code-parser/src/strategies.js
@@ -62,8 +62,12 @@ export async function dependenciesParseStrategy(cwd, parseSingleFile, mainEntry,
   // new dependencies
   return dependencies.reduce((filteredEntries, entry) => {
     const absEntryPath = resolve(cwd, dirname(mainEntry), entry);
-    const requiredPath = canRequire(cwd, absEntryPath);
-    const requiredRelativePath = canRequire(cwd, entry);
+
+    // NOTE: cwd for following canRequires is absEntryPath
+    // because we should start looking from there
+    const requiredPath = canRequire(absEntryPath, absEntryPath);
+    const requiredRelativePath = canRequire(entry, absEntryPath);
+
     const isRelativeFile = !isAbsolute(entry);
     const isNodeModuleDep = isRelativeFile && !requiredPath && requiredRelativePath;
     const isNewEntry = isRelativeFile && requiredPath;
diff --git a/packages/kbn-babel-code-parser/src/strategies.test.js b/packages/kbn-babel-code-parser/src/strategies.test.js
index 5a84edf560af13..d7caa8b95d4a22 100644
--- a/packages/kbn-babel-code-parser/src/strategies.test.js
+++ b/packages/kbn-babel-code-parser/src/strategies.test.js
@@ -59,8 +59,8 @@ describe('Code Parser Strategies', () => {
       cb(null, `require('dep_from_node_modules')`);
     });
 
-    canRequire.mockImplementation((mockCwd, entry) => {
-      if (entry === `${mockCwd}dep1/dep_from_node_modules`) {
+    canRequire.mockImplementation((entry, cwd) => {
+      if (entry === `${cwd}dep1/dep_from_node_modules`) {
         return false;
       }
 
@@ -78,7 +78,7 @@ describe('Code Parser Strategies', () => {
       cb(null, `require('./relative_dep')`);
     });
 
-    canRequire.mockImplementation((mockCwd, entry) => {
+    canRequire.mockImplementation((entry) => {
       if (entry === `${mockCwd}dep1/relative_dep`) {
         return `${entry}/index.js`;
       }
diff --git a/packages/kbn-dev-utils/src/index.ts b/packages/kbn-dev-utils/src/index.ts
index 6d3914eb56218b..5c69036a4b13ae 100644
--- a/packages/kbn-dev-utils/src/index.ts
+++ b/packages/kbn-dev-utils/src/index.ts
@@ -23,3 +23,4 @@ export { createAbsolutePathSerializer } from './serializers';
 export { CA_CERT_PATH, ES_KEY_PATH, ES_CERT_PATH } from './certs';
 export { run, createFailError, createFlagError, combineErrors, isFailError, Flags } from './run';
 export { REPO_ROOT } from './constants';
+export { KbnClient } from './kbn_client';
diff --git a/packages/kbn-dev-utils/src/kbn_client/errors.ts b/packages/kbn-dev-utils/src/kbn_client/errors.ts
new file mode 100644
index 00000000000000..068c68555b62ae
--- /dev/null
+++ b/packages/kbn-dev-utils/src/kbn_client/errors.ts
@@ -0,0 +1,42 @@
+/*
+ * 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 { AxiosError, AxiosResponse } from 'axios';
+
+export interface AxiosRequestError extends AxiosError {
+  response: undefined;
+}
+
+export interface AxiosResponseError<T> extends AxiosError {
+  response: AxiosResponse<T>;
+}
+
+export const isAxiosRequestError = (error: any): error is AxiosRequestError => {
+  return error && error.code === undefined && error.response === undefined;
+};
+
+export const isAxiosResponseError = (error: any): error is AxiosResponseError<any> => {
+  return error && error.code !== undefined && error.response !== undefined;
+};
+
+export const isConcliftOnGetError = (error: any) => {
+  return (
+    isAxiosResponseError(error) && error.config.method === 'GET' && error.response.status === 409
+  );
+};
diff --git a/src/legacy/ui/ui_settings/__tests__/lib/index.js b/packages/kbn-dev-utils/src/kbn_client/index.ts
similarity index 88%
rename from src/legacy/ui/ui_settings/__tests__/lib/index.js
rename to packages/kbn-dev-utils/src/kbn_client/index.ts
index 29b1adbcba5760..72214b6c617462 100644
--- a/src/legacy/ui/ui_settings/__tests__/lib/index.js
+++ b/packages/kbn-dev-utils/src/kbn_client/index.ts
@@ -17,7 +17,5 @@
  * under the License.
  */
 
-export {
-  createObjectsClientStub,
-  savedObjectsClientErrors,
-} from './create_objects_client_stub';
+export { KbnClient } from './kbn_client';
+export { uriencode } from './kbn_client_requester';
diff --git a/packages/kbn-dev-utils/src/kbn_client/kbn_client.ts b/packages/kbn-dev-utils/src/kbn_client/kbn_client.ts
new file mode 100644
index 00000000000000..2eb6c6cc5aac6b
--- /dev/null
+++ b/packages/kbn-dev-utils/src/kbn_client/kbn_client.ts
@@ -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 { ToolingLog } from '../tooling_log';
+import { KbnClientRequester, ReqOptions } from './kbn_client_requester';
+import { KbnClientStatus } from './kbn_client_status';
+import { KbnClientPlugins } from './kbn_client_plugins';
+import { KbnClientVersion } from './kbn_client_version';
+import { KbnClientSavedObjects } from './kbn_client_saved_objects';
+import { KbnClientUiSettings, UiSettingValues } from './kbn_client_ui_settings';
+
+export class KbnClient {
+  private readonly requester = new KbnClientRequester(this.log, this.kibanaUrls);
+  readonly status = new KbnClientStatus(this.requester);
+  readonly plugins = new KbnClientPlugins(this.status);
+  readonly version = new KbnClientVersion(this.status);
+  readonly savedObjects = new KbnClientSavedObjects(this.log, this.requester);
+  readonly uiSettings = new KbnClientUiSettings(this.log, this.requester, this.uiSettingDefaults);
+
+  /**
+   * Basic Kibana server client that implements common behaviors for talking
+   * to the Kibana server from dev tooling.
+   *
+   * @param log ToolingLog
+   * @param kibanaUrls Array of kibana server urls to send requests to
+   * @param uiSettingDefaults Map of uiSetting values that will be merged with all uiSetting resets
+   */
+  constructor(
+    private readonly log: ToolingLog,
+    private readonly kibanaUrls: string[],
+    private readonly uiSettingDefaults?: UiSettingValues
+  ) {
+    if (!kibanaUrls.length) {
+      throw new Error('missing Kibana urls');
+    }
+  }
+
+  /**
+   * Make a direct request to the Kibana server
+   */
+  async request(options: ReqOptions) {
+    return await this.requester.request(options);
+  }
+
+  resolveUrl(relativeUrl: string) {
+    return this.requester.resolveUrl(relativeUrl);
+  }
+}
diff --git a/test/common/services/kibana_server/version.js b/packages/kbn-dev-utils/src/kbn_client/kbn_client_plugins.ts
similarity index 57%
rename from test/common/services/kibana_server/version.js
rename to packages/kbn-dev-utils/src/kbn_client/kbn_client_plugins.ts
index b7efb01c63449a..80285caf365a0b 100644
--- a/test/common/services/kibana_server/version.js
+++ b/packages/kbn-dev-utils/src/kbn_client/kbn_client_plugins.ts
@@ -17,23 +17,28 @@
  * under the License.
  */
 
-export class KibanaServerVersion {
-  constructor(kibanaStatus) {
-    this.kibanaStatus = kibanaStatus;
-    this._cachedVersionNumber;
-  }
+import { KbnClientStatus } from './kbn_client_status';
 
-  async get() {
-    if (this._cachedVersionNumber) {
-      return this._cachedVersionNumber;
-    }
+const PLUGIN_STATUS_ID = /^plugin:(.+?)@/;
+
+export class KbnClientPlugins {
+  constructor(private readonly status: KbnClientStatus) {}
+  /**
+   * Get a list of plugin ids that are enabled on the server
+   */
+  public async getEnabledIds() {
+    const pluginIds: string[] = [];
+    const apiResp = await this.status.get();
 
-    const status = await this.kibanaStatus.get();
-    if (status && status.version && status.version.number) {
-      this._cachedVersionNumber = status.version.number + (status.version.build_snapshot ? '-SNAPSHOT' : '');
-      return this._cachedVersionNumber;
+    for (const status of apiResp.status.statuses) {
+      if (status.id) {
+        const match = status.id.match(PLUGIN_STATUS_ID);
+        if (match) {
+          pluginIds.push(match[1]);
+        }
+      }
     }
 
-    throw new Error(`Unable to fetch Kibana Server status, received ${JSON.stringify(status)}`);
+    return pluginIds;
   }
 }
diff --git a/packages/kbn-dev-utils/src/kbn_client/kbn_client_requester.ts b/packages/kbn-dev-utils/src/kbn_client/kbn_client_requester.ts
new file mode 100644
index 00000000000000..56d4d7f99e0b80
--- /dev/null
+++ b/packages/kbn-dev-utils/src/kbn_client/kbn_client_requester.ts
@@ -0,0 +1,124 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import Url from 'url';
+
+import Axios from 'axios';
+
+import { isAxiosRequestError, isConcliftOnGetError } from './errors';
+import { ToolingLog } from '../tooling_log';
+
+export const uriencode = (
+  strings: TemplateStringsArray,
+  ...values: Array<string | number | boolean>
+) => {
+  const queue = strings.slice();
+
+  if (queue.length === 0) {
+    throw new Error('how could strings passed to `uriencode` template tag be empty?');
+  }
+
+  if (queue.length !== values.length + 1) {
+    throw new Error('strings and values passed to `uriencode` template tag are unbalanced');
+  }
+
+  // pull the first string off the queue, there is one less item in `values`
+  // since the values are always wrapped in strings, so we shift the extra string
+  // off the queue to balance the queue and values array.
+  const leadingString = queue.shift()!;
+  return queue.reduce(
+    (acc, string, i) => `${acc}${encodeURIComponent(values[i])}${string}`,
+    leadingString
+  );
+};
+
+const DEFAULT_MAX_ATTEMPTS = 5;
+
+export interface ReqOptions {
+  description?: string;
+  path: string;
+  query?: Record<string, any>;
+  method: 'GET' | 'POST' | 'PUT' | 'DELETE';
+  body?: any;
+  attempt?: number;
+  maxAttempts?: number;
+}
+
+const delay = (ms: number) =>
+  new Promise(resolve => {
+    setTimeout(resolve, ms);
+  });
+
+export class KbnClientRequester {
+  constructor(private readonly log: ToolingLog, private readonly kibanaUrls: string[]) {}
+
+  private pickUrl() {
+    const url = this.kibanaUrls.shift()!;
+    this.kibanaUrls.push(url);
+    return url;
+  }
+
+  public resolveUrl(relativeUrl: string = '/') {
+    return Url.resolve(this.pickUrl(), relativeUrl);
+  }
+
+  async request<T>(options: ReqOptions): Promise<T> {
+    const url = Url.resolve(this.pickUrl(), options.path);
+    const description = options.description || `${options.method} ${url}`;
+    const attempt = options.attempt === undefined ? 1 : options.attempt;
+    const maxAttempts =
+      options.maxAttempts === undefined ? DEFAULT_MAX_ATTEMPTS : options.maxAttempts;
+
+    try {
+      const response = await Axios.request<T>({
+        method: options.method,
+        url,
+        data: options.body,
+        params: options.query,
+        headers: {
+          'kbn-xsrf': 'kbn-client',
+        },
+      });
+
+      return response.data;
+    } catch (error) {
+      let retryErrorMsg: string | undefined;
+      if (isAxiosRequestError(error)) {
+        retryErrorMsg = `[${description}] request failed (attempt=${attempt})`;
+      } else if (isConcliftOnGetError(error)) {
+        retryErrorMsg = `Conflict on GET (path=${options.path}, attempt=${attempt})`;
+      }
+
+      if (retryErrorMsg) {
+        if (attempt < maxAttempts) {
+          this.log.error(retryErrorMsg);
+          await delay(1000 * attempt);
+          return await this.request<T>({
+            ...options,
+            attempt: attempt + 1,
+          });
+        }
+
+        throw new Error(retryErrorMsg + ' and ran out of retries');
+      }
+
+      throw error;
+    }
+  }
+}
diff --git a/test/common/services/kibana_server/saved_objects.ts b/packages/kbn-dev-utils/src/kbn_client/kbn_client_saved_objects.ts
similarity index 64%
rename from test/common/services/kibana_server/saved_objects.ts
rename to packages/kbn-dev-utils/src/kbn_client/kbn_client_saved_objects.ts
index 0e4a9a34bf2e40..51fa19c140bf05 100644
--- a/test/common/services/kibana_server/saved_objects.ts
+++ b/packages/kbn-dev-utils/src/kbn_client/kbn_client_saved_objects.ts
@@ -17,16 +17,9 @@
  * under the License.
  */
 
-import Url from 'url';
+import { ToolingLog } from '../tooling_log';
 
-import Axios, { AxiosRequestConfig } from 'axios';
-import { ToolingLog } from '@kbn/dev-utils';
-
-const joinPath = (...components: Array<string | undefined>) =>
-  `/${components
-    .filter((s): s is string => !!s)
-    .map(c => encodeURIComponent(c))
-    .join('/')}`;
+import { KbnClientRequester, uriencode } from './kbn_client_requester';
 
 type MigrationVersion = Record<string, string>;
 
@@ -64,15 +57,8 @@ interface UpdateOptions<Attributes> extends IndexOptions<Attributes> {
   id: string;
 }
 
-export class KibanaServerSavedObjects {
-  private readonly x = Axios.create({
-    baseURL: Url.resolve(this.url, '/api/saved_objects/'),
-    headers: {
-      'kbn-xsrf': 'KibanaServerSavedObjects',
-    },
-  });
-
-  constructor(private readonly url: string, private readonly log: ToolingLog) {}
+export class KbnClientSavedObjects {
+  constructor(private readonly log: ToolingLog, private readonly requester: KbnClientRequester) {}
 
   /**
    * Get an object
@@ -80,8 +66,9 @@ export class KibanaServerSavedObjects {
   public async get<Attributes extends Record<string, any>>(options: GetOptions) {
     this.log.debug('Gettings saved object: %j', options);
 
-    return await this.request<SavedObjectResponse<Attributes>>('get saved object', {
-      url: joinPath(options.type, options.id),
+    return await this.requester.request<SavedObjectResponse<Attributes>>({
+      description: 'get saved object',
+      path: uriencode`/api/saved_objects/${options.type}/${options.id}`,
       method: 'GET',
     });
   }
@@ -92,13 +79,16 @@ export class KibanaServerSavedObjects {
   public async create<Attributes extends Record<string, any>>(options: IndexOptions<Attributes>) {
     this.log.debug('Creating saved object: %j', options);
 
-    return await this.request<SavedObjectResponse<Attributes>>('update saved object', {
-      url: joinPath(options.type, options.id),
-      params: {
+    return await this.requester.request<SavedObjectResponse<Attributes>>({
+      description: 'update saved object',
+      path: options.id
+        ? uriencode`/api/saved_objects/${options.type}/${options.id}`
+        : uriencode`/api/saved_objects/${options.type}`,
+      query: {
         overwrite: options.overwrite,
       },
       method: 'POST',
-      data: {
+      body: {
         attributes: options.attributes,
         migrationVersion: options.migrationVersion,
         references: options.references,
@@ -112,13 +102,14 @@ export class KibanaServerSavedObjects {
   public async update<Attributes extends Record<string, any>>(options: UpdateOptions<Attributes>) {
     this.log.debug('Updating saved object: %j', options);
 
-    return await this.request<SavedObjectResponse<Attributes>>('update saved object', {
-      url: joinPath(options.type, options.id),
-      params: {
+    return await this.requester.request<SavedObjectResponse<Attributes>>({
+      description: 'update saved object',
+      path: uriencode`/api/saved_objects/${options.type}/${options.id}`,
+      query: {
         overwrite: options.overwrite,
       },
       method: 'PUT',
-      data: {
+      body: {
         attributes: options.attributes,
         migrationVersion: options.migrationVersion,
         references: options.references,
@@ -132,22 +123,10 @@ export class KibanaServerSavedObjects {
   public async delete(options: GetOptions) {
     this.log.debug('Deleting saved object %s/%s', options);
 
-    return await this.request('delete saved object', {
-      url: joinPath(options.type, options.id),
+    return await this.requester.request({
+      description: 'delete saved object',
+      path: uriencode`/api/saved_objects/${options.type}/${options.id}`,
       method: 'DELETE',
     });
   }
-
-  private async request<T>(desc: string, options: AxiosRequestConfig) {
-    try {
-      const resp = await this.x.request<T>(options);
-      return resp.data;
-    } catch (error) {
-      if (error.response) {
-        throw new Error(`Failed to ${desc}:\n${JSON.stringify(error.response.data, null, 2)}`);
-      }
-
-      throw error;
-    }
-  }
 }
diff --git a/packages/kbn-dev-utils/src/kbn_client/kbn_client_status.ts b/packages/kbn-dev-utils/src/kbn_client/kbn_client_status.ts
new file mode 100644
index 00000000000000..22baf4a3304168
--- /dev/null
+++ b/packages/kbn-dev-utils/src/kbn_client/kbn_client_status.ts
@@ -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 { KbnClientRequester } from './kbn_client_requester';
+
+interface Status {
+  state: 'green' | 'red' | 'yellow';
+  title?: string;
+  id?: string;
+  icon: string;
+  message: string;
+  uiColor: string;
+  since: string;
+}
+
+interface ApiResponseStatus {
+  name: string;
+  uuid: string;
+  version: {
+    number: string;
+    build_hash: string;
+    build_number: number;
+    build_snapshot: boolean;
+  };
+  status: {
+    overall: Status;
+    statuses: Status[];
+  };
+  metrics: unknown;
+}
+
+export class KbnClientStatus {
+  constructor(private readonly requester: KbnClientRequester) {}
+
+  /**
+   * Get the full server status
+   */
+  async get() {
+    return await this.requester.request<ApiResponseStatus>({
+      method: 'GET',
+      path: 'api/status',
+    });
+  }
+
+  /**
+   * Get the overall/merged state
+   */
+  public async getOverallState() {
+    const status = await this.get();
+    return status.status.overall.state;
+  }
+}
diff --git a/packages/kbn-dev-utils/src/kbn_client/kbn_client_ui_settings.ts b/packages/kbn-dev-utils/src/kbn_client/kbn_client_ui_settings.ts
new file mode 100644
index 00000000000000..03033bc5c2ccc4
--- /dev/null
+++ b/packages/kbn-dev-utils/src/kbn_client/kbn_client_ui_settings.ts
@@ -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 { ToolingLog } from '../tooling_log';
+
+import { KbnClientRequester, uriencode } from './kbn_client_requester';
+
+export type UiSettingValues = Record<string, string | number | boolean>;
+interface UiSettingsApiResponse {
+  settings: {
+    [key: string]: {
+      userValue: string | number | boolean;
+      isOverridden: boolean | undefined;
+    };
+  };
+}
+
+export class KbnClientUiSettings {
+  constructor(
+    private readonly log: ToolingLog,
+    private readonly requester: KbnClientRequester,
+    private readonly defaults?: UiSettingValues
+  ) {}
+
+  async get(setting: string) {
+    const all = await this.getAll();
+    const value = all.settings[setting] ? all.settings[setting].userValue : undefined;
+
+    this.log.verbose('uiSettings.value: %j', value);
+    return value;
+  }
+
+  /**
+   * Gets defaultIndex from the config doc.
+   */
+  async getDefaultIndex() {
+    return await this.get('defaultIndex');
+  }
+
+  /**
+   * Unset a uiSetting
+   */
+  async unset(setting: string) {
+    return await this.requester.request<any>({
+      path: uriencode`/api/kibana/settings/${setting}`,
+      method: 'DELETE',
+    });
+  }
+
+  /**
+   * Replace all uiSettings with the `doc` values, `doc` is merged
+   * with some defaults
+   */
+  async replace(doc: UiSettingValues) {
+    const all = await this.getAll();
+    for (const [name, { isOverridden }] of Object.entries(all.settings)) {
+      if (!isOverridden) {
+        await this.unset(name);
+      }
+    }
+
+    this.log.debug('replacing kibana config doc: %j', doc);
+
+    await this.requester.request({
+      method: 'POST',
+      path: '/api/kibana/settings',
+      body: {
+        changes: {
+          ...this.defaults,
+          ...doc,
+        },
+      },
+    });
+  }
+
+  /**
+   * Add fields to the config doc (like setting timezone and defaultIndex)
+   */
+  async update(updates: UiSettingValues) {
+    this.log.debug('applying update to kibana config: %j', updates);
+
+    await this.requester.request({
+      path: '/api/kibana/settings',
+      method: 'POST',
+      body: {
+        changes: updates,
+      },
+    });
+  }
+
+  private async getAll() {
+    return await this.requester.request<UiSettingsApiResponse>({
+      path: '/api/kibana/settings',
+      method: 'GET',
+    });
+  }
+}
diff --git a/src/legacy/ui/ui_exports/ui_exports_mixin.js b/packages/kbn-dev-utils/src/kbn_client/kbn_client_version.ts
similarity index 63%
rename from src/legacy/ui/ui_exports/ui_exports_mixin.js
rename to packages/kbn-dev-utils/src/kbn_client/kbn_client_version.ts
index ea2a07f3b265e0..1aacb857f12f67 100644
--- a/src/legacy/ui/ui_exports/ui_exports_mixin.js
+++ b/packages/kbn-dev-utils/src/kbn_client/kbn_client_version.ts
@@ -17,22 +17,20 @@
  * under the License.
  */
 
-import { collectUiExports } from './collect_ui_exports';
+import { KbnClientStatus } from './kbn_client_status';
 
-export function uiExportsMixin(kbnServer) {
-  kbnServer.uiExports = collectUiExports(
-    kbnServer.pluginSpecs
-  );
+export class KbnClientVersion {
+  private versionCache: string | undefined;
 
-  // check for unknown uiExport types
-  const { unknown = [] } = kbnServer.uiExports;
-  if (!unknown.length) {
-    return;
-  }
+  constructor(private readonly status: KbnClientStatus) {}
+
+  async get() {
+    if (this.versionCache !== undefined) {
+      return this.versionCache;
+    }
 
-  throw new Error(`Unknown uiExport types: ${
-    unknown
-      .map(({ pluginSpec, type }) => `${type} from ${pluginSpec.getId()}`)
-      .join(', ')
-  }`);
+    const status = await this.status.get();
+    this.versionCache = status.version.number + (status.version.build_snapshot ? '-SNAPSHOT' : '');
+    return this.versionCache;
+  }
 }
diff --git a/packages/kbn-es-query/src/es_query/index.d.ts b/packages/kbn-es-query/src/es_query/index.d.ts
new file mode 100644
index 00000000000000..9510a18441e53c
--- /dev/null
+++ b/packages/kbn-es-query/src/es_query/index.d.ts
@@ -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.
+ */
+
+export function buildQueryFromFilters(filters: unknown[], indexPattern: unknown): unknown;
+export function buildEsQuery(
+  indexPattern: unknown,
+  queries: unknown,
+  filters: unknown,
+  config?: {
+    allowLeadingWildcards: boolean;
+    queryStringOptions: unknown;
+    ignoreFilterIfFieldNotInIndex: boolean;
+    dateFormatTZ?: string | null;
+  }
+): unknown;
+export function getEsQueryConfig(config: {
+  get: (name: string) => unknown;
+}): {
+  allowLeadingWildcards: boolean;
+  queryStringOptions: unknown;
+  ignoreFilterIfFieldNotInIndex: boolean;
+  dateFormatTZ?: string | null;
+};
diff --git a/packages/kbn-es-query/src/index.d.ts b/packages/kbn-es-query/src/index.d.ts
index 873636a28889fd..ca4455da33f45d 100644
--- a/packages/kbn-es-query/src/index.d.ts
+++ b/packages/kbn-es-query/src/index.d.ts
@@ -17,5 +17,6 @@
  * under the License.
  */
 
+export * from './es_query';
 export * from './kuery';
 export * from './filters';
diff --git a/packages/kbn-es-query/src/kuery/ast/ast.d.ts b/packages/kbn-es-query/src/kuery/ast/ast.d.ts
index 915c024f2ab48d..448ef0e9cca750 100644
--- a/packages/kbn-es-query/src/kuery/ast/ast.d.ts
+++ b/packages/kbn-es-query/src/kuery/ast/ast.d.ts
@@ -17,6 +17,8 @@
  * under the License.
  */
 
+import { JsonObject } from '..';
+
 /**
  * WARNING: these typings are incomplete
  */
@@ -30,15 +32,6 @@ export interface KueryParseOptions {
   startRule: string;
 }
 
-type JsonValue = null | boolean | number | string | JsonObject | JsonArray;
-
-interface JsonObject {
-  [key: string]: JsonValue;
-}
-
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface JsonArray extends Array<JsonValue> {}
-
 export function fromKueryExpression(
   expression: string,
   parseOptions?: KueryParseOptions
diff --git a/packages/kbn-es-query/src/kuery/functions/is.js b/packages/kbn-es-query/src/kuery/functions/is.js
index 0338671e9b3fe4..690f98b08ba827 100644
--- a/packages/kbn-es-query/src/kuery/functions/is.js
+++ b/packages/kbn-es-query/src/kuery/functions/is.js
@@ -32,7 +32,6 @@ export function buildNodeParams(fieldName, value, isPhrase = false) {
   if (_.isUndefined(value)) {
     throw new Error('value is a required argument');
   }
-
   const fieldNode = typeof fieldName === 'string' ? ast.fromLiteralExpression(fieldName) : literal.buildNode(fieldName);
   const valueNode = typeof value === 'string' ? ast.fromLiteralExpression(value) : literal.buildNode(value);
   const isPhraseNode = literal.buildNode(isPhrase);
@@ -42,7 +41,7 @@ export function buildNodeParams(fieldName, value, isPhrase = false) {
 }
 
 export function toElasticsearchQuery(node, indexPattern = null, config = {}) {
-  const { arguments: [ fieldNameArg, valueArg, isPhraseArg ] } = node;
+  const { arguments: [fieldNameArg, valueArg, isPhraseArg] } = node;
   const fieldName = ast.toElasticsearchQuery(fieldNameArg);
   const value = !_.isUndefined(valueArg) ? ast.toElasticsearchQuery(valueArg) : valueArg;
   const type = isPhraseArg.value ? 'phrase' : 'best_fields';
diff --git a/packages/kbn-es-query/src/kuery/index.d.ts b/packages/kbn-es-query/src/kuery/index.d.ts
index 9d797406420d41..b01a8914f68ef3 100644
--- a/packages/kbn-es-query/src/kuery/index.d.ts
+++ b/packages/kbn-es-query/src/kuery/index.d.ts
@@ -18,3 +18,13 @@
  */
 
 export * from './ast';
+export { nodeTypes } from './node_types';
+
+export type JsonValue = null | boolean | number | string | JsonObject | JsonArray;
+
+export interface JsonObject {
+  [key: string]: JsonValue;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface JsonArray extends Array<JsonValue> {}
diff --git a/packages/kbn-es-query/src/kuery/index.js b/packages/kbn-es-query/src/kuery/index.js
index 84c6a205b42ce6..08fa9829d4a566 100644
--- a/packages/kbn-es-query/src/kuery/index.js
+++ b/packages/kbn-es-query/src/kuery/index.js
@@ -19,5 +19,5 @@
 
 export * from './ast';
 export * from './filter_migration';
-export * from './node_types';
+export { nodeTypes } from './node_types';
 export * from './errors';
diff --git a/packages/kbn-es-query/src/kuery/node_types/index.d.ts b/packages/kbn-es-query/src/kuery/node_types/index.d.ts
new file mode 100644
index 00000000000000..0d1f2c28e39f08
--- /dev/null
+++ b/packages/kbn-es-query/src/kuery/node_types/index.d.ts
@@ -0,0 +1,76 @@
+/*
+ * 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.
+ */
+
+/**
+ * WARNING: these typings are incomplete
+ */
+
+import { JsonObject, JsonValue } from '..';
+
+type FunctionName =
+  | 'is'
+  | 'and'
+  | 'or'
+  | 'not'
+  | 'range'
+  | 'exists'
+  | 'geoBoundingBox'
+  | 'geoPolygon';
+
+interface FunctionTypeBuildNode {
+  type: 'function';
+  function: FunctionName;
+  // TODO -> Need to define a better type for DSL query
+  arguments: any[];
+}
+
+interface FunctionType {
+  buildNode: (functionName: FunctionName, ...args: any[]) => FunctionTypeBuildNode;
+  buildNodeWithArgumentNodes: (functionName: FunctionName, ...args: any[]) => FunctionTypeBuildNode;
+  toElasticsearchQuery: (node: any, indexPattern: any, config: JsonObject) => JsonValue;
+}
+
+interface LiteralType {
+  buildNode: (
+    value: null | boolean | number | string
+  ) => { type: 'literal'; value: null | boolean | number | string };
+  toElasticsearchQuery: (node: any) => null | boolean | number | string;
+}
+
+interface NamedArgType {
+  buildNode: (name: string, value: any) => { type: 'namedArg'; name: string; value: any };
+  toElasticsearchQuery: (node: any) => string;
+}
+
+interface WildcardType {
+  buildNode: (value: string) => { type: 'wildcard'; value: string };
+  test: (node: any, string: string) => boolean;
+  toElasticsearchQuery: (node: any) => string;
+  toQueryStringQuery: (node: any) => string;
+  hasLeadingWildcard: (node: any) => boolean;
+}
+
+interface NodeTypes {
+  function: FunctionType;
+  literal: LiteralType;
+  namedArg: NamedArgType;
+  wildcard: WildcardType;
+}
+
+export const nodeTypes: NodeTypes;
diff --git a/packages/kbn-plugin-generator/integration_tests/generate_plugin.test.js b/packages/kbn-plugin-generator/integration_tests/generate_plugin.test.js
index 18e161e0ce925e..523317ab63e85b 100644
--- a/packages/kbn-plugin-generator/integration_tests/generate_plugin.test.js
+++ b/packages/kbn-plugin-generator/integration_tests/generate_plugin.test.js
@@ -88,7 +88,12 @@ describe(`running the plugin-generator via 'node scripts/generate_plugin.js plug
       await withProcRunner(log, async proc => {
         await proc.run('kibana', {
           cmd: 'yarn',
-          args: ['start', '--optimize.enabled=false', '--logging.json=false'],
+          args: [
+            'start',
+            '--optimize.enabled=false',
+            '--logging.json=false',
+            '--migrations.skip=true',
+          ],
           cwd: generatedPath,
           wait: /ispec_plugin.+Status changed from uninitialized to green - Ready/,
         });
diff --git a/packages/kbn-test/src/functional_test_runner/lib/mocha/filter_suites_by_tags.test.js b/packages/kbn-test/src/functional_test_runner/lib/mocha/filter_suites_by_tags.test.js
index fb1ca192c5fd37..9901f62ae71cf3 100644
--- a/packages/kbn-test/src/functional_test_runner/lib/mocha/filter_suites_by_tags.test.js
+++ b/packages/kbn-test/src/functional_test_runner/lib/mocha/filter_suites_by_tags.test.js
@@ -95,16 +95,16 @@ it('only runs hooks of parents and tests in level1a', async () => {
   });
 
   expect(history).toMatchInlineSnapshot(`
-Array [
-  "info: Only running suites (and their sub-suites) if they include the tag(s): [ 'level1a' ]",
-  "suite: ",
-  "suite: level 1",
-  "suite: level 1 level 1a",
-  "hook:   \\"before each\\" hook: rootBeforeEach",
-  "hook:  level 1 \\"before each\\" hook: level1BeforeEach",
-  "test:  level 1 level 1a test 1a",
-]
-`);
+    Array [
+      "info: Only running suites (and their sub-suites) if they include the tag(s): [ 'level1a' ]",
+      "suite: ",
+      "suite: level 1",
+      "suite: level 1 level 1a",
+      "hook:  \\"before each\\" hook: rootBeforeEach",
+      "hook:  level 1 \\"before each\\" hook: level1BeforeEach",
+      "test:  level 1 level 1a test 1a",
+    ]
+  `);
 });
 
 it('only runs hooks of parents and tests in level1b', async () => {
@@ -114,16 +114,16 @@ it('only runs hooks of parents and tests in level1b', async () => {
   });
 
   expect(history).toMatchInlineSnapshot(`
-Array [
-  "info: Only running suites (and their sub-suites) if they include the tag(s): [ 'level1b' ]",
-  "suite: ",
-  "suite: level 1",
-  "suite: level 1 level 1b",
-  "hook:   \\"before each\\" hook: rootBeforeEach",
-  "hook:  level 1 \\"before each\\" hook: level1BeforeEach",
-  "test:  level 1 level 1b test 1b",
-]
-`);
+    Array [
+      "info: Only running suites (and their sub-suites) if they include the tag(s): [ 'level1b' ]",
+      "suite: ",
+      "suite: level 1",
+      "suite: level 1 level 1b",
+      "hook:  \\"before each\\" hook: rootBeforeEach",
+      "hook:  level 1 \\"before each\\" hook: level1BeforeEach",
+      "test:  level 1 level 1b test 1b",
+    ]
+  `);
 });
 
 it('only runs hooks of parents and tests in level1a and level1b', async () => {
@@ -133,20 +133,20 @@ it('only runs hooks of parents and tests in level1a and level1b', async () => {
   });
 
   expect(history).toMatchInlineSnapshot(`
-Array [
-  "info: Only running suites (and their sub-suites) if they include the tag(s): [ 'level1a', 'level1b' ]",
-  "suite: ",
-  "suite: level 1",
-  "suite: level 1 level 1a",
-  "hook:   \\"before each\\" hook: rootBeforeEach",
-  "hook:  level 1 \\"before each\\" hook: level1BeforeEach",
-  "test:  level 1 level 1a test 1a",
-  "suite: level 1 level 1b",
-  "hook:   \\"before each\\" hook: rootBeforeEach",
-  "hook:  level 1 \\"before each\\" hook: level1BeforeEach",
-  "test:  level 1 level 1b test 1b",
-]
-`);
+    Array [
+      "info: Only running suites (and their sub-suites) if they include the tag(s): [ 'level1a', 'level1b' ]",
+      "suite: ",
+      "suite: level 1",
+      "suite: level 1 level 1a",
+      "hook:  \\"before each\\" hook: rootBeforeEach",
+      "hook:  level 1 \\"before each\\" hook: level1BeforeEach",
+      "test:  level 1 level 1a test 1a",
+      "suite: level 1 level 1b",
+      "hook:  \\"before each\\" hook: rootBeforeEach",
+      "hook:  level 1 \\"before each\\" hook: level1BeforeEach",
+      "test:  level 1 level 1b test 1b",
+    ]
+  `);
 });
 
 it('only runs level1a if including level1 and excluding level1b', async () => {
@@ -156,17 +156,17 @@ it('only runs level1a if including level1 and excluding level1b', async () => {
   });
 
   expect(history).toMatchInlineSnapshot(`
-Array [
-  "info: Only running suites (and their sub-suites) if they include the tag(s): [ 'level1' ]",
-  "info: Filtering out any suites that include the tag(s): [ 'level1b' ]",
-  "suite: ",
-  "suite: level 1",
-  "suite: level 1 level 1a",
-  "hook:   \\"before each\\" hook: rootBeforeEach",
-  "hook:  level 1 \\"before each\\" hook: level1BeforeEach",
-  "test:  level 1 level 1a test 1a",
-]
-`);
+    Array [
+      "info: Only running suites (and their sub-suites) if they include the tag(s): [ 'level1' ]",
+      "info: Filtering out any suites that include the tag(s): [ 'level1b' ]",
+      "suite: ",
+      "suite: level 1",
+      "suite: level 1 level 1a",
+      "hook:  \\"before each\\" hook: rootBeforeEach",
+      "hook:  level 1 \\"before each\\" hook: level1BeforeEach",
+      "test:  level 1 level 1a test 1a",
+    ]
+  `);
 });
 
 it('only runs level1b if including level1 and excluding level1a', async () => {
@@ -176,17 +176,17 @@ it('only runs level1b if including level1 and excluding level1a', async () => {
   });
 
   expect(history).toMatchInlineSnapshot(`
-Array [
-  "info: Only running suites (and their sub-suites) if they include the tag(s): [ 'level1' ]",
-  "info: Filtering out any suites that include the tag(s): [ 'level1a' ]",
-  "suite: ",
-  "suite: level 1",
-  "suite: level 1 level 1b",
-  "hook:   \\"before each\\" hook: rootBeforeEach",
-  "hook:  level 1 \\"before each\\" hook: level1BeforeEach",
-  "test:  level 1 level 1b test 1b",
-]
-`);
+    Array [
+      "info: Only running suites (and their sub-suites) if they include the tag(s): [ 'level1' ]",
+      "info: Filtering out any suites that include the tag(s): [ 'level1a' ]",
+      "suite: ",
+      "suite: level 1",
+      "suite: level 1 level 1b",
+      "hook:  \\"before each\\" hook: rootBeforeEach",
+      "hook:  level 1 \\"before each\\" hook: level1BeforeEach",
+      "test:  level 1 level 1b test 1b",
+    ]
+  `);
 });
 
 it('only runs level2 if excluding level1', async () => {
@@ -196,15 +196,15 @@ it('only runs level2 if excluding level1', async () => {
   });
 
   expect(history).toMatchInlineSnapshot(`
-Array [
-  "info: Filtering out any suites that include the tag(s): [ 'level1' ]",
-  "suite: ",
-  "suite: level 2",
-  "suite: level 2 level 2a",
-  "hook:   \\"before each\\" hook: rootBeforeEach",
-  "test:  level 2 level 2a test 2a",
-]
-`);
+    Array [
+      "info: Filtering out any suites that include the tag(s): [ 'level1' ]",
+      "suite: ",
+      "suite: level 2",
+      "suite: level 2 level 2a",
+      "hook:  \\"before each\\" hook: rootBeforeEach",
+      "test:  level 2 level 2a test 2a",
+    ]
+  `);
 });
 
 it('does nothing if everything excluded', async () => {
@@ -214,8 +214,8 @@ it('does nothing if everything excluded', async () => {
   });
 
   expect(history).toMatchInlineSnapshot(`
-Array [
-  "info: Filtering out any suites that include the tag(s): [ 'level1', 'level2a' ]",
-]
-`);
+    Array [
+      "info: Filtering out any suites that include the tag(s): [ 'level1', 'level2a' ]",
+    ]
+  `);
 });
diff --git a/renovate.json5 b/renovate.json5
index e5dd29aa631908..cd836762b817f8 100644
--- a/renovate.json5
+++ b/renovate.json5
@@ -67,6 +67,17 @@
           '(\\b|_)jest(\\b|_)',
         ],
       },
+      {
+        groupSlug: '@elastic/charts',
+        groupName: '@elastic/charts related packages',
+        packageNames: [
+          '@elastic/charts',
+          '@types/elastic__charts',
+        ],
+        reviewers: [
+          'markov00',
+        ],
+      },
       {
         groupSlug: 'mocha',
         groupName: 'mocha related packages',
diff --git a/rfcs/text/0006_management_section_service.md b/rfcs/text/0006_management_section_service.md
new file mode 100644
index 00000000000000..bcb74b1bcd8da7
--- /dev/null
+++ b/rfcs/text/0006_management_section_service.md
@@ -0,0 +1,332 @@
+- Start Date: 2019-08-20
+- RFC PR: TBD
+- Kibana Issue: [#43499](https://github.com/elastic/kibana/issues/43499)
+
+# Summary
+Management is one of the four primary "domains" covered by @elastic/kibana-app-arch (along with Data, Embeddables, and Visualizations). There are two main purposes for this service:
+
+1. Own the management "framework" -- the UI that displays the management sidebar nav, the landing page, and handles rendering each of the sections
+2. Expose a registry for other plugins to add their own registry sections to the UI and add nested links to them in the sidebar.
+
+The purpose of this RFC is to consider item 2 above -- the service for registering sections to the nav & loading them up.
+
+# Motivation
+
+## Why now?
+The main driver for considering this now is that the Management API moving to the new platform is going to block other teams from completing migration, so we need to have an answer to what the new platform version of the API looks like as soon as possible in `7.x`.
+
+## Why not just keep the current API and redesign later?
+The answer to that has to do with the items that are currently used in the management implementation which must be removed in order to migrate to NP: the framework currently registers a `uiExport`, and relies on `IndexedArray`, `uiRegistry`, and `ui/routes`.
+
+This means that we will basically need to rebuild the service anyway in order to migrate to the new platform. So if we are going to invest that time, we might as well invest it in building the API the way we want it to be longer term, rather than creating more work for ourselves later.
+
+## Technical goals
+- Remove another usage of `IndexedArray` & `uiRegistry` (required for migration)
+- Remove dependency on `ui/routes` (required for migration)
+- Remove management section `uiExport` (required for migration)
+- Simple API that is designed in keeping with new platform principles
+  - This includes being rendering-framework-agnostic... You should be able to build your management section UI however you'd like
+- Clear separation of app/UI code and service code, even if both live within the same plugin
+- Flexibility to potentially support alternate layouts in the future (see mockups in [reference section](#reference) below)
+
+# Basic example
+This API is influenced heavily by the [application service mounting RFC](https://github.com/elastic/kibana/blob/master/rfcs/text/0004_application_service_mounting.md). The intent is to make the experience consistent with that service; the Management section is basically one big app with a bunch of registered "subapps".
+
+```ts
+// my_plugin/public/plugin.ts
+
+export class MyPlugin {
+  setup(core, { management }) {
+    // Registering a new app to a new section
+    const mySection = management.sections.register({
+      id: 'my-section',
+      title: 'My Main Section', // display name
+      order: 10,
+      euiIconType: 'iconName',
+    });
+    mySection.registerApp({
+      id: 'my-management-app',
+      title: 'My Management App', // display name
+      order: 20,
+      async mount(context, params) {
+        const { renderApp } = await import('./my-section');
+        return renderApp(context, params);
+      }
+    });
+
+    // Registering a new app to an existing section
+    const kibanaSection = management.sections.get('kibana');
+    kibanaSection.registerApp({ id: 'my-kibana-management-app', ... });
+  }
+
+  start(core, { management }) {
+    // access all registered sections, filtered based on capabilities
+    const sections = management.sections.getAvailable();
+    sections.forEach(section => console.log(`${section.id} - ${section.title}`));
+    // automatically navigate to any app by id
+    management.sections.navigateToApp('my-kibana-management-app');
+  }
+}
+ 
+// my_plugin/public/my-section.tsx
+
+export function renderApp(context, { sectionBasePath, element }) {
+  ReactDOM.render(
+    // `sectionBasePath` would be `/app/management/my-section/my-management-app`
+    <MyApp basename={sectionBasePath} />,
+    element
+  );
+ 
+  // return value must be a function that unmounts (just like Core Application Service)
+  return () => ReactDOM.unmountComponentAtNode(element);
+}
+```
+
+We can also create a utility in `kibana_react` to make it easy for folks to `mount` a React app:
+```ts
+// src/plugins/kibana_react/public/mount_with_react.tsx
+import { KibanaContextProvider } from './context';
+
+export const mountWithReact = (
+  Component: React.ComponentType<{ basename: string }>,
+  context: AppMountContext,
+  params: ManagementSectionMountParams,
+) => {
+  ReactDOM.render(
+    (
+      <KibanaContextProvider services={{ ...context }}>
+        <Component basename={params.sectionBasePath} />
+      </KibanaContextProvider>
+    ),
+    params.element
+  );
+
+  return () => ReactDOM.unmountComponentAtNode(params.element);
+}
+
+// my_plugin/public/plugin.ts
+import { mountWithReact } from 'src/plugins/kibana_react/public';
+
+export class MyPlugin {
+  setup(core, { management }) {
+    const kibanaSection = management.sections.get('kibana');
+    kibanaSection.registerApp({
+      id: 'my-other-kibana-management-app',
+      ...,
+      async mount(context, params) {
+        const { MySection } = await import('./components/my-section');
+        const unmountCallback = mountWithReact(MySection, context, params);
+        return () => unmountCallback();
+      }
+    });
+  }
+}
+```
+ 
+# Detailed design
+
+```ts
+interface ManagementSetup {
+  sections: SectionsServiceSetup;
+}
+
+interface ManagementStart {
+  sections: SectionsServiceStart;
+}
+ 
+interface SectionsServiceSetup {
+  get: (sectionId: string) => Section;
+  getAvailable: () => Section[]; // filtered based on capabilities
+  register: RegisterSection;
+}
+
+interface SectionsServiceStart {
+  getAvailable: () => Array<Omit<Section, 'registerApp'>>; // filtered based on capabilities
+  // uses `core.application.navigateToApp` under the hood, automatically prepending the `path` for the link
+  navigateToApp: (appId: string, options?: { path?: string; state?: any }) => void;
+}
+
+type RegisterSection = (
+  id: string,
+  title: string,
+  order?: number,
+  euiIconType?: string, // takes precedence over `icon` property.
+  icon?: string, // URL to image file; fallback if no `euiIconType`
+) => Section;
+ 
+type RegisterManagementApp = (
+  id: string;
+  title: string;
+  order?: number;
+  mount: ManagementSectionMount;
+) => ManagementApp;
+ 
+type Unmount = () => Promise<void> | void;
+ 
+interface ManagementSectionMountParams {
+  sectionBasePath: string; // base path for setting up your router
+  element: HTMLElement; // element the section should render into
+}
+
+type ManagementSectionMount = (
+  context: AppMountContext, // provided by core.ApplicationService
+  params: ManagementSectionMountParams,
+) => Unmount | Promise<Unmount>;
+
+interface ManagementApp {
+  id: string;
+  title: string;
+  basePath: string;
+  sectionId: string;
+  order?: number;
+}
+
+interface Section {
+  id: string;
+  title: string;
+  apps: ManagementApp[];
+  registerApp: RegisterManagementApp;
+  order?: number;
+  euiIconType?: string;
+  icon?: string;
+}
+```
+
+# Legacy service (what this would be replacing)
+
+Example of how this looks today:
+```js
+// myplugin/index
+new Kibana.Plugin({
+  uiExports: {
+    managementSections: ['myplugin/management'],
+  }
+});
+ 
+// myplugin/public/management
+import { management } from 'ui/management';
+ 
+// completely new section
+const newSection = management.register('mypluginsection', {
+  name: 'mypluginsection',
+  order: 10,
+  display: 'My Plugin',
+  icon: 'iconName',
+});
+newSection.register('mypluginlink', {
+  name: 'mypluginlink',
+  order: 10,
+  display: 'My sublink',
+  url: `#/management/myplugin`,
+});
+ 
+// new link in existing section
+const kibanaSection = management.getSection('kibana');
+kibanaSection.register('mypluginlink', {
+  name: 'mypluginlink',
+  order: 10,
+  display: 'My sublink',
+  url: `#/management/myplugin`,
+});
+ 
+// use ui/routes to render component
+import routes from 'ui/routes';
+ 
+const renderReact = (elem) => {
+  render(<MyApp />, elem);
+};
+ 
+routes.when('management/myplugin', {
+  controller($scope, $http, kbnUrl) {
+    $scope.$on('$destroy', () => {
+      const elem = document.getElementById('usersReactRoot');
+      if (elem) unmountComponentAtNode(elem);
+    });
+    $scope.$$postDigest(() => {
+      const elem = document.getElementById('usersReactRoot');
+      const changeUrl = (url) => {
+        kbnUrl.change(url);
+        $scope.$apply();
+      };
+      renderReact(elem, $http, changeUrl);
+    });
+  },
+});
+```
+Current public contracts owned by the legacy service:
+```js
+// ui/management/index
+interface API {
+  PAGE_TITLE_COMPONENT: string; // actually related to advanced settings?
+  PAGE_SUBTITLE_COMPONENT: string; // actually related to advanced settings?
+  PAGE_FOOTER_COMPONENT: string; // actually related to advanced settings?
+  SidebarNav: React.SFC<any>;
+  registerSettingsComponent: (
+    id: string,
+    component: string | React.SFC<any>,
+    allowOverride: boolean
+  ) => void;
+  management: new ManagementSection();
+  MANAGEMENT_BREADCRUMB: {
+    text: string;
+    href: string;
+  };
+}
+
+// ui/management/section
+class ManagementSection {
+  get visibleItems,
+  addListener: (fn: function) => void,
+  register: (id: string, options: Options) => ManagementSection,
+  deregister: (id: string) => void,
+  hasItem: (id: string) => boolean,
+  getSection: (id: string) => ManagementSection,
+  hide: () => void,
+  show: () => void,
+  disable: () => void,
+  enable: () => void,
+}
+ 
+interface Options {
+  order: number | null;
+  display: string | null; // defaults to id
+  url: string | null; // defaults to ''
+  visible: boolean | null; // defaults to true
+  disabled: boolean | null; // defaults to false
+  tooltip: string | null; // defaults to ''
+  icon: string | null; // defaults to ''
+}
+```
+
+# Notes
+
+- The hide/show/disable/enable options were dropped with the assumption that we will be working with uiCapabilities to determine this instead... so people shouldn't need to manage it manually as they can look up a pre-filtered list of sections.
+- This was updated to add flexibility for custom (non-EUI) icons as outlined in [#32661](https://github.com/elastic/kibana/issues/32661). Much like the Core Application Service, you either choose an EUI icon, or provide a URL to an icon.
+
+# Drawbacks
+
+- This removes the ability to infinitely nest sections within each other by making a distinction between a section header and a nav link.
+  - So far we didn't seem to be using this feature anyway, but would like feedback on any use cases for it.
+
+# Reference
+
+- Issues about Global vs Spaces-based management sections: https://github.com/elastic/kibana/issues/37285 https://github.com/elastic/kibana/issues/37283
+- Mockups related to above issues: https://marvelapp.com/52b8616/screen/57582729
+
+# Alternatives
+
+An alternative design would be making everything React-specific and simply requiring consumers of the service to provide a React component to render when a route is hit, or giving them a react-router instance to work with.
+
+This would require slightly less work for folks using the service as it would eliminate the need for a `mount` function. However, it comes at the cost of forcing folks into a specific rendering framework, which ultimately provides less flexibility.
+
+# Adoption strategy
+
+Our strategy for implementing this should be to build the service entirely in the new platform in a `management` plugin, so that plugins can gradually cut over to the new service as they prepare to migrate to the new platform.
+
+One thing we would need to figure out is how to bridge the gap between the new plugin and the legacy `ui/management` service. Ideally we would find a way to integrate the two, such that the management nav could display items registered via both services. This is a strategy we'd need to work out in more detail as we got closer to implementation.
+
+# How we teach this
+
+The hope is that this will already feel familiar to Kibana application developers, as most will have already been exposed to the Core Application Service and how it handles mounting.
+
+A guide could also be added to the "Management" section of the Kibana docs (the legacy service is not even formally documented).
diff --git a/src/cli/serve/integration_tests/invalid_config.test.js b/src/cli/serve/integration_tests/invalid_config.test.js
index a3f44697281090..e86fb03ad79546 100644
--- a/src/cli/serve/integration_tests/invalid_config.test.js
+++ b/src/cli/serve/integration_tests/invalid_config.test.js
@@ -25,9 +25,12 @@ const INVALID_CONFIG_PATH = resolve(__dirname, '__fixtures__/invalid_config.yml'
 
 describe('cli invalid config support', function () {
   it('exits with statusCode 64 and logs a single line when config is invalid', function () {
+    // Unused keys only throw once LegacyService starts, so disable migrations so that Core
+    // will finish the start lifecycle without a running Elasticsearch instance.
     const { error, status, stdout } = spawnSync(process.execPath, [
       'src/cli',
-      '--config', INVALID_CONFIG_PATH
+      '--config', INVALID_CONFIG_PATH,
+      '--migrations.skip=true'
     ], {
       cwd: ROOT_DIR
     });
diff --git a/src/cli/serve/integration_tests/reload_logging_config.test.js b/src/cli/serve/integration_tests/reload_logging_config.test.js
index 2b6f229ca9dae4..206118d2d1be85 100644
--- a/src/cli/serve/integration_tests/reload_logging_config.test.js
+++ b/src/cli/serve/integration_tests/reload_logging_config.test.js
@@ -83,7 +83,7 @@ describe('Server logging configuration', function () {
     it('should be reloadable via SIGHUP process signaling', async function () {
       expect.assertions(3);
 
-      child = spawn(process.execPath, [kibanaPath, '--config', testConfigFile, '--oss'], {
+      child = spawn(process.execPath, [kibanaPath, '--config', testConfigFile, '--oss', '--verbose'], {
         stdio: 'pipe'
       });
 
@@ -114,7 +114,9 @@ describe('Server logging configuration', function () {
               const data = JSON.parse(line);
               sawJson = true;
 
-              if (data.tags.includes('listening')) {
+              // We know the sighup handler will be registered before
+              // root.setup() is called
+              if (data.message.includes('setting up root')) {
                 isJson = false;
                 setLoggingJson(false);
 
@@ -128,10 +130,9 @@ describe('Server logging configuration', function () {
               // the switch yet, so we ignore before switching over.
             } else {
               // Kibana has successfully stopped logging json, so kill the server.
-
               sawNonjson = true;
 
-              child.kill();
+              child && child.kill();
               child = undefined;
             }
           })
@@ -178,10 +179,11 @@ describe('Server logging configuration', function () {
         '--config', testConfigFile,
         '--logging.dest', logPath,
         '--plugins.initialize', 'false',
-        '--logging.json', 'false'
+        '--logging.json', 'false',
+        '--verbose'
       ]);
 
-      watchFileUntil(logPath, /http server running/, 2 * minute)
+      watchFileUntil(logPath, /starting server/, 2 * minute)
         .then(() => {
           // once the server is running, archive the log file and issue SIGHUP
           fs.renameSync(logPath, logPathArchived);
@@ -190,8 +192,8 @@ describe('Server logging configuration', function () {
         .then(() => watchFileUntil(logPath, /Reloaded logging configuration due to SIGHUP/, 10 * second))
         .then(contents => {
           const lines = contents.toString().split('\n');
-          // should be the first and only new line of the log file
-          expect(lines).toHaveLength(2);
+          // should be the first line of the new log file
+          expect(lines[0]).toMatch(/Reloaded logging configuration due to SIGHUP/);
           child.kill();
         })
         .then(done, done);
diff --git a/src/cli/serve/serve.js b/src/cli/serve/serve.js
index 7f479a7e118e02..1f7593d788304b 100644
--- a/src/cli/serve/serve.js
+++ b/src/cli/serve/serve.js
@@ -194,7 +194,6 @@ export default function (program) {
     .option('--plugins <path>', 'an alias for --plugin-dir', pluginDirCollector)
     .option('--optimize', 'Optimize and then stop the server');
 
-
   if (CAN_REPL) {
     command.option('--repl', 'Run the server with a REPL prompt and access to the server object');
   }
@@ -240,7 +239,7 @@ export default function (program) {
           repl: !!opts.repl,
           basePath: !!opts.basePath,
           optimize: !!opts.optimize,
-          oss: !!opts.oss,
+          oss: !!opts.oss
         },
         features: {
           isClusterModeSupported: CAN_CLUSTER,
diff --git a/src/core/public/application/application_service.tsx b/src/core/public/application/application_service.tsx
index d1855a0370f002..935844baddf86a 100644
--- a/src/core/public/application/application_service.tsx
+++ b/src/core/public/application/application_service.tsx
@@ -27,12 +27,9 @@ import { AppRouter } from './ui';
 import { HttpStart } from '../http';
 import { ContextSetup, IContextContainer } from '../context';
 import {
-  AppMountContext,
   App,
   LegacyApp,
   AppMounter,
-  AppUnmount,
-  AppMountParameters,
   InternalApplicationSetup,
   InternalApplicationStart,
 } from './types';
@@ -64,11 +61,7 @@ export class ApplicationService {
   private readonly apps$ = new BehaviorSubject<ReadonlyMap<string, AppBox>>(new Map());
   private readonly legacyApps$ = new BehaviorSubject<ReadonlyMap<string, LegacyApp>>(new Map());
   private readonly capabilities = new CapabilitiesService();
-  private mountContext?: IContextContainer<
-    AppMountContext,
-    AppUnmount | Promise<AppUnmount>,
-    [AppMountParameters]
-  >;
+  private mountContext?: IContextContainer<App['mount']>;
 
   public setup({ context }: SetupDeps): InternalApplicationSetup {
     this.mountContext = context.createContextContainer();
@@ -98,7 +91,7 @@ export class ApplicationService {
 
         this.legacyApps$.next(new Map([...this.legacyApps$.value.entries(), [app.id, app]]));
       },
-      registerMountContext: this.mountContext.registerContext,
+      registerMountContext: this.mountContext!.registerContext,
     };
   }
 
diff --git a/src/core/public/application/types.ts b/src/core/public/application/types.ts
index 018d7569ce411b..b2d0aff26b8b09 100644
--- a/src/core/public/application/types.ts
+++ b/src/core/public/application/types.ts
@@ -193,7 +193,7 @@ export interface ApplicationSetup {
    */
   registerMountContext<T extends keyof AppMountContext>(
     contextName: T,
-    provider: IContextProvider<AppMountContext, T>
+    provider: IContextProvider<App['mount'], T>
   ): void;
 }
 
@@ -224,7 +224,7 @@ export interface InternalApplicationSetup {
   registerMountContext<T extends keyof AppMountContext>(
     pluginOpaqueId: PluginOpaqueId,
     contextName: T,
-    provider: IContextProvider<AppMountContext, T>
+    provider: IContextProvider<App['mount'], T>
   ): void;
 }
 
@@ -261,7 +261,7 @@ export interface ApplicationStart {
    */
   registerMountContext<T extends keyof AppMountContext>(
     contextName: T,
-    provider: IContextProvider<AppMountContext, T>
+    provider: IContextProvider<App['mount'], T>
   ): void;
 }
 
@@ -291,7 +291,7 @@ export interface InternalApplicationStart
   registerMountContext<T extends keyof AppMountContext>(
     pluginOpaqueId: PluginOpaqueId,
     contextName: T,
-    provider: IContextProvider<AppMountContext, T>
+    provider: IContextProvider<App['mount'], T>
   ): void;
 
   // Internal APIs
diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx
index afd9f8e4a38209..f24b0ed1681aab 100644
--- a/src/core/public/chrome/ui/header/header.tsx
+++ b/src/core/public/chrome/ui/header/header.tsx
@@ -19,7 +19,7 @@
 
 import Url from 'url';
 
-import React, { Component, createRef, Fragment } from 'react';
+import React, { Component, createRef } from 'react';
 import * as Rx from 'rxjs';
 
 import {
@@ -376,7 +376,7 @@ class HeaderUI extends Component<Props, State> {
     ];
 
     return (
-      <Fragment>
+      <header>
         <EuiHeader>
           <EuiHeaderSection grow={false}>
             <EuiShowFor sizes={['xs', 's']}>
@@ -407,11 +407,13 @@ class HeaderUI extends Component<Props, State> {
           isLocked={isLocked}
           onIsLockedUpdate={onIsLockedUpdate}
         >
-          <EuiNavDrawerGroup listItems={recentLinksArray} />
-          <EuiHorizontalRule margin="none" />
-          <EuiNavDrawerGroup data-test-subj="navDrawerAppsMenu" listItems={navLinksArray} />
+          <nav>
+            <EuiNavDrawerGroup listItems={recentLinksArray} />
+            <EuiHorizontalRule margin="none" />
+            <EuiNavDrawerGroup data-test-subj="navDrawerAppsMenu" listItems={navLinksArray} />
+          </nav>
         </EuiNavDrawer>
-      </Fragment>
+      </header>
     );
   }
 
diff --git a/src/core/public/chrome/ui/header/header_breadcrumbs.tsx b/src/core/public/chrome/ui/header/header_breadcrumbs.tsx
index f4b1c1d49cd27f..68eb6a54f48a3c 100644
--- a/src/core/public/chrome/ui/header/header_breadcrumbs.tsx
+++ b/src/core/public/chrome/ui/header/header_breadcrumbs.tsx
@@ -64,7 +64,11 @@ export class HeaderBreadcrumbs extends Component<Props, State> {
 
   public render() {
     return (
-      <EuiHeaderBreadcrumbs breadcrumbs={this.getBreadcrumbs()} data-test-subj="breadcrumbs" />
+      <EuiHeaderBreadcrumbs
+        breadcrumbs={this.getBreadcrumbs()}
+        max={10}
+        data-test-subj="breadcrumbs"
+      />
     );
   }
 
diff --git a/src/core/public/context/context_service.ts b/src/core/public/context/context_service.ts
index 704524d8386367..dadc509c97821e 100644
--- a/src/core/public/context/context_service.ts
+++ b/src/core/public/context/context_service.ts
@@ -18,7 +18,7 @@
  */
 
 import { PluginOpaqueId } from '../../server';
-import { IContextContainer, ContextContainer } from '../../utils/context';
+import { IContextContainer, ContextContainer, HandlerFunction } from '../../utils/context';
 import { CoreContext } from '../core_system';
 
 interface StartDeps {
@@ -31,15 +31,8 @@ export class ContextService {
 
   public setup({ pluginDependencies }: StartDeps): ContextSetup {
     return {
-      createContextContainer: <
-        TContext extends {},
-        THandlerReturn,
-        THandlerParameters extends any[] = []
-      >() =>
-        new ContextContainer<TContext, THandlerReturn, THandlerParameters>(
-          pluginDependencies,
-          this.core.coreId
-        ),
+      createContextContainer: <THandler extends HandlerFunction<any>>() =>
+        new ContextContainer<THandler>(pluginDependencies, this.core.coreId),
     };
   }
 }
@@ -111,9 +104,5 @@ export interface ContextSetup {
   /**
    * Creates a new {@link IContextContainer} for a service owner.
    */
-  createContextContainer<
-    TContext extends {},
-    THandlerReturn,
-    THandlerParmaters extends any[] = []
-  >(): IContextContainer<TContext, THandlerReturn, THandlerParmaters>;
+  createContextContainer<THandler extends HandlerFunction<any>>(): IContextContainer<THandler>;
 }
diff --git a/src/core/public/context/index.ts b/src/core/public/context/index.ts
index 28b2641b2a5a74..f22c4168d75448 100644
--- a/src/core/public/context/index.ts
+++ b/src/core/public/context/index.ts
@@ -18,4 +18,10 @@
  */
 
 export { ContextService, ContextSetup } from './context_service';
-export { IContextContainer, IContextProvider, IContextHandler } from '../../utils/context';
+export {
+  IContextContainer,
+  IContextProvider,
+  HandlerFunction,
+  HandlerContextType,
+  HandlerParameters,
+} from '../../utils/context';
diff --git a/src/core/public/index.ts b/src/core/public/index.ts
index 393a7076759e86..1e2dfde7496ea2 100644
--- a/src/core/public/index.ts
+++ b/src/core/public/index.ts
@@ -67,7 +67,14 @@ import { UiSettingsClient, UiSettingsState, UiSettingsClientContract } from './u
 import { ApplicationSetup, Capabilities, ApplicationStart } from './application';
 import { DocLinksStart } from './doc_links';
 import { SavedObjectsStart } from './saved_objects';
-import { IContextContainer, IContextProvider, ContextSetup, IContextHandler } from './context';
+import {
+  IContextContainer,
+  IContextProvider,
+  ContextSetup,
+  HandlerFunction,
+  HandlerContextType,
+  HandlerParameters,
+} from './context';
 
 export { CoreContext, CoreSystem } from './core_system';
 export { RecursiveReadonly } from '../utils';
@@ -217,7 +224,9 @@ export {
   ChromeRecentlyAccessedHistoryItem,
   ChromeStart,
   IContextContainer,
-  IContextHandler,
+  HandlerFunction,
+  HandlerContextType,
+  HandlerParameters,
   IContextProvider,
   ContextSetup,
   DocLinksStart,
diff --git a/src/core/public/notifications/notifications_service.ts b/src/core/public/notifications/notifications_service.ts
index 2dc2b2ef06094f..33221522fa83ca 100644
--- a/src/core/public/notifications/notifications_service.ts
+++ b/src/core/public/notifications/notifications_service.ts
@@ -48,7 +48,7 @@ export class NotificationsService {
   public setup({ uiSettings }: SetupDeps): NotificationsSetup {
     const notificationSetup = { toasts: this.toasts.setup({ uiSettings }) };
 
-    this.uiSettingsErrorSubscription = uiSettings.getUpdateErrors$().subscribe(error => {
+    this.uiSettingsErrorSubscription = uiSettings.getUpdateErrors$().subscribe((error: Error) => {
       notificationSetup.toasts.addDanger({
         title: i18n.translate('core.notifications.unableUpdateUISettingNotificationMessageTitle', {
           defaultMessage: 'Unable to update UI setting',
diff --git a/src/core/public/public.api.md b/src/core/public/public.api.md
index b2d730d7fa4670..e6c8f116e5782a 100644
--- a/src/core/public/public.api.md
+++ b/src/core/public/public.api.md
@@ -9,6 +9,7 @@ import { MouseEventHandler } from 'react';
 import { Observable } from 'rxjs';
 import React from 'react';
 import * as Rx from 'rxjs';
+import { ShallowPromise } from '@kbn/utility-types';
 import { EuiGlobalToastListToast as Toast } from '@elastic/eui';
 
 // @public
@@ -31,7 +32,7 @@ export interface AppBase {
 // @public (undocumented)
 export interface ApplicationSetup {
     register(app: App): void;
-    registerMountContext<T extends keyof AppMountContext>(contextName: T, provider: IContextProvider<AppMountContext, T>): void;
+    registerMountContext<T extends keyof AppMountContext>(contextName: T, provider: IContextProvider<App['mount'], T>): void;
 }
 
 // @public (undocumented)
@@ -44,7 +45,7 @@ export interface ApplicationStart {
         path?: string;
         state?: any;
     }): void;
-    registerMountContext<T extends keyof AppMountContext>(contextName: T, provider: IContextProvider<AppMountContext, T>): void;
+    registerMountContext<T extends keyof AppMountContext>(contextName: T, provider: IContextProvider<App['mount'], T>): void;
 }
 
 // @public
@@ -213,7 +214,7 @@ export interface ChromeStart {
 
 // @public
 export interface ContextSetup {
-    createContextContainer<TContext extends {}, THandlerReturn, THandlerParmaters extends any[] = []>(): IContextContainer<TContext, THandlerReturn, THandlerParmaters>;
+    createContextContainer<THandler extends HandlerFunction<any>>(): IContextContainer<THandler>;
 }
 
 // @internal (undocumented)
@@ -389,6 +390,15 @@ export interface FatalErrorsSetup {
     get$: () => Rx.Observable<FatalErrorInfo>;
 }
 
+// @public
+export type HandlerContextType<T extends HandlerFunction<any>> = T extends HandlerFunction<infer U> ? U : never;
+
+// @public
+export type HandlerFunction<T extends object> = (context: T, ...args: any[]) => any;
+
+// @public
+export type HandlerParameters<T extends HandlerFunction<any>> = T extends (context: any, ...args: infer U) => any ? U : never;
+
 // @public (undocumented)
 export type HttpBody = BodyInit | null | any;
 
@@ -551,16 +561,13 @@ export interface I18nStart {
 }
 
 // @public
-export interface IContextContainer<TContext extends {}, THandlerReturn, THandlerParameters extends any[] = []> {
-    createHandler(pluginOpaqueId: PluginOpaqueId, handler: IContextHandler<TContext, THandlerReturn, THandlerParameters>): (...rest: THandlerParameters) => THandlerReturn extends Promise<any> ? THandlerReturn : Promise<THandlerReturn>;
-    registerContext<TContextName extends keyof TContext>(pluginOpaqueId: PluginOpaqueId, contextName: TContextName, provider: IContextProvider<TContext, TContextName, THandlerParameters>): this;
+export interface IContextContainer<THandler extends HandlerFunction<any>> {
+    createHandler(pluginOpaqueId: PluginOpaqueId, handler: THandler): (...rest: HandlerParameters<THandler>) => ShallowPromise<ReturnType<THandler>>;
+    registerContext<TContextName extends keyof HandlerContextType<THandler>>(pluginOpaqueId: PluginOpaqueId, contextName: TContextName, provider: IContextProvider<THandler, TContextName>): this;
 }
 
 // @public
-export type IContextHandler<TContext extends {}, TReturn, THandlerParameters extends any[] = []> = (context: TContext, ...rest: THandlerParameters) => TReturn;
-
-// @public
-export type IContextProvider<TContext extends Record<string, any>, TContextName extends keyof TContext, TProviderParameters extends any[] = []> = (context: Partial<TContext>, ...rest: TProviderParameters) => Promise<TContext[TContextName]> | TContext[TContextName];
+export type IContextProvider<THandler extends HandlerFunction<any>, TContextName extends keyof HandlerContextType<THandler>> = (context: Partial<HandlerContextType<THandler>>, ...rest: HandlerParameters<THandler>) => Promise<HandlerContextType<THandler>[TContextName]> | HandlerContextType<THandler>[TContextName];
 
 // @public @deprecated
 export interface LegacyCoreSetup extends CoreSetup {
@@ -752,7 +759,7 @@ export class SavedObjectsClient {
     }[]) => Promise<SavedObjectsBatchResponse<SavedObjectAttributes>>;
     create: <T extends SavedObjectAttributes>(type: string, attributes: T, options?: SavedObjectsCreateOptions) => Promise<SimpleSavedObject<T>>;
     delete: (type: string, id: string) => Promise<{}>;
-    find: <T extends SavedObjectAttributes>(options: Pick<SavedObjectsFindOptions, "search" | "type" | "defaultSearchOperator" | "searchFields" | "sortField" | "hasReference" | "page" | "perPage" | "fields">) => Promise<SavedObjectsFindResponsePublic<T>>;
+    find: <T extends SavedObjectAttributes>(options: Pick<SavedObjectsFindOptions, "search" | "filter" | "type" | "page" | "perPage" | "sortField" | "fields" | "searchFields" | "hasReference" | "defaultSearchOperator">) => Promise<SavedObjectsFindResponsePublic<T>>;
     get: <T extends SavedObjectAttributes>(type: string, id: string) => Promise<SimpleSavedObject<T>>;
     update<T extends SavedObjectAttributes>(type: string, id: string, attributes: T, { version, migrationVersion, references }?: SavedObjectsUpdateOptions): Promise<SimpleSavedObject<T>>;
 }
@@ -775,6 +782,8 @@ export interface SavedObjectsFindOptions extends SavedObjectsBaseOptions {
     defaultSearchOperator?: 'AND' | 'OR';
     fields?: string[];
     // (undocumented)
+    filter?: string;
+    // (undocumented)
     hasReference?: {
         type: string;
         id: string;
diff --git a/src/core/public/saved_objects/saved_objects_client.ts b/src/core/public/saved_objects/saved_objects_client.ts
index dc13d001643a31..cf0300157aece3 100644
--- a/src/core/public/saved_objects/saved_objects_client.ts
+++ b/src/core/public/saved_objects/saved_objects_client.ts
@@ -297,6 +297,7 @@ export class SavedObjectsClient {
       searchFields: 'search_fields',
       sortField: 'sort_field',
       type: 'type',
+      filter: 'filter',
     };
 
     const renamedQuery = renameKeys<SavedObjectsFindOptions, any>(renameMap, options);
diff --git a/src/core/server/bootstrap.ts b/src/core/server/bootstrap.ts
index 6a4bfc7c581df8..2dff4430b4dbef 100644
--- a/src/core/server/bootstrap.ts
+++ b/src/core/server/bootstrap.ts
@@ -70,6 +70,22 @@ export async function bootstrap({
 
   const root = new Root(rawConfigService.getConfig$(), env, onRootShutdown);
 
+  process.on('SIGHUP', () => {
+    const cliLogger = root.logger.get('cli');
+    cliLogger.info('Reloading logging configuration due to SIGHUP.', { tags: ['config'] });
+
+    try {
+      rawConfigService.reloadConfig();
+    } catch (err) {
+      return shutdown(err);
+    }
+
+    cliLogger.info('Reloaded logging configuration due to SIGHUP.', { tags: ['config'] });
+  });
+
+  process.on('SIGINT', () => shutdown());
+  process.on('SIGTERM', () => shutdown());
+
   function shutdown(reason?: Error) {
     rawConfigService.stop();
     return root.shutdown(reason);
@@ -87,22 +103,6 @@ export async function bootstrap({
     cliLogger.info('Optimization done.');
     await shutdown();
   }
-
-  process.on('SIGHUP', () => {
-    const cliLogger = root.logger.get('cli');
-    cliLogger.info('Reloading logging configuration due to SIGHUP.', { tags: ['config'] });
-
-    try {
-      rawConfigService.reloadConfig();
-    } catch (err) {
-      return shutdown(err);
-    }
-
-    cliLogger.info('Reloaded logging configuration due to SIGHUP.', { tags: ['config'] });
-  });
-
-  process.on('SIGINT', () => shutdown());
-  process.on('SIGTERM', () => shutdown());
 }
 
 function onRootShutdown(reason?: any) {
diff --git a/src/core/server/config/config_service.mock.ts b/src/core/server/config/config_service.mock.ts
index b9c4fa91ae7028..e87869e92deebc 100644
--- a/src/core/server/config/config_service.mock.ts
+++ b/src/core/server/config/config_service.mock.ts
@@ -20,11 +20,13 @@
 import { BehaviorSubject } from 'rxjs';
 import { ObjectToConfigAdapter } from './object_to_config_adapter';
 
-import { ConfigService } from './config_service';
+import { IConfigService } from './config_service';
 
-type ConfigServiceContract = PublicMethodsOf<ConfigService>;
-const createConfigServiceMock = () => {
-  const mocked: jest.Mocked<ConfigServiceContract> = {
+const createConfigServiceMock = ({
+  atPath = {},
+  getConfig$ = {},
+}: { atPath?: Record<string, any>; getConfig$?: Record<string, any> } = {}) => {
+  const mocked: jest.Mocked<IConfigService> = {
     atPath: jest.fn(),
     getConfig$: jest.fn(),
     optionalAtPath: jest.fn(),
@@ -33,8 +35,8 @@ const createConfigServiceMock = () => {
     isEnabledAtPath: jest.fn(),
     setSchema: jest.fn(),
   };
-  mocked.atPath.mockReturnValue(new BehaviorSubject({}));
-  mocked.getConfig$.mockReturnValue(new BehaviorSubject(new ObjectToConfigAdapter({})));
+  mocked.atPath.mockReturnValue(new BehaviorSubject(atPath));
+  mocked.getConfig$.mockReturnValue(new BehaviorSubject(new ObjectToConfigAdapter(getConfig$)));
   mocked.getUsedPaths.mockResolvedValue([]);
   mocked.getUnusedPaths.mockResolvedValue([]);
   mocked.isEnabledAtPath.mockResolvedValue(true);
diff --git a/src/core/server/config/config_service.ts b/src/core/server/config/config_service.ts
index fff19aa3af0f04..8d3cc733cf250c 100644
--- a/src/core/server/config/config_service.ts
+++ b/src/core/server/config/config_service.ts
@@ -26,6 +26,9 @@ import { Config, ConfigPath, Env } from '.';
 import { Logger, LoggerFactory } from '../logging';
 import { hasConfigPathIntersection } from './config';
 
+/** @internal */
+export type IConfigService = PublicMethodsOf<ConfigService>;
+
 /** @internal */
 export class ConfigService {
   private readonly log: Logger;
diff --git a/src/core/server/config/index.ts b/src/core/server/config/index.ts
index 257263069cabd8..d27462a86a9c8e 100644
--- a/src/core/server/config/index.ts
+++ b/src/core/server/config/index.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-export { ConfigService } from './config_service';
+export { ConfigService, IConfigService } from './config_service';
 export { RawConfigService } from './raw_config_service';
 export { Config, ConfigPath, isConfigPath, hasConfigPathIntersection } from './config';
 export { ObjectToConfigAdapter } from './object_to_config_adapter';
diff --git a/src/core/server/context/context_service.ts b/src/core/server/context/context_service.ts
index 80935840c55360..1c5bd41a01f0f1 100644
--- a/src/core/server/context/context_service.ts
+++ b/src/core/server/context/context_service.ts
@@ -18,7 +18,7 @@
  */
 
 import { PluginOpaqueId } from '../../server';
-import { IContextContainer, ContextContainer } from '../../utils/context';
+import { IContextContainer, ContextContainer, HandlerFunction } from '../../utils/context';
 import { CoreContext } from '../core_context';
 
 interface SetupDeps {
@@ -31,15 +31,8 @@ export class ContextService {
 
   public setup({ pluginDependencies }: SetupDeps): ContextSetup {
     return {
-      createContextContainer: <
-        TContext extends {},
-        THandlerReturn,
-        THandlerParameters extends any[] = []
-      >() => {
-        return new ContextContainer<TContext, THandlerReturn, THandlerParameters>(
-          pluginDependencies,
-          this.core.coreId
-        );
+      createContextContainer: <THandler extends HandlerFunction<any>>() => {
+        return new ContextContainer<THandler>(pluginDependencies, this.core.coreId);
       },
     };
   }
@@ -112,9 +105,5 @@ export interface ContextSetup {
   /**
    * Creates a new {@link IContextContainer} for a service owner.
    */
-  createContextContainer<
-    TContext extends {},
-    THandlerReturn,
-    THandlerParmaters extends any[] = []
-  >(): IContextContainer<TContext, THandlerReturn, THandlerParmaters>;
+  createContextContainer<THandler extends HandlerFunction<any>>(): IContextContainer<THandler>;
 }
diff --git a/src/core/server/context/index.ts b/src/core/server/context/index.ts
index 28b2641b2a5a74..f22c4168d75448 100644
--- a/src/core/server/context/index.ts
+++ b/src/core/server/context/index.ts
@@ -18,4 +18,10 @@
  */
 
 export { ContextService, ContextSetup } from './context_service';
-export { IContextContainer, IContextProvider, IContextHandler } from '../../utils/context';
+export {
+  IContextContainer,
+  IContextProvider,
+  HandlerFunction,
+  HandlerContextType,
+  HandlerParameters,
+} from '../../utils/context';
diff --git a/src/core/server/core_context.mock.ts b/src/core/server/core_context.mock.ts
new file mode 100644
index 00000000000000..e8c0a0a4830bfb
--- /dev/null
+++ b/src/core/server/core_context.mock.ts
@@ -0,0 +1,41 @@
+/*
+ * 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 { CoreContext } from './core_context';
+import { getEnvOptions } from './config/__mocks__/env';
+import { Env, IConfigService } from './config';
+import { loggingServiceMock } from './logging/logging_service.mock';
+import { configServiceMock } from './config/config_service.mock';
+import { ILoggingService } from './logging';
+
+function create({
+  env = Env.createDefault(getEnvOptions()),
+  logger = loggingServiceMock.create(),
+  configService = configServiceMock.create(),
+}: {
+  env?: Env;
+  logger?: jest.Mocked<ILoggingService>;
+  configService?: jest.Mocked<IConfigService>;
+} = {}): CoreContext {
+  return { coreId: Symbol(), env, logger, configService };
+}
+
+export const mockCoreContext = {
+  create,
+};
diff --git a/src/core/server/core_context.ts b/src/core/server/core_context.ts
index 701f5a83a81c20..237fc2e6aafdce 100644
--- a/src/core/server/core_context.ts
+++ b/src/core/server/core_context.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { ConfigService, Env } from './config';
+import { IConfigService, Env } from './config';
 import { LoggerFactory } from './logging';
 
 /** @internal */
@@ -31,6 +31,6 @@ export type CoreId = symbol;
 export interface CoreContext {
   coreId: CoreId;
   env: Env;
-  configService: ConfigService;
+  configService: IConfigService;
   logger: LoggerFactory;
 }
diff --git a/src/core/server/elasticsearch/retry_call_cluster.test.ts b/src/core/server/elasticsearch/retry_call_cluster.test.ts
new file mode 100644
index 00000000000000..e2c6415a08c56d
--- /dev/null
+++ b/src/core/server/elasticsearch/retry_call_cluster.test.ts
@@ -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 elasticsearch from 'elasticsearch';
+import { retryCallCluster } from './retry_call_cluster';
+
+describe('retryCallCluster', () => {
+  it('retries ES API calls that rejects with NoConnection errors', () => {
+    expect.assertions(1);
+    const callEsApi = jest.fn();
+    let i = 0;
+    callEsApi.mockImplementation(() => {
+      return i++ <= 2
+        ? Promise.reject(new elasticsearch.errors.NoConnections())
+        : Promise.resolve('success');
+    });
+    const retried = retryCallCluster(callEsApi);
+    return expect(retried('endpoint')).resolves.toMatchInlineSnapshot(`"success"`);
+  });
+
+  it('rejects when ES API calls reject with other errors', async () => {
+    expect.assertions(3);
+    const callEsApi = jest.fn();
+    let i = 0;
+    callEsApi.mockImplementation(() => {
+      i++;
+
+      return i === 1
+        ? Promise.reject(new Error('unknown error'))
+        : i === 2
+        ? Promise.resolve('success')
+        : i === 3 || i === 4
+        ? Promise.reject(new elasticsearch.errors.NoConnections())
+        : i === 5
+        ? Promise.reject(new Error('unknown error'))
+        : null;
+    });
+    const retried = retryCallCluster(callEsApi);
+    await expect(retried('endpoint')).rejects.toMatchInlineSnapshot(`[Error: unknown error]`);
+    await expect(retried('endpoint')).resolves.toMatchInlineSnapshot(`"success"`);
+    return expect(retried('endpoint')).rejects.toMatchInlineSnapshot(`[Error: unknown error]`);
+  });
+});
diff --git a/src/core/server/elasticsearch/retry_call_cluster.ts b/src/core/server/elasticsearch/retry_call_cluster.ts
new file mode 100644
index 00000000000000..4b74dffebbef9d
--- /dev/null
+++ b/src/core/server/elasticsearch/retry_call_cluster.ts
@@ -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 { retryWhen, concatMap } from 'rxjs/operators';
+import { defer, throwError, iif, timer } from 'rxjs';
+import elasticsearch from 'elasticsearch';
+import { CallAPIOptions } from '.';
+
+/**
+ * Retries the provided Elasticsearch API call when a `NoConnections` error is
+ * encountered. The API call will be retried once a second, indefinitely, until
+ * a successful response or a different error is received.
+ *
+ * @param apiCaller
+ */
+
+// TODO: Replace with APICaller from './scoped_cluster_client' once #46668 is merged
+export function retryCallCluster(
+  apiCaller: (
+    endpoint: string,
+    clientParams: Record<string, any>,
+    options?: CallAPIOptions
+  ) => Promise<any>
+) {
+  return (endpoint: string, clientParams: Record<string, any> = {}, options?: CallAPIOptions) => {
+    return defer(() => apiCaller(endpoint, clientParams, options))
+      .pipe(
+        retryWhen(errors =>
+          errors.pipe(
+            concatMap((error, i) =>
+              iif(
+                () => error instanceof elasticsearch.errors.NoConnections,
+                timer(1000),
+                throwError(error)
+              )
+            )
+          )
+        )
+      )
+      .toPromise();
+  };
+}
diff --git a/src/core/server/http/base_path_service.test.ts b/src/core/server/http/base_path_service.test.ts
index ffbbe158cb2d4d..01790b7c77e064 100644
--- a/src/core/server/http/base_path_service.test.ts
+++ b/src/core/server/http/base_path_service.test.ts
@@ -22,6 +22,18 @@ import { KibanaRequest } from './router';
 import { httpServerMock } from './http_server.mocks';
 
 describe('BasePath', () => {
+  describe('serverBasePath', () => {
+    it('defaults to an empty string', () => {
+      const basePath = new BasePath();
+      expect(basePath.serverBasePath).toBe('');
+    });
+
+    it('returns the server base path', () => {
+      const basePath = new BasePath('/server');
+      expect(basePath.serverBasePath).toBe('/server');
+    });
+  });
+
   describe('#get()', () => {
     it('returns base path associated with an incoming Legacy.Request request', () => {
       const request = httpServerMock.createRawRequest();
diff --git a/src/core/server/http/base_path_service.ts b/src/core/server/http/base_path_service.ts
index 951463a2c9919f..916419cac212a1 100644
--- a/src/core/server/http/base_path_service.ts
+++ b/src/core/server/http/base_path_service.ts
@@ -20,18 +20,39 @@ import { ensureRawRequest, KibanaRequest, LegacyRequest } from './router';
 
 import { modifyUrl } from '../../utils';
 
+/**
+ * Access or manipulate the Kibana base path
+ *
+ * @public
+ */
 export class BasePath {
   private readonly basePathCache = new WeakMap<LegacyRequest, string>();
 
-  constructor(private readonly serverBasePath?: string) {}
+  /**
+   * returns the server's basePath
+   *
+   * See {@link BasePath.get} for getting the basePath value for a specific request
+   */
+  public readonly serverBasePath: string;
+
+  /** @internal */
+  constructor(serverBasePath: string = '') {
+    this.serverBasePath = serverBasePath;
+  }
 
+  /**
+   * returns `basePath` value, specific for an incoming request.
+   */
   public get = (request: KibanaRequest | LegacyRequest) => {
     const requestScopePath = this.basePathCache.get(ensureRawRequest(request)) || '';
-    const serverBasePath = this.serverBasePath || '';
-    return `${serverBasePath}${requestScopePath}`;
+    return `${this.serverBasePath}${requestScopePath}`;
   };
 
-  // should work only for KibanaRequest as soon as spaces migrate to NP
+  /**
+   * sets `basePath` value, specific for an incoming request.
+   *
+   * @privateRemarks should work only for KibanaRequest as soon as spaces migrate to NP
+   */
   public set = (request: KibanaRequest | LegacyRequest, requestSpecificBasePath: string) => {
     const rawRequest = ensureRawRequest(request);
 
@@ -43,8 +64,11 @@ export class BasePath {
     this.basePathCache.set(rawRequest, requestSpecificBasePath);
   };
 
+  /**
+   * returns a new `basePath` value, prefixed with passed `url`.
+   */
   public prepend = (path: string): string => {
-    if (!this.serverBasePath) return path;
+    if (this.serverBasePath === '') return path;
     return modifyUrl(path, parts => {
       if (!parts.hostname && parts.pathname && parts.pathname.startsWith('/')) {
         parts.pathname = `${this.serverBasePath}${parts.pathname}`;
@@ -52,8 +76,11 @@ export class BasePath {
     });
   };
 
+  /**
+   * returns a new `basePath` value, cleaned up from passed `url`.
+   */
   public remove = (path: string): string => {
-    if (!this.serverBasePath) {
+    if (this.serverBasePath === '') {
       return path;
     }
 
@@ -68,3 +95,11 @@ export class BasePath {
     return path;
   };
 }
+
+/**
+ * Access or manipulate the Kibana base path
+ *
+ * {@link BasePath}
+ * @public
+ */
+export type IBasePath = Pick<BasePath, keyof BasePath>;
diff --git a/src/core/server/http/http_server.ts b/src/core/server/http/http_server.ts
index cb6906379c4ef3..b56fef5f65c2a9 100644
--- a/src/core/server/http/http_server.ts
+++ b/src/core/server/http/http_server.ts
@@ -26,7 +26,7 @@ import { adoptToHapiAuthFormat, AuthenticationHandler } from './lifecycle/auth';
 import { adoptToHapiOnPostAuthFormat, OnPostAuthHandler } from './lifecycle/on_post_auth';
 import { adoptToHapiOnPreAuthFormat, OnPreAuthHandler } from './lifecycle/on_pre_auth';
 
-import { KibanaRequest, LegacyRequest, ResponseHeaders, IRouter } from './router';
+import { ResponseHeaders, IRouter } from './router';
 import {
   SessionStorageCookieOptions,
   createCookieSessionStorageFactory,
@@ -34,7 +34,7 @@ import {
 import { SessionStorageFactory } from './session_storage';
 import { AuthStateStorage, GetAuthState, IsAuthenticated } from './auth_state_storage';
 import { AuthHeadersStorage, GetAuthHeaders } from './auth_headers_storage';
-import { BasePath } from './base_path_service';
+import { BasePath, IBasePath } from './base_path_service';
 
 /**
  * Kibana HTTP Service provides own abstraction for work with HTTP stack.
@@ -148,24 +148,8 @@ export interface HttpServerSetup {
    * @param handler {@link OnPostAuthHandler} - function to call.
    */
   registerOnPostAuth: (handler: OnPostAuthHandler) => void;
-  basePath: {
-    /**
-     * returns `basePath` value, specific for an incoming request.
-     */
-    get: (request: KibanaRequest | LegacyRequest) => string;
-    /**
-     * sets `basePath` value, specific for an incoming request.
-     */
-    set: (request: KibanaRequest | LegacyRequest, basePath: string) => void;
-    /**
-     * returns a new `basePath` value, prefixed with passed `url`.
-     */
-    prepend: (url: string) => string;
-    /**
-     * returns a new `basePath` value, cleaned up from passed `url`.
-     */
-    remove: (url: string) => string;
-  };
+  /** {@link BasePath} */
+  basePath: IBasePath;
   auth: {
     get: GetAuthState;
     isAuthenticated: IsAuthenticated;
diff --git a/src/core/server/http/http_service.mock.ts b/src/core/server/http/http_service.mock.ts
index c5f920dcb360e1..c0658ae8d1e5c4 100644
--- a/src/core/server/http/http_service.mock.ts
+++ b/src/core/server/http/http_service.mock.ts
@@ -30,6 +30,7 @@ type ServiceSetupMockType = jest.Mocked<HttpServiceSetup> & {
 };
 
 const createBasePathMock = (): jest.Mocked<HttpServiceSetup['basePath']> => ({
+  serverBasePath: '/mock-server-basepath',
   get: jest.fn(),
   set: jest.fn(),
   prepend: jest.fn(),
diff --git a/src/core/server/http/http_service.ts b/src/core/server/http/http_service.ts
index 5814991a2dd27c..0ac5ad92763537 100644
--- a/src/core/server/http/http_service.ts
+++ b/src/core/server/http/http_service.ts
@@ -83,8 +83,8 @@ export type HttpServiceSetup = Omit<HttpServerSetup, 'registerRouter'> & {
   registerRouteHandlerContext: <T extends keyof RequestHandlerContext>(
     pluginOpaqueId: PluginOpaqueId,
     contextName: T,
-    provider: RequestHandlerContextProvider<RequestHandlerContext>
-  ) => RequestHandlerContextContainer<RequestHandlerContext>;
+    provider: RequestHandlerContextProvider<T>
+  ) => RequestHandlerContextContainer;
 };
 
 /** @public */
@@ -103,7 +103,7 @@ export class HttpService implements CoreService<HttpServiceSetup, HttpServiceSta
   private readonly logger: LoggerFactory;
   private readonly log: Logger;
   private notReadyServer?: Server;
-  private requestHandlerContext?: RequestHandlerContextContainer<RequestHandlerContext>;
+  private requestHandlerContext?: RequestHandlerContextContainer;
 
   constructor(private readonly coreContext: CoreContext) {
     this.logger = coreContext.logger;
@@ -150,7 +150,7 @@ export class HttpService implements CoreService<HttpServiceSetup, HttpServiceSta
       registerRouteHandlerContext: <T extends keyof RequestHandlerContext>(
         pluginOpaqueId: PluginOpaqueId,
         contextName: T,
-        provider: RequestHandlerContextProvider<RequestHandlerContext>
+        provider: RequestHandlerContextProvider<T>
       ) => this.requestHandlerContext!.registerContext(pluginOpaqueId, contextName, provider),
     };
 
diff --git a/src/core/server/http/index.ts b/src/core/server/http/index.ts
index 895396b91eb465..4f83cd996deba8 100644
--- a/src/core/server/http/index.ts
+++ b/src/core/server/http/index.ts
@@ -58,3 +58,4 @@ export { OnPostAuthHandler, OnPostAuthToolkit } from './lifecycle/on_post_auth';
 export { SessionStorageFactory, SessionStorage } from './session_storage';
 export { SessionStorageCookieOptions } from './cookie_session_storage';
 export * from './types';
+export { BasePath, IBasePath } from './base_path_service';
diff --git a/src/core/server/http/types.ts b/src/core/server/http/types.ts
index a391b2e2e5d458..cade4ea4d4f2cc 100644
--- a/src/core/server/http/types.ts
+++ b/src/core/server/http/types.ts
@@ -16,30 +16,16 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { IContextProvider, IContextContainer } from '../context';
-import { KibanaRequest, KibanaResponseFactory, KibanaResponse } from './router';
-
-/**
- * Parameters passed to the request handler function.
- * @public
- */
-export type RequestHandlerParams = [KibanaRequest, KibanaResponseFactory];
 
-/**
- * Expected outcome the request handler function.
- * @public
- */
-export type RequestHandlerReturn = KibanaResponse;
+import { IContextProvider, IContextContainer } from '../context';
+import { RequestHandler } from './router';
+import { RequestHandlerContext } from '..';
 
 /**
  * An object that handles registration of http request context providers.
  * @public
  */
-export type RequestHandlerContextContainer<TContext> = IContextContainer<
-  TContext,
-  RequestHandlerReturn | Promise<RequestHandlerReturn>,
-  RequestHandlerParams
->;
+export type RequestHandlerContextContainer = IContextContainer<RequestHandler<any, any, any>>;
 
 /**
  * Context provider for request handler.
@@ -47,8 +33,6 @@ export type RequestHandlerContextContainer<TContext> = IContextContainer<
  *
  * @public
  */
-export type RequestHandlerContextProvider<TContext> = IContextProvider<
-  TContext,
-  keyof TContext,
-  RequestHandlerParams
->;
+export type RequestHandlerContextProvider<
+  TContextName extends keyof RequestHandlerContext
+> = IContextProvider<RequestHandler<any, any, any>, TContextName>;
diff --git a/src/core/server/index.test.mocks.ts b/src/core/server/index.test.mocks.ts
index 9526a7d79ee43d..12cba7b29fc780 100644
--- a/src/core/server/index.test.mocks.ts
+++ b/src/core/server/index.test.mocks.ts
@@ -35,7 +35,11 @@ jest.doMock('./elasticsearch/elasticsearch_service', () => ({
   ElasticsearchService: jest.fn(() => mockElasticsearchService),
 }));
 
-export const mockLegacyService = { setup: jest.fn(), start: jest.fn(), stop: jest.fn() };
+export const mockLegacyService = {
+  setup: jest.fn().mockReturnValue({ uiExports: {} }),
+  start: jest.fn(),
+  stop: jest.fn(),
+};
 jest.mock('./legacy/legacy_service', () => ({
   LegacyService: jest.fn(() => mockLegacyService),
 }));
@@ -45,3 +49,9 @@ export const mockConfigService = configServiceMock.create();
 jest.doMock('./config/config_service', () => ({
   ConfigService: jest.fn(() => mockConfigService),
 }));
+
+import { savedObjectsServiceMock } from './saved_objects/saved_objects_service.mock';
+export const mockSavedObjectsService = savedObjectsServiceMock.create();
+jest.doMock('./saved_objects/saved_objects_service', () => ({
+  SavedObjectsService: jest.fn(() => mockSavedObjectsService),
+}));
diff --git a/src/core/server/index.ts b/src/core/server/index.ts
index ef31804be62b2b..ca497e0f2d32d4 100644
--- a/src/core/server/index.ts
+++ b/src/core/server/index.ts
@@ -55,10 +55,17 @@ import {
 } from './http';
 import { PluginsServiceSetup, PluginsServiceStart, PluginOpaqueId } from './plugins';
 import { ContextSetup } from './context';
+import { SavedObjectsServiceStart } from './saved_objects';
 
 export { bootstrap } from './bootstrap';
 export { ConfigPath, ConfigService } from './config';
-export { IContextContainer, IContextProvider, IContextHandler } from './context';
+export {
+  IContextContainer,
+  IContextProvider,
+  HandlerFunction,
+  HandlerContextType,
+  HandlerParameters,
+} from './context';
 export { CoreId } from './core_context';
 export {
   CallAPIOptions,
@@ -77,6 +84,8 @@ export {
   AuthResultParams,
   AuthStatus,
   AuthToolkit,
+  BasePath,
+  IBasePath,
   CustomHttpResponseOptions,
   GetAuthHeaders,
   GetAuthState,
@@ -99,8 +108,6 @@ export {
   RequestHandler,
   RequestHandlerContextContainer,
   RequestHandlerContextProvider,
-  RequestHandlerParams,
-  RequestHandlerReturn,
   ResponseError,
   ResponseErrorAttributes,
   ResponseHeaders,
@@ -150,7 +157,7 @@ export {
   SavedObjectsResolveImportErrorsOptions,
   SavedObjectsSchema,
   SavedObjectsSerializer,
-  SavedObjectsService,
+  SavedObjectsLegacyService,
   SavedObjectsUpdateOptions,
   SavedObjectsUpdateResponse,
 } from './saved_objects';
@@ -209,8 +216,8 @@ export interface CoreSetup {
     isTlsEnabled: HttpServiceSetup['isTlsEnabled'];
     registerRouteHandlerContext: <T extends keyof RequestHandlerContext>(
       name: T,
-      provider: RequestHandlerContextProvider<RequestHandlerContext>
-    ) => RequestHandlerContextContainer<RequestHandlerContext>;
+      provider: RequestHandlerContextProvider<T>
+    ) => RequestHandlerContextContainer;
     createRouter: () => IRouter;
   };
 }
@@ -230,9 +237,11 @@ export interface InternalCoreSetup {
 }
 
 /**
- * @public
+ * @internal
  */
-export interface InternalCoreStart {} // eslint-disable-line @typescript-eslint/no-empty-interface
+export interface InternalCoreStart {
+  savedObjects: SavedObjectsServiceStart;
+}
 
 export {
   ContextSetup,
diff --git a/test/common/services/kibana_server/status.js b/src/core/server/kibana_config.ts
similarity index 58%
rename from test/common/services/kibana_server/status.js
rename to src/core/server/kibana_config.ts
index 3988bab185fcca..d46960289a8d01 100644
--- a/test/common/services/kibana_server/status.js
+++ b/src/core/server/kibana_config.ts
@@ -17,26 +17,18 @@
  * under the License.
  */
 
-import { resolve as resolveUrl } from 'url';
+import { schema, TypeOf } from '@kbn/config-schema';
 
-import Wreck from '@hapi/wreck';
+export type KibanaConfigType = TypeOf<typeof config.schema>;
 
-const get = async url => {
-  const { payload } = await Wreck.get(url, { json: 'force' });
-  return payload;
+export const config = {
+  path: 'kibana',
+  schema: schema.object({
+    enabled: schema.boolean({ defaultValue: true }),
+    defaultAppId: schema.string({ defaultValue: 'home' }),
+    index: schema.string({ defaultValue: '.kibana' }),
+    disableWelcomeScreen: schema.boolean({ defaultValue: false }),
+    autocompleteTerminateAfter: schema.duration({ defaultValue: 100000 }),
+    autocompleteTimeout: schema.duration({ defaultValue: 1000 }),
+  }),
 };
-
-export class KibanaServerStatus {
-  constructor(kibanaServerUrl) {
-    this.kibanaServerUrl = kibanaServerUrl;
-  }
-
-  async get() {
-    return await get(resolveUrl(this.kibanaServerUrl, './api/status'));
-  }
-
-  async getOverallState() {
-    const status = await this.get();
-    return status.status.overall.state;
-  }
-}
diff --git a/src/core/server/legacy/__snapshots__/legacy_service.test.ts.snap b/src/core/server/legacy/__snapshots__/legacy_service.test.ts.snap
index f0c477e627460b..9a23b3b3b23b37 100644
--- a/src/core/server/legacy/__snapshots__/legacy_service.test.ts.snap
+++ b/src/core/server/legacy/__snapshots__/legacy_service.test.ts.snap
@@ -1,53 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`once LegacyService is set up in \`devClusterMaster\` mode creates ClusterManager with base path proxy.: cli args. cluster manager with base path proxy 1`] = `
-Object {
-  "basePath": true,
-  "dev": true,
-  "open": false,
-  "optimize": false,
-  "oss": false,
-  "quiet": true,
-  "repl": false,
-  "silent": false,
-  "watch": false,
-}
-`;
-
-exports[`once LegacyService is set up in \`devClusterMaster\` mode creates ClusterManager with base path proxy.: config. cluster manager with base path proxy 1`] = `
-Object {
-  "server": Object {
-    "autoListen": true,
-  },
-}
-`;
-
-exports[`once LegacyService is set up in \`devClusterMaster\` mode creates ClusterManager without base path proxy.: cluster manager without base path proxy 1`] = `
-Array [
-  Array [
-    Object {
-      "basePath": false,
-      "dev": true,
-      "open": false,
-      "optimize": false,
-      "oss": false,
-      "quiet": false,
-      "repl": false,
-      "silent": true,
-      "watch": false,
-    },
-    Object {
-      "server": Object {
-        "autoListen": true,
-      },
-    },
-    undefined,
-  ],
-]
-`;
-
-exports[`once LegacyService is set up with connection info creates legacy kbnServer and closes it if \`listen\` fails. 1`] = `"something failed"`;
-
 exports[`once LegacyService is set up with connection info reconfigures logging configuration if new config is received.: applyLoggingConfiguration params 1`] = `
 Array [
   Array [
@@ -60,8 +12,6 @@ Array [
 ]
 `;
 
-exports[`once LegacyService is set up with connection info throws if fails to retrieve initial config. 1`] = `"something failed"`;
-
 exports[`once LegacyService is set up without connection info reconfigures logging configuration if new config is received.: applyLoggingConfiguration params 1`] = `
 Array [
   Array [
diff --git a/src/core/server/legacy/legacy_service.test.ts b/src/core/server/legacy/legacy_service.test.ts
index 9d208445a0a1fc..cf72bb72079e9c 100644
--- a/src/core/server/legacy/legacy_service.test.ts
+++ b/src/core/server/legacy/legacy_service.test.ts
@@ -21,6 +21,14 @@ import { BehaviorSubject, throwError } from 'rxjs';
 
 jest.mock('../../../legacy/server/kbn_server');
 jest.mock('../../../cli/cluster/cluster_manager');
+jest.mock('./plugins/find_legacy_plugin_specs.ts', () => ({
+  findLegacyPluginSpecs: (settings: Record<string, any>) => ({
+    pluginSpecs: [],
+    pluginExtendedConfig: settings,
+    disabledPluginSpecs: [],
+    uiExports: [],
+  }),
+}));
 
 import { LegacyService } from '.';
 // @ts-ignore: implicit any for JS file
@@ -36,6 +44,8 @@ import { HttpServiceStart, BasePathProxyServer } from '../http';
 import { loggingServiceMock } from '../logging/logging_service.mock';
 import { DiscoveredPlugin, DiscoveredPluginInternal } from '../plugins';
 import { PluginsServiceSetup, PluginsServiceStart } from '../plugins/plugins_service';
+import { SavedObjectsServiceStart } from 'src/core/server/saved_objects/saved_objects_service';
+import { KibanaMigrator } from '../saved_objects/migrations';
 
 const MockKbnServer: jest.Mock<KbnServer> = KbnServer as any;
 
@@ -55,6 +65,7 @@ let setupDeps: {
 let startDeps: {
   core: {
     http: HttpServiceStart;
+    savedObjects: SavedObjectsServiceStart;
     plugins: PluginsServiceStart;
   };
   plugins: Record<string, unknown>;
@@ -95,6 +106,9 @@ beforeEach(() => {
       http: {
         isListening: () => true,
       },
+      savedObjects: {
+        migrator: {} as KibanaMigrator,
+      },
       plugins: { contracts: new Map() },
     },
     plugins: {},
@@ -130,13 +144,15 @@ describe('once LegacyService is set up with connection info', () => {
 
     expect(MockKbnServer).toHaveBeenCalledTimes(1);
     expect(MockKbnServer).toHaveBeenCalledWith(
+      { server: { autoListen: true } },
       { server: { autoListen: true } },
       {
         setupDeps,
         startDeps,
         handledConfigPaths: ['foo.bar'],
         logger,
-      }
+      },
+      { disabledPluginSpecs: [], pluginSpecs: [], uiExports: [] }
     );
 
     const [mockKbnServer] = MockKbnServer.mock.instances;
@@ -158,13 +174,15 @@ describe('once LegacyService is set up with connection info', () => {
 
     expect(MockKbnServer).toHaveBeenCalledTimes(1);
     expect(MockKbnServer).toHaveBeenCalledWith(
+      { server: { autoListen: true } },
       { server: { autoListen: true } },
       {
         setupDeps,
         startDeps,
         handledConfigPaths: ['foo.bar'],
         logger,
-      }
+      },
+      { disabledPluginSpecs: [], pluginSpecs: [], uiExports: [] }
     );
 
     const [mockKbnServer] = MockKbnServer.mock.instances;
@@ -184,7 +202,9 @@ describe('once LegacyService is set up with connection info', () => {
     });
 
     await legacyService.setup(setupDeps);
-    await expect(legacyService.start(startDeps)).rejects.toThrowErrorMatchingSnapshot();
+    await expect(legacyService.start(startDeps)).rejects.toThrowErrorMatchingInlineSnapshot(
+      `"something failed"`
+    );
 
     const [mockKbnServer] = MockKbnServer.mock.instances;
     expect(mockKbnServer.listen).toHaveBeenCalled();
@@ -200,8 +220,12 @@ describe('once LegacyService is set up with connection info', () => {
       configService: configService as any,
     });
 
-    await legacyService.setup(setupDeps);
-    await expect(legacyService.start(startDeps)).rejects.toThrowErrorMatchingSnapshot();
+    await expect(legacyService.setup(setupDeps)).rejects.toThrowErrorMatchingInlineSnapshot(
+      `"something failed"`
+    );
+    await expect(legacyService.start(startDeps)).rejects.toThrowErrorMatchingInlineSnapshot(
+      `"Legacy service is not setup yet."`
+    );
 
     expect(MockKbnServer).not.toHaveBeenCalled();
     expect(MockClusterManager).not.toHaveBeenCalled();
@@ -285,13 +309,15 @@ describe('once LegacyService is set up without connection info', () => {
   test('creates legacy kbnServer with `autoListen: false`.', () => {
     expect(MockKbnServer).toHaveBeenCalledTimes(1);
     expect(MockKbnServer).toHaveBeenCalledWith(
+      { server: { autoListen: true } },
       { server: { autoListen: true } },
       {
         setupDeps,
         startDeps,
         handledConfigPaths: ['foo.bar'],
         logger,
-      }
+      },
+      { disabledPluginSpecs: [], pluginSpecs: [], uiExports: [] }
     );
   });
 
@@ -332,9 +358,9 @@ describe('once LegacyService is set up in `devClusterMaster` mode', () => {
     await devClusterLegacyService.setup(setupDeps);
     await devClusterLegacyService.start(startDeps);
 
-    expect(MockClusterManager.create.mock.calls).toMatchSnapshot(
-      'cluster manager without base path proxy'
-    );
+    const [[cliArgs, , basePathProxy]] = MockClusterManager.create.mock.calls;
+    expect(cliArgs.basePath).toBe(false);
+    expect(basePathProxy).not.toBeDefined();
   });
 
   test('creates ClusterManager with base path proxy.', async () => {
@@ -355,9 +381,8 @@ describe('once LegacyService is set up in `devClusterMaster` mode', () => {
 
     expect(MockClusterManager.create).toBeCalledTimes(1);
 
-    const [[cliArgs, config, basePathProxy]] = MockClusterManager.create.mock.calls;
-    expect(cliArgs).toMatchSnapshot('cli args. cluster manager with base path proxy');
-    expect(config).toMatchSnapshot('config. cluster manager with base path proxy');
+    const [[cliArgs, , basePathProxy]] = MockClusterManager.create.mock.calls;
+    expect(cliArgs.basePath).toEqual(true);
     expect(basePathProxy).toBeInstanceOf(BasePathProxyServer);
   });
 });
diff --git a/src/core/server/legacy/legacy_service.ts b/src/core/server/legacy/legacy_service.ts
index 612c46cd3bbc54..268e5f553723ff 100644
--- a/src/core/server/legacy/legacy_service.ts
+++ b/src/core/server/legacy/legacy_service.ts
@@ -18,15 +18,18 @@
  */
 
 import { combineLatest, ConnectableObservable, EMPTY, Observable, Subscription } from 'rxjs';
-import { first, map, mergeMap, publishReplay, tap } from 'rxjs/operators';
+import { first, map, publishReplay, tap } from 'rxjs/operators';
 import { CoreService } from '../../types';
-import { InternalCoreSetup, InternalCoreStart } from '../../server';
+import { InternalCoreSetup, InternalCoreStart } from '../';
+import { SavedObjectsLegacyUiExports } from '../types';
 import { Config } from '../config';
 import { CoreContext } from '../core_context';
 import { DevConfig, DevConfigType } from '../dev';
 import { BasePathProxyServer, HttpConfig, HttpConfigType } from '../http';
 import { Logger } from '../logging';
 import { PluginsServiceSetup, PluginsServiceStart } from '../plugins';
+import { findLegacyPluginSpecs } from './plugins';
+import { LegacyPluginSpec } from './plugins/find_legacy_plugin_specs';
 
 interface LegacyKbnServer {
   applyLoggingConfiguration: (settings: Readonly<Record<string, any>>) => void;
@@ -70,13 +73,30 @@ export interface LegacyServiceStartDeps {
 }
 
 /** @internal */
-export class LegacyService implements CoreService {
+export interface LegacyServiceSetup {
+  pluginSpecs: LegacyPluginSpec[];
+  uiExports: SavedObjectsLegacyUiExports;
+  pluginExtendedConfig: Config;
+}
+
+/** @internal */
+export class LegacyService implements CoreService<LegacyServiceSetup> {
   private readonly log: Logger;
   private readonly devConfig$: Observable<DevConfig>;
   private readonly httpConfig$: Observable<HttpConfig>;
   private kbnServer?: LegacyKbnServer;
   private configSubscription?: Subscription;
   private setupDeps?: LegacyServiceSetupDeps;
+  private update$: ConnectableObservable<Config> | undefined;
+  private legacyRawConfig: Config | undefined;
+  private legacyPlugins:
+    | {
+        pluginSpecs: LegacyPluginSpec[];
+        disabledPluginSpecs: LegacyPluginSpec[];
+        uiExports: SavedObjectsLegacyUiExports;
+      }
+    | undefined;
+  private settings: Record<string, any> | undefined;
 
   constructor(private readonly coreContext: CoreContext) {
     this.log = coreContext.logger.get('legacy-service');
@@ -87,17 +107,11 @@ export class LegacyService implements CoreService {
       .atPath<HttpConfigType>('server')
       .pipe(map(rawConfig => new HttpConfig(rawConfig, coreContext.env)));
   }
+
   public async setup(setupDeps: LegacyServiceSetupDeps) {
     this.setupDeps = setupDeps;
-  }
-  public async start(startDeps: LegacyServiceStartDeps) {
-    const { setupDeps } = this;
-    if (!setupDeps) {
-      throw new Error('Legacy service is not setup yet.');
-    }
-    this.log.debug('starting legacy service');
 
-    const update$ = this.coreContext.configService.getConfig$().pipe(
+    this.update$ = this.coreContext.configService.getConfig$().pipe(
       tap(config => {
         if (this.kbnServer !== undefined) {
           this.kbnServer.applyLoggingConfiguration(config.toRaw());
@@ -107,21 +121,66 @@ export class LegacyService implements CoreService {
       publishReplay(1)
     ) as ConnectableObservable<Config>;
 
-    this.configSubscription = update$.connect();
+    this.configSubscription = this.update$.connect();
 
-    // Receive initial config and create kbnServer/ClusterManager.
-    this.kbnServer = await update$
+    this.settings = await this.update$
       .pipe(
         first(),
-        mergeMap(async config => {
-          if (this.coreContext.env.isDevClusterMaster) {
-            await this.createClusterManager(config);
-            return;
-          }
-          return await this.createKbnServer(config, setupDeps, startDeps);
-        })
+        map(config => getLegacyRawConfig(config))
       )
       .toPromise();
+
+    const {
+      pluginSpecs,
+      pluginExtendedConfig,
+      disabledPluginSpecs,
+      uiExports,
+    } = await findLegacyPluginSpecs(this.settings, this.coreContext.logger);
+
+    this.legacyPlugins = {
+      pluginSpecs,
+      disabledPluginSpecs,
+      uiExports,
+    };
+
+    this.legacyRawConfig = pluginExtendedConfig;
+
+    // check for unknown uiExport types
+    if (uiExports.unknown && uiExports.unknown.length > 0) {
+      throw new Error(
+        `Unknown uiExport types: ${uiExports.unknown
+          .map(({ pluginSpec, type }) => `${type} from ${pluginSpec.getId()}`)
+          .join(', ')}`
+      );
+    }
+
+    return {
+      pluginSpecs,
+      uiExports,
+      pluginExtendedConfig,
+    };
+  }
+
+  public async start(startDeps: LegacyServiceStartDeps) {
+    const { setupDeps } = this;
+    if (!setupDeps || !this.legacyRawConfig || !this.legacyPlugins || !this.settings) {
+      throw new Error('Legacy service is not setup yet.');
+    }
+    this.log.debug('starting legacy service');
+
+    // Receive initial config and create kbnServer/ClusterManager.
+
+    if (this.coreContext.env.isDevClusterMaster) {
+      await this.createClusterManager(this.legacyRawConfig);
+    } else {
+      this.kbnServer = await this.createKbnServer(
+        this.settings,
+        this.legacyRawConfig,
+        setupDeps,
+        startDeps,
+        this.legacyPlugins
+      );
+    }
   }
 
   public async stop() {
@@ -151,24 +210,35 @@ export class LegacyService implements CoreService {
 
     require('../../../cli/cluster/cluster_manager').create(
       this.coreContext.env.cliArgs,
-      getLegacyRawConfig(config),
+      config,
       await basePathProxy$.toPromise()
     );
   }
 
   private async createKbnServer(
+    settings: Record<string, any>,
     config: Config,
     setupDeps: LegacyServiceSetupDeps,
-    startDeps: LegacyServiceStartDeps
+    startDeps: LegacyServiceStartDeps,
+    legacyPlugins: {
+      pluginSpecs: LegacyPluginSpec[];
+      disabledPluginSpecs: LegacyPluginSpec[];
+      uiExports: SavedObjectsLegacyUiExports;
+    }
   ) {
     // eslint-disable-next-line @typescript-eslint/no-var-requires
     const KbnServer = require('../../../legacy/server/kbn_server');
-    const kbnServer: LegacyKbnServer = new KbnServer(getLegacyRawConfig(config), {
-      handledConfigPaths: await this.coreContext.configService.getUsedPaths(),
-      setupDeps,
-      startDeps,
-      logger: this.coreContext.logger,
-    });
+    const kbnServer: LegacyKbnServer = new KbnServer(
+      settings,
+      config,
+      {
+        handledConfigPaths: await this.coreContext.configService.getUsedPaths(),
+        setupDeps,
+        startDeps,
+        logger: this.coreContext.logger,
+      },
+      legacyPlugins
+    );
 
     // The kbnWorkerType check is necessary to prevent the repl
     // from being started multiple times in different processes.
diff --git a/src/core/server/legacy/plugins/find_legacy_plugin_specs.ts b/src/core/server/legacy/plugins/find_legacy_plugin_specs.ts
new file mode 100644
index 00000000000000..f1f4da8d0b4d75
--- /dev/null
+++ b/src/core/server/legacy/plugins/find_legacy_plugin_specs.ts
@@ -0,0 +1,136 @@
+/*
+ * 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 { Observable, merge, forkJoin } from 'rxjs';
+import { toArray, tap, distinct, map } from 'rxjs/operators';
+import {
+  findPluginSpecs,
+  defaultConfig,
+  // @ts-ignore
+} from '../../../../legacy/plugin_discovery/find_plugin_specs.js';
+import { LoggerFactory } from '../../logging';
+import { collectUiExports as collectLegacyUiExports } from '../../../../legacy/ui/ui_exports/collect_ui_exports';
+import { Config } from '../../config';
+
+export interface LegacyPluginPack {
+  getPath(): string;
+}
+
+export interface LegacyPluginSpec {
+  getId: () => unknown;
+  getExpectedKibanaVersion: () => string;
+  getConfigPrefix: () => string;
+}
+
+export async function findLegacyPluginSpecs(settings: unknown, loggerFactory: LoggerFactory) {
+  const configToMutate: Config = defaultConfig(settings);
+  const {
+    pack$,
+    invalidDirectoryError$,
+    invalidPackError$,
+    otherError$,
+    deprecation$,
+    invalidVersionSpec$,
+    spec$,
+    disabledSpec$,
+  }: {
+    pack$: Observable<LegacyPluginPack>;
+    invalidDirectoryError$: Observable<{ path: string }>;
+    invalidPackError$: Observable<{ path: string }>;
+    otherError$: Observable<unknown>;
+    deprecation$: Observable<unknown>;
+    invalidVersionSpec$: Observable<LegacyPluginSpec>;
+    spec$: Observable<LegacyPluginSpec>;
+    disabledSpec$: Observable<LegacyPluginSpec>;
+  } = findPluginSpecs(settings, configToMutate) as any;
+
+  const logger = loggerFactory.get('legacy-plugins');
+
+  const log$ = merge(
+    pack$.pipe(
+      tap(definition => {
+        const path = definition.getPath();
+        logger.debug(`Found plugin at ${path}`, { path });
+      })
+    ),
+
+    invalidDirectoryError$.pipe(
+      tap(error => {
+        logger.warn(`Unable to scan directory for plugins "${error.path}"`, {
+          err: error,
+          dir: error.path,
+        });
+      })
+    ),
+
+    invalidPackError$.pipe(
+      tap(error => {
+        logger.warn(`Skipping non-plugin directory at ${error.path}`, {
+          path: error.path,
+        });
+      })
+    ),
+
+    otherError$.pipe(
+      tap(error => {
+        // rethrow unhandled errors, which will fail the server
+        throw error;
+      })
+    ),
+
+    invalidVersionSpec$.pipe(
+      map(spec => {
+        const name = spec.getId();
+        const pluginVersion = spec.getExpectedKibanaVersion();
+        // @ts-ignore
+        const kibanaVersion = settings.pkg.version;
+        return `Plugin "${name}" was disabled because it expected Kibana version "${pluginVersion}", and found "${kibanaVersion}".`;
+      }),
+      distinct(),
+      tap(message => {
+        logger.warn(message);
+      })
+    ),
+
+    deprecation$.pipe(
+      tap(({ spec, message }) => {
+        const deprecationLogger = loggerFactory.get(
+          'plugins',
+          spec.getConfigPrefix(),
+          'config',
+          'deprecation'
+        );
+        deprecationLogger.warn(message);
+      })
+    )
+  );
+
+  const [disabledPluginSpecs, pluginSpecs] = await forkJoin(
+    disabledSpec$.pipe(toArray()),
+    spec$.pipe(toArray()),
+    log$.pipe(toArray())
+  ).toPromise();
+
+  return {
+    disabledPluginSpecs,
+    pluginSpecs,
+    pluginExtendedConfig: configToMutate,
+    uiExports: collectLegacyUiExports(pluginSpecs),
+  };
+}
diff --git a/src/core/server/legacy/plugins/index.ts b/src/core/server/legacy/plugins/index.ts
new file mode 100644
index 00000000000000..7c69546f0c4de3
--- /dev/null
+++ b/src/core/server/legacy/plugins/index.ts
@@ -0,0 +1,19 @@
+/*
+ * 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 { findLegacyPluginSpecs } from './find_legacy_plugin_specs';
diff --git a/src/core/server/logging/index.ts b/src/core/server/logging/index.ts
index cde85c2600ffc3..fd35ed39092b31 100644
--- a/src/core/server/logging/index.ts
+++ b/src/core/server/logging/index.ts
@@ -24,4 +24,4 @@ export { LogLevel } from './log_level';
 /** @internal */
 export { config, LoggingConfigType } from './logging_config';
 /** @internal */
-export { LoggingService } from './logging_service';
+export { LoggingService, ILoggingService } from './logging_service';
diff --git a/src/core/server/logging/logging_service.mock.ts b/src/core/server/logging/logging_service.mock.ts
index d423e6b064e5fa..b5f522ca36a5f0 100644
--- a/src/core/server/logging/logging_service.mock.ts
+++ b/src/core/server/logging/logging_service.mock.ts
@@ -19,10 +19,9 @@
 
 // Test helpers to simplify mocking logs and collecting all their outputs
 import { Logger } from './logger';
-import { LoggingService } from './logging_service';
+import { ILoggingService } from './logging_service';
 import { LoggerFactory } from './logger_factory';
 
-type LoggingServiceContract = PublicMethodsOf<LoggingService>;
 type MockedLogger = jest.Mocked<Logger>;
 
 const createLoggingServiceMock = () => {
@@ -36,7 +35,7 @@ const createLoggingServiceMock = () => {
     warn: jest.fn(),
   };
 
-  const mocked: jest.Mocked<LoggingServiceContract> = {
+  const mocked: jest.Mocked<ILoggingService> = {
     get: jest.fn(),
     asLoggerFactory: jest.fn(),
     upgrade: jest.fn(),
@@ -65,7 +64,7 @@ const collectLoggingServiceMock = (loggerFactory: LoggerFactory) => {
 };
 
 const clearLoggingServiceMock = (loggerFactory: LoggerFactory) => {
-  const mockedLoggerFactory = (loggerFactory as unknown) as jest.Mocked<LoggingServiceContract>;
+  const mockedLoggerFactory = (loggerFactory as unknown) as jest.Mocked<ILoggingService>;
   mockedLoggerFactory.get.mockClear();
   mockedLoggerFactory.asLoggerFactory.mockClear();
   mockedLoggerFactory.upgrade.mockClear();
diff --git a/src/core/server/logging/logging_service.ts b/src/core/server/logging/logging_service.ts
index e340e769ac20e8..ada02c3b6901ad 100644
--- a/src/core/server/logging/logging_service.ts
+++ b/src/core/server/logging/logging_service.ts
@@ -24,6 +24,7 @@ import { LoggerAdapter } from './logger_adapter';
 import { LoggerFactory } from './logger_factory';
 import { LoggingConfigType, LoggerConfigType, LoggingConfig } from './logging_config';
 
+export type ILoggingService = PublicMethodsOf<LoggingService>;
 /**
  * Service that is responsible for maintaining loggers and logger appenders.
  * @internal
diff --git a/src/core/server/saved_objects/index.ts b/src/core/server/saved_objects/index.ts
index 1a667d6978f1a7..674f8df33ee37b 100644
--- a/src/core/server/saved_objects/index.ts
+++ b/src/core/server/saved_objects/index.ts
@@ -30,3 +30,7 @@ export { getSortedObjectsForExport, SavedObjectsExportOptions } from './export';
 export { SavedObjectsSerializer, RawDoc as SavedObjectsRawDoc } from './serialization';
 
 export { SavedObjectsMigrationLogger } from './migrations/core/migration_logger';
+
+export { SavedObjectsService, SavedObjectsServiceStart } from './saved_objects_service';
+
+export { config } from './saved_objects_config';
diff --git a/src/core/server/saved_objects/mappings/index.ts b/src/core/server/saved_objects/mappings/index.ts
index 0d3bfd00c415ec..15b0736ca5f1fe 100644
--- a/src/core/server/saved_objects/mappings/index.ts
+++ b/src/core/server/saved_objects/mappings/index.ts
@@ -17,4 +17,10 @@
  * under the License.
  */
 export { getTypes, getProperty, getRootProperties, getRootPropertiesObjects } from './lib';
-export { FieldMapping, MappingMeta, MappingProperties, IndexMapping } from './types';
+export {
+  FieldMapping,
+  MappingMeta,
+  MappingProperties,
+  IndexMapping,
+  SavedObjectsMapping,
+} from './types';
diff --git a/src/core/server/saved_objects/mappings/types.ts b/src/core/server/saved_objects/mappings/types.ts
index f0ec1e4a9dda27..8bb1a69d2eb132 100644
--- a/src/core/server/saved_objects/mappings/types.ts
+++ b/src/core/server/saved_objects/mappings/types.ts
@@ -42,6 +42,11 @@ export interface MappingProperties {
   [field: string]: FieldMapping;
 }
 
+export interface SavedObjectsMapping {
+  pluginId: string;
+  properties: MappingProperties;
+}
+
 export interface MappingMeta {
   // A dictionary of key -> md5 hash (e.g. 'dashboard': '24234qdfa3aefa3wa')
   // with each key being a root-level mapping property, and each value being
diff --git a/src/core/server/saved_objects/migrations/README.md b/src/core/server/saved_objects/migrations/README.md
index 0b62d86172a521..91249024358ac7 100644
--- a/src/core/server/saved_objects/migrations/README.md
+++ b/src/core/server/saved_objects/migrations/README.md
@@ -98,9 +98,19 @@ If a plugin is disbled, all of its documents are retained in the Kibana index. T
 
 Kibana index migrations expose a few config settings which might be tweaked:
 
-* `migrations.scrollDuration` - The [scroll](https://www.elastic.co/guide/en/elasticsearch/reference/current/search-request-scroll.html#scroll-search-context) value used to read batches of documents from the source index. Defaults to `15m`.
-* `migrations.batchSize` - The number of documents to read / transform / write at a time during index migrations
-* `migrations.pollInterval` - How often, in milliseconds, secondary Kibana instances will poll to see if the primary Kibana instance has finished migrating the index.
+* `migrations.scrollDuration` - The
+  [scroll](https://www.elastic.co/guide/en/elasticsearch/reference/current/search-request-scroll.html#scroll-search-context)
+  value used to read batches of documents from the source index. Defaults to
+  `15m`. 
+* `migrations.batchSize` - The number of documents to read / transform / write
+  at a time during index migrations 
+* `migrations.pollInterval` - How often, in milliseconds, secondary Kibana
+  instances will poll to see if the primary Kibana instance has finished
+  migrating the index.
+* `migrations.skip` - Skip running migrations on startup (defaults to false).
+  This should only be used for running integration tests without a running
+  elasticsearch cluster. Note: even though migrations won't run on startup,
+  individual docs will still be migrated when read from ES.
 
 ## Example
 
diff --git a/src/core/server/saved_objects/migrations/core/document_migrator.test.ts b/src/core/server/saved_objects/migrations/core/document_migrator.test.ts
index eb6de3afc95a3e..38496a3503833c 100644
--- a/src/core/server/saved_objects/migrations/core/document_migrator.test.ts
+++ b/src/core/server/saved_objects/migrations/core/document_migrator.test.ts
@@ -20,6 +20,10 @@
 import _ from 'lodash';
 import { RawSavedObjectDoc } from '../../serialization';
 import { DocumentMigrator } from './document_migrator';
+import { loggingServiceMock } from '../../../logging/logging_service.mock';
+
+const mockLoggerFactory = loggingServiceMock.create();
+const mockLogger = mockLoggerFactory.get('mock logger');
 
 describe('DocumentMigrator', () => {
   function testOpts() {
@@ -27,7 +31,7 @@ describe('DocumentMigrator', () => {
       kibanaVersion: '25.2.3',
       migrations: {},
       validateDoc: _.noop,
-      log: jest.fn(),
+      log: mockLogger,
     };
   }
 
@@ -474,7 +478,7 @@ describe('DocumentMigrator', () => {
   });
 
   it('logs the document and transform that failed', () => {
-    const log = jest.fn();
+    const log = mockLogger;
     const migrator = new DocumentMigrator({
       ...testOpts(),
       migrations: {
@@ -497,28 +501,26 @@ describe('DocumentMigrator', () => {
       expect('Did not throw').toEqual('But it should have!');
     } catch (error) {
       expect(error.message).toMatch(/Dang diggity!/);
-      const warning = log.mock.calls.filter(([[level]]) => level === 'warning')[0][1];
+      const warning = loggingServiceMock.collect(mockLoggerFactory).warn[0][0];
       expect(warning).toContain(JSON.stringify(failedDoc));
       expect(warning).toContain('dog:1.2.3');
     }
   });
 
   it('logs message in transform function', () => {
-    const logStash: string[] = [];
     const logTestMsg = '...said the joker to the thief';
     const migrator = new DocumentMigrator({
       ...testOpts(),
       migrations: {
         dog: {
           '1.2.3': (doc, log) => {
-            log!.info(logTestMsg);
+            log.info(logTestMsg);
+            log.warning(logTestMsg);
             return doc;
           },
         },
       },
-      log: (path: string[], message: string) => {
-        logStash.push(message);
-      },
+      log: mockLogger,
     });
     const doc = {
       id: 'joker',
@@ -527,7 +529,8 @@ describe('DocumentMigrator', () => {
       migrationVersion: {},
     };
     migrator.migrate(doc);
-    expect(logStash[0]).toEqual(logTestMsg);
+    expect(loggingServiceMock.collect(mockLoggerFactory).info[0][0]).toEqual(logTestMsg);
+    expect(loggingServiceMock.collect(mockLoggerFactory).warn[1][0]).toEqual(logTestMsg);
   });
 
   test('extracts the latest migration version info', () => {
diff --git a/src/core/server/saved_objects/migrations/core/document_migrator.ts b/src/core/server/saved_objects/migrations/core/document_migrator.ts
index 0576f1d22199fa..563d978dcc1f1e 100644
--- a/src/core/server/saved_objects/migrations/core/document_migrator.ts
+++ b/src/core/server/saved_objects/migrations/core/document_migrator.ts
@@ -64,26 +64,26 @@ import Boom from 'boom';
 import _ from 'lodash';
 import cloneDeep from 'lodash.clonedeep';
 import Semver from 'semver';
+import { Logger } from '../../../logging';
 import { RawSavedObjectDoc } from '../../serialization';
 import { SavedObjectsMigrationVersion } from '../../types';
-import { LogFn, SavedObjectsMigrationLogger, MigrationLogger } from './migration_logger';
+import { MigrationLogger, SavedObjectsMigrationLogger } from './migration_logger';
 
-export type TransformFn = (
-  doc: RawSavedObjectDoc,
-  log?: SavedObjectsMigrationLogger
-) => RawSavedObjectDoc;
+export type TransformFn = (doc: RawSavedObjectDoc) => RawSavedObjectDoc;
+
+type MigrationFn = (doc: RawSavedObjectDoc, log: SavedObjectsMigrationLogger) => RawSavedObjectDoc;
 
 type ValidateDoc = (doc: RawSavedObjectDoc) => void;
 
-interface MigrationDefinition {
-  [type: string]: { [version: string]: TransformFn };
+export interface MigrationDefinition {
+  [type: string]: { [version: string]: MigrationFn };
 }
 
 interface Opts {
   kibanaVersion: string;
   migrations: MigrationDefinition;
   validateDoc: ValidateDoc;
-  log: LogFn;
+  log: Logger;
 }
 
 interface ActiveMigrations {
@@ -125,7 +125,7 @@ export class DocumentMigrator implements VersionedTransformer {
   constructor(opts: Opts) {
     validateMigrationDefinition(opts.migrations);
 
-    this.migrations = buildActiveMigrations(opts.migrations, new MigrationLogger(opts.log));
+    this.migrations = buildActiveMigrations(opts.migrations, opts.log);
     this.transformDoc = buildDocumentTransform({
       kibanaVersion: opts.kibanaVersion,
       migrations: this.migrations,
@@ -207,10 +207,7 @@ function validateMigrationDefinition(migrations: MigrationDefinition) {
  * From: { type: { version: fn } }
  * To:   { type: { latestVersion: string, transforms: [{ version: string, transform: fn }] } }
  */
-function buildActiveMigrations(
-  migrations: MigrationDefinition,
-  log: SavedObjectsMigrationLogger
-): ActiveMigrations {
+function buildActiveMigrations(migrations: MigrationDefinition, log: Logger): ActiveMigrations {
   return _.mapValues(migrations, (versions, prop) => {
     const transforms = Object.entries(versions)
       .map(([version, transform]) => ({
@@ -299,15 +296,10 @@ function markAsUpToDate(doc: RawSavedObjectDoc, migrations: ActiveMigrations) {
  * If a specific transform function fails, this tacks on a bit of information
  * about the document and transform that caused the failure.
  */
-function wrapWithTry(
-  version: string,
-  prop: string,
-  transform: TransformFn,
-  log: SavedObjectsMigrationLogger
-) {
+function wrapWithTry(version: string, prop: string, transform: MigrationFn, log: Logger) {
   return function tryTransformDoc(doc: RawSavedObjectDoc) {
     try {
-      const result = transform(doc, log);
+      const result = transform(doc, new MigrationLogger(log));
 
       // A basic sanity check to help migration authors detect basic errors
       // (e.g. forgetting to return the transformed doc)
@@ -319,7 +311,7 @@ function wrapWithTry(
     } catch (error) {
       const failedTransform = `${prop}:${version}`;
       const failedDoc = JSON.stringify(doc);
-      log.warning(
+      log.warn(
         `Failed to transform document ${doc}. Transform: ${failedTransform}\nDoc: ${failedDoc}`
       );
       throw error;
diff --git a/src/core/server/saved_objects/migrations/core/index_migrator.test.ts b/src/core/server/saved_objects/migrations/core/index_migrator.test.ts
index 2f9c5d1a08672a..2fc65f6e475d87 100644
--- a/src/core/server/saved_objects/migrations/core/index_migrator.test.ts
+++ b/src/core/server/saved_objects/migrations/core/index_migrator.test.ts
@@ -21,6 +21,7 @@ import _ from 'lodash';
 import { SavedObjectsSchema } from '../../schema';
 import { RawSavedObjectDoc, SavedObjectsSerializer } from '../../serialization';
 import { IndexMigrator } from './index_migrator';
+import { loggingServiceMock } from '../../../logging/logging_service.mock';
 
 describe('IndexMigrator', () => {
   let testOpts: any;
@@ -30,7 +31,7 @@ describe('IndexMigrator', () => {
       batchSize: 10,
       callCluster: jest.fn(),
       index: '.kibana',
-      log: jest.fn(),
+      log: loggingServiceMock.create().get(),
       mappingProperties: {},
       pollInterval: 1,
       scrollDuration: '1m',
diff --git a/src/core/server/saved_objects/migrations/core/migration_context.ts b/src/core/server/saved_objects/migrations/core/migration_context.ts
index 633bccf8aceecb..d4e97ee6c57471 100644
--- a/src/core/server/saved_objects/migrations/core/migration_context.ts
+++ b/src/core/server/saved_objects/migrations/core/migration_context.ts
@@ -24,13 +24,14 @@
  * serves as a central blueprint for what migrations will end up doing.
  */
 
+import { Logger } from 'src/core/server/logging';
 import { SavedObjectsSerializer } from '../../serialization';
 import { MappingProperties } from '../../mappings';
 import { buildActiveMappings } from './build_active_mappings';
 import { CallCluster } from './call_cluster';
 import { VersionedTransformer } from './document_migrator';
 import { fetchInfo, FullIndexInfo } from './elastic_index';
-import { LogFn, SavedObjectsMigrationLogger, MigrationLogger } from './migration_logger';
+import { SavedObjectsMigrationLogger, MigrationLogger } from './migration_logger';
 
 export interface MigrationOpts {
   batchSize: number;
@@ -38,7 +39,7 @@ export interface MigrationOpts {
   scrollDuration: string;
   callCluster: CallCluster;
   index: string;
-  log: LogFn;
+  log: Logger;
   mappingProperties: MappingProperties;
   documentMigrator: VersionedTransformer;
   serializer: SavedObjectsSerializer;
@@ -71,8 +72,7 @@ export interface Context {
  * and various info needed to migrate the source index.
  */
 export async function migrationContext(opts: MigrationOpts): Promise<Context> {
-  const { callCluster } = opts;
-  const log = new MigrationLogger(opts.log);
+  const { log, callCluster } = opts;
   const alias = opts.index;
   const source = createSourceContext(await fetchInfo(callCluster, alias), alias);
   const dest = createDestContext(source, alias, opts.mappingProperties);
@@ -82,7 +82,7 @@ export async function migrationContext(opts: MigrationOpts): Promise<Context> {
     alias,
     source,
     dest,
-    log,
+    log: new MigrationLogger(log),
     batchSize: opts.batchSize,
     documentMigrator: opts.documentMigrator,
     pollInterval: opts.pollInterval,
diff --git a/src/core/server/saved_objects/migrations/core/migration_logger.ts b/src/core/server/saved_objects/migrations/core/migration_logger.ts
index 9c98b7d85a8d82..7c61d0c48d9bd8 100644
--- a/src/core/server/saved_objects/migrations/core/migration_logger.ts
+++ b/src/core/server/saved_objects/migrations/core/migration_logger.ts
@@ -17,6 +17,8 @@
  * under the License.
  */
 
+import { Logger } from 'src/core/server/logging';
+
 /*
  * This file provides a helper class for ensuring that all logging
  * in the migration system is done in a fairly uniform way.
@@ -32,13 +34,13 @@ export interface SavedObjectsMigrationLogger {
 }
 
 export class MigrationLogger implements SavedObjectsMigrationLogger {
-  private log: LogFn;
+  private logger: Logger;
 
-  constructor(log: LogFn) {
-    this.log = log;
+  constructor(log: Logger) {
+    this.logger = log;
   }
 
-  public info = (msg: string) => this.log(['info', 'migrations'], msg);
-  public debug = (msg: string) => this.log(['debug', 'migrations'], msg);
-  public warning = (msg: string) => this.log(['warning', 'migrations'], msg);
+  public info = (msg: string) => this.logger.info(msg);
+  public debug = (msg: string) => this.logger.debug(msg);
+  public warning = (msg: string) => this.logger.warn(msg);
 }
diff --git a/src/core/server/saved_objects/migrations/index.ts b/src/core/server/saved_objects/migrations/index.ts
index 7a5c16bbe4af04..6cb7ecac92ab9e 100644
--- a/src/core/server/saved_objects/migrations/index.ts
+++ b/src/core/server/saved_objects/migrations/index.ts
@@ -17,4 +17,4 @@
  * under the License.
  */
 
-export { KibanaMigrator } from './kibana';
+export { KibanaMigrator, IKibanaMigrator } from './kibana';
diff --git a/src/core/server/saved_objects/migrations/kibana/index.ts b/src/core/server/saved_objects/migrations/kibana/index.ts
index ed48f3f4893de6..25772c4c9b0b16 100644
--- a/src/core/server/saved_objects/migrations/kibana/index.ts
+++ b/src/core/server/saved_objects/migrations/kibana/index.ts
@@ -17,4 +17,4 @@
  * under the License.
  */
 
-export { KibanaMigrator } from './kibana_migrator';
+export { KibanaMigrator, IKibanaMigrator } from './kibana_migrator';
diff --git a/src/core/server/saved_objects/migrations/kibana/kibana_migrator.mock.ts b/src/core/server/saved_objects/migrations/kibana/kibana_migrator.mock.ts
new file mode 100644
index 00000000000000..ca732f4f150282
--- /dev/null
+++ b/src/core/server/saved_objects/migrations/kibana/kibana_migrator.mock.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 { KibanaMigrator, mergeProperties } from './kibana_migrator';
+import { buildActiveMappings } from '../core';
+import { SavedObjectsMapping } from '../../mappings';
+
+const createMigrator = (
+  {
+    savedObjectMappings,
+  }: {
+    savedObjectMappings: SavedObjectsMapping[];
+  } = { savedObjectMappings: [] }
+) => {
+  const mockMigrator: jest.Mocked<PublicMethodsOf<KibanaMigrator>> = {
+    runMigrations: jest.fn(),
+    getActiveMappings: jest.fn(),
+    migrateDocument: jest.fn(),
+  };
+
+  mockMigrator.getActiveMappings.mockReturnValue(
+    buildActiveMappings({ properties: mergeProperties(savedObjectMappings) })
+  );
+  mockMigrator.migrateDocument.mockImplementation(doc => doc);
+  return mockMigrator;
+};
+
+export const mockKibanaMigrator = {
+  create: createMigrator,
+};
diff --git a/src/core/server/saved_objects/migrations/kibana/kibana_migrator.test.ts b/src/core/server/saved_objects/migrations/kibana/kibana_migrator.test.ts
index 9fc8afd356043c..51551ae4887b51 100644
--- a/src/core/server/saved_objects/migrations/kibana/kibana_migrator.test.ts
+++ b/src/core/server/saved_objects/migrations/kibana/kibana_migrator.test.ts
@@ -18,13 +18,14 @@
  */
 
 import _ from 'lodash';
-import { KbnServer, KibanaMigrator } from './kibana_migrator';
+import { KibanaMigratorOptions, KibanaMigrator } from './kibana_migrator';
+import { loggingServiceMock } from '../../../logging/logging_service.mock';
 
 describe('KibanaMigrator', () => {
   describe('getActiveMappings', () => {
     it('returns full index mappings w/ core properties', () => {
-      const { kbnServer } = mockKbnServer();
-      kbnServer.uiExports.savedObjectMappings = [
+      const options = mockOptions();
+      options.savedObjectMappings = [
         {
           pluginId: 'aaa',
           properties: { amap: { type: 'text' } },
@@ -34,13 +35,13 @@ describe('KibanaMigrator', () => {
           properties: { bmap: { type: 'text' } },
         },
       ];
-      const mappings = new KibanaMigrator({ kbnServer }).getActiveMappings();
+      const mappings = new KibanaMigrator(options).getActiveMappings();
       expect(mappings).toMatchSnapshot();
     });
 
     it('Fails if duplicate mappings are defined', () => {
-      const { kbnServer } = mockKbnServer();
-      kbnServer.uiExports.savedObjectMappings = [
+      const options = mockOptions();
+      options.savedObjectMappings = [
         {
           pluginId: 'aaa',
           properties: { amap: { type: 'text' } },
@@ -50,56 +51,27 @@ describe('KibanaMigrator', () => {
           properties: { amap: { type: 'long' } },
         },
       ];
-      expect(() => new KibanaMigrator({ kbnServer }).getActiveMappings()).toThrow(
+      expect(() => new KibanaMigrator(options).getActiveMappings()).toThrow(
         /Plugin bbb is attempting to redefine mapping "amap"/
       );
     });
   });
 
-  describe('awaitMigration', () => {
-    it('changes isMigrated to true if migrations were skipped', async () => {
-      const { kbnServer } = mockKbnServer();
-      kbnServer.server.plugins.elasticsearch = undefined;
-      const result = await new KibanaMigrator({ kbnServer }).awaitMigration();
+  describe('runMigrations', () => {
+    it('resolves isMigrated if migrations were skipped', async () => {
+      const skipMigrations = true;
+      const result = await new KibanaMigrator(mockOptions()).runMigrations(skipMigrations);
       expect(result).toEqual([{ status: 'skipped' }, { status: 'skipped' }]);
     });
 
-    it('waits for kbnServer.ready and elasticsearch.ready before attempting migrations', async () => {
-      const { kbnServer } = mockKbnServer();
+    it('only runs migrations once if called multiple times', async () => {
+      const options = mockOptions();
       const clusterStub = jest.fn<any, any>(() => ({ status: 404 }));
-      const waitUntilReady = jest.fn(async () => undefined);
 
-      kbnServer.server.plugins.elasticsearch = {
-        waitUntilReady,
-        getCluster() {
-          expect(kbnServer.ready as any).toHaveBeenCalledTimes(1);
-          expect(waitUntilReady).toHaveBeenCalledTimes(1);
-
-          return {
-            callWithInternalUser: clusterStub,
-          };
-        },
-      };
-
-      const migrationResults = await new KibanaMigrator({ kbnServer }).awaitMigration();
-      expect(migrationResults.length).toEqual(2);
-    });
-
-    it('only handles and deletes index templates once', async () => {
-      const { kbnServer } = mockKbnServer();
-      const clusterStub = jest.fn<any, any>(() => ({ status: 404 }));
-      const waitUntilReady = jest.fn(async () => undefined);
-
-      kbnServer.server.plugins.elasticsearch = {
-        waitUntilReady,
-        getCluster() {
-          return {
-            callWithInternalUser: clusterStub,
-          };
-        },
-      };
-
-      await new KibanaMigrator({ kbnServer }).awaitMigration();
+      options.callCluster = clusterStub;
+      const migrator = new KibanaMigrator(options);
+      await migrator.runMigrations();
+      await migrator.runMigrations();
 
       // callCluster with "cat.templates" is called by "deleteIndexTemplates" function
       // and should only be done once
@@ -111,75 +83,60 @@ describe('KibanaMigrator', () => {
   });
 });
 
-function mockKbnServer({ configValues }: { configValues?: any } = {}) {
+function mockOptions({ configValues }: { configValues?: any } = {}): KibanaMigratorOptions {
   const callCluster = jest.fn();
-  const kbnServer: KbnServer = {
-    version: '8.2.3',
-    ready: jest.fn(async () => undefined),
-    uiExports: {
-      savedObjectsManagement: {},
-      savedObjectValidations: {},
-      savedObjectMigrations: {},
-      savedObjectMappings: [
-        {
-          pluginId: 'testtype',
-          properties: {
-            testtype: {
-              properties: {
-                name: { type: 'keyword' },
-              },
+  return {
+    logger: loggingServiceMock.create().get(),
+    kibanaVersion: '8.2.3',
+    savedObjectValidations: {},
+    savedObjectMigrations: {},
+    savedObjectMappings: [
+      {
+        pluginId: 'testtype',
+        properties: {
+          testtype: {
+            properties: {
+              name: { type: 'keyword' },
             },
           },
         },
-        {
-          pluginId: 'testtype2',
-          properties: {
-            testtype2: {
-              properties: {
-                name: { type: 'keyword' },
-              },
+      },
+      {
+        pluginId: 'testtype2',
+        properties: {
+          testtype2: {
+            properties: {
+              name: { type: 'keyword' },
             },
           },
         },
-      ],
-      savedObjectSchemas: {
-        testtype2: {
-          isNamespaceAgnostic: false,
-          indexPattern: 'other-index',
-        },
       },
-    },
-    server: {
-      config: () => ({
-        get: ((name: string) => {
-          if (configValues && configValues[name]) {
-            return configValues[name];
-          }
-          switch (name) {
-            case 'kibana.index':
-              return '.my-index';
-            case 'migrations.batchSize':
-              return 20;
-            case 'migrations.pollInterval':
-              return 20000;
-            case 'migrations.scrollDuration':
-              return '10m';
-            default:
-              throw new Error(`Unexpected config ${name}`);
-          }
-        }) as any,
-      }),
-      log: _.noop as any,
-      plugins: {
-        elasticsearch: {
-          getCluster: () => ({
-            callWithInternalUser: callCluster,
-          }),
-          waitUntilReady: async () => undefined,
-        },
+    ],
+    savedObjectSchemas: {
+      testtype2: {
+        isNamespaceAgnostic: false,
+        indexPattern: 'other-index',
       },
     },
+    kibanaConfig: {
+      enabled: true,
+      index: '.my-index',
+    } as KibanaMigratorOptions['kibanaConfig'],
+    savedObjectsConfig: {
+      batchSize: 20,
+      pollInterval: 20000,
+      scrollDuration: '10m',
+      skip: false,
+    },
+    config: {
+      get: (name: string) => {
+        if (configValues && configValues[name]) {
+          return configValues[name];
+        } else {
+          throw new Error(`Unexpected config ${name}`);
+        }
+      },
+    } as KibanaMigratorOptions['config'],
+    callCluster,
   };
-
-  return { kbnServer, callCluster };
 }
diff --git a/src/core/server/saved_objects/migrations/kibana/kibana_migrator.ts b/src/core/server/saved_objects/migrations/kibana/kibana_migrator.ts
index 78a8507e0c41d9..5bde5deec93820 100644
--- a/src/core/server/saved_objects/migrations/kibana/kibana_migrator.ts
+++ b/src/core/server/saved_objects/migrations/kibana/kibana_migrator.ts
@@ -22,81 +22,112 @@
  * (the shape of the mappings and documents in the index).
  */
 
-import { once } from 'lodash';
-import { MappingProperties } from '../../mappings';
+import { Logger } from 'src/core/server/logging';
+import { KibanaConfigType } from 'src/core/server/kibana_config';
+import { MappingProperties, SavedObjectsMapping, IndexMapping } from '../../mappings';
 import { SavedObjectsSchema, SavedObjectsSchemaDefinition } from '../../schema';
-import { SavedObjectsManagementDefinition } from '../../management';
 import { RawSavedObjectDoc, SavedObjectsSerializer } from '../../serialization';
-import { docValidator } from '../../validation';
-import { buildActiveMappings, CallCluster, IndexMigrator, LogFn } from '../core';
-import { DocumentMigrator, VersionedTransformer } from '../core/document_migrator';
+import { docValidator, PropertyValidators } from '../../validation';
+import { buildActiveMappings, CallCluster, IndexMigrator } from '../core';
+import {
+  DocumentMigrator,
+  VersionedTransformer,
+  MigrationDefinition,
+} from '../core/document_migrator';
 import { createIndexMap } from '../core/build_index_map';
+import { SavedObjectsConfigType } from '../../saved_objects_config';
 import { Config } from '../../../config';
-export interface KbnServer {
-  server: Server;
-  version: string;
-  ready: () => Promise<any>;
-  uiExports: {
-    savedObjectMappings: any[];
-    savedObjectMigrations: any;
-    savedObjectValidations: any;
-    savedObjectSchemas: SavedObjectsSchemaDefinition;
-    savedObjectsManagement: SavedObjectsManagementDefinition;
-  };
-}
 
-interface Server {
-  log: LogFn;
-  config: () => {
-    get: {
-      (path: 'kibana.index' | 'migrations.scrollDuration'): string;
-      (path: 'migrations.batchSize' | 'migrations.pollInterval'): number;
-    };
-  };
-  plugins: { elasticsearch: ElasticsearchPlugin | undefined };
+export interface KibanaMigratorOptions {
+  callCluster: CallCluster;
+  config: Config;
+  savedObjectsConfig: SavedObjectsConfigType;
+  kibanaConfig: KibanaConfigType;
+  kibanaVersion: string;
+  logger: Logger;
+  savedObjectMappings: SavedObjectsMapping[];
+  savedObjectMigrations: MigrationDefinition;
+  savedObjectSchemas: SavedObjectsSchemaDefinition;
+  savedObjectValidations: PropertyValidators;
 }
 
-interface ElasticsearchPlugin {
-  getCluster: (name: 'admin') => { callWithInternalUser: CallCluster };
-  waitUntilReady: () => Promise<any>;
-}
+export type IKibanaMigrator = Pick<KibanaMigrator, keyof KibanaMigrator>;
 
 /**
  * Manages the shape of mappings and documents in the Kibana index.
- *
- * @export
- * @class KibanaMigrator
  */
 export class KibanaMigrator {
+  private readonly callCluster: CallCluster;
+  private readonly config: Config;
+  private readonly savedObjectsConfig: SavedObjectsConfigType;
+  private readonly documentMigrator: VersionedTransformer;
+  private readonly kibanaConfig: KibanaConfigType;
+  private readonly log: Logger;
+  private readonly mappingProperties: MappingProperties;
+  private readonly schema: SavedObjectsSchema;
+  private readonly serializer: SavedObjectsSerializer;
+  private migrationResult?: Promise<Array<{ status: string }>>;
+
+  /**
+   * Creates an instance of KibanaMigrator.
+   */
+  constructor({
+    callCluster,
+    config,
+    kibanaConfig,
+    savedObjectsConfig,
+    kibanaVersion,
+    logger,
+    savedObjectMappings,
+    savedObjectMigrations,
+    savedObjectSchemas,
+    savedObjectValidations,
+  }: KibanaMigratorOptions) {
+    this.config = config;
+    this.callCluster = callCluster;
+    this.kibanaConfig = kibanaConfig;
+    this.savedObjectsConfig = savedObjectsConfig;
+    this.schema = new SavedObjectsSchema(savedObjectSchemas);
+    this.serializer = new SavedObjectsSerializer(this.schema);
+    this.mappingProperties = mergeProperties(savedObjectMappings || []);
+    this.log = logger;
+    this.documentMigrator = new DocumentMigrator({
+      kibanaVersion,
+      migrations: savedObjectMigrations || {},
+      validateDoc: docValidator(savedObjectValidations || {}),
+      log: this.log,
+    });
+  }
+
   /**
    * Migrates the mappings and documents in the Kibana index. This will run only
    * once and subsequent calls will return the result of the original call.
    *
-   * @returns
-   * @memberof KibanaMigrator
+   * @returns - A promise which resolves once all migrations have been applied.
+   *    The promise resolves with an array of migration statuses, one for each
+   *    elasticsearch index which was migrated.
    */
-  public awaitMigration = once(async () => {
-    const { server } = this.kbnServer;
+  public runMigrations(skipMigrations: boolean = false): Promise<Array<{ status: string }>> {
+    if (this.migrationResult === undefined) {
+      this.migrationResult = this.runMigrationsInternal(skipMigrations);
+    }
 
-    // Wait until the plugins have been found an initialized...
-    await this.kbnServer.ready();
+    return this.migrationResult;
+  }
 
-    // We can't do anything if the elasticsearch plugin has been disabled.
-    if (!server.plugins.elasticsearch) {
-      server.log(
-        ['warning', 'migration'],
-        'The elasticsearch plugin is disabled. Skipping migrations.'
+  private runMigrationsInternal(skipMigrations: boolean) {
+    if (skipMigrations) {
+      this.log.warn(
+        'Skipping Saved Object migrations on startup. Note: Individual documents will still be migrated when read or written.'
+      );
+      return Promise.resolve(
+        Object.keys(this.mappingProperties).map(() => ({ status: 'skipped' }))
       );
-      return Object.keys(this.mappingProperties).map(() => ({ status: 'skipped' }));
     }
 
-    // Wait until elasticsearch is green...
-    await server.plugins.elasticsearch.waitUntilReady();
-
-    const config = server.config() as Config;
-    const kibanaIndexName = config.get('kibana.index');
+    const kibanaIndexName = this.kibanaConfig.index;
     const indexMap = createIndexMap({
-      config,
+      config: this.config,
       kibanaIndexName,
       indexMap: this.mappingProperties,
       schema: this.schema,
@@ -104,14 +135,14 @@ export class KibanaMigrator {
 
     const migrators = Object.keys(indexMap).map(index => {
       return new IndexMigrator({
-        batchSize: config.get('migrations.batchSize'),
-        callCluster: server.plugins.elasticsearch!.getCluster('admin').callWithInternalUser,
+        batchSize: this.savedObjectsConfig.batchSize,
+        callCluster: this.callCluster,
         documentMigrator: this.documentMigrator,
         index,
         log: this.log,
         mappingProperties: indexMap[index].typeMappings,
-        pollInterval: config.get('migrations.pollInterval'),
-        scrollDuration: config.get('migrations.scrollDuration'),
+        pollInterval: this.savedObjectsConfig.pollInterval,
+        scrollDuration: this.savedObjectsConfig.scrollDuration,
         serializer: this.serializer,
         // Only necessary for the migrator of the kibana index.
         obsoleteIndexTemplatePattern:
@@ -120,61 +151,22 @@ export class KibanaMigrator {
       });
     });
 
-    if (migrators.length === 0) {
-      throw new Error(`Migrations failed to run, no mappings found or Kibana is not "ready".`);
-    }
-
     return Promise.all(migrators.map(migrator => migrator.migrate()));
-  });
-
-  private kbnServer: KbnServer;
-  private documentMigrator: VersionedTransformer;
-  private mappingProperties: MappingProperties;
-  private log: LogFn;
-  private serializer: SavedObjectsSerializer;
-  private readonly schema: SavedObjectsSchema;
-
-  /**
-   * Creates an instance of KibanaMigrator.
-   *
-   * @param opts
-   * @prop {KbnServer} kbnServer - An instance of the Kibana server object.
-   * @memberof KibanaMigrator
-   */
-  constructor({ kbnServer }: { kbnServer: KbnServer }) {
-    this.kbnServer = kbnServer;
-
-    this.schema = new SavedObjectsSchema(kbnServer.uiExports.savedObjectSchemas);
-    this.serializer = new SavedObjectsSerializer(this.schema);
-
-    this.mappingProperties = mergeProperties(kbnServer.uiExports.savedObjectMappings || []);
-
-    this.log = (meta: string[], message: string) => kbnServer.server.log(meta, message);
-
-    this.documentMigrator = new DocumentMigrator({
-      kibanaVersion: kbnServer.version,
-      migrations: kbnServer.uiExports.savedObjectMigrations || {},
-      validateDoc: docValidator(kbnServer.uiExports.savedObjectValidations || {}),
-      log: this.log,
-    });
   }
 
   /**
    * Gets all the index mappings defined by Kibana's enabled plugins.
    *
-   * @returns
-   * @memberof KibanaMigrator
    */
-  public getActiveMappings() {
+  public getActiveMappings(): IndexMapping {
     return buildActiveMappings({ properties: this.mappingProperties });
   }
 
   /**
    * Migrates an individual doc to the latest version, as defined by the plugin migrations.
    *
-   * @param {RawSavedObjectDoc} doc
-   * @returns {RawSavedObjectDoc}
-   * @memberof KibanaMigrator
+   * @param doc - The saved object to migrate
+   * @returns `doc` with all registered migrations applied.
    */
   public migrateDocument(doc: RawSavedObjectDoc): RawSavedObjectDoc {
     return this.documentMigrator.migrate(doc);
@@ -185,7 +177,7 @@ export class KibanaMigrator {
  * Merges savedObjectMappings properties into a single object, verifying that
  * no mappings are redefined.
  */
-function mergeProperties(mappings: any[]): MappingProperties {
+export function mergeProperties(mappings: SavedObjectsMapping[]): MappingProperties {
   return mappings.reduce((acc, { pluginId, properties }) => {
     const duplicate = Object.keys(properties).find(k => acc.hasOwnProperty(k));
     if (duplicate) {
diff --git a/src/core/server/saved_objects/saved_objects_config.ts b/src/core/server/saved_objects/saved_objects_config.ts
new file mode 100644
index 00000000000000..7217cde55d0611
--- /dev/null
+++ b/src/core/server/saved_objects/saved_objects_config.ts
@@ -0,0 +1,32 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { schema, TypeOf } from '@kbn/config-schema';
+
+export type SavedObjectsConfigType = TypeOf<typeof config.schema>;
+
+export const config = {
+  path: 'migrations',
+  schema: schema.object({
+    batchSize: schema.number({ defaultValue: 100 }),
+    scrollDuration: schema.string({ defaultValue: '15m' }),
+    pollInterval: schema.number({ defaultValue: 1500 }),
+    skip: schema.boolean({ defaultValue: false }),
+  }),
+};
diff --git a/src/core/server/saved_objects/saved_objects_service.mock.ts b/src/core/server/saved_objects/saved_objects_service.mock.ts
new file mode 100644
index 00000000000000..5561031d820ec0
--- /dev/null
+++ b/src/core/server/saved_objects/saved_objects_service.mock.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 { SavedObjectsService, SavedObjectsServiceStart } from './saved_objects_service';
+import { mockKibanaMigrator } from './migrations/kibana/kibana_migrator.mock';
+
+type SavedObjectsServiceContract = PublicMethodsOf<SavedObjectsService>;
+
+const createStartContractMock = () => {
+  const startContract: jest.Mocked<SavedObjectsServiceStart> = {
+    migrator: mockKibanaMigrator.create(),
+  };
+
+  return startContract;
+};
+
+const createsavedObjectsServiceMock = () => {
+  const mocked: jest.Mocked<SavedObjectsServiceContract> = {
+    setup: jest.fn(),
+    start: jest.fn(),
+    stop: jest.fn(),
+  };
+
+  mocked.setup.mockResolvedValue({});
+  mocked.start.mockResolvedValue(createStartContractMock());
+  mocked.stop.mockResolvedValue();
+  return mocked;
+};
+
+export const savedObjectsServiceMock = {
+  create: createsavedObjectsServiceMock,
+  createStartContract: createStartContractMock,
+};
diff --git a/src/core/server/saved_objects/saved_objects_service.test.ts b/src/core/server/saved_objects/saved_objects_service.test.ts
new file mode 100644
index 00000000000000..c13be579c04bb7
--- /dev/null
+++ b/src/core/server/saved_objects/saved_objects_service.test.ts
@@ -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.
+ */
+
+jest.mock('./migrations/kibana/kibana_migrator');
+
+import { SavedObjectsService, SavedObjectsSetupDeps } from './saved_objects_service';
+import { mockCoreContext } from '../core_context.mock';
+import { KibanaMigrator } from './migrations/kibana/kibana_migrator';
+import { of } from 'rxjs';
+import elasticsearch from 'elasticsearch';
+import { Env } from '../config';
+import { configServiceMock } from '../mocks';
+
+afterEach(() => {
+  jest.clearAllMocks();
+});
+
+describe('SavedObjectsService', () => {
+  describe('#setup()', () => {
+    it('creates a KibanaMigrator which retries NoConnections errors from callAsInternalUser', async () => {
+      const coreContext = mockCoreContext.create();
+      let i = 0;
+      const clusterClient = {
+        callAsInternalUser: jest
+          .fn()
+          .mockImplementation(() =>
+            i++ <= 2
+              ? Promise.reject(new elasticsearch.errors.NoConnections())
+              : Promise.resolve('success')
+          ),
+      };
+
+      const soService = new SavedObjectsService(coreContext);
+      const coreSetup = ({
+        elasticsearch: { adminClient$: of(clusterClient) },
+        legacy: { uiExports: {}, pluginExtendedConfig: {} },
+      } as unknown) as SavedObjectsSetupDeps;
+
+      await soService.setup(coreSetup);
+
+      return expect((KibanaMigrator as jest.Mock).mock.calls[0][0].callCluster()).resolves.toMatch(
+        'success'
+      );
+    });
+  });
+
+  describe('#start()', () => {
+    it('skips KibanaMigrator migrations when --optimize=true', async () => {
+      const coreContext = mockCoreContext.create({
+        env: ({ cliArgs: { optimize: true }, packageInfo: { version: 'x.x.x' } } as unknown) as Env,
+      });
+      const soService = new SavedObjectsService(coreContext);
+      const coreSetup = ({
+        elasticsearch: { adminClient$: of({ callAsInternalUser: jest.fn() }) },
+        legacy: { uiExports: {}, pluginExtendedConfig: {} },
+      } as unknown) as SavedObjectsSetupDeps;
+
+      await soService.setup(coreSetup);
+      const migrator = (KibanaMigrator as jest.Mock<KibanaMigrator>).mock.instances[0];
+      await soService.start({});
+      expect(migrator.runMigrations).toHaveBeenCalledWith(true);
+    });
+
+    it('skips KibanaMigrator migrations when migrations.skip=true', async () => {
+      const configService = configServiceMock.create({ atPath: { skip: true } });
+      const coreContext = mockCoreContext.create({ configService });
+      const soService = new SavedObjectsService(coreContext);
+      const coreSetup = ({
+        elasticsearch: { adminClient$: of({ callAsInternalUser: jest.fn() }) },
+        legacy: { uiExports: {}, pluginExtendedConfig: {} },
+      } as unknown) as SavedObjectsSetupDeps;
+
+      await soService.setup(coreSetup);
+      const migrator = (KibanaMigrator as jest.Mock<KibanaMigrator>).mock.instances[0];
+      await soService.start({});
+      expect(migrator.runMigrations).toHaveBeenCalledWith(true);
+    });
+
+    it('resolves with KibanaMigrator after waiting for migrations to complete', async () => {
+      const configService = configServiceMock.create({ atPath: { skip: false } });
+      const coreContext = mockCoreContext.create({ configService });
+      const soService = new SavedObjectsService(coreContext);
+      const coreSetup = ({
+        elasticsearch: { adminClient$: of({ callAsInternalUser: jest.fn() }) },
+        legacy: { uiExports: {}, pluginExtendedConfig: {} },
+      } as unknown) as SavedObjectsSetupDeps;
+
+      await soService.setup(coreSetup);
+      const migrator = (KibanaMigrator as jest.Mock<KibanaMigrator>).mock.instances[0];
+      expect(migrator.runMigrations).toHaveBeenCalledTimes(0);
+      const startContract = await soService.start({});
+      expect(startContract.migrator).toBeInstanceOf(KibanaMigrator);
+      expect(migrator.runMigrations).toHaveBeenCalledWith(false);
+      expect(migrator.runMigrations).toHaveBeenCalledTimes(1);
+    });
+  });
+});
diff --git a/src/core/server/saved_objects/saved_objects_service.ts b/src/core/server/saved_objects/saved_objects_service.ts
new file mode 100644
index 00000000000000..ebcea8dc3b2750
--- /dev/null
+++ b/src/core/server/saved_objects/saved_objects_service.ts
@@ -0,0 +1,126 @@
+/*
+ * 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 { CoreService } from 'src/core/types';
+import { first } from 'rxjs/operators';
+import { KibanaMigrator, IKibanaMigrator } from './migrations';
+import { CoreContext } from '../core_context';
+import { LegacyServiceSetup } from '../legacy/legacy_service';
+import { ElasticsearchServiceSetup } from '../elasticsearch';
+import { KibanaConfigType } from '../kibana_config';
+import { retryCallCluster } from '../elasticsearch/retry_call_cluster';
+import { SavedObjectsConfigType } from './saved_objects_config';
+import { Logger } from '..';
+
+/**
+ * @public
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface SavedObjectsServiceSetup {}
+
+/**
+ * @public
+ */
+export interface SavedObjectsServiceStart {
+  migrator: IKibanaMigrator;
+}
+
+/** @internal */
+export interface SavedObjectsSetupDeps {
+  legacy: LegacyServiceSetup;
+  elasticsearch: ElasticsearchServiceSetup;
+}
+
+/** @internal */
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface SavedObjectsStartDeps {}
+
+export class SavedObjectsService
+  implements CoreService<SavedObjectsServiceSetup, SavedObjectsServiceStart> {
+  private migrator: KibanaMigrator | undefined;
+  logger: Logger;
+
+  constructor(private readonly coreContext: CoreContext) {
+    this.logger = coreContext.logger.get('savedobjects-service');
+  }
+
+  public async setup(coreSetup: SavedObjectsSetupDeps) {
+    this.logger.debug('Setting up SavedObjects service');
+
+    const {
+      savedObjectSchemas,
+      savedObjectMappings,
+      savedObjectMigrations,
+      savedObjectValidations,
+    } = await coreSetup.legacy.uiExports;
+
+    const adminClient = await coreSetup.elasticsearch.adminClient$.pipe(first()).toPromise();
+
+    const kibanaConfig = await this.coreContext.configService
+      .atPath<KibanaConfigType>('kibana')
+      .pipe(first())
+      .toPromise();
+
+    const savedObjectsConfig = await this.coreContext.configService
+      .atPath<SavedObjectsConfigType>('migrations')
+      .pipe(first())
+      .toPromise();
+
+    this.migrator = new KibanaMigrator({
+      savedObjectSchemas,
+      savedObjectMappings,
+      savedObjectMigrations,
+      savedObjectValidations,
+      logger: this.coreContext.logger.get('migrations'),
+      kibanaVersion: this.coreContext.env.packageInfo.version,
+      config: coreSetup.legacy.pluginExtendedConfig,
+      savedObjectsConfig,
+      kibanaConfig,
+      callCluster: retryCallCluster(adminClient.callAsInternalUser),
+    });
+
+    return ({} as any) as Promise<SavedObjectsServiceSetup>;
+  }
+
+  public async start(core: SavedObjectsStartDeps): Promise<SavedObjectsServiceStart> {
+    this.logger.debug('Starting SavedObjects service');
+
+    /**
+     * Note: We want to ensure that migrations have completed before
+     * continuing with further Core startup steps that might use SavedObjects
+     * such as running the legacy server, legacy plugins and allowing incoming
+     * HTTP requests.
+     *
+     * However, our build system optimize step and some tests depend on the
+     * HTTP server running without an Elasticsearch server being available.
+     * So, when the `migrations.skip` is true, we skip migrations altogether.
+     */
+    const cliArgs = this.coreContext.env.cliArgs;
+    const savedObjectsConfig = await this.coreContext.configService
+      .atPath<SavedObjectsConfigType>('migrations')
+      .pipe(first())
+      .toPromise();
+    const skipMigrations = cliArgs.optimize || savedObjectsConfig.skip;
+    await this.migrator!.runMigrations(skipMigrations);
+
+    return { migrator: this.migrator! };
+  }
+
+  public async stop() {}
+}
diff --git a/src/core/server/saved_objects/schema/schema.ts b/src/core/server/saved_objects/schema/schema.ts
index 09676fb5040124..06d29bf7dcf326 100644
--- a/src/core/server/saved_objects/schema/schema.ts
+++ b/src/core/server/saved_objects/schema/schema.ts
@@ -26,10 +26,12 @@ interface SavedObjectsSchemaTypeDefinition {
   convertToAliasScript?: string;
 }
 
+/** @internal */
 export interface SavedObjectsSchemaDefinition {
   [key: string]: SavedObjectsSchemaTypeDefinition;
 }
 
+/** @internal */
 export class SavedObjectsSchema {
   private readonly definition?: SavedObjectsSchemaDefinition;
   constructor(schemaDefinition?: SavedObjectsSchemaDefinition) {
diff --git a/src/core/server/saved_objects/serialization/index.ts b/src/core/server/saved_objects/serialization/index.ts
index bd875db2001f4e..217ffe7129e94e 100644
--- a/src/core/server/saved_objects/serialization/index.ts
+++ b/src/core/server/saved_objects/serialization/index.ts
@@ -77,6 +77,7 @@ function assertNonEmptyString(value: string, name: string) {
   }
 }
 
+/** @internal */
 export class SavedObjectsSerializer {
   private readonly schema: SavedObjectsSchema;
 
diff --git a/src/core/server/saved_objects/service/index.ts b/src/core/server/saved_objects/service/index.ts
index 386539e755d9a7..dbf35ff4e134d7 100644
--- a/src/core/server/saved_objects/service/index.ts
+++ b/src/core/server/saved_objects/service/index.ts
@@ -26,9 +26,10 @@ import { SavedObjectsSchema } from '../schema';
 import { SavedObjectsResolveImportErrorsOptions } from '../import/types';
 
 /**
- * @public
+ * @internal
+ * @deprecated
  */
-export interface SavedObjectsService<Request = any> {
+export interface SavedObjectsLegacyService<Request = any> {
   // ATTENTION: these types are incomplete
   addScopedSavedObjectsClientWrapperFactory: ScopedSavedObjectsClientProvider<
     Request
@@ -55,6 +56,7 @@ export {
   SavedObjectsClientWrapperFactory,
   SavedObjectsClientWrapperOptions,
   SavedObjectsErrorHelpers,
+  SavedObjectsCacheIndexPatterns,
 } from './lib';
 
 export * from './saved_objects_client';
diff --git a/src/core/server/saved_objects/service/lib/cache_index_patterns.test.ts b/src/core/server/saved_objects/service/lib/cache_index_patterns.test.ts
new file mode 100644
index 00000000000000..e3aeca42d1cf07
--- /dev/null
+++ b/src/core/server/saved_objects/service/lib/cache_index_patterns.test.ts
@@ -0,0 +1,108 @@
+/*
+ * 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 { SavedObjectsCacheIndexPatterns } from './cache_index_patterns';
+
+const mockGetFieldsForWildcard = jest.fn();
+const mockIndexPatternsService: jest.Mock = jest.fn().mockImplementation(() => ({
+  getFieldsForWildcard: mockGetFieldsForWildcard,
+  getFieldsForTimePattern: jest.fn(),
+}));
+
+describe('SavedObjectsRepository', () => {
+  let cacheIndexPatterns: SavedObjectsCacheIndexPatterns;
+
+  const fields = [
+    {
+      aggregatable: true,
+      name: 'config.type',
+      searchable: true,
+      type: 'string',
+    },
+    {
+      aggregatable: true,
+      name: 'foo.type',
+      searchable: true,
+      type: 'string',
+    },
+    {
+      aggregatable: true,
+      name: 'bar.type',
+      searchable: true,
+      type: 'string',
+    },
+    {
+      aggregatable: true,
+      name: 'baz.type',
+      searchable: true,
+      type: 'string',
+    },
+    {
+      aggregatable: true,
+      name: 'dashboard.otherField',
+      searchable: true,
+      type: 'string',
+    },
+    {
+      aggregatable: true,
+      name: 'hiddenType.someField',
+      searchable: true,
+      type: 'string',
+    },
+  ];
+
+  beforeEach(() => {
+    cacheIndexPatterns = new SavedObjectsCacheIndexPatterns();
+    jest.clearAllMocks();
+  });
+
+  it('setIndexPatterns should return an error object when indexPatternsService is undefined', async () => {
+    try {
+      await cacheIndexPatterns.setIndexPatterns('test-index');
+    } catch (error) {
+      expect(error.message).toMatch('indexPatternsService is not defined');
+    }
+  });
+
+  it('setIndexPatterns should return an error object if getFieldsForWildcard is not defined', async () => {
+    mockGetFieldsForWildcard.mockImplementation(() => {
+      throw new Error('something happen');
+    });
+    try {
+      cacheIndexPatterns.setIndexPatternsService(new mockIndexPatternsService());
+      await cacheIndexPatterns.setIndexPatterns('test-index');
+    } catch (error) {
+      expect(error.message).toMatch('Index Pattern Error - something happen');
+    }
+  });
+
+  it('setIndexPatterns should return empty array when getFieldsForWildcard is returning null or undefined', async () => {
+    mockGetFieldsForWildcard.mockImplementation(() => null);
+    cacheIndexPatterns.setIndexPatternsService(new mockIndexPatternsService());
+    await cacheIndexPatterns.setIndexPatterns('test-index');
+    expect(cacheIndexPatterns.getIndexPatterns()).toEqual(undefined);
+  });
+
+  it('setIndexPatterns should return index pattern when getFieldsForWildcard is returning fields', async () => {
+    mockGetFieldsForWildcard.mockImplementation(() => fields);
+    cacheIndexPatterns.setIndexPatternsService(new mockIndexPatternsService());
+    await cacheIndexPatterns.setIndexPatterns('test-index');
+    expect(cacheIndexPatterns.getIndexPatterns()).toEqual({ fields, title: 'test-index' });
+  });
+});
diff --git a/src/core/server/saved_objects/service/lib/cache_index_patterns.ts b/src/core/server/saved_objects/service/lib/cache_index_patterns.ts
new file mode 100644
index 00000000000000..e96cf996f504c3
--- /dev/null
+++ b/src/core/server/saved_objects/service/lib/cache_index_patterns.ts
@@ -0,0 +1,82 @@
+/*
+ * 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 { FieldDescriptor } from 'src/legacy/server/index_patterns/service/index_patterns_service';
+import { IndexPatternsService } from 'src/legacy/server/index_patterns';
+
+export interface SavedObjectsIndexPatternField {
+  name: string;
+  type: string;
+  aggregatable: boolean;
+  searchable: boolean;
+}
+
+export interface SavedObjectsIndexPattern {
+  fields: SavedObjectsIndexPatternField[];
+  title: string;
+}
+
+export class SavedObjectsCacheIndexPatterns {
+  private _indexPatterns: SavedObjectsIndexPattern | undefined = undefined;
+  private _indexPatternsService: IndexPatternsService | undefined = undefined;
+
+  public setIndexPatternsService(indexPatternsService: IndexPatternsService) {
+    this._indexPatternsService = indexPatternsService;
+  }
+
+  public getIndexPatternsService() {
+    return this._indexPatternsService;
+  }
+
+  public getIndexPatterns(): SavedObjectsIndexPattern | undefined {
+    return this._indexPatterns;
+  }
+
+  public async setIndexPatterns(index: string) {
+    await this._getIndexPattern(index);
+  }
+
+  private async _getIndexPattern(index: string) {
+    try {
+      if (this._indexPatternsService == null) {
+        throw new TypeError('indexPatternsService is not defined');
+      }
+      const fieldsDescriptor: FieldDescriptor[] = await this._indexPatternsService.getFieldsForWildcard(
+        {
+          pattern: index,
+        }
+      );
+
+      this._indexPatterns =
+        fieldsDescriptor && Array.isArray(fieldsDescriptor) && fieldsDescriptor.length > 0
+          ? {
+              fields: fieldsDescriptor.map(field => ({
+                aggregatable: field.aggregatable,
+                name: field.name,
+                searchable: field.searchable,
+                type: field.type,
+              })),
+              title: index,
+            }
+          : undefined;
+    } catch (err) {
+      throw new Error(`Index Pattern Error - ${err.message}`);
+    }
+  }
+}
diff --git a/src/core/server/saved_objects/service/lib/filter_utils.test.ts b/src/core/server/saved_objects/service/lib/filter_utils.test.ts
new file mode 100644
index 00000000000000..73a0804512ed10
--- /dev/null
+++ b/src/core/server/saved_objects/service/lib/filter_utils.test.ts
@@ -0,0 +1,457 @@
+/*
+ * 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 { fromKueryExpression } from '@kbn/es-query';
+
+import {
+  validateFilterKueryNode,
+  getSavedObjectTypeIndexPatterns,
+  validateConvertFilterToKueryNode,
+} from './filter_utils';
+import { SavedObjectsIndexPattern } from './cache_index_patterns';
+
+const mockIndexPatterns: SavedObjectsIndexPattern = {
+  fields: [
+    {
+      name: 'updatedAt',
+      type: 'date',
+      aggregatable: true,
+      searchable: true,
+    },
+    {
+      name: 'foo.title',
+      type: 'text',
+      aggregatable: true,
+      searchable: true,
+    },
+    {
+      name: 'foo.description',
+      type: 'text',
+      aggregatable: true,
+      searchable: true,
+    },
+    {
+      name: 'foo.bytes',
+      type: 'number',
+      aggregatable: true,
+      searchable: true,
+    },
+    {
+      name: 'bar.foo',
+      type: 'text',
+      aggregatable: true,
+      searchable: true,
+    },
+    {
+      name: 'bar.description',
+      type: 'text',
+      aggregatable: true,
+      searchable: true,
+    },
+    {
+      name: 'hiddentype.description',
+      type: 'text',
+      aggregatable: true,
+      searchable: true,
+    },
+  ],
+  title: 'mock',
+};
+
+describe('Filter Utils', () => {
+  describe('#validateConvertFilterToKueryNode', () => {
+    test('Validate a simple filter', () => {
+      expect(
+        validateConvertFilterToKueryNode(['foo'], 'foo.attributes.title: "best"', mockIndexPatterns)
+      ).toEqual(fromKueryExpression('foo.title: "best"'));
+    });
+    test('Assemble filter kuery node saved object attributes with one saved object type', () => {
+      expect(
+        validateConvertFilterToKueryNode(
+          ['foo'],
+          'foo.updatedAt: 5678654567 and foo.attributes.bytes > 1000 and foo.attributes.bytes < 8000 and foo.attributes.title: "best" and (foo.attributes.description: t* or foo.attributes.description :*)',
+          mockIndexPatterns
+        )
+      ).toEqual(
+        fromKueryExpression(
+          '(type: foo and updatedAt: 5678654567) and foo.bytes > 1000 and foo.bytes < 8000 and foo.title: "best" and (foo.description: t* or foo.description :*)'
+        )
+      );
+    });
+
+    test('Assemble filter with one type kuery node saved object attributes with multiple saved object type', () => {
+      expect(
+        validateConvertFilterToKueryNode(
+          ['foo', 'bar'],
+          'foo.updatedAt: 5678654567 and foo.attributes.bytes > 1000 and foo.attributes.bytes < 8000 and foo.attributes.title: "best" and (foo.attributes.description: t* or foo.attributes.description :*)',
+          mockIndexPatterns
+        )
+      ).toEqual(
+        fromKueryExpression(
+          '(type: foo and updatedAt: 5678654567) and foo.bytes > 1000 and foo.bytes < 8000 and foo.title: "best" and (foo.description: t* or foo.description :*)'
+        )
+      );
+    });
+
+    test('Assemble filter with two types kuery node saved object attributes with multiple saved object type', () => {
+      expect(
+        validateConvertFilterToKueryNode(
+          ['foo', 'bar'],
+          '(bar.updatedAt: 5678654567 OR foo.updatedAt: 5678654567) and foo.attributes.bytes > 1000 and foo.attributes.bytes < 8000 and foo.attributes.title: "best" and (foo.attributes.description: t* or bar.attributes.description :*)',
+          mockIndexPatterns
+        )
+      ).toEqual(
+        fromKueryExpression(
+          '((type: bar and updatedAt: 5678654567) or (type: foo and updatedAt: 5678654567)) and foo.bytes > 1000 and foo.bytes < 8000 and foo.title: "best" and (foo.description: t* or bar.description :*)'
+        )
+      );
+    });
+
+    test('Lets make sure that we are throwing an exception if we get an error', () => {
+      expect(() => {
+        validateConvertFilterToKueryNode(
+          ['foo', 'bar'],
+          'updatedAt: 5678654567 and foo.attributes.bytes > 1000 and foo.attributes.bytes < 8000 and foo.attributes.title: "best" and (foo.attributes.description: t* or foo.attributes.description :*)',
+          mockIndexPatterns
+        );
+      }).toThrowErrorMatchingInlineSnapshot(
+        `"This key 'updatedAt' need to be wrapped by a saved object type like foo,bar: Bad Request"`
+      );
+    });
+
+    test('Lets make sure that we are throwing an exception if we are using hiddentype with types', () => {
+      expect(() => {
+        validateConvertFilterToKueryNode([], 'hiddentype.title: "title"', mockIndexPatterns);
+      }).toThrowErrorMatchingInlineSnapshot(`"This type hiddentype is not allowed: Bad Request"`);
+    });
+  });
+
+  describe('#validateFilterKueryNode', () => {
+    test('Validate filter query through KueryNode - happy path', () => {
+      const validationObject = validateFilterKueryNode(
+        fromKueryExpression(
+          'foo.updatedAt: 5678654567 and foo.attributes.bytes > 1000 and foo.attributes.bytes < 8000 and foo.attributes.title: "best" and (foo.attributes.description: t* or foo.attributes.description :*)'
+        ),
+        ['foo'],
+        getSavedObjectTypeIndexPatterns(['foo'], mockIndexPatterns)
+      );
+
+      expect(validationObject).toEqual([
+        {
+          astPath: 'arguments.0',
+          error: null,
+          isSavedObjectAttr: true,
+          key: 'foo.updatedAt',
+          type: 'foo',
+        },
+        {
+          astPath: 'arguments.1.arguments.0',
+          error: null,
+          isSavedObjectAttr: false,
+          key: 'foo.attributes.bytes',
+          type: 'foo',
+        },
+        {
+          astPath: 'arguments.1.arguments.1.arguments.0',
+          error: null,
+          isSavedObjectAttr: false,
+          key: 'foo.attributes.bytes',
+          type: 'foo',
+        },
+        {
+          astPath: 'arguments.1.arguments.1.arguments.1.arguments.0',
+          error: null,
+          isSavedObjectAttr: false,
+          key: 'foo.attributes.title',
+          type: 'foo',
+        },
+        {
+          astPath: 'arguments.1.arguments.1.arguments.1.arguments.1.arguments.0',
+          error: null,
+          isSavedObjectAttr: false,
+          key: 'foo.attributes.description',
+          type: 'foo',
+        },
+        {
+          astPath: 'arguments.1.arguments.1.arguments.1.arguments.1.arguments.1',
+          error: null,
+          isSavedObjectAttr: false,
+          key: 'foo.attributes.description',
+          type: 'foo',
+        },
+      ]);
+    });
+
+    test('Return Error if key is not wrapper by a saved object type', () => {
+      const validationObject = validateFilterKueryNode(
+        fromKueryExpression(
+          'updatedAt: 5678654567 and foo.attributes.bytes > 1000 and foo.attributes.bytes < 8000 and foo.attributes.title: "best" and (foo.attributes.description: t* or foo.attributes.description :*)'
+        ),
+        ['foo'],
+        getSavedObjectTypeIndexPatterns(['foo'], mockIndexPatterns)
+      );
+
+      expect(validationObject).toEqual([
+        {
+          astPath: 'arguments.0',
+          error: "This key 'updatedAt' need to be wrapped by a saved object type like foo",
+          isSavedObjectAttr: true,
+          key: 'updatedAt',
+          type: null,
+        },
+        {
+          astPath: 'arguments.1.arguments.0',
+          error: null,
+          isSavedObjectAttr: false,
+          key: 'foo.attributes.bytes',
+          type: 'foo',
+        },
+        {
+          astPath: 'arguments.1.arguments.1.arguments.0',
+          error: null,
+          isSavedObjectAttr: false,
+          key: 'foo.attributes.bytes',
+          type: 'foo',
+        },
+        {
+          astPath: 'arguments.1.arguments.1.arguments.1.arguments.0',
+          error: null,
+          isSavedObjectAttr: false,
+          key: 'foo.attributes.title',
+          type: 'foo',
+        },
+        {
+          astPath: 'arguments.1.arguments.1.arguments.1.arguments.1.arguments.0',
+          error: null,
+          isSavedObjectAttr: false,
+          key: 'foo.attributes.description',
+          type: 'foo',
+        },
+        {
+          astPath: 'arguments.1.arguments.1.arguments.1.arguments.1.arguments.1',
+          error: null,
+          isSavedObjectAttr: false,
+          key: 'foo.attributes.description',
+          type: 'foo',
+        },
+      ]);
+    });
+
+    test('Return Error if key of a saved object type is not wrapped with attributes', () => {
+      const validationObject = validateFilterKueryNode(
+        fromKueryExpression(
+          'foo.updatedAt: 5678654567 and foo.attributes.bytes > 1000 and foo.bytes < 8000 and foo.attributes.title: "best" and (foo.attributes.description: t* or foo.description :*)'
+        ),
+        ['foo'],
+        getSavedObjectTypeIndexPatterns(['foo'], mockIndexPatterns)
+      );
+
+      expect(validationObject).toEqual([
+        {
+          astPath: 'arguments.0',
+          error: null,
+          isSavedObjectAttr: true,
+          key: 'foo.updatedAt',
+          type: 'foo',
+        },
+        {
+          astPath: 'arguments.1.arguments.0',
+          error: null,
+          isSavedObjectAttr: false,
+          key: 'foo.attributes.bytes',
+          type: 'foo',
+        },
+        {
+          astPath: 'arguments.1.arguments.1.arguments.0',
+          error:
+            "This key 'foo.bytes' does NOT match the filter proposition SavedObjectType.attributes.key",
+          isSavedObjectAttr: false,
+          key: 'foo.bytes',
+          type: 'foo',
+        },
+        {
+          astPath: 'arguments.1.arguments.1.arguments.1.arguments.0',
+          error: null,
+          isSavedObjectAttr: false,
+          key: 'foo.attributes.title',
+          type: 'foo',
+        },
+        {
+          astPath: 'arguments.1.arguments.1.arguments.1.arguments.1.arguments.0',
+          error: null,
+          isSavedObjectAttr: false,
+          key: 'foo.attributes.description',
+          type: 'foo',
+        },
+        {
+          astPath: 'arguments.1.arguments.1.arguments.1.arguments.1.arguments.1',
+          error:
+            "This key 'foo.description' does NOT match the filter proposition SavedObjectType.attributes.key",
+          isSavedObjectAttr: false,
+          key: 'foo.description',
+          type: 'foo',
+        },
+      ]);
+    });
+
+    test('Return Error if filter is not using an allowed type', () => {
+      const validationObject = validateFilterKueryNode(
+        fromKueryExpression(
+          'bar.updatedAt: 5678654567 and foo.attributes.bytes > 1000 and foo.attributes.bytes < 8000 and foo.attributes.title: "best" and (foo.attributes.description: t* or foo.attributes.description :*)'
+        ),
+        ['foo'],
+        getSavedObjectTypeIndexPatterns(['foo'], mockIndexPatterns)
+      );
+
+      expect(validationObject).toEqual([
+        {
+          astPath: 'arguments.0',
+          error: 'This type bar is not allowed',
+          isSavedObjectAttr: true,
+          key: 'bar.updatedAt',
+          type: 'bar',
+        },
+        {
+          astPath: 'arguments.1.arguments.0',
+          error: null,
+          isSavedObjectAttr: false,
+          key: 'foo.attributes.bytes',
+          type: 'foo',
+        },
+        {
+          astPath: 'arguments.1.arguments.1.arguments.0',
+          error: null,
+          isSavedObjectAttr: false,
+          key: 'foo.attributes.bytes',
+          type: 'foo',
+        },
+        {
+          astPath: 'arguments.1.arguments.1.arguments.1.arguments.0',
+          error: null,
+          isSavedObjectAttr: false,
+          key: 'foo.attributes.title',
+          type: 'foo',
+        },
+        {
+          astPath: 'arguments.1.arguments.1.arguments.1.arguments.1.arguments.0',
+          error: null,
+          isSavedObjectAttr: false,
+          key: 'foo.attributes.description',
+          type: 'foo',
+        },
+        {
+          astPath: 'arguments.1.arguments.1.arguments.1.arguments.1.arguments.1',
+          error: null,
+          isSavedObjectAttr: false,
+          key: 'foo.attributes.description',
+          type: 'foo',
+        },
+      ]);
+    });
+
+    test('Return Error if filter is using an non-existing key in the index patterns of the saved object type', () => {
+      const validationObject = validateFilterKueryNode(
+        fromKueryExpression(
+          'foo.updatedAt33: 5678654567 and foo.attributes.bytes > 1000 and foo.attributes.bytes < 8000 and foo.attributes.header: "best" and (foo.attributes.description: t* or foo.attributes.description :*)'
+        ),
+        ['foo'],
+        getSavedObjectTypeIndexPatterns(['foo'], mockIndexPatterns)
+      );
+
+      expect(validationObject).toEqual([
+        {
+          astPath: 'arguments.0',
+          error: "This key 'foo.updatedAt33' does NOT exist in foo saved object index patterns",
+          isSavedObjectAttr: false,
+          key: 'foo.updatedAt33',
+          type: 'foo',
+        },
+        {
+          astPath: 'arguments.1.arguments.0',
+          error: null,
+          isSavedObjectAttr: false,
+          key: 'foo.attributes.bytes',
+          type: 'foo',
+        },
+        {
+          astPath: 'arguments.1.arguments.1.arguments.0',
+          error: null,
+          isSavedObjectAttr: false,
+          key: 'foo.attributes.bytes',
+          type: 'foo',
+        },
+        {
+          astPath: 'arguments.1.arguments.1.arguments.1.arguments.0',
+          error:
+            "This key 'foo.attributes.header' does NOT exist in foo saved object index patterns",
+          isSavedObjectAttr: false,
+          key: 'foo.attributes.header',
+          type: 'foo',
+        },
+        {
+          astPath: 'arguments.1.arguments.1.arguments.1.arguments.1.arguments.0',
+          error: null,
+          isSavedObjectAttr: false,
+          key: 'foo.attributes.description',
+          type: 'foo',
+        },
+        {
+          astPath: 'arguments.1.arguments.1.arguments.1.arguments.1.arguments.1',
+          error: null,
+          isSavedObjectAttr: false,
+          key: 'foo.attributes.description',
+          type: 'foo',
+        },
+      ]);
+    });
+  });
+
+  describe('#getSavedObjectTypeIndexPatterns', () => {
+    test('Get index patterns related to your type', () => {
+      const indexPatternsFilterByType = getSavedObjectTypeIndexPatterns(['foo'], mockIndexPatterns);
+
+      expect(indexPatternsFilterByType).toEqual([
+        {
+          name: 'updatedAt',
+          type: 'date',
+          aggregatable: true,
+          searchable: true,
+        },
+        {
+          name: 'foo.title',
+          type: 'text',
+          aggregatable: true,
+          searchable: true,
+        },
+        {
+          name: 'foo.description',
+          type: 'text',
+          aggregatable: true,
+          searchable: true,
+        },
+        {
+          name: 'foo.bytes',
+          type: 'number',
+          aggregatable: true,
+          searchable: true,
+        },
+      ]);
+    });
+  });
+});
diff --git a/src/core/server/saved_objects/service/lib/filter_utils.ts b/src/core/server/saved_objects/service/lib/filter_utils.ts
new file mode 100644
index 00000000000000..2397971e66966f
--- /dev/null
+++ b/src/core/server/saved_objects/service/lib/filter_utils.ts
@@ -0,0 +1,190 @@
+/*
+ * 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 { fromKueryExpression, KueryNode, nodeTypes } from '@kbn/es-query';
+import { get, set } from 'lodash';
+
+import { SavedObjectsIndexPattern, SavedObjectsIndexPatternField } from './cache_index_patterns';
+import { SavedObjectsErrorHelpers } from './errors';
+
+export const validateConvertFilterToKueryNode = (
+  types: string[],
+  filter: string,
+  indexPattern: SavedObjectsIndexPattern | undefined
+): KueryNode => {
+  if (filter && filter.length > 0 && indexPattern) {
+    const filterKueryNode = fromKueryExpression(filter);
+
+    const typeIndexPatterns = getSavedObjectTypeIndexPatterns(types, indexPattern);
+    const validationFilterKuery = validateFilterKueryNode(
+      filterKueryNode,
+      types,
+      typeIndexPatterns,
+      filterKueryNode.type === 'function' && ['is', 'range'].includes(filterKueryNode.function)
+    );
+
+    if (validationFilterKuery.length === 0) {
+      throw SavedObjectsErrorHelpers.createBadRequestError(
+        'If we have a filter options defined, we should always have validationFilterKuery defined too'
+      );
+    }
+
+    if (validationFilterKuery.some(obj => obj.error != null)) {
+      throw SavedObjectsErrorHelpers.createBadRequestError(
+        validationFilterKuery
+          .filter(obj => obj.error != null)
+          .map(obj => obj.error)
+          .join('\n')
+      );
+    }
+
+    validationFilterKuery.forEach(item => {
+      const path: string[] = item.astPath.length === 0 ? [] : item.astPath.split('.');
+      const existingKueryNode: KueryNode =
+        path.length === 0 ? filterKueryNode : get(filterKueryNode, path);
+      if (item.isSavedObjectAttr) {
+        existingKueryNode.arguments[0].value = existingKueryNode.arguments[0].value.split('.')[1];
+        const itemType = types.filter(t => t === item.type);
+        if (itemType.length === 1) {
+          set(
+            filterKueryNode,
+            path,
+            nodeTypes.function.buildNode('and', [
+              nodeTypes.function.buildNode('is', 'type', itemType[0]),
+              existingKueryNode,
+            ])
+          );
+        }
+      } else {
+        existingKueryNode.arguments[0].value = existingKueryNode.arguments[0].value.replace(
+          '.attributes',
+          ''
+        );
+        set(filterKueryNode, path, existingKueryNode);
+      }
+    });
+    return filterKueryNode;
+  }
+  return null;
+};
+
+export const getSavedObjectTypeIndexPatterns = (
+  types: string[],
+  indexPattern: SavedObjectsIndexPattern | undefined
+): SavedObjectsIndexPatternField[] => {
+  return indexPattern != null
+    ? indexPattern.fields.filter(
+        ip =>
+          !ip.name.includes('.') || (ip.name.includes('.') && types.includes(ip.name.split('.')[0]))
+      )
+    : [];
+};
+
+interface ValidateFilterKueryNode {
+  astPath: string;
+  error: string;
+  isSavedObjectAttr: boolean;
+  key: string;
+  type: string | null;
+}
+
+export const validateFilterKueryNode = (
+  astFilter: KueryNode,
+  types: string[],
+  typeIndexPatterns: SavedObjectsIndexPatternField[],
+  storeValue: boolean = false,
+  path: string = 'arguments'
+): ValidateFilterKueryNode[] => {
+  return astFilter.arguments.reduce((kueryNode: string[], ast: KueryNode, index: number) => {
+    if (ast.arguments) {
+      const myPath = `${path}.${index}`;
+      return [
+        ...kueryNode,
+        ...validateFilterKueryNode(
+          ast,
+          types,
+          typeIndexPatterns,
+          ast.type === 'function' && ['is', 'range'].includes(ast.function),
+          `${myPath}.arguments`
+        ),
+      ];
+    }
+    if (storeValue && index === 0) {
+      const splitPath = path.split('.');
+      return [
+        ...kueryNode,
+        {
+          astPath: splitPath.slice(0, splitPath.length - 1).join('.'),
+          error: hasFilterKeyError(ast.value, types, typeIndexPatterns),
+          isSavedObjectAttr: isSavedObjectAttr(ast.value, typeIndexPatterns),
+          key: ast.value,
+          type: getType(ast.value),
+        },
+      ];
+    }
+    return kueryNode;
+  }, []);
+};
+
+const getType = (key: string) => (key.includes('.') ? key.split('.')[0] : null);
+
+export const isSavedObjectAttr = (
+  key: string,
+  typeIndexPatterns: SavedObjectsIndexPatternField[]
+) => {
+  const splitKey = key.split('.');
+  if (splitKey.length === 1 && typeIndexPatterns.some(tip => tip.name === splitKey[0])) {
+    return true;
+  } else if (splitKey.length > 1 && typeIndexPatterns.some(tip => tip.name === splitKey[1])) {
+    return true;
+  }
+  return false;
+};
+
+export const hasFilterKeyError = (
+  key: string,
+  types: string[],
+  typeIndexPatterns: SavedObjectsIndexPatternField[]
+): string | null => {
+  if (!key.includes('.')) {
+    return `This key '${key}' need to be wrapped by a saved object type like ${types.join()}`;
+  } else if (key.includes('.')) {
+    const keySplit = key.split('.');
+    if (keySplit.length <= 1 || !types.includes(keySplit[0])) {
+      return `This type ${keySplit[0]} is not allowed`;
+    }
+    if (
+      (keySplit.length === 2 && typeIndexPatterns.some(tip => tip.name === key)) ||
+      (keySplit.length > 2 && types.includes(keySplit[0]) && keySplit[1] !== 'attributes')
+    ) {
+      return `This key '${key}' does NOT match the filter proposition SavedObjectType.attributes.key`;
+    }
+    if (
+      (keySplit.length === 2 && !typeIndexPatterns.some(tip => tip.name === keySplit[1])) ||
+      (keySplit.length > 2 &&
+        !typeIndexPatterns.some(
+          tip =>
+            tip.name === [...keySplit.slice(0, 1), ...keySplit.slice(2, keySplit.length)].join('.')
+        ))
+    ) {
+      return `This key '${key}' does NOT exist in ${types.join()} saved object index patterns`;
+    }
+  }
+  return null;
+};
diff --git a/src/core/server/saved_objects/service/lib/index.ts b/src/core/server/saved_objects/service/lib/index.ts
index d987737c2ffa09..be78fdde762106 100644
--- a/src/core/server/saved_objects/service/lib/index.ts
+++ b/src/core/server/saved_objects/service/lib/index.ts
@@ -26,3 +26,5 @@ export {
 } from './scoped_client_provider';
 
 export { SavedObjectsErrorHelpers } from './errors';
+
+export { SavedObjectsCacheIndexPatterns } from './cache_index_patterns';
diff --git a/src/core/server/saved_objects/service/lib/repository.test.js b/src/core/server/saved_objects/service/lib/repository.test.js
index 5a2e6a617fbb5d..bc646c8c1d2e14 100644
--- a/src/core/server/saved_objects/service/lib/repository.test.js
+++ b/src/core/server/saved_objects/service/lib/repository.test.js
@@ -18,6 +18,7 @@
  */
 
 import { delay } from 'bluebird';
+
 import { SavedObjectsRepository } from './repository';
 import * as getSearchDslNS from './search_dsl/search_dsl';
 import { SavedObjectsErrorHelpers } from './errors';
@@ -263,7 +264,7 @@ describe('SavedObjectsRepository', () => {
     onBeforeWrite = jest.fn();
     migrator = {
       migrateDocument: jest.fn(doc => doc),
-      awaitMigration: async () => ({ status: 'skipped' }),
+      runMigrations: async () => ({ status: 'skipped' }),
     };
 
     const serializer = new SavedObjectsSerializer(schema);
@@ -272,6 +273,10 @@ describe('SavedObjectsRepository', () => {
 
     savedObjectsRepository = new SavedObjectsRepository({
       index: '.kibana-test',
+      cacheIndexPatterns: {
+        setIndexPatterns: jest.fn(),
+        getIndexPatterns: () => undefined,
+      },
       mappings,
       callCluster: callAdminCluster,
       migrator,
@@ -285,7 +290,7 @@ describe('SavedObjectsRepository', () => {
     getSearchDslNS.getSearchDsl.mockReset();
   });
 
-  afterEach(() => {});
+  afterEach(() => { });
 
   describe('#create', () => {
     beforeEach(() => {
@@ -297,7 +302,7 @@ describe('SavedObjectsRepository', () => {
     });
 
     it('waits until migrations are complete before proceeding', async () => {
-      migrator.awaitMigration = jest.fn(async () =>
+      migrator.runMigrations = jest.fn(async () =>
         expect(callAdminCluster).not.toHaveBeenCalled()
       );
 
@@ -313,7 +318,7 @@ describe('SavedObjectsRepository', () => {
           }
         )
       ).resolves.toBeDefined();
-      expect(migrator.awaitMigration).toHaveBeenCalledTimes(1);
+      expect(migrator.runMigrations).toHaveBeenCalledTimes(1);
     });
 
     it('formats Elasticsearch response', async () => {
@@ -552,7 +557,7 @@ describe('SavedObjectsRepository', () => {
 
   describe('#bulkCreate', () => {
     it('waits until migrations are complete before proceeding', async () => {
-      migrator.awaitMigration = jest.fn(async () =>
+      migrator.runMigrations = jest.fn(async () =>
         expect(callAdminCluster).not.toHaveBeenCalled()
       );
       callAdminCluster.mockReturnValue({
@@ -576,7 +581,7 @@ describe('SavedObjectsRepository', () => {
         ])
       ).resolves.toBeDefined();
 
-      expect(migrator.awaitMigration).toHaveBeenCalledTimes(1);
+      expect(migrator.runMigrations).toHaveBeenCalledTimes(1);
     });
 
     it('formats Elasticsearch request', async () => {
@@ -993,12 +998,12 @@ describe('SavedObjectsRepository', () => {
       expect(onBeforeWrite).toHaveBeenCalledTimes(1);
     });
 
-    it('should return objects in the same order regardless of type', () => {});
+    it('should return objects in the same order regardless of type', () => { });
   });
 
   describe('#delete', () => {
     it('waits until migrations are complete before proceeding', async () => {
-      migrator.awaitMigration = jest.fn(async () =>
+      migrator.runMigrations = jest.fn(async () =>
         expect(callAdminCluster).not.toHaveBeenCalled()
       );
       callAdminCluster.mockReturnValue({ result: 'deleted' });
@@ -1008,7 +1013,7 @@ describe('SavedObjectsRepository', () => {
         })
       ).resolves.toBeDefined();
 
-      expect(migrator.awaitMigration).toHaveBeenCalledTimes(1);
+      expect(migrator.runMigrations).toHaveBeenCalledTimes(1);
     });
 
     it('throws notFound when ES is unable to find the document', async () => {
@@ -1114,14 +1119,14 @@ describe('SavedObjectsRepository', () => {
 
   describe('#find', () => {
     it('waits until migrations are complete before proceeding', async () => {
-      migrator.awaitMigration = jest.fn(async () =>
+      migrator.runMigrations = jest.fn(async () =>
         expect(callAdminCluster).not.toHaveBeenCalled()
       );
 
       callAdminCluster.mockReturnValue(noNamespaceSearchResults);
       await expect(savedObjectsRepository.find({ type: 'foo' })).resolves.toBeDefined();
 
-      expect(migrator.awaitMigration).toHaveBeenCalledTimes(1);
+      expect(migrator.runMigrations).toHaveBeenCalledTimes(1);
     });
 
     it('requires type to be defined', async () => {
@@ -1154,6 +1159,13 @@ describe('SavedObjectsRepository', () => {
       }
     });
 
+    it('requires index pattern to be defined if filter is defined', async () => {
+      callAdminCluster.mockReturnValue(noNamespaceSearchResults);
+      expect(savedObjectsRepository.find({ type: 'foo', filter: 'foo.type: hello' }))
+        .rejects
+        .toThrowErrorMatchingInlineSnapshot('"options.filter is missing index pattern to work correctly: Bad Request"');
+    });
+
     it('passes mappings, schema, search, defaultSearchOperator, searchFields, type, sortField, sortOrder and hasReference to getSearchDsl',
       async () => {
         callAdminCluster.mockReturnValue(namespacedSearchResults);
@@ -1169,6 +1181,8 @@ describe('SavedObjectsRepository', () => {
             type: 'foo',
             id: '1',
           },
+          indexPattern: undefined,
+          kueryNode: null,
         };
 
         await savedObjectsRepository.find(relevantOpts);
@@ -1315,7 +1329,7 @@ describe('SavedObjectsRepository', () => {
     };
 
     it('waits until migrations are complete before proceeding', async () => {
-      migrator.awaitMigration = jest.fn(async () =>
+      migrator.runMigrations = jest.fn(async () =>
         expect(callAdminCluster).not.toHaveBeenCalled()
       );
 
@@ -1324,7 +1338,7 @@ describe('SavedObjectsRepository', () => {
         savedObjectsRepository.get('index-pattern', 'logstash-*')
       ).resolves.toBeDefined();
 
-      expect(migrator.awaitMigration).toHaveBeenCalledTimes(1);
+      expect(migrator.runMigrations).toHaveBeenCalledTimes(1);
     });
 
     it('formats Elasticsearch response when there is no namespace', async () => {
@@ -1408,7 +1422,7 @@ describe('SavedObjectsRepository', () => {
 
   describe('#bulkGet', () => {
     it('waits until migrations are complete before proceeding', async () => {
-      migrator.awaitMigration = jest.fn(async () =>
+      migrator.runMigrations = jest.fn(async () =>
         expect(callAdminCluster).not.toHaveBeenCalled()
       );
 
@@ -1421,7 +1435,7 @@ describe('SavedObjectsRepository', () => {
         ])
       ).resolves.toBeDefined();
 
-      expect(migrator.awaitMigration).toHaveBeenCalledTimes(1);
+      expect(migrator.runMigrations).toHaveBeenCalledTimes(1);
     });
 
     it('prepends type to id when getting objects when there is no namespace', async () => {
@@ -1662,7 +1676,7 @@ describe('SavedObjectsRepository', () => {
     });
 
     it('waits until migrations are complete before proceeding', async () => {
-      migrator.awaitMigration = jest.fn(async () =>
+      migrator.runMigrations = jest.fn(async () =>
         expect(callAdminCluster).not.toHaveBeenCalled()
       );
 
@@ -1672,7 +1686,7 @@ describe('SavedObjectsRepository', () => {
         })
       ).resolves.toBeDefined();
 
-      expect(migrator.awaitMigration).toHaveReturnedTimes(1);
+      expect(migrator.runMigrations).toHaveReturnedTimes(1);
     });
 
     it('mockReturnValue current ES document _seq_no and _primary_term encoded as version', async () => {
diff --git a/src/core/server/saved_objects/service/lib/repository.ts b/src/core/server/saved_objects/service/lib/repository.ts
index e93d9e4047501e..aadb82486cccec 100644
--- a/src/core/server/saved_objects/service/lib/repository.ts
+++ b/src/core/server/saved_objects/service/lib/repository.ts
@@ -19,11 +19,13 @@
 
 import { omit } from 'lodash';
 import { CallCluster } from 'src/legacy/core_plugins/elasticsearch';
+
 import { getRootPropertiesObjects, IndexMapping } from '../../mappings';
 import { getSearchDsl } from './search_dsl';
 import { includedFields } from './included_fields';
 import { decorateEsError } from './decorate_es_error';
 import { SavedObjectsErrorHelpers } from './errors';
+import { SavedObjectsCacheIndexPatterns } from './cache_index_patterns';
 import { decodeRequestVersion, encodeVersion, encodeHitVersion } from '../../version';
 import { SavedObjectsSchema } from '../../schema';
 import { KibanaMigrator } from '../../migrations';
@@ -45,6 +47,7 @@ import {
   SavedObjectsFindOptions,
   SavedObjectsMigrationVersion,
 } from '../../types';
+import { validateConvertFilterToKueryNode } from './filter_utils';
 
 // BEWARE: The SavedObjectClient depends on the implementation details of the SavedObjectsRepository
 // so any breaking changes to this repository are considered breaking changes to the SavedObjectsClient.
@@ -74,6 +77,7 @@ export interface SavedObjectsRepositoryOptions {
   serializer: SavedObjectsSerializer;
   migrator: KibanaMigrator;
   allowedTypes: string[];
+  cacheIndexPatterns: SavedObjectsCacheIndexPatterns;
   onBeforeWrite?: (...args: Parameters<CallCluster>) => Promise<void>;
 }
 
@@ -91,11 +95,13 @@ export class SavedObjectsRepository {
   private _onBeforeWrite: (...args: Parameters<CallCluster>) => Promise<void>;
   private _unwrappedCallCluster: CallCluster;
   private _serializer: SavedObjectsSerializer;
+  private _cacheIndexPatterns: SavedObjectsCacheIndexPatterns;
 
   constructor(options: SavedObjectsRepositoryOptions) {
     const {
       index,
       config,
+      cacheIndexPatterns,
       mappings,
       callCluster,
       schema,
@@ -106,7 +112,7 @@ export class SavedObjectsRepository {
     } = options;
 
     // It's important that we migrate documents / mark them as up-to-date
-    // prior to writing them to the index. Otherwise, we'll cause unecessary
+    // prior to writing them to the index. Otherwise, we'll cause unnecessary
     // index migrations to run at Kibana startup, and those will probably fail
     // due to invalidly versioned documents in the index.
     //
@@ -117,6 +123,7 @@ export class SavedObjectsRepository {
     this._config = config;
     this._mappings = mappings;
     this._schema = schema;
+    this._cacheIndexPatterns = cacheIndexPatterns;
     if (allowedTypes.length === 0) {
       throw new Error('Empty or missing types for saved object repository!');
     }
@@ -125,7 +132,10 @@ export class SavedObjectsRepository {
     this._onBeforeWrite = onBeforeWrite;
 
     this._unwrappedCallCluster = async (...args: Parameters<CallCluster>) => {
-      await migrator.awaitMigration();
+      await migrator.runMigrations();
+      if (this._cacheIndexPatterns.getIndexPatterns() == null) {
+        await this._cacheIndexPatterns.setIndexPatterns(index);
+      }
       return callCluster(...args);
     };
     this._schema = schema;
@@ -404,9 +414,12 @@ export class SavedObjectsRepository {
     fields,
     namespace,
     type,
+    filter,
   }: SavedObjectsFindOptions): Promise<SavedObjectsFindResponse<T>> {
     if (!type) {
-      throw new TypeError(`options.type must be a string or an array of strings`);
+      throw SavedObjectsErrorHelpers.createBadRequestError(
+        'options.type must be a string or an array of strings'
+      );
     }
 
     const types = Array.isArray(type) ? type : [type];
@@ -421,13 +434,28 @@ export class SavedObjectsRepository {
     }
 
     if (searchFields && !Array.isArray(searchFields)) {
-      throw new TypeError('options.searchFields must be an array');
+      throw SavedObjectsErrorHelpers.createBadRequestError('options.searchFields must be an array');
     }
 
     if (fields && !Array.isArray(fields)) {
-      throw new TypeError('options.fields must be an array');
+      throw SavedObjectsErrorHelpers.createBadRequestError('options.fields must be an array');
     }
 
+    if (filter && filter !== '' && this._cacheIndexPatterns.getIndexPatterns() == null) {
+      throw SavedObjectsErrorHelpers.createBadRequestError(
+        'options.filter is missing index pattern to work correctly'
+      );
+    }
+
+    const kueryNode =
+      filter && filter !== ''
+        ? validateConvertFilterToKueryNode(
+            allowedTypes,
+            filter,
+            this._cacheIndexPatterns.getIndexPatterns()
+          )
+        : null;
+
     const esOptions = {
       index: this.getIndicesForTypes(allowedTypes),
       size: perPage,
@@ -446,6 +474,8 @@ export class SavedObjectsRepository {
           sortOrder,
           namespace,
           hasReference,
+          indexPattern: kueryNode != null ? this._cacheIndexPatterns.getIndexPatterns() : undefined,
+          kueryNode,
         }),
       },
     };
@@ -769,7 +799,7 @@ export class SavedObjectsRepository {
 
   // The internal representation of the saved object that the serializer returns
   // includes the namespace, and we use this for migrating documents. However, we don't
-  // want the namespcae to be returned from the repository, as the repository scopes each
+  // want the namespace to be returned from the repository, as the repository scopes each
   // method transparently to the specified namespace.
   private _rawToSavedObject(raw: RawDoc): SavedObject {
     const savedObject = this._serializer.rawToSavedObject(raw);
diff --git a/src/core/server/saved_objects/service/lib/search_dsl/query_params.test.ts b/src/core/server/saved_objects/service/lib/search_dsl/query_params.test.ts
index b13d86819716be..75b30580292279 100644
--- a/src/core/server/saved_objects/service/lib/search_dsl/query_params.test.ts
+++ b/src/core/server/saved_objects/service/lib/search_dsl/query_params.test.ts
@@ -18,6 +18,7 @@
  */
 
 import { schemaMock } from '../../../schema/schema.mock';
+import { SavedObjectsIndexPattern } from '../cache_index_patterns';
 import { getQueryParams } from './query_params';
 
 const SCHEMA = schemaMock.create();
@@ -61,6 +62,41 @@ const MAPPINGS = {
     },
   },
 };
+const INDEX_PATTERN: SavedObjectsIndexPattern = {
+  fields: [
+    {
+      aggregatable: true,
+      name: 'type',
+      searchable: true,
+      type: 'string',
+    },
+    {
+      aggregatable: true,
+      name: 'pending.title',
+      searchable: true,
+      type: 'string',
+    },
+    {
+      aggregatable: true,
+      name: 'saved.title',
+      searchable: true,
+      type: 'string',
+    },
+    {
+      aggregatable: true,
+      name: 'saved.obj.key1',
+      searchable: true,
+      type: 'string',
+    },
+    {
+      aggregatable: true,
+      name: 'global.name',
+      searchable: true,
+      type: 'string',
+    },
+  ],
+  title: 'test',
+};
 
 // create a type clause to be used within the "should", if a namespace is specified
 // the clause will ensure the namespace matches; otherwise, the clause will ensure
@@ -85,7 +121,7 @@ const createTypeClause = (type: string, namespace?: string) => {
 describe('searchDsl/queryParams', () => {
   describe('no parameters', () => {
     it('searches for all known types without a namespace specified', () => {
-      expect(getQueryParams(MAPPINGS, SCHEMA)).toEqual({
+      expect(getQueryParams({ mappings: MAPPINGS, schema: SCHEMA })).toEqual({
         query: {
           bool: {
             filter: [
@@ -108,7 +144,9 @@ describe('searchDsl/queryParams', () => {
 
   describe('namespace', () => {
     it('filters namespaced types for namespace, and ensures namespace agnostic types have no namespace', () => {
-      expect(getQueryParams(MAPPINGS, SCHEMA, 'foo-namespace')).toEqual({
+      expect(
+        getQueryParams({ mappings: MAPPINGS, schema: SCHEMA, namespace: 'foo-namespace' })
+      ).toEqual({
         query: {
           bool: {
             filter: [
@@ -131,7 +169,9 @@ describe('searchDsl/queryParams', () => {
 
   describe('type (singular, namespaced)', () => {
     it('includes a terms filter for type and namespace not being specified', () => {
-      expect(getQueryParams(MAPPINGS, SCHEMA, undefined, 'saved')).toEqual({
+      expect(
+        getQueryParams({ mappings: MAPPINGS, schema: SCHEMA, namespace: undefined, type: 'saved' })
+      ).toEqual({
         query: {
           bool: {
             filter: [
@@ -150,7 +190,9 @@ describe('searchDsl/queryParams', () => {
 
   describe('type (singular, global)', () => {
     it('includes a terms filter for type and namespace not being specified', () => {
-      expect(getQueryParams(MAPPINGS, SCHEMA, undefined, 'global')).toEqual({
+      expect(
+        getQueryParams({ mappings: MAPPINGS, schema: SCHEMA, namespace: undefined, type: 'global' })
+      ).toEqual({
         query: {
           bool: {
             filter: [
@@ -169,7 +211,14 @@ describe('searchDsl/queryParams', () => {
 
   describe('type (plural, namespaced and global)', () => {
     it('includes term filters for types and namespace not being specified', () => {
-      expect(getQueryParams(MAPPINGS, SCHEMA, undefined, ['saved', 'global'])).toEqual({
+      expect(
+        getQueryParams({
+          mappings: MAPPINGS,
+          schema: SCHEMA,
+          namespace: undefined,
+          type: ['saved', 'global'],
+        })
+      ).toEqual({
         query: {
           bool: {
             filter: [
@@ -188,7 +237,14 @@ describe('searchDsl/queryParams', () => {
 
   describe('namespace, type (plural, namespaced and global)', () => {
     it('includes a terms filter for type and namespace not being specified', () => {
-      expect(getQueryParams(MAPPINGS, SCHEMA, 'foo-namespace', ['saved', 'global'])).toEqual({
+      expect(
+        getQueryParams({
+          mappings: MAPPINGS,
+          schema: SCHEMA,
+          namespace: 'foo-namespace',
+          type: ['saved', 'global'],
+        })
+      ).toEqual({
         query: {
           bool: {
             filter: [
@@ -207,7 +263,15 @@ describe('searchDsl/queryParams', () => {
 
   describe('search', () => {
     it('includes a sqs query and all known types without a namespace specified', () => {
-      expect(getQueryParams(MAPPINGS, SCHEMA, undefined, undefined, 'us*')).toEqual({
+      expect(
+        getQueryParams({
+          mappings: MAPPINGS,
+          schema: SCHEMA,
+          namespace: undefined,
+          type: undefined,
+          search: 'us*',
+        })
+      ).toEqual({
         query: {
           bool: {
             filter: [
@@ -239,7 +303,15 @@ describe('searchDsl/queryParams', () => {
 
   describe('namespace, search', () => {
     it('includes a sqs query and namespaced types with the namespace and global types without a namespace', () => {
-      expect(getQueryParams(MAPPINGS, SCHEMA, 'foo-namespace', undefined, 'us*')).toEqual({
+      expect(
+        getQueryParams({
+          mappings: MAPPINGS,
+          schema: SCHEMA,
+          namespace: 'foo-namespace',
+          type: undefined,
+          search: 'us*',
+        })
+      ).toEqual({
         query: {
           bool: {
             filter: [
@@ -271,7 +343,15 @@ describe('searchDsl/queryParams', () => {
 
   describe('type (plural, namespaced and global), search', () => {
     it('includes a sqs query and types without a namespace', () => {
-      expect(getQueryParams(MAPPINGS, SCHEMA, undefined, ['saved', 'global'], 'us*')).toEqual({
+      expect(
+        getQueryParams({
+          mappings: MAPPINGS,
+          schema: SCHEMA,
+          namespace: undefined,
+          type: ['saved', 'global'],
+          search: 'us*',
+        })
+      ).toEqual({
         query: {
           bool: {
             filter: [
@@ -299,40 +379,52 @@ describe('searchDsl/queryParams', () => {
 
   describe('namespace, type (plural, namespaced and global), search', () => {
     it('includes a sqs query and namespace type with a namespace and global type without a namespace', () => {
-      expect(getQueryParams(MAPPINGS, SCHEMA, 'foo-namespace', ['saved', 'global'], 'us*')).toEqual(
-        {
-          query: {
-            bool: {
-              filter: [
-                {
-                  bool: {
-                    should: [
-                      createTypeClause('saved', 'foo-namespace'),
-                      createTypeClause('global'),
-                    ],
-                    minimum_should_match: 1,
-                  },
+      expect(
+        getQueryParams({
+          mappings: MAPPINGS,
+          schema: SCHEMA,
+          namespace: 'foo-namespace',
+          type: ['saved', 'global'],
+          search: 'us*',
+        })
+      ).toEqual({
+        query: {
+          bool: {
+            filter: [
+              {
+                bool: {
+                  should: [createTypeClause('saved', 'foo-namespace'), createTypeClause('global')],
+                  minimum_should_match: 1,
                 },
-              ],
-              must: [
-                {
-                  simple_query_string: {
-                    query: 'us*',
-                    lenient: true,
-                    fields: ['*'],
-                  },
+              },
+            ],
+            must: [
+              {
+                simple_query_string: {
+                  query: 'us*',
+                  lenient: true,
+                  fields: ['*'],
                 },
-              ],
-            },
+              },
+            ],
           },
-        }
-      );
+        },
+      });
     });
   });
 
   describe('search, searchFields', () => {
     it('includes all types for field', () => {
-      expect(getQueryParams(MAPPINGS, SCHEMA, undefined, undefined, 'y*', ['title'])).toEqual({
+      expect(
+        getQueryParams({
+          mappings: MAPPINGS,
+          schema: SCHEMA,
+          namespace: undefined,
+          type: undefined,
+          search: 'y*',
+          searchFields: ['title'],
+        })
+      ).toEqual({
         query: {
           bool: {
             filter: [
@@ -360,7 +452,16 @@ describe('searchDsl/queryParams', () => {
       });
     });
     it('supports field boosting', () => {
-      expect(getQueryParams(MAPPINGS, SCHEMA, undefined, undefined, 'y*', ['title^3'])).toEqual({
+      expect(
+        getQueryParams({
+          mappings: MAPPINGS,
+          schema: SCHEMA,
+          namespace: undefined,
+          type: undefined,
+          search: 'y*',
+          searchFields: ['title^3'],
+        })
+      ).toEqual({
         query: {
           bool: {
             filter: [
@@ -389,7 +490,14 @@ describe('searchDsl/queryParams', () => {
     });
     it('supports field and multi-field', () => {
       expect(
-        getQueryParams(MAPPINGS, SCHEMA, undefined, undefined, 'y*', ['title', 'title.raw'])
+        getQueryParams({
+          mappings: MAPPINGS,
+          schema: SCHEMA,
+          namespace: undefined,
+          type: undefined,
+          search: 'y*',
+          searchFields: ['title', 'title.raw'],
+        })
       ).toEqual({
         query: {
           bool: {
@@ -428,38 +536,52 @@ describe('searchDsl/queryParams', () => {
 
   describe('namespace, search, searchFields', () => {
     it('includes all types for field', () => {
-      expect(getQueryParams(MAPPINGS, SCHEMA, 'foo-namespace', undefined, 'y*', ['title'])).toEqual(
-        {
-          query: {
-            bool: {
-              filter: [
-                {
-                  bool: {
-                    should: [
-                      createTypeClause('pending', 'foo-namespace'),
-                      createTypeClause('saved', 'foo-namespace'),
-                      createTypeClause('global'),
-                    ],
-                    minimum_should_match: 1,
-                  },
+      expect(
+        getQueryParams({
+          mappings: MAPPINGS,
+          schema: SCHEMA,
+          namespace: 'foo-namespace',
+          type: undefined,
+          search: 'y*',
+          searchFields: ['title'],
+        })
+      ).toEqual({
+        query: {
+          bool: {
+            filter: [
+              {
+                bool: {
+                  should: [
+                    createTypeClause('pending', 'foo-namespace'),
+                    createTypeClause('saved', 'foo-namespace'),
+                    createTypeClause('global'),
+                  ],
+                  minimum_should_match: 1,
                 },
-              ],
-              must: [
-                {
-                  simple_query_string: {
-                    query: 'y*',
-                    fields: ['pending.title', 'saved.title', 'global.title'],
-                  },
+              },
+            ],
+            must: [
+              {
+                simple_query_string: {
+                  query: 'y*',
+                  fields: ['pending.title', 'saved.title', 'global.title'],
                 },
-              ],
-            },
+              },
+            ],
           },
-        }
-      );
+        },
+      });
     });
     it('supports field boosting', () => {
       expect(
-        getQueryParams(MAPPINGS, SCHEMA, 'foo-namespace', undefined, 'y*', ['title^3'])
+        getQueryParams({
+          mappings: MAPPINGS,
+          schema: SCHEMA,
+          namespace: 'foo-namespace',
+          type: undefined,
+          search: 'y*',
+          searchFields: ['title^3'],
+        })
       ).toEqual({
         query: {
           bool: {
@@ -489,7 +611,14 @@ describe('searchDsl/queryParams', () => {
     });
     it('supports field and multi-field', () => {
       expect(
-        getQueryParams(MAPPINGS, SCHEMA, 'foo-namespace', undefined, 'y*', ['title', 'title.raw'])
+        getQueryParams({
+          mappings: MAPPINGS,
+          schema: SCHEMA,
+          namespace: 'foo-namespace',
+          type: undefined,
+          search: 'y*',
+          searchFields: ['title', 'title.raw'],
+        })
       ).toEqual({
         query: {
           bool: {
@@ -529,7 +658,14 @@ describe('searchDsl/queryParams', () => {
   describe('type (plural, namespaced and global), search, searchFields', () => {
     it('includes all types for field', () => {
       expect(
-        getQueryParams(MAPPINGS, SCHEMA, undefined, ['saved', 'global'], 'y*', ['title'])
+        getQueryParams({
+          mappings: MAPPINGS,
+          schema: SCHEMA,
+          namespace: undefined,
+          type: ['saved', 'global'],
+          search: 'y*',
+          searchFields: ['title'],
+        })
       ).toEqual({
         query: {
           bool: {
@@ -555,7 +691,14 @@ describe('searchDsl/queryParams', () => {
     });
     it('supports field boosting', () => {
       expect(
-        getQueryParams(MAPPINGS, SCHEMA, undefined, ['saved', 'global'], 'y*', ['title^3'])
+        getQueryParams({
+          mappings: MAPPINGS,
+          schema: SCHEMA,
+          namespace: undefined,
+          type: ['saved', 'global'],
+          search: 'y*',
+          searchFields: ['title^3'],
+        })
       ).toEqual({
         query: {
           bool: {
@@ -581,10 +724,14 @@ describe('searchDsl/queryParams', () => {
     });
     it('supports field and multi-field', () => {
       expect(
-        getQueryParams(MAPPINGS, SCHEMA, undefined, ['saved', 'global'], 'y*', [
-          'title',
-          'title.raw',
-        ])
+        getQueryParams({
+          mappings: MAPPINGS,
+          schema: SCHEMA,
+          namespace: undefined,
+          type: ['saved', 'global'],
+          search: 'y*',
+          searchFields: ['title', 'title.raw'],
+        })
       ).toEqual({
         query: {
           bool: {
@@ -613,7 +760,14 @@ describe('searchDsl/queryParams', () => {
   describe('namespace, type (plural, namespaced and global), search, searchFields', () => {
     it('includes all types for field', () => {
       expect(
-        getQueryParams(MAPPINGS, SCHEMA, 'foo-namespace', ['saved', 'global'], 'y*', ['title'])
+        getQueryParams({
+          mappings: MAPPINGS,
+          schema: SCHEMA,
+          namespace: 'foo-namespace',
+          type: ['saved', 'global'],
+          search: 'y*',
+          searchFields: ['title'],
+        })
       ).toEqual({
         query: {
           bool: {
@@ -639,7 +793,14 @@ describe('searchDsl/queryParams', () => {
     });
     it('supports field boosting', () => {
       expect(
-        getQueryParams(MAPPINGS, SCHEMA, 'foo-namespace', ['saved', 'global'], 'y*', ['title^3'])
+        getQueryParams({
+          mappings: MAPPINGS,
+          schema: SCHEMA,
+          namespace: 'foo-namespace',
+          type: ['saved', 'global'],
+          search: 'y*',
+          searchFields: ['title^3'],
+        })
       ).toEqual({
         query: {
           bool: {
@@ -665,10 +826,14 @@ describe('searchDsl/queryParams', () => {
     });
     it('supports field and multi-field', () => {
       expect(
-        getQueryParams(MAPPINGS, SCHEMA, 'foo-namespace', ['saved', 'global'], 'y*', [
-          'title',
-          'title.raw',
-        ])
+        getQueryParams({
+          mappings: MAPPINGS,
+          schema: SCHEMA,
+          namespace: 'foo-namespace',
+          type: ['saved', 'global'],
+          search: 'y*',
+          searchFields: ['title', 'title.raw'],
+        })
       ).toEqual({
         query: {
           bool: {
@@ -697,15 +862,15 @@ describe('searchDsl/queryParams', () => {
   describe('type (plural, namespaced and global), search, defaultSearchOperator', () => {
     it('supports defaultSearchOperator', () => {
       expect(
-        getQueryParams(
-          MAPPINGS,
-          SCHEMA,
-          'foo-namespace',
-          ['saved', 'global'],
-          'foo',
-          undefined,
-          'AND'
-        )
+        getQueryParams({
+          mappings: MAPPINGS,
+          schema: SCHEMA,
+          namespace: 'foo-namespace',
+          type: ['saved', 'global'],
+          search: 'foo',
+          searchFields: undefined,
+          defaultSearchOperator: 'AND',
+        })
       ).toEqual({
         query: {
           bool: {
@@ -771,19 +936,19 @@ describe('searchDsl/queryParams', () => {
   describe('type (plural, namespaced and global), hasReference', () => {
     it('supports hasReference', () => {
       expect(
-        getQueryParams(
-          MAPPINGS,
-          SCHEMA,
-          'foo-namespace',
-          ['saved', 'global'],
-          undefined,
-          undefined,
-          'OR',
-          {
+        getQueryParams({
+          mappings: MAPPINGS,
+          schema: SCHEMA,
+          namespace: 'foo-namespace',
+          type: ['saved', 'global'],
+          search: undefined,
+          searchFields: undefined,
+          defaultSearchOperator: 'OR',
+          hasReference: {
             type: 'bar',
             id: '1',
-          }
-        )
+          },
+        })
       ).toEqual({
         query: {
           bool: {
@@ -823,4 +988,345 @@ describe('searchDsl/queryParams', () => {
       });
     });
   });
+
+  describe('type filter', () => {
+    it(' with namespace', () => {
+      expect(
+        getQueryParams({
+          mappings: MAPPINGS,
+          schema: SCHEMA,
+          namespace: 'foo-namespace',
+          kueryNode: {
+            type: 'function',
+            function: 'is',
+            arguments: [
+              { type: 'literal', value: 'global.name' },
+              { type: 'literal', value: 'GLOBAL' },
+              { type: 'literal', value: false },
+            ],
+          },
+          indexPattern: INDEX_PATTERN,
+        })
+      ).toEqual({
+        query: {
+          bool: {
+            filter: [
+              {
+                bool: {
+                  should: [
+                    {
+                      match: {
+                        'global.name': 'GLOBAL',
+                      },
+                    },
+                  ],
+                  minimum_should_match: 1,
+                },
+              },
+              {
+                bool: {
+                  should: [
+                    {
+                      bool: {
+                        must: [
+                          {
+                            term: {
+                              type: 'pending',
+                            },
+                          },
+                          {
+                            term: {
+                              namespace: 'foo-namespace',
+                            },
+                          },
+                        ],
+                      },
+                    },
+                    {
+                      bool: {
+                        must: [
+                          {
+                            term: {
+                              type: 'saved',
+                            },
+                          },
+                          {
+                            term: {
+                              namespace: 'foo-namespace',
+                            },
+                          },
+                        ],
+                      },
+                    },
+                    {
+                      bool: {
+                        must: [
+                          {
+                            term: {
+                              type: 'global',
+                            },
+                          },
+                        ],
+                        must_not: [
+                          {
+                            exists: {
+                              field: 'namespace',
+                            },
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                  minimum_should_match: 1,
+                },
+              },
+            ],
+          },
+        },
+      });
+    });
+    it(' with namespace and more complex filter', () => {
+      expect(
+        getQueryParams({
+          mappings: MAPPINGS,
+          schema: SCHEMA,
+          namespace: 'foo-namespace',
+          kueryNode: {
+            type: 'function',
+            function: 'and',
+            arguments: [
+              {
+                type: 'function',
+                function: 'is',
+                arguments: [
+                  { type: 'literal', value: 'global.name' },
+                  { type: 'literal', value: 'GLOBAL' },
+                  { type: 'literal', value: false },
+                ],
+              },
+              {
+                type: 'function',
+                function: 'not',
+                arguments: [
+                  {
+                    type: 'function',
+                    function: 'is',
+                    arguments: [
+                      { type: 'literal', value: 'saved.obj.key1' },
+                      { type: 'literal', value: 'key' },
+                      { type: 'literal', value: true },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+          indexPattern: INDEX_PATTERN,
+        })
+      ).toEqual({
+        query: {
+          bool: {
+            filter: [
+              {
+                bool: {
+                  filter: [
+                    {
+                      bool: {
+                        should: [
+                          {
+                            match: {
+                              'global.name': 'GLOBAL',
+                            },
+                          },
+                        ],
+                        minimum_should_match: 1,
+                      },
+                    },
+                    {
+                      bool: {
+                        must_not: {
+                          bool: {
+                            should: [
+                              {
+                                match_phrase: {
+                                  'saved.obj.key1': 'key',
+                                },
+                              },
+                            ],
+                            minimum_should_match: 1,
+                          },
+                        },
+                      },
+                    },
+                  ],
+                },
+              },
+              {
+                bool: {
+                  should: [
+                    {
+                      bool: {
+                        must: [
+                          {
+                            term: {
+                              type: 'pending',
+                            },
+                          },
+                          {
+                            term: {
+                              namespace: 'foo-namespace',
+                            },
+                          },
+                        ],
+                      },
+                    },
+                    {
+                      bool: {
+                        must: [
+                          {
+                            term: {
+                              type: 'saved',
+                            },
+                          },
+                          {
+                            term: {
+                              namespace: 'foo-namespace',
+                            },
+                          },
+                        ],
+                      },
+                    },
+                    {
+                      bool: {
+                        must: [
+                          {
+                            term: {
+                              type: 'global',
+                            },
+                          },
+                        ],
+                        must_not: [
+                          {
+                            exists: {
+                              field: 'namespace',
+                            },
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                  minimum_should_match: 1,
+                },
+              },
+            ],
+          },
+        },
+      });
+    });
+    it(' with search and searchFields', () => {
+      expect(
+        getQueryParams({
+          mappings: MAPPINGS,
+          schema: SCHEMA,
+          namespace: 'foo-namespace',
+          search: 'y*',
+          searchFields: ['title'],
+          kueryNode: {
+            type: 'function',
+            function: 'is',
+            arguments: [
+              { type: 'literal', value: 'global.name' },
+              { type: 'literal', value: 'GLOBAL' },
+              { type: 'literal', value: false },
+            ],
+          },
+          indexPattern: INDEX_PATTERN,
+        })
+      ).toEqual({
+        query: {
+          bool: {
+            filter: [
+              {
+                bool: {
+                  should: [
+                    {
+                      match: {
+                        'global.name': 'GLOBAL',
+                      },
+                    },
+                  ],
+                  minimum_should_match: 1,
+                },
+              },
+              {
+                bool: {
+                  should: [
+                    {
+                      bool: {
+                        must: [
+                          {
+                            term: {
+                              type: 'pending',
+                            },
+                          },
+                          {
+                            term: {
+                              namespace: 'foo-namespace',
+                            },
+                          },
+                        ],
+                      },
+                    },
+                    {
+                      bool: {
+                        must: [
+                          {
+                            term: {
+                              type: 'saved',
+                            },
+                          },
+                          {
+                            term: {
+                              namespace: 'foo-namespace',
+                            },
+                          },
+                        ],
+                      },
+                    },
+                    {
+                      bool: {
+                        must: [
+                          {
+                            term: {
+                              type: 'global',
+                            },
+                          },
+                        ],
+                        must_not: [
+                          {
+                            exists: {
+                              field: 'namespace',
+                            },
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                  minimum_should_match: 1,
+                },
+              },
+            ],
+            must: [
+              {
+                simple_query_string: {
+                  query: 'y*',
+                  fields: ['pending.title', 'saved.title', 'global.title'],
+                },
+              },
+            ],
+          },
+        },
+      });
+    });
+  });
 });
diff --git a/src/core/server/saved_objects/service/lib/search_dsl/query_params.ts b/src/core/server/saved_objects/service/lib/search_dsl/query_params.ts
index 9c145258a755ff..125b0c40af9e41 100644
--- a/src/core/server/saved_objects/service/lib/search_dsl/query_params.ts
+++ b/src/core/server/saved_objects/service/lib/search_dsl/query_params.ts
@@ -16,9 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { toElasticsearchQuery, KueryNode } from '@kbn/es-query';
 
 import { getRootPropertiesObjects, IndexMapping } from '../../../mappings';
 import { SavedObjectsSchema } from '../../../schema';
+import { SavedObjectsIndexPattern } from '../cache_index_patterns';
 
 /**
  * Gets the types based on the type. Uses mappings to support
@@ -76,25 +78,43 @@ function getClauseForType(schema: SavedObjectsSchema, namespace: string | undefi
   };
 }
 
+interface HasReferenceQueryParams {
+  type: string;
+  id: string;
+}
+
+interface QueryParams {
+  mappings: IndexMapping;
+  schema: SavedObjectsSchema;
+  namespace?: string;
+  type?: string | string[];
+  search?: string;
+  searchFields?: string[];
+  defaultSearchOperator?: string;
+  hasReference?: HasReferenceQueryParams;
+  kueryNode?: KueryNode;
+  indexPattern?: SavedObjectsIndexPattern;
+}
+
 /**
  *  Get the "query" related keys for the search body
  */
-export function getQueryParams(
-  mappings: IndexMapping,
-  schema: SavedObjectsSchema,
-  namespace?: string,
-  type?: string | string[],
-  search?: string,
-  searchFields?: string[],
-  defaultSearchOperator?: string,
-  hasReference?: {
-    type: string;
-    id: string;
-  }
-) {
+export function getQueryParams({
+  mappings,
+  schema,
+  namespace,
+  type,
+  search,
+  searchFields,
+  defaultSearchOperator,
+  hasReference,
+  kueryNode,
+  indexPattern,
+}: QueryParams) {
   const types = getTypes(mappings, type);
   const bool: any = {
     filter: [
+      ...(kueryNode != null ? [toElasticsearchQuery(kueryNode, indexPattern)] : []),
       {
         bool: {
           must: hasReference
diff --git a/src/core/server/saved_objects/service/lib/search_dsl/search_dsl.test.ts b/src/core/server/saved_objects/service/lib/search_dsl/search_dsl.test.ts
index 7bd04ca8f34947..97cab3e566d5ea 100644
--- a/src/core/server/saved_objects/service/lib/search_dsl/search_dsl.test.ts
+++ b/src/core/server/saved_objects/service/lib/search_dsl/search_dsl.test.ts
@@ -72,16 +72,16 @@ describe('getSearchDsl', () => {
 
       getSearchDsl(MAPPINGS, SCHEMA, opts);
       expect(getQueryParams).toHaveBeenCalledTimes(1);
-      expect(getQueryParams).toHaveBeenCalledWith(
-        MAPPINGS,
-        SCHEMA,
-        opts.namespace,
-        opts.type,
-        opts.search,
-        opts.searchFields,
-        opts.defaultSearchOperator,
-        opts.hasReference
-      );
+      expect(getQueryParams).toHaveBeenCalledWith({
+        mappings: MAPPINGS,
+        schema: SCHEMA,
+        namespace: opts.namespace,
+        type: opts.type,
+        search: opts.search,
+        searchFields: opts.searchFields,
+        defaultSearchOperator: opts.defaultSearchOperator,
+        hasReference: opts.hasReference,
+      });
     });
 
     it('passes (mappings, type, sortField, sortOrder) to getSortingParams', () => {
diff --git a/src/core/server/saved_objects/service/lib/search_dsl/search_dsl.ts b/src/core/server/saved_objects/service/lib/search_dsl/search_dsl.ts
index 1c2c87bca6ea72..68f60607025053 100644
--- a/src/core/server/saved_objects/service/lib/search_dsl/search_dsl.ts
+++ b/src/core/server/saved_objects/service/lib/search_dsl/search_dsl.ts
@@ -17,12 +17,14 @@
  * under the License.
  */
 
+import { KueryNode } from '@kbn/es-query';
 import Boom from 'boom';
 
 import { IndexMapping } from '../../../mappings';
 import { SavedObjectsSchema } from '../../../schema';
 import { getQueryParams } from './query_params';
 import { getSortingParams } from './sorting_params';
+import { SavedObjectsIndexPattern } from '../cache_index_patterns';
 
 interface GetSearchDslOptions {
   type: string | string[];
@@ -36,6 +38,8 @@ interface GetSearchDslOptions {
     type: string;
     id: string;
   };
+  kueryNode?: KueryNode;
+  indexPattern?: SavedObjectsIndexPattern;
 }
 
 export function getSearchDsl(
@@ -52,6 +56,8 @@ export function getSearchDsl(
     sortOrder,
     namespace,
     hasReference,
+    kueryNode,
+    indexPattern,
   } = options;
 
   if (!type) {
@@ -63,7 +69,7 @@ export function getSearchDsl(
   }
 
   return {
-    ...getQueryParams(
+    ...getQueryParams({
       mappings,
       schema,
       namespace,
@@ -71,8 +77,10 @@ export function getSearchDsl(
       search,
       searchFields,
       defaultSearchOperator,
-      hasReference
-    ),
+      hasReference,
+      kueryNode,
+      indexPattern,
+    }),
     ...getSortingParams(mappings, type, sortField, sortOrder),
   };
 }
diff --git a/src/core/server/saved_objects/types.ts b/src/core/server/saved_objects/types.ts
index a7e8f5fd4ac7ca..e7e7a4c64392a6 100644
--- a/src/core/server/saved_objects/types.ts
+++ b/src/core/server/saved_objects/types.ts
@@ -18,6 +18,10 @@
  */
 
 import { SavedObjectsClient } from './service/saved_objects_client';
+import { SavedObjectsMapping } from './mappings';
+import { MigrationDefinition } from './migrations/core/document_migrator';
+import { SavedObjectsSchemaDefinition } from './schema';
+import { PropertyValidators } from './validation';
 
 /**
  * Information about the migrations that have been applied to this SavedObject.
@@ -119,6 +123,7 @@ export interface SavedObjectsFindOptions extends SavedObjectsBaseOptions {
   searchFields?: string[];
   hasReference?: { type: string; id: string };
   defaultSearchOperator?: 'AND' | 'OR';
+  filter?: string;
 }
 
 /**
@@ -201,3 +206,15 @@ export interface SavedObjectsBaseOptions {
  * @public
  */
 export type SavedObjectsClientContract = Pick<SavedObjectsClient, keyof SavedObjectsClient>;
+
+/**
+ * @internal
+ * @deprecated
+ */
+export interface SavedObjectsLegacyUiExports {
+  unknown: [{ pluginSpec: { getId: () => unknown }; type: unknown }] | undefined;
+  savedObjectMappings: SavedObjectsMapping[];
+  savedObjectMigrations: MigrationDefinition;
+  savedObjectSchemas: SavedObjectsSchemaDefinition;
+  savedObjectValidations: PropertyValidators;
+}
diff --git a/src/core/server/server.api.md b/src/core/server/server.api.md
index 94c7f6ec9b3255..6451e2b9b7153e 100644
--- a/src/core/server/server.api.md
+++ b/src/core/server/server.api.md
@@ -10,6 +10,9 @@ import { ConfigOptions } from 'elasticsearch';
 import { DetailedPeerCertificate } from 'tls';
 import { Duration } from 'moment';
 import { IncomingHttpHeaders } from 'http';
+import { IndexPatternsService } from 'src/legacy/server/index_patterns';
+import { KibanaConfigType } from 'src/core/server/kibana_config';
+import { Logger as Logger_2 } from 'src/core/server/logging';
 import { ObjectType } from '@kbn/config-schema';
 import { Observable } from 'rxjs';
 import { PeerCertificate } from 'tls';
@@ -18,6 +21,7 @@ import { Request } from 'hapi';
 import { ResponseObject } from 'hapi';
 import { ResponseToolkit } from 'hapi';
 import { Server } from 'hapi';
+import { ShallowPromise } from '@kbn/utility-types';
 import { Stream } from 'stream';
 import { Type } from '@kbn/config-schema';
 import { TypeOf } from '@kbn/config-schema';
@@ -54,6 +58,17 @@ export interface AuthToolkit {
     authenticated: (data?: AuthResultParams) => AuthResult;
 }
 
+// @public
+export class BasePath {
+    // @internal
+    constructor(serverBasePath?: string);
+    get: (request: LegacyRequest | KibanaRequest<unknown, unknown, unknown>) => string;
+    prepend: (path: string) => string;
+    remove: (path: string) => string;
+    readonly serverBasePath: string;
+    set: (request: LegacyRequest | KibanaRequest<unknown, unknown, unknown>, requestSpecificBasePath: string) => void;
+}
+
 // Warning: (ae-forgotten-export) The symbol "BootstrapArgs" needs to be exported by the entry point index.d.ts
 // 
 // @internal (undocumented)
@@ -95,7 +110,7 @@ export class ConfigService {
 
 // @public
 export interface ContextSetup {
-    createContextContainer<TContext extends {}, THandlerReturn, THandlerParmaters extends any[] = []>(): IContextContainer<TContext, THandlerReturn, THandlerParmaters>;
+    createContextContainer<THandler extends HandlerFunction<any>>(): IContextContainer<THandler>;
 }
 
 // @internal (undocumented)
@@ -121,7 +136,7 @@ export interface CoreSetup {
         registerOnPostAuth: HttpServiceSetup['registerOnPostAuth'];
         basePath: HttpServiceSetup['basePath'];
         isTlsEnabled: HttpServiceSetup['isTlsEnabled'];
-        registerRouteHandlerContext: <T extends keyof RequestHandlerContext>(name: T, provider: RequestHandlerContextProvider<RequestHandlerContext>) => RequestHandlerContextContainer<RequestHandlerContext>;
+        registerRouteHandlerContext: <T extends keyof RequestHandlerContext>(name: T, provider: RequestHandlerContextProvider<T>) => RequestHandlerContextContainer;
         createRouter: () => IRouter;
     };
 }
@@ -205,6 +220,15 @@ export type GetAuthState = (request: KibanaRequest | LegacyRequest) => {
     state: unknown;
 };
 
+// @public
+export type HandlerContextType<T extends HandlerFunction<any>> = T extends HandlerFunction<infer U> ? U : never;
+
+// @public
+export type HandlerFunction<T extends object> = (context: T, ...args: any[]) => any;
+
+// @public
+export type HandlerParameters<T extends HandlerFunction<any>> = T extends (context: any, ...args: infer U) => any ? U : never;
+
 // @public
 export type Headers = {
     [header in KnownHeaders]?: string | string[] | undefined;
@@ -230,12 +254,7 @@ export interface HttpServerSetup {
         getAuthHeaders: GetAuthHeaders;
     };
     // (undocumented)
-    basePath: {
-        get: (request: KibanaRequest | LegacyRequest) => string;
-        set: (request: KibanaRequest | LegacyRequest, basePath: string) => void;
-        prepend: (url: string) => string;
-        remove: (url: string) => string;
-    };
+    basePath: IBasePath;
     createCookieSessionStorageFactory: <T>(cookieOptions: SessionStorageCookieOptions<T>) => Promise<SessionStorageFactory<T>>;
     isTlsEnabled: boolean;
     registerAuth: (handler: AuthenticationHandler) => void;
@@ -249,7 +268,7 @@ export interface HttpServerSetup {
 // @public (undocumented)
 export type HttpServiceSetup = Omit<HttpServerSetup, 'registerRouter'> & {
     createRouter: (path: string, plugin?: PluginOpaqueId) => IRouter;
-    registerRouteHandlerContext: <T extends keyof RequestHandlerContext>(pluginOpaqueId: PluginOpaqueId, contextName: T, provider: RequestHandlerContextProvider<RequestHandlerContext>) => RequestHandlerContextContainer<RequestHandlerContext>;
+    registerRouteHandlerContext: <T extends keyof RequestHandlerContext>(pluginOpaqueId: PluginOpaqueId, contextName: T, provider: RequestHandlerContextProvider<T>) => RequestHandlerContextContainer;
 };
 
 // @public (undocumented)
@@ -258,16 +277,16 @@ export interface HttpServiceStart {
 }
 
 // @public
-export interface IContextContainer<TContext extends {}, THandlerReturn, THandlerParameters extends any[] = []> {
-    createHandler(pluginOpaqueId: PluginOpaqueId, handler: IContextHandler<TContext, THandlerReturn, THandlerParameters>): (...rest: THandlerParameters) => THandlerReturn extends Promise<any> ? THandlerReturn : Promise<THandlerReturn>;
-    registerContext<TContextName extends keyof TContext>(pluginOpaqueId: PluginOpaqueId, contextName: TContextName, provider: IContextProvider<TContext, TContextName, THandlerParameters>): this;
-}
+export type IBasePath = Pick<BasePath, keyof BasePath>;
 
 // @public
-export type IContextHandler<TContext extends {}, TReturn, THandlerParameters extends any[] = []> = (context: TContext, ...rest: THandlerParameters) => TReturn;
+export interface IContextContainer<THandler extends HandlerFunction<any>> {
+    createHandler(pluginOpaqueId: PluginOpaqueId, handler: THandler): (...rest: HandlerParameters<THandler>) => ShallowPromise<ReturnType<THandler>>;
+    registerContext<TContextName extends keyof HandlerContextType<THandler>>(pluginOpaqueId: PluginOpaqueId, contextName: TContextName, provider: IContextProvider<THandler, TContextName>): this;
+}
 
 // @public
-export type IContextProvider<TContext extends Record<string, any>, TContextName extends keyof TContext, TProviderParameters extends any[] = []> = (context: Partial<TContext>, ...rest: TProviderParameters) => Promise<TContext[TContextName]> | TContext[TContextName];
+export type IContextProvider<THandler extends HandlerFunction<any>, TContextName extends keyof HandlerContextType<THandler>> = (context: Partial<HandlerContextType<THandler>>, ...rest: HandlerParameters<THandler>) => Promise<HandlerContextType<THandler>[TContextName]> | HandlerContextType<THandler>[TContextName];
 
 // @public
 export interface IKibanaSocket {
@@ -290,8 +309,12 @@ export interface InternalCoreSetup {
     http: HttpServiceSetup;
 }
 
-// @public (undocumented)
+// @internal (undocumented)
 export interface InternalCoreStart {
+    // Warning: (ae-forgotten-export) The symbol "SavedObjectsServiceStart" needs to be exported by the entry point index.d.ts
+    // 
+    // (undocumented)
+    savedObjects: SavedObjectsServiceStart;
 }
 
 // @public
@@ -387,6 +410,8 @@ export interface LegacyServiceSetupDeps {
 
 // @public @deprecated (undocumented)
 export interface LegacyServiceStartDeps {
+    // Warning: (ae-incompatible-release-tags) The symbol "core" is marked as @public, but its signature references "InternalCoreStart" which is marked as @internal
+    // 
     // (undocumented)
     core: InternalCoreStart & {
         plugins: PluginsServiceStart;
@@ -584,16 +609,10 @@ export interface RequestHandlerContext {
 }
 
 // @public
-export type RequestHandlerContextContainer<TContext> = IContextContainer<TContext, RequestHandlerReturn | Promise<RequestHandlerReturn>, RequestHandlerParams>;
-
-// @public
-export type RequestHandlerContextProvider<TContext> = IContextProvider<TContext, keyof TContext, RequestHandlerParams>;
+export type RequestHandlerContextContainer = IContextContainer<RequestHandler<any, any, any>>;
 
 // @public
-export type RequestHandlerParams = [KibanaRequest, KibanaResponseFactory];
-
-// @public
-export type RequestHandlerReturn = KibanaResponse;
+export type RequestHandlerContextProvider<TContextName extends keyof RequestHandlerContext> = IContextProvider<RequestHandler<any, any, any>, TContextName>;
 
 // @public
 export type ResponseError = string | Error | {
@@ -824,6 +843,8 @@ export interface SavedObjectsFindOptions extends SavedObjectsBaseOptions {
     defaultSearchOperator?: 'AND' | 'OR';
     fields?: string[];
     // (undocumented)
+    filter?: string;
+    // (undocumented)
     hasReference?: {
         type: string;
         id: string;
@@ -946,6 +967,31 @@ export interface SavedObjectsImportUnsupportedTypeError {
     type: 'unsupported_type';
 }
 
+// @internal @deprecated (undocumented)
+export interface SavedObjectsLegacyService<Request = any> {
+    // Warning: (ae-forgotten-export) The symbol "ScopedSavedObjectsClientProvider" needs to be exported by the entry point index.d.ts
+    // 
+    // (undocumented)
+    addScopedSavedObjectsClientWrapperFactory: ScopedSavedObjectsClientProvider<Request>['addClientWrapperFactory'];
+    // (undocumented)
+    getSavedObjectsRepository(...rest: any[]): any;
+    // (undocumented)
+    getScopedSavedObjectsClient: ScopedSavedObjectsClientProvider<Request>['getClient'];
+    // (undocumented)
+    importExport: {
+        objectLimit: number;
+        importSavedObjects(options: SavedObjectsImportOptions): Promise<SavedObjectsImportResponse>;
+        resolveImportErrors(options: SavedObjectsResolveImportErrorsOptions): Promise<SavedObjectsImportResponse>;
+        getSortedObjectsForExport(options: SavedObjectsExportOptions): Promise<Readable>;
+    };
+    // (undocumented)
+    SavedObjectsClient: typeof SavedObjectsClient;
+    // (undocumented)
+    schema: SavedObjectsSchema;
+    // (undocumented)
+    types: string[];
+}
+
 // @public (undocumented)
 export interface SavedObjectsMigrationLogger {
     // (undocumented)
@@ -994,9 +1040,7 @@ export interface SavedObjectsResolveImportErrorsOptions {
     supportedTypes: string[];
 }
 
-// Warning: (ae-missing-release-tag) "SavedObjectsSchema" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-// 
-// @public (undocumented)
+// @internal (undocumented)
 export class SavedObjectsSchema {
     // Warning: (ae-forgotten-export) The symbol "SavedObjectsSchemaDefinition" needs to be exported by the entry point index.d.ts
     constructor(schemaDefinition?: SavedObjectsSchemaDefinition);
@@ -1010,9 +1054,7 @@ export class SavedObjectsSchema {
     isNamespaceAgnostic(type: string): boolean;
 }
 
-// Warning: (ae-missing-release-tag) "SavedObjectsSerializer" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-// 
-// @public (undocumented)
+// @internal (undocumented)
 export class SavedObjectsSerializer {
     constructor(schema: SavedObjectsSchema);
     generateRawId(namespace: string | undefined, type: string, id?: string): string;
@@ -1022,33 +1064,6 @@ export class SavedObjectsSerializer {
     savedObjectToRaw(savedObj: SanitizedSavedObjectDoc): SavedObjectsRawDoc;
     }
 
-// @public (undocumented)
-export interface SavedObjectsService<Request = any> {
-    // Warning: (ae-forgotten-export) The symbol "ScopedSavedObjectsClientProvider" needs to be exported by the entry point index.d.ts
-    // 
-    // (undocumented)
-    addScopedSavedObjectsClientWrapperFactory: ScopedSavedObjectsClientProvider<Request>['addClientWrapperFactory'];
-    // (undocumented)
-    getSavedObjectsRepository(...rest: any[]): any;
-    // (undocumented)
-    getScopedSavedObjectsClient: ScopedSavedObjectsClientProvider<Request>['getClient'];
-    // (undocumented)
-    importExport: {
-        objectLimit: number;
-        importSavedObjects(options: SavedObjectsImportOptions): Promise<SavedObjectsImportResponse>;
-        resolveImportErrors(options: SavedObjectsResolveImportErrorsOptions): Promise<SavedObjectsImportResponse>;
-        getSortedObjectsForExport(options: SavedObjectsExportOptions): Promise<Readable>;
-    };
-    // Warning: (ae-incompatible-release-tags) The symbol "SavedObjectsClient" is marked as @public, but its signature references "SavedObjectsClient" which is marked as @internal
-    // 
-    // (undocumented)
-    SavedObjectsClient: typeof SavedObjectsClient;
-    // (undocumented)
-    schema: SavedObjectsSchema;
-    // (undocumented)
-    types: string[];
-}
-
 // @public (undocumented)
 export interface SavedObjectsUpdateOptions extends SavedObjectsBaseOptions {
     // (undocumented)
diff --git a/src/core/server/server.test.ts b/src/core/server/server.test.ts
index 694888ab6243eb..cb1a88f6e8aed8 100644
--- a/src/core/server/server.test.ts
+++ b/src/core/server/server.test.ts
@@ -23,6 +23,7 @@ import {
   mockLegacyService,
   mockPluginsService,
   mockConfigService,
+  mockSavedObjectsService,
 } from './index.test.mocks';
 
 import { BehaviorSubject } from 'rxjs';
@@ -51,6 +52,7 @@ test('sets up services on "setup"', async () => {
   expect(mockElasticsearchService.setup).not.toHaveBeenCalled();
   expect(mockPluginsService.setup).not.toHaveBeenCalled();
   expect(mockLegacyService.setup).not.toHaveBeenCalled();
+  expect(mockSavedObjectsService.setup).not.toHaveBeenCalled();
 
   await server.setup();
 
@@ -58,6 +60,7 @@ test('sets up services on "setup"', async () => {
   expect(mockElasticsearchService.setup).toHaveBeenCalledTimes(1);
   expect(mockPluginsService.setup).toHaveBeenCalledTimes(1);
   expect(mockLegacyService.setup).toHaveBeenCalledTimes(1);
+  expect(mockSavedObjectsService.setup).toHaveBeenCalledTimes(1);
 });
 
 test('runs services on "start"', async () => {
@@ -70,10 +73,12 @@ test('runs services on "start"', async () => {
 
   expect(mockHttpService.start).not.toHaveBeenCalled();
   expect(mockLegacyService.start).not.toHaveBeenCalled();
+  expect(mockSavedObjectsService.start).not.toHaveBeenCalled();
   await server.start();
 
   expect(mockHttpService.start).toHaveBeenCalledTimes(1);
   expect(mockLegacyService.start).toHaveBeenCalledTimes(1);
+  expect(mockSavedObjectsService.start).toHaveBeenCalledTimes(1);
 });
 
 test('does not fail on "setup" if there are unused paths detected', async () => {
@@ -93,6 +98,7 @@ test('stops services on "stop"', async () => {
   expect(mockElasticsearchService.stop).not.toHaveBeenCalled();
   expect(mockPluginsService.stop).not.toHaveBeenCalled();
   expect(mockLegacyService.stop).not.toHaveBeenCalled();
+  expect(mockSavedObjectsService.stop).not.toHaveBeenCalled();
 
   await server.stop();
 
@@ -100,6 +106,7 @@ test('stops services on "stop"', async () => {
   expect(mockElasticsearchService.stop).toHaveBeenCalledTimes(1);
   expect(mockPluginsService.stop).toHaveBeenCalledTimes(1);
   expect(mockLegacyService.stop).toHaveBeenCalledTimes(1);
+  expect(mockSavedObjectsService.stop).toHaveBeenCalledTimes(1);
 });
 
 test(`doesn't setup core services if config validation fails`, async () => {
diff --git a/src/core/server/server.ts b/src/core/server/server.ts
index e0569ed80fca4a..2b63d6ac3be1c9 100644
--- a/src/core/server/server.ts
+++ b/src/core/server/server.ts
@@ -26,11 +26,14 @@ import { HttpService, HttpServiceSetup } from './http';
 import { LegacyService } from './legacy';
 import { Logger, LoggerFactory } from './logging';
 import { PluginsService, config as pluginsConfig } from './plugins';
+import { SavedObjectsService } from '../server/saved_objects';
 
 import { config as elasticsearchConfig } from './elasticsearch';
 import { config as httpConfig } from './http';
 import { config as loggingConfig } from './logging';
 import { config as devConfig } from './dev';
+import { config as kibanaConfig } from './kibana_config';
+import { config as savedObjectsConfig } from './saved_objects';
 import { mapToObject } from '../utils/';
 import { ContextService } from './context';
 import { InternalCoreSetup } from './index';
@@ -42,9 +45,10 @@ export class Server {
   private readonly context: ContextService;
   private readonly elasticsearch: ElasticsearchService;
   private readonly http: HttpService;
-  private readonly plugins: PluginsService;
   private readonly legacy: LegacyService;
   private readonly log: Logger;
+  private readonly plugins: PluginsService;
+  private readonly savedObjects: SavedObjectsService;
 
   constructor(
     readonly config$: Observable<Config>,
@@ -60,6 +64,7 @@ export class Server {
     this.plugins = new PluginsService(core);
     this.legacy = new LegacyService(core);
     this.elasticsearch = new ElasticsearchService(core);
+    this.savedObjects = new SavedObjectsService(core);
   }
 
   public async setup() {
@@ -88,18 +93,26 @@ export class Server {
     this.registerCoreContext(coreSetup);
     const pluginsSetup = await this.plugins.setup(coreSetup);
 
-    await this.legacy.setup({
+    const legacySetup = await this.legacy.setup({
       core: { ...coreSetup, plugins: pluginsSetup },
       plugins: mapToObject(pluginsSetup.contracts),
     });
 
+    await this.savedObjects.setup({
+      elasticsearch: elasticsearchServiceSetup,
+      legacy: legacySetup,
+    });
+
     return coreSetup;
   }
 
   public async start() {
+    this.log.debug('starting server');
     const pluginsStart = await this.plugins.start({});
+    const savedObjectsStart = await this.savedObjects.start({});
 
     const coreStart = {
+      savedObjects: savedObjectsStart,
       plugins: pluginsStart,
     };
 
@@ -109,6 +122,7 @@ export class Server {
     });
 
     await this.http.start();
+
     return coreStart;
   }
 
@@ -117,6 +131,7 @@ export class Server {
 
     await this.legacy.stop();
     await this.plugins.stop();
+    await this.savedObjects.stop();
     await this.elasticsearch.stop();
     await this.http.stop();
   }
@@ -148,6 +163,8 @@ export class Server {
       [httpConfig.path, httpConfig.schema],
       [pluginsConfig.path, pluginsConfig.schema],
       [devConfig.path, devConfig.schema],
+      [kibanaConfig.path, kibanaConfig.schema],
+      [savedObjectsConfig.path, savedObjectsConfig.schema],
     ];
 
     for (const [path, schema] of schemas) {
diff --git a/src/core/utils/context.mock.ts b/src/core/utils/context.mock.ts
index 4d91c11542b2f8..de844f3f0f07db 100644
--- a/src/core/utils/context.mock.ts
+++ b/src/core/utils/context.mock.ts
@@ -19,7 +19,7 @@
 
 import { IContextContainer } from './context';
 
-export type ContextContainerMock = jest.Mocked<IContextContainer<any, any, any>>;
+export type ContextContainerMock = jest.Mocked<IContextContainer<any>>;
 
 const createContextMock = () => {
   const contextMock: ContextContainerMock = {
diff --git a/src/core/utils/context.test.ts b/src/core/utils/context.test.ts
index 1249c14736fb53..4bfeddc2e08c97 100644
--- a/src/core/utils/context.test.ts
+++ b/src/core/utils/context.test.ts
@@ -44,7 +44,7 @@ const coreId = Symbol();
 
 describe('ContextContainer', () => {
   it('does not allow the same context to be registered twice', () => {
-    const contextContainer = new ContextContainer<MyContext, string>(plugins, coreId);
+    const contextContainer = new ContextContainer<(context: MyContext) => string>(plugins, coreId);
     contextContainer.registerContext(coreId, 'ctxFromA', () => 'aString');
 
     expect(() =>
@@ -56,7 +56,10 @@ describe('ContextContainer', () => {
 
   describe('registerContext', () => {
     it('throws error if called with an unknown symbol', async () => {
-      const contextContainer = new ContextContainer<MyContext, string>(plugins, coreId);
+      const contextContainer = new ContextContainer<(context: MyContext) => string>(
+        plugins,
+        coreId
+      );
       await expect(() =>
         contextContainer.registerContext(Symbol('unknown'), 'ctxFromA', jest.fn())
       ).toThrowErrorMatchingInlineSnapshot(
@@ -67,7 +70,10 @@ describe('ContextContainer', () => {
 
   describe('context building', () => {
     it('resolves dependencies', async () => {
-      const contextContainer = new ContextContainer<MyContext, string>(plugins, coreId);
+      const contextContainer = new ContextContainer<(context: MyContext) => string>(
+        plugins,
+        coreId
+      );
       expect.assertions(8);
       contextContainer.registerContext(coreId, 'core1', context => {
         expect(context).toEqual({});
@@ -118,7 +124,10 @@ describe('ContextContainer', () => {
     it('exposes all core context to all providers regardless of registration order', async () => {
       expect.assertions(4);
 
-      const contextContainer = new ContextContainer<MyContext, string>(plugins, coreId);
+      const contextContainer = new ContextContainer<(context: MyContext) => string>(
+        plugins,
+        coreId
+      );
       contextContainer
         .registerContext(pluginA, 'ctxFromA', context => {
           expect(context).toEqual({ core1: 'core', core2: 101 });
@@ -146,7 +155,10 @@ describe('ContextContainer', () => {
 
     it('exposes all core context to core providers', async () => {
       expect.assertions(4);
-      const contextContainer = new ContextContainer<MyContext, string>(plugins, coreId);
+      const contextContainer = new ContextContainer<(context: MyContext) => string>(
+        plugins,
+        coreId
+      );
 
       contextContainer
         .registerContext(coreId, 'core1', context => {
@@ -171,7 +183,10 @@ describe('ContextContainer', () => {
     });
 
     it('does not expose plugin contexts to core handler', async () => {
-      const contextContainer = new ContextContainer<MyContext, string>(plugins, coreId);
+      const contextContainer = new ContextContainer<(context: MyContext) => string>(
+        plugins,
+        coreId
+      );
 
       contextContainer
         .registerContext(coreId, 'core1', context => 'core')
@@ -189,10 +204,9 @@ describe('ContextContainer', () => {
 
     it('passes additional arguments to providers', async () => {
       expect.assertions(6);
-      const contextContainer = new ContextContainer<MyContext, string, [string, number]>(
-        plugins,
-        coreId
-      );
+      const contextContainer = new ContextContainer<
+        (context: MyContext, arg1: string, arg2: number) => string
+      >(plugins, coreId);
 
       contextContainer.registerContext(coreId, 'core1', (context, str, num) => {
         expect(str).toEqual('passed string');
@@ -228,7 +242,10 @@ describe('ContextContainer', () => {
 
   describe('createHandler', () => {
     it('throws error if called with an unknown symbol', async () => {
-      const contextContainer = new ContextContainer<MyContext, string>(plugins, coreId);
+      const contextContainer = new ContextContainer<(context: MyContext) => string>(
+        plugins,
+        coreId
+      );
       await expect(() =>
         contextContainer.createHandler(Symbol('unknown'), jest.fn())
       ).toThrowErrorMatchingInlineSnapshot(
@@ -237,8 +254,10 @@ describe('ContextContainer', () => {
     });
 
     it('returns value from original handler', async () => {
-      const contextContainer = new ContextContainer<MyContext, string>(plugins, coreId);
-
+      const contextContainer = new ContextContainer<(context: MyContext) => string>(
+        plugins,
+        coreId
+      );
       const rawHandler1 = jest.fn(() => 'handler1');
       const handler1 = contextContainer.createHandler(pluginA, rawHandler1);
 
@@ -246,10 +265,9 @@ describe('ContextContainer', () => {
     });
 
     it('passes additional arguments to handlers', async () => {
-      const contextContainer = new ContextContainer<MyContext, string, [string, number]>(
-        plugins,
-        coreId
-      );
+      const contextContainer = new ContextContainer<
+        (context: MyContext, arg1: string, arg2: number) => string
+      >(plugins, coreId);
 
       const rawHandler1 = jest.fn<string, [MyContext, string, number]>(() => 'handler1');
       const handler1 = contextContainer.createHandler(pluginA, rawHandler1);
diff --git a/src/core/utils/context.ts b/src/core/utils/context.ts
index 6d1732ea06b0e1..022c3e43300322 100644
--- a/src/core/utils/context.ts
+++ b/src/core/utils/context.ts
@@ -18,6 +18,7 @@
  */
 
 import { flatten } from 'lodash';
+import { ShallowPromise } from '@kbn/utility-types';
 import { pick } from '.';
 import { CoreId, PluginOpaqueId } from '../server';
 
@@ -35,26 +36,44 @@ import { CoreId, PluginOpaqueId } from '../server';
  * @public
  */
 export type IContextProvider<
-  TContext extends Record<string, any>,
-  TContextName extends keyof TContext,
-  TProviderParameters extends any[] = []
+  THandler extends HandlerFunction<any>,
+  TContextName extends keyof HandlerContextType<THandler>
 > = (
-  context: Partial<TContext>,
-  ...rest: TProviderParameters
-) => Promise<TContext[TContextName]> | TContext[TContextName];
+  context: Partial<HandlerContextType<THandler>>,
+  ...rest: HandlerParameters<THandler>
+) =>
+  | Promise<HandlerContextType<THandler>[TContextName]>
+  | HandlerContextType<THandler>[TContextName];
 
 /**
- * A function registered by a plugin to perform some action.
+ * A function that accepts a context object and an optional number of additional arguments. Used for the generic types
+ * in {@link IContextContainer}
  *
- * @remarks
- * A new `TContext` will be built for each handler before invoking.
+ * @public
+ */
+export type HandlerFunction<T extends object> = (context: T, ...args: any[]) => any;
+
+/**
+ * Extracts the type of the first argument of a {@link HandlerFunction} to represent the type of the context.
  *
  * @public
  */
-export type IContextHandler<TContext extends {}, TReturn, THandlerParameters extends any[] = []> = (
-  context: TContext,
-  ...rest: THandlerParameters
-) => TReturn;
+export type HandlerContextType<T extends HandlerFunction<any>> = T extends HandlerFunction<infer U>
+  ? U
+  : never;
+
+/**
+ * Extracts the types of the additional arguments of a {@link HandlerFunction}, excluding the
+ * {@link HandlerContextType}.
+ *
+ * @public
+ */
+export type HandlerParameters<T extends HandlerFunction<any>> = T extends (
+  context: any,
+  ...args: infer U
+) => any
+  ? U
+  : never;
 
 /**
  * An object that handles registration of context providers and configuring handlers with context.
@@ -123,13 +142,12 @@ export type IContextHandler<TContext extends {}, TReturn, THandlerParameters ext
  * }
  * ```
  *
+ * @typeParam THandler - the type of {@link HandlerFunction} this container should manage. The first argument of this
+ *                       function will be used as the context type.
+ *
  * @public
  */
-export interface IContextContainer<
-  TContext extends {},
-  THandlerReturn,
-  THandlerParameters extends any[] = []
-> {
+export interface IContextContainer<THandler extends HandlerFunction<any>> {
   /**
    * Register a new context provider.
    *
@@ -144,10 +162,10 @@ export interface IContextContainer<
    * @param provider - A {@link IContextProvider} to be called each time a new context is created.
    * @returns The {@link IContextContainer} for method chaining.
    */
-  registerContext<TContextName extends keyof TContext>(
+  registerContext<TContextName extends keyof HandlerContextType<THandler>>(
     pluginOpaqueId: PluginOpaqueId,
     contextName: TContextName,
-    provider: IContextProvider<TContext, TContextName, THandlerParameters>
+    provider: IContextProvider<THandler, TContextName>
   ): this;
 
   /**
@@ -160,31 +178,26 @@ export interface IContextContainer<
    */
   createHandler(
     pluginOpaqueId: PluginOpaqueId,
-    handler: IContextHandler<TContext, THandlerReturn, THandlerParameters>
-  ): (
-    ...rest: THandlerParameters
-  ) => THandlerReturn extends Promise<any> ? THandlerReturn : Promise<THandlerReturn>;
+    handler: THandler
+  ): (...rest: HandlerParameters<THandler>) => ShallowPromise<ReturnType<THandler>>;
 }
 
 /** @internal */
-export class ContextContainer<
-  TContext extends Record<string, any>,
-  THandlerReturn,
-  THandlerParameters extends any[] = []
-> implements IContextContainer<TContext, THandlerReturn, THandlerParameters> {
+export class ContextContainer<THandler extends HandlerFunction<any>>
+  implements IContextContainer<THandler> {
   /**
    * Used to map contexts to their providers and associated plugin. In registration order which is tightly coupled to
    * plugin load order.
    */
   private readonly contextProviders = new Map<
-    keyof TContext,
+    keyof HandlerContextType<THandler>,
     {
-      provider: IContextProvider<TContext, keyof TContext, THandlerParameters>;
+      provider: IContextProvider<THandler, keyof HandlerContextType<THandler>>;
       source: symbol;
     }
   >();
   /** Used to keep track of which plugins registered which contexts for dependency resolution. */
-  private readonly contextNamesBySource: Map<symbol, Array<keyof TContext>>;
+  private readonly contextNamesBySource: Map<symbol, Array<keyof HandlerContextType<THandler>>>;
 
   /**
    * @param pluginDependencies - A map of plugins to an array of their dependencies.
@@ -193,13 +206,15 @@ export class ContextContainer<
     private readonly pluginDependencies: ReadonlyMap<PluginOpaqueId, PluginOpaqueId[]>,
     private readonly coreId: CoreId
   ) {
-    this.contextNamesBySource = new Map<symbol, Array<keyof TContext>>([[coreId, []]]);
+    this.contextNamesBySource = new Map<symbol, Array<keyof HandlerContextType<THandler>>>([
+      [coreId, []],
+    ]);
   }
 
-  public registerContext = <TContextName extends keyof TContext>(
+  public registerContext = <TContextName extends keyof HandlerContextType<THandler>>(
     source: symbol,
     contextName: TContextName,
-    provider: IContextProvider<TContext, TContextName, THandlerParameters>
+    provider: IContextProvider<THandler, TContextName>
   ): this => {
     if (this.contextProviders.has(contextName)) {
       throw new Error(`Context provider for ${contextName} has already been registered.`);
@@ -217,27 +232,22 @@ export class ContextContainer<
     return this;
   };
 
-  public createHandler = (
-    source: symbol,
-    handler: IContextHandler<TContext, THandlerReturn, THandlerParameters>
-  ) => {
+  public createHandler = (source: symbol, handler: THandler) => {
     if (source !== this.coreId && !this.pluginDependencies.has(source)) {
       throw new Error(`Cannot create handler for unknown plugin: ${source.toString()}`);
     }
 
-    return (async (...args: THandlerParameters) => {
+    return (async (...args: HandlerParameters<THandler>) => {
       const context = await this.buildContext(source, ...args);
       return handler(context, ...args);
-    }) as (
-      ...args: THandlerParameters
-    ) => THandlerReturn extends Promise<any> ? THandlerReturn : Promise<THandlerReturn>;
+    }) as (...args: HandlerParameters<THandler>) => ShallowPromise<ReturnType<THandler>>;
   };
 
   private async buildContext(
     source: symbol,
-    ...contextArgs: THandlerParameters
-  ): Promise<TContext> {
-    const contextsToBuild: ReadonlySet<keyof TContext> = new Set(
+    ...contextArgs: HandlerParameters<THandler>
+  ): Promise<HandlerContextType<THandler>> {
+    const contextsToBuild: ReadonlySet<keyof HandlerContextType<THandler>> = new Set(
       this.getContextNamesForSource(source)
     );
 
@@ -252,18 +262,20 @@ export class ContextContainer<
           // registered that provider.
           const exposedContext = pick(resolvedContext, [
             ...this.getContextNamesForSource(providerSource),
-          ]);
+          ]) as Partial<HandlerContextType<THandler>>;
 
           return {
             ...resolvedContext,
-            [contextName]: await provider(exposedContext as Partial<TContext>, ...contextArgs),
+            [contextName]: await provider(exposedContext, ...contextArgs),
           };
         },
-        Promise.resolve({}) as Promise<TContext>
+        Promise.resolve({}) as Promise<HandlerContextType<THandler>>
       );
   }
 
-  private getContextNamesForSource(source: symbol): ReadonlySet<keyof TContext> {
+  private getContextNamesForSource(
+    source: symbol
+  ): ReadonlySet<keyof HandlerContextType<THandler>> {
     if (source === this.coreId) {
       return this.getContextNamesForCore();
     } else {
diff --git a/src/dev/register_git_hook/register_git_hook.js b/src/dev/register_git_hook/register_git_hook.js
index bdb3e2d8060302..a61922078e6876 100644
--- a/src/dev/register_git_hook/register_git_hook.js
+++ b/src/dev/register_git_hook/register_git_hook.js
@@ -37,7 +37,7 @@ const writeFileAsync = promisify(writeFile);
 async function getPrecommitGitHookScriptPath(rootPath) {
   // Retrieves the correct location for the .git dir for
   // every git setup (including git worktree)
-  const gitDirPath = (await gitRevParseAsync(['--git-dir'])).trim();
+  const gitDirPath = (await gitRevParseAsync(['--git-common-dir'])).trim();
 
   return resolve(rootPath, gitDirPath, 'hooks/pre-commit');
 }
diff --git a/src/dev/renovate/config.ts b/src/dev/renovate/config.ts
index a86c080f527102..1bf3af9fe5248e 100644
--- a/src/dev/renovate/config.ts
+++ b/src/dev/renovate/config.ts
@@ -86,6 +86,7 @@ export const RENOVATE_CONFIG = {
         labels: group.extraLabels && [...DEFAULT_LABELS, ...group.extraLabels],
         enabled: group.enabled === false ? false : undefined,
         allowedVersions: group.allowedVersions || undefined,
+        reviewers: group.reviewers || undefined,
       })),
 
       // internal/local packages
diff --git a/src/dev/renovate/package_groups.ts b/src/dev/renovate/package_groups.ts
index 85692e94eb9127..185163890f7458 100644
--- a/src/dev/renovate/package_groups.ts
+++ b/src/dev/renovate/package_groups.ts
@@ -56,6 +56,11 @@ interface PackageGroup {
    * https://renovatebot.com/docs/configuration-options/#allowedversions
    */
   readonly allowedVersions?: string;
+
+  /**
+   * An array of users to request reviews from
+   */
+  readonly reviewers?: string[];
 }
 
 export const RENOVATE_PACKAGE_GROUPS: PackageGroup[] = [
@@ -75,6 +80,12 @@ export const RENOVATE_PACKAGE_GROUPS: PackageGroup[] = [
     packageWords: ['jest'],
   },
 
+  {
+    name: '@elastic/charts',
+    packageNames: ['@elastic/charts'],
+    reviewers: ['markov00'],
+  },
+
   {
     name: 'mocha',
     packageWords: ['mocha'],
diff --git a/src/dev/run_check_core_api_changes.ts b/src/dev/run_check_core_api_changes.ts
index 4d0be7f3884665..d2c75c86ce7442 100644
--- a/src/dev/run_check_core_api_changes.ts
+++ b/src/dev/run_check_core_api_changes.ts
@@ -139,14 +139,51 @@ const runApiExtractor = (
   return Extractor.invoke(config, options);
 };
 
-async function run(folder: string): Promise<boolean> {
+interface Options {
+  accept: boolean;
+  docs: boolean;
+  help: boolean;
+}
+
+async function run(
+  folder: string,
+  { log, opts }: { log: ToolingLog; opts: Options }
+): Promise<boolean> {
+  log.info(`Core ${folder} API: checking for changes in API signature...`);
+
+  const { apiReportChanged, succeeded } = runApiExtractor(log, folder, opts.accept);
+
+  // If we're not accepting changes and there's a failure, exit.
+  if (!opts.accept && !succeeded) {
+    return false;
+  }
+
+  // Attempt to generate docs even if api-extractor didn't succeed
+  if ((opts.accept && apiReportChanged) || opts.docs) {
+    try {
+      await renameExtractedApiPackageName(folder);
+      await runApiDocumenter(folder);
+    } catch (e) {
+      log.error(e);
+      return false;
+    }
+    log.info(`Core ${folder} API: updated documentation ✔`);
+  }
+
+  // If the api signature changed or any errors or warnings occured, exit with an error
+  // NOTE: Because of https://github.com/Microsoft/web-build-tools/issues/1258
+  //  api-extractor will not return `succeeded: false` when the API changes.
+  return !apiReportChanged && succeeded;
+}
+
+(async () => {
   const log = new ToolingLog({
     level: 'info',
     writeTo: process.stdout,
   });
 
   const extraFlags: string[] = [];
-  const opts = getopts(process.argv.slice(2), {
+  const opts = (getopts(process.argv.slice(2), {
     boolean: ['accept', 'docs', 'help'],
     default: {
       project: undefined,
@@ -155,7 +192,7 @@ async function run(folder: string): Promise<boolean> {
       extraFlags.push(name);
       return false;
     },
-  });
+  }) as any) as Options;
 
   if (extraFlags.length > 0) {
     for (const flag of extraFlags) {
@@ -193,45 +230,18 @@ async function run(folder: string): Promise<boolean> {
     return !(extraFlags.length > 0);
   }
 
-  log.info(`Core ${folder} API: checking for changes in API signature...`);
-
   try {
+    log.info(`Core: Building types...`);
     await runBuildTypes();
   } catch (e) {
     log.error(e);
     return false;
   }
 
-  const { apiReportChanged, succeeded } = runApiExtractor(log, folder, opts.accept);
-
-  // If we're not accepting changes and there's a failure, exit.
-  if (!opts.accept && !succeeded) {
-    return false;
-  }
-
-  // Attempt to generate docs even if api-extractor didn't succeed
-  if ((opts.accept && apiReportChanged) || opts.docs) {
-    try {
-      await renameExtractedApiPackageName(folder);
-      await runApiDocumenter(folder);
-    } catch (e) {
-      log.error(e);
-      return false;
-    }
-    log.info(`Core ${folder} API: updated documentation ✔`);
-  }
-
-  // If the api signature changed or any errors or warnings occured, exit with an error
-  // NOTE: Because of https://github.com/Microsoft/web-build-tools/issues/1258
-  //  api-extractor will not return `succeeded: false` when the API changes.
-  return !apiReportChanged && succeeded;
-}
-
-(async () => {
-  const publicSucceeded = await run('public');
-  const serverSucceeded = await run('server');
+  const folders = ['public', 'server'];
+  const results = await Promise.all(folders.map(folder => run(folder, { log, opts })));
 
-  if (!publicSucceeded || !serverSucceeded) {
+  if (results.find(r => r === false) !== undefined) {
     process.exitCode = 1;
   }
 })();
diff --git a/src/es_archiver/actions/empty_kibana_index.js b/src/es_archiver/actions/empty_kibana_index.js
index 411a8b18038a78..adcf65711a4889 100644
--- a/src/es_archiver/actions/empty_kibana_index.js
+++ b/src/es_archiver/actions/empty_kibana_index.js
@@ -20,12 +20,11 @@ import {
   migrateKibanaIndex,
   deleteKibanaIndices,
   createStats,
-  getEnabledKibanaPluginIds
 } from '../lib';
 
-export async function emptyKibanaIndexAction({ client, log, kibanaUrl }) {
+export async function emptyKibanaIndexAction({ client, log, kbnClient }) {
   const stats = createStats('emptyKibanaIndex', log);
-  const kibanaPluginIds = await getEnabledKibanaPluginIds(kibanaUrl);
+  const kibanaPluginIds = await kbnClient.plugins.getEnabledIds();
 
   await deleteKibanaIndices({ client, stats });
   await migrateKibanaIndex({ client, log, stats, kibanaPluginIds });
diff --git a/src/es_archiver/actions/load.js b/src/es_archiver/actions/load.js
index b68bc38096d745..c54fe8c99b7253 100644
--- a/src/es_archiver/actions/load.js
+++ b/src/es_archiver/actions/load.js
@@ -35,7 +35,6 @@ import {
   createIndexDocRecordsStream,
   migrateKibanaIndex,
   Progress,
-  getEnabledKibanaPluginIds,
   createDefaultSpace,
 } from '../lib';
 
@@ -49,11 +48,11 @@ const pipeline = (...streams) => streams
       .pipe(dest)
   ));
 
-export async function loadAction({ name, skipExisting, client, dataDir, log, kibanaUrl }) {
+export async function loadAction({ name, skipExisting, client, dataDir, log, kbnClient }) {
   const inputDir = resolve(dataDir, name);
   const stats = createStats(name, log);
   const files = prioritizeMappings(await readDirectory(inputDir));
-  const kibanaPluginIds = await getEnabledKibanaPluginIds(kibanaUrl);
+  const kibanaPluginIds = await kbnClient.plugins.getEnabledIds();
 
   // a single stream that emits records from all archive files, in
   // order, so that createIndexStream can track the state of indexes
diff --git a/src/es_archiver/actions/unload.js b/src/es_archiver/actions/unload.js
index b6aead8c25f21f..c8ed868f9ff172 100644
--- a/src/es_archiver/actions/unload.js
+++ b/src/es_archiver/actions/unload.js
@@ -32,13 +32,12 @@ import {
   createParseArchiveStreams,
   createFilterRecordsStream,
   createDeleteIndexStream,
-  getEnabledKibanaPluginIds,
 } from '../lib';
 
-export async function unloadAction({ name, client, dataDir, log, kibanaUrl }) {
+export async function unloadAction({ name, client, dataDir, log, kbnClient }) {
   const inputDir = resolve(dataDir, name);
   const stats = createStats(name, log);
-  const kibanaPluginIds = await getEnabledKibanaPluginIds(kibanaUrl);
+  const kibanaPluginIds = await kbnClient.plugins.getEnabledIds();
 
   const files = prioritizeMappings(await readDirectory(inputDir));
   for (const filename of files) {
diff --git a/src/es_archiver/es_archiver.js b/src/es_archiver/es_archiver.js
index 9ffff2b28d127f..c4871ad7867915 100644
--- a/src/es_archiver/es_archiver.js
+++ b/src/es_archiver/es_archiver.js
@@ -17,6 +17,8 @@
  * under the License.
  */
 
+import { KbnClient } from '@kbn/dev-utils';
+
 import {
   saveAction,
   loadAction,
@@ -31,7 +33,7 @@ export class EsArchiver {
     this.client = client;
     this.dataDir = dataDir;
     this.log = log;
-    this.kibanaUrl = kibanaUrl;
+    this.kbnClient = new KbnClient(log, [kibanaUrl]);
   }
 
   /**
@@ -73,7 +75,7 @@ export class EsArchiver {
       client: this.client,
       dataDir: this.dataDir,
       log: this.log,
-      kibanaUrl: this.kibanaUrl,
+      kbnClient: this.kbnClient,
     });
   }
 
@@ -89,7 +91,7 @@ export class EsArchiver {
       client: this.client,
       dataDir: this.dataDir,
       log: this.log,
-      kibanaUrl: this.kibanaUrl,
+      kbnClient: this.kbnClient,
     });
   }
 
@@ -144,7 +146,7 @@ export class EsArchiver {
     await emptyKibanaIndexAction({
       client: this.client,
       log: this.log,
-      kibanaUrl: this.kibanaUrl,
+      kbnClient: this.kbnClient,
     });
   }
 }
diff --git a/src/es_archiver/lib/index.js b/src/es_archiver/lib/index.js
index 9a21201152b966..8632a493dd5341 100644
--- a/src/es_archiver/lib/index.js
+++ b/src/es_archiver/lib/index.js
@@ -53,7 +53,3 @@ export {
 export {
   Progress
 } from './progress';
-
-export {
-  getEnabledKibanaPluginIds,
-} from './kibana_plugins';
diff --git a/src/es_archiver/lib/indices/kibana_index.js b/src/es_archiver/lib/indices/kibana_index.js
index b751ca2f1864b0..dc916e11d698c0 100644
--- a/src/es_archiver/lib/indices/kibana_index.js
+++ b/src/es_archiver/lib/indices/kibana_index.js
@@ -77,39 +77,41 @@ export async function deleteKibanaIndices({ client, stats, log }) {
  */
 export async function migrateKibanaIndex({ client, log, kibanaPluginIds }) {
   const uiExports = await getUiExports(kibanaPluginIds);
-  const version = await loadElasticVersion();
+  const kibanaVersion = await loadKibanaVersion();
+
   const config = {
-    'kibana.index': '.kibana',
-    'migrations.scrollDuration': '5m',
-    'migrations.batchSize': 100,
-    'migrations.pollInterval': 100,
     'xpack.task_manager.index': '.kibana_task_manager',
   };
-  const ready = async () => undefined;
-  const elasticsearch = {
-    getCluster: () => ({
-      callWithInternalUser: (path, ...args) => _.get(client, path).call(client, ...args),
-    }),
-    waitUntilReady: ready,
-  };
-
-  const server = {
-    log: ([logType, messageType], ...args) => log[logType](`[${messageType}] ${args.join(' ')}`),
-    config: () => ({ get: path => config[path] }),
-    plugins: { elasticsearch },
-  };
 
-  const kbnServer = {
-    server,
-    version,
-    uiExports,
-    ready,
+  const migratorOptions = {
+    config: { get: path => config[path] },
+    savedObjectsConfig: {
+      'scrollDuration': '5m',
+      'batchSize': 100,
+      'pollInterval': 100,
+    },
+    kibanaConfig: {
+      index: '.kibana',
+    },
+    logger: {
+      trace: log.verbose.bind(log),
+      debug: log.debug.bind(log),
+      info: log.info.bind(log),
+      warn: log.warning.bind(log),
+      error: log.error.bind(log),
+    },
+    version: kibanaVersion,
+    savedObjectSchemas: uiExports.savedObjectSchemas,
+    savedObjectMappings: uiExports.savedObjectMappings,
+    savedObjectMigrations: uiExports.savedObjectMigrations,
+    savedObjectValidations: uiExports.savedObjectValidations,
+    callCluster: (path, ...args) => _.get(client, path).call(client, ...args),
   };
 
-  return await new KibanaMigrator({ kbnServer }).awaitMigration();
+  return await new KibanaMigrator(migratorOptions).runMigrations();
 }
 
-async function loadElasticVersion() {
+async function loadKibanaVersion() {
   const readFile = promisify(fs.readFile);
   const packageJson = await readFile(path.join(__dirname, '../../../../package.json'));
   return JSON.parse(packageJson).version;
diff --git a/src/es_archiver/lib/kibana_plugins.ts b/src/es_archiver/lib/kibana_plugins.ts
deleted file mode 100644
index 44552d5ab20396..00000000000000
--- a/src/es_archiver/lib/kibana_plugins.ts
+++ /dev/null
@@ -1,55 +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 Axios from 'axios';
-
-const PLUGIN_STATUS_ID = /^plugin:(.+?)@/;
-const isString = (v: any): v is string => typeof v === 'string';
-
-/**
- * Get the list of enabled plugins from Kibana, used to determine which
- * uiExports to collect, whether we should clean or clean the kibana index,
- * and if we need to inject the default space document in new versions of
- * the index.
- *
- * This must be called before touching the Kibana index as Kibana becomes
- * unstable when the .kibana index is deleted/cleaned and the status API
- * will fail in situations where status.allowAnonymous=false and security
- * is enabled.
- */
-export async function getEnabledKibanaPluginIds(kibanaUrl: string): Promise<string[]> {
-  try {
-    const { data } = await Axios.get('/api/status', {
-      baseURL: kibanaUrl,
-    });
-
-    return (data.status.statuses as Array<{ id: string }>)
-      .map(({ id }) => {
-        const match = id.match(PLUGIN_STATUS_ID);
-        if (match) {
-          return match[1];
-        }
-      })
-      .filter(isString);
-  } catch (error) {
-    throw new Error(
-      `Unable to fetch Kibana status API response from Kibana at ${kibanaUrl}: ${error}`
-    );
-  }
-}
diff --git a/src/legacy/core_plugins/console/np_ready/public/application/components/console_menu.tsx b/src/legacy/core_plugins/console/np_ready/public/application/components/console_menu.tsx
index 88168d6278f1ec..643b29578674cc 100644
--- a/src/legacy/core_plugins/console/np_ready/public/application/components/console_menu.tsx
+++ b/src/legacy/core_plugins/console/np_ready/public/application/components/console_menu.tsx
@@ -106,6 +106,7 @@ export class ConsoleMenu extends Component<Props, State> {
       <EuiButtonIcon
         iconType="wrench"
         onClick={this.onButtonClick}
+        data-test-subj="toggleConsoleMenu"
         // @ts-ignore
         aria-label={
           <FormattedMessage
@@ -133,6 +134,7 @@ export class ConsoleMenu extends Component<Props, State> {
       </EuiContextMenuItem>,
       <EuiContextMenuItem
         key="Open documentation"
+        data-test-subj="consoleMenuOpenDocs"
         onClick={() => {
           this.openDocs();
         }}
@@ -142,7 +144,11 @@ export class ConsoleMenu extends Component<Props, State> {
           defaultMessage="Open documentation"
         />
       </EuiContextMenuItem>,
-      <EuiContextMenuItem key="Auto indent" onClick={this.autoIndent}>
+      <EuiContextMenuItem
+        data-test-subj="consoleMenuAutoIndent"
+        key="Auto indent"
+        onClick={this.autoIndent}
+      >
         <FormattedMessage
           id="console.requestOptions.autoIndentButtonLabel"
           defaultMessage="Auto indent"
diff --git a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/editor.test.tsx b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/editor.test.tsx
new file mode 100644
index 00000000000000..8335da01c0a0cc
--- /dev/null
+++ b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/editor.test.tsx
@@ -0,0 +1,124 @@
+/*
+ * 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 { ReactWrapper, mount } from 'enzyme';
+import { I18nProvider } from '@kbn/i18n/react';
+import * as sinon from 'sinon';
+
+import { EditorContextProvider } from '../../context';
+import { AppContextProvider } from '../../../../context';
+import { Editor } from './editor';
+
+jest.mock('../../../../components/editor_example.tsx', () => {});
+jest.mock('../../../../../../../public/quarantined/src/mappings.js', () => ({
+  retrieveAutoCompleteInfo: () => {},
+}));
+jest.mock('../../../../../../../public/quarantined/src/input.js', () => {
+  return {
+    initializeInput: () => ({
+      $el: {
+        css: () => {},
+      },
+      focus: () => {},
+      update: () => {},
+      getSession: () => ({ on: () => {}, setUseWrapMode: () => {} }),
+      commands: {
+        addCommand: () => {},
+      },
+    }),
+  };
+});
+
+import * as sendRequestModule from './send_current_request_to_es';
+import * as consoleMenuActions from '../console_menu_actions';
+
+describe('Legacy (Ace) Console Editor Component Smoke Test', () => {
+  let mockedAppContextValue: any;
+  let editor: ReactWrapper;
+
+  beforeEach(() => {
+    document.queryCommandSupported = sinon.fake(() => true);
+    mockedAppContextValue = {
+      services: {
+        history: {
+          getSavedEditorState: () => null,
+          updateCurrentState: () => {},
+        },
+      },
+      // eslint-disable-next-line
+      ResizeChecker: function() {
+        return { on: () => {} };
+      },
+      docLinkVersion: 'NA',
+    };
+    editor = mount(
+      <I18nProvider>
+        <AppContextProvider value={mockedAppContextValue}>
+          <EditorContextProvider settings={{} as any}>
+            <Editor />
+          </EditorContextProvider>
+        </AppContextProvider>
+      </I18nProvider>
+    );
+  });
+
+  it('calls send current request to ES', () => {
+    const stub = sinon.stub(sendRequestModule, 'sendCurrentRequestToES');
+    try {
+      editor.find('[data-test-subj~="sendRequestButton"]').simulate('click');
+      expect(stub.called).toBe(true);
+      expect(stub.callCount).toBe(1);
+    } finally {
+      stub.restore();
+    }
+  });
+
+  it('opens docs', () => {
+    const stub = sinon.stub(consoleMenuActions, 'getDocumentation');
+    try {
+      const consoleMenuToggle = editor.find('[data-test-subj~="toggleConsoleMenu"]').last();
+      consoleMenuToggle.simulate('click');
+
+      const docsButton = editor.find('[data-test-subj~="consoleMenuOpenDocs"]').last();
+      docsButton.simulate('click');
+
+      expect(stub.called).toBe(true);
+      expect(stub.callCount).toBe(1);
+    } finally {
+      stub.restore();
+    }
+  });
+
+  it('prompts auto-indent', () => {
+    const stub = sinon.stub(consoleMenuActions, 'autoIndent');
+    try {
+      const consoleMenuToggle = editor.find('[data-test-subj~="toggleConsoleMenu"]').last();
+      consoleMenuToggle.simulate('click');
+
+      const autoIndentButton = editor.find('[data-test-subj~="consoleMenuAutoIndent"]').last();
+      autoIndentButton.simulate('click');
+
+      expect(stub.called).toBe(true);
+      expect(stub.callCount).toBe(1);
+    } finally {
+      stub.restore();
+    }
+  });
+});
diff --git a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/editor.tsx b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/editor.tsx
index 005cf14c32a1d5..df0e1af0204b3c 100644
--- a/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/editor.tsx
+++ b/src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/console_editor/editor.tsx
@@ -181,7 +181,7 @@ function _Editor({ previousStateLocation = 'stored' }: EditorProps) {
           >
             <button
               onClick={sendCurrentRequestToES}
-              data-test-subj="send-request-button"
+              data-test-subj="sendRequestButton"
               className="conApp__editorActionButton conApp__editorActionButton--success"
             >
               <EuiIcon type="play" />
diff --git a/src/legacy/core_plugins/console/np_ready/public/application/containers/main/main.tsx b/src/legacy/core_plugins/console/np_ready/public/application/containers/main/main.tsx
index d7b369cc264816..82256cf7398820 100644
--- a/src/legacy/core_plugins/console/np_ready/public/application/containers/main/main.tsx
+++ b/src/legacy/core_plugins/console/np_ready/public/application/containers/main/main.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { debounce } from 'lodash';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
@@ -52,8 +52,6 @@ export function Main() {
   const [showSettings, setShowSettings] = useState(false);
   const [showHelp, setShowHelp] = useState(false);
 
-  const containerRef = useRef<null | HTMLDivElement>(null);
-
   const [firstPanelWidth, secondPanelWidth] = storage.get(StorageKeys.WIDTH, [
     INITIAL_PANEL_WIDTH,
     INITIAL_PANEL_WIDTH,
@@ -71,9 +69,9 @@ export function Main() {
   };
 
   return (
-    <div className="consoleContainer" style={{ height: '100%', width: '100%' }} ref={containerRef}>
+    <>
       <EuiFlexGroup
-        style={{ height: '100%' }}
+        className="consoleContainer"
         gutterSize="none"
         direction="column"
         responsive={false}
@@ -118,6 +116,6 @@ export function Main() {
       {showSettings ? <Settings onClose={() => setShowSettings(false)} /> : null}
 
       {showHelp ? <HelpPanel onClose={() => setShowHelp(false)} /> : null}
-    </div>
+    </>
   );
 }
diff --git a/src/legacy/core_plugins/console/public/quarantined/_app.scss b/src/legacy/core_plugins/console/public/quarantined/_app.scss
index 5fd2cd080d06d8..6ec94c8fb4c96f 100644
--- a/src/legacy/core_plugins/console/public/quarantined/_app.scss
+++ b/src/legacy/core_plugins/console/public/quarantined/_app.scss
@@ -1,6 +1,7 @@
 // TODO: Move all of the styles here (should be modularised by, e.g., CSS-in-JS or CSS modules).
 #consoleRoot {
-  height: 100%;
+  display: flex;
+  flex: 1 1 auto;
   // Make sure the editor actions don't create scrollbars on this container
   // SASSTODO: Uncomment when tooltips are EUI-ified (inside portals)
   overflow: hidden;
diff --git a/src/legacy/core_plugins/console/public/quarantined/src/es.js b/src/legacy/core_plugins/console/public/quarantined/src/es.js
index db5e153cec3d8f..914142f5fb4b5e 100644
--- a/src/legacy/core_plugins/console/public/quarantined/src/es.js
+++ b/src/legacy/core_plugins/console/public/quarantined/src/es.js
@@ -35,11 +35,6 @@ export function getContentType(body) {
 export function send(method, path, data) {
   const wrappedDfd = $.Deferred();  // eslint-disable-line new-cap
 
-  const isGetRequest = /^get$/i.test(method);
-  if (data && isGetRequest) {
-    method = 'POST';
-  }
-
   const options = {
     url: '../api/console/proxy?' + formatQueryString({ path, method }),
     data,
@@ -50,7 +45,6 @@ export function send(method, path, data) {
     dataType: 'text', // disable automatic guessing
   };
 
-
   $.ajax(options).then(
     function (data, textStatus, jqXHR) {
       wrappedDfd.resolveWith(this, [data, textStatus, jqXHR]);
diff --git a/src/legacy/core_plugins/console/public/quarantined/src/mappings.js b/src/legacy/core_plugins/console/public/quarantined/src/mappings.js
index 05b436f3ffa2c2..69f122a6078362 100644
--- a/src/legacy/core_plugins/console/public/quarantined/src/mappings.js
+++ b/src/legacy/core_plugins/console/public/quarantined/src/mappings.js
@@ -267,7 +267,7 @@ function retrieveSettings(settingsKey, settingsToRetrieve) {
 
   // Fetch autocomplete info if setting is set to true, and if user has made changes.
   if (currentSettings[settingsKey] && settingsToRetrieve[settingsKey]) {
-    return es.send('GET', settingKeyToPathMap[settingsKey], null, null, true);
+    return es.send('GET', settingKeyToPathMap[settingsKey], null);
   } else {
     const settingsPromise = new $.Deferred();
     // If a user has saved settings, but a field remains checked and unchanged, no need to make changes
diff --git a/src/legacy/core_plugins/console/server/__tests__/proxy_route/body.js b/src/legacy/core_plugins/console/server/__tests__/proxy_route/body.js
index 99b6b4cc60ac85..c9ad09cb017c4a 100644
--- a/src/legacy/core_plugins/console/server/__tests__/proxy_route/body.js
+++ b/src/legacy/core_plugins/console/server/__tests__/proxy_route/body.js
@@ -18,23 +18,21 @@
  */
 
 import sinon from 'sinon';
-import Wreck from '@hapi/wreck';
 import expect from '@kbn/expect';
 import { Server } from 'hapi';
-
+import { createResponseStub } from './stubs';
 import { createProxyRoute } from '../../';
-
-import { createWreckResponseStub } from './stubs';
+import * as requestModule from '../../request';
 
 describe('Console Proxy Route', () => {
   const sandbox = sinon.createSandbox();
   const teardowns = [];
   let request;
 
+
   beforeEach(() => {
     request = async (method, path, response) => {
-      sandbox.stub(Wreck, 'request').callsFake(createWreckResponseStub(response));
-
+      sandbox.stub(requestModule, 'sendRequest').callsFake(createResponseStub(response));
       const server = new Server();
       server.route(
         createProxyRoute({
diff --git a/src/legacy/core_plugins/console/server/__tests__/proxy_route/headers.js b/src/legacy/core_plugins/console/server/__tests__/proxy_route/headers.js
index 039604435c81aa..2e78201f9990e4 100644
--- a/src/legacy/core_plugins/console/server/__tests__/proxy_route/headers.js
+++ b/src/legacy/core_plugins/console/server/__tests__/proxy_route/headers.js
@@ -20,13 +20,13 @@
 import { request } from 'http';
 
 import sinon from 'sinon';
-import Wreck from '@hapi/wreck';
 import expect from '@kbn/expect';
 import { Server } from 'hapi';
+import * as requestModule from '../../request';
 
 import { createProxyRoute } from '../../';
 
-import { createWreckResponseStub } from './stubs';
+import { createResponseStub } from './stubs';
 
 describe('Console Proxy Route', () => {
   const sandbox = sinon.createSandbox();
@@ -34,7 +34,7 @@ describe('Console Proxy Route', () => {
   let setup;
 
   beforeEach(() => {
-    sandbox.stub(Wreck, 'request').callsFake(createWreckResponseStub());
+    sandbox.stub(requestModule, 'sendRequest').callsFake(createResponseStub());
 
     setup = () => {
       const server = new Server();
@@ -77,8 +77,8 @@ describe('Console Proxy Route', () => {
 
       resp.destroy();
 
-      sinon.assert.calledOnce(Wreck.request);
-      const { headers } = Wreck.request.getCall(0).args[2];
+      sinon.assert.calledOnce(requestModule.sendRequest);
+      const { headers } = requestModule.sendRequest.getCall(0).args[0];
       expect(headers)
         .to.have.property('x-forwarded-for')
         .and.not.be('');
diff --git a/src/legacy/core_plugins/console/server/__tests__/proxy_route/params.js b/src/legacy/core_plugins/console/server/__tests__/proxy_route/params.js
index 21209fda53e12e..7c6e221d9ce818 100644
--- a/src/legacy/core_plugins/console/server/__tests__/proxy_route/params.js
+++ b/src/legacy/core_plugins/console/server/__tests__/proxy_route/params.js
@@ -20,13 +20,13 @@
 import { Agent } from 'http';
 
 import sinon from 'sinon';
-import Wreck from '@hapi/wreck';
+import * as requestModule from '../../request';
 import expect from '@kbn/expect';
 import { Server } from 'hapi';
 
 import { createProxyRoute } from '../../';
 
-import { createWreckResponseStub } from './stubs';
+import { createResponseStub } from './stubs';
 
 describe('Console Proxy Route', () => {
   const sandbox = sinon.createSandbox();
@@ -34,7 +34,7 @@ describe('Console Proxy Route', () => {
   let setup;
 
   beforeEach(() => {
-    sandbox.stub(Wreck, 'request').callsFake(createWreckResponseStub());
+    sandbox.stub(requestModule, 'sendRequest').callsFake(createResponseStub());
 
     setup = () => {
       const server = new Server();
@@ -72,6 +72,7 @@ describe('Console Proxy Route', () => {
           const { server } = setup();
           server.route(
             createProxyRoute({
+              baseUrl: 'http://localhost:9200',
               pathFilters: [/^\/foo\//, /^\/bar\//],
             })
           );
@@ -82,7 +83,7 @@ describe('Console Proxy Route', () => {
           });
 
           expect(statusCode).to.be(200);
-          sinon.assert.calledOnce(Wreck.request);
+          sinon.assert.calledOnce(requestModule.sendRequest);
         });
       });
       describe('all match', () => {
@@ -90,6 +91,7 @@ describe('Console Proxy Route', () => {
           const { server } = setup();
           server.route(
             createProxyRoute({
+              baseUrl: 'http://localhost:9200',
               pathFilters: [/^\/foo\//, /^\/bar\//],
             })
           );
@@ -100,7 +102,7 @@ describe('Console Proxy Route', () => {
           });
 
           expect(statusCode).to.be(200);
-          sinon.assert.calledOnce(Wreck.request);
+          sinon.assert.calledOnce(requestModule.sendRequest);
         });
       });
     });
@@ -111,7 +113,7 @@ describe('Console Proxy Route', () => {
 
         const getConfigForReq = sinon.stub().returns({});
 
-        server.route(createProxyRoute({ getConfigForReq }));
+        server.route(createProxyRoute({ baseUrl: 'http://localhost:9200', getConfigForReq }));
         await server.inject({
           method: 'POST',
           url: '/api/console/proxy?method=HEAD&path=/index/type/id',
@@ -124,10 +126,10 @@ describe('Console Proxy Route', () => {
         expect(args[0])
           .to.have.property('query')
           .eql({ method: 'HEAD', path: '/index/type/id' });
-        expect(args[1]).to.be('/index/type/id?pretty');
+        expect(args[1]).to.be('http://localhost:9200/index/type/id?pretty=true');
       });
 
-      it('sends the returned timeout, rejectUnauthorized, agent, and base headers to Wreck', async () => {
+      it('sends the returned timeout, agent, and base headers to request', async () => {
         const { server } = setup();
 
         const timeout = Math.round(Math.random() * 10000);
@@ -140,11 +142,12 @@ describe('Console Proxy Route', () => {
 
         server.route(
           createProxyRoute({
+            baseUrl: 'http://localhost:9200',
             getConfigForReq: () => ({
               timeout,
               agent,
-              rejectUnauthorized,
               headers,
+              rejectUnauthorized,
             }),
           })
         );
@@ -154,8 +157,8 @@ describe('Console Proxy Route', () => {
           url: '/api/console/proxy?method=HEAD&path=/index/type/id',
         });
 
-        sinon.assert.calledOnce(Wreck.request);
-        const opts = Wreck.request.getCall(0).args[2];
+        sinon.assert.calledOnce(requestModule.sendRequest);
+        const opts = requestModule.sendRequest.getCall(0).args[0];
         expect(opts).to.have.property('timeout', timeout);
         expect(opts).to.have.property('agent', agent);
         expect(opts).to.have.property('rejectUnauthorized', rejectUnauthorized);
diff --git a/src/legacy/core_plugins/console/server/__tests__/proxy_route/query_string.js b/src/legacy/core_plugins/console/server/__tests__/proxy_route/query_string.js
index ef00fa3a88d321..7cabe891771646 100644
--- a/src/legacy/core_plugins/console/server/__tests__/proxy_route/query_string.js
+++ b/src/legacy/core_plugins/console/server/__tests__/proxy_route/query_string.js
@@ -18,13 +18,13 @@
  */
 
 import sinon from 'sinon';
-import Wreck from '@hapi/wreck';
+import * as requestModule from '../../request';
 import expect from '@kbn/expect';
 import { Server } from 'hapi';
 
 import { createProxyRoute } from '../../';
 
-import { createWreckResponseStub } from './stubs';
+import { createResponseStub } from './stubs';
 
 describe('Console Proxy Route', () => {
   const sandbox = sinon.createSandbox();
@@ -32,7 +32,7 @@ describe('Console Proxy Route', () => {
   let request;
 
   beforeEach(() => {
-    sandbox.stub(Wreck, 'request').callsFake(createWreckResponseStub());
+    sandbox.stub(requestModule, 'sendRequest').callsFake(createResponseStub());
 
     request = async (method, path) => {
       const server = new Server();
@@ -64,40 +64,40 @@ describe('Console Proxy Route', () => {
       describe('contains full url', () => {
         it('treats the url as a path', async () => {
           await request('GET', 'http://evil.com/test');
-          sinon.assert.calledOnce(Wreck.request);
-          const args = Wreck.request.getCall(0).args;
-          expect(args[1]).to.be('http://localhost:9200/http://evil.com/test?pretty');
+          sinon.assert.calledOnce(requestModule.sendRequest);
+          const args = requestModule.sendRequest.getCall(0).args;
+          expect(args[0].uri.href).to.be('http://localhost:9200/http://evil.com/test?pretty=true');
         });
       });
       describe('is missing', () => {
         it('returns a 400 error', async () => {
           const { statusCode } = await request('GET', undefined);
           expect(statusCode).to.be(400);
-          sinon.assert.notCalled(Wreck.request);
+          sinon.assert.notCalled(requestModule.sendRequest);
         });
       });
       describe('is empty', () => {
         it('returns a 400 error', async () => {
           const { statusCode } = await request('GET', '');
           expect(statusCode).to.be(400);
-          sinon.assert.notCalled(Wreck.request);
+          sinon.assert.notCalled(requestModule.sendRequest);
         });
       });
       describe('starts with a slash', () => {
         it('combines well with the base url', async () => {
           await request('GET', '/index/type/id');
-          sinon.assert.calledOnce(Wreck.request);
-          expect(Wreck.request.getCall(0).args[1]).to.be(
-            'http://localhost:9200/index/type/id?pretty'
+          sinon.assert.calledOnce(requestModule.sendRequest);
+          expect(requestModule.sendRequest.getCall(0).args[0].uri.href).to.be(
+            'http://localhost:9200/index/type/id?pretty=true'
           );
         });
       });
       describe(`doesn't start with a slash`, () => {
         it('combines well with the base url', async () => {
           await request('GET', 'index/type/id');
-          sinon.assert.calledOnce(Wreck.request);
-          expect(Wreck.request.getCall(0).args[1]).to.be(
-            'http://localhost:9200/index/type/id?pretty'
+          sinon.assert.calledOnce(requestModule.sendRequest);
+          expect(requestModule.sendRequest.getCall(0).args[0].uri.href).to.be(
+            'http://localhost:9200/index/type/id?pretty=true'
           );
         });
       });
@@ -107,29 +107,29 @@ describe('Console Proxy Route', () => {
         it('returns a 400 error', async () => {
           const { statusCode } = await request(null, '/');
           expect(statusCode).to.be(400);
-          sinon.assert.notCalled(Wreck.request);
+          sinon.assert.notCalled(requestModule.sendRequest);
         });
       });
       describe('is empty', () => {
         it('returns a 400 error', async () => {
           const { statusCode } = await request('', '/');
           expect(statusCode).to.be(400);
-          sinon.assert.notCalled(Wreck.request);
+          sinon.assert.notCalled(requestModule.sendRequest);
         });
       });
       describe('is an invalid http method', () => {
         it('returns a 400 error', async () => {
           const { statusCode } = await request('foo', '/');
           expect(statusCode).to.be(400);
-          sinon.assert.notCalled(Wreck.request);
+          sinon.assert.notCalled(requestModule.sendRequest);
         });
       });
       describe('is mixed case', () => {
         it('sends a request with the exact method', async () => {
           const { statusCode } = await request('HeAd', '/');
           expect(statusCode).to.be(200);
-          sinon.assert.calledOnce(Wreck.request);
-          expect(Wreck.request.getCall(0).args[0]).to.be('HeAd');
+          sinon.assert.calledOnce(requestModule.sendRequest);
+          expect(requestModule.sendRequest.getCall(0).args[0].method).to.be('HeAd');
         });
       });
     });
diff --git a/src/legacy/core_plugins/console/server/__tests__/proxy_route/stubs.js b/src/legacy/core_plugins/console/server/__tests__/proxy_route/stubs.js
index 78efef84c97501..6305741b4af110 100644
--- a/src/legacy/core_plugins/console/server/__tests__/proxy_route/stubs.js
+++ b/src/legacy/core_plugins/console/server/__tests__/proxy_route/stubs.js
@@ -19,7 +19,7 @@
 
 import { Readable } from 'stream';
 
-export function createWreckResponseStub(response) {
+export function createResponseStub(response) {
   return async () => {
     const resp = new Readable({
       read() {
diff --git a/src/legacy/core_plugins/console/server/elasticsearch_proxy_config.js b/src/legacy/core_plugins/console/server/elasticsearch_proxy_config.ts
similarity index 78%
rename from src/legacy/core_plugins/console/server/elasticsearch_proxy_config.js
rename to src/legacy/core_plugins/console/server/elasticsearch_proxy_config.ts
index 1a7f7396b7e0d9..9e7c814aa57a46 100644
--- a/src/legacy/core_plugins/console/server/elasticsearch_proxy_config.js
+++ b/src/legacy/core_plugins/console/server/elasticsearch_proxy_config.ts
@@ -23,13 +23,13 @@ import http from 'http';
 import https from 'https';
 import url from 'url';
 
-const readFile = (file) => readFileSync(file, 'utf8');
+const readFile = (file: string) => readFileSync(file, 'utf8');
 
-const createAgent = (legacyConfig) => {
+const createAgent = (legacyConfig: any) => {
   const target = url.parse(_.head(legacyConfig.hosts));
-  if (!/^https/.test(target.protocol)) return new http.Agent();
+  if (!/^https/.test(target.protocol || '')) return new http.Agent();
 
-  const agentOptions = {};
+  const agentOptions: https.AgentOptions = {};
 
   const verificationMode = legacyConfig.ssl && legacyConfig.ssl.verificationMode;
   switch (verificationMode) {
@@ -40,7 +40,7 @@ const createAgent = (legacyConfig) => {
       agentOptions.rejectUnauthorized = true;
 
       // by default, NodeJS is checking the server identify
-      agentOptions.checkServerIdentity = _.noop;
+      agentOptions.checkServerIdentity = _.noop as any;
       break;
     case 'full':
       agentOptions.rejectUnauthorized = true;
@@ -49,8 +49,11 @@ const createAgent = (legacyConfig) => {
       throw new Error(`Unknown ssl verificationMode: ${verificationMode}`);
   }
 
-  if (legacyConfig.ssl && Array.isArray(legacyConfig.ssl.certificateAuthorities)
-      && legacyConfig.ssl.certificateAuthorities.length > 0) {
+  if (
+    legacyConfig.ssl &&
+    Array.isArray(legacyConfig.ssl.certificateAuthorities) &&
+    legacyConfig.ssl.certificateAuthorities.length > 0
+  ) {
     agentOptions.ca = legacyConfig.ssl.certificateAuthorities.map(readFile);
   }
 
@@ -68,9 +71,9 @@ const createAgent = (legacyConfig) => {
   return new https.Agent(agentOptions);
 };
 
-export const getElasticsearchProxyConfig = (legacyConfig) => {
+export const getElasticsearchProxyConfig = (legacyConfig: any) => {
   return {
     timeout: legacyConfig.requestTimeout.asMilliseconds(),
-    agent: createAgent(legacyConfig)
+    agent: createAgent(legacyConfig),
   };
 };
diff --git a/src/legacy/core_plugins/console/server/proxy_route.js b/src/legacy/core_plugins/console/server/proxy_route.js
index 24179865ea7c7f..8ce828879a677a 100644
--- a/src/legacy/core_plugins/console/server/proxy_route.js
+++ b/src/legacy/core_plugins/console/server/proxy_route.js
@@ -19,22 +19,19 @@
 
 import Joi from 'joi';
 import Boom from 'boom';
-import Wreck from '@hapi/wreck';
 import { trimLeft, trimRight } from 'lodash';
+import { sendRequest } from './request';
+import * as url from 'url';
 
-function resolveUri(base, path) {
-  let pathToUse = `${trimRight(base, '/')}/${trimLeft(path, '/')}`;
-  const questionMarkIndex = pathToUse.indexOf('?');
-  // no query string in pathToUse, append '?pretty'
-  if (questionMarkIndex === -1) {
-    pathToUse = `${pathToUse}?pretty`;
-  } else {
-    // pathToUse has query string, append '&pretty'
-    pathToUse = `${pathToUse}&pretty`;
-  } // appending pretty here to have Elasticsearch do the JSON formatting, as doing
+function toURL(base, path) {
+  const urlResult = new url.URL(`${trimRight(base, '/')}/${trimLeft(path, '/')}`);
+  // Appending pretty here to have Elasticsearch do the JSON formatting, as doing
   // in JS can lead to data loss (7.0 will get munged into 7, thus losing indication of
   // measurement precision)
-  return pathToUse;
+  if (!urlResult.searchParams.get('pretty')) {
+    urlResult.searchParams.append('pretty', 'true');
+  }
+  return urlResult;
 }
 
 function getProxyHeaders(req) {
@@ -73,7 +70,6 @@ export const createProxyRoute = ({
       output: 'stream',
       parse: false,
     },
-
     validate: {
       query: Joi.object()
         .keys({
@@ -104,43 +100,46 @@ export const createProxyRoute = ({
     handler: async (req, h) => {
       const { payload, query } = req;
       const { path, method } = query;
-      const uri = resolveUri(baseUrl, path);
-
-      const { timeout, rejectUnauthorized, agent, headers } = getConfigForReq(req, uri);
-      const makeRequest = async payloadToSend => {
-        const wreckOptions = {
-          payload: payloadToSend,
-          timeout,
-          rejectUnauthorized,
-          agent,
-          headers: {
-            ...headers,
-            ...getProxyHeaders(req),
-          },
-        };
-
-        const esResponse = await Wreck.request(method, uri, wreckOptions);
-
-        if (method.toUpperCase() !== 'HEAD') {
-          return h
-            .response(esResponse)
-            .code(esResponse.statusCode)
-            .header('warning', esResponse.headers.warning);
-        }
+      const uri = toURL(baseUrl, path);
 
-        return h
-          .response(`${esResponse.statusCode} - ${esResponse.statusMessage}`)
-          .code(esResponse.statusCode)
-          .type('text/plain')
-          .header('warning', esResponse.headers.warning);
+      // Because this can technically be provided by a settings-defined proxy config, we need to
+      // preserve these property names to maintain BWC.
+      const { timeout, agent, headers, rejectUnauthorized } = getConfigForReq(req, uri.toString());
+
+      const requestHeaders = {
+        ...headers,
+        ...getProxyHeaders(req),
       };
-      // Wreck assumes that DELETE requests will not have a body, and thus it does not
-      // parse the payload to pass it along, so we have to do this manually here.
-      if (method.toUpperCase() === 'DELETE') {
-        const data = await Wreck.read(payload);
-        return await makeRequest(data);
+
+      const esIncomingMessage = await sendRequest({
+        method,
+        headers: requestHeaders,
+        uri,
+        timeout,
+        payload,
+        rejectUnauthorized,
+        agent,
+      });
+
+      const {
+        statusCode,
+        statusMessage,
+        headers: responseHeaders,
+      } = esIncomingMessage;
+
+      const { warning } = responseHeaders;
+
+      if (method.toUpperCase() !== 'HEAD') {
+        return h
+          .response(esIncomingMessage)
+          .code(statusCode)
+          .header('warning', warning);
       } else {
-        return await makeRequest(payload);
+        return h
+          .response(`${statusCode} - ${statusMessage}`)
+          .code(statusCode)
+          .type('text/plain')
+          .header('warning', warning);
       }
     },
   },
diff --git a/src/legacy/core_plugins/console/server/request.test.ts b/src/legacy/core_plugins/console/server/request.test.ts
new file mode 100644
index 00000000000000..463649a0902954
--- /dev/null
+++ b/src/legacy/core_plugins/console/server/request.test.ts
@@ -0,0 +1,63 @@
+/*
+ * 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 http from 'http';
+import * as sinon from 'sinon';
+import { sendRequest } from './request';
+import { URL } from 'url';
+import { fail } from 'assert';
+
+describe(`Console's send request`, () => {
+  let sandbox: sinon.SinonSandbox;
+  let stub: sinon.SinonStub;
+  let fakeRequest: http.ClientRequest;
+
+  beforeEach(() => {
+    sandbox = sinon.createSandbox();
+    stub = sandbox.stub(http, 'request').callsFake(() => {
+      fakeRequest = {
+        abort: sinon.stub(),
+        on() {},
+        once() {},
+      } as any;
+      return fakeRequest;
+    });
+  });
+
+  afterEach(() => {
+    stub.restore();
+    fakeRequest = null as any;
+  });
+
+  it('correctly implements timeout and abort mechanism', async () => {
+    try {
+      await sendRequest({
+        agent: null as any,
+        headers: {},
+        method: 'get',
+        payload: null as any,
+        timeout: 0, // immediately timeout
+        uri: new URL('http://noone.nowhere.com'),
+      });
+      fail('Should not reach here!');
+    } catch (e) {
+      expect(e.message).toEqual('Client request timeout');
+      expect((fakeRequest.abort as sinon.SinonStub).calledOnce).toBe(true);
+    }
+  });
+});
diff --git a/src/legacy/core_plugins/console/server/request.ts b/src/legacy/core_plugins/console/server/request.ts
new file mode 100644
index 00000000000000..0082f3591a1323
--- /dev/null
+++ b/src/legacy/core_plugins/console/server/request.ts
@@ -0,0 +1,107 @@
+/*
+ * 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 http from 'http';
+import https from 'https';
+import net from 'net';
+import stream from 'stream';
+import Boom from 'boom';
+import { URL } from 'url';
+
+interface Args {
+  method: 'get' | 'post' | 'put' | 'delete' | 'patch' | 'head';
+  agent: http.Agent;
+  uri: URL;
+  payload: stream.Stream;
+  timeout: number;
+  headers: http.OutgoingHttpHeaders;
+  rejectUnauthorized?: boolean;
+}
+
+// We use a modified version of Hapi's Wreck because Hapi, Axios, and Superagent don't support GET requests
+// with bodies, but ES APIs do. Similarly with DELETE requests with bodies. Another library, `request`
+// diverged too much from current behaviour.
+export const sendRequest = ({
+  method,
+  headers,
+  agent,
+  uri,
+  timeout,
+  payload,
+  rejectUnauthorized,
+}: Args) => {
+  const { hostname, port, protocol, pathname, search } = uri;
+  const client = uri.protocol === 'https:' ? https : http;
+  let resolved = false;
+
+  let resolve: any;
+  let reject: any;
+  const reqPromise = new Promise<http.ServerResponse>((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+
+  const req = client.request({
+    method: method.toUpperCase(),
+    // We support overriding this on a per request basis to support legacy proxy config. See ./proxy_config.
+    rejectUnauthorized: typeof rejectUnauthorized === 'boolean' ? rejectUnauthorized : undefined,
+    host: hostname,
+    port: port === '' ? undefined : Number(port),
+    protocol,
+    path: `${pathname}${search || ''}`,
+    headers: {
+      ...headers,
+      'content-type': 'application/json',
+      'transfer-encoding': 'chunked',
+      host: hostname,
+    },
+    agent,
+  });
+
+  req.once('response', res => {
+    resolved = true;
+    resolve(res);
+  });
+
+  req.once('socket', (socket: net.Socket) => {
+    if (!socket.connecting) {
+      payload.pipe(req);
+    } else {
+      socket.once('connect', () => {
+        payload.pipe(req);
+      });
+    }
+  });
+
+  const onError = () => reject();
+  req.once('error', onError);
+
+  const timeoutPromise = new Promise<any>((timeoutResolve, timeoutReject) => {
+    setTimeout(() => {
+      if (!req.aborted && !req.socket) req.abort();
+      if (!resolved) {
+        timeoutReject(Boom.gatewayTimeout('Client request timeout'));
+      } else {
+        timeoutResolve();
+      }
+    }, timeout);
+  });
+
+  return Promise.race<http.ServerResponse>([reqPromise, timeoutPromise]);
+};
diff --git a/src/legacy/core_plugins/data/public/index.ts b/src/legacy/core_plugins/data/public/index.ts
index d96e3be8d7e380..b9554310e2413d 100644
--- a/src/legacy/core_plugins/data/public/index.ts
+++ b/src/legacy/core_plugins/data/public/index.ts
@@ -18,7 +18,7 @@
  */
 
 // /// Define plugin function
-import { DataPlugin as Plugin, DataSetup } from './plugin';
+import { DataPlugin as Plugin, DataSetup, DataStart } from './plugin';
 
 export function plugin() {
   return new Plugin();
@@ -28,6 +28,7 @@ export function plugin() {
 
 /** @public types */
 export type DataSetup = DataSetup;
+export type DataStart = DataStart;
 
 export { FilterBar, ApplyFiltersPopover } from './filter';
 export {
diff --git a/src/legacy/core_plugins/data/public/index_patterns/index_patterns/index_patterns.ts b/src/legacy/core_plugins/data/public/index_patterns/index_patterns/index_patterns.ts
index d4435b6bdd66ca..21bbdb22e6d9e3 100644
--- a/src/legacy/core_plugins/data/public/index_patterns/index_patterns/index_patterns.ts
+++ b/src/legacy/core_plugins/data/public/index_patterns/index_patterns/index_patterns.ts
@@ -102,6 +102,12 @@ export class IndexPatterns {
       indexPatternCache.clearAll();
     }
   };
+  getCache = async () => {
+    if (!this.savedObjectsCache) {
+      await this.refreshSavedObjectsCache();
+    }
+    return this.savedObjectsCache;
+  };
 
   getDefault = async () => {
     const defaultIndexPatternId = this.config.get('defaultIndex');
diff --git a/src/legacy/core_plugins/data/public/legacy.ts b/src/legacy/core_plugins/data/public/legacy.ts
index c3618d412f4258..80104fc1991b09 100644
--- a/src/legacy/core_plugins/data/public/legacy.ts
+++ b/src/legacy/core_plugins/data/public/legacy.ts
@@ -45,4 +45,7 @@ export const setup = dataPlugin.setup(npSetup.core, {
   __LEGACY: legacyPlugin.setup(),
 });
 
-export const start = dataPlugin.start(npStart.core);
+export const start = dataPlugin.start(npStart.core, {
+  data: npStart.plugins.data,
+  __LEGACY: legacyPlugin.start(),
+});
diff --git a/src/legacy/core_plugins/data/public/plugin.ts b/src/legacy/core_plugins/data/public/plugin.ts
index aec97b02bc2b9f..a5aa55673cac66 100644
--- a/src/legacy/core_plugins/data/public/plugin.ts
+++ b/src/legacy/core_plugins/data/public/plugin.ts
@@ -18,12 +18,16 @@
  */
 
 import { CoreSetup, CoreStart, Plugin } from '../../../../core/public';
-import { SearchService, SearchSetup } from './search';
+import { SearchService, SearchSetup, createSearchBar, StatetfulSearchBarProps } from './search';
 import { QueryService, QuerySetup } from './query';
 import { FilterService, FilterSetup } from './filter';
 import { TimefilterService, TimefilterSetup } from './timefilter';
 import { IndexPatternsService, IndexPatternsSetup } from './index_patterns';
-import { LegacyDependenciesPluginSetup } from './shim/legacy_dependencies_plugin';
+import {
+  LegacyDependenciesPluginSetup,
+  LegacyDependenciesPluginStart,
+} from './shim/legacy_dependencies_plugin';
+import { DataPublicPluginStart } from '../../../../plugins/data/public';
 
 /**
  * Interface for any dependencies on other plugins' `setup` contracts.
@@ -34,6 +38,11 @@ export interface DataPluginSetupDependencies {
   __LEGACY: LegacyDependenciesPluginSetup;
 }
 
+export interface DataPluginStartDependencies {
+  data: DataPublicPluginStart;
+  __LEGACY: LegacyDependenciesPluginStart;
+}
+
 /**
  * Interface for this plugin's returned `setup` contract.
  *
@@ -47,6 +56,22 @@ export interface DataSetup {
   timefilter: TimefilterSetup;
 }
 
+/**
+ * Interface for this plugin's returned `start` contract.
+ *
+ * @public
+ */
+export interface DataStart {
+  indexPatterns: IndexPatternsSetup;
+  filter: FilterSetup;
+  query: QuerySetup;
+  search: SearchSetup;
+  timefilter: TimefilterSetup;
+  ui: {
+    SearchBar: React.ComponentType<StatetfulSearchBarProps>;
+  };
+}
+
 /**
  * Data Plugin - public
  *
@@ -58,7 +83,9 @@ export interface DataSetup {
  * in the setup/start interfaces. The remaining items exported here are either types,
  * or static code.
  */
-export class DataPlugin implements Plugin<DataSetup, {}, DataPluginSetupDependencies> {
+export class DataPlugin
+  implements
+    Plugin<DataSetup, DataStart, DataPluginSetupDependencies, DataPluginStartDependencies> {
   // Exposed services, sorted alphabetically
   private readonly filter: FilterService = new FilterService();
   private readonly indexPatterns: IndexPatternsService = new IndexPatternsService();
@@ -96,9 +123,20 @@ export class DataPlugin implements Plugin<DataSetup, {}, DataPluginSetupDependen
     return this.setupApi;
   }
 
-  public start(core: CoreStart) {
+  public start(core: CoreStart, { __LEGACY, data }: DataPluginStartDependencies) {
+    const SearchBar = createSearchBar({
+      core,
+      store: __LEGACY.storage,
+      timefilter: this.setupApi.timefilter,
+      filterManager: this.setupApi.filter.filterManager,
+      autocomplete: data.autocomplete,
+    });
+
     return {
       ...this.setupApi!,
+      ui: {
+        SearchBar,
+      },
     };
   }
 
diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar_input.test.tsx.snap b/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar_input.test.tsx.snap
index 8a0347875d7787..6fdbf4fce45537 100644
--- a/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar_input.test.tsx.snap
+++ b/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar_input.test.tsx.snap
@@ -1,63 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`QueryBarInput Should disable autoFocus on EuiFieldText when disableAutoFocus prop is true 1`] = `
-<QueryBarInputUI
-  appName="discover"
-  disableAutoFocus={true}
-  http={
-    Object {
-      "addLoadingCount": [MockFunction],
-      "basePath": Object {
-        "get": [MockFunction],
-        "prepend": [MockFunction],
-        "remove": [MockFunction],
-      },
-      "delete": [MockFunction],
-      "fetch": [MockFunction],
-      "get": [MockFunction],
-      "getLoadingCount$": [MockFunction],
-      "head": [MockFunction],
-      "intercept": [MockFunction],
-      "options": [MockFunction],
-      "patch": [MockFunction],
-      "post": [MockFunction],
-      "put": [MockFunction],
-      "removeAllInterceptors": [MockFunction],
-      "stop": [MockFunction],
-    }
-  }
-  indexPatterns={
-    Array [
+<I18nProvider>
+  <IntlProvider
+    defaultLocale="en"
+    formats={
       Object {
-        "fields": Array [
-          Object {
-            "aggregatable": true,
-            "esTypes": Array [
-              "integer",
-            ],
-            "filterable": true,
-            "name": "response",
-            "searchable": true,
-            "type": "number",
-          },
-        ],
-        "id": "1234",
-        "title": "logstash-*",
-      },
-    ]
-  }
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
         "date": Object {
           "full": Object {
             "day": "numeric",
@@ -132,381 +80,704 @@ exports[`QueryBarInput Should disable autoFocus on EuiFieldText when disableAuto
             "minute": "numeric",
           },
         },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  onSubmit={[Function]}
-  query={
-    Object {
-      "language": "kuery",
-      "query": "response:200",
-    }
-  }
-  savedObjectsClient={
-    Object {
-      "bulkCreate": [MockFunction],
-      "bulkGet": [MockFunction],
-      "create": [MockFunction],
-      "delete": [MockFunction],
-      "find": [MockFunction],
-      "get": [MockFunction],
-      "update": [MockFunction],
-    }
-  }
-  screenTitle="Another Screen"
-  store={
-    Object {
-      "clear": [MockFunction],
-      "get": [MockFunction],
-      "remove": [MockFunction],
-      "set": [MockFunction],
-      "store": Object {
-        "clear": [MockFunction],
-        "getItem": [MockFunction],
-        "key": [MockFunction],
-        "length": 0,
-        "removeItem": [MockFunction],
-        "setItem": [MockFunction],
-      },
-    }
-  }
-  uiSettings={
-    Object {
-      "get": [MockFunction] {
-        "calls": Array [
-          Array [
-            "history:limit",
-          ],
-        ],
-        "results": Array [
-          Object {
-            "type": "return",
-            "value": undefined,
-          },
-        ],
-      },
-      "get$": [MockFunction],
-      "getAll": [MockFunction],
-      "getSaved$": [MockFunction],
-      "getUpdate$": [MockFunction],
-      "getUpdateErrors$": [MockFunction],
-      "isCustom": [MockFunction],
-      "isDeclared": [MockFunction],
-      "isDefault": [MockFunction],
-      "isOverridden": [MockFunction],
-      "overrideLocalDefault": [MockFunction],
-      "remove": [MockFunction],
-      "set": [MockFunction],
-      "stop": [MockFunction],
+      }
     }
-  }
->
-  <EuiOutsideClickDetector
-    onOutsideClick={[Function]}
+    locale="en"
+    messages={Object {}}
+    textComponent={Symbol(react.fragment)}
   >
-    <div
-      aria-controls="kbnTypeahead__items"
-      aria-expanded={false}
-      aria-haspopup="true"
-      aria-owns="kbnTypeahead__items"
-      onMouseDown={[Function]}
-      onMouseUp={[Function]}
-      onTouchEnd={[Function]}
-      onTouchStart={[Function]}
-      role="combobox"
-      style={
-        Object {
-          "position": "relative",
+    <PseudoLocaleWrapper>
+      <Provider
+        services={
+          Object {
+            "appName": "test",
+            "http": Object {
+              "addLoadingCount": [MockFunction],
+              "basePath": Object {
+                "get": [MockFunction],
+                "prepend": [MockFunction],
+                "remove": [MockFunction],
+              },
+              "delete": [MockFunction],
+              "fetch": [MockFunction],
+              "get": [MockFunction],
+              "getLoadingCount$": [MockFunction],
+              "head": [MockFunction],
+              "intercept": [MockFunction],
+              "options": [MockFunction],
+              "patch": [MockFunction],
+              "post": [MockFunction],
+              "put": [MockFunction],
+              "removeAllInterceptors": [MockFunction],
+              "stop": [MockFunction],
+            },
+            "notifications": Object {
+              "toasts": Object {
+                "add": [MockFunction],
+                "addDanger": [MockFunction],
+                "addError": [MockFunction],
+                "addSuccess": [MockFunction],
+                "addWarning": [MockFunction],
+                "get$": [MockFunction],
+                "remove": [MockFunction],
+              },
+            },
+            "savedObjects": Object {
+              "client": Object {
+                "bulkCreate": [MockFunction],
+                "bulkGet": [MockFunction],
+                "create": [MockFunction],
+                "delete": [MockFunction],
+                "find": [MockFunction],
+                "get": [MockFunction],
+                "update": [MockFunction],
+              },
+            },
+            "store": Object {
+              "clear": [MockFunction],
+              "get": [MockFunction],
+              "remove": [MockFunction],
+              "set": [MockFunction],
+              "store": Object {
+                "clear": [MockFunction],
+                "getItem": [MockFunction],
+                "key": [MockFunction],
+                "length": 0,
+                "removeItem": [MockFunction],
+                "setItem": [MockFunction],
+              },
+            },
+            "uiSettings": Object {
+              "get": [MockFunction] {
+                "calls": Array [
+                  Array [
+                    "history:limit",
+                  ],
+                ],
+                "results": Array [
+                  Object {
+                    "type": "return",
+                    "value": undefined,
+                  },
+                ],
+              },
+              "get$": [MockFunction],
+              "getAll": [MockFunction],
+              "getSaved$": [MockFunction],
+              "getUpdate$": [MockFunction],
+              "getUpdateErrors$": [MockFunction],
+              "isCustom": [MockFunction],
+              "isDeclared": [MockFunction],
+              "isDefault": [MockFunction],
+              "isOverridden": [MockFunction],
+              "overrideLocalDefault": [MockFunction],
+              "remove": [MockFunction],
+              "set": [MockFunction],
+              "stop": [MockFunction],
+            },
+          }
         }
-      }
-    >
-      <div
-        role="search"
       >
-        <div
-          className="kuiLocalSearchAssistedInput"
+        <InjectIntl(enhancedType)
+          disableAutoFocus={true}
+          indexPatterns={
+            Array [
+              Object {
+                "fields": Array [
+                  Object {
+                    "aggregatable": true,
+                    "esTypes": Array [
+                      "integer",
+                    ],
+                    "filterable": true,
+                    "name": "response",
+                    "searchable": true,
+                    "type": "number",
+                  },
+                ],
+                "id": "1234",
+                "title": "logstash-*",
+              },
+            ]
+          }
+          intl={null}
+          onSubmit={[Function]}
+          query={
+            Object {
+              "language": "kuery",
+              "query": "response:200",
+            }
+          }
+          screenTitle="Another Screen"
         >
-          <EuiFieldText
-            append={
-              <QueryLanguageSwitcher
-                language="kuery"
-                onSelectLanguage={[Function]}
-              />
+          <enhancedType
+            disableAutoFocus={true}
+            indexPatterns={
+              Array [
+                Object {
+                  "fields": Array [
+                    Object {
+                      "aggregatable": true,
+                      "esTypes": Array [
+                        "integer",
+                      ],
+                      "filterable": true,
+                      "name": "response",
+                      "searchable": true,
+                      "type": "number",
+                    },
+                  ],
+                  "id": "1234",
+                  "title": "logstash-*",
+                },
+              ]
             }
-            aria-activedescendant=""
-            aria-autocomplete="list"
-            aria-controls="kbnTypeahead__items"
-            aria-label="You are on search box of Another Screen page. Start typing to search and filter the discover"
-            autoComplete="off"
-            autoFocus={false}
-            compressed={false}
-            data-test-subj="queryInput"
-            fullWidth={true}
-            http={
+            intl={
               Object {
-                "addLoadingCount": [MockFunction],
-                "basePath": Object {
-                  "get": [MockFunction],
-                  "prepend": [MockFunction],
-                  "remove": [MockFunction],
+                "defaultFormats": Object {},
+                "defaultLocale": "en",
+                "formatDate": [Function],
+                "formatHTMLMessage": [Function],
+                "formatMessage": [Function],
+                "formatNumber": [Function],
+                "formatPlural": [Function],
+                "formatRelative": [Function],
+                "formatTime": [Function],
+                "formats": Object {
+                  "date": Object {
+                    "full": Object {
+                      "day": "numeric",
+                      "month": "long",
+                      "weekday": "long",
+                      "year": "numeric",
+                    },
+                    "long": Object {
+                      "day": "numeric",
+                      "month": "long",
+                      "year": "numeric",
+                    },
+                    "medium": Object {
+                      "day": "numeric",
+                      "month": "short",
+                      "year": "numeric",
+                    },
+                    "short": Object {
+                      "day": "numeric",
+                      "month": "numeric",
+                      "year": "2-digit",
+                    },
+                  },
+                  "number": Object {
+                    "currency": Object {
+                      "style": "currency",
+                    },
+                    "percent": Object {
+                      "style": "percent",
+                    },
+                  },
+                  "relative": Object {
+                    "days": Object {
+                      "units": "day",
+                    },
+                    "hours": Object {
+                      "units": "hour",
+                    },
+                    "minutes": Object {
+                      "units": "minute",
+                    },
+                    "months": Object {
+                      "units": "month",
+                    },
+                    "seconds": Object {
+                      "units": "second",
+                    },
+                    "years": Object {
+                      "units": "year",
+                    },
+                  },
+                  "time": Object {
+                    "full": Object {
+                      "hour": "numeric",
+                      "minute": "numeric",
+                      "second": "numeric",
+                      "timeZoneName": "short",
+                    },
+                    "long": Object {
+                      "hour": "numeric",
+                      "minute": "numeric",
+                      "second": "numeric",
+                      "timeZoneName": "short",
+                    },
+                    "medium": Object {
+                      "hour": "numeric",
+                      "minute": "numeric",
+                      "second": "numeric",
+                    },
+                    "short": Object {
+                      "hour": "numeric",
+                      "minute": "numeric",
+                    },
+                  },
                 },
-                "delete": [MockFunction],
-                "fetch": [MockFunction],
-                "get": [MockFunction],
-                "getLoadingCount$": [MockFunction],
-                "head": [MockFunction],
-                "intercept": [MockFunction],
-                "options": [MockFunction],
-                "patch": [MockFunction],
-                "post": [MockFunction],
-                "put": [MockFunction],
-                "removeAllInterceptors": [MockFunction],
-                "stop": [MockFunction],
+                "formatters": Object {
+                  "getDateTimeFormat": [Function],
+                  "getMessageFormat": [Function],
+                  "getNumberFormat": [Function],
+                  "getPluralFormat": [Function],
+                  "getRelativeFormat": [Function],
+                },
+                "locale": "en",
+                "messages": Object {},
+                "now": [Function],
+                "onError": [Function],
+                "textComponent": Symbol(react.fragment),
+                "timeZone": null,
               }
             }
-            inputRef={[Function]}
-            isLoading={false}
-            onChange={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            onKeyUp={[Function]}
-            placeholder="Search"
-            role="textbox"
-            spellCheck={false}
-            type="text"
-            value="response:200"
+            onSubmit={[Function]}
+            query={
+              Object {
+                "language": "kuery",
+                "query": "response:200",
+              }
+            }
+            screenTitle="Another Screen"
           >
-            <EuiFormControlLayout
-              append={
-                <QueryLanguageSwitcher
-                  language="kuery"
-                  onSelectLanguage={[Function]}
-                />
+            <QueryBarInputUI
+              disableAutoFocus={true}
+              indexPatterns={
+                Array [
+                  Object {
+                    "fields": Array [
+                      Object {
+                        "aggregatable": true,
+                        "esTypes": Array [
+                          "integer",
+                        ],
+                        "filterable": true,
+                        "name": "response",
+                        "searchable": true,
+                        "type": "number",
+                      },
+                    ],
+                    "id": "1234",
+                    "title": "logstash-*",
+                  },
+                ]
+              }
+              intl={
+                Object {
+                  "defaultFormats": Object {},
+                  "defaultLocale": "en",
+                  "formatDate": [Function],
+                  "formatHTMLMessage": [Function],
+                  "formatMessage": [Function],
+                  "formatNumber": [Function],
+                  "formatPlural": [Function],
+                  "formatRelative": [Function],
+                  "formatTime": [Function],
+                  "formats": Object {
+                    "date": Object {
+                      "full": Object {
+                        "day": "numeric",
+                        "month": "long",
+                        "weekday": "long",
+                        "year": "numeric",
+                      },
+                      "long": Object {
+                        "day": "numeric",
+                        "month": "long",
+                        "year": "numeric",
+                      },
+                      "medium": Object {
+                        "day": "numeric",
+                        "month": "short",
+                        "year": "numeric",
+                      },
+                      "short": Object {
+                        "day": "numeric",
+                        "month": "numeric",
+                        "year": "2-digit",
+                      },
+                    },
+                    "number": Object {
+                      "currency": Object {
+                        "style": "currency",
+                      },
+                      "percent": Object {
+                        "style": "percent",
+                      },
+                    },
+                    "relative": Object {
+                      "days": Object {
+                        "units": "day",
+                      },
+                      "hours": Object {
+                        "units": "hour",
+                      },
+                      "minutes": Object {
+                        "units": "minute",
+                      },
+                      "months": Object {
+                        "units": "month",
+                      },
+                      "seconds": Object {
+                        "units": "second",
+                      },
+                      "years": Object {
+                        "units": "year",
+                      },
+                    },
+                    "time": Object {
+                      "full": Object {
+                        "hour": "numeric",
+                        "minute": "numeric",
+                        "second": "numeric",
+                        "timeZoneName": "short",
+                      },
+                      "long": Object {
+                        "hour": "numeric",
+                        "minute": "numeric",
+                        "second": "numeric",
+                        "timeZoneName": "short",
+                      },
+                      "medium": Object {
+                        "hour": "numeric",
+                        "minute": "numeric",
+                        "second": "numeric",
+                      },
+                      "short": Object {
+                        "hour": "numeric",
+                        "minute": "numeric",
+                      },
+                    },
+                  },
+                  "formatters": Object {
+                    "getDateTimeFormat": [Function],
+                    "getMessageFormat": [Function],
+                    "getNumberFormat": [Function],
+                    "getPluralFormat": [Function],
+                    "getRelativeFormat": [Function],
+                  },
+                  "locale": "en",
+                  "messages": Object {},
+                  "now": [Function],
+                  "onError": [Function],
+                  "textComponent": Symbol(react.fragment),
+                  "timeZone": null,
+                }
               }
-              compressed={false}
-              fullWidth={true}
-              isLoading={false}
+              kibana={
+                Object {
+                  "notifications": Object {
+                    "toasts": Object {
+                      "danger": [Function],
+                      "show": [Function],
+                      "success": [Function],
+                      "warning": [Function],
+                    },
+                  },
+                  "overlays": Object {
+                    "openFlyout": [Function],
+                    "openModal": [Function],
+                  },
+                  "services": Object {
+                    "appName": "test",
+                    "http": Object {
+                      "addLoadingCount": [MockFunction],
+                      "basePath": Object {
+                        "get": [MockFunction],
+                        "prepend": [MockFunction],
+                        "remove": [MockFunction],
+                      },
+                      "delete": [MockFunction],
+                      "fetch": [MockFunction],
+                      "get": [MockFunction],
+                      "getLoadingCount$": [MockFunction],
+                      "head": [MockFunction],
+                      "intercept": [MockFunction],
+                      "options": [MockFunction],
+                      "patch": [MockFunction],
+                      "post": [MockFunction],
+                      "put": [MockFunction],
+                      "removeAllInterceptors": [MockFunction],
+                      "stop": [MockFunction],
+                    },
+                    "notifications": Object {
+                      "toasts": Object {
+                        "add": [MockFunction],
+                        "addDanger": [MockFunction],
+                        "addError": [MockFunction],
+                        "addSuccess": [MockFunction],
+                        "addWarning": [MockFunction],
+                        "get$": [MockFunction],
+                        "remove": [MockFunction],
+                      },
+                    },
+                    "savedObjects": Object {
+                      "client": Object {
+                        "bulkCreate": [MockFunction],
+                        "bulkGet": [MockFunction],
+                        "create": [MockFunction],
+                        "delete": [MockFunction],
+                        "find": [MockFunction],
+                        "get": [MockFunction],
+                        "update": [MockFunction],
+                      },
+                    },
+                    "store": Object {
+                      "clear": [MockFunction],
+                      "get": [MockFunction],
+                      "remove": [MockFunction],
+                      "set": [MockFunction],
+                      "store": Object {
+                        "clear": [MockFunction],
+                        "getItem": [MockFunction],
+                        "key": [MockFunction],
+                        "length": 0,
+                        "removeItem": [MockFunction],
+                        "setItem": [MockFunction],
+                      },
+                    },
+                    "uiSettings": Object {
+                      "get": [MockFunction] {
+                        "calls": Array [
+                          Array [
+                            "history:limit",
+                          ],
+                        ],
+                        "results": Array [
+                          Object {
+                            "type": "return",
+                            "value": undefined,
+                          },
+                        ],
+                      },
+                      "get$": [MockFunction],
+                      "getAll": [MockFunction],
+                      "getSaved$": [MockFunction],
+                      "getUpdate$": [MockFunction],
+                      "getUpdateErrors$": [MockFunction],
+                      "isCustom": [MockFunction],
+                      "isDeclared": [MockFunction],
+                      "isDefault": [MockFunction],
+                      "isOverridden": [MockFunction],
+                      "overrideLocalDefault": [MockFunction],
+                      "remove": [MockFunction],
+                      "set": [MockFunction],
+                      "stop": [MockFunction],
+                    },
+                  },
+                }
+              }
+              onSubmit={[Function]}
+              query={
+                Object {
+                  "language": "kuery",
+                  "query": "response:200",
+                }
+              }
+              screenTitle="Another Screen"
             >
-              <div
-                className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
+              <EuiOutsideClickDetector
+                onOutsideClick={[Function]}
               >
                 <div
-                  className="euiFormControlLayout__childrenWrapper"
-                >
-                  <EuiValidatableControl>
-                    <input
-                      aria-activedescendant=""
-                      aria-autocomplete="list"
-                      aria-controls="kbnTypeahead__items"
-                      aria-label="You are on search box of Another Screen page. Start typing to search and filter the discover"
-                      autoComplete="off"
-                      autoFocus={false}
-                      className="euiFieldText euiFieldText--fullWidth euiFieldText--inGroup"
-                      data-test-subj="queryInput"
-                      http={
-                        Object {
-                          "addLoadingCount": [MockFunction],
-                          "basePath": Object {
-                            "get": [MockFunction],
-                            "prepend": [MockFunction],
-                            "remove": [MockFunction],
-                          },
-                          "delete": [MockFunction],
-                          "fetch": [MockFunction],
-                          "get": [MockFunction],
-                          "getLoadingCount$": [MockFunction],
-                          "head": [MockFunction],
-                          "intercept": [MockFunction],
-                          "options": [MockFunction],
-                          "patch": [MockFunction],
-                          "post": [MockFunction],
-                          "put": [MockFunction],
-                          "removeAllInterceptors": [MockFunction],
-                          "stop": [MockFunction],
-                        }
-                      }
-                      onChange={[Function]}
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      onKeyUp={[Function]}
-                      placeholder="Search"
-                      role="textbox"
-                      spellCheck={false}
-                      type="text"
-                      value="response:200"
-                    />
-                  </EuiValidatableControl>
-                  <EuiFormControlLayoutIcons
-                    isLoading={false}
-                  />
-                </div>
-                <QueryLanguageSwitcher
-                  className="euiFormControlLayout__append"
-                  key="0/.0"
-                  language="kuery"
-                  onSelectLanguage={[Function]}
-                >
-                  <EuiPopover
-                    anchorClassName="euiFormControlLayout__append"
-                    anchorPosition="downRight"
-                    button={
-                      <EuiButtonEmpty
-                        className="euiFormControlLayout__append"
-                        onClick={[Function]}
-                        size="xs"
-                      >
-                        <FormattedMessage
-                          defaultMessage="KQL"
-                          id="data.query.queryBar.kqlLanguageName"
-                          values={Object {}}
-                        />
-                      </EuiButtonEmpty>
+                  aria-expanded={false}
+                  aria-haspopup="true"
+                  aria-label="Search and filter the test page"
+                  onMouseDown={[Function]}
+                  onMouseUp={[Function]}
+                  onTouchEnd={[Function]}
+                  onTouchStart={[Function]}
+                  role="combobox"
+                  style={
+                    Object {
+                      "position": "relative",
                     }
-                    closePopover={[Function]}
-                    display="inlineBlock"
-                    hasArrow={true}
-                    id="popover"
-                    isOpen={false}
-                    ownFocus={true}
-                    panelPaddingSize="m"
-                    withTitle={true}
+                  }
+                >
+                  <div
+                    role="search"
                   >
-                    <EuiOutsideClickDetector
-                      isDisabled={true}
-                      onOutsideClick={[Function]}
+                    <div
+                      className="kuiLocalSearchAssistedInput"
                     >
-                      <div
-                        className="euiPopover euiPopover--anchorDownRight euiPopover--withTitle"
-                        id="popover"
+                      <EuiFieldText
+                        append={
+                          <QueryLanguageSwitcher
+                            language="kuery"
+                            onSelectLanguage={[Function]}
+                          />
+                        }
+                        aria-autocomplete="list"
+                        aria-label="Start typing to search and filter the test page"
+                        autoComplete="off"
+                        autoFocus={false}
+                        compressed={false}
+                        data-test-subj="queryInput"
+                        fullWidth={true}
+                        inputRef={[Function]}
+                        isLoading={false}
+                        onChange={[Function]}
+                        onClick={[Function]}
                         onKeyDown={[Function]}
-                        onMouseDown={[Function]}
-                        onMouseUp={[Function]}
-                        onTouchEnd={[Function]}
-                        onTouchStart={[Function]}
+                        onKeyUp={[Function]}
+                        placeholder="Search"
+                        role="textbox"
+                        spellCheck={false}
+                        type="text"
+                        value="response:200"
                       >
-                        <div
-                          className="euiPopover__anchor euiFormControlLayout__append"
+                        <EuiFormControlLayout
+                          append={
+                            <QueryLanguageSwitcher
+                              language="kuery"
+                              onSelectLanguage={[Function]}
+                            />
+                          }
+                          compressed={false}
+                          fullWidth={true}
+                          isLoading={false}
                         >
-                          <EuiButtonEmpty
-                            className="euiFormControlLayout__append"
-                            onClick={[Function]}
-                            size="xs"
+                          <div
+                            className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
                           >
-                            <button
-                              className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__append"
-                              onClick={[Function]}
-                              type="button"
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
                             >
-                              <span
-                                className="euiButtonEmpty__content"
+                              <EuiValidatableControl>
+                                <input
+                                  aria-autocomplete="list"
+                                  aria-label="Start typing to search and filter the test page"
+                                  autoComplete="off"
+                                  autoFocus={false}
+                                  className="euiFieldText euiFieldText--fullWidth euiFieldText--inGroup"
+                                  data-test-subj="queryInput"
+                                  onChange={[Function]}
+                                  onClick={[Function]}
+                                  onKeyDown={[Function]}
+                                  onKeyUp={[Function]}
+                                  placeholder="Search"
+                                  role="textbox"
+                                  spellCheck={false}
+                                  type="text"
+                                  value="response:200"
+                                />
+                              </EuiValidatableControl>
+                              <EuiFormControlLayoutIcons
+                                isLoading={false}
+                              />
+                            </div>
+                            <QueryLanguageSwitcher
+                              className="euiFormControlLayout__append"
+                              key="0/.0"
+                              language="kuery"
+                              onSelectLanguage={[Function]}
+                            >
+                              <EuiPopover
+                                anchorClassName="euiFormControlLayout__append"
+                                anchorPosition="downRight"
+                                button={
+                                  <EuiButtonEmpty
+                                    className="euiFormControlLayout__append"
+                                    onClick={[Function]}
+                                    size="xs"
+                                  >
+                                    <FormattedMessage
+                                      defaultMessage="KQL"
+                                      id="data.query.queryBar.kqlLanguageName"
+                                      values={Object {}}
+                                    />
+                                  </EuiButtonEmpty>
+                                }
+                                closePopover={[Function]}
+                                display="inlineBlock"
+                                hasArrow={true}
+                                id="popover"
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="m"
+                                withTitle={true}
                               >
-                                <span
-                                  className="euiButtonEmpty__text"
+                                <EuiOutsideClickDetector
+                                  isDisabled={true}
+                                  onOutsideClick={[Function]}
                                 >
-                                  <FormattedMessage
-                                    defaultMessage="KQL"
-                                    id="data.query.queryBar.kqlLanguageName"
-                                    values={Object {}}
+                                  <div
+                                    className="euiPopover euiPopover--anchorDownRight euiPopover--withTitle"
+                                    id="popover"
+                                    onKeyDown={[Function]}
+                                    onMouseDown={[Function]}
+                                    onMouseUp={[Function]}
+                                    onTouchEnd={[Function]}
+                                    onTouchStart={[Function]}
                                   >
-                                    KQL
-                                  </FormattedMessage>
-                                </span>
-                              </span>
-                            </button>
-                          </EuiButtonEmpty>
-                        </div>
-                      </div>
-                    </EuiOutsideClickDetector>
-                  </EuiPopover>
-                </QueryLanguageSwitcher>
-              </div>
-            </EuiFormControlLayout>
-          </EuiFieldText>
-        </div>
-      </div>
-      <SuggestionsComponent
-        index={null}
-        loadMore={[Function]}
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        show={false}
-        suggestions={Array []}
-      />
-    </div>
-  </EuiOutsideClickDetector>
-</QueryBarInputUI>
+                                    <div
+                                      className="euiPopover__anchor euiFormControlLayout__append"
+                                    >
+                                      <EuiButtonEmpty
+                                        className="euiFormControlLayout__append"
+                                        onClick={[Function]}
+                                        size="xs"
+                                      >
+                                        <button
+                                          className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__append"
+                                          onClick={[Function]}
+                                          type="button"
+                                        >
+                                          <span
+                                            className="euiButtonEmpty__content"
+                                          >
+                                            <span
+                                              className="euiButtonEmpty__text"
+                                            >
+                                              <FormattedMessage
+                                                defaultMessage="KQL"
+                                                id="data.query.queryBar.kqlLanguageName"
+                                                values={Object {}}
+                                              >
+                                                KQL
+                                              </FormattedMessage>
+                                            </span>
+                                          </span>
+                                        </button>
+                                      </EuiButtonEmpty>
+                                    </div>
+                                  </div>
+                                </EuiOutsideClickDetector>
+                              </EuiPopover>
+                            </QueryLanguageSwitcher>
+                          </div>
+                        </EuiFormControlLayout>
+                      </EuiFieldText>
+                    </div>
+                  </div>
+                  <SuggestionsComponent
+                    index={null}
+                    loadMore={[Function]}
+                    onClick={[Function]}
+                    onMouseEnter={[Function]}
+                    show={false}
+                    suggestions={Array []}
+                  />
+                </div>
+              </EuiOutsideClickDetector>
+            </QueryBarInputUI>
+          </enhancedType>
+        </InjectIntl(enhancedType)>
+      </Provider>
+    </PseudoLocaleWrapper>
+  </IntlProvider>
+</I18nProvider>
 `;
 
 exports[`QueryBarInput Should pass the query language to the language switcher 1`] = `
-<QueryBarInputUI
-  appName="discover"
-  http={
-    Object {
-      "addLoadingCount": [MockFunction],
-      "basePath": Object {
-        "get": [MockFunction],
-        "prepend": [MockFunction],
-        "remove": [MockFunction],
-      },
-      "delete": [MockFunction],
-      "fetch": [MockFunction],
-      "get": [MockFunction],
-      "getLoadingCount$": [MockFunction],
-      "head": [MockFunction],
-      "intercept": [MockFunction],
-      "options": [MockFunction],
-      "patch": [MockFunction],
-      "post": [MockFunction],
-      "put": [MockFunction],
-      "removeAllInterceptors": [MockFunction],
-      "stop": [MockFunction],
-    }
-  }
-  indexPatterns={
-    Array [
+<I18nProvider>
+  <IntlProvider
+    defaultLocale="en"
+    formats={
       Object {
-        "fields": Array [
-          Object {
-            "aggregatable": true,
-            "esTypes": Array [
-              "integer",
-            ],
-            "filterable": true,
-            "name": "response",
-            "searchable": true,
-            "type": "number",
-          },
-        ],
-        "id": "1234",
-        "title": "logstash-*",
-      },
-    ]
-  }
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
         "date": Object {
           "full": Object {
             "day": "numeric",
@@ -581,381 +852,701 @@ exports[`QueryBarInput Should pass the query language to the language switcher 1
             "minute": "numeric",
           },
         },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  onSubmit={[Function]}
-  query={
-    Object {
-      "language": "lucene",
-      "query": "response:200",
-    }
-  }
-  savedObjectsClient={
-    Object {
-      "bulkCreate": [MockFunction],
-      "bulkGet": [MockFunction],
-      "create": [MockFunction],
-      "delete": [MockFunction],
-      "find": [MockFunction],
-      "get": [MockFunction],
-      "update": [MockFunction],
-    }
-  }
-  screenTitle="Another Screen"
-  store={
-    Object {
-      "clear": [MockFunction],
-      "get": [MockFunction],
-      "remove": [MockFunction],
-      "set": [MockFunction],
-      "store": Object {
-        "clear": [MockFunction],
-        "getItem": [MockFunction],
-        "key": [MockFunction],
-        "length": 0,
-        "removeItem": [MockFunction],
-        "setItem": [MockFunction],
-      },
-    }
-  }
-  uiSettings={
-    Object {
-      "get": [MockFunction] {
-        "calls": Array [
-          Array [
-            "history:limit",
-          ],
-        ],
-        "results": Array [
-          Object {
-            "type": "return",
-            "value": undefined,
-          },
-        ],
-      },
-      "get$": [MockFunction],
-      "getAll": [MockFunction],
-      "getSaved$": [MockFunction],
-      "getUpdate$": [MockFunction],
-      "getUpdateErrors$": [MockFunction],
-      "isCustom": [MockFunction],
-      "isDeclared": [MockFunction],
-      "isDefault": [MockFunction],
-      "isOverridden": [MockFunction],
-      "overrideLocalDefault": [MockFunction],
-      "remove": [MockFunction],
-      "set": [MockFunction],
-      "stop": [MockFunction],
+      }
     }
-  }
->
-  <EuiOutsideClickDetector
-    onOutsideClick={[Function]}
+    locale="en"
+    messages={Object {}}
+    textComponent={Symbol(react.fragment)}
   >
-    <div
-      aria-controls="kbnTypeahead__items"
-      aria-expanded={false}
-      aria-haspopup="true"
-      aria-owns="kbnTypeahead__items"
-      onMouseDown={[Function]}
-      onMouseUp={[Function]}
-      onTouchEnd={[Function]}
-      onTouchStart={[Function]}
-      role="combobox"
-      style={
-        Object {
-          "position": "relative",
+    <PseudoLocaleWrapper>
+      <Provider
+        services={
+          Object {
+            "appName": "test",
+            "http": Object {
+              "addLoadingCount": [MockFunction],
+              "basePath": Object {
+                "get": [MockFunction],
+                "prepend": [MockFunction],
+                "remove": [MockFunction],
+              },
+              "delete": [MockFunction],
+              "fetch": [MockFunction],
+              "get": [MockFunction],
+              "getLoadingCount$": [MockFunction],
+              "head": [MockFunction],
+              "intercept": [MockFunction],
+              "options": [MockFunction],
+              "patch": [MockFunction],
+              "post": [MockFunction],
+              "put": [MockFunction],
+              "removeAllInterceptors": [MockFunction],
+              "stop": [MockFunction],
+            },
+            "notifications": Object {
+              "toasts": Object {
+                "add": [MockFunction],
+                "addDanger": [MockFunction],
+                "addError": [MockFunction],
+                "addSuccess": [MockFunction],
+                "addWarning": [MockFunction],
+                "get$": [MockFunction],
+                "remove": [MockFunction],
+              },
+            },
+            "savedObjects": Object {
+              "client": Object {
+                "bulkCreate": [MockFunction],
+                "bulkGet": [MockFunction],
+                "create": [MockFunction],
+                "delete": [MockFunction],
+                "find": [MockFunction],
+                "get": [MockFunction],
+                "update": [MockFunction],
+              },
+            },
+            "store": Object {
+              "clear": [MockFunction],
+              "get": [MockFunction],
+              "remove": [MockFunction],
+              "set": [MockFunction],
+              "store": Object {
+                "clear": [MockFunction],
+                "getItem": [MockFunction],
+                "key": [MockFunction],
+                "length": 0,
+                "removeItem": [MockFunction],
+                "setItem": [MockFunction],
+              },
+            },
+            "uiSettings": Object {
+              "get": [MockFunction] {
+                "calls": Array [
+                  Array [
+                    "history:limit",
+                  ],
+                ],
+                "results": Array [
+                  Object {
+                    "type": "return",
+                    "value": undefined,
+                  },
+                ],
+              },
+              "get$": [MockFunction],
+              "getAll": [MockFunction],
+              "getSaved$": [MockFunction],
+              "getUpdate$": [MockFunction],
+              "getUpdateErrors$": [MockFunction],
+              "isCustom": [MockFunction],
+              "isDeclared": [MockFunction],
+              "isDefault": [MockFunction],
+              "isOverridden": [MockFunction],
+              "overrideLocalDefault": [MockFunction],
+              "remove": [MockFunction],
+              "set": [MockFunction],
+              "stop": [MockFunction],
+            },
+          }
         }
-      }
-    >
-      <div
-        role="search"
       >
-        <div
-          className="kuiLocalSearchAssistedInput"
+        <InjectIntl(enhancedType)
+          indexPatterns={
+            Array [
+              Object {
+                "fields": Array [
+                  Object {
+                    "aggregatable": true,
+                    "esTypes": Array [
+                      "integer",
+                    ],
+                    "filterable": true,
+                    "name": "response",
+                    "searchable": true,
+                    "type": "number",
+                  },
+                ],
+                "id": "1234",
+                "title": "logstash-*",
+              },
+            ]
+          }
+          intl={null}
+          onSubmit={[Function]}
+          query={
+            Object {
+              "language": "lucene",
+              "query": "response:200",
+            }
+          }
+          screenTitle="Another Screen"
         >
-          <EuiFieldText
-            append={
-              <QueryLanguageSwitcher
-                language="lucene"
-                onSelectLanguage={[Function]}
-              />
+          <enhancedType
+            indexPatterns={
+              Array [
+                Object {
+                  "fields": Array [
+                    Object {
+                      "aggregatable": true,
+                      "esTypes": Array [
+                        "integer",
+                      ],
+                      "filterable": true,
+                      "name": "response",
+                      "searchable": true,
+                      "type": "number",
+                    },
+                  ],
+                  "id": "1234",
+                  "title": "logstash-*",
+                },
+              ]
             }
-            aria-activedescendant=""
-            aria-autocomplete="list"
-            aria-controls="kbnTypeahead__items"
-            aria-label="You are on search box of Another Screen page. Start typing to search and filter the discover"
-            autoComplete="off"
-            autoFocus={true}
-            compressed={false}
-            data-test-subj="queryInput"
-            fullWidth={true}
-            http={
+            intl={
               Object {
-                "addLoadingCount": [MockFunction],
-                "basePath": Object {
-                  "get": [MockFunction],
-                  "prepend": [MockFunction],
-                  "remove": [MockFunction],
+                "defaultFormats": Object {},
+                "defaultLocale": "en",
+                "formatDate": [Function],
+                "formatHTMLMessage": [Function],
+                "formatMessage": [Function],
+                "formatNumber": [Function],
+                "formatPlural": [Function],
+                "formatRelative": [Function],
+                "formatTime": [Function],
+                "formats": Object {
+                  "date": Object {
+                    "full": Object {
+                      "day": "numeric",
+                      "month": "long",
+                      "weekday": "long",
+                      "year": "numeric",
+                    },
+                    "long": Object {
+                      "day": "numeric",
+                      "month": "long",
+                      "year": "numeric",
+                    },
+                    "medium": Object {
+                      "day": "numeric",
+                      "month": "short",
+                      "year": "numeric",
+                    },
+                    "short": Object {
+                      "day": "numeric",
+                      "month": "numeric",
+                      "year": "2-digit",
+                    },
+                  },
+                  "number": Object {
+                    "currency": Object {
+                      "style": "currency",
+                    },
+                    "percent": Object {
+                      "style": "percent",
+                    },
+                  },
+                  "relative": Object {
+                    "days": Object {
+                      "units": "day",
+                    },
+                    "hours": Object {
+                      "units": "hour",
+                    },
+                    "minutes": Object {
+                      "units": "minute",
+                    },
+                    "months": Object {
+                      "units": "month",
+                    },
+                    "seconds": Object {
+                      "units": "second",
+                    },
+                    "years": Object {
+                      "units": "year",
+                    },
+                  },
+                  "time": Object {
+                    "full": Object {
+                      "hour": "numeric",
+                      "minute": "numeric",
+                      "second": "numeric",
+                      "timeZoneName": "short",
+                    },
+                    "long": Object {
+                      "hour": "numeric",
+                      "minute": "numeric",
+                      "second": "numeric",
+                      "timeZoneName": "short",
+                    },
+                    "medium": Object {
+                      "hour": "numeric",
+                      "minute": "numeric",
+                      "second": "numeric",
+                    },
+                    "short": Object {
+                      "hour": "numeric",
+                      "minute": "numeric",
+                    },
+                  },
                 },
-                "delete": [MockFunction],
-                "fetch": [MockFunction],
-                "get": [MockFunction],
-                "getLoadingCount$": [MockFunction],
-                "head": [MockFunction],
-                "intercept": [MockFunction],
-                "options": [MockFunction],
-                "patch": [MockFunction],
-                "post": [MockFunction],
-                "put": [MockFunction],
-                "removeAllInterceptors": [MockFunction],
-                "stop": [MockFunction],
+                "formatters": Object {
+                  "getDateTimeFormat": [Function],
+                  "getMessageFormat": [Function],
+                  "getNumberFormat": [Function],
+                  "getPluralFormat": [Function],
+                  "getRelativeFormat": [Function],
+                },
+                "locale": "en",
+                "messages": Object {},
+                "now": [Function],
+                "onError": [Function],
+                "textComponent": Symbol(react.fragment),
+                "timeZone": null,
               }
             }
-            inputRef={[Function]}
-            isLoading={false}
-            onChange={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            onKeyUp={[Function]}
-            placeholder="Search"
-            role="textbox"
-            spellCheck={false}
-            type="text"
-            value="response:200"
+            onSubmit={[Function]}
+            query={
+              Object {
+                "language": "lucene",
+                "query": "response:200",
+              }
+            }
+            screenTitle="Another Screen"
           >
-            <EuiFormControlLayout
-              append={
-                <QueryLanguageSwitcher
-                  language="lucene"
-                  onSelectLanguage={[Function]}
-                />
+            <QueryBarInputUI
+              indexPatterns={
+                Array [
+                  Object {
+                    "fields": Array [
+                      Object {
+                        "aggregatable": true,
+                        "esTypes": Array [
+                          "integer",
+                        ],
+                        "filterable": true,
+                        "name": "response",
+                        "searchable": true,
+                        "type": "number",
+                      },
+                    ],
+                    "id": "1234",
+                    "title": "logstash-*",
+                  },
+                ]
+              }
+              intl={
+                Object {
+                  "defaultFormats": Object {},
+                  "defaultLocale": "en",
+                  "formatDate": [Function],
+                  "formatHTMLMessage": [Function],
+                  "formatMessage": [Function],
+                  "formatNumber": [Function],
+                  "formatPlural": [Function],
+                  "formatRelative": [Function],
+                  "formatTime": [Function],
+                  "formats": Object {
+                    "date": Object {
+                      "full": Object {
+                        "day": "numeric",
+                        "month": "long",
+                        "weekday": "long",
+                        "year": "numeric",
+                      },
+                      "long": Object {
+                        "day": "numeric",
+                        "month": "long",
+                        "year": "numeric",
+                      },
+                      "medium": Object {
+                        "day": "numeric",
+                        "month": "short",
+                        "year": "numeric",
+                      },
+                      "short": Object {
+                        "day": "numeric",
+                        "month": "numeric",
+                        "year": "2-digit",
+                      },
+                    },
+                    "number": Object {
+                      "currency": Object {
+                        "style": "currency",
+                      },
+                      "percent": Object {
+                        "style": "percent",
+                      },
+                    },
+                    "relative": Object {
+                      "days": Object {
+                        "units": "day",
+                      },
+                      "hours": Object {
+                        "units": "hour",
+                      },
+                      "minutes": Object {
+                        "units": "minute",
+                      },
+                      "months": Object {
+                        "units": "month",
+                      },
+                      "seconds": Object {
+                        "units": "second",
+                      },
+                      "years": Object {
+                        "units": "year",
+                      },
+                    },
+                    "time": Object {
+                      "full": Object {
+                        "hour": "numeric",
+                        "minute": "numeric",
+                        "second": "numeric",
+                        "timeZoneName": "short",
+                      },
+                      "long": Object {
+                        "hour": "numeric",
+                        "minute": "numeric",
+                        "second": "numeric",
+                        "timeZoneName": "short",
+                      },
+                      "medium": Object {
+                        "hour": "numeric",
+                        "minute": "numeric",
+                        "second": "numeric",
+                      },
+                      "short": Object {
+                        "hour": "numeric",
+                        "minute": "numeric",
+                      },
+                    },
+                  },
+                  "formatters": Object {
+                    "getDateTimeFormat": [Function],
+                    "getMessageFormat": [Function],
+                    "getNumberFormat": [Function],
+                    "getPluralFormat": [Function],
+                    "getRelativeFormat": [Function],
+                  },
+                  "locale": "en",
+                  "messages": Object {},
+                  "now": [Function],
+                  "onError": [Function],
+                  "textComponent": Symbol(react.fragment),
+                  "timeZone": null,
+                }
+              }
+              kibana={
+                Object {
+                  "notifications": Object {
+                    "toasts": Object {
+                      "danger": [Function],
+                      "show": [Function],
+                      "success": [Function],
+                      "warning": [Function],
+                    },
+                  },
+                  "overlays": Object {
+                    "openFlyout": [Function],
+                    "openModal": [Function],
+                  },
+                  "services": Object {
+                    "appName": "test",
+                    "http": Object {
+                      "addLoadingCount": [MockFunction],
+                      "basePath": Object {
+                        "get": [MockFunction],
+                        "prepend": [MockFunction],
+                        "remove": [MockFunction],
+                      },
+                      "delete": [MockFunction],
+                      "fetch": [MockFunction],
+                      "get": [MockFunction],
+                      "getLoadingCount$": [MockFunction],
+                      "head": [MockFunction],
+                      "intercept": [MockFunction],
+                      "options": [MockFunction],
+                      "patch": [MockFunction],
+                      "post": [MockFunction],
+                      "put": [MockFunction],
+                      "removeAllInterceptors": [MockFunction],
+                      "stop": [MockFunction],
+                    },
+                    "notifications": Object {
+                      "toasts": Object {
+                        "add": [MockFunction],
+                        "addDanger": [MockFunction],
+                        "addError": [MockFunction],
+                        "addSuccess": [MockFunction],
+                        "addWarning": [MockFunction],
+                        "get$": [MockFunction],
+                        "remove": [MockFunction],
+                      },
+                    },
+                    "savedObjects": Object {
+                      "client": Object {
+                        "bulkCreate": [MockFunction],
+                        "bulkGet": [MockFunction],
+                        "create": [MockFunction],
+                        "delete": [MockFunction],
+                        "find": [MockFunction],
+                        "get": [MockFunction],
+                        "update": [MockFunction],
+                      },
+                    },
+                    "store": Object {
+                      "clear": [MockFunction],
+                      "get": [MockFunction],
+                      "remove": [MockFunction],
+                      "set": [MockFunction],
+                      "store": Object {
+                        "clear": [MockFunction],
+                        "getItem": [MockFunction],
+                        "key": [MockFunction],
+                        "length": 0,
+                        "removeItem": [MockFunction],
+                        "setItem": [MockFunction],
+                      },
+                    },
+                    "uiSettings": Object {
+                      "get": [MockFunction] {
+                        "calls": Array [
+                          Array [
+                            "history:limit",
+                          ],
+                        ],
+                        "results": Array [
+                          Object {
+                            "type": "return",
+                            "value": undefined,
+                          },
+                        ],
+                      },
+                      "get$": [MockFunction],
+                      "getAll": [MockFunction],
+                      "getSaved$": [MockFunction],
+                      "getUpdate$": [MockFunction],
+                      "getUpdateErrors$": [MockFunction],
+                      "isCustom": [MockFunction],
+                      "isDeclared": [MockFunction],
+                      "isDefault": [MockFunction],
+                      "isOverridden": [MockFunction],
+                      "overrideLocalDefault": [MockFunction],
+                      "remove": [MockFunction],
+                      "set": [MockFunction],
+                      "stop": [MockFunction],
+                    },
+                  },
+                }
+              }
+              onSubmit={[Function]}
+              query={
+                Object {
+                  "language": "lucene",
+                  "query": "response:200",
+                }
               }
-              compressed={false}
-              fullWidth={true}
-              isLoading={false}
+              screenTitle="Another Screen"
             >
-              <div
-                className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
+              <EuiOutsideClickDetector
+                onOutsideClick={[Function]}
               >
                 <div
-                  className="euiFormControlLayout__childrenWrapper"
-                >
-                  <EuiValidatableControl>
-                    <input
-                      aria-activedescendant=""
-                      aria-autocomplete="list"
-                      aria-controls="kbnTypeahead__items"
-                      aria-label="You are on search box of Another Screen page. Start typing to search and filter the discover"
-                      autoComplete="off"
-                      autoFocus={true}
-                      className="euiFieldText euiFieldText--fullWidth euiFieldText--inGroup"
-                      data-test-subj="queryInput"
-                      http={
-                        Object {
-                          "addLoadingCount": [MockFunction],
-                          "basePath": Object {
-                            "get": [MockFunction],
-                            "prepend": [MockFunction],
-                            "remove": [MockFunction],
-                          },
-                          "delete": [MockFunction],
-                          "fetch": [MockFunction],
-                          "get": [MockFunction],
-                          "getLoadingCount$": [MockFunction],
-                          "head": [MockFunction],
-                          "intercept": [MockFunction],
-                          "options": [MockFunction],
-                          "patch": [MockFunction],
-                          "post": [MockFunction],
-                          "put": [MockFunction],
-                          "removeAllInterceptors": [MockFunction],
-                          "stop": [MockFunction],
-                        }
-                      }
-                      onChange={[Function]}
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      onKeyUp={[Function]}
-                      placeholder="Search"
-                      role="textbox"
-                      spellCheck={false}
-                      type="text"
-                      value="response:200"
-                    />
-                  </EuiValidatableControl>
-                  <EuiFormControlLayoutIcons
-                    isLoading={false}
-                  />
-                </div>
-                <QueryLanguageSwitcher
-                  className="euiFormControlLayout__append"
-                  key="0/.0"
-                  language="lucene"
-                  onSelectLanguage={[Function]}
-                >
-                  <EuiPopover
-                    anchorClassName="euiFormControlLayout__append"
-                    anchorPosition="downRight"
-                    button={
-                      <EuiButtonEmpty
-                        className="euiFormControlLayout__append"
-                        onClick={[Function]}
-                        size="xs"
-                      >
-                        <FormattedMessage
-                          defaultMessage="Lucene"
-                          id="data.query.queryBar.luceneLanguageName"
-                          values={Object {}}
-                        />
-                      </EuiButtonEmpty>
+                  aria-expanded={false}
+                  aria-haspopup="true"
+                  aria-label="Search and filter the test page"
+                  onMouseDown={[Function]}
+                  onMouseUp={[Function]}
+                  onTouchEnd={[Function]}
+                  onTouchStart={[Function]}
+                  role="combobox"
+                  style={
+                    Object {
+                      "position": "relative",
                     }
-                    closePopover={[Function]}
-                    display="inlineBlock"
-                    hasArrow={true}
-                    id="popover"
-                    isOpen={false}
-                    ownFocus={true}
-                    panelPaddingSize="m"
-                    withTitle={true}
+                  }
+                >
+                  <div
+                    role="search"
                   >
-                    <EuiOutsideClickDetector
-                      isDisabled={true}
-                      onOutsideClick={[Function]}
+                    <div
+                      className="kuiLocalSearchAssistedInput"
                     >
-                      <div
-                        className="euiPopover euiPopover--anchorDownRight euiPopover--withTitle"
-                        id="popover"
+                      <EuiFieldText
+                        append={
+                          <QueryLanguageSwitcher
+                            language="lucene"
+                            onSelectLanguage={[Function]}
+                          />
+                        }
+                        aria-autocomplete="list"
+                        aria-label="Start typing to search and filter the test page"
+                        autoComplete="off"
+                        autoFocus={true}
+                        compressed={false}
+                        data-test-subj="queryInput"
+                        fullWidth={true}
+                        inputRef={[Function]}
+                        isLoading={false}
+                        onChange={[Function]}
+                        onClick={[Function]}
                         onKeyDown={[Function]}
-                        onMouseDown={[Function]}
-                        onMouseUp={[Function]}
-                        onTouchEnd={[Function]}
-                        onTouchStart={[Function]}
+                        onKeyUp={[Function]}
+                        placeholder="Search"
+                        role="textbox"
+                        spellCheck={false}
+                        type="text"
+                        value="response:200"
                       >
-                        <div
-                          className="euiPopover__anchor euiFormControlLayout__append"
+                        <EuiFormControlLayout
+                          append={
+                            <QueryLanguageSwitcher
+                              language="lucene"
+                              onSelectLanguage={[Function]}
+                            />
+                          }
+                          compressed={false}
+                          fullWidth={true}
+                          isLoading={false}
                         >
-                          <EuiButtonEmpty
-                            className="euiFormControlLayout__append"
-                            onClick={[Function]}
-                            size="xs"
+                          <div
+                            className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
                           >
-                            <button
-                              className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__append"
-                              onClick={[Function]}
-                              type="button"
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
+                            >
+                              <EuiValidatableControl>
+                                <input
+                                  aria-autocomplete="list"
+                                  aria-label="Start typing to search and filter the test page"
+                                  autoComplete="off"
+                                  autoFocus={true}
+                                  className="euiFieldText euiFieldText--fullWidth euiFieldText--inGroup"
+                                  data-test-subj="queryInput"
+                                  onChange={[Function]}
+                                  onClick={[Function]}
+                                  onKeyDown={[Function]}
+                                  onKeyUp={[Function]}
+                                  placeholder="Search"
+                                  role="textbox"
+                                  spellCheck={false}
+                                  type="text"
+                                  value="response:200"
+                                />
+                              </EuiValidatableControl>
+                              <EuiFormControlLayoutIcons
+                                isLoading={false}
+                              />
+                            </div>
+                            <QueryLanguageSwitcher
+                              className="euiFormControlLayout__append"
+                              key="0/.0"
+                              language="lucene"
+                              onSelectLanguage={[Function]}
                             >
-                              <span
-                                className="euiButtonEmpty__content"
+                              <EuiPopover
+                                anchorClassName="euiFormControlLayout__append"
+                                anchorPosition="downRight"
+                                button={
+                                  <EuiButtonEmpty
+                                    className="euiFormControlLayout__append"
+                                    onClick={[Function]}
+                                    size="xs"
+                                  >
+                                    <FormattedMessage
+                                      defaultMessage="Lucene"
+                                      id="data.query.queryBar.luceneLanguageName"
+                                      values={Object {}}
+                                    />
+                                  </EuiButtonEmpty>
+                                }
+                                closePopover={[Function]}
+                                display="inlineBlock"
+                                hasArrow={true}
+                                id="popover"
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="m"
+                                withTitle={true}
                               >
-                                <span
-                                  className="euiButtonEmpty__text"
+                                <EuiOutsideClickDetector
+                                  isDisabled={true}
+                                  onOutsideClick={[Function]}
                                 >
-                                  <FormattedMessage
-                                    defaultMessage="Lucene"
-                                    id="data.query.queryBar.luceneLanguageName"
-                                    values={Object {}}
+                                  <div
+                                    className="euiPopover euiPopover--anchorDownRight euiPopover--withTitle"
+                                    id="popover"
+                                    onKeyDown={[Function]}
+                                    onMouseDown={[Function]}
+                                    onMouseUp={[Function]}
+                                    onTouchEnd={[Function]}
+                                    onTouchStart={[Function]}
                                   >
-                                    Lucene
-                                  </FormattedMessage>
-                                </span>
-                              </span>
-                            </button>
-                          </EuiButtonEmpty>
-                        </div>
-                      </div>
-                    </EuiOutsideClickDetector>
-                  </EuiPopover>
-                </QueryLanguageSwitcher>
-              </div>
-            </EuiFormControlLayout>
-          </EuiFieldText>
-        </div>
-      </div>
-      <SuggestionsComponent
-        index={null}
-        loadMore={[Function]}
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        show={false}
-        suggestions={Array []}
-      />
-    </div>
-  </EuiOutsideClickDetector>
-</QueryBarInputUI>
+                                    <div
+                                      className="euiPopover__anchor euiFormControlLayout__append"
+                                    >
+                                      <EuiButtonEmpty
+                                        className="euiFormControlLayout__append"
+                                        onClick={[Function]}
+                                        size="xs"
+                                      >
+                                        <button
+                                          className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__append"
+                                          onClick={[Function]}
+                                          type="button"
+                                        >
+                                          <span
+                                            className="euiButtonEmpty__content"
+                                          >
+                                            <span
+                                              className="euiButtonEmpty__text"
+                                            >
+                                              <FormattedMessage
+                                                defaultMessage="Lucene"
+                                                id="data.query.queryBar.luceneLanguageName"
+                                                values={Object {}}
+                                              >
+                                                Lucene
+                                              </FormattedMessage>
+                                            </span>
+                                          </span>
+                                        </button>
+                                      </EuiButtonEmpty>
+                                    </div>
+                                  </div>
+                                </EuiOutsideClickDetector>
+                              </EuiPopover>
+                            </QueryLanguageSwitcher>
+                          </div>
+                        </EuiFormControlLayout>
+                      </EuiFieldText>
+                    </div>
+                  </div>
+                  <SuggestionsComponent
+                    index={null}
+                    loadMore={[Function]}
+                    onClick={[Function]}
+                    onMouseEnter={[Function]}
+                    show={false}
+                    suggestions={Array []}
+                  />
+                </div>
+              </EuiOutsideClickDetector>
+            </QueryBarInputUI>
+          </enhancedType>
+        </InjectIntl(enhancedType)>
+      </Provider>
+    </PseudoLocaleWrapper>
+  </IntlProvider>
+</I18nProvider>
 `;
 
 exports[`QueryBarInput Should render the given query 1`] = `
-<QueryBarInputUI
-  appName="discover"
-  http={
-    Object {
-      "addLoadingCount": [MockFunction],
-      "basePath": Object {
-        "get": [MockFunction],
-        "prepend": [MockFunction],
-        "remove": [MockFunction],
-      },
-      "delete": [MockFunction],
-      "fetch": [MockFunction],
-      "get": [MockFunction],
-      "getLoadingCount$": [MockFunction],
-      "head": [MockFunction],
-      "intercept": [MockFunction],
-      "options": [MockFunction],
-      "patch": [MockFunction],
-      "post": [MockFunction],
-      "put": [MockFunction],
-      "removeAllInterceptors": [MockFunction],
-      "stop": [MockFunction],
-    }
-  }
-  indexPatterns={
-    Array [
+<I18nProvider>
+  <IntlProvider
+    defaultLocale="en"
+    formats={
       Object {
-        "fields": Array [
-          Object {
-            "aggregatable": true,
-            "esTypes": Array [
-              "integer",
-            ],
-            "filterable": true,
-            "name": "response",
-            "searchable": true,
-            "type": "number",
-          },
-        ],
-        "id": "1234",
-        "title": "logstash-*",
-      },
-    ]
-  }
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
         "date": Object {
           "full": Object {
             "day": "numeric",
@@ -1030,320 +1621,691 @@ exports[`QueryBarInput Should render the given query 1`] = `
             "minute": "numeric",
           },
         },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  onSubmit={[Function]}
-  query={
-    Object {
-      "language": "kuery",
-      "query": "response:200",
-    }
-  }
-  savedObjectsClient={
-    Object {
-      "bulkCreate": [MockFunction],
-      "bulkGet": [MockFunction],
-      "create": [MockFunction],
-      "delete": [MockFunction],
-      "find": [MockFunction],
-      "get": [MockFunction],
-      "update": [MockFunction],
-    }
-  }
-  screenTitle="Another Screen"
-  store={
-    Object {
-      "clear": [MockFunction],
-      "get": [MockFunction],
-      "remove": [MockFunction],
-      "set": [MockFunction],
-      "store": Object {
-        "clear": [MockFunction],
-        "getItem": [MockFunction],
-        "key": [MockFunction],
-        "length": 0,
-        "removeItem": [MockFunction],
-        "setItem": [MockFunction],
-      },
-    }
-  }
-  uiSettings={
-    Object {
-      "get": [MockFunction] {
-        "calls": Array [
-          Array [
-            "history:limit",
-          ],
-        ],
-        "results": Array [
-          Object {
-            "type": "return",
-            "value": undefined,
-          },
-        ],
-      },
-      "get$": [MockFunction],
-      "getAll": [MockFunction],
-      "getSaved$": [MockFunction],
-      "getUpdate$": [MockFunction],
-      "getUpdateErrors$": [MockFunction],
-      "isCustom": [MockFunction],
-      "isDeclared": [MockFunction],
-      "isDefault": [MockFunction],
-      "isOverridden": [MockFunction],
-      "overrideLocalDefault": [MockFunction],
-      "remove": [MockFunction],
-      "set": [MockFunction],
-      "stop": [MockFunction],
+      }
     }
-  }
->
-  <EuiOutsideClickDetector
-    onOutsideClick={[Function]}
+    locale="en"
+    messages={Object {}}
+    textComponent={Symbol(react.fragment)}
   >
-    <div
-      aria-controls="kbnTypeahead__items"
-      aria-expanded={false}
-      aria-haspopup="true"
-      aria-owns="kbnTypeahead__items"
-      onMouseDown={[Function]}
-      onMouseUp={[Function]}
-      onTouchEnd={[Function]}
-      onTouchStart={[Function]}
-      role="combobox"
-      style={
-        Object {
-          "position": "relative",
+    <PseudoLocaleWrapper>
+      <Provider
+        services={
+          Object {
+            "appName": "test",
+            "http": Object {
+              "addLoadingCount": [MockFunction],
+              "basePath": Object {
+                "get": [MockFunction],
+                "prepend": [MockFunction],
+                "remove": [MockFunction],
+              },
+              "delete": [MockFunction],
+              "fetch": [MockFunction],
+              "get": [MockFunction],
+              "getLoadingCount$": [MockFunction],
+              "head": [MockFunction],
+              "intercept": [MockFunction],
+              "options": [MockFunction],
+              "patch": [MockFunction],
+              "post": [MockFunction],
+              "put": [MockFunction],
+              "removeAllInterceptors": [MockFunction],
+              "stop": [MockFunction],
+            },
+            "notifications": Object {
+              "toasts": Object {
+                "add": [MockFunction],
+                "addDanger": [MockFunction],
+                "addError": [MockFunction],
+                "addSuccess": [MockFunction],
+                "addWarning": [MockFunction],
+                "get$": [MockFunction],
+                "remove": [MockFunction],
+              },
+            },
+            "savedObjects": Object {
+              "client": Object {
+                "bulkCreate": [MockFunction],
+                "bulkGet": [MockFunction],
+                "create": [MockFunction],
+                "delete": [MockFunction],
+                "find": [MockFunction],
+                "get": [MockFunction],
+                "update": [MockFunction],
+              },
+            },
+            "store": Object {
+              "clear": [MockFunction],
+              "get": [MockFunction],
+              "remove": [MockFunction],
+              "set": [MockFunction],
+              "store": Object {
+                "clear": [MockFunction],
+                "getItem": [MockFunction],
+                "key": [MockFunction],
+                "length": 0,
+                "removeItem": [MockFunction],
+                "setItem": [MockFunction],
+              },
+            },
+            "uiSettings": Object {
+              "get": [MockFunction] {
+                "calls": Array [
+                  Array [
+                    "history:limit",
+                  ],
+                ],
+                "results": Array [
+                  Object {
+                    "type": "return",
+                    "value": undefined,
+                  },
+                ],
+              },
+              "get$": [MockFunction],
+              "getAll": [MockFunction],
+              "getSaved$": [MockFunction],
+              "getUpdate$": [MockFunction],
+              "getUpdateErrors$": [MockFunction],
+              "isCustom": [MockFunction],
+              "isDeclared": [MockFunction],
+              "isDefault": [MockFunction],
+              "isOverridden": [MockFunction],
+              "overrideLocalDefault": [MockFunction],
+              "remove": [MockFunction],
+              "set": [MockFunction],
+              "stop": [MockFunction],
+            },
+          }
         }
-      }
-    >
-      <div
-        role="search"
       >
-        <div
-          className="kuiLocalSearchAssistedInput"
+        <InjectIntl(enhancedType)
+          indexPatterns={
+            Array [
+              Object {
+                "fields": Array [
+                  Object {
+                    "aggregatable": true,
+                    "esTypes": Array [
+                      "integer",
+                    ],
+                    "filterable": true,
+                    "name": "response",
+                    "searchable": true,
+                    "type": "number",
+                  },
+                ],
+                "id": "1234",
+                "title": "logstash-*",
+              },
+            ]
+          }
+          intl={null}
+          onSubmit={[Function]}
+          query={
+            Object {
+              "language": "kuery",
+              "query": "response:200",
+            }
+          }
+          screenTitle="Another Screen"
         >
-          <EuiFieldText
-            append={
-              <QueryLanguageSwitcher
-                language="kuery"
-                onSelectLanguage={[Function]}
-              />
+          <enhancedType
+            indexPatterns={
+              Array [
+                Object {
+                  "fields": Array [
+                    Object {
+                      "aggregatable": true,
+                      "esTypes": Array [
+                        "integer",
+                      ],
+                      "filterable": true,
+                      "name": "response",
+                      "searchable": true,
+                      "type": "number",
+                    },
+                  ],
+                  "id": "1234",
+                  "title": "logstash-*",
+                },
+              ]
             }
-            aria-activedescendant=""
-            aria-autocomplete="list"
-            aria-controls="kbnTypeahead__items"
-            aria-label="You are on search box of Another Screen page. Start typing to search and filter the discover"
-            autoComplete="off"
-            autoFocus={true}
-            compressed={false}
-            data-test-subj="queryInput"
-            fullWidth={true}
-            http={
+            intl={
               Object {
-                "addLoadingCount": [MockFunction],
-                "basePath": Object {
-                  "get": [MockFunction],
-                  "prepend": [MockFunction],
-                  "remove": [MockFunction],
+                "defaultFormats": Object {},
+                "defaultLocale": "en",
+                "formatDate": [Function],
+                "formatHTMLMessage": [Function],
+                "formatMessage": [Function],
+                "formatNumber": [Function],
+                "formatPlural": [Function],
+                "formatRelative": [Function],
+                "formatTime": [Function],
+                "formats": Object {
+                  "date": Object {
+                    "full": Object {
+                      "day": "numeric",
+                      "month": "long",
+                      "weekday": "long",
+                      "year": "numeric",
+                    },
+                    "long": Object {
+                      "day": "numeric",
+                      "month": "long",
+                      "year": "numeric",
+                    },
+                    "medium": Object {
+                      "day": "numeric",
+                      "month": "short",
+                      "year": "numeric",
+                    },
+                    "short": Object {
+                      "day": "numeric",
+                      "month": "numeric",
+                      "year": "2-digit",
+                    },
+                  },
+                  "number": Object {
+                    "currency": Object {
+                      "style": "currency",
+                    },
+                    "percent": Object {
+                      "style": "percent",
+                    },
+                  },
+                  "relative": Object {
+                    "days": Object {
+                      "units": "day",
+                    },
+                    "hours": Object {
+                      "units": "hour",
+                    },
+                    "minutes": Object {
+                      "units": "minute",
+                    },
+                    "months": Object {
+                      "units": "month",
+                    },
+                    "seconds": Object {
+                      "units": "second",
+                    },
+                    "years": Object {
+                      "units": "year",
+                    },
+                  },
+                  "time": Object {
+                    "full": Object {
+                      "hour": "numeric",
+                      "minute": "numeric",
+                      "second": "numeric",
+                      "timeZoneName": "short",
+                    },
+                    "long": Object {
+                      "hour": "numeric",
+                      "minute": "numeric",
+                      "second": "numeric",
+                      "timeZoneName": "short",
+                    },
+                    "medium": Object {
+                      "hour": "numeric",
+                      "minute": "numeric",
+                      "second": "numeric",
+                    },
+                    "short": Object {
+                      "hour": "numeric",
+                      "minute": "numeric",
+                    },
+                  },
                 },
-                "delete": [MockFunction],
-                "fetch": [MockFunction],
-                "get": [MockFunction],
-                "getLoadingCount$": [MockFunction],
-                "head": [MockFunction],
-                "intercept": [MockFunction],
-                "options": [MockFunction],
-                "patch": [MockFunction],
-                "post": [MockFunction],
-                "put": [MockFunction],
-                "removeAllInterceptors": [MockFunction],
-                "stop": [MockFunction],
+                "formatters": Object {
+                  "getDateTimeFormat": [Function],
+                  "getMessageFormat": [Function],
+                  "getNumberFormat": [Function],
+                  "getPluralFormat": [Function],
+                  "getRelativeFormat": [Function],
+                },
+                "locale": "en",
+                "messages": Object {},
+                "now": [Function],
+                "onError": [Function],
+                "textComponent": Symbol(react.fragment),
+                "timeZone": null,
+              }
+            }
+            onSubmit={[Function]}
+            query={
+              Object {
+                "language": "kuery",
+                "query": "response:200",
               }
             }
-            inputRef={[Function]}
-            isLoading={false}
-            onChange={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            onKeyUp={[Function]}
-            placeholder="Search"
-            role="textbox"
-            spellCheck={false}
-            type="text"
-            value="response:200"
+            screenTitle="Another Screen"
           >
-            <EuiFormControlLayout
-              append={
-                <QueryLanguageSwitcher
-                  language="kuery"
-                  onSelectLanguage={[Function]}
-                />
+            <QueryBarInputUI
+              indexPatterns={
+                Array [
+                  Object {
+                    "fields": Array [
+                      Object {
+                        "aggregatable": true,
+                        "esTypes": Array [
+                          "integer",
+                        ],
+                        "filterable": true,
+                        "name": "response",
+                        "searchable": true,
+                        "type": "number",
+                      },
+                    ],
+                    "id": "1234",
+                    "title": "logstash-*",
+                  },
+                ]
+              }
+              intl={
+                Object {
+                  "defaultFormats": Object {},
+                  "defaultLocale": "en",
+                  "formatDate": [Function],
+                  "formatHTMLMessage": [Function],
+                  "formatMessage": [Function],
+                  "formatNumber": [Function],
+                  "formatPlural": [Function],
+                  "formatRelative": [Function],
+                  "formatTime": [Function],
+                  "formats": Object {
+                    "date": Object {
+                      "full": Object {
+                        "day": "numeric",
+                        "month": "long",
+                        "weekday": "long",
+                        "year": "numeric",
+                      },
+                      "long": Object {
+                        "day": "numeric",
+                        "month": "long",
+                        "year": "numeric",
+                      },
+                      "medium": Object {
+                        "day": "numeric",
+                        "month": "short",
+                        "year": "numeric",
+                      },
+                      "short": Object {
+                        "day": "numeric",
+                        "month": "numeric",
+                        "year": "2-digit",
+                      },
+                    },
+                    "number": Object {
+                      "currency": Object {
+                        "style": "currency",
+                      },
+                      "percent": Object {
+                        "style": "percent",
+                      },
+                    },
+                    "relative": Object {
+                      "days": Object {
+                        "units": "day",
+                      },
+                      "hours": Object {
+                        "units": "hour",
+                      },
+                      "minutes": Object {
+                        "units": "minute",
+                      },
+                      "months": Object {
+                        "units": "month",
+                      },
+                      "seconds": Object {
+                        "units": "second",
+                      },
+                      "years": Object {
+                        "units": "year",
+                      },
+                    },
+                    "time": Object {
+                      "full": Object {
+                        "hour": "numeric",
+                        "minute": "numeric",
+                        "second": "numeric",
+                        "timeZoneName": "short",
+                      },
+                      "long": Object {
+                        "hour": "numeric",
+                        "minute": "numeric",
+                        "second": "numeric",
+                        "timeZoneName": "short",
+                      },
+                      "medium": Object {
+                        "hour": "numeric",
+                        "minute": "numeric",
+                        "second": "numeric",
+                      },
+                      "short": Object {
+                        "hour": "numeric",
+                        "minute": "numeric",
+                      },
+                    },
+                  },
+                  "formatters": Object {
+                    "getDateTimeFormat": [Function],
+                    "getMessageFormat": [Function],
+                    "getNumberFormat": [Function],
+                    "getPluralFormat": [Function],
+                    "getRelativeFormat": [Function],
+                  },
+                  "locale": "en",
+                  "messages": Object {},
+                  "now": [Function],
+                  "onError": [Function],
+                  "textComponent": Symbol(react.fragment),
+                  "timeZone": null,
+                }
+              }
+              kibana={
+                Object {
+                  "notifications": Object {
+                    "toasts": Object {
+                      "danger": [Function],
+                      "show": [Function],
+                      "success": [Function],
+                      "warning": [Function],
+                    },
+                  },
+                  "overlays": Object {
+                    "openFlyout": [Function],
+                    "openModal": [Function],
+                  },
+                  "services": Object {
+                    "appName": "test",
+                    "http": Object {
+                      "addLoadingCount": [MockFunction],
+                      "basePath": Object {
+                        "get": [MockFunction],
+                        "prepend": [MockFunction],
+                        "remove": [MockFunction],
+                      },
+                      "delete": [MockFunction],
+                      "fetch": [MockFunction],
+                      "get": [MockFunction],
+                      "getLoadingCount$": [MockFunction],
+                      "head": [MockFunction],
+                      "intercept": [MockFunction],
+                      "options": [MockFunction],
+                      "patch": [MockFunction],
+                      "post": [MockFunction],
+                      "put": [MockFunction],
+                      "removeAllInterceptors": [MockFunction],
+                      "stop": [MockFunction],
+                    },
+                    "notifications": Object {
+                      "toasts": Object {
+                        "add": [MockFunction],
+                        "addDanger": [MockFunction],
+                        "addError": [MockFunction],
+                        "addSuccess": [MockFunction],
+                        "addWarning": [MockFunction],
+                        "get$": [MockFunction],
+                        "remove": [MockFunction],
+                      },
+                    },
+                    "savedObjects": Object {
+                      "client": Object {
+                        "bulkCreate": [MockFunction],
+                        "bulkGet": [MockFunction],
+                        "create": [MockFunction],
+                        "delete": [MockFunction],
+                        "find": [MockFunction],
+                        "get": [MockFunction],
+                        "update": [MockFunction],
+                      },
+                    },
+                    "store": Object {
+                      "clear": [MockFunction],
+                      "get": [MockFunction],
+                      "remove": [MockFunction],
+                      "set": [MockFunction],
+                      "store": Object {
+                        "clear": [MockFunction],
+                        "getItem": [MockFunction],
+                        "key": [MockFunction],
+                        "length": 0,
+                        "removeItem": [MockFunction],
+                        "setItem": [MockFunction],
+                      },
+                    },
+                    "uiSettings": Object {
+                      "get": [MockFunction] {
+                        "calls": Array [
+                          Array [
+                            "history:limit",
+                          ],
+                        ],
+                        "results": Array [
+                          Object {
+                            "type": "return",
+                            "value": undefined,
+                          },
+                        ],
+                      },
+                      "get$": [MockFunction],
+                      "getAll": [MockFunction],
+                      "getSaved$": [MockFunction],
+                      "getUpdate$": [MockFunction],
+                      "getUpdateErrors$": [MockFunction],
+                      "isCustom": [MockFunction],
+                      "isDeclared": [MockFunction],
+                      "isDefault": [MockFunction],
+                      "isOverridden": [MockFunction],
+                      "overrideLocalDefault": [MockFunction],
+                      "remove": [MockFunction],
+                      "set": [MockFunction],
+                      "stop": [MockFunction],
+                    },
+                  },
+                }
               }
-              compressed={false}
-              fullWidth={true}
-              isLoading={false}
+              onSubmit={[Function]}
+              query={
+                Object {
+                  "language": "kuery",
+                  "query": "response:200",
+                }
+              }
+              screenTitle="Another Screen"
             >
-              <div
-                className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
+              <EuiOutsideClickDetector
+                onOutsideClick={[Function]}
               >
                 <div
-                  className="euiFormControlLayout__childrenWrapper"
-                >
-                  <EuiValidatableControl>
-                    <input
-                      aria-activedescendant=""
-                      aria-autocomplete="list"
-                      aria-controls="kbnTypeahead__items"
-                      aria-label="You are on search box of Another Screen page. Start typing to search and filter the discover"
-                      autoComplete="off"
-                      autoFocus={true}
-                      className="euiFieldText euiFieldText--fullWidth euiFieldText--inGroup"
-                      data-test-subj="queryInput"
-                      http={
-                        Object {
-                          "addLoadingCount": [MockFunction],
-                          "basePath": Object {
-                            "get": [MockFunction],
-                            "prepend": [MockFunction],
-                            "remove": [MockFunction],
-                          },
-                          "delete": [MockFunction],
-                          "fetch": [MockFunction],
-                          "get": [MockFunction],
-                          "getLoadingCount$": [MockFunction],
-                          "head": [MockFunction],
-                          "intercept": [MockFunction],
-                          "options": [MockFunction],
-                          "patch": [MockFunction],
-                          "post": [MockFunction],
-                          "put": [MockFunction],
-                          "removeAllInterceptors": [MockFunction],
-                          "stop": [MockFunction],
-                        }
-                      }
-                      onChange={[Function]}
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      onKeyUp={[Function]}
-                      placeholder="Search"
-                      role="textbox"
-                      spellCheck={false}
-                      type="text"
-                      value="response:200"
-                    />
-                  </EuiValidatableControl>
-                  <EuiFormControlLayoutIcons
-                    isLoading={false}
-                  />
-                </div>
-                <QueryLanguageSwitcher
-                  className="euiFormControlLayout__append"
-                  key="0/.0"
-                  language="kuery"
-                  onSelectLanguage={[Function]}
-                >
-                  <EuiPopover
-                    anchorClassName="euiFormControlLayout__append"
-                    anchorPosition="downRight"
-                    button={
-                      <EuiButtonEmpty
-                        className="euiFormControlLayout__append"
-                        onClick={[Function]}
-                        size="xs"
-                      >
-                        <FormattedMessage
-                          defaultMessage="KQL"
-                          id="data.query.queryBar.kqlLanguageName"
-                          values={Object {}}
-                        />
-                      </EuiButtonEmpty>
+                  aria-expanded={false}
+                  aria-haspopup="true"
+                  aria-label="Search and filter the test page"
+                  onMouseDown={[Function]}
+                  onMouseUp={[Function]}
+                  onTouchEnd={[Function]}
+                  onTouchStart={[Function]}
+                  role="combobox"
+                  style={
+                    Object {
+                      "position": "relative",
                     }
-                    closePopover={[Function]}
-                    display="inlineBlock"
-                    hasArrow={true}
-                    id="popover"
-                    isOpen={false}
-                    ownFocus={true}
-                    panelPaddingSize="m"
-                    withTitle={true}
+                  }
+                >
+                  <div
+                    role="search"
                   >
-                    <EuiOutsideClickDetector
-                      isDisabled={true}
-                      onOutsideClick={[Function]}
+                    <div
+                      className="kuiLocalSearchAssistedInput"
                     >
-                      <div
-                        className="euiPopover euiPopover--anchorDownRight euiPopover--withTitle"
-                        id="popover"
+                      <EuiFieldText
+                        append={
+                          <QueryLanguageSwitcher
+                            language="kuery"
+                            onSelectLanguage={[Function]}
+                          />
+                        }
+                        aria-autocomplete="list"
+                        aria-label="Start typing to search and filter the test page"
+                        autoComplete="off"
+                        autoFocus={true}
+                        compressed={false}
+                        data-test-subj="queryInput"
+                        fullWidth={true}
+                        inputRef={[Function]}
+                        isLoading={false}
+                        onChange={[Function]}
+                        onClick={[Function]}
                         onKeyDown={[Function]}
-                        onMouseDown={[Function]}
-                        onMouseUp={[Function]}
-                        onTouchEnd={[Function]}
-                        onTouchStart={[Function]}
+                        onKeyUp={[Function]}
+                        placeholder="Search"
+                        role="textbox"
+                        spellCheck={false}
+                        type="text"
+                        value="response:200"
                       >
-                        <div
-                          className="euiPopover__anchor euiFormControlLayout__append"
+                        <EuiFormControlLayout
+                          append={
+                            <QueryLanguageSwitcher
+                              language="kuery"
+                              onSelectLanguage={[Function]}
+                            />
+                          }
+                          compressed={false}
+                          fullWidth={true}
+                          isLoading={false}
                         >
-                          <EuiButtonEmpty
-                            className="euiFormControlLayout__append"
-                            onClick={[Function]}
-                            size="xs"
+                          <div
+                            className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
                           >
-                            <button
-                              className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__append"
-                              onClick={[Function]}
-                              type="button"
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
                             >
-                              <span
-                                className="euiButtonEmpty__content"
+                              <EuiValidatableControl>
+                                <input
+                                  aria-autocomplete="list"
+                                  aria-label="Start typing to search and filter the test page"
+                                  autoComplete="off"
+                                  autoFocus={true}
+                                  className="euiFieldText euiFieldText--fullWidth euiFieldText--inGroup"
+                                  data-test-subj="queryInput"
+                                  onChange={[Function]}
+                                  onClick={[Function]}
+                                  onKeyDown={[Function]}
+                                  onKeyUp={[Function]}
+                                  placeholder="Search"
+                                  role="textbox"
+                                  spellCheck={false}
+                                  type="text"
+                                  value="response:200"
+                                />
+                              </EuiValidatableControl>
+                              <EuiFormControlLayoutIcons
+                                isLoading={false}
+                              />
+                            </div>
+                            <QueryLanguageSwitcher
+                              className="euiFormControlLayout__append"
+                              key="0/.0"
+                              language="kuery"
+                              onSelectLanguage={[Function]}
+                            >
+                              <EuiPopover
+                                anchorClassName="euiFormControlLayout__append"
+                                anchorPosition="downRight"
+                                button={
+                                  <EuiButtonEmpty
+                                    className="euiFormControlLayout__append"
+                                    onClick={[Function]}
+                                    size="xs"
+                                  >
+                                    <FormattedMessage
+                                      defaultMessage="KQL"
+                                      id="data.query.queryBar.kqlLanguageName"
+                                      values={Object {}}
+                                    />
+                                  </EuiButtonEmpty>
+                                }
+                                closePopover={[Function]}
+                                display="inlineBlock"
+                                hasArrow={true}
+                                id="popover"
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="m"
+                                withTitle={true}
                               >
-                                <span
-                                  className="euiButtonEmpty__text"
+                                <EuiOutsideClickDetector
+                                  isDisabled={true}
+                                  onOutsideClick={[Function]}
                                 >
-                                  <FormattedMessage
-                                    defaultMessage="KQL"
-                                    id="data.query.queryBar.kqlLanguageName"
-                                    values={Object {}}
+                                  <div
+                                    className="euiPopover euiPopover--anchorDownRight euiPopover--withTitle"
+                                    id="popover"
+                                    onKeyDown={[Function]}
+                                    onMouseDown={[Function]}
+                                    onMouseUp={[Function]}
+                                    onTouchEnd={[Function]}
+                                    onTouchStart={[Function]}
                                   >
-                                    KQL
-                                  </FormattedMessage>
-                                </span>
-                              </span>
-                            </button>
-                          </EuiButtonEmpty>
-                        </div>
-                      </div>
-                    </EuiOutsideClickDetector>
-                  </EuiPopover>
-                </QueryLanguageSwitcher>
-              </div>
-            </EuiFormControlLayout>
-          </EuiFieldText>
-        </div>
-      </div>
-      <SuggestionsComponent
-        index={null}
-        loadMore={[Function]}
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        show={false}
-        suggestions={Array []}
-      />
-    </div>
-  </EuiOutsideClickDetector>
-</QueryBarInputUI>
+                                    <div
+                                      className="euiPopover__anchor euiFormControlLayout__append"
+                                    >
+                                      <EuiButtonEmpty
+                                        className="euiFormControlLayout__append"
+                                        onClick={[Function]}
+                                        size="xs"
+                                      >
+                                        <button
+                                          className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__append"
+                                          onClick={[Function]}
+                                          type="button"
+                                        >
+                                          <span
+                                            className="euiButtonEmpty__content"
+                                          >
+                                            <span
+                                              className="euiButtonEmpty__text"
+                                            >
+                                              <FormattedMessage
+                                                defaultMessage="KQL"
+                                                id="data.query.queryBar.kqlLanguageName"
+                                                values={Object {}}
+                                              >
+                                                KQL
+                                              </FormattedMessage>
+                                            </span>
+                                          </span>
+                                        </button>
+                                      </EuiButtonEmpty>
+                                    </div>
+                                  </div>
+                                </EuiOutsideClickDetector>
+                              </EuiPopover>
+                            </QueryLanguageSwitcher>
+                          </div>
+                        </EuiFormControlLayout>
+                      </EuiFieldText>
+                    </div>
+                  </div>
+                  <SuggestionsComponent
+                    index={null}
+                    loadMore={[Function]}
+                    onClick={[Function]}
+                    onMouseEnter={[Function]}
+                    show={false}
+                    suggestions={Array []}
+                  />
+                </div>
+              </EuiOutsideClickDetector>
+            </QueryBarInputUI>
+          </enhancedType>
+        </InjectIntl(enhancedType)>
+      </Provider>
+    </PseudoLocaleWrapper>
+  </IntlProvider>
+</I18nProvider>
 `;
diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_input.test.tsx b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_input.test.tsx
index e66d71b9b08b4b..a66fb682063ece 100644
--- a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_input.test.tsx
+++ b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_input.test.tsx
@@ -25,12 +25,14 @@ import {
 
 import { EuiFieldText } from '@elastic/eui';
 import React from 'react';
-import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { QueryLanguageSwitcher } from './language_switcher';
 import { QueryBarInput, QueryBarInputUI } from './query_bar_input';
 import { coreMock } from '../../../../../../../core/public/mocks';
 const startMock = coreMock.createStart();
 import { IndexPattern } from '../../../index';
+import { KibanaContextProvider } from 'src/plugins/kibana_react/public';
+import { I18nProvider } from '@kbn/i18n/react';
+import { mount } from 'enzyme';
 
 const noop = () => {
   return;
@@ -78,64 +80,67 @@ const mockIndexPattern = {
   ],
 } as IndexPattern;
 
+function wrapQueryBarInputInContext(testProps: any, store?: any) {
+  const defaultOptions = {
+    screenTitle: 'Another Screen',
+    intl: null as any,
+  };
+
+  const services = {
+    appName: testProps.appName || 'test',
+    uiSettings: startMock.uiSettings,
+    savedObjects: startMock.savedObjects,
+    notifications: startMock.notifications,
+    http: startMock.http,
+    store: store || createMockStorage(),
+  };
+
+  return (
+    <I18nProvider>
+      <KibanaContextProvider services={services}>
+        <QueryBarInput {...defaultOptions} {...testProps} />
+      </KibanaContextProvider>
+    </I18nProvider>
+  );
+}
+
 describe('QueryBarInput', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
   it('Should render the given query', () => {
-    const component = mountWithIntl(
-      <QueryBarInput.WrappedComponent
-        query={kqlQuery}
-        onSubmit={noop}
-        appName={'discover'}
-        screenTitle={'Another Screen'}
-        indexPatterns={[mockIndexPattern]}
-        store={createMockStorage()}
-        intl={null as any}
-        uiSettings={startMock.uiSettings}
-        savedObjectsClient={startMock.savedObjects.client}
-        http={startMock.http}
-      />
+    const component = mount(
+      wrapQueryBarInputInContext({
+        query: kqlQuery,
+        onSubmit: noop,
+        indexPatterns: [mockIndexPattern],
+      })
     );
 
     expect(component).toMatchSnapshot();
   });
 
   it('Should pass the query language to the language switcher', () => {
-    const component = mountWithIntl(
-      <QueryBarInput.WrappedComponent
-        query={luceneQuery}
-        onSubmit={noop}
-        appName={'discover'}
-        screenTitle={'Another Screen'}
-        indexPatterns={[mockIndexPattern]}
-        store={createMockStorage()}
-        intl={null as any}
-        uiSettings={startMock.uiSettings}
-        savedObjectsClient={startMock.savedObjects.client}
-        http={startMock.http}
-      />
+    const component = mount(
+      wrapQueryBarInputInContext({
+        query: luceneQuery,
+        onSubmit: noop,
+        indexPatterns: [mockIndexPattern],
+      })
     );
 
     expect(component).toMatchSnapshot();
   });
 
   it('Should disable autoFocus on EuiFieldText when disableAutoFocus prop is true', () => {
-    const component = mountWithIntl(
-      <QueryBarInput.WrappedComponent
-        query={kqlQuery}
-        onSubmit={noop}
-        appName={'discover'}
-        screenTitle={'Another Screen'}
-        indexPatterns={[mockIndexPattern]}
-        store={createMockStorage()}
-        disableAutoFocus={true}
-        intl={null as any}
-        uiSettings={startMock.uiSettings}
-        savedObjectsClient={startMock.savedObjects.client}
-        http={startMock.http}
-      />
+    const component = mount(
+      wrapQueryBarInputInContext({
+        query: kqlQuery,
+        onSubmit: noop,
+        indexPatterns: [mockIndexPattern],
+        disableAutoFocus: true,
+      })
     );
 
     expect(component).toMatchSnapshot();
@@ -144,43 +149,32 @@ describe('QueryBarInput', () => {
   it('Should create a unique PersistedLog based on the appName and query language', () => {
     mockPersistedLogFactory.mockClear();
 
-    mountWithIntl(
-      <QueryBarInput.WrappedComponent
-        query={kqlQuery}
-        onSubmit={noop}
-        appName={'discover'}
-        screenTitle={'Another Screen'}
-        indexPatterns={[mockIndexPattern]}
-        store={createMockStorage()}
-        disableAutoFocus={true}
-        intl={null as any}
-        uiSettings={startMock.uiSettings}
-        savedObjectsClient={startMock.savedObjects.client}
-        http={startMock.http}
-      />
+    mount(
+      wrapQueryBarInputInContext({
+        query: kqlQuery,
+        onSubmit: noop,
+        indexPatterns: [mockIndexPattern],
+        disableAutoFocus: true,
+        appName: 'discover',
+      })
     );
-
     expect(mockPersistedLogFactory.mock.calls[0][0]).toBe('typeahead:discover-kuery');
   });
 
   it("On language selection, should store the user's preference in localstorage and reset the query", () => {
     const mockStorage = createMockStorage();
     const mockCallback = jest.fn();
-
-    const component = mountWithIntl(
-      <QueryBarInput.WrappedComponent
-        query={kqlQuery}
-        onSubmit={mockCallback}
-        appName={'discover'}
-        screenTitle={'Another Screen'}
-        indexPatterns={[mockIndexPattern]}
-        store={mockStorage}
-        disableAutoFocus={true}
-        intl={null as any}
-        uiSettings={startMock.uiSettings}
-        savedObjectsClient={startMock.savedObjects.client}
-        http={startMock.http}
-      />
+    const component = mount(
+      wrapQueryBarInputInContext(
+        {
+          query: kqlQuery,
+          onSubmit: mockCallback,
+          indexPatterns: [mockIndexPattern],
+          disableAutoFocus: true,
+          appName: 'discover',
+        },
+        mockStorage
+      )
     );
 
     component
@@ -194,23 +188,16 @@ describe('QueryBarInput', () => {
   it('Should call onSubmit when the user hits enter inside the query bar', () => {
     const mockCallback = jest.fn();
 
-    const component = mountWithIntl(
-      <QueryBarInput.WrappedComponent
-        query={kqlQuery}
-        onSubmit={mockCallback}
-        appName={'discover'}
-        screenTitle={'Another Screen'}
-        indexPatterns={[mockIndexPattern]}
-        store={createMockStorage()}
-        disableAutoFocus={true}
-        intl={null as any}
-        uiSettings={startMock.uiSettings}
-        savedObjectsClient={startMock.savedObjects.client}
-        http={startMock.http}
-      />
+    const component = mount(
+      wrapQueryBarInputInContext({
+        query: kqlQuery,
+        onSubmit: mockCallback,
+        indexPatterns: [mockIndexPattern],
+        disableAutoFocus: true,
+      })
     );
 
-    const instance = component.instance() as QueryBarInputUI;
+    const instance = component.find('QueryBarInputUI').instance() as QueryBarInputUI;
     const input = instance.inputRef;
     const inputWrapper = component.find(EuiFieldText).find('input');
     inputWrapper.simulate('keyDown', { target: input, keyCode: 13, key: 'Enter', metaKey: true });
@@ -220,23 +207,17 @@ describe('QueryBarInput', () => {
   });
 
   it('Should use PersistedLog for recent search suggestions', async () => {
-    const component = mountWithIntl(
-      <QueryBarInput.WrappedComponent
-        query={kqlQuery}
-        onSubmit={noop}
-        appName={'discover'}
-        screenTitle={'Another Screen'}
-        indexPatterns={[mockIndexPattern]}
-        store={createMockStorage()}
-        disableAutoFocus={true}
-        intl={null as any}
-        uiSettings={startMock.uiSettings}
-        savedObjectsClient={startMock.savedObjects.client}
-        http={startMock.http}
-      />
+    const component = mount(
+      wrapQueryBarInputInContext({
+        query: kqlQuery,
+        onSubmit: noop,
+        indexPatterns: [mockIndexPattern],
+        disableAutoFocus: true,
+        persistedLog: mockPersistedLog,
+      })
     );
 
-    const instance = component.instance() as QueryBarInputUI;
+    const instance = component.find('QueryBarInputUI').instance() as QueryBarInputUI;
     const input = instance.inputRef;
     const inputWrapper = component.find(EuiFieldText).find('input');
     inputWrapper.simulate('keyDown', { target: input, keyCode: 13, key: 'Enter', metaKey: true });
@@ -250,22 +231,15 @@ describe('QueryBarInput', () => {
 
   it('Should accept index pattern strings and fetch the full object', () => {
     mockFetchIndexPatterns.mockClear();
-
-    mountWithIntl(
-      <QueryBarInput.WrappedComponent
-        query={kqlQuery}
-        onSubmit={noop}
-        appName={'discover'}
-        screenTitle={'Another Screen'}
-        indexPatterns={['logstash-*']}
-        store={createMockStorage()}
-        disableAutoFocus={true}
-        intl={null as any}
-        uiSettings={startMock.uiSettings}
-        savedObjectsClient={startMock.savedObjects.client}
-        http={startMock.http}
-      />
+    mount(
+      wrapQueryBarInputInContext({
+        query: kqlQuery,
+        onSubmit: noop,
+        indexPatterns: ['logstash-*'],
+        disableAutoFocus: true,
+      })
     );
+
     expect(mockFetchIndexPatterns).toHaveBeenCalledWith(
       startMock.savedObjects.client,
       ['logstash-*'],
diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_input.tsx b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_input.tsx
index 7a972a6068f6f6..3cdd8d4b9c40c9 100644
--- a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_input.tsx
+++ b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_input.tsx
@@ -19,23 +19,22 @@
 
 import { Component } from 'react';
 import React from 'react';
+import { i18n } from '@kbn/i18n';
 
 import { EuiFieldText, EuiOutsideClickDetector, PopoverAnchorPosition } from '@elastic/eui';
 
 import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
-import { debounce, compact, isEqual, omit } from 'lodash';
+import { debounce, compact, isEqual } from 'lodash';
 import { PersistedLog } from 'ui/persisted_log';
-import { Storage } from 'ui/storage';
-import { npStart } from 'ui/new_platform';
-import {
-  UiSettingsClientContract,
-  SavedObjectsClientContract,
-  HttpServiceBase,
-} from 'src/core/public';
+
 import {
   AutocompleteSuggestion,
   AutocompleteSuggestionType,
 } from '../../../../../../../plugins/data/public';
+import {
+  withKibana,
+  KibanaReactContextValue,
+} from '../../../../../../../plugins/kibana_react/public';
 import { IndexPattern, StaticIndexPattern } from '../../../index_patterns';
 import { Query } from '../index';
 import { fromUser, matchPairs, toUser } from '../lib';
@@ -43,21 +42,13 @@ import { QueryLanguageSwitcher } from './language_switcher';
 import { SuggestionsComponent } from './typeahead/suggestions_component';
 import { getQueryLog } from '../lib/get_query_log';
 import { fetchIndexPatterns } from '../lib/fetch_index_patterns';
-
-// todo: related to https://github.com/elastic/kibana/pull/45762/files
-// Will be refactored after merge of related PR
-const getAutocompleteProvider = (language: string) =>
-  npStart.plugins.data.autocomplete.getProvider(language);
+import { IDataPluginServices } from '../../../types';
 
 interface Props {
-  uiSettings: UiSettingsClientContract;
-  indexPatterns: Array<IndexPattern | string>;
-  savedObjectsClient: SavedObjectsClientContract;
-  http: HttpServiceBase;
-  store: Storage;
+  kibana: KibanaReactContextValue<IDataPluginServices>;
   intl: InjectedIntl;
+  indexPatterns: Array<IndexPattern | string>;
   query: Query;
-  appName: string;
   disableAutoFocus?: boolean;
   screenTitle?: string;
   prepend?: React.ReactNode;
@@ -67,6 +58,7 @@ interface Props {
   languageSwitcherPopoverAnchorPosition?: PopoverAnchorPosition;
   onChange?: (query: Query) => void;
   onSubmit?: (query: Query) => void;
+  dataTestSubj?: string;
 }
 
 interface State {
@@ -107,6 +99,7 @@ export class QueryBarInputUI extends Component<Props, State> {
   public inputRef: HTMLInputElement | null = null;
 
   private persistedLog: PersistedLog | undefined;
+  private services = this.props.kibana.services;
   private componentIsUnmounting = false;
 
   private getQueryString = () => {
@@ -122,9 +115,9 @@ export class QueryBarInputUI extends Component<Props, State> {
     ) as IndexPattern[];
 
     const objectPatternsFromStrings = (await fetchIndexPatterns(
-      this.props.savedObjectsClient,
+      this.services.savedObjects!.client,
       stringPatterns,
-      this.props.uiSettings
+      this.services.uiSettings!
     )) as IndexPattern[];
 
     this.setState({
@@ -137,13 +130,13 @@ export class QueryBarInputUI extends Component<Props, State> {
       return;
     }
 
-    const uiSettings = this.props.uiSettings;
+    const uiSettings = this.services.uiSettings;
     const language = this.props.query.language;
     const queryString = this.getQueryString();
 
     const recentSearchSuggestions = this.getRecentSearchSuggestions(queryString);
 
-    const autocompleteProvider = getAutocompleteProvider(language);
+    const autocompleteProvider = this.services.autocomplete.getProvider(language);
     if (
       !autocompleteProvider ||
       !Array.isArray(this.state.indexPatterns) ||
@@ -369,11 +362,11 @@ export class QueryBarInputUI extends Component<Props, State> {
     // Send telemetry info every time the user opts in or out of kuery
     // As a result it is important this function only ever gets called in the
     // UI component's change handler.
-    this.props.http.post('/api/kibana/kql_opt_in_telemetry', {
+    this.services.http.post('/api/kibana/kql_opt_in_telemetry', {
       body: JSON.stringify({ opt_in: language === 'kuery' }),
     });
 
-    this.props.store.set('kibana.userQueryLanguage', language);
+    this.services.store.set('kibana.userQueryLanguage', language);
 
     const newQuery = { query: '', language };
     this.onChange(newQuery);
@@ -406,7 +399,7 @@ export class QueryBarInputUI extends Component<Props, State> {
 
     this.persistedLog = this.props.persistedLog
       ? this.props.persistedLog
-      : getQueryLog(this.props.uiSettings, this.props.appName, this.props.query.language);
+      : getQueryLog(this.services.uiSettings, this.services.appName, this.props.query.language);
 
     this.fetchIndexPatterns().then(this.updateSuggestions);
   }
@@ -419,7 +412,7 @@ export class QueryBarInputUI extends Component<Props, State> {
 
     this.persistedLog = this.props.persistedLog
       ? this.props.persistedLog
-      : getQueryLog(this.props.uiSettings, this.props.appName, this.props.query.language);
+      : getQueryLog(this.services.uiSettings, this.services.appName, this.props.query.language);
 
     if (!isEqual(prevProps.indexPatterns, this.props.indexPatterns)) {
       this.fetchIndexPatterns().then(this.updateSuggestions);
@@ -446,41 +439,30 @@ export class QueryBarInputUI extends Component<Props, State> {
   }
 
   public render() {
-    const rest = omit(this.props, [
-      'indexPatterns',
-      'intl',
-      'query',
-      'appName',
-      'disableAutoFocus',
-      'screenTitle',
-      'prepend',
-      'store',
-      'persistedLog',
-      'bubbleSubmitEvent',
-      'languageSwitcherPopoverAnchorPosition',
-      'onChange',
-      'onSubmit',
-      'uiSettings',
-      'savedObjectsClient',
-    ]);
+    const isSuggestionsVisible = this.state.isSuggestionsVisible && {
+      'aria-controls': 'kbnTypeahead__items',
+      'aria-owns': 'kbnTypeahead__items',
+    };
+    const ariaCombobox = { ...isSuggestionsVisible, role: 'combobox' };
 
     return (
       <EuiOutsideClickDetector onOutsideClick={this.onOutsideClick}>
         <div
+          {...ariaCombobox}
           style={{ position: 'relative' }}
-          role="combobox"
+          aria-label={i18n.translate('data.query.queryBar.comboboxAriaLabel', {
+            defaultMessage: 'Search and filter the {pageType} page',
+            values: { pageType: this.services.appName },
+          })}
           aria-haspopup="true"
           aria-expanded={this.state.isSuggestionsVisible}
-          aria-owns="kbnTypeahead__items"
-          aria-controls="kbnTypeahead__items"
         >
           <div role="search">
             <div className="kuiLocalSearchAssistedInput">
               <EuiFieldText
                 placeholder={
                   this.props.placeholder ||
-                  this.props.intl.formatMessage({
-                    id: 'data.query.queryBar.searchInputPlaceholder',
+                  i18n.translate('data.query.queryBar.searchInputPlaceholder', {
                     defaultMessage: 'Search',
                   })
                 }
@@ -498,27 +480,17 @@ export class QueryBarInputUI extends Component<Props, State> {
                 }}
                 autoComplete="off"
                 spellCheck={false}
-                aria-label={
-                  this.props.screenTitle
-                    ? this.props.intl.formatMessage(
-                        {
-                          id: 'data.query.queryBar.searchInputAriaLabel',
-                          defaultMessage:
-                            'You are on search box of {previouslyTranslatedPageTitle} page. Start typing to search and filter the {pageType}',
-                        },
-                        {
-                          previouslyTranslatedPageTitle: this.props.screenTitle,
-                          pageType: this.props.appName,
-                        }
-                      )
-                    : undefined
-                }
+                aria-label={i18n.translate('data.query.queryBar.searchInputAriaLabel', {
+                  defaultMessage: 'Start typing to search and filter the {pageType} page',
+                  values: { pageType: this.services.appName },
+                })}
                 type="text"
-                data-test-subj="queryInput"
                 aria-autocomplete="list"
-                aria-controls="kbnTypeahead__items"
+                aria-controls={this.state.isSuggestionsVisible ? 'kbnTypeahead__items' : undefined}
                 aria-activedescendant={
-                  this.state.isSuggestionsVisible ? 'suggestion-' + this.state.index : ''
+                  this.state.isSuggestionsVisible && typeof this.state.index === 'number'
+                    ? `suggestion-${this.state.index}`
+                    : undefined
                 }
                 role="textbox"
                 prepend={this.props.prepend}
@@ -529,7 +501,7 @@ export class QueryBarInputUI extends Component<Props, State> {
                     onSelectLanguage={this.onSelectLanguage}
                   />
                 }
-                {...rest}
+                data-test-subj={this.props.dataTestSubj || 'queryInput'}
               />
             </div>
           </div>
@@ -548,4 +520,4 @@ export class QueryBarInputUI extends Component<Props, State> {
   }
 }
 
-export const QueryBarInput = injectI18n(QueryBarInputUI);
+export const QueryBarInput = injectI18n(withKibana(QueryBarInputUI));
diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_top_row.test.tsx b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_top_row.test.tsx
index 0926af7b30ef78..337bb9f4861c3e 100644
--- a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_top_row.test.tsx
+++ b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_top_row.test.tsx
@@ -21,7 +21,6 @@ import { mockPersistedLogFactory } from './query_bar_input.test.mocks';
 
 import React from 'react';
 import { mount } from 'enzyme';
-import './query_bar_top_row.test.mocks';
 import { QueryBarTopRow } from './query_bar_top_row';
 import { IndexPattern } from '../../../index';
 
@@ -97,42 +96,49 @@ const mockIndexPattern = {
   ],
 } as IndexPattern;
 
-describe('QueryBarTopRowTopRow', () => {
-  const QUERY_INPUT_SELECTOR = 'InjectIntl(QueryBarInputUI)';
-  const TIMEPICKER_SELECTOR = 'EuiSuperDatePicker';
+function wrapQueryBarTopRowInContext(testProps: any) {
+  const defaultOptions = {
+    screenTitle: 'Another Screen',
+    onSubmit: noop,
+    onChange: noop,
+    intl: null as any,
+  };
+
   const services = {
+    appName: 'discover',
     uiSettings: startMock.uiSettings,
     savedObjects: startMock.savedObjects,
     notifications: startMock.notifications,
     http: startMock.http,
-  };
-  const defaultOptions = {
-    appName: 'discover',
-    screenTitle: 'Another Screen',
-    onSubmit: noop,
-    onChange: noop,
     store: createMockStorage(),
-    intl: null as any,
   };
 
+  return (
+    <I18nProvider>
+      <KibanaContextProvider services={services}>
+        <QueryBarTopRow.WrappedComponent {...defaultOptions} {...testProps} />
+      </KibanaContextProvider>
+    </I18nProvider>
+  );
+}
+
+describe('QueryBarTopRowTopRow', () => {
+  const QUERY_INPUT_SELECTOR = 'QueryBarInputUI';
+  const TIMEPICKER_SELECTOR = 'EuiSuperDatePicker';
+
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
   it('Should render the given query', () => {
     const component = mount(
-      <I18nProvider>
-        <KibanaContextProvider services={services}>
-          <QueryBarTopRow.WrappedComponent
-            {...defaultOptions}
-            query={kqlQuery}
-            screenTitle={'Another Screen'}
-            isDirty={false}
-            indexPatterns={[mockIndexPattern]}
-            timeHistory={timefilterSetupMock.history}
-          />
-        </KibanaContextProvider>
-      </I18nProvider>
+      wrapQueryBarTopRowInContext({
+        query: kqlQuery,
+        screenTitle: 'Another Screen',
+        isDirty: false,
+        indexPatterns: [mockIndexPattern],
+        timeHistory: timefilterSetupMock.history,
+      })
     );
 
     expect(component.find(QUERY_INPUT_SELECTOR).length).toBe(1);
@@ -141,19 +147,14 @@ describe('QueryBarTopRowTopRow', () => {
 
   it('Should create a unique PersistedLog based on the appName and query language', () => {
     mount(
-      <I18nProvider>
-        <KibanaContextProvider services={services}>
-          <QueryBarTopRow.WrappedComponent
-            {...defaultOptions}
-            query={kqlQuery}
-            screenTitle={'Another Screen'}
-            indexPatterns={[mockIndexPattern]}
-            timeHistory={timefilterSetupMock.history}
-            disableAutoFocus={true}
-            isDirty={false}
-          />
-        </KibanaContextProvider>
-      </I18nProvider>
+      wrapQueryBarTopRowInContext({
+        query: kqlQuery,
+        screenTitle: 'Another Screen',
+        indexPatterns: [mockIndexPattern],
+        timeHistory: timefilterSetupMock.history,
+        disableAutoFocus: true,
+        isDirty: false,
+      })
     );
 
     expect(mockPersistedLogFactory.mock.calls[0][0]).toBe('typeahead:discover-kuery');
@@ -161,15 +162,10 @@ describe('QueryBarTopRowTopRow', () => {
 
   it('Should render only timepicker when no options provided', () => {
     const component = mount(
-      <I18nProvider>
-        <KibanaContextProvider services={services}>
-          <QueryBarTopRow.WrappedComponent
-            {...defaultOptions}
-            isDirty={false}
-            timeHistory={timefilterSetupMock.history}
-          />
-        </KibanaContextProvider>
-      </I18nProvider>
+      wrapQueryBarTopRowInContext({
+        isDirty: false,
+        timeHistory: timefilterSetupMock.history,
+      })
     );
 
     expect(component.find(QUERY_INPUT_SELECTOR).length).toBe(0);
@@ -178,16 +174,11 @@ describe('QueryBarTopRowTopRow', () => {
 
   it('Should not show timepicker when asked', () => {
     const component = mount(
-      <I18nProvider>
-        <KibanaContextProvider services={services}>
-          <QueryBarTopRow.WrappedComponent
-            {...defaultOptions}
-            isDirty={false}
-            showDatePicker={false}
-            timeHistory={timefilterSetupMock.history}
-          />
-        </KibanaContextProvider>
-      </I18nProvider>
+      wrapQueryBarTopRowInContext({
+        showDatePicker: false,
+        timeHistory: timefilterSetupMock.history,
+        isDirty: false,
+      })
     );
 
     expect(component.find(QUERY_INPUT_SELECTOR).length).toBe(0);
@@ -196,19 +187,14 @@ describe('QueryBarTopRowTopRow', () => {
 
   it('Should render timepicker with options', () => {
     const component = mount(
-      <I18nProvider>
-        <KibanaContextProvider services={services}>
-          <QueryBarTopRow.WrappedComponent
-            {...defaultOptions}
-            isDirty={false}
-            screenTitle={'Another Screen'}
-            showDatePicker={true}
-            dateRangeFrom={'now-7d'}
-            dateRangeTo={'now'}
-            timeHistory={timefilterSetupMock.history}
-          />
-        </KibanaContextProvider>
-      </I18nProvider>
+      wrapQueryBarTopRowInContext({
+        isDirty: false,
+        screenTitle: 'Another Screen',
+        showDatePicker: true,
+        dateRangeFrom: 'now-7d',
+        dateRangeTo: 'now',
+        timeHistory: timefilterSetupMock.history,
+      })
     );
 
     expect(component.find(QUERY_INPUT_SELECTOR).length).toBe(0);
@@ -217,19 +203,16 @@ describe('QueryBarTopRowTopRow', () => {
 
   it('Should render only query input bar', () => {
     const component = mount(
-      <I18nProvider>
-        <KibanaContextProvider services={services}>
-          <QueryBarTopRow.WrappedComponent
-            query={kqlQuery}
-            {...defaultOptions}
-            isDirty={false}
-            screenTitle={'Another Screen'}
-            indexPatterns={[mockIndexPattern]}
-            showDatePicker={false}
-            timeHistory={timefilterSetupMock.history}
-          />
-        </KibanaContextProvider>
-      </I18nProvider>
+      wrapQueryBarTopRowInContext({
+        query: kqlQuery,
+        indexPatterns: [mockIndexPattern],
+        isDirty: false,
+        screenTitle: 'Another Screen',
+        showDatePicker: false,
+        dateRangeFrom: 'now-7d',
+        dateRangeTo: 'now',
+        timeHistory: timefilterSetupMock.history,
+      })
     );
 
     expect(component.find(QUERY_INPUT_SELECTOR).length).toBe(1);
@@ -238,20 +221,15 @@ describe('QueryBarTopRowTopRow', () => {
 
   it('Should NOT render query input bar if disabled', () => {
     const component = mount(
-      <I18nProvider>
-        <KibanaContextProvider services={services}>
-          <QueryBarTopRow.WrappedComponent
-            query={kqlQuery}
-            {...defaultOptions}
-            isDirty={false}
-            screenTitle={'Another Screen'}
-            indexPatterns={[mockIndexPattern]}
-            showQueryInput={false}
-            showDatePicker={false}
-            timeHistory={timefilterSetupMock.history}
-          />
-        </KibanaContextProvider>
-      </I18nProvider>
+      wrapQueryBarTopRowInContext({
+        query: kqlQuery,
+        isDirty: false,
+        screenTitle: 'Another Screen',
+        indexPatterns: [mockIndexPattern],
+        showQueryInput: false,
+        showDatePicker: false,
+        timeHistory: timefilterSetupMock.history,
+      })
     );
 
     expect(component.find(QUERY_INPUT_SELECTOR).length).toBe(0);
@@ -260,17 +238,12 @@ describe('QueryBarTopRowTopRow', () => {
 
   it('Should NOT render query input bar if missing options', () => {
     const component = mount(
-      <I18nProvider>
-        <KibanaContextProvider services={services}>
-          <QueryBarTopRow.WrappedComponent
-            {...defaultOptions}
-            isDirty={false}
-            screenTitle={'Another Screen'}
-            showDatePicker={false}
-            timeHistory={timefilterSetupMock.history}
-          />
-        </KibanaContextProvider>
-      </I18nProvider>
+      wrapQueryBarTopRowInContext({
+        isDirty: false,
+        screenTitle: 'Another Screen',
+        showDatePicker: false,
+        timeHistory: timefilterSetupMock.history,
+      })
     );
 
     expect(component.find(QUERY_INPUT_SELECTOR).length).toBe(0);
diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_top_row.tsx b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_top_row.tsx
index c25b596973174d..6895c9ecd018cb 100644
--- a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_top_row.tsx
+++ b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_top_row.tsx
@@ -21,7 +21,6 @@ import { doesKueryExpressionHaveLuceneSyntaxError } from '@kbn/es-query';
 
 import classNames from 'classnames';
 import React, { useState, useEffect } from 'react';
-import { Storage } from 'ui/storage';
 import { documentationLinks } from 'ui/documentation_links';
 import { PersistedLog } from 'ui/persisted_log';
 
@@ -30,6 +29,7 @@ import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiLink, EuiSuperDatePicker } fro
 import { EuiSuperUpdateButton } from '@elastic/eui';
 import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import { Toast } from 'src/core/public';
+import { TimeRange } from 'src/plugins/data/public';
 import { useKibana } from '../../../../../../../plugins/kibana_react/public';
 
 import { IndexPattern } from '../../../index_patterns';
@@ -37,21 +37,15 @@ import { QueryBarInput } from './query_bar_input';
 import { getQueryLog } from '../lib/get_query_log';
 import { Query } from '../index';
 import { TimeHistoryContract } from '../../../timefilter';
-
-interface DateRange {
-  from: string;
-  to: string;
-}
+import { IDataPluginServices } from '../../../types';
 
 interface Props {
   query?: Query;
-  onSubmit: (payload: { dateRange: DateRange; query?: Query }) => void;
-  onChange: (payload: { dateRange: DateRange; query?: Query }) => void;
+  onSubmit: (payload: { dateRange: TimeRange; query?: Query }) => void;
+  onChange: (payload: { dateRange: TimeRange; query?: Query }) => void;
   disableAutoFocus?: boolean;
-  appName: string;
   screenTitle?: string;
   indexPatterns?: Array<IndexPattern | string>;
-  store?: Storage;
   intl: InjectedIntl;
   prepend?: React.ReactNode;
   showQueryInput?: boolean;
@@ -70,15 +64,15 @@ interface Props {
 function QueryBarTopRowUI(props: Props) {
   const [isDateRangeInvalid, setIsDateRangeInvalid] = useState(false);
 
-  const kibana = useKibana();
-  const { uiSettings, http, notifications, savedObjects } = kibana.services;
+  const kibana = useKibana<IDataPluginServices>();
+  const { uiSettings, notifications, store, appName } = kibana.services;
 
   const queryLanguage = props.query && props.query.language;
   let persistedLog: PersistedLog | undefined;
 
   useEffect(() => {
     if (!props.query) return;
-    persistedLog = getQueryLog(uiSettings!, props.appName, props.query.language);
+    persistedLog = getQueryLog(uiSettings!, appName, props.query.language);
   }, [queryLanguage]);
 
   function onClickSubmitButton(event: React.MouseEvent<HTMLButtonElement>) {
@@ -131,7 +125,7 @@ function QueryBarTopRowUI(props: Props) {
     }
   }
 
-  function onSubmit({ query, dateRange }: { query?: Query; dateRange: DateRange }) {
+  function onSubmit({ query, dateRange }: { query?: Query; dateRange: TimeRange }) {
     handleLuceneSyntaxWarning();
 
     if (props.timeHistory) {
@@ -153,19 +147,14 @@ function QueryBarTopRowUI(props: Props) {
     return (
       <EuiFlexItem>
         <QueryBarInput
-          appName={props.appName}
           disableAutoFocus={props.disableAutoFocus}
           indexPatterns={props.indexPatterns!}
           prepend={props.prepend}
           query={props.query!}
           screenTitle={props.screenTitle}
-          store={props.store!}
           onChange={onQueryChange}
           onSubmit={onInputSubmit}
           persistedLog={persistedLog}
-          uiSettings={uiSettings!}
-          savedObjectsClient={savedObjects!.client}
-          http={http!}
         />
       </EuiFlexItem>
     );
@@ -176,7 +165,7 @@ function QueryBarTopRowUI(props: Props) {
   }
 
   function shouldRenderQueryInput(): boolean {
-    return Boolean(props.showQueryInput && props.indexPatterns && props.query && props.store);
+    return Boolean(props.showQueryInput && props.indexPatterns && props.query && store);
   }
 
   function renderUpdateButton() {
@@ -251,7 +240,7 @@ function QueryBarTopRowUI(props: Props) {
 
   function handleLuceneSyntaxWarning() {
     if (!props.query) return;
-    const { intl, store } = props;
+    const { intl } = props;
     const { query, language } = props.query;
     if (
       language === 'kuery' &&
@@ -300,8 +289,8 @@ function QueryBarTopRowUI(props: Props) {
   }
 
   function onLuceneSyntaxWarningOptOut(toast: Toast) {
-    if (!props.store) return;
-    props.store.set('kibana.luceneSyntaxWarningOptOut', true);
+    if (!store) return;
+    store.set('kibana.luceneSyntaxWarningOptOut', true);
     notifications!.toasts.remove(toast);
   }
 
diff --git a/src/legacy/core_plugins/data/public/search/search_bar/components/create_search_bar.tsx b/src/legacy/core_plugins/data/public/search/search_bar/components/create_search_bar.tsx
new file mode 100644
index 00000000000000..add49e47971d34
--- /dev/null
+++ b/src/legacy/core_plugins/data/public/search/search_bar/components/create_search_bar.tsx
@@ -0,0 +1,93 @@
+/*
+ * 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 { Filter } from '@kbn/es-query';
+import { CoreStart } from 'src/core/public';
+import { Storage } from 'ui/storage';
+import { AutocompletePublicPluginStart } from 'src/plugins/data/public';
+import { KibanaContextProvider } from '../../../../../../../../src/plugins/kibana_react/public';
+import { TimefilterSetup } from '../../../timefilter';
+import { FilterManager, SearchBar } from '../../../';
+import { SearchBarOwnProps } from '.';
+
+interface StatefulSearchBarDeps {
+  core: CoreStart;
+  store: Storage;
+  timefilter: TimefilterSetup;
+  filterManager: FilterManager;
+  autocomplete: AutocompletePublicPluginStart;
+}
+
+export type StatetfulSearchBarProps = SearchBarOwnProps & {
+  appName: string;
+};
+
+const defaultFiltersUpdated = (filterManager: FilterManager) => {
+  return (filters: Filter[]) => {
+    filterManager.setFilters(filters);
+  };
+};
+
+const defaultOnRefreshChange = (timefilter: TimefilterSetup) => {
+  return (options: { isPaused: boolean; refreshInterval: number }) => {
+    timefilter.timefilter.setRefreshInterval({
+      value: options.refreshInterval,
+      pause: options.isPaused,
+    });
+  };
+};
+
+export function createSearchBar({
+  core,
+  store,
+  timefilter,
+  filterManager,
+  autocomplete,
+}: StatefulSearchBarDeps) {
+  // App name should come from the core application service.
+  // Until it's available, we'll ask the user to provide it for the pre-wired component.
+  return (props: StatetfulSearchBarProps) => {
+    const timeRange = timefilter.timefilter.getTime();
+    const refreshInterval = timefilter.timefilter.getRefreshInterval();
+
+    return (
+      <KibanaContextProvider
+        services={{
+          appName: props.appName,
+          autocomplete,
+          store,
+          ...core,
+        }}
+      >
+        <SearchBar
+          timeHistory={timefilter.history}
+          dateRangeFrom={timeRange.from}
+          dateRangeTo={timeRange.to}
+          refreshInterval={refreshInterval.value}
+          isRefreshPaused={refreshInterval.pause}
+          filters={filterManager.getFilters()}
+          onFiltersUpdated={defaultFiltersUpdated(filterManager)}
+          onRefreshChange={defaultOnRefreshChange(timefilter)}
+          {...props}
+        />
+      </KibanaContextProvider>
+    );
+  };
+}
diff --git a/src/legacy/core_plugins/data/public/search/search_bar/components/index.tsx b/src/legacy/core_plugins/data/public/search/search_bar/components/index.tsx
index 24ffa939a746e9..accaac163acfcf 100644
--- a/src/legacy/core_plugins/data/public/search/search_bar/components/index.tsx
+++ b/src/legacy/core_plugins/data/public/search/search_bar/components/index.tsx
@@ -18,3 +18,4 @@
  */
 
 export * from './search_bar';
+export * from './create_search_bar';
diff --git a/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.test.tsx b/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.test.tsx
index 7d48977fab8a53..73e81a38572c39 100644
--- a/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.test.tsx
+++ b/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.test.tsx
@@ -18,14 +18,17 @@
  */
 
 import React from 'react';
-import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { SearchBar } from './search_bar';
 import { IndexPattern } from '../../../index_patterns';
 
+import { KibanaContextProvider } from 'src/plugins/kibana_react/public';
+import { I18nProvider } from '@kbn/i18n/react';
+
 import { coreMock } from '../../../../../../../../src/core/public/mocks';
 const startMock = coreMock.createStart();
 
 import { timefilterServiceMock } from '../../../timefilter/timefilter_service.mock';
+import { mount } from 'enzyme';
 const timefilterSetupMock = timefilterServiceMock.createSetupContract();
 
 jest.mock('../../../../../data/public', () => {
@@ -41,13 +44,6 @@ jest.mock('../../../query/query_bar', () => {
   };
 });
 
-jest.mock('ui/notify', () => ({
-  toastNotifications: {
-    addSuccess: () => {},
-    addDanger: () => {},
-  },
-}));
-
 const noop = jest.fn();
 
 const createMockWebStorage = () => ({
@@ -87,26 +83,44 @@ const kqlQuery = {
   language: 'kuery',
 };
 
-describe('SearchBar', () => {
-  const SEARCH_BAR_ROOT = '.globalQueryBar';
-  const FILTER_BAR = '.filterBar';
-  const QUERY_BAR = '.queryBar';
-
-  const options = {
+function wrapSearchBarInContext(testProps: any) {
+  const defaultOptions = {
     appName: 'test',
-    savedObjects: startMock.savedObjects,
-    notifications: startMock.notifications,
     timeHistory: timefilterSetupMock.history,
     intl: null as any,
   };
 
+  const services = {
+    uiSettings: startMock.uiSettings,
+    savedObjects: startMock.savedObjects,
+    notifications: startMock.notifications,
+    http: startMock.http,
+    store: createMockStorage(),
+  };
+
+  return (
+    <I18nProvider>
+      <KibanaContextProvider services={services}>
+        <SearchBar.WrappedComponent {...defaultOptions} {...testProps} />
+      </KibanaContextProvider>
+    </I18nProvider>
+  );
+}
+
+describe('SearchBar', () => {
+  const SEARCH_BAR_ROOT = '.globalQueryBar';
+  const FILTER_BAR = '.filterBar';
+  const QUERY_BAR = '.queryBar';
+
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
   it('Should render query bar when no options provided (in reality - timepicker)', () => {
-    const component = mountWithIntl(
-      <SearchBar.WrappedComponent {...options} indexPatterns={[mockIndexPattern]} />
+    const component = mount(
+      wrapSearchBarInContext({
+        indexPatterns: [mockIndexPattern],
+      })
     );
 
     expect(component.find(SEARCH_BAR_ROOT).length).toBe(1);
@@ -115,12 +129,11 @@ describe('SearchBar', () => {
   });
 
   it('Should render empty when timepicker is off and no options provided', () => {
-    const component = mountWithIntl(
-      <SearchBar.WrappedComponent
-        {...options}
-        indexPatterns={[mockIndexPattern]}
-        showDatePicker={false}
-      />
+    const component = mount(
+      wrapSearchBarInContext({
+        indexPatterns: [mockIndexPattern],
+        showDatePicker: false,
+      })
     );
 
     expect(component.find(SEARCH_BAR_ROOT).length).toBe(1);
@@ -129,14 +142,13 @@ describe('SearchBar', () => {
   });
 
   it('Should render filter bar, when required fields are provided', () => {
-    const component = mountWithIntl(
-      <SearchBar.WrappedComponent
-        {...options}
-        indexPatterns={[mockIndexPattern]}
-        filters={[]}
-        onFiltersUpdated={noop}
-        showDatePicker={false}
-      />
+    const component = mount(
+      wrapSearchBarInContext({
+        indexPatterns: [mockIndexPattern],
+        showDatePicker: false,
+        onFiltersUpdated: noop,
+        filters: [],
+      })
     );
 
     expect(component.find(SEARCH_BAR_ROOT).length).toBe(1);
@@ -145,15 +157,14 @@ describe('SearchBar', () => {
   });
 
   it('Should NOT render filter bar, if disabled', () => {
-    const component = mountWithIntl(
-      <SearchBar.WrappedComponent
-        {...options}
-        indexPatterns={[mockIndexPattern]}
-        showFilterBar={false}
-        filters={[]}
-        onFiltersUpdated={noop}
-        showDatePicker={false}
-      />
+    const component = mount(
+      wrapSearchBarInContext({
+        indexPatterns: [mockIndexPattern],
+        showFilterBar: false,
+        filters: [],
+        onFiltersUpdated: noop,
+        showDatePicker: false,
+      })
     );
 
     expect(component.find(SEARCH_BAR_ROOT).length).toBe(1);
@@ -162,15 +173,13 @@ describe('SearchBar', () => {
   });
 
   it('Should render query bar, when required fields are provided', () => {
-    const component = mountWithIntl(
-      <SearchBar.WrappedComponent
-        {...options}
-        indexPatterns={[mockIndexPattern]}
-        screenTitle={'test screen'}
-        store={createMockStorage()}
-        onQuerySubmit={noop}
-        query={kqlQuery}
-      />
+    const component = mount(
+      wrapSearchBarInContext({
+        indexPatterns: [mockIndexPattern],
+        screenTitle: 'test screen',
+        onQuerySubmit: noop,
+        query: kqlQuery,
+      })
     );
 
     expect(component.find(SEARCH_BAR_ROOT).length).toBe(1);
@@ -179,16 +188,14 @@ describe('SearchBar', () => {
   });
 
   it('Should NOT render query bar, if disabled', () => {
-    const component = mountWithIntl(
-      <SearchBar.WrappedComponent
-        {...options}
-        indexPatterns={[mockIndexPattern]}
-        screenTitle={'test screen'}
-        store={createMockStorage()}
-        onQuerySubmit={noop}
-        query={kqlQuery}
-        showQueryBar={false}
-      />
+    const component = mount(
+      wrapSearchBarInContext({
+        indexPatterns: [mockIndexPattern],
+        screenTitle: 'test screen',
+        onQuerySubmit: noop,
+        query: kqlQuery,
+        showQueryBar: false,
+      })
     );
 
     expect(component.find(SEARCH_BAR_ROOT).length).toBe(1);
@@ -197,17 +204,15 @@ describe('SearchBar', () => {
   });
 
   it('Should render query bar and filter bar', () => {
-    const component = mountWithIntl(
-      <SearchBar.WrappedComponent
-        {...options}
-        indexPatterns={[mockIndexPattern]}
-        screenTitle={'test screen'}
-        store={createMockStorage()}
-        onQuerySubmit={noop}
-        query={kqlQuery}
-        filters={[]}
-        onFiltersUpdated={noop}
-      />
+    const component = mount(
+      wrapSearchBarInContext({
+        indexPatterns: [mockIndexPattern],
+        screenTitle: 'test screen',
+        onQuerySubmit: noop,
+        query: kqlQuery,
+        filters: [],
+        onFiltersUpdated: noop,
+      })
     );
 
     expect(component.find(SEARCH_BAR_ROOT).length).toBe(1);
diff --git a/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.tsx b/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.tsx
index 6c73fa3614cc3c..06ceace7e9e44a 100644
--- a/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.tsx
+++ b/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.tsx
@@ -22,10 +22,9 @@ import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import classNames from 'classnames';
 import React, { Component } from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
-import { Storage } from 'ui/storage';
 import { get, isEqual } from 'lodash';
 
-import { CoreStart } from 'src/core/public';
+import { TimeRange } from 'src/plugins/data/common/types';
 import { IndexPattern, Query, FilterBar } from '../../../../../data/public';
 import { QueryBarTopRow } from '../../../query';
 import { SavedQuery, SavedQueryAttributes } from '../index';
@@ -34,54 +33,56 @@ import { SavedQueryManagementComponent } from './saved_query_management/saved_qu
 import { SavedQueryService } from '../lib/saved_query_service';
 import { createSavedQueryService } from '../lib/saved_query_service';
 import { TimeHistoryContract } from '../../../timefilter';
-
-interface DateRange {
-  from: string;
-  to: string;
-}
-
-/**
- * NgReact lib requires that changes to the props need to be made in the directive config as well
- * See [search_bar\directive\index.js] file
- */
-export interface SearchBarProps {
-  appName: string;
+import {
+  withKibana,
+  KibanaReactContextValue,
+} from '../../../../../../../plugins/kibana_react/public';
+import { IDataPluginServices } from '../../../types';
+
+interface SearchBarInjectedDeps {
+  kibana: KibanaReactContextValue<IDataPluginServices>;
   intl: InjectedIntl;
-  indexPatterns?: IndexPattern[];
-
-  // Query bar
-  showQueryBar?: boolean;
-  showQueryInput?: boolean;
-  screenTitle?: string;
-  store?: Storage;
-  query?: Query;
-  savedQuery?: SavedQuery;
-  onQuerySubmit?: (payload: { dateRange: DateRange; query?: Query }) => void;
   timeHistory: TimeHistoryContract;
   // Filter bar
-  showFilterBar?: boolean;
-  filters?: Filter[];
   onFiltersUpdated?: (filters: Filter[]) => void;
+  filters?: Filter[];
   // Date picker
-  showDatePicker?: boolean;
   dateRangeFrom?: string;
   dateRangeTo?: string;
   // Autorefresh
+  onRefreshChange?: (options: { isPaused: boolean; refreshInterval: number }) => void;
   isRefreshPaused?: boolean;
   refreshInterval?: number;
+}
+
+export interface SearchBarOwnProps {
+  indexPatterns?: IndexPattern[];
+  customSubmitButton?: React.ReactNode;
+  screenTitle?: string;
+
+  // Togglers
+  showQueryBar?: boolean;
+  showQueryInput?: boolean;
+  showFilterBar?: boolean;
+  showDatePicker?: boolean;
   showAutoRefreshOnly?: boolean;
-  showSaveQuery?: boolean;
   onRefreshChange?: (options: { isPaused: boolean; refreshInterval: number }) => void;
+  // Query bar - should be in SearchBarInjectedDeps
+  query?: Query;
+  // Show when user has privileges to save
+  showSaveQuery?: boolean;
+  savedQuery?: SavedQuery;
+  onQuerySubmit?: (payload: { dateRange: TimeRange; query?: Query }) => void;
+  // User has saved the current state as a saved query
   onSaved?: (savedQuery: SavedQuery) => void;
+  // User has modified the saved query, your app should persist the update
   onSavedQueryUpdated?: (savedQuery: SavedQuery) => void;
+  // User has cleared the active query, your app should clear the entire query bar
   onClearSavedQuery?: () => void;
-  customSubmitButton?: React.ReactNode;
-
-  // TODO: deprecate
-  savedObjects: CoreStart['savedObjects'];
-  notifications: CoreStart['notifications'];
 }
 
+export type SearchBarProps = SearchBarOwnProps & SearchBarInjectedDeps;
+
 interface State {
   isFiltersVisible: boolean;
   showSaveQueryModal: boolean;
@@ -102,7 +103,7 @@ class SearchBarUI extends Component<SearchBarProps, State> {
   };
 
   private savedQueryService!: SavedQueryService;
-
+  private services = this.props.kibana.services;
   public filterBarRef: Element | null = null;
   public filterBarWrapperRef: Element | null = null;
 
@@ -253,7 +254,7 @@ class SearchBarUI extends Component<SearchBarProps, State> {
         response = await this.savedQueryService.saveQuery(savedQueryAttributes);
       }
 
-      this.props.notifications.toasts.addSuccess(
+      this.services.notifications.toasts.addSuccess(
         `Your query "${response.attributes.title}" was saved`
       );
 
@@ -266,7 +267,7 @@ class SearchBarUI extends Component<SearchBarProps, State> {
         this.props.onSaved(response);
       }
     } catch (error) {
-      this.props.notifications.toasts.addDanger(
+      this.services.notifications.toasts.addDanger(
         `An error occured while saving your query: ${error.message}`
       );
       throw error;
@@ -285,7 +286,7 @@ class SearchBarUI extends Component<SearchBarProps, State> {
     });
   };
 
-  public onQueryBarChange = (queryAndDateRange: { dateRange: DateRange; query?: Query }) => {
+  public onQueryBarChange = (queryAndDateRange: { dateRange: TimeRange; query?: Query }) => {
     this.setState({
       query: queryAndDateRange.query,
       dateRangeFrom: queryAndDateRange.dateRange.from,
@@ -293,7 +294,7 @@ class SearchBarUI extends Component<SearchBarProps, State> {
     });
   };
 
-  public onQueryBarSubmit = (queryAndDateRange: { dateRange?: DateRange; query?: Query }) => {
+  public onQueryBarSubmit = (queryAndDateRange: { dateRange?: TimeRange; query?: Query }) => {
     this.setState(
       {
         query: queryAndDateRange.query,
@@ -337,8 +338,8 @@ class SearchBarUI extends Component<SearchBarProps, State> {
       this.setFilterBarHeight();
       this.ro.observe(this.filterBarRef);
     }
-    if (this.props.savedObjects) {
-      this.savedQueryService = createSavedQueryService(this.props.savedObjects!.client);
+    if (this.services.savedObjects) {
+      this.savedQueryService = createSavedQueryService(this.services.savedObjects.client);
     }
   }
 
@@ -370,9 +371,7 @@ class SearchBarUI extends Component<SearchBarProps, State> {
           query={this.state.query}
           screenTitle={this.props.screenTitle}
           onSubmit={this.onQueryBarSubmit}
-          appName={this.props.appName}
           indexPatterns={this.props.indexPatterns}
-          store={this.props.store}
           prepend={this.props.showFilterBar ? savedQueryManagement : undefined}
           showDatePicker={this.props.showDatePicker}
           dateRangeFrom={this.state.dateRangeFrom}
@@ -449,4 +448,4 @@ class SearchBarUI extends Component<SearchBarProps, State> {
   }
 }
 
-export const SearchBar = injectI18n(SearchBarUI);
+export const SearchBar = injectI18n(withKibana(SearchBarUI));
diff --git a/src/legacy/core_plugins/data/public/shim/legacy_dependencies_plugin.ts b/src/legacy/core_plugins/data/public/shim/legacy_dependencies_plugin.ts
index 4289d56b33c605..126754388f13f2 100644
--- a/src/legacy/core_plugins/data/public/shim/legacy_dependencies_plugin.ts
+++ b/src/legacy/core_plugins/data/public/shim/legacy_dependencies_plugin.ts
@@ -18,7 +18,8 @@
  */
 
 import chrome from 'ui/chrome';
-import { CoreStart, Plugin } from '../../../../../../src/core/public';
+import { Storage } from 'ui/storage';
+import { Plugin } from '../../../../../../src/core/public';
 import { initLegacyModule } from './legacy_module';
 
 /** @internal */
@@ -26,6 +27,10 @@ export interface LegacyDependenciesPluginSetup {
   savedObjectsClient: any;
 }
 
+export interface LegacyDependenciesPluginStart {
+  storage: Storage;
+}
+
 export class LegacyDependenciesPlugin implements Plugin<any, any> {
   public setup() {
     initLegacyModule();
@@ -35,7 +40,9 @@ export class LegacyDependenciesPlugin implements Plugin<any, any> {
     } as LegacyDependenciesPluginSetup;
   }
 
-  public start(core: CoreStart) {
-    // nothing to do here yet
+  public start() {
+    return {
+      storage: new Storage(window.localStorage),
+    } as LegacyDependenciesPluginStart;
   }
 }
diff --git a/src/legacy/core_plugins/data/public/timefilter/get_time.ts b/src/legacy/core_plugins/data/public/timefilter/get_time.ts
index e54725dd9ba486..18a43d789714d7 100644
--- a/src/legacy/core_plugins/data/public/timefilter/get_time.ts
+++ b/src/legacy/core_plugins/data/public/timefilter/get_time.ts
@@ -18,8 +18,8 @@
  */
 
 import dateMath from '@elastic/datemath';
-import { Field, IndexPattern } from 'ui/index_patterns';
 import { TimeRange } from 'src/plugins/data/public';
+import { IndexPattern, Field } from '../index_patterns';
 
 interface CalculateBoundsOptions {
   forceNow?: Date;
diff --git a/src/legacy/core_plugins/data/public/timefilter/timefilter.ts b/src/legacy/core_plugins/data/public/timefilter/timefilter.ts
index c08ea9043da927..64129ea2af5ffb 100644
--- a/src/legacy/core_plugins/data/public/timefilter/timefilter.ts
+++ b/src/legacy/core_plugins/data/public/timefilter/timefilter.ts
@@ -25,7 +25,7 @@ import { IndexPattern, TimeHistoryContract } from '../index';
 import { areRefreshIntervalsDifferent, areTimeRangesDifferent } from './lib/diff_time_picker_vals';
 import { parseQueryString } from './lib/parse_querystring';
 import { calculateBounds, getTime } from './get_time';
-import { TimefilterConfig, InputTimeRange } from './types';
+import { TimefilterConfig, InputTimeRange, TimeRangeBounds } from './types';
 
 export class Timefilter {
   // Fired when isTimeRangeSelectorEnabled \ isAutoRefreshSelectorEnabled are toggled
@@ -148,19 +148,19 @@ export class Timefilter {
     return getTime(indexPattern, timeRange ? timeRange : this._time, this.getForceNow());
   };
 
-  public getBounds = () => {
+  public getBounds(): TimeRangeBounds {
     return this.calculateBounds(this._time);
-  };
+  }
 
-  public calculateBounds = (timeRange: TimeRange) => {
+  public calculateBounds(timeRange: TimeRange): TimeRangeBounds {
     return calculateBounds(timeRange, { forceNow: this.getForceNow() });
-  };
+  }
 
-  public getActiveBounds = () => {
+  public getActiveBounds(): TimeRangeBounds | undefined {
     if (this.isTimeRangeSelectorEnabled) {
       return this.getBounds();
     }
-  };
+  }
 
   /**
    * Show the time bounds selector part of the time filter
diff --git a/src/legacy/core_plugins/data/public/types.ts b/src/legacy/core_plugins/data/public/types.ts
new file mode 100644
index 00000000000000..4b7a5c1402ea72
--- /dev/null
+++ b/src/legacy/core_plugins/data/public/types.ts
@@ -0,0 +1,31 @@
+/*
+ * 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 { UiSettingsClientContract, CoreStart } from 'src/core/public';
+import { AutocompletePublicPluginStart } from 'src/plugins/data/public';
+
+export interface IDataPluginServices extends Partial<CoreStart> {
+  appName: string;
+  uiSettings: UiSettingsClientContract;
+  savedObjects: CoreStart['savedObjects'];
+  notifications: CoreStart['notifications'];
+  http: CoreStart['http'];
+  store: Storage;
+  autocomplete: AutocompletePublicPluginStart;
+}
diff --git a/src/legacy/core_plugins/elasticsearch/index.d.ts b/src/legacy/core_plugins/elasticsearch/index.d.ts
index eeee5f3f4c6c71..4cbb1c82cc1e40 100644
--- a/src/legacy/core_plugins/elasticsearch/index.d.ts
+++ b/src/legacy/core_plugins/elasticsearch/index.d.ts
@@ -482,7 +482,7 @@ export interface CallCluster {
   (endpoint: 'indices.upgrade', params: IndicesUpgradeParams, options?: CallClusterOptions): ReturnType<ESClient['indices']['upgrade']>;
   (endpoint: 'indices.validateQuery', params: IndicesValidateQueryParams, options?: CallClusterOptions): ReturnType<ESClient['indices']['validateQuery']>;
 
-  // ingest namepsace
+  // ingest namespace
   (endpoint: 'ingest.deletePipeline', params: IngestDeletePipelineParams, options?: CallClusterOptions): ReturnType<ESClient['ingest']['deletePipeline']>;
   (endpoint: 'ingest.getPipeline', params: IngestGetPipelineParams, options?: CallClusterOptions): ReturnType<ESClient['ingest']['getPipeline']>;
   (endpoint: 'ingest.putPipeline', params: IngestPutPipelineParams, options?: CallClusterOptions): ReturnType<ESClient['ingest']['putPipeline']>;
diff --git a/src/legacy/core_plugins/input_control_vis/public/register_vis.js b/src/legacy/core_plugins/input_control_vis/public/register_vis.js
index 76320b331bb066..731cf2dac9dd2e 100644
--- a/src/legacy/core_plugins/input_control_vis/public/register_vis.js
+++ b/src/legacy/core_plugins/input_control_vis/public/register_vis.js
@@ -24,7 +24,7 @@ import { OptionsTab } from './components/editor/options_tab';
 import { defaultFeedbackMessage } from 'ui/vis/default_feedback_message';
 import { Status } from 'ui/vis/update_status';
 import { i18n } from '@kbn/i18n';
-import { setup as visualizations } from '../../visualizations/public/legacy';
+import { setup as visualizations } from '../../visualizations/public/np_ready/public/legacy';
 
 function InputControlVisProvider() {
 
diff --git a/src/legacy/core_plugins/interpreter/public/functions/__snapshots__/kibana.test.js.snap b/src/legacy/core_plugins/interpreter/public/functions/__snapshots__/kibana.test.ts.snap
similarity index 100%
rename from src/legacy/core_plugins/interpreter/public/functions/__snapshots__/kibana.test.js.snap
rename to src/legacy/core_plugins/interpreter/public/functions/__snapshots__/kibana.test.ts.snap
diff --git a/src/legacy/core_plugins/interpreter/public/functions/__tests__/font.js b/src/legacy/core_plugins/interpreter/public/functions/__tests__/font.js
deleted file mode 100644
index 4a7ebc1522f2ab..00000000000000
--- a/src/legacy/core_plugins/interpreter/public/functions/__tests__/font.js
+++ /dev/null
@@ -1,192 +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 expect from '@kbn/expect';
-import { openSans } from '../../../common/lib/fonts';
-import { font } from '../font';
-import { functionWrapper } from '../../../test_helpers';
-
-describe('font', () => {
-  const fn = functionWrapper(font);
-
-  describe('default output', () => {
-    const result = fn(null);
-
-    it('returns a style', () => {
-      expect(result)
-        .to.have.property('type', 'style')
-        .and.to.have.property('spec')
-        .and.to.have.property('css');
-    });
-  });
-
-  describe('args', () => {
-    describe('size', () => {
-      it('sets font size', () => {
-        const result = fn(null, { size: 20 });
-        expect(result.spec).to.have.property('fontSize', '20px');
-        expect(result.css).to.contain('font-size:20px');
-      });
-
-      it('defaults to 14px', () => {
-        const result = fn(null);
-        expect(result.spec).to.have.property('fontSize', '14px');
-        expect(result.css).to.contain('font-size:14px');
-      });
-    });
-
-    describe('lHeight', () => {
-      it('sets line height', () => {
-        const result = fn(null, { lHeight: 30 });
-        expect(result.spec).to.have.property('lineHeight', '30px');
-        expect(result.css).to.contain('line-height:30px');
-      });
-
-      it('defaults to 1', () => {
-        const result = fn(null);
-        expect(result.spec).to.have.property('lineHeight', '1');
-        expect(result.css).to.contain('line-height:1');
-      });
-    });
-
-    describe('family', () => {
-      it('sets font family', () => {
-        const result = fn(null, { family: 'Optima, serif' });
-        expect(result.spec).to.have.property('fontFamily', 'Optima, serif');
-        expect(result.css).to.contain('font-family:Optima, serif');
-      });
-
-      it(`defaults to "${openSans.value}"`, () => {
-        const result = fn(null);
-        expect(result.spec).to.have.property('fontFamily', `"${openSans.value}"`);
-        expect(result.css).to.contain(`font-family:"${openSans.value}"`);
-      });
-    });
-
-    describe('color', () => {
-      it('sets font color', () => {
-        const result = fn(null, { color: 'blue' });
-        expect(result.spec).to.have.property('color', 'blue');
-        expect(result.css).to.contain('color:blue');
-      });
-    });
-
-    describe('weight', () => {
-      it('sets font weight', () => {
-        let result = fn(null, { weight: 'normal' });
-        expect(result.spec).to.have.property('fontWeight', 'normal');
-        expect(result.css).to.contain('font-weight:normal');
-
-        result = fn(null, { weight: 'bold' });
-        expect(result.spec).to.have.property('fontWeight', 'bold');
-        expect(result.css).to.contain('font-weight:bold');
-
-        result = fn(null, { weight: 'bolder' });
-        expect(result.spec).to.have.property('fontWeight', 'bolder');
-        expect(result.css).to.contain('font-weight:bolder');
-
-        result = fn(null, { weight: 'lighter' });
-        expect(result.spec).to.have.property('fontWeight', 'lighter');
-        expect(result.css).to.contain('font-weight:lighter');
-
-        result = fn(null, { weight: '400' });
-        expect(result.spec).to.have.property('fontWeight', '400');
-        expect(result.css).to.contain('font-weight:400');
-      });
-
-      it('defaults to \'normal\'', () => {
-        const result = fn(null);
-        expect(result.spec).to.have.property('fontWeight', 'normal');
-        expect(result.css).to.contain('font-weight:normal');
-      });
-
-      it('throws when provided an invalid weight', () => {
-        expect(() => fn(null, { weight: 'foo' })).to.throwException();
-      });
-    });
-
-    describe('underline', () => {
-      it('sets text underline', () => {
-        let result = fn(null, { underline: true });
-        expect(result.spec).to.have.property('textDecoration', 'underline');
-        expect(result.css).to.contain('text-decoration:underline');
-
-        result = fn(null, { underline: false });
-        expect(result.spec).to.have.property('textDecoration', 'none');
-        expect(result.css).to.contain('text-decoration:none');
-      });
-
-      it('defaults to false', () => {
-        const result = fn(null);
-        expect(result.spec).to.have.property('textDecoration', 'none');
-        expect(result.css).to.contain('text-decoration:none');
-      });
-    });
-
-    describe('italic', () => {
-      it('sets italic', () => {
-        let result = fn(null, { italic: true });
-        expect(result.spec).to.have.property('fontStyle', 'italic');
-        expect(result.css).to.contain('font-style:italic');
-
-        result = fn(null, { italic: false });
-        expect(result.spec).to.have.property('fontStyle', 'normal');
-        expect(result.css).to.contain('font-style:normal');
-      });
-
-      it('defaults to false', () => {
-        const result = fn(null);
-        expect(result.spec).to.have.property('fontStyle', 'normal');
-        expect(result.css).to.contain('font-style:normal');
-      });
-    });
-
-    describe('align', () => {
-      it('sets text alignment', () => {
-        let result = fn(null, { align: 'left' });
-        expect(result.spec).to.have.property('textAlign', 'left');
-        expect(result.css).to.contain('text-align:left');
-
-        result = fn(null, { align: 'center' });
-        expect(result.spec).to.have.property('textAlign', 'center');
-        expect(result.css).to.contain('text-align:center');
-
-        result = fn(null, { align: 'right' });
-        expect(result.spec).to.have.property('textAlign', 'right');
-        expect(result.css).to.contain('text-align:right');
-
-        result = fn(null, { align: 'justify' });
-        expect(result.spec).to.have.property('textAlign', 'justify');
-        expect(result.css).to.contain('text-align:justify');
-      });
-
-      it(`defaults to 'left'`, () => {
-        const result = fn(null);
-        expect(result.spec).to.have.property('textAlign', 'left');
-        expect(result.css).to.contain('text-align:left');
-      });
-
-      it('throws when provided an invalid alignment', () => {
-        expect(fn)
-          .withArgs(null, { align: 'foo' })
-          .to.throwException();
-      });
-    });
-  });
-});
diff --git a/src/legacy/core_plugins/interpreter/public/functions/clog.js b/src/legacy/core_plugins/interpreter/public/functions/clog.ts
similarity index 91%
rename from src/legacy/core_plugins/interpreter/public/functions/clog.js
rename to src/legacy/core_plugins/interpreter/public/functions/clog.ts
index 634d166f5f0bb5..4867726a42d72c 100644
--- a/src/legacy/core_plugins/interpreter/public/functions/clog.js
+++ b/src/legacy/core_plugins/interpreter/public/functions/clog.ts
@@ -20,8 +20,8 @@
 export const clog = () => ({
   name: 'clog',
   help: 'Outputs the context to the console',
-  fn: context => {
-    console.log(context); //eslint-disable-line no-console
+  fn: (context: any) => {
+    console.log(context); // eslint-disable-line no-console
     return context;
   },
 });
diff --git a/src/legacy/core_plugins/interpreter/public/functions/font.test.ts b/src/legacy/core_plugins/interpreter/public/functions/font.test.ts
new file mode 100644
index 00000000000000..dba540178777bc
--- /dev/null
+++ b/src/legacy/core_plugins/interpreter/public/functions/font.test.ts
@@ -0,0 +1,202 @@
+/*
+ * 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 { openSans } from '../../common/lib/fonts';
+import { font } from './font';
+import { functionWrapper } from '../../test_helpers';
+
+describe('font', () => {
+  const fn: any = functionWrapper(font);
+
+  describe('default output', () => {
+    const result = fn(null);
+
+    it('returns a style', () => {
+      expect(result).toMatchObject({
+        type: 'style',
+        spec: expect.any(Object),
+        css: expect.any(String),
+      });
+    });
+  });
+
+  describe('args', () => {
+    describe('size', () => {
+      it('sets font size', () => {
+        const result = fn(null, { size: 20 });
+        expect(result).toMatchObject({
+          spec: {
+            fontSize: '20px',
+          },
+        });
+        expect(result.css).toContain('font-size:20px');
+      });
+
+      it('defaults to 14px', () => {
+        const result = fn(null);
+        expect(result).toMatchObject({
+          spec: {
+            fontSize: '14px',
+          },
+        });
+        expect(result.css).toContain('font-size:14px');
+      });
+    });
+
+    describe('lHeight', () => {
+      it('sets line height', () => {
+        const result = fn(null, { lHeight: 30 });
+        expect(result).toMatchObject({
+          spec: {
+            lineHeight: '30px',
+          },
+        });
+        expect(result.css).toContain('line-height:30px');
+      });
+
+      it('defaults to 1', () => {
+        const result = fn(null);
+        expect(result.spec.lineHeight).toBe('1');
+        expect(result.css).toContain('line-height:1');
+      });
+    });
+
+    describe('family', () => {
+      it('sets font family', () => {
+        const result = fn(null, { family: 'Optima, serif' });
+        expect(result.spec.fontFamily).toBe('Optima, serif');
+        expect(result.css).toContain('font-family:Optima, serif');
+      });
+
+      it(`defaults to "${openSans.value}"`, () => {
+        const result = fn(null);
+        expect(result.spec.fontFamily).toBe(`"${openSans.value}"`);
+        expect(result.css).toContain(`font-family:"${openSans.value}"`);
+      });
+    });
+
+    describe('color', () => {
+      it('sets font color', () => {
+        const result = fn(null, { color: 'blue' });
+        expect(result.spec.color).toBe('blue');
+        expect(result.css).toContain('color:blue');
+      });
+    });
+
+    describe('weight', () => {
+      it('sets font weight', () => {
+        let result = fn(null, { weight: 'normal' });
+        expect(result.spec.fontWeight).toBe('normal');
+        expect(result.css).toContain('font-weight:normal');
+
+        result = fn(null, { weight: 'bold' });
+        expect(result.spec.fontWeight).toBe('bold');
+        expect(result.css).toContain('font-weight:bold');
+
+        result = fn(null, { weight: 'bolder' });
+        expect(result.spec.fontWeight).toBe('bolder');
+        expect(result.css).toContain('font-weight:bolder');
+
+        result = fn(null, { weight: 'lighter' });
+        expect(result.spec.fontWeight).toBe('lighter');
+        expect(result.css).toContain('font-weight:lighter');
+
+        result = fn(null, { weight: '400' });
+        expect(result.spec.fontWeight).toBe('400');
+        expect(result.css).toContain('font-weight:400');
+      });
+
+      it("defaults to 'normal'", () => {
+        const result = fn(null);
+        expect(result.spec.fontWeight).toBe('normal');
+        expect(result.css).toContain('font-weight:normal');
+      });
+
+      it('throws when provided an invalid weight', () => {
+        expect(() => fn(null, { weight: 'foo' })).toThrow();
+      });
+    });
+
+    describe('underline', () => {
+      it('sets text underline', () => {
+        let result = fn(null, { underline: true });
+        expect(result.spec.textDecoration).toBe('underline');
+        expect(result.css).toContain('text-decoration:underline');
+
+        result = fn(null, { underline: false });
+        expect(result.spec.textDecoration).toBe('none');
+        expect(result.css).toContain('text-decoration:none');
+      });
+
+      it('defaults to false', () => {
+        const result = fn(null);
+        expect(result.spec.textDecoration).toBe('none');
+        expect(result.css).toContain('text-decoration:none');
+      });
+    });
+
+    describe('italic', () => {
+      it('sets italic', () => {
+        let result = fn(null, { italic: true });
+        expect(result.spec.fontStyle).toBe('italic');
+        expect(result.css).toContain('font-style:italic');
+
+        result = fn(null, { italic: false });
+        expect(result.spec.fontStyle).toBe('normal');
+        expect(result.css).toContain('font-style:normal');
+      });
+
+      it('defaults to false', () => {
+        const result = fn(null);
+        expect(result.spec.fontStyle).toBe('normal');
+        expect(result.css).toContain('font-style:normal');
+      });
+    });
+
+    describe('align', () => {
+      it('sets text alignment', () => {
+        let result = fn(null, { align: 'left' });
+        expect(result.spec.textAlign).toBe('left');
+        expect(result.css).toContain('text-align:left');
+
+        result = fn(null, { align: 'center' });
+        expect(result.spec.textAlign).toBe('center');
+        expect(result.css).toContain('text-align:center');
+
+        result = fn(null, { align: 'right' });
+        expect(result.spec.textAlign).toBe('right');
+        expect(result.css).toContain('text-align:right');
+
+        result = fn(null, { align: 'justify' });
+        expect(result.spec.textAlign).toBe('justify');
+        expect(result.css).toContain('text-align:justify');
+      });
+
+      it(`defaults to 'left'`, () => {
+        const result = fn(null);
+        expect(result.spec.textAlign).toBe('left');
+        expect(result.css).toContain('text-align:left');
+      });
+
+      it('throws when provided an invalid alignment', () => {
+        expect(() => fn(null, { align: 'foo' })).toThrow();
+      });
+    });
+  });
+});
diff --git a/src/legacy/core_plugins/interpreter/public/functions/index.js b/src/legacy/core_plugins/interpreter/public/functions/index.ts
similarity index 92%
rename from src/legacy/core_plugins/interpreter/public/functions/index.js
rename to src/legacy/core_plugins/interpreter/public/functions/index.ts
index 38c3920f91bd29..d86f033acb3d13 100644
--- a/src/legacy/core_plugins/interpreter/public/functions/index.js
+++ b/src/legacy/core_plugins/interpreter/public/functions/index.ts
@@ -27,5 +27,12 @@ import { visualization } from './visualization';
 import { visDimension } from './vis_dimension';
 
 export const functions = [
-  clog, esaggs, font, kibana, kibanaContext, range, visualization, visDimension,
+  clog,
+  esaggs,
+  font,
+  kibana,
+  kibanaContext,
+  range,
+  visualization,
+  visDimension,
 ];
diff --git a/src/legacy/core_plugins/interpreter/public/functions/kibana.test.js b/src/legacy/core_plugins/interpreter/public/functions/kibana.test.ts
similarity index 97%
rename from src/legacy/core_plugins/interpreter/public/functions/kibana.test.js
rename to src/legacy/core_plugins/interpreter/public/functions/kibana.test.ts
index 4757b9b12b50da..9f80449ac36be4 100644
--- a/src/legacy/core_plugins/interpreter/public/functions/kibana.test.js
+++ b/src/legacy/core_plugins/interpreter/public/functions/kibana.test.ts
@@ -22,9 +22,9 @@ import { kibana } from './kibana';
 
 describe('interpreter/functions#kibana', () => {
   const fn = functionWrapper(kibana);
-  let context;
-  let initialContext;
-  let handlers;
+  let context: any;
+  let initialContext: any;
+  let handlers: any;
 
   beforeEach(() => {
     context = { timeRange: { from: '0', to: '1' } };
diff --git a/src/legacy/core_plugins/interpreter/public/functions/kibana.js b/src/legacy/core_plugins/interpreter/public/functions/kibana.ts
similarity index 93%
rename from src/legacy/core_plugins/interpreter/public/functions/kibana.js
rename to src/legacy/core_plugins/interpreter/public/functions/kibana.ts
index e0817d8e04b026..37ff337f58b8d4 100644
--- a/src/legacy/core_plugins/interpreter/public/functions/kibana.js
+++ b/src/legacy/core_plugins/interpreter/public/functions/kibana.ts
@@ -24,10 +24,10 @@ export const kibana = () => ({
   type: 'kibana_context',
   context: {},
   help: i18n.translate('interpreter.functions.kibana.help', {
-    defaultMessage: 'Gets kibana global context'
+    defaultMessage: 'Gets kibana global context',
   }),
   args: {},
-  fn(context, args, handlers) {
+  fn(context: any, args: any, handlers: any) {
     const initialContext = handlers.getInitialContext ? handlers.getInitialContext() : {};
 
     if (context.query) {
@@ -45,7 +45,7 @@ export const kibana = () => ({
       type: 'kibana_context',
       query: initialContext.query,
       filters: initialContext.filters,
-      timeRange: timeRange,
+      timeRange,
     };
   },
 });
diff --git a/src/legacy/core_plugins/interpreter/public/functions/kibana_context.js b/src/legacy/core_plugins/interpreter/public/functions/kibana_context.ts
similarity index 87%
rename from src/legacy/core_plugins/interpreter/public/functions/kibana_context.js
rename to src/legacy/core_plugins/interpreter/public/functions/kibana_context.ts
index 7b7294a87831d6..2f2241a3670945 100644
--- a/src/legacy/core_plugins/interpreter/public/functions/kibana_context.js
+++ b/src/legacy/core_plugins/interpreter/public/functions/kibana_context.ts
@@ -24,13 +24,10 @@ export const kibanaContext = () => ({
   name: 'kibana_context',
   type: 'kibana_context',
   context: {
-    types: [
-      'kibana_context',
-      'null',
-    ],
+    types: ['kibana_context', 'null'],
   },
   help: i18n.translate('interpreter.functions.kibana_context.help', {
-    defaultMessage: 'Updates kibana global context'
+    defaultMessage: 'Updates kibana global context',
   }),
   args: {
     q: {
@@ -49,11 +46,11 @@ export const kibanaContext = () => ({
     savedSearchId: {
       types: ['string', 'null'],
       default: null,
-    }
+    },
   },
-  async fn(context, args) {
+  async fn(context: any, args: any) {
     const $injector = await chrome.dangerouslyGetActiveInjector();
-    const savedSearches = $injector.get('savedSearches');
+    const savedSearches = $injector.get('savedSearches') as any;
     const queryArg = args.q ? JSON.parse(args.q) : [];
     let queries = Array.isArray(queryArg) ? queryArg : [queryArg];
     let filters = args.filters ? JSON.parse(args.filters) : [];
@@ -71,7 +68,7 @@ export const kibanaContext = () => ({
     }
 
     if (context.filters) {
-      filters = filters.concat(context.filters).filter(f => !f.meta.disabled);
+      filters = filters.concat(context.filters).filter((f: any) => !f.meta.disabled);
     }
 
     const timeRange = args.timeRange ? JSON.parse(args.timeRange) : context.timeRange;
@@ -79,8 +76,8 @@ export const kibanaContext = () => ({
     return {
       type: 'kibana_context',
       query: queries,
-      filters: filters,
-      timeRange: timeRange,
+      filters,
+      timeRange,
     };
   },
 });
diff --git a/src/legacy/core_plugins/interpreter/public/functions/vis_dimension.js b/src/legacy/core_plugins/interpreter/public/functions/vis_dimension.ts
similarity index 74%
rename from src/legacy/core_plugins/interpreter/public/functions/vis_dimension.js
rename to src/legacy/core_plugins/interpreter/public/functions/vis_dimension.ts
index e1a6c41198bad4..19503dbe03ae98 100644
--- a/src/legacy/core_plugins/interpreter/public/functions/vis_dimension.js
+++ b/src/legacy/core_plugins/interpreter/public/functions/vis_dimension.ts
@@ -22,48 +22,48 @@ import { i18n } from '@kbn/i18n';
 export const visDimension = () => ({
   name: 'visdimension',
   help: i18n.translate('interpreter.function.visDimension.help', {
-    defaultMessage: 'Generates visConfig dimension object'
+    defaultMessage: 'Generates visConfig dimension object',
   }),
   type: 'vis_dimension',
   context: {
-    types: [
-      'kibana_datatable'
-    ],
+    types: ['kibana_datatable'],
   },
   args: {
     accessor: {
       types: ['string', 'number'],
       aliases: ['_'],
       help: i18n.translate('interpreter.function.visDimension.accessor.help', {
-        defaultMessage: 'Column in your dataset to use (either column index or column name)'
+        defaultMessage: 'Column in your dataset to use (either column index or column name)',
       }),
     },
     format: {
       types: ['string'],
-      default: 'string'
+      default: 'string',
     },
     formatParams: {
       types: ['string'],
       default: '"{}"',
-    }
+    },
   },
-  fn: (context, args) => {
-    const accessor = Number.isInteger(args.accessor) ?
-      args.accessor :
-      context.columns.find(c => c.id === args.accessor);
+  fn: (context: any, args: any) => {
+    const accessor = Number.isInteger(args.accessor)
+      ? args.accessor
+      : context.columns.find((c: any) => c.id === args.accessor);
     if (accessor === undefined) {
-      throw new Error(i18n.translate('interpreter.function.visDimension.error.accessor', {
-        defaultMessage: 'Column name provided is invalid'
-      }));
+      throw new Error(
+        i18n.translate('interpreter.function.visDimension.error.accessor', {
+          defaultMessage: 'Column name provided is invalid',
+        })
+      );
     }
 
     return {
       type: 'vis_dimension',
-      accessor: accessor,
+      accessor,
       format: {
         id: args.format,
         params: JSON.parse(args.formatParams),
-      }
+      },
     };
   },
 });
diff --git a/src/legacy/core_plugins/interpreter/public/functions/visualization.js b/src/legacy/core_plugins/interpreter/public/functions/visualization.ts
similarity index 90%
rename from src/legacy/core_plugins/interpreter/public/functions/visualization.js
rename to src/legacy/core_plugins/interpreter/public/functions/visualization.ts
index 7dceeaf6843540..d46044b544c419 100644
--- a/src/legacy/core_plugins/interpreter/public/functions/visualization.js
+++ b/src/legacy/core_plugins/interpreter/public/functions/visualization.ts
@@ -20,17 +20,16 @@
 import { get } from 'lodash';
 import { i18n } from '@kbn/i18n';
 import chrome from 'ui/chrome';
-import { setup as data } from '../../../data/public/legacy';
-import { start as visualizations } from '../../../visualizations/public/legacy';
-
 import { FilterBarQueryFilterProvider } from 'ui/filter_manager/query_filter';
 import { PersistedState } from 'ui/persisted_state';
+import { setup as data } from '../../../data/public/legacy';
+import { start as visualizations } from '../../../visualizations/public/np_ready/public/legacy';
 
 export const visualization = () => ({
   name: 'visualization',
   type: 'render',
   help: i18n.translate('interpreter.functions.visualization.help', {
-    defaultMessage: 'A simple visualization'
+    defaultMessage: 'A simple visualization',
   }),
   args: {
     index: {
@@ -60,17 +59,17 @@ export const visualization = () => ({
     uiState: {
       types: ['string'],
       default: '"{}"',
-    }
+    },
   },
-  async fn(context, args, handlers) {
+  async fn(context: any, args: any, handlers: any) {
     const $injector = await chrome.dangerouslyGetActiveInjector();
-    const Private = $injector.get('Private');
+    const Private = $injector.get('Private') as any;
     const { indexPatterns } = data.indexPatterns;
     const queryFilter = Private(FilterBarQueryFilterProvider);
 
     const visConfigParams = JSON.parse(args.visConfig);
     const schemas = JSON.parse(args.schemas);
-    const visType = visualizations.types.get(args.type || 'histogram');
+    const visType = visualizations.types.get(args.type || 'histogram') as any;
     const indexPattern = args.index ? await indexPatterns.get(args.index) : null;
 
     const uiStateParams = JSON.parse(args.uiState);
@@ -85,7 +84,7 @@ export const visualization = () => ({
         timeRange: get(context, 'timeRange', null),
         query: get(context, 'query', null),
         filters: get(context, 'filters', null),
-        uiState: uiState,
+        uiState,
         inspectorAdapters: handlers.inspectorAdapters,
         queryFilter,
         forceFetch: true,
@@ -95,14 +94,14 @@ export const visualization = () => ({
     if (typeof visType.responseHandler === 'function') {
       if (context.columns) {
         // assign schemas to aggConfigs
-        context.columns.forEach(column => {
+        context.columns.forEach((column: any) => {
           if (column.aggConfig) {
             column.aggConfig.aggConfigs.schemas = visType.schemas.all;
           }
         });
 
         Object.keys(schemas).forEach(key => {
-          schemas[key].forEach(i => {
+          schemas[key].forEach((i: any) => {
             if (context.columns[i] && context.columns[i].aggConfig) {
               context.columns[i].aggConfig.schema = key;
             }
@@ -119,8 +118,8 @@ export const visualization = () => ({
       value: {
         visData: context,
         visType: args.type,
-        visConfig: visConfigParams
-      }
+        visConfig: visConfigParams,
+      },
     };
-  }
+  },
 });
diff --git a/src/legacy/core_plugins/interpreter/public/interpreter.test.js b/src/legacy/core_plugins/interpreter/public/interpreter.test.ts
similarity index 96%
rename from src/legacy/core_plugins/interpreter/public/interpreter.test.js
rename to src/legacy/core_plugins/interpreter/public/interpreter.test.ts
index bd7dc0a47c1240..1de1e8c0cc0598 100644
--- a/src/legacy/core_plugins/interpreter/public/interpreter.test.js
+++ b/src/legacy/core_plugins/interpreter/public/interpreter.test.ts
@@ -24,9 +24,9 @@ jest.mock('ui/new_platform', () => ({
       injectedMetadata: {
         getKibanaVersion: () => '8.0.0',
         getBasePath: () => '/lol',
-      }
-    }
-  }
+      },
+    },
+  },
 }));
 jest.mock('uiExports/interpreter');
 
@@ -38,7 +38,7 @@ jest.mock('@kbn/interpreter/common', () => ({
 const mockInterpreter = {
   interpreter: {
     interpretAst: jest.fn(),
-  }
+  },
 };
 jest.mock('./lib/interpreter', () => ({
   initializeInterpreter: jest.fn().mockReturnValue(Promise.resolve(mockInterpreter)),
@@ -57,9 +57,9 @@ jest.mock('./functions', () => ({ functions: [{}, {}, {}] }));
 jest.mock('./renderers/visualization', () => ({ visualization: {} }));
 
 describe('interpreter/interpreter', () => {
-  let getInterpreter;
-  let interpretAst;
-  let initializeInterpreter;
+  let getInterpreter: any;
+  let interpretAst: any;
+  let initializeInterpreter: any;
 
   beforeEach(() => {
     jest.clearAllMocks();
@@ -117,5 +117,4 @@ describe('interpreter/interpreter', () => {
       expect(mockInterpreter.interpreter.interpretAst).toHaveBeenCalledTimes(2);
     });
   });
-
 });
diff --git a/src/legacy/core_plugins/interpreter/public/interpreter.js b/src/legacy/core_plugins/interpreter/public/interpreter.ts
similarity index 87%
rename from src/legacy/core_plugins/interpreter/public/interpreter.js
rename to src/legacy/core_plugins/interpreter/public/interpreter.ts
index 84e05bb10d9fa6..8ba82d5daf759a 100644
--- a/src/legacy/core_plugins/interpreter/public/interpreter.js
+++ b/src/legacy/core_plugins/interpreter/public/interpreter.ts
@@ -18,6 +18,7 @@
  */
 
 import 'uiExports/interpreter';
+// @ts-ignore
 import { register, registryFactory } from '@kbn/interpreter/common';
 import { initializeInterpreter } from './lib/interpreter';
 import { registries } from './registries';
@@ -27,7 +28,10 @@ import { typeSpecs } from '../../../../plugins/expressions/common';
 
 // Expose kbnInterpreter.register(specs) and kbnInterpreter.registries() globally so that plugins
 // can register without a transpile step.
-global.kbnInterpreter = Object.assign(global.kbnInterpreter || {}, registryFactory(registries));
+(global as any).kbnInterpreter = Object.assign(
+  (global as any).kbnInterpreter || {},
+  registryFactory(registries)
+);
 
 register(registries, {
   types: typeSpecs,
@@ -35,7 +39,7 @@ register(registries, {
   renderers: [visualization],
 });
 
-let interpreterPromise;
+let interpreterPromise: Promise<any> | undefined;
 
 export const getInterpreter = async () => {
   if (!interpreterPromise) {
@@ -44,7 +48,7 @@ export const getInterpreter = async () => {
   return await interpreterPromise;
 };
 
-export const interpretAst = async (...params) => {
+export const interpretAst = async (...params: any) => {
   const { interpreter } = await getInterpreter();
   return await interpreter.interpretAst(...params);
 };
diff --git a/src/legacy/core_plugins/interpreter/public/lib/render_function.js b/src/legacy/core_plugins/interpreter/public/lib/render_function.ts
similarity index 92%
rename from src/legacy/core_plugins/interpreter/public/lib/render_function.js
rename to src/legacy/core_plugins/interpreter/public/lib/render_function.ts
index 04aa05951be70f..76d1f58b661950 100644
--- a/src/legacy/core_plugins/interpreter/public/lib/render_function.js
+++ b/src/legacy/core_plugins/interpreter/public/lib/render_function.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-export function RenderFunction(config) {
+export function RenderFunction(this: any, config: any) {
   // This must match the name of the function that is used to create the `type: render` object
   this.name = config.name;
 
@@ -36,7 +36,7 @@ export function RenderFunction(config) {
   // the function called to render the data
   this.render =
     config.render ||
-    function render(domNode, data, done) {
+    function render(domNode: any, data: any, done: any) {
       done();
     };
 }
diff --git a/src/legacy/core_plugins/interpreter/public/lib/render_functions_registry.js b/src/legacy/core_plugins/interpreter/public/lib/render_functions_registry.ts
similarity index 88%
rename from src/legacy/core_plugins/interpreter/public/lib/render_functions_registry.js
rename to src/legacy/core_plugins/interpreter/public/lib/render_functions_registry.ts
index 60e823baf0fa78..427e7f7454c24e 100644
--- a/src/legacy/core_plugins/interpreter/public/lib/render_functions_registry.js
+++ b/src/legacy/core_plugins/interpreter/public/lib/render_functions_registry.ts
@@ -20,9 +20,9 @@
 import { Registry } from '@kbn/interpreter/common';
 import { RenderFunction } from './render_function';
 
-class RenderFunctionsRegistry extends Registry {
-  wrapper(obj) {
-    return new RenderFunction(obj);
+class RenderFunctionsRegistry extends Registry<any, any> {
+  wrapper(obj: any) {
+    return new (RenderFunction as any)(obj);
   }
 }
 
diff --git a/src/legacy/core_plugins/interpreter/public/renderers/visualization.js b/src/legacy/core_plugins/interpreter/public/renderers/visualization.ts
similarity index 84%
rename from src/legacy/core_plugins/interpreter/public/renderers/visualization.js
rename to src/legacy/core_plugins/interpreter/public/renderers/visualization.ts
index 38fe02436380c7..960e925b132213 100644
--- a/src/legacy/core_plugins/interpreter/public/renderers/visualization.js
+++ b/src/legacy/core_plugins/interpreter/public/renderers/visualization.ts
@@ -19,17 +19,18 @@
 
 import chrome from 'ui/chrome';
 import { visualizationLoader } from 'ui/visualize/loader/visualization_loader';
+// @ts-ignore
 import { VisProvider } from 'ui/visualize/loader/vis';
 
 export const visualization = () => ({
   name: 'visualization',
   displayName: 'visualization',
   reuseDomNode: true,
-  render: async (domNode, config, handlers) => {
+  render: async (domNode: HTMLElement, config: any, handlers: any) => {
     const { visData, visConfig, params } = config;
     const visType = config.visType || visConfig.type;
     const $injector = await chrome.dangerouslyGetActiveInjector();
-    const Private = $injector.get('Private');
+    const Private = $injector.get('Private') as any;
     const Vis = Private(VisProvider);
 
     if (handlers.vis) {
@@ -49,8 +50,10 @@ export const visualization = () => ({
 
     handlers.onDestroy(() => visualizationLoader.destroy());
 
-    await visualizationLoader.render(domNode, handlers.vis, visData, handlers.vis.params, uiState, params).then(() => {
-      if (handlers.done) handlers.done();
-    });
+    await visualizationLoader
+      .render(domNode, handlers.vis, visData, handlers.vis.params, uiState, params)
+      .then(() => {
+        if (handlers.done) handlers.done();
+      });
   },
 });
diff --git a/src/legacy/core_plugins/interpreter/server/lib/__tests__/create_handlers.js b/src/legacy/core_plugins/interpreter/server/lib/__tests__/create_handlers.ts
similarity index 95%
rename from src/legacy/core_plugins/interpreter/server/lib/__tests__/create_handlers.js
rename to src/legacy/core_plugins/interpreter/server/lib/__tests__/create_handlers.ts
index a6e0e13049e1c9..00886630807748 100644
--- a/src/legacy/core_plugins/interpreter/server/lib/__tests__/create_handlers.js
+++ b/src/legacy/core_plugins/interpreter/server/lib/__tests__/create_handlers.ts
@@ -28,13 +28,13 @@ const mockServer = {
   plugins: {
     elasticsearch: {
       getCluster: () => ({
-        callWithRequest: (...args) => Promise.resolve(args),
+        callWithRequest: (...args: any) => Promise.resolve(args),
       }),
     },
   },
   config: () => ({
     has: () => false,
-    get: val => val,
+    get: (val: any) => val,
   }),
   info: {
     uri: 'serveruri',
diff --git a/src/legacy/core_plugins/interpreter/server/lib/create_handlers.js b/src/legacy/core_plugins/interpreter/server/lib/create_handlers.ts
similarity index 88%
rename from src/legacy/core_plugins/interpreter/server/lib/create_handlers.js
rename to src/legacy/core_plugins/interpreter/server/lib/create_handlers.ts
index d4ea9b3dc6180f..6e295d0aecaa59 100644
--- a/src/legacy/core_plugins/interpreter/server/lib/create_handlers.js
+++ b/src/legacy/core_plugins/interpreter/server/lib/create_handlers.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-export const createHandlers = (request, server) => {
+export const createHandlers = (request: any, server: any) => {
   const { callWithRequest } = server.plugins.elasticsearch.getCluster('data');
   const config = server.config();
 
@@ -27,6 +27,6 @@ export const createHandlers = (request, server) => {
       config.has('server.rewriteBasePath') && config.get('server.rewriteBasePath')
         ? `${server.info.uri}${config.get('server.basePath')}`
         : server.info.uri,
-    elasticsearchClient: async (...args) => callWithRequest(request, ...args),
+    elasticsearchClient: async (...args: any) => callWithRequest(request, ...args),
   };
 };
diff --git a/src/legacy/core_plugins/interpreter/server/routes/index.js b/src/legacy/core_plugins/interpreter/server/routes/index.ts
similarity index 95%
rename from src/legacy/core_plugins/interpreter/server/routes/index.js
rename to src/legacy/core_plugins/interpreter/server/routes/index.ts
index 9140f93a9bde64..50385147dd38e6 100644
--- a/src/legacy/core_plugins/interpreter/server/routes/index.js
+++ b/src/legacy/core_plugins/interpreter/server/routes/index.ts
@@ -19,6 +19,6 @@
 
 import { registerServerFunctions } from './server_functions';
 
-export function routes(server) {
+export function routes(server: any) {
   registerServerFunctions(server);
 }
diff --git a/src/legacy/core_plugins/interpreter/server/routes/server_functions.js b/src/legacy/core_plugins/interpreter/server/routes/server_functions.ts
similarity index 84%
rename from src/legacy/core_plugins/interpreter/server/routes/server_functions.js
rename to src/legacy/core_plugins/interpreter/server/routes/server_functions.ts
index b64a9af006e412..740b046610d9e9 100644
--- a/src/legacy/core_plugins/interpreter/server/routes/server_functions.js
+++ b/src/legacy/core_plugins/interpreter/server/routes/server_functions.ts
@@ -18,16 +18,16 @@
  */
 
 import Boom from 'boom';
+import Joi from 'joi';
 import { serializeProvider, API_ROUTE } from '../../common';
 import { createHandlers } from '../lib/create_handlers';
-import Joi from 'joi';
 
 /**
  * Register the Canvas function endopints.
  *
  * @param {*} server - The Kibana server
  */
-export function registerServerFunctions(server) {
+export function registerServerFunctions(server: any) {
   getServerFunctions(server);
   runServerFunctions(server);
 }
@@ -37,7 +37,7 @@ export function registerServerFunctions(server) {
  *
  * @param {*} server - The Kibana server
  */
-function runServerFunctions(server) {
+function runServerFunctions(server: any) {
   server.route({
     method: 'POST',
     path: `${API_ROUTE}/fns`,
@@ -48,19 +48,20 @@ function runServerFunctions(server) {
       },
       validate: {
         payload: Joi.object({
-          functions: Joi.array().items(
-            Joi.object()
-              .keys({
+          functions: Joi.array()
+            .items(
+              Joi.object().keys({
                 id: Joi.number().required(),
                 functionName: Joi.string().required(),
                 args: Joi.object().default({}),
                 context: Joi.any().default(null),
-              }),
-          ).required(),
+              })
+            )
+            .required(),
         }).required(),
       },
     },
-    async handler(req) {
+    async handler(req: any) {
       const handlers = await createHandlers(req, server);
       const { functions } = req.payload;
 
@@ -73,19 +74,19 @@ function runServerFunctions(server) {
       // Send the initial headers.
       res.writeHead(200, {
         'Content-Type': 'text/plain',
-        'Connection': 'keep-alive',
+        Connection: 'keep-alive',
         'Transfer-Encoding': 'chunked',
         'Cache-Control': 'no-cache',
       });
 
       // Write a length-delimited response
-      const streamResult = (result) => {
+      const streamResult = (result: any) => {
         const payload = JSON.stringify(result) + '\n';
         res.write(`${payload.length}:${payload}`);
       };
 
       // Tries to run an interpreter function, and ensures a consistent error payload on failure.
-      const tryFunction = async (id, fnCall) => {
+      const tryFunction = async (id: any, fnCall: any) => {
         try {
           const result = await runFunction(server, handlers, fnCall);
 
@@ -96,7 +97,7 @@ function runServerFunctions(server) {
           return { id, statusCode: 200, result };
         } catch (err) {
           if (Boom.isBoom(err)) {
-            return batchError(id, err.output.payload, err.statusCode);
+            return batchError(id, err.output.payload, (err as any).statusCode);
           } else if (err instanceof Error) {
             return batchError(id, err.message);
           }
@@ -107,7 +108,9 @@ function runServerFunctions(server) {
       };
 
       // Process each function individually, and stream the responses back to the client
-      await Promise.all(functions.map(({ id, ...fnCall }) => tryFunction(id, fnCall).then(streamResult)));
+      await Promise.all(
+        functions.map(({ id, ...fnCall }: any) => tryFunction(id, fnCall).then(streamResult))
+      );
 
       // All of the responses have been written, so we can close the response.
       res.end();
@@ -118,7 +121,7 @@ function runServerFunctions(server) {
 /**
  * A helper function for bundling up errors.
  */
-function batchError(id, message, statusCode = 500) {
+function batchError(id: any, message: any, statusCode = 500) {
   return {
     id,
     statusCode,
@@ -130,7 +133,7 @@ function batchError(id, message, statusCode = 500) {
  * Register the endpoint that returns the list of server-only functions.
  * @param {*} server - The Kibana server
  */
-function getServerFunctions(server) {
+function getServerFunctions(server: any) {
   server.route({
     method: 'GET',
     path: `${API_ROUTE}/fns`,
@@ -147,7 +150,7 @@ function getServerFunctions(server) {
  * @param {*} handlers - The Canvas handlers
  * @param {*} fnCall - Describes the function being run `{ functionName, args, context }`
  */
-async function runFunction(server, handlers, fnCall) {
+async function runFunction(server: any, handlers: any, fnCall: any) {
   const registries = server.plugins.interpreter.registries();
   const { functionName, args, context } = fnCall;
   const types = registries.types.toJS();
diff --git a/src/legacy/core_plugins/interpreter/test_helpers.js b/src/legacy/core_plugins/interpreter/test_helpers.ts
similarity index 86%
rename from src/legacy/core_plugins/interpreter/test_helpers.js
rename to src/legacy/core_plugins/interpreter/test_helpers.ts
index e743b8a09280e2..741cd83bb47fed 100644
--- a/src/legacy/core_plugins/interpreter/test_helpers.js
+++ b/src/legacy/core_plugins/interpreter/test_helpers.ts
@@ -21,8 +21,9 @@ import { mapValues } from 'lodash';
 
 // Takes a function spec and passes in default args,
 // overriding with any provided args.
-export const functionWrapper = fnSpec => {
+export const functionWrapper = (fnSpec: any) => {
   const spec = fnSpec();
   const defaultArgs = mapValues(spec.args, argSpec => argSpec.default);
-  return (context, args, handlers) => spec.fn(context, { ...defaultArgs, ...args }, handlers);
+  return (context: any, args: any, handlers: any) =>
+    spec.fn(context, { ...defaultArgs, ...args }, handlers);
 };
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/labels_panel.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/labels_panel.tsx
index a24a37ca971d58..b96132fa29380f 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/labels_panel.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/labels_panel.tsx
@@ -29,12 +29,12 @@ function LabelsPanel({ stateParams, setValue, setGaugeValue }: GaugeOptionsInter
   return (
     <EuiPanel paddingSize="s">
       <EuiTitle size="xs">
-        <h2>
+        <h3>
           <FormattedMessage
             id="kbnVislibVisTypes.controls.gaugeOptions.labelsTitle"
             defaultMessage="Labels"
           />
-        </h2>
+        </h3>
       </EuiTitle>
       <EuiSpacer size="s" />
 
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/ranges_panel.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/ranges_panel.tsx
index 4abfb2e604b1dc..4e3b511782c9e7 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/ranges_panel.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/ranges_panel.tsx
@@ -38,12 +38,12 @@ function RangesPanel({
   return (
     <EuiPanel paddingSize="s">
       <EuiTitle size="xs">
-        <h2>
+        <h3>
           <FormattedMessage
             id="kbnVislibVisTypes.controls.gaugeOptions.rangesTitle"
             defaultMessage="Ranges"
           />
-        </h2>
+        </h3>
       </EuiTitle>
       <EuiSpacer size="s" />
 
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/style_panel.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/style_panel.tsx
index f606080afbdb2f..a76171673d9a82 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/style_panel.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/style_panel.tsx
@@ -34,12 +34,12 @@ function StylePanel({ aggs, setGaugeValue, stateParams, vis }: GaugeOptionsInter
   return (
     <EuiPanel paddingSize="s">
       <EuiTitle size="xs">
-        <h2>
+        <h3>
           <FormattedMessage
             id="kbnVislibVisTypes.controls.gaugeOptions.styleTitle"
             defaultMessage="Style"
           />
-        </h2>
+        </h3>
       </EuiTitle>
       <EuiSpacer size="s" />
 
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/__snapshots__/category_axis_panel.test.tsx.snap b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/__snapshots__/category_axis_panel.test.tsx.snap
new file mode 100644
index 00000000000000..d88654cfdc0c43
--- /dev/null
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/__snapshots__/category_axis_panel.test.tsx.snap
@@ -0,0 +1,109 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CategoryAxisPanel component should init with the default set of props 1`] = `
+<EuiPanel
+  paddingSize="s"
+>
+  <EuiTitle
+    size="xs"
+  >
+    <h3>
+      <FormattedMessage
+        defaultMessage="X-axis"
+        id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.xAxisTitle"
+        values={Object {}}
+      />
+    </h3>
+  </EuiTitle>
+  <EuiSpacer
+    size="s"
+  />
+  <SelectOption
+    label="Position"
+    options={
+      Array [
+        Object {
+          "text": "Top",
+          "value": "top",
+        },
+        Object {
+          "text": "Left",
+          "value": "left",
+        },
+        Object {
+          "text": "Right",
+          "value": "right",
+        },
+        Object {
+          "text": "Bottom",
+          "value": "bottom",
+        },
+      ]
+    }
+    paramName="position"
+    setValue={[Function]}
+    value="bottom"
+  />
+  <SwitchOption
+    label="Show axis lines and labels"
+    paramName="show"
+    setValue={[Function]}
+    value={true}
+  />
+  <LabelOptions
+    axesName="categoryAxes"
+    axis={
+      Object {
+        "id": "CategoryAxis-1",
+        "labels": Object {
+          "color": "black",
+          "filter": true,
+          "show": true,
+          "truncate": 0,
+        },
+        "position": "bottom",
+        "scale": Object {
+          "type": "linear",
+        },
+        "show": true,
+        "style": Object {},
+        "title": Object {
+          "text": "",
+        },
+        "type": "category",
+      }
+    }
+    index={0}
+    onPositionChanged={[MockFunction]}
+    setCategoryAxis={[MockFunction]}
+    vis={
+      Object {
+        "type": Object {
+          "editorConfig": Object {
+            "collections": Object {
+              "positions": Array [
+                Object {
+                  "text": "Top",
+                  "value": "top",
+                },
+                Object {
+                  "text": "Left",
+                  "value": "left",
+                },
+                Object {
+                  "text": "Right",
+                  "value": "right",
+                },
+                Object {
+                  "text": "Bottom",
+                  "value": "bottom",
+                },
+              ],
+            },
+          },
+        },
+      }
+    }
+  />
+</EuiPanel>
+`;
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/__snapshots__/chart_options.test.tsx.snap b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/__snapshots__/chart_options.test.tsx.snap
new file mode 100644
index 00000000000000..56f35ae0211732
--- /dev/null
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/__snapshots__/chart_options.test.tsx.snap
@@ -0,0 +1,78 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ChartOptions component should init with the default set of props 1`] = `
+<Fragment>
+  <SelectOption
+    id="seriesValueAxis0"
+    label="Value axis"
+    options={
+      Array [
+        Object {
+          "text": "ValueAxis-1",
+          "value": "ValueAxis-1",
+        },
+        Object {
+          "text": "New axis…",
+          "value": "new",
+        },
+      ]
+    }
+    paramName="valueAxis"
+    setValue={[Function]}
+    value="ValueAxis-1"
+  />
+  <EuiSpacer
+    size="m"
+  />
+  <EuiFlexGroup
+    gutterSize="s"
+  >
+    <EuiFlexItem>
+      <SelectOption
+        id="seriesType0"
+        label="Chart type"
+        options={
+          Array [
+            Object {
+              "text": "Line",
+              "value": "line",
+            },
+            Object {
+              "text": "Area",
+              "value": "area",
+            },
+            Object {
+              "text": "Bar",
+              "value": "histogram",
+            },
+          ]
+        }
+        paramName="type"
+        setValue={[Function]}
+        value="histogram"
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <SelectOption
+        id="seriesMode0"
+        label="Mode"
+        options={
+          Array [
+            Object {
+              "text": "Normal",
+              "value": "normal",
+            },
+            Object {
+              "text": "Stacked",
+              "value": "stacked",
+            },
+          ]
+        }
+        paramName="mode"
+        setValue={[Function]}
+        value="stacked"
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</Fragment>
+`;
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/__snapshots__/custom_extents_options.test.tsx.snap b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/__snapshots__/custom_extents_options.test.tsx.snap
new file mode 100644
index 00000000000000..c7d3f4036fa049
--- /dev/null
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/__snapshots__/custom_extents_options.test.tsx.snap
@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CustomExtentsOptions component should init with the default set of props 1`] = `
+<Fragment>
+  <SwitchOption
+    label="Scale to data bounds"
+    paramName="defaultYExtents"
+    setValue={[Function]}
+    value={true}
+  />
+  <NumberInputOption
+    error={false}
+    isInvalid={false}
+    label="Bounds margin"
+    min={0}
+    paramName="boundsMargin"
+    setValue={[Function]}
+    step={0.1}
+    value={1}
+  />
+  <SwitchOption
+    dataTestSubj="yAxisSetYExtents"
+    label="Set axis extents"
+    paramName="setYExtents"
+    setValue={[Function]}
+    value={true}
+  />
+  <YExtents
+    scale={
+      Object {
+        "boundsMargin": 1,
+        "defaultYExtents": true,
+        "max": 2,
+        "min": 1,
+        "setYExtents": true,
+        "type": "linear",
+      }
+    }
+    setMultipleValidity={[MockFunction]}
+    setScale={[MockFunction]}
+  />
+</Fragment>
+`;
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/__snapshots__/index.test.tsx.snap b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/__snapshots__/index.test.tsx.snap
new file mode 100644
index 00000000000000..256df603a7f33a
--- /dev/null
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,354 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MetricsAxisOptions component should init with the default set of props 1`] = `
+<Fragment>
+  <SeriesPanel
+    aggs={
+      Object {
+        "aggs": Array [
+          Object {
+            "id": "1",
+            "makeLabel": [Function],
+            "type": Object {
+              "name": "count",
+            },
+          },
+        ],
+        "bySchemaName": [Function],
+      }
+    }
+    aggsLabels=""
+    changeValueAxis={[Function]}
+    setParamByIndex={[Function]}
+    setValue={[MockFunction]}
+    setVisType={[MockFunction]}
+    stateParams={
+      Object {
+        "categoryAxes": Array [
+          Object {
+            "id": "CategoryAxis-1",
+            "labels": Object {
+              "color": "black",
+              "filter": true,
+              "show": true,
+              "truncate": 0,
+            },
+            "position": "bottom",
+            "scale": Object {
+              "type": "linear",
+            },
+            "show": true,
+            "style": Object {},
+            "title": Object {
+              "text": "",
+            },
+            "type": "category",
+          },
+        ],
+        "grid": Object {
+          "valueAxis": "ValueAxis-1",
+        },
+        "seriesParams": Array [
+          Object {
+            "data": Object {
+              "id": "1",
+              "label": "Count",
+            },
+            "drawLinesBetweenPoints": true,
+            "interpolate": "linear",
+            "lineWidth": 2,
+            "mode": "stacked",
+            "show": true,
+            "showCircles": true,
+            "type": "area",
+            "valueAxis": "ValueAxis-1",
+          },
+        ],
+        "valueAxes": Array [
+          Object {
+            "id": "ValueAxis-1",
+            "labels": Object {
+              "color": "black",
+              "filter": true,
+              "show": true,
+              "truncate": 0,
+            },
+            "name": "LeftAxis-1",
+            "position": "left",
+            "scale": Object {
+              "boundsMargin": 1,
+              "defaultYExtents": true,
+              "max": 2,
+              "min": 1,
+              "setYExtents": true,
+              "type": "linear",
+            },
+            "show": true,
+            "style": Object {},
+            "title": Object {
+              "text": "",
+            },
+            "type": "value",
+          },
+        ],
+      }
+    }
+    vis={
+      Object {
+        "type": Object {
+          "schemas": Object {
+            "metrics": Array [
+              Object {
+                "name": "metric",
+              },
+            ],
+          },
+          "type": "area",
+        },
+      }
+    }
+  />
+  <EuiSpacer
+    size="s"
+  />
+  <ValueAxesPanel
+    addValueAxis={[Function]}
+    aggs={
+      Object {
+        "aggs": Array [
+          Object {
+            "id": "1",
+            "makeLabel": [Function],
+            "type": Object {
+              "name": "count",
+            },
+          },
+        ],
+        "bySchemaName": [Function],
+      }
+    }
+    aggsLabels=""
+    isCategoryAxisHorizontal={true}
+    onValueAxisPositionChanged={[Function]}
+    removeValueAxis={[Function]}
+    setParamByIndex={[Function]}
+    setValue={[MockFunction]}
+    setVisType={[MockFunction]}
+    stateParams={
+      Object {
+        "categoryAxes": Array [
+          Object {
+            "id": "CategoryAxis-1",
+            "labels": Object {
+              "color": "black",
+              "filter": true,
+              "show": true,
+              "truncate": 0,
+            },
+            "position": "bottom",
+            "scale": Object {
+              "type": "linear",
+            },
+            "show": true,
+            "style": Object {},
+            "title": Object {
+              "text": "",
+            },
+            "type": "category",
+          },
+        ],
+        "grid": Object {
+          "valueAxis": "ValueAxis-1",
+        },
+        "seriesParams": Array [
+          Object {
+            "data": Object {
+              "id": "1",
+              "label": "Count",
+            },
+            "drawLinesBetweenPoints": true,
+            "interpolate": "linear",
+            "lineWidth": 2,
+            "mode": "stacked",
+            "show": true,
+            "showCircles": true,
+            "type": "area",
+            "valueAxis": "ValueAxis-1",
+          },
+        ],
+        "valueAxes": Array [
+          Object {
+            "id": "ValueAxis-1",
+            "labels": Object {
+              "color": "black",
+              "filter": true,
+              "show": true,
+              "truncate": 0,
+            },
+            "name": "LeftAxis-1",
+            "position": "left",
+            "scale": Object {
+              "boundsMargin": 1,
+              "defaultYExtents": true,
+              "max": 2,
+              "min": 1,
+              "setYExtents": true,
+              "type": "linear",
+            },
+            "show": true,
+            "style": Object {},
+            "title": Object {
+              "text": "",
+            },
+            "type": "value",
+          },
+        ],
+      }
+    }
+    vis={
+      Object {
+        "type": Object {
+          "schemas": Object {
+            "metrics": Array [
+              Object {
+                "name": "metric",
+              },
+            ],
+          },
+          "type": "area",
+        },
+      }
+    }
+  />
+  <EuiSpacer
+    size="s"
+  />
+  <CategoryAxisPanel
+    aggs={
+      Object {
+        "aggs": Array [
+          Object {
+            "id": "1",
+            "makeLabel": [Function],
+            "type": Object {
+              "name": "count",
+            },
+          },
+        ],
+        "bySchemaName": [Function],
+      }
+    }
+    aggsLabels=""
+    axis={
+      Object {
+        "id": "CategoryAxis-1",
+        "labels": Object {
+          "color": "black",
+          "filter": true,
+          "show": true,
+          "truncate": 0,
+        },
+        "position": "bottom",
+        "scale": Object {
+          "type": "linear",
+        },
+        "show": true,
+        "style": Object {},
+        "title": Object {
+          "text": "",
+        },
+        "type": "category",
+      }
+    }
+    onPositionChanged={[Function]}
+    setCategoryAxis={[Function]}
+    setValue={[MockFunction]}
+    setVisType={[MockFunction]}
+    stateParams={
+      Object {
+        "categoryAxes": Array [
+          Object {
+            "id": "CategoryAxis-1",
+            "labels": Object {
+              "color": "black",
+              "filter": true,
+              "show": true,
+              "truncate": 0,
+            },
+            "position": "bottom",
+            "scale": Object {
+              "type": "linear",
+            },
+            "show": true,
+            "style": Object {},
+            "title": Object {
+              "text": "",
+            },
+            "type": "category",
+          },
+        ],
+        "grid": Object {
+          "valueAxis": "ValueAxis-1",
+        },
+        "seriesParams": Array [
+          Object {
+            "data": Object {
+              "id": "1",
+              "label": "Count",
+            },
+            "drawLinesBetweenPoints": true,
+            "interpolate": "linear",
+            "lineWidth": 2,
+            "mode": "stacked",
+            "show": true,
+            "showCircles": true,
+            "type": "area",
+            "valueAxis": "ValueAxis-1",
+          },
+        ],
+        "valueAxes": Array [
+          Object {
+            "id": "ValueAxis-1",
+            "labels": Object {
+              "color": "black",
+              "filter": true,
+              "show": true,
+              "truncate": 0,
+            },
+            "name": "LeftAxis-1",
+            "position": "left",
+            "scale": Object {
+              "boundsMargin": 1,
+              "defaultYExtents": true,
+              "max": 2,
+              "min": 1,
+              "setYExtents": true,
+              "type": "linear",
+            },
+            "show": true,
+            "style": Object {},
+            "title": Object {
+              "text": "",
+            },
+            "type": "value",
+          },
+        ],
+      }
+    }
+    vis={
+      Object {
+        "type": Object {
+          "schemas": Object {
+            "metrics": Array [
+              Object {
+                "name": "metric",
+              },
+            ],
+          },
+          "type": "area",
+        },
+      }
+    }
+  />
+</Fragment>
+`;
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/__snapshots__/label_options.test.tsx.snap b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/__snapshots__/label_options.test.tsx.snap
new file mode 100644
index 00000000000000..0dc2f6519a1084
--- /dev/null
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/__snapshots__/label_options.test.tsx.snap
@@ -0,0 +1,75 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LabelOptions component should init with the default set of props 1`] = `
+<Fragment>
+  <EuiSpacer
+    size="m"
+  />
+  <EuiTitle
+    size="xxs"
+  >
+    <h3>
+      <FormattedMessage
+        defaultMessage="Labels"
+        id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.labelsTitle"
+        values={Object {}}
+      />
+    </h3>
+  </EuiTitle>
+  <EuiSpacer
+    size="s"
+  />
+  <SwitchOption
+    label="Show labels"
+    paramName="show"
+    setValue={[Function]}
+    value={true}
+  />
+  <SwitchOption
+    dataTestSubj="xAxisFilterLabelsCheckbox-ValueAxis-1"
+    disabled={false}
+    label="Filter labels"
+    paramName="filter"
+    setValue={[Function]}
+    value={true}
+  />
+  <EuiSpacer
+    size="m"
+  />
+  <EuiFlexGroup
+    gutterSize="s"
+  >
+    <EuiFlexItem>
+      <SelectOption
+        disabled={false}
+        label="Align"
+        options={
+          Array [
+            Object {
+              "text": "Horizontal",
+              "value": 0,
+            },
+            Object {
+              "text": "Vertical",
+              "value": 90,
+            },
+            Object {
+              "text": "Angled",
+              "value": 75,
+            },
+          ]
+        }
+        paramName="rotate"
+        setValue={[Function]}
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <TruncateLabelsOption
+        disabled={false}
+        setValue={[Function]}
+        value={0}
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</Fragment>
+`;
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/__snapshots__/line_options.test.tsx.snap b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/__snapshots__/line_options.test.tsx.snap
new file mode 100644
index 00000000000000..7b45423f5f861e
--- /dev/null
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/__snapshots__/line_options.test.tsx.snap
@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LineOptions component should init with the default set of props 1`] = `
+<Fragment>
+  <EuiSpacer
+    size="m"
+  />
+  <SwitchOption
+    label="Show line"
+    paramName="drawLinesBetweenPoints"
+    setValue={[MockFunction]}
+    value={true}
+  />
+  <EuiSpacer
+    size="m"
+  />
+  <EuiFlexGroup
+    gutterSize="s"
+  >
+    <EuiFlexItem>
+      <SelectOption
+        disabled={false}
+        label="Line mode"
+        options={
+          Array [
+            Object {
+              "text": "Straight",
+              "value": "linear",
+            },
+            Object {
+              "text": "Smoothed",
+              "value": "cardinal",
+            },
+            Object {
+              "text": "Stepped",
+              "value": "step-after",
+            },
+          ]
+        }
+        paramName="interpolate"
+        setValue={[MockFunction]}
+        value="linear"
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <NumberInputOption
+        disabled={false}
+        label="Line width"
+        min={0}
+        paramName="lineWidth"
+        setValue={[Function]}
+        step={0.5}
+        value={2}
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiSpacer
+    size="m"
+  />
+  <SwitchOption
+    label="Show dots"
+    paramName="showCircles"
+    setValue={[MockFunction]}
+    value={true}
+  />
+</Fragment>
+`;
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/__snapshots__/value_axes_panel.test.tsx.snap b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/__snapshots__/value_axes_panel.test.tsx.snap
new file mode 100644
index 00000000000000..8d20765fe35918
--- /dev/null
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/__snapshots__/value_axes_panel.test.tsx.snap
@@ -0,0 +1,502 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ValueAxesPanel component should init with the default set of props 1`] = `
+<EuiPanel
+  paddingSize="s"
+>
+  <EuiFlexGroup
+    alignItems="baseline"
+    gutterSize="none"
+    justifyContent="spaceBetween"
+  >
+    <EuiFlexItem
+      grow={false}
+    >
+      <EuiTitle
+        size="xs"
+      >
+        <h3>
+          <FormattedMessage
+            defaultMessage="Y-axes"
+            id="kbnVislibVisTypes.controls.pointSeries.valueAxes.yAxisTitle"
+            values={Object {}}
+          />
+        </h3>
+      </EuiTitle>
+    </EuiFlexItem>
+    <EuiFlexItem
+      grow={false}
+    >
+      <EuiToolTip
+        content="Add Y-axis"
+        delay="regular"
+        position="bottom"
+      >
+        <EuiButtonIcon
+          aria-label="Add Y-axis"
+          data-test-subj="visualizeAddYAxisButton"
+          iconType="plusInCircleFilled"
+          onClick={[MockFunction]}
+        />
+      </EuiToolTip>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiSpacer
+    size="s"
+  />
+  <EuiAccordion
+    aria-label="Toggle ValueAxis-1 options"
+    buttonClassName="eui-textTruncate"
+    buttonContent={
+      <React.Fragment>
+        ValueAxis-1
+         
+        <EuiToolTip
+          content="Count"
+          delay="regular"
+          position="top"
+        >
+          <React.Fragment>
+            Count
+          </React.Fragment>
+        </EuiToolTip>
+      </React.Fragment>
+    }
+    buttonContentClassName="visEditorSidebar__aggGroupAccordionButtonContent eui-textTruncate"
+    className="visEditorSidebar__section visEditorSidebar__collapsible"
+    data-test-subj="toggleYAxisOptions-ValueAxis-1"
+    extraAction={
+      <EuiToolTip
+        content="Remove Y-axis"
+        delay="regular"
+        position="bottom"
+      >
+        <EuiButtonIcon
+          aria-label="Remove Y-axis"
+          color="danger"
+          data-test-subj="removeValueAxisBtn"
+          iconType="cross"
+          onClick={[Function]}
+        />
+      </EuiToolTip>
+    }
+    id="yAxisAccordionValueAxis-1"
+    initialIsOpen={false}
+    key="ValueAxis-1"
+    paddingSize="none"
+  >
+    <EuiSpacer
+      size="m"
+    />
+    <ValueAxisOptions
+      addValueAxis={[MockFunction]}
+      axis={
+        Object {
+          "id": "ValueAxis-1",
+          "labels": Object {
+            "color": "black",
+            "filter": true,
+            "show": true,
+            "truncate": 0,
+          },
+          "name": "ValueAxis-1",
+          "position": "left",
+          "scale": Object {
+            "boundsMargin": 1,
+            "defaultYExtents": true,
+            "max": 2,
+            "min": 1,
+            "setYExtents": true,
+            "type": "linear",
+          },
+          "show": true,
+          "style": Object {},
+          "title": Object {
+            "text": "",
+          },
+          "type": "value",
+        }
+      }
+      index={0}
+      isCategoryAxisHorizontal={false}
+      onValueAxisPositionChanged={[MockFunction]}
+      removeValueAxis={[MockFunction]}
+      setMultipleValidity={[MockFunction]}
+      setParamByIndex={[MockFunction]}
+      stateParams={
+        Object {
+          "seriesParams": Array [
+            Object {
+              "data": Object {
+                "id": "1",
+                "label": "Count",
+              },
+              "drawLinesBetweenPoints": true,
+              "interpolate": "linear",
+              "lineWidth": 2,
+              "mode": "stacked",
+              "show": true,
+              "showCircles": true,
+              "type": "histogram",
+              "valueAxis": "ValueAxis-1",
+            },
+            Object {
+              "data": Object {
+                "id": "1",
+                "label": "Average",
+              },
+              "drawLinesBetweenPoints": true,
+              "interpolate": "linear",
+              "lineWidth": 2,
+              "mode": "stacked",
+              "show": true,
+              "showCircles": true,
+              "type": "histogram",
+              "valueAxis": "ValueAxis-2",
+            },
+          ],
+          "valueAxes": Array [
+            Object {
+              "id": "ValueAxis-1",
+              "labels": Object {
+                "color": "black",
+                "filter": true,
+                "show": true,
+                "truncate": 0,
+              },
+              "name": "ValueAxis-1",
+              "position": "left",
+              "scale": Object {
+                "boundsMargin": 1,
+                "defaultYExtents": true,
+                "max": 2,
+                "min": 1,
+                "setYExtents": true,
+                "type": "linear",
+              },
+              "show": true,
+              "style": Object {},
+              "title": Object {
+                "text": "",
+              },
+              "type": "value",
+            },
+            Object {
+              "id": "ValueAxis-2",
+              "labels": Object {
+                "color": "black",
+                "filter": true,
+                "show": true,
+                "truncate": 0,
+              },
+              "name": "ValueAxis-1",
+              "position": "right",
+              "scale": Object {
+                "boundsMargin": 1,
+                "defaultYExtents": true,
+                "max": 2,
+                "min": 1,
+                "setYExtents": true,
+                "type": "linear",
+              },
+              "show": true,
+              "style": Object {},
+              "title": Object {
+                "text": "",
+              },
+              "type": "value",
+            },
+          ],
+        }
+      }
+      vis={
+        Object {
+          "type": Object {
+            "editorConfig": Object {
+              "collections": Object {
+                "axisModes": Array [
+                  Object {
+                    "text": "Normal",
+                    "value": "normal",
+                  },
+                  Object {
+                    "text": "Percentage",
+                    "value": "percentage",
+                  },
+                  Object {
+                    "text": "Wiggle",
+                    "value": "wiggle",
+                  },
+                  Object {
+                    "text": "Silhouette",
+                    "value": "silhouette",
+                  },
+                ],
+                "positions": Array [
+                  Object {
+                    "text": "Top",
+                    "value": "top",
+                  },
+                  Object {
+                    "text": "Left",
+                    "value": "left",
+                  },
+                  Object {
+                    "text": "Right",
+                    "value": "right",
+                  },
+                  Object {
+                    "text": "Bottom",
+                    "value": "bottom",
+                  },
+                ],
+                "scaleTypes": Array [
+                  Object {
+                    "text": "Linear",
+                    "value": "linear",
+                  },
+                  Object {
+                    "text": "Log",
+                    "value": "log",
+                  },
+                  Object {
+                    "text": "Square root",
+                    "value": "square root",
+                  },
+                ],
+              },
+            },
+          },
+        }
+      }
+    />
+  </EuiAccordion>
+  <EuiAccordion
+    aria-label="Toggle ValueAxis-1 options"
+    buttonClassName="eui-textTruncate"
+    buttonContent={
+      <React.Fragment>
+        ValueAxis-1
+         
+        <EuiToolTip
+          content="Average"
+          delay="regular"
+          position="top"
+        >
+          <React.Fragment>
+            Average
+          </React.Fragment>
+        </EuiToolTip>
+      </React.Fragment>
+    }
+    buttonContentClassName="visEditorSidebar__aggGroupAccordionButtonContent eui-textTruncate"
+    className="visEditorSidebar__section visEditorSidebar__collapsible"
+    data-test-subj="toggleYAxisOptions-ValueAxis-2"
+    extraAction={
+      <EuiToolTip
+        content="Remove Y-axis"
+        delay="regular"
+        position="bottom"
+      >
+        <EuiButtonIcon
+          aria-label="Remove Y-axis"
+          color="danger"
+          data-test-subj="removeValueAxisBtn"
+          iconType="cross"
+          onClick={[Function]}
+        />
+      </EuiToolTip>
+    }
+    id="yAxisAccordionValueAxis-2"
+    initialIsOpen={false}
+    key="ValueAxis-2"
+    paddingSize="none"
+  >
+    <EuiSpacer
+      size="m"
+    />
+    <ValueAxisOptions
+      addValueAxis={[MockFunction]}
+      axis={
+        Object {
+          "id": "ValueAxis-2",
+          "labels": Object {
+            "color": "black",
+            "filter": true,
+            "show": true,
+            "truncate": 0,
+          },
+          "name": "ValueAxis-1",
+          "position": "right",
+          "scale": Object {
+            "boundsMargin": 1,
+            "defaultYExtents": true,
+            "max": 2,
+            "min": 1,
+            "setYExtents": true,
+            "type": "linear",
+          },
+          "show": true,
+          "style": Object {},
+          "title": Object {
+            "text": "",
+          },
+          "type": "value",
+        }
+      }
+      index={1}
+      isCategoryAxisHorizontal={false}
+      onValueAxisPositionChanged={[MockFunction]}
+      removeValueAxis={[MockFunction]}
+      setMultipleValidity={[MockFunction]}
+      setParamByIndex={[MockFunction]}
+      stateParams={
+        Object {
+          "seriesParams": Array [
+            Object {
+              "data": Object {
+                "id": "1",
+                "label": "Count",
+              },
+              "drawLinesBetweenPoints": true,
+              "interpolate": "linear",
+              "lineWidth": 2,
+              "mode": "stacked",
+              "show": true,
+              "showCircles": true,
+              "type": "histogram",
+              "valueAxis": "ValueAxis-1",
+            },
+            Object {
+              "data": Object {
+                "id": "1",
+                "label": "Average",
+              },
+              "drawLinesBetweenPoints": true,
+              "interpolate": "linear",
+              "lineWidth": 2,
+              "mode": "stacked",
+              "show": true,
+              "showCircles": true,
+              "type": "histogram",
+              "valueAxis": "ValueAxis-2",
+            },
+          ],
+          "valueAxes": Array [
+            Object {
+              "id": "ValueAxis-1",
+              "labels": Object {
+                "color": "black",
+                "filter": true,
+                "show": true,
+                "truncate": 0,
+              },
+              "name": "ValueAxis-1",
+              "position": "left",
+              "scale": Object {
+                "boundsMargin": 1,
+                "defaultYExtents": true,
+                "max": 2,
+                "min": 1,
+                "setYExtents": true,
+                "type": "linear",
+              },
+              "show": true,
+              "style": Object {},
+              "title": Object {
+                "text": "",
+              },
+              "type": "value",
+            },
+            Object {
+              "id": "ValueAxis-2",
+              "labels": Object {
+                "color": "black",
+                "filter": true,
+                "show": true,
+                "truncate": 0,
+              },
+              "name": "ValueAxis-1",
+              "position": "right",
+              "scale": Object {
+                "boundsMargin": 1,
+                "defaultYExtents": true,
+                "max": 2,
+                "min": 1,
+                "setYExtents": true,
+                "type": "linear",
+              },
+              "show": true,
+              "style": Object {},
+              "title": Object {
+                "text": "",
+              },
+              "type": "value",
+            },
+          ],
+        }
+      }
+      vis={
+        Object {
+          "type": Object {
+            "editorConfig": Object {
+              "collections": Object {
+                "axisModes": Array [
+                  Object {
+                    "text": "Normal",
+                    "value": "normal",
+                  },
+                  Object {
+                    "text": "Percentage",
+                    "value": "percentage",
+                  },
+                  Object {
+                    "text": "Wiggle",
+                    "value": "wiggle",
+                  },
+                  Object {
+                    "text": "Silhouette",
+                    "value": "silhouette",
+                  },
+                ],
+                "positions": Array [
+                  Object {
+                    "text": "Top",
+                    "value": "top",
+                  },
+                  Object {
+                    "text": "Left",
+                    "value": "left",
+                  },
+                  Object {
+                    "text": "Right",
+                    "value": "right",
+                  },
+                  Object {
+                    "text": "Bottom",
+                    "value": "bottom",
+                  },
+                ],
+                "scaleTypes": Array [
+                  Object {
+                    "text": "Linear",
+                    "value": "linear",
+                  },
+                  Object {
+                    "text": "Log",
+                    "value": "log",
+                  },
+                  Object {
+                    "text": "Square root",
+                    "value": "square root",
+                  },
+                ],
+              },
+            },
+          },
+        }
+      }
+    />
+  </EuiAccordion>
+</EuiPanel>
+`;
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/__snapshots__/value_axis_options.test.tsx.snap b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/__snapshots__/value_axis_options.test.tsx.snap
new file mode 100644
index 00000000000000..f2ee088450fbdd
--- /dev/null
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/__snapshots__/value_axis_options.test.tsx.snap
@@ -0,0 +1,415 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ValueAxisOptions component should init with the default set of props 1`] = `
+<Fragment>
+  <SelectOption
+    label="Position"
+    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",
+        },
+      ]
+    }
+    paramName="position"
+    setValue={[Function]}
+    value="left"
+  />
+  <SelectOption
+    id="valueAxisMode0"
+    label="Mode"
+    options={
+      Array [
+        Object {
+          "text": "Normal",
+          "value": "normal",
+        },
+        Object {
+          "text": "Percentage",
+          "value": "percentage",
+        },
+        Object {
+          "text": "Wiggle",
+          "value": "wiggle",
+        },
+        Object {
+          "text": "Silhouette",
+          "value": "silhouette",
+        },
+      ]
+    }
+    paramName="mode"
+    setValue={[Function]}
+  />
+  <SelectOption
+    id="scaleSelectYAxis-ValueAxis-1"
+    label="Scale type"
+    options={
+      Array [
+        Object {
+          "text": "Linear",
+          "value": "linear",
+        },
+        Object {
+          "text": "Log",
+          "value": "log",
+        },
+        Object {
+          "text": "Square root",
+          "value": "square root",
+        },
+      ]
+    }
+    paramName="type"
+    setValue={[Function]}
+    value="linear"
+  />
+  <EuiHorizontalRule
+    margin="m"
+  />
+  <SwitchOption
+    label="Show axis lines and labels"
+    paramName="show"
+    setValue={[Function]}
+    value={true}
+  />
+  <EuiSpacer
+    size="m"
+  />
+  <TextInputOption
+    data-test-subj="valueAxisTitle0"
+    label="Title"
+    paramName="text"
+    setValue={[Function]}
+    value=""
+  />
+  <LabelOptions
+    axesName="valueAxes"
+    axis={
+      Object {
+        "id": "ValueAxis-1",
+        "labels": Object {
+          "color": "black",
+          "filter": true,
+          "show": true,
+          "truncate": 0,
+        },
+        "name": "ValueAxis-1",
+        "position": "left",
+        "scale": Object {
+          "boundsMargin": 1,
+          "defaultYExtents": true,
+          "max": 2,
+          "min": 1,
+          "setYExtents": true,
+          "type": "linear",
+        },
+        "show": true,
+        "style": Object {},
+        "title": Object {
+          "text": "",
+        },
+        "type": "value",
+      }
+    }
+    index={0}
+    isCategoryAxisHorizontal={false}
+    onValueAxisPositionChanged={[MockFunction]}
+    setMultipleValidity={[MockFunction]}
+    setParamByIndex={[MockFunction]}
+    stateParams={
+      Object {
+        "categoryAxes": Array [
+          Object {
+            "id": "CategoryAxis-1",
+            "labels": Object {
+              "color": "black",
+              "filter": true,
+              "show": true,
+              "truncate": 0,
+            },
+            "position": "bottom",
+            "scale": Object {
+              "type": "linear",
+            },
+            "show": true,
+            "style": Object {},
+            "title": Object {
+              "text": "",
+            },
+            "type": "category",
+          },
+        ],
+        "valueAxes": Array [
+          Object {
+            "id": "ValueAxis-1",
+            "labels": Object {
+              "color": "black",
+              "filter": true,
+              "show": true,
+              "truncate": 0,
+            },
+            "name": "ValueAxis-1",
+            "position": "left",
+            "scale": Object {
+              "boundsMargin": 1,
+              "defaultYExtents": true,
+              "max": 2,
+              "min": 1,
+              "setYExtents": true,
+              "type": "linear",
+            },
+            "show": true,
+            "style": Object {},
+            "title": Object {
+              "text": "",
+            },
+            "type": "value",
+          },
+        ],
+      }
+    }
+    vis={
+      Object {
+        "type": Object {
+          "editorConfig": Object {
+            "collections": Object {
+              "axisModes": Array [
+                Object {
+                  "text": "Normal",
+                  "value": "normal",
+                },
+                Object {
+                  "text": "Percentage",
+                  "value": "percentage",
+                },
+                Object {
+                  "text": "Wiggle",
+                  "value": "wiggle",
+                },
+                Object {
+                  "text": "Silhouette",
+                  "value": "silhouette",
+                },
+              ],
+              "positions": Array [
+                Object {
+                  "text": "Top",
+                  "value": "top",
+                },
+                Object {
+                  "text": "Left",
+                  "value": "left",
+                },
+                Object {
+                  "text": "Right",
+                  "value": "right",
+                },
+                Object {
+                  "text": "Bottom",
+                  "value": "bottom",
+                },
+              ],
+              "scaleTypes": Array [
+                Object {
+                  "text": "Linear",
+                  "value": "linear",
+                },
+                Object {
+                  "text": "Log",
+                  "value": "log",
+                },
+                Object {
+                  "text": "Square root",
+                  "value": "square root",
+                },
+              ],
+            },
+          },
+        },
+      }
+    }
+  />
+  <EuiHorizontalRule
+    margin="s"
+  />
+  <EuiAccordion
+    aria-label="Toggle custom extents"
+    buttonContent="Custom extents"
+    buttonContentClassName="euiText euiText--small"
+    className="visEditorSidebar__section visEditorSidebar__collapsible"
+    id="yAxisOptionsAccordionValueAxis-1"
+    initialIsOpen={false}
+    paddingSize="none"
+  >
+    <EuiSpacer
+      size="m"
+    />
+    <CustomExtentsOptions
+      axis={
+        Object {
+          "id": "ValueAxis-1",
+          "labels": Object {
+            "color": "black",
+            "filter": true,
+            "show": true,
+            "truncate": 0,
+          },
+          "name": "ValueAxis-1",
+          "position": "left",
+          "scale": Object {
+            "boundsMargin": 1,
+            "defaultYExtents": true,
+            "max": 2,
+            "min": 1,
+            "setYExtents": true,
+            "type": "linear",
+          },
+          "show": true,
+          "style": Object {},
+          "title": Object {
+            "text": "",
+          },
+          "type": "value",
+        }
+      }
+      index={0}
+      isCategoryAxisHorizontal={false}
+      onValueAxisPositionChanged={[MockFunction]}
+      setMultipleValidity={[MockFunction]}
+      setParamByIndex={[MockFunction]}
+      setValueAxis={[Function]}
+      setValueAxisScale={[Function]}
+      stateParams={
+        Object {
+          "categoryAxes": Array [
+            Object {
+              "id": "CategoryAxis-1",
+              "labels": Object {
+                "color": "black",
+                "filter": true,
+                "show": true,
+                "truncate": 0,
+              },
+              "position": "bottom",
+              "scale": Object {
+                "type": "linear",
+              },
+              "show": true,
+              "style": Object {},
+              "title": Object {
+                "text": "",
+              },
+              "type": "category",
+            },
+          ],
+          "valueAxes": Array [
+            Object {
+              "id": "ValueAxis-1",
+              "labels": Object {
+                "color": "black",
+                "filter": true,
+                "show": true,
+                "truncate": 0,
+              },
+              "name": "ValueAxis-1",
+              "position": "left",
+              "scale": Object {
+                "boundsMargin": 1,
+                "defaultYExtents": true,
+                "max": 2,
+                "min": 1,
+                "setYExtents": true,
+                "type": "linear",
+              },
+              "show": true,
+              "style": Object {},
+              "title": Object {
+                "text": "",
+              },
+              "type": "value",
+            },
+          ],
+        }
+      }
+      vis={
+        Object {
+          "type": Object {
+            "editorConfig": Object {
+              "collections": Object {
+                "axisModes": Array [
+                  Object {
+                    "text": "Normal",
+                    "value": "normal",
+                  },
+                  Object {
+                    "text": "Percentage",
+                    "value": "percentage",
+                  },
+                  Object {
+                    "text": "Wiggle",
+                    "value": "wiggle",
+                  },
+                  Object {
+                    "text": "Silhouette",
+                    "value": "silhouette",
+                  },
+                ],
+                "positions": Array [
+                  Object {
+                    "text": "Top",
+                    "value": "top",
+                  },
+                  Object {
+                    "text": "Left",
+                    "value": "left",
+                  },
+                  Object {
+                    "text": "Right",
+                    "value": "right",
+                  },
+                  Object {
+                    "text": "Bottom",
+                    "value": "bottom",
+                  },
+                ],
+                "scaleTypes": Array [
+                  Object {
+                    "text": "Linear",
+                    "value": "linear",
+                  },
+                  Object {
+                    "text": "Log",
+                    "value": "log",
+                  },
+                  Object {
+                    "text": "Square root",
+                    "value": "square root",
+                  },
+                ],
+              },
+            },
+          },
+        }
+      }
+    />
+  </EuiAccordion>
+</Fragment>
+`;
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/__snapshots__/y_extents.test.tsx.snap b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/__snapshots__/y_extents.test.tsx.snap
new file mode 100644
index 00000000000000..3372e781a028ae
--- /dev/null
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/__snapshots__/y_extents.test.tsx.snap
@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`YExtents component should init with the default set of props 1`] = `
+<EuiFormRow
+  compressed={true}
+  describedByIds={Array []}
+  display="row"
+  error={Array []}
+  fullWidth={true}
+  hasEmptyLabelSpace={false}
+  isInvalid={false}
+  labelType="label"
+>
+  <EuiFlexGroup
+    gutterSize="s"
+  >
+    <EuiFlexItem>
+      <NumberInputOption
+        data-test-subj="yAxisYExtentsMin"
+        isInvalid={false}
+        label="Min"
+        paramName="min"
+        setValue={[Function]}
+        step={0.1}
+        value=""
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <NumberInputOption
+        data-test-subj="yAxisYExtentsMax"
+        label="Max"
+        paramName="max"
+        setValue={[Function]}
+        step={0.1}
+        value=""
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</EuiFormRow>
+`;
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/category_axis_panel.test.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/category_axis_panel.test.tsx
new file mode 100644
index 00000000000000..a32e48baf4588c
--- /dev/null
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/category_axis_panel.test.tsx
@@ -0,0 +1,78 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import { CategoryAxisPanel, CategoryAxisPanelProps } from './category_axis_panel';
+import { Axis } from '../../../types';
+import { Positions, getPositions } from '../../../utils/collections';
+import { LabelOptions } from './label_options';
+import { categoryAxis } from './mocks';
+
+const positions = getPositions();
+
+describe('CategoryAxisPanel component', () => {
+  let setCategoryAxis: jest.Mock;
+  let onPositionChanged: jest.Mock;
+  let defaultProps: CategoryAxisPanelProps;
+  let axis: Axis;
+
+  beforeEach(() => {
+    setCategoryAxis = jest.fn();
+    onPositionChanged = jest.fn();
+    axis = categoryAxis;
+
+    defaultProps = {
+      axis,
+      vis: {
+        type: {
+          editorConfig: {
+            collections: { positions },
+          },
+        },
+      },
+      onPositionChanged,
+      setCategoryAxis,
+    } as any;
+  });
+
+  it('should init with the default set of props', () => {
+    const comp = shallow(<CategoryAxisPanel {...defaultProps} />);
+
+    expect(comp).toMatchSnapshot();
+  });
+
+  it('should respond axis.show', () => {
+    const comp = shallow(<CategoryAxisPanel {...defaultProps} />);
+
+    expect(comp.find(LabelOptions).exists()).toBeTruthy();
+
+    comp.setProps({ axis: { ...axis, show: false } });
+    expect(comp.find(LabelOptions).exists()).toBeFalsy();
+  });
+
+  it('should call onPositionChanged when position is changed', () => {
+    const value = Positions.RIGHT;
+    const comp = shallow(<CategoryAxisPanel {...defaultProps} />);
+    comp.find({ paramName: 'position' }).prop('setValue')('position', value);
+
+    expect(setCategoryAxis).toHaveBeenLastCalledWith({ ...axis, position: value });
+    expect(onPositionChanged).toBeCalledWith(value);
+  });
+});
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/category_axis_panel.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/category_axis_panel.tsx
index a2edc533e6e7e3..11946a5a6bccd6 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/category_axis_panel.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/category_axis_panel.tsx
@@ -28,7 +28,7 @@ import { SelectOption, SwitchOption } from '../../common';
 import { LabelOptions } from './label_options';
 import { Positions } from '../../../utils/collections';
 
-interface CategoryAxisPanelProps extends VisOptionsProps<BasicVislibParams> {
+export interface CategoryAxisPanelProps extends VisOptionsProps<BasicVislibParams> {
   axis: Axis;
   onPositionChanged: (position: Positions) => void;
   setCategoryAxis: (value: Axis) => void;
@@ -59,12 +59,12 @@ function CategoryAxisPanel(props: CategoryAxisPanelProps) {
   return (
     <EuiPanel paddingSize="s">
       <EuiTitle size="xs">
-        <h2>
+        <h3>
           <FormattedMessage
             id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.xAxisTitle"
             defaultMessage="X-axis"
           />
-        </h2>
+        </h3>
       </EuiTitle>
       <EuiSpacer size="s" />
 
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/chart_options.test.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/chart_options.test.tsx
new file mode 100644
index 00000000000000..ba1a46ba7d89e7
--- /dev/null
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/chart_options.test.tsx
@@ -0,0 +1,103 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import { ChartOptions, ChartOptionsParams } from './chart_options';
+import { SeriesParam } from '../../../types';
+import { LineOptions } from './line_options';
+import {
+  ChartTypes,
+  ChartModes,
+  getInterpolationModes,
+  getChartTypes,
+  getChartModes,
+} from '../../../utils/collections';
+import { valueAxis, seriesParam } from './mocks';
+
+const interpolationModes = getInterpolationModes();
+const chartTypes = getChartTypes();
+const chartModes = getChartModes();
+
+describe('ChartOptions component', () => {
+  let setParamByIndex: jest.Mock;
+  let changeValueAxis: jest.Mock;
+  let defaultProps: ChartOptionsParams;
+  let chart: SeriesParam;
+
+  beforeEach(() => {
+    setParamByIndex = jest.fn();
+    changeValueAxis = jest.fn();
+    chart = { ...seriesParam };
+
+    defaultProps = {
+      index: 0,
+      chart,
+      vis: {
+        type: {
+          editorConfig: {
+            collections: { interpolationModes, chartTypes, chartModes },
+          },
+        },
+      },
+      stateParams: {
+        valueAxes: [valueAxis],
+      },
+      setParamByIndex,
+      changeValueAxis,
+    } as any;
+  });
+
+  it('should init with the default set of props', () => {
+    const comp = shallow(<ChartOptions {...defaultProps} />);
+
+    expect(comp).toMatchSnapshot();
+  });
+
+  it('should show LineOptions when type is line', () => {
+    chart.type = ChartTypes.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;
+    const comp = shallow(<ChartOptions {...defaultProps} />);
+
+    expect(comp.find({ paramName: 'interpolate' }).exists()).toBeTruthy();
+  });
+
+  it('should call changeValueAxis when valueAxis is changed', () => {
+    const comp = shallow(<ChartOptions {...defaultProps} />);
+    const paramName = 'valueAxis';
+    const value = 'new';
+    comp.find({ paramName }).prop('setValue')(paramName, value);
+
+    expect(changeValueAxis).toBeCalledWith(0, paramName, value);
+  });
+
+  it('should call setParamByIndex when mode is changed', () => {
+    const comp = shallow(<ChartOptions {...defaultProps} />);
+    const paramName = 'mode';
+    comp.find({ paramName }).prop('setValue')(paramName, ChartModes.NORMAL);
+
+    expect(setParamByIndex).toBeCalledWith('seriesParams', 0, paramName, ChartModes.NORMAL);
+  });
+});
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/chart_options.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/chart_options.tsx
index ba41ad802ade4d..1c9357c67c2f08 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/chart_options.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/chart_options.tsx
@@ -30,7 +30,7 @@ import { SetParamByIndex, ChangeValueAxis } from './';
 
 export type SetChart = <T extends keyof SeriesParam>(paramName: T, value: SeriesParam[T]) => void;
 
-interface ChartOptionsParams extends VisOptionsProps<BasicVislibParams> {
+export interface ChartOptionsParams extends VisOptionsProps<BasicVislibParams> {
   chart: SeriesParam;
   index: number;
   changeValueAxis: ChangeValueAxis;
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/custom_extents_options.test.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/custom_extents_options.test.tsx
new file mode 100644
index 00000000000000..b55d363fa56c8e
--- /dev/null
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/custom_extents_options.test.tsx
@@ -0,0 +1,150 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import { CustomExtentsOptions, CustomExtentsOptionsProps } from './custom_extents_options';
+import { YExtents } from './y_extents';
+import { valueAxis } from './mocks';
+
+const BOUNDS_MARGIN = 'boundsMargin';
+const DEFAULT_Y_EXTENTS = 'defaultYExtents';
+const SCALE = 'scale';
+const SET_Y_EXTENTS = 'setYExtents';
+
+describe('CustomExtentsOptions component', () => {
+  let setValueAxis: jest.Mock;
+  let setValueAxisScale: jest.Mock;
+  let setMultipleValidity: jest.Mock;
+  let defaultProps: CustomExtentsOptionsProps;
+
+  beforeEach(() => {
+    setValueAxis = jest.fn();
+    setValueAxisScale = jest.fn();
+    setMultipleValidity = jest.fn();
+
+    defaultProps = {
+      axis: { ...valueAxis },
+      setValueAxis,
+      setValueAxisScale,
+      setMultipleValidity,
+    };
+  });
+
+  it('should init with the default set of props', () => {
+    const comp = shallow(<CustomExtentsOptions {...defaultProps} />);
+
+    expect(comp).toMatchSnapshot();
+  });
+
+  describe('boundsMargin', () => {
+    it('should set validity as true when value is positive', () => {
+      const comp = shallow(<CustomExtentsOptions {...defaultProps} />);
+      comp.find({ paramName: BOUNDS_MARGIN }).prop('setValue')(BOUNDS_MARGIN, 5);
+
+      expect(setMultipleValidity).toBeCalledWith(BOUNDS_MARGIN, true);
+    });
+
+    it('should set validity as true when value is empty', () => {
+      const comp = shallow(<CustomExtentsOptions {...defaultProps} />);
+      comp.find({ paramName: BOUNDS_MARGIN }).prop('setValue')(BOUNDS_MARGIN, '');
+
+      expect(setMultipleValidity).toBeCalledWith(BOUNDS_MARGIN, true);
+    });
+
+    it('should set validity as false when value is negative', () => {
+      defaultProps.axis.scale.defaultYExtents = true;
+      const comp = shallow(<CustomExtentsOptions {...defaultProps} />);
+      comp.find({ paramName: BOUNDS_MARGIN }).prop('setValue')(BOUNDS_MARGIN, -1);
+
+      expect(setMultipleValidity).toBeCalledWith(BOUNDS_MARGIN, false);
+    });
+  });
+
+  describe('defaultYExtents', () => {
+    it('should show bounds margin input when defaultYExtents is true', () => {
+      const comp = shallow(<CustomExtentsOptions {...defaultProps} />);
+
+      expect(comp.find({ paramName: BOUNDS_MARGIN }).exists()).toBeTruthy();
+    });
+
+    it('should hide bounds margin input when defaultYExtents is false', () => {
+      defaultProps.axis.scale = { ...defaultProps.axis.scale, defaultYExtents: false };
+      const comp = shallow(<CustomExtentsOptions {...defaultProps} />);
+
+      expect(comp.find({ paramName: BOUNDS_MARGIN }).exists()).toBeFalsy();
+    });
+
+    it('should call setValueAxis when value is true', () => {
+      const comp = shallow(<CustomExtentsOptions {...defaultProps} />);
+      comp.find({ paramName: DEFAULT_Y_EXTENTS }).prop('setValue')(DEFAULT_Y_EXTENTS, true);
+
+      expect(setMultipleValidity).not.toBeCalled();
+      expect(setValueAxis).toBeCalledWith(SCALE, defaultProps.axis.scale);
+    });
+
+    it('should reset boundsMargin when value is false', () => {
+      const comp = shallow(<CustomExtentsOptions {...defaultProps} />);
+      comp.find({ paramName: DEFAULT_Y_EXTENTS }).prop('setValue')(DEFAULT_Y_EXTENTS, false);
+
+      expect(setMultipleValidity).toBeCalledWith(BOUNDS_MARGIN, true);
+      const newScale = {
+        ...defaultProps.axis.scale,
+        boundsMargin: undefined,
+        defaultYExtents: false,
+      };
+      expect(setValueAxis).toBeCalledWith(SCALE, newScale);
+    });
+  });
+
+  describe('setYExtents', () => {
+    it('should show YExtents when value is true', () => {
+      const comp = shallow(<CustomExtentsOptions {...defaultProps} />);
+
+      expect(comp.find(YExtents).exists()).toBeTruthy();
+    });
+
+    it('should hide YExtents when value is false', () => {
+      defaultProps.axis.scale = { ...defaultProps.axis.scale, setYExtents: false };
+      const comp = shallow(<CustomExtentsOptions {...defaultProps} />);
+
+      expect(comp.find(YExtents).exists()).toBeFalsy();
+    });
+
+    it('should call setValueAxis when value is true', () => {
+      const comp = shallow(<CustomExtentsOptions {...defaultProps} />);
+      comp.find({ paramName: SET_Y_EXTENTS }).prop('setValue')(SET_Y_EXTENTS, true);
+
+      expect(setValueAxis).toBeCalledWith(SCALE, defaultProps.axis.scale);
+    });
+
+    it('should reset min and max when value is false', () => {
+      const comp = shallow(<CustomExtentsOptions {...defaultProps} />);
+      comp.find({ paramName: SET_Y_EXTENTS }).prop('setValue')(SET_Y_EXTENTS, false);
+
+      const newScale = {
+        ...defaultProps.axis.scale,
+        min: undefined,
+        max: undefined,
+        setYExtents: false,
+      };
+      expect(setValueAxis).toBeCalledWith(SCALE, newScale);
+    });
+  });
+});
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/custom_extents_options.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/custom_extents_options.tsx
index dca948457b61c8..99783a6887716b 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/custom_extents_options.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/custom_extents_options.tsx
@@ -25,7 +25,7 @@ import { NumberInputOption, SwitchOption } from '../../common';
 import { YExtents } from './y_extents';
 import { SetScale } from './value_axis_options';
 
-interface CustomExtentsOptionsProps {
+export interface CustomExtentsOptionsProps {
   axis: ValueAxis;
   setMultipleValidity(paramName: string, isValid: boolean): void;
   setValueAxis<T extends keyof ValueAxis>(paramName: T, value: ValueAxis[T]): void;
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/index.test.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/index.test.tsx
new file mode 100644
index 00000000000000..dc5cf422776034
--- /dev/null
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/index.test.tsx
@@ -0,0 +1,314 @@
+/*
+ * 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 { 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 { AggConfig } from 'ui/vis';
+import { AggType } from 'ui/agg_types';
+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: AggConfig = {
+  id: '1',
+  type: { name: 'count' },
+  makeLabel: () => 'Count',
+} as AggConfig;
+
+const aggAverage: AggConfig = {
+  id: '2',
+  type: { name: 'average' } as AggType,
+  makeLabel: () => 'Average',
+} as AggConfig;
+
+const createAggs = (aggs: any[]) => ({
+  aggs,
+  bySchemaName: () => aggs,
+});
+
+describe('MetricsAxisOptions component', () => {
+  let setValue: jest.Mock;
+  let setVisType: jest.Mock;
+  let defaultProps: ValidationVisOptionsProps<BasicVislibParams>;
+  let axis: ValueAxis;
+  let axisRight: ValueAxis;
+  let chart: SeriesParam;
+
+  beforeEach(() => {
+    setValue = jest.fn();
+    setVisType = 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]),
+      aggsLabels: '',
+      vis: {
+        type: {
+          type: ChartTypes.AREA,
+          schemas: { metrics: [{ name: 'metric' }] },
+        },
+      },
+      stateParams: {
+        valueAxes: [axis],
+        seriesParams: [chart],
+        categoryAxes: [categoryAxis],
+        grid: { valueAxis: defaultValueAxisId },
+      },
+      setValue,
+      setVisType,
+    } 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]),
+        aggsLabels: `${aggCount.makeLabel()}, ${aggAverage.makeLabel()}`,
+      });
+
+      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).toHaveBeenLastCalledWith(SERIES_PARAMS, updatedSeries);
+    });
+
+    it('should update visType when one seriesParam', () => {
+      const comp = mount(<MetricsAxisOptions {...defaultProps} />);
+      expect(defaultProps.vis.type.type).toBe(ChartTypes.AREA);
+
+      comp.setProps({
+        stateParams: {
+          ...defaultProps.stateParams,
+          seriesParams: [{ ...chart, type: ChartTypes.LINE }],
+        },
+      });
+
+      expect(setVisType).toHaveBeenLastCalledWith(ChartTypes.LINE);
+    });
+
+    it('should set histogram visType when multiple seriesParam', () => {
+      const comp = mount(<MetricsAxisOptions {...defaultProps} />);
+      expect(defaultProps.vis.type.type).toBe(ChartTypes.AREA);
+
+      comp.setProps({
+        stateParams: {
+          ...defaultProps.stateParams,
+          seriesParams: [chart, { ...chart, type: ChartTypes.LINE }],
+        },
+      });
+
+      expect(setVisType).toHaveBeenLastCalledWith(ChartTypes.HISTOGRAM);
+    });
+  });
+
+  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]),
+        aggsLabels: `${newAgg.makeLabel()}`,
+      });
+      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]),
+        aggsLabels: agg.makeLabel(),
+      });
+
+      const updatedValues = [{ ...axis, title: { text: agg.makeLabel() } }];
+      expect(setValue).toHaveBeenCalledWith(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]),
+        aggsLabels: `${agg.makeLabel()}, ${aggAverage.makeLabel()}`,
+        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]),
+        aggsLabels: agg.makeLabel(),
+      });
+
+      expect(setValue).not.toHaveBeenCalledWith(VALUE_AXES);
+    });
+
+    it('should overwrite the custom title when the agg type changes', () => {
+      defaultProps.stateParams.valueAxes[0].title.text = 'Custom title';
+      const comp = mount(<MetricsAxisOptions {...defaultProps} />);
+      const agg = {
+        id: aggCount.id,
+        type: { name: 'max' },
+        makeLabel: () => 'Max',
+      };
+      comp.setProps({
+        aggs: createAggs([agg]),
+        aggsLabels: agg.makeLabel(),
+      });
+
+      const updatedValues = [{ ...axis, title: { text: agg.makeLabel() } }];
+      expect(setValue).toHaveBeenCalledWith(VALUE_AXES, updatedValues);
+    });
+
+    it('should overwrite the custom title when the agg field changes', () => {
+      defaultProps.stateParams.valueAxes[0].title.text = 'Custom title';
+      const agg = {
+        id: aggCount.id,
+        type: { name: 'max' },
+        makeLabel: () => 'Max',
+      } as AggConfig;
+      defaultProps.aggs = createAggs([agg]) as any;
+      const comp = mount(<MetricsAxisOptions {...defaultProps} />);
+      agg.params = { field: { name: 'Field' } };
+      agg.makeLabel = () => 'Max, Field';
+      comp.setProps({
+        aggs: createAggs([agg]),
+        aggsLabels: agg.makeLabel(),
+      });
+
+      const updatedValues = [{ ...axis, title: { text: agg.makeLabel() } }];
+      expect(setValue).toHaveBeenCalledWith(VALUE_AXES, updatedValues);
+    });
+  });
+
+  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/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/index.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/index.tsx
index 05797b8dde5b21..c7ada18f9e1f25 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/index.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/index.tsx
@@ -125,13 +125,17 @@ function MetricsAxisOptions(props: ValidationVisOptionsProps<BasicVislibParams>)
         lastLabels[axis.id] = newCustomLabel;
 
         if (
-          aggTypeIsChanged ||
-          aggFieldIsChanged ||
-          axis.title.text === '' ||
-          lastCustomLabels[axis.id] === axis.title.text
+          Object.keys(lastCustomLabels).length !== 0 &&
+          (aggTypeIsChanged ||
+            aggFieldIsChanged ||
+            axis.title.text === '' ||
+            lastCustomLabels[axis.id] === axis.title.text)
         ) {
           // Override axis title with new custom label
-          axes[axisNumber] = { ...axes[axisNumber], title: { ...axis, text: newCustomLabel } };
+          axes[axisNumber] = {
+            ...axis,
+            title: { ...axis.title, text: newCustomLabel },
+          };
           isAxesChanged = true;
         }
       }
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/label_options.test.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/label_options.test.tsx
new file mode 100644
index 00000000000000..abb3a2455f9f9e
--- /dev/null
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/label_options.test.tsx
@@ -0,0 +1,98 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import { LabelOptions, LabelOptionsProps } from './label_options';
+import { TruncateLabelsOption } from '../../common';
+import { valueAxis, categoryAxis } from './mocks';
+
+const FILTER = 'filter';
+const ROTATE = 'rotate';
+const DISABLED = 'disabled';
+const CATEGORY_AXES = 'categoryAxes';
+
+describe('LabelOptions component', () => {
+  let setValue: jest.Mock;
+  let defaultProps: LabelOptionsProps;
+
+  beforeEach(() => {
+    setValue = jest.fn();
+
+    defaultProps = {
+      axis: { ...valueAxis },
+      axesName: CATEGORY_AXES,
+      index: 0,
+      stateParams: {
+        categoryAxes: [{ ...categoryAxis }],
+        valueAxes: [{ ...valueAxis }],
+      } as any,
+      setValue,
+    } as any;
+  });
+
+  it('should init with the default set of props', () => {
+    const comp = shallow(<LabelOptions {...defaultProps} />);
+
+    expect(comp).toMatchSnapshot();
+  });
+
+  it('should show other fields when axis.labels.show is true', () => {
+    const comp = shallow(<LabelOptions {...defaultProps} />);
+
+    expect(comp.find({ paramName: FILTER }).prop(DISABLED)).toBeFalsy();
+    expect(comp.find({ paramName: ROTATE }).prop(DISABLED)).toBeFalsy();
+    expect(comp.find(TruncateLabelsOption).prop(DISABLED)).toBeFalsy();
+  });
+
+  it('should disable other fields when axis.labels.show is false', () => {
+    defaultProps.axis.labels.show = false;
+    const comp = shallow(<LabelOptions {...defaultProps} />);
+
+    expect(comp.find({ paramName: FILTER }).prop(DISABLED)).toBeTruthy();
+    expect(comp.find({ paramName: ROTATE }).prop(DISABLED)).toBeTruthy();
+    expect(comp.find(TruncateLabelsOption).prop(DISABLED)).toBeTruthy();
+  });
+
+  it('should set rotate as number', () => {
+    const comp = shallow(<LabelOptions {...defaultProps} />);
+    comp.find({ paramName: ROTATE }).prop('setValue')(ROTATE, '5');
+
+    const newAxes = [{ ...categoryAxis, labels: { ...categoryAxis.labels, rotate: 5 } }];
+    expect(setValue).toBeCalledWith(CATEGORY_AXES, newAxes);
+  });
+
+  it('should set filter value', () => {
+    const comp = shallow(<LabelOptions {...defaultProps} />);
+    expect(defaultProps.stateParams.categoryAxes[0].labels.filter).toBeTruthy();
+    comp.find({ paramName: FILTER }).prop('setValue')(FILTER, false);
+
+    const newAxes = [{ ...categoryAxis, labels: { ...categoryAxis.labels, filter: false } }];
+    expect(setValue).toBeCalledWith(CATEGORY_AXES, newAxes);
+  });
+
+  it('should set value for valueAxes', () => {
+    defaultProps.axesName = 'valueAxes';
+    const comp = shallow(<LabelOptions {...defaultProps} />);
+    comp.find(TruncateLabelsOption).prop('setValue')('truncate', 10);
+
+    const newAxes = [{ ...valueAxis, labels: { ...valueAxis.labels, truncate: 10 } }];
+    expect(setValue).toBeCalledWith('valueAxes', newAxes);
+  });
+});
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/label_options.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/label_options.tsx
index a0d91a0abe38af..9918cd8cd807cb 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/label_options.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/label_options.tsx
@@ -27,7 +27,7 @@ import { BasicVislibParams, Axis } from '../../../types';
 import { SelectOption, SwitchOption, TruncateLabelsOption } from '../../common';
 import { getRotateOptions } from '../../../utils/collections';
 
-interface LabelOptionsProps extends VisOptionsProps<BasicVislibParams> {
+export interface LabelOptionsProps extends VisOptionsProps<BasicVislibParams> {
   axis: Axis;
   axesName: 'categoryAxes' | 'valueAxes';
   index: number;
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/line_options.test.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/line_options.test.tsx
new file mode 100644
index 00000000000000..0e603814493fa5
--- /dev/null
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/line_options.test.tsx
@@ -0,0 +1,77 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import { LineOptions, LineOptionsParams } from './line_options';
+import { NumberInputOption } from '../../common';
+import { getInterpolationModes } from '../../../utils/collections';
+import { seriesParam } from './mocks';
+
+const LINE_WIDTH = 'lineWidth';
+const DRAW_LINES = 'drawLinesBetweenPoints';
+const interpolationModes = getInterpolationModes();
+
+describe('LineOptions component', () => {
+  let setChart: jest.Mock;
+  let defaultProps: LineOptionsParams;
+
+  beforeEach(() => {
+    setChart = jest.fn();
+
+    defaultProps = {
+      chart: { ...seriesParam },
+      vis: {
+        type: {
+          editorConfig: {
+            collections: { interpolationModes },
+          },
+        },
+      },
+      setChart,
+    } as any;
+  });
+
+  it('should init with the default set of props', () => {
+    const comp = shallow(<LineOptions {...defaultProps} />);
+
+    expect(comp).toMatchSnapshot();
+  });
+
+  it('should set lineWidth as undefined when empty value', () => {
+    const comp = shallow(<LineOptions {...defaultProps} />);
+    comp.find(NumberInputOption).prop('setValue')(LINE_WIDTH, '');
+
+    expect(setChart).toBeCalledWith(LINE_WIDTH, undefined);
+  });
+
+  it('should set lineWidth value', () => {
+    const comp = shallow(<LineOptions {...defaultProps} />);
+    comp.find(NumberInputOption).prop('setValue')(LINE_WIDTH, 5);
+
+    expect(setChart).toBeCalledWith(LINE_WIDTH, 5);
+  });
+
+  it('should set drawLinesBetweenPoints', () => {
+    const comp = shallow(<LineOptions {...defaultProps} />);
+    comp.find({ paramName: DRAW_LINES }).prop('setValue')(DRAW_LINES, false);
+
+    expect(setChart).toBeCalledWith(DRAW_LINES, false);
+  });
+});
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/line_options.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/line_options.tsx
index 8a4c8cc05efab6..9514b69a20b04e 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/line_options.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/line_options.tsx
@@ -26,7 +26,7 @@ import { SeriesParam } from '../../../types';
 import { NumberInputOption, SelectOption, SwitchOption } from '../../common';
 import { SetChart } from './chart_options';
 
-interface LineOptionsParams {
+export interface LineOptionsParams {
   chart: SeriesParam;
   vis: Vis;
   setChart: SetChart;
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/mocks.ts b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/mocks.ts
new file mode 100644
index 00000000000000..422ad3c88fe8a4
--- /dev/null
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/mocks.ts
@@ -0,0 +1,87 @@
+/*
+ * 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 { Axis, ValueAxis, SeriesParam } from '../../../types';
+import {
+  ChartTypes,
+  ChartModes,
+  InterpolationModes,
+  ScaleTypes,
+  Positions,
+  AxisTypes,
+} from '../../../utils/collections';
+
+const defaultValueAxisId = 'ValueAxis-1';
+
+const axis = {
+  show: true,
+  style: {},
+  title: {
+    text: '',
+  },
+  labels: {
+    show: true,
+    filter: true,
+    truncate: 0,
+    color: 'black',
+  },
+};
+
+const categoryAxis: Axis = {
+  ...axis,
+  id: 'CategoryAxis-1',
+  type: AxisTypes.CATEGORY,
+  position: Positions.BOTTOM,
+  scale: {
+    type: ScaleTypes.LINEAR,
+  },
+};
+
+const valueAxis: ValueAxis = {
+  ...axis,
+  id: defaultValueAxisId,
+  name: 'ValueAxis-1',
+  type: AxisTypes.VALUE,
+  position: Positions.LEFT,
+  scale: {
+    type: ScaleTypes.LINEAR,
+    boundsMargin: 1,
+    defaultYExtents: true,
+    min: 1,
+    max: 2,
+    setYExtents: true,
+  },
+};
+
+const seriesParam: SeriesParam = {
+  show: true,
+  type: ChartTypes.HISTOGRAM,
+  mode: ChartModes.STACKED,
+  data: {
+    label: 'Count',
+    id: '1',
+  },
+  drawLinesBetweenPoints: true,
+  lineWidth: 2,
+  showCircles: true,
+  interpolate: InterpolationModes.LINEAR,
+  valueAxis: defaultValueAxisId,
+};
+
+export { defaultValueAxisId, categoryAxis, valueAxis, seriesParam };
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/series_panel.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/series_panel.tsx
index 816b0bfeda598f..5a455f4adde31f 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/series_panel.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/series_panel.tsx
@@ -27,7 +27,7 @@ import { BasicVislibParams } from '../../../types';
 import { ChartOptions } from './chart_options';
 import { SetParamByIndex, ChangeValueAxis } from './';
 
-interface SeriesPanelProps extends VisOptionsProps<BasicVislibParams> {
+export interface SeriesPanelProps extends VisOptionsProps<BasicVislibParams> {
   changeValueAxis: ChangeValueAxis;
   setParamByIndex: SetParamByIndex;
 }
@@ -38,12 +38,12 @@ function SeriesPanel(props: SeriesPanelProps) {
   return (
     <EuiPanel paddingSize="s">
       <EuiTitle size="xs">
-        <h2>
+        <h3>
           <FormattedMessage
             id="kbnVislibVisTypes.controls.pointSeries.series.metricsTitle"
             defaultMessage="Metrics"
           />
-        </h2>
+        </h3>
       </EuiTitle>
       <EuiSpacer size="s" />
 
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/value_axes_panel.test.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/value_axes_panel.test.tsx
new file mode 100644
index 00000000000000..080c64db7ff851
--- /dev/null
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/value_axes_panel.test.tsx
@@ -0,0 +1,155 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import { ValueAxesPanel, ValueAxesPanelProps } from './value_axes_panel';
+import { ValueAxis, SeriesParam } from '../../../types';
+import { Positions, getScaleTypes, getAxisModes, getPositions } from '../../../utils/collections';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import { valueAxis, seriesParam } from './mocks';
+
+const positions = getPositions();
+const axisModes = getAxisModes();
+const scaleTypes = getScaleTypes();
+
+describe('ValueAxesPanel component', () => {
+  let setParamByIndex: jest.Mock;
+  let onValueAxisPositionChanged: jest.Mock;
+  let setMultipleValidity: jest.Mock;
+  let addValueAxis: jest.Mock;
+  let removeValueAxis: jest.Mock;
+  let defaultProps: ValueAxesPanelProps;
+  let axisLeft: ValueAxis;
+  let axisRight: ValueAxis;
+  let seriesParamCount: SeriesParam;
+  let seriesParamAverage: SeriesParam;
+
+  beforeEach(() => {
+    setParamByIndex = jest.fn();
+    onValueAxisPositionChanged = jest.fn();
+    addValueAxis = jest.fn();
+    removeValueAxis = jest.fn();
+    setMultipleValidity = jest.fn();
+    axisLeft = { ...valueAxis };
+    axisRight = {
+      ...valueAxis,
+      id: 'ValueAxis-2',
+      position: Positions.RIGHT,
+    };
+    seriesParamCount = { ...seriesParam };
+    seriesParamAverage = {
+      ...seriesParam,
+      valueAxis: 'ValueAxis-2',
+      data: {
+        label: 'Average',
+        id: '1',
+      },
+    };
+
+    defaultProps = {
+      stateParams: {
+        seriesParams: [seriesParamCount, seriesParamAverage],
+        valueAxes: [axisLeft, axisRight],
+      },
+      vis: {
+        type: {
+          editorConfig: {
+            collections: { scaleTypes, axisModes, positions },
+          },
+        },
+      },
+      isCategoryAxisHorizontal: false,
+      setParamByIndex,
+      onValueAxisPositionChanged,
+      addValueAxis,
+      removeValueAxis,
+      setMultipleValidity,
+    } as any;
+  });
+
+  it('should init with the default set of props', () => {
+    const comp = shallow(<ValueAxesPanel {...defaultProps} />);
+
+    expect(comp).toMatchSnapshot();
+  });
+
+  it('should not allow to remove the last value axis', () => {
+    defaultProps.stateParams.valueAxes = [axisLeft];
+    const comp = mountWithIntl(<ValueAxesPanel {...defaultProps} />);
+    expect(comp.find('[data-test-subj="removeValueAxisBtn"] button').exists()).toBeFalsy();
+  });
+
+  it('should display remove button when multiple axes', () => {
+    const comp = mountWithIntl(<ValueAxesPanel {...defaultProps} />);
+
+    expect(comp.find('[data-test-subj="removeValueAxisBtn"] button').exists()).toBeTruthy();
+  });
+
+  it('should call removeAgg', () => {
+    const comp = mountWithIntl(<ValueAxesPanel {...defaultProps} />);
+    comp
+      .find('[data-test-subj="removeValueAxisBtn"] button')
+      .first()
+      .simulate('click');
+
+    expect(removeValueAxis).toBeCalledWith(axisLeft);
+  });
+
+  it('should call addValueAxis', () => {
+    const comp = mountWithIntl(<ValueAxesPanel {...defaultProps} />);
+    comp.find('[data-test-subj="visualizeAddYAxisButton"] button').simulate('click');
+
+    expect(addValueAxis).toBeCalled();
+  });
+
+  describe('description', () => {
+    it('should show when one serie matches value axis', () => {
+      const comp = mountWithIntl(<ValueAxesPanel {...defaultProps} />);
+      expect(
+        comp
+          .find('.visEditorSidebar__aggGroupAccordionButtonContent span')
+          .first()
+          .text()
+      ).toBe(seriesParamCount.data.label);
+    });
+
+    it('should show when multiple series match value axis', () => {
+      defaultProps.stateParams.seriesParams[1].valueAxis = 'ValueAxis-1';
+      const comp = mountWithIntl(<ValueAxesPanel {...defaultProps} />);
+      expect(
+        comp
+          .find('.visEditorSidebar__aggGroupAccordionButtonContent span')
+          .first()
+          .text()
+      ).toBe(`${seriesParamCount.data.label}, ${seriesParamAverage.data.label}`);
+    });
+
+    it('should not show when no series match value axis', () => {
+      defaultProps.stateParams.seriesParams[0].valueAxis = 'ValueAxis-2';
+      const comp = mountWithIntl(<ValueAxesPanel {...defaultProps} />);
+      expect(
+        comp
+          .find('.visEditorSidebar__aggGroupAccordionButtonContent span')
+          .first()
+          .text()
+      ).toBe('');
+    });
+  });
+});
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/value_axes_panel.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/value_axes_panel.tsx
index 2ae54f9e093373..eb0ab4333af599 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/value_axes_panel.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/value_axes_panel.tsx
@@ -36,7 +36,7 @@ import { ValueAxisOptions } from './value_axis_options';
 import { SetParamByIndex } from './';
 import { ValidationVisOptionsProps } from '../../common';
 
-interface ValueAxesPanelProps extends ValidationVisOptionsProps<BasicVislibParams> {
+export interface ValueAxesPanelProps extends ValidationVisOptionsProps<BasicVislibParams> {
   isCategoryAxisHorizontal: boolean;
   addValueAxis: () => ValueAxis;
   removeValueAxis: (axis: ValueAxis) => void;
@@ -74,6 +74,7 @@ function ValueAxesPanel(props: ValueAxesPanelProps) {
           iconType="cross"
           onClick={() => removeValueAxis(axis)}
           aria-label={removeButtonTooltip}
+          data-test-subj="removeValueAxisBtn"
         />
       </EuiToolTip>
     ),
@@ -108,12 +109,12 @@ function ValueAxesPanel(props: ValueAxesPanelProps) {
       <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween" alignItems="baseline">
         <EuiFlexItem grow={false}>
           <EuiTitle size="xs">
-            <h2>
+            <h3>
               <FormattedMessage
                 id="kbnVislibVisTypes.controls.pointSeries.valueAxes.yAxisTitle"
                 defaultMessage="Y-axes"
               />
-            </h2>
+            </h3>
           </EuiTitle>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/value_axis_options.test.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/value_axis_options.test.tsx
new file mode 100644
index 00000000000000..8cb476508c78b1
--- /dev/null
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/value_axis_options.test.tsx
@@ -0,0 +1,165 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import { ValueAxisOptions, ValueAxisOptionsParams } from './value_axis_options';
+import { Axis } from '../../../types';
+import { TextInputOption } from '../../common';
+import { LabelOptions } from './label_options';
+import {
+  ScaleTypes,
+  Positions,
+  getScaleTypes,
+  getAxisModes,
+  getPositions,
+} from '../../../utils/collections';
+import { valueAxis, categoryAxis } from './mocks';
+
+const POSITION = 'position';
+const positions = getPositions();
+const axisModes = getAxisModes();
+const scaleTypes = getScaleTypes();
+
+interface PositionOption {
+  text: string;
+  value: Positions;
+  disabled: boolean;
+}
+
+describe('ValueAxisOptions component', () => {
+  let setParamByIndex: jest.Mock;
+  let onValueAxisPositionChanged: jest.Mock;
+  let setMultipleValidity: jest.Mock;
+  let defaultProps: ValueAxisOptionsParams;
+  let axis: Axis;
+
+  beforeEach(() => {
+    setParamByIndex = jest.fn();
+    setMultipleValidity = jest.fn();
+    onValueAxisPositionChanged = jest.fn();
+    axis = { ...valueAxis };
+
+    defaultProps = {
+      axis,
+      index: 0,
+      stateParams: {
+        categoryAxes: [{ ...categoryAxis }],
+        valueAxes: [axis],
+      },
+      vis: {
+        type: {
+          editorConfig: {
+            collections: { scaleTypes, axisModes, positions },
+          },
+        },
+      },
+      isCategoryAxisHorizontal: false,
+      setParamByIndex,
+      onValueAxisPositionChanged,
+      setMultipleValidity,
+    } as any;
+  });
+
+  it('should init with the default set of props', () => {
+    const comp = shallow(<ValueAxisOptions {...defaultProps} />);
+
+    expect(comp).toMatchSnapshot();
+  });
+
+  it('should hide options when axis.show is false', () => {
+    defaultProps.axis.show = false;
+    const comp = shallow(<ValueAxisOptions {...defaultProps} />);
+
+    expect(comp.find(TextInputOption).exists()).toBeFalsy();
+    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 comp = shallow(<ValueAxisOptions {...defaultProps} />);
+    comp.find({ paramName: POSITION }).prop('setValue')(POSITION, value);
+
+    expect(onValueAxisPositionChanged).toBeCalledWith(defaultProps.index, value);
+  });
+
+  it('should call setValueAxis when title is changed', () => {
+    defaultProps.axis.show = true;
+    const textValue = 'New title';
+    const comp = shallow(<ValueAxisOptions {...defaultProps} />);
+    comp.find(TextInputOption).prop('setValue')('text', textValue);
+
+    expect(setParamByIndex).toBeCalledWith('valueAxes', defaultProps.index, 'title', {
+      text: textValue,
+    });
+  });
+
+  it('should call setValueAxis when scale value is changed', () => {
+    const scaleValue = ScaleTypes.SQUARE_ROOT;
+    const comp = shallow(<ValueAxisOptions {...defaultProps} />);
+    comp.find({ paramName: 'type' }).prop('setValue')('type', scaleValue);
+
+    expect(setParamByIndex).toBeCalledWith('valueAxes', defaultProps.index, 'scale', {
+      ...defaultProps.axis.scale,
+      type: scaleValue,
+    });
+  });
+});
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/y_extents.test.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/y_extents.test.tsx
new file mode 100644
index 00000000000000..2df17b6e349852
--- /dev/null
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/y_extents.test.tsx
@@ -0,0 +1,112 @@
+/*
+ * 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 { YExtents, YExtentsProps } from './y_extents';
+import { ScaleTypes } from '../../../utils/collections';
+import { NumberInputOption } from '../../common';
+
+describe('YExtents component', () => {
+  let setMultipleValidity: jest.Mock;
+  let setScale: jest.Mock;
+  let defaultProps: YExtentsProps;
+  const Y_EXTENTS = 'yExtents';
+
+  beforeEach(() => {
+    setMultipleValidity = jest.fn();
+    setScale = jest.fn();
+
+    defaultProps = {
+      scale: {
+        type: ScaleTypes.LINEAR,
+      },
+      setMultipleValidity,
+      setScale,
+    };
+  });
+
+  it('should init with the default set of props', () => {
+    const comp = shallow(<YExtents {...defaultProps} />);
+
+    expect(comp).toMatchSnapshot();
+  });
+
+  it('should call setMultipleValidity with true when min and max are not defined', () => {
+    mount(<YExtents {...defaultProps} />);
+
+    expect(setMultipleValidity).toBeCalledWith(Y_EXTENTS, true);
+  });
+
+  it('should call setMultipleValidity with true when min less than max', () => {
+    defaultProps.scale.min = 1;
+    defaultProps.scale.max = 2;
+    mount(<YExtents {...defaultProps} />);
+
+    expect(setMultipleValidity).toBeCalledWith(Y_EXTENTS, true);
+  });
+
+  it('should call setMultipleValidity with false when min greater than max', () => {
+    defaultProps.scale.min = 1;
+    defaultProps.scale.max = 0;
+    mount(<YExtents {...defaultProps} />);
+
+    expect(setMultipleValidity).toBeCalledWith(Y_EXTENTS, false);
+  });
+
+  it('should call setMultipleValidity with false when min equals max', () => {
+    defaultProps.scale.min = 1;
+    defaultProps.scale.max = 1;
+    mount(<YExtents {...defaultProps} />);
+
+    expect(setMultipleValidity).toBeCalledWith(Y_EXTENTS, false);
+  });
+
+  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;
+    mount(<YExtents {...defaultProps} />);
+
+    expect(setMultipleValidity).toBeCalledWith(Y_EXTENTS, false);
+  });
+
+  it('should call setScale with input number', () => {
+    const inputNumber = 5;
+    const comp = shallow(<YExtents {...defaultProps} />);
+    const inputProps = comp
+      .find(NumberInputOption)
+      .first()
+      .props();
+    inputProps.setValue(Y_EXTENTS, inputNumber);
+
+    expect(setScale).toBeCalledWith(Y_EXTENTS, inputNumber);
+  });
+
+  it('should call setScale with null when input is empty', () => {
+    const comp = shallow(<YExtents {...defaultProps} />);
+    const inputProps = comp
+      .find(NumberInputOption)
+      .first()
+      .props();
+    inputProps.setValue(Y_EXTENTS, '');
+
+    expect(setScale).toBeCalledWith(Y_EXTENTS, null);
+  });
+});
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/y_extents.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/y_extents.tsx
index 29b986367d72ab..a5318f0ec3f00f 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/y_extents.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/y_extents.tsx
@@ -49,7 +49,7 @@ function isNullOrUndefined(value?: number | null): value is null | undefined {
   return value === null || value === undefined;
 }
 
-interface YExtentsProps {
+export interface YExtentsProps {
   scale: Scale;
   setScale: SetScale;
   setMultipleValidity: (paramName: string, isValid: boolean) => void;
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/pie.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/pie.tsx
index 982c7265d5494c..53dde185ec09fe 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/pie.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/pie.tsx
@@ -36,12 +36,12 @@ function PieOptions(props: VisOptionsProps<PieVisParams>) {
     <>
       <EuiPanel paddingSize="s">
         <EuiTitle size="xs">
-          <h2>
+          <h3>
             <FormattedMessage
               id="kbnVislibVisTypes.editors.pie.pieSettingsTitle"
               defaultMessage="Pie settings"
             />
-          </h2>
+          </h3>
         </EuiTitle>
         <EuiSpacer size="s" />
         <SwitchOption
@@ -59,12 +59,12 @@ function PieOptions(props: VisOptionsProps<PieVisParams>) {
 
       <EuiPanel paddingSize="s">
         <EuiTitle size="xs">
-          <div>
+          <h3>
             <FormattedMessage
               id="kbnVislibVisTypes.editors.pie.labelsSettingsTitle"
               defaultMessage="Labels settings"
             />
-          </div>
+          </h3>
         </EuiTitle>
         <EuiSpacer size="s" />
         <SwitchOption
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/grid_panel.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/grid_panel.tsx
index 8fcc66584bc001..72a842c78ea7b0 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/grid_panel.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/grid_panel.tsx
@@ -59,12 +59,12 @@ function GridPanel({ stateParams, setValue, hasHistogramAgg }: VisOptionsProps<B
   return (
     <EuiPanel paddingSize="s">
       <EuiTitle size="xs">
-        <h2>
+        <h3>
           <FormattedMessage
             id="kbnVislibVisTypes.controls.pointSeries.gridAxis.gridText"
             defaultMessage="Grid"
           />
-        </h2>
+        </h3>
       </EuiTitle>
 
       <EuiSpacer size="m" />
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/point_series.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/point_series.tsx
index 11034f7f7335e4..8e3f66d12b9bdf 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/point_series.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/point_series.tsx
@@ -34,12 +34,12 @@ function PointSeriesOptions(props: VisOptionsProps<BasicVislibParams>) {
     <>
       <EuiPanel paddingSize="s">
         <EuiTitle size="xs">
-          <h2>
+          <h3>
             <FormattedMessage
               id="kbnVislibVisTypes.editors.pointSeries.settingsTitle"
               defaultMessage="Settings"
             />
-          </h2>
+          </h3>
         </EuiTitle>
         <EuiSpacer size="m" />
 
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/threshold_panel.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/threshold_panel.tsx
index 9877b84345a1fe..49e56e377a8d56 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/threshold_panel.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/threshold_panel.tsx
@@ -42,12 +42,12 @@ function ThresholdPanel({ stateParams, setValue, vis }: VisOptionsProps<BasicVis
   return (
     <EuiPanel paddingSize="s">
       <EuiTitle size="xs">
-        <h2>
+        <h3>
           <FormattedMessage
             id="kbnVislibVisTypes.editors.pointSeries.thresholdLineSettingsTitle"
             defaultMessage="Threshold line"
           />
-        </h2>
+        </h3>
       </EuiTitle>
       <EuiSpacer size="m" />
 
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/kbn_vislib_vis_types.js b/src/legacy/core_plugins/kbn_vislib_vis_types/public/kbn_vislib_vis_types.js
index b11f21a96f38da..fe2cca3b800641 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/kbn_vislib_vis_types.js
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/kbn_vislib_vis_types.js
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { setup as visualizations } from '../../visualizations/public/legacy';
+import { setup as visualizations } from '../../visualizations/public/np_ready/public/legacy';
 
 import histogramVisTypeProvider from './histogram';
 import lineVisTypeProvider from './line';
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/utils/collections.ts b/src/legacy/core_plugins/kbn_vislib_vis_types/public/utils/collections.ts
index f47c62e8b0fd24..84b5cb5285948f 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/utils/collections.ts
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/utils/collections.ts
@@ -330,4 +330,8 @@ export {
   getPositions,
   getRotateOptions,
   getScaleTypes,
+  getInterpolationModes,
+  getChartTypes,
+  getChartModes,
+  getAxisModes,
 };
diff --git a/src/legacy/core_plugins/kibana/common/field_formats/types/__tests__/url.js b/src/legacy/core_plugins/kibana/common/field_formats/types/__tests__/url.js
index 678a533fa8efcb..ff847bea4bee63 100644
--- a/src/legacy/core_plugins/kibana/common/field_formats/types/__tests__/url.js
+++ b/src/legacy/core_plugins/kibana/common/field_formats/types/__tests__/url.js
@@ -189,5 +189,29 @@ describe('UrlFormat', function () {
       expect(converter('../foo/bar', null, null, parsedUrl))
         .to.be('<span ng-non-bindable><a href="http://kibana.host.com/nbc/app/../foo/bar" target="_blank" rel="noopener noreferrer">../foo/bar</a></span>');
     });
+
+    it('should support multiple types of urls w/o basePath', function () {
+      const url = new UrlFormat();
+      const parsedUrl = {
+        origin: 'http://kibana.host.com',
+        pathname: '/app/kibana',
+      };
+      const converter = url.getConverterFor('html');
+
+      expect(converter('10.22.55.66', null, null, parsedUrl))
+        .to.be('<span ng-non-bindable><a href="http://kibana.host.com/app/10.22.55.66" target="_blank" rel="noopener noreferrer">10.22.55.66</a></span>');
+
+      expect(converter('http://www.domain.name/app/kibana#/dashboard/', null, null, parsedUrl))
+        .to.be('<span ng-non-bindable><a href="http://www.domain.name/app/kibana#/dashboard/" target="_blank" rel="noopener noreferrer">http://www.domain.name/app/kibana#/dashboard/</a></span>');
+
+      expect(converter('/app/kibana', null, null, parsedUrl))
+        .to.be('<span ng-non-bindable><a href="http://kibana.host.com/app/kibana" target="_blank" rel="noopener noreferrer">/app/kibana</a></span>');
+
+      expect(converter('kibana#/dashboard/', null, null, parsedUrl))
+        .to.be('<span ng-non-bindable><a href="http://kibana.host.com/app/kibana#/dashboard/" target="_blank" rel="noopener noreferrer">kibana#/dashboard/</a></span>');
+
+      expect(converter('#/dashboard/', null, null, parsedUrl))
+        .to.be('<span ng-non-bindable><a href="http://kibana.host.com/app/kibana#/dashboard/" target="_blank" rel="noopener noreferrer">#/dashboard/</a></span>');
+    });
   });
 });
diff --git a/src/legacy/core_plugins/kibana/common/field_formats/types/boolean.js b/src/legacy/core_plugins/kibana/common/field_formats/types/boolean.ts
similarity index 82%
rename from src/legacy/core_plugins/kibana/common/field_formats/types/boolean.js
rename to src/legacy/core_plugins/kibana/common/field_formats/types/boolean.ts
index 0e1e1ecf058b9e..c232f65143d859 100644
--- a/src/legacy/core_plugins/kibana/common/field_formats/types/boolean.js
+++ b/src/legacy/core_plugins/kibana/common/field_formats/types/boolean.ts
@@ -17,11 +17,19 @@
  * under the License.
  */
 
-import { asPrettyString } from '../../../../../../plugins/data/common/field_formats';
+import {
+  FieldFormat,
+  asPrettyString,
+  KBN_FIELD_TYPES,
+} from '../../../../../../plugins/data/common';
 
-export function createBoolFormat(FieldFormat) {
+export function createBoolFormat() {
   return class BoolFormat extends FieldFormat {
-    _convert(value) {
+    static id = 'boolean';
+    static title = 'Boolean';
+    static fieldType = [KBN_FIELD_TYPES.BOOLEAN, KBN_FIELD_TYPES.NUMBER, KBN_FIELD_TYPES.STRING];
+
+    _convert(value: any): string {
       if (typeof value === 'string') {
         value = value.trim().toLowerCase();
       }
@@ -41,9 +49,5 @@ export function createBoolFormat(FieldFormat) {
           return asPrettyString(value);
       }
     }
-
-    static id = 'boolean';
-    static title = 'Boolean';
-    static fieldType = ['boolean', 'number', 'string'];
   };
 }
diff --git a/src/legacy/core_plugins/kibana/common/field_formats/types/url.js b/src/legacy/core_plugins/kibana/common/field_formats/types/url.js
index 4171e511f27f5d..63924727ab8bbf 100644
--- a/src/legacy/core_plugins/kibana/common/field_formats/types/url.js
+++ b/src/legacy/core_plugins/kibana/common/field_formats/types/url.js
@@ -157,7 +157,9 @@ export function createUrlFormat(FieldFormat) {
             }
             // Handle urls like: `../app/kibana`
             else {
-              prefix = `${parsedUrl.origin}${parsedUrl.basePath}/app/`;
+              const prefixEnd = url[0] === '/' ? '' : '/';
+
+              prefix = `${parsedUrl.origin}${parsedUrl.basePath || ''}/app${prefixEnd}`;
             }
           }
 
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html
index 5ceb28e6b225b8..39db357a69321f 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html
+++ b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html
@@ -120,6 +120,7 @@
     </div>
   </div>
 
+  <h1 class="euiScreenReaderOnly">{{screenTitle}}</h1>
   <div id="dashboardViewport"></div>
 
 </dashboard-app>
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app_controller.tsx b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app_controller.tsx
index 741931af11c7de..22f127d12c4387 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app_controller.tsx
+++ b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app_controller.tsx
@@ -331,7 +331,8 @@ export class DashboardAppController {
       getDashboardTitle(
         dashboardStateManager.getTitle(),
         dashboardStateManager.getViewMode(),
-        dashboardStateManager.getIsDirty(timefilter)
+        dashboardStateManager.getIsDirty(timefilter),
+        dashboardStateManager.isNew()
       );
 
     // Push breadcrumbs to new header navigation
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_state_manager.ts b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_state_manager.ts
index c1ce5b764f2f6a..7c1fc771de3491 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_state_manager.ts
+++ b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_state_manager.ts
@@ -229,6 +229,14 @@ export class DashboardStateManager {
     return this.appState.title;
   }
 
+  public isSaved() {
+    return !!this.savedDashboard.id;
+  }
+
+  public isNew() {
+    return !this.isSaved();
+  }
+
   public getDescription() {
     return this.appState.description;
   }
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_strings.ts b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_strings.ts
index b7f9293539abde..d932116d08dc8f 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_strings.ts
+++ b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_strings.ts
@@ -27,22 +27,31 @@ import { ViewMode } from '../../../../../../src/plugins/embeddable/public';
  * end of the title.
  * @returns {string} A title to display to the user based on the above parameters.
  */
-export function getDashboardTitle(title: string, viewMode: ViewMode, isDirty: boolean): string {
+export function getDashboardTitle(
+  title: string,
+  viewMode: ViewMode,
+  isDirty: boolean,
+  isNew: boolean
+): string {
   const isEditMode = viewMode === ViewMode.EDIT;
   let displayTitle: string;
+  const newDashboardTitle = i18n.translate('kbn.dashboard.savedDashboard.newDashboardTitle', {
+    defaultMessage: 'New Dashboard',
+  });
+  const dashboardTitle = isNew ? newDashboardTitle : title;
 
   if (isEditMode && isDirty) {
     displayTitle = i18n.translate('kbn.dashboard.strings.dashboardUnsavedEditTitle', {
       defaultMessage: 'Editing {title} (unsaved)',
-      values: { title },
+      values: { title: dashboardTitle },
     });
   } else if (isEditMode) {
     displayTitle = i18n.translate('kbn.dashboard.strings.dashboardEditTitle', {
       defaultMessage: 'Editing {title}',
-      values: { title },
+      values: { title: dashboardTitle },
     });
   } else {
-    displayTitle = title;
+    displayTitle = dashboardTitle;
   }
 
   return displayTitle;
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/index.js b/src/legacy/core_plugins/kibana/public/dashboard/index.js
index 6b7b086b162214..712e05c92e5e8b 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/index.js
+++ b/src/legacy/core_plugins/kibana/public/dashboard/index.js
@@ -33,13 +33,14 @@ import { DashboardConstants, createDashboardEditUrl } from './dashboard_constant
 import { InvalidJSONProperty, SavedObjectNotFound } from '../../../../../plugins/kibana_utils/public';
 import { FeatureCatalogueRegistryProvider, FeatureCatalogueCategory } from 'ui/registry/feature_catalogue';
 import { SavedObjectsClientProvider } from 'ui/saved_objects';
-import { recentlyAccessed } from 'ui/persisted_log';
 import { SavedObjectRegistryProvider } from 'ui/saved_objects/saved_object_registry';
 import { DashboardListing, EMPTY_FILTER } from './listing/dashboard_listing';
 import { uiModules } from 'ui/modules';
 import 'ui/capabilities/route_setup';
 import { addHelpMenuToAppChrome } from './help_menu/help_menu_util';
 
+import { npStart } from 'ui/new_platform';
+
 // load directives
 import '../../../data/public';
 
@@ -159,7 +160,7 @@ uiRoutes
 
         return savedDashboards.get(id)
           .then((savedDashboard) => {
-            recentlyAccessed.add(savedDashboard.getFullPath(), savedDashboard.title, id);
+            npStart.core.chrome.recentlyAccessed.add(savedDashboard.getFullPath(), savedDashboard.title, id);
             return savedDashboard;
           })
           .catch((error) => {
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/listing/__snapshots__/dashboard_listing.test.js.snap b/src/legacy/core_plugins/kibana/public/dashboard/listing/__snapshots__/dashboard_listing.test.js.snap
index 9b819443808c93..89b8e2ac83ec10 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/listing/__snapshots__/dashboard_listing.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/dashboard/listing/__snapshots__/dashboard_listing.test.js.snap
@@ -13,7 +13,6 @@ exports[`after fetch hideWriteControls 1`] = `
   noItemsFragment={
     <div>
       <EuiEmptyPrompt
-        iconColor="subdued"
         iconType="visualizeApp"
         title={
           <h2>
@@ -106,7 +105,6 @@ exports[`after fetch initialFilter 1`] = `
             </p>
           </React.Fragment>
         }
-        iconColor="subdued"
         iconType="dashboardApp"
         title={
           <h2>
@@ -199,7 +197,6 @@ exports[`after fetch renders call to action when no dashboards exist 1`] = `
             </p>
           </React.Fragment>
         }
-        iconColor="subdued"
         iconType="dashboardApp"
         title={
           <h2>
@@ -292,7 +289,6 @@ exports[`after fetch renders table rows 1`] = `
             </p>
           </React.Fragment>
         }
-        iconColor="subdued"
         iconType="dashboardApp"
         title={
           <h2>
@@ -385,7 +381,6 @@ exports[`after fetch renders warning when listingLimit is exceeded 1`] = `
             </p>
           </React.Fragment>
         }
-        iconColor="subdued"
         iconType="dashboardApp"
         title={
           <h2>
@@ -478,7 +473,6 @@ exports[`renders empty page in before initial fetch to avoid flickering 1`] = `
             </p>
           </React.Fragment>
         }
-        iconColor="subdued"
         iconType="dashboardApp"
         title={
           <h2>
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/saved_dashboard/saved_dashboard.js b/src/legacy/core_plugins/kibana/public/dashboard/saved_dashboard/saved_dashboard.js
index 36a083ef5a39ce..fe9e7b18d50072 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/saved_dashboard/saved_dashboard.js
+++ b/src/legacy/core_plugins/kibana/public/dashboard/saved_dashboard/saved_dashboard.js
@@ -18,7 +18,6 @@
  */
 
 import angular from 'angular';
-import { i18n } from '@kbn/i18n';
 import { uiModules } from 'ui/modules';
 import { createDashboardEditUrl } from '../dashboard_constants';
 import { createLegacyClass } from 'ui/utils/legacy_class';
@@ -50,7 +49,7 @@ module.factory('SavedDashboard', function (Private) {
 
       // default values that will get assigned if the doc is new
       defaults: {
-        title: i18n.translate('kbn.dashboard.savedDashboard.newDashboardTitle', { defaultMessage: 'New Dashboard' }),
+        title: '',
         hits: 0,
         description: '',
         panelsJSON: '[]',
diff --git a/src/legacy/core_plugins/kibana/public/discover/_discover.scss b/src/legacy/core_plugins/kibana/public/discover/_discover.scss
index abf24241071c21..12cac1c89275b3 100644
--- a/src/legacy/core_plugins/kibana/public/discover/_discover.scss
+++ b/src/legacy/core_plugins/kibana/public/discover/_discover.scss
@@ -19,9 +19,15 @@ discover-app {
   margin-top: 5px;
 }
 
-// SASSTODO: replace the padding-top value with a variable
 .dscFieldList--popular {
-  padding-top: 10px;
+  padding-top: $euiSizeS;
+}
+
+.dscFieldList--selected,
+.dscFieldList--unpopular,
+.dscFieldList--popular {
+  padding-left: $euiSizeS;
+  padding-right: $euiSizeS;
 }
 
 // SASSTODO: replace the z-index value with a variable
@@ -151,9 +157,16 @@ discover-app {
   }
 }
 
-// SASSTODO: replace the padding value with a variable
+.dscFieldSearch {
+  padding: $euiSizeS;
+}
+
+.dscFieldFilter {
+  margin-top: $euiSizeS;
+}
+
 .dscFieldDetails {
-  padding: 10px;
+  padding: $euiSizeS;
   background-color: $euiColorLightestShade;
   color: $euiTextColor;
 }
diff --git a/src/legacy/core_plugins/kibana/public/discover/_hacks.scss b/src/legacy/core_plugins/kibana/public/discover/_hacks.scss
index cdc8e04dff5789..baf27bb9f82da1 100644
--- a/src/legacy/core_plugins/kibana/public/discover/_hacks.scss
+++ b/src/legacy/core_plugins/kibana/public/discover/_hacks.scss
@@ -3,18 +3,4 @@
   overflow: hidden;
 }
 
-// SASSTODO: these are Angular Bootstrap classes. Will be replaced by EUI
-.dscFieldDetails {
-  .progress {
-    background-color: shade($euiColorLightestShade, 5%);
-    margin-bottom: 0;
-    border-radius: 0;
-  }
 
-  .progress-bar {
-    padding-left: 10px;
-    text-align: right;
-    line-height: 20px;
-    max-width: 100%;
-  }
-}
diff --git a/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/_field_chooser.scss b/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/_field_chooser.scss
index 1946cccd319a4d..22f53512be46b1 100644
--- a/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/_field_chooser.scss
+++ b/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/_field_chooser.scss
@@ -1,3 +1,8 @@
+.dscFieldChooser {
+  padding-left: $euiSizeS !important;
+  padding-right: $euiSizeS !important;
+}
+
 .dscFieldChooser__toggle {
   color: $euiColorMediumShade;
   margin-left: $euiSizeS !important;
@@ -15,3 +20,7 @@
 .dscProgressBarTooltip__anchor {
   display: block;
 }
+
+.dscToggleFieldFilterButton {
+  min-height: $euiSizeXL;
+}
diff --git a/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/discover_field_search.test.tsx b/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/discover_field_search.test.tsx
new file mode 100644
index 00000000000000..cf853d798a8abb
--- /dev/null
+++ b/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/discover_field_search.test.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 from 'react';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
+// @ts-ignore
+import { findTestSubject } from '@elastic/eui/lib/test';
+import { DiscoverFieldSearch } from './discover_field_search';
+
+describe('DiscoverFieldSearch', () => {
+  function mountComponent() {
+    const props = {
+      onChange: jest.fn(),
+      onShowFilter: jest.fn(),
+      showFilter: false,
+      value: 'test',
+    };
+    const comp = mountWithIntl(<DiscoverFieldSearch {...props} />);
+    const input = findTestSubject(comp, 'fieldFilterSearchInput');
+    const btn = findTestSubject(comp, 'toggleFieldFilterButton');
+    return { comp, input, btn, props };
+  }
+
+  test('enter value', () => {
+    const { input, props } = mountComponent();
+    input.simulate('change', { target: { value: 'new filter' } });
+    expect(props.onChange).toBeCalledTimes(1);
+  });
+
+  // this should work, but doesn't, have to do some research
+  test('click toggle filter button', () => {
+    const { btn, props } = mountComponent();
+    btn.simulate('click');
+    expect(props.onShowFilter).toBeCalledTimes(1);
+  });
+
+  test('change showFilter value should change button label', () => {
+    const { btn, comp } = mountComponent();
+    const prevFilterBtnHTML = btn.html();
+    comp.setProps({ showFilter: true });
+    expect(btn.html()).not.toBe(prevFilterBtnHTML);
+  });
+});
diff --git a/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/discover_field_search.tsx b/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/discover_field_search.tsx
new file mode 100644
index 00000000000000..666ccf0acfc7a3
--- /dev/null
+++ b/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/discover_field_search.tsx
@@ -0,0 +1,91 @@
+/*
+ * 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 { EuiButtonIcon, EuiFieldSearch, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
+
+export interface Props {
+  /**
+   * triggered on input of user into search field
+   */
+  onChange: (field: string, value: string) => void;
+  /**
+   * triggered when the "additional filter btn" is clicked
+   */
+  onShowFilter: () => void;
+  /**
+   * determines whether additional filter fields are displayed
+   */
+  showFilter: boolean;
+  /**
+   * the input value of the user
+   */
+  value?: string;
+}
+
+/**
+ * Component is Discover's side bar to  search of available fields
+ * Additionally there's a button displayed that allows the user to show/hide more filter fields
+ */
+export function DiscoverFieldSearch({ showFilter, onChange, onShowFilter, value }: Props) {
+  if (typeof value !== 'string') {
+    // at initial rendering value is undefined (angular related), this catches the warning
+    // should be removed once all is react
+    return null;
+  }
+  const filterBtnAriaLabel = showFilter
+    ? i18n.translate('kbn.discover.fieldChooser.toggleFieldFilterButtonHideAriaLabel', {
+        defaultMessage: 'Hide field filter settings',
+      })
+    : i18n.translate('kbn.discover.fieldChooser.toggleFieldFilterButtonShowAriaLabel', {
+        defaultMessage: 'Show field filter settings',
+      });
+  const searchPlaceholder = i18n.translate('kbn.discover.fieldChooser.searchPlaceHolder', {
+    defaultMessage: 'Search fields',
+  });
+
+  return (
+    <EuiFlexGroup responsive={false} gutterSize={'s'}>
+      <EuiFlexItem>
+        <EuiFieldSearch
+          aria-label={searchPlaceholder}
+          data-test-subj="fieldFilterSearchInput"
+          compressed
+          fullWidth
+          onChange={event => onChange('name', event.currentTarget.value)}
+          placeholder={searchPlaceholder}
+          value={value}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiToolTip content={filterBtnAriaLabel} position="right">
+          <EuiButtonIcon
+            aria-expanded={showFilter}
+            aria-label={filterBtnAriaLabel}
+            className="dscToggleFieldFilterButton"
+            data-test-subj="toggleFieldFilterButton"
+            iconType="filter"
+            onClick={() => onShowFilter()}
+            size="m"
+          />
+        </EuiToolTip>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
diff --git a/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/discover_field_search_directive.ts b/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/discover_field_search_directive.ts
new file mode 100644
index 00000000000000..baf8f3040d6b02
--- /dev/null
+++ b/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/discover_field_search_directive.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.
+ */
+// @ts-ignore
+import { uiModules } from 'ui/modules';
+import { wrapInI18nContext } from 'ui/i18n';
+import { DiscoverFieldSearch } from './discover_field_search';
+
+const app = uiModules.get('apps/discover');
+
+app.directive('discoverFieldSearch', function(reactDirective: any) {
+  return reactDirective(wrapInI18nContext(DiscoverFieldSearch), [
+    ['onChange', { watchDepth: 'reference' }],
+    ['onShowFilter', { watchDepth: 'reference' }],
+    ['showFilter', { watchDepth: 'value' }],
+    ['value', { watchDepth: 'value' }],
+  ]);
+});
diff --git a/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html b/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html
index 96aa1582b5243e..d1a75adac5b82f 100644
--- a/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html
+++ b/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html
@@ -5,6 +5,75 @@
     index-pattern-list="indexPatternList"
   >
   </discover-index-pattern-select>
+  <div class="sidebar-item" >
+    <form>
+      <discover-field-search
+        on-change="setFilterValue"
+        on-show-filter="toggleShowFilter"
+        show-filter="showFilter"
+        value="filter.vals.name"
+      >
+      </discover-field-search>
+      <div data-test-subj="discoverFieldFilter" class="dscFieldFilter" ng-show="showFilter">
+        <div class="form-group" >
+          <label
+            for="discoverFieldChooserFilterAggregatable"
+            i18n-id="kbn.discover.fieldChooser.filter.aggregatableLabel"
+            i18n-default-message="Aggregatable"
+          ></label>
+          <select
+            id="discoverFieldChooserFilterAggregatable"
+            ng-options="opt.value as opt.label for opt in filter.boolOpts"
+            ng-model="filter.vals.aggregatable"
+            class="form-control">
+          </select>
+        </div>
+        <div class="form-group" ng-show="showFilter">
+          <label
+            for="discoverFieldChooserFilterSearchable"
+            i18n-id="kbn.discover.fieldChooser.filter.searchableLabel"
+            i18n-default-message="Searchable"
+          ></label>
+          <select
+            id="discoverFieldChooserFilterSearchable"
+            ng-options="opt.value as opt.label for opt in filter.boolOpts"
+            ng-model="filter.vals.searchable"
+            class="form-control">
+          </select>
+        </div>
+        <div class="form-group"  ng-show="showFilter">
+          <label
+            for="discoverFieldChooserFilterType"
+            i18n-id="kbn.discover.fieldChooser.filter.typeLabel"
+            i18n-default-message="Type"
+          ></label>
+          <select
+            id="discoverFieldChooserFilterType"
+            ng-options="field as field for field in fieldTypes"
+            ng-model="filter.vals.type"
+            class="form-control">
+          </select>
+        </div>
+        <div class="form-group"  ng-show="showFilter">
+          <label for="discoverFieldChooserHideMissingFields">
+            <input id="discoverFieldChooserHideMissingFields" type="checkbox" ng-model="filter.vals.missing">
+            <span
+              i18n-id="kbn.discover.fieldChooser.filter.hideMissingFieldsLabel"
+              i18n-default-message="Hide missing fields"
+            ></span>
+          </label>
+        </div>
+        <button
+          ng-show="showFilter"
+          ng-click="filter.reset()"
+          ng-disabled="!filter.active"
+          class="kuiButton kuiButton--danger kuiButton--fullWidth"
+          i18n-id="kbn.discover.fieldChooser.filter.resetFiltersButtonLabel"
+          i18n-default-message="Reset filters"
+        ></button>
+      </div>
+    </form>
+  </div>
 
   <div class="dscSidebar__listHeader sidebar-list-header" ng-if="fields.length">
     <h3
@@ -15,9 +84,9 @@
       i18n-default-message="Selected fields"
     ></h3>
   </div>
-  <ul class="list-unstyled dscFieldList--selected" >
+  <ul class="list-unstyled dscFieldList--selected" aria-labelledby="selected_fields">
     <discover-field
-      ng-repeat="field in fields.raw|filter:{display:true}"
+      ng-repeat="field in fields.raw|filter:filter.isFieldFilteredAndDisplayed"
       field="field"
       on-add-field="onAddField"
       on-add-filter="onAddFilter"
@@ -49,97 +118,10 @@
         ></span>
       </button>
     </div>
-    <div class="euiFlexItem euiFlexItem--flexGrowZero">
-      <button
-        type="button"
-        ng-class="{ 'kuiButton--basic': !filter.active, 'kuiButton--primary': filter.active, 'hidden-xs': !$parent.showFields, 'hidden-sm': !$parent.showFields }"
-        class="kuiButton kuiButton--small pull-right discover-field-filter-toggle"
-        ng-click="$parent.showFilter = !$parent.showFilter"
-        aria-label="{{toggleFieldFilterButtonAriaLabel}}"
-        aria-expanded="{{!!$parent.showFilter}}"
-        aria-controls="discoverFieldFilter"
-        data-test-subj="toggleFieldFilterButton"
-      >
-        <span aria-hidden="true" class="kuiIcon fa-gear"></span>
-      </button>
-    </div>
-  </div>
-
-  <div class="sidebar-item dscFieldDetails" ng-show="showFilter" id="discoverFieldFilter" data-test-subj="discoverFieldFilter">
-    <form role="form">
-      <div class="form-group">
-        <label
-          for="discoverFieldChooserFilterAggregatable"
-          i18n-id="kbn.discover.fieldChooser.filter.aggregatableLabel"
-          i18n-default-message="Aggregatable"
-        ></label>
-        <select
-          id="discoverFieldChooserFilterAggregatable"
-          ng-options="opt.value as opt.label for opt in filter.boolOpts"
-          ng-model="filter.vals.aggregatable"
-          class="form-control">
-        </select>
-      </div>
-      <div class="form-group">
-        <label
-          for="discoverFieldChooserFilterSearchable"
-          i18n-id="kbn.discover.fieldChooser.filter.searchableLabel"
-          i18n-default-message="Searchable"
-        ></label>
-        <select
-          id="discoverFieldChooserFilterSearchable"
-          ng-options="opt.value as opt.label for opt in filter.boolOpts"
-          ng-model="filter.vals.searchable"
-          class="form-control">
-        </select>
-      </div>
-      <div class="form-group">
-        <label
-          for="discoverFieldChooserFilterType"
-          i18n-id="kbn.discover.fieldChooser.filter.typeLabel"
-          i18n-default-message="Type"
-        ></label>
-        <select
-          id="discoverFieldChooserFilterType"
-          ng-options="field as field for field in fieldTypes"
-          ng-model="filter.vals.type"
-          class="form-control">
-        </select>
-      </div>
-      <div class="form-group">
-        <label
-          for="discoverFieldChooserFilterFieldName"
-          i18n-id="kbn.discover.fieldChooser.filter.fieldNameLabel"
-          i18n-default-message="Field name"
-        ></label>
-        <input
-          id="discoverFieldChooserFilterFieldName"
-          type="text"
-          class="form-control"
-          ng-model="filter.vals.name"
-        >
-      </div>
-      <div class="form-group">
-        <label for="discoverFieldChooserHideMissingFields">
-          <input id="discoverFieldChooserHideMissingFields" type="checkbox" ng-model="filter.vals.missing">
-          <span
-            i18n-id="kbn.discover.fieldChooser.filter.hideMissingFieldsLabel"
-            i18n-default-message="Hide missing fields"
-          ></span>
-        </label>
-      </div>
-      <button
-        ng-click="filter.reset()"
-        ng-disabled="!filter.active"
-        class="kuiButton kuiButton--danger kuiButton--fullWidth"
-        i18n-id="kbn.discover.fieldChooser.filter.resetFiltersButtonLabel"
-        i18n-default-message="Reset filters"
-      ></button>
-    </form>
   </div>
 
   <ul
-    ng-show="(popularFields | filter:filter.isFieldFiltered).length > 0"
+    ng-show="(popularFields | filter:filter.isFieldFilteredAndNotDisplayed).length > 0"
     ng-class="{ 'hidden-sm': !showFields, 'hidden-xs': !showFields }"
     class="list-unstyled sidebar-well dscFieldList--popular">
     <li class="sidebar-item sidebar-list-header">
@@ -149,7 +131,7 @@
       ></h6>
     </li>
     <discover-field
-      ng-repeat="field in popularFields | filter:filter.isFieldFiltered"
+      ng-repeat="field in popularFields | filter:filter.isFieldFilteredAndNotDisplayed"
       field="field"
       on-add-field="onAddField"
       on-add-filter="onAddFilter"
@@ -163,7 +145,7 @@
     ng-class="{ 'hidden-sm': !showFields, 'hidden-xs': !showFields  }"
     class="list-unstyled dscFieldList--unpopular">
     <discover-field
-      ng-repeat="field in unpopularFields | filter:filter.isFieldFiltered"
+      ng-repeat="field in unpopularFields | filter:filter.isFieldFilteredAndNotDisplayed"
       field="field"
       on-add-field="onAddField"
       on-add-filter="onAddFilter"
diff --git a/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.js b/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.js
index 64497a4f84ae89..7b718b2a67f327 100644
--- a/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.js
+++ b/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.js
@@ -18,9 +18,10 @@
  */
 
 import 'ui/directives/css_truncate';
-import { i18n } from '@kbn/i18n';
 import 'ui/directives/field_name';
 import './discover_field';
+import 'ui/angular_ui_select';
+import './discover_field_search_directive';
 import './discover_index_pattern_directive';
 import _ from 'lodash';
 import $ from 'jquery';
@@ -47,15 +48,9 @@ app.directive('discFieldChooser', function ($location, config, $route) {
     },
     template: fieldChooserTemplate,
     link: function ($scope) {
-      $scope.$parent.$watch('showFilter', () =>{
-        $scope.toggleFieldFilterButtonAriaLabel = $scope.$parent.showFilter
-          ? i18n.translate('kbn.discover.fieldChooser.toggleFieldFilterButtonHideAriaLabel', {
-            defaultMessage: 'Hide field settings',
-          })
-          : i18n.translate('kbn.discover.fieldChooser.toggleFieldFilterButtonShowAriaLabel', {
-            defaultMessage: 'Show field settings',
-          });
-      });
+
+      $scope.showFilter = false;
+      $scope.toggleShowFilter = () =>  $scope.showFilter = !$scope.showFilter;
 
       $scope.selectedIndexPattern = $scope.indexPatternList.find(
         (pattern) => pattern.id === $scope.indexPattern.id
@@ -81,40 +76,28 @@ app.directive('discFieldChooser', function ($location, config, $route) {
         ],
         defaults: {
           missing: true,
-          type: 'any'
+          type: 'any',
+          name: ''
         },
         boolOpts: [
           { label: 'any', value: undefined },
           { label: 'yes', value: true },
           { label: 'no', value: false }
         ],
-        toggleVal: function (name, def) {
-          if (filter.vals[name] !== def) filter.vals[name] = def;
-          else filter.vals[name] = undefined;
-        },
         reset: function () {
           filter.vals = _.clone(filter.defaults);
         },
-        isFieldSelected: function (field) {
-          return field.display;
-        },
-        isFieldFiltered: function (field) {
-          const matchFilter = (filter.vals.type === 'any' || field.type === filter.vals.type);
-          const isAggregatable = (filter.vals.aggregatable == null || field.aggregatable === filter.vals.aggregatable);
-          const isSearchable = (filter.vals.searchable == null || field.searchable === filter.vals.searchable);
-          const scriptedOrMissing = (!filter.vals.missing || field.scripted || field.rowCount > 0);
-          const matchName = (!filter.vals.name || field.name.indexOf(filter.vals.name) !== -1);
-
-          return !field.display
-            && matchFilter
-            && isAggregatable
-            && isSearchable
-            && scriptedOrMissing
-            && matchName
-          ;
+        /**
+         * filter for fields that are displayed / selected for the data table
+         */
+        isFieldFilteredAndDisplayed: function (field) {
+          return field.display && isFieldFiltered(field);
         },
-        popularity: function (field) {
-          return field.count > 0;
+        /**
+         * filter for fields that are not displayed / selected for the data table
+         */
+        isFieldFilteredAndNotDisplayed: function (field) {
+          return !field.display && isFieldFiltered(field) && field.type !== '_source';
         },
         getActive: function () {
           return _.some(filter.props, function (prop) {
@@ -123,6 +106,20 @@ app.directive('discFieldChooser', function ($location, config, $route) {
         }
       };
 
+      function isFieldFiltered(field) {
+        const matchFilter = (filter.vals.type === 'any' || field.type === filter.vals.type);
+        const isAggregatable = (filter.vals.aggregatable == null || field.aggregatable === filter.vals.aggregatable);
+        const isSearchable = (filter.vals.searchable == null || field.searchable === filter.vals.searchable);
+        const scriptedOrMissing = !filter.vals.missing || field.type === '_source' ||  field.scripted || field.rowCount > 0;
+        const matchName = (!filter.vals.name || field.name.indexOf(filter.vals.name) !== -1);
+
+        return matchFilter && isAggregatable && isSearchable && scriptedOrMissing && matchName;
+      }
+
+      $scope.setFilterValue = (name, value) => {
+        filter.vals[name] = value;
+      };
+
       // set the initial values to the defaults
       filter.reset();
 
diff --git a/src/legacy/core_plugins/kibana/public/discover/controllers/discover.js b/src/legacy/core_plugins/kibana/public/discover/controllers/discover.js
index ff3e797bc28975..f79689ac8c7330 100644
--- a/src/legacy/core_plugins/kibana/public/discover/controllers/discover.js
+++ b/src/legacy/core_plugins/kibana/public/discover/controllers/discover.js
@@ -54,8 +54,7 @@ import { StateProvider } from 'ui/state_management/state';
 import { migrateLegacyQuery } from 'ui/utils/migrate_legacy_query';
 import { subscribeWithScope } from 'ui/utils/subscribe_with_scope';
 import { getFilterGenerator } from 'ui/filter_manager';
-import { SavedObjectsClientProvider } from 'ui/saved_objects';
-import { recentlyAccessed } from 'ui/persisted_log';
+
 import { getDocLink } from 'ui/documentation_links';
 import '../components/fetch_error';
 import { getPainlessError } from './get_painless_error';
@@ -74,6 +73,7 @@ import 'ui/capabilities/route_setup';
 import { addHelpMenuToAppChrome } from '../components/help_menu/help_menu_util';
 
 import { setup as data } from '../../../../../core_plugins/data/public/legacy';
+import { npStart } from 'ui/new_platform';
 
 const { savedQueryService } = data.search.services;
 
@@ -121,44 +121,37 @@ uiRoutes
     resolve: {
       ip: function (Promise, indexPatterns, config, Private) {
         const State = Private(StateProvider);
-        const savedObjectsClient = Private(SavedObjectsClientProvider);
-
-        return savedObjectsClient.find({
-          type: 'index-pattern',
-          fields: ['title'],
-          perPage: 10000
-        })
-          .then(({ savedObjects }) => {
-            /**
-             *  In making the indexPattern modifiable it was placed in appState. Unfortunately,
-             *  the load order of AppState conflicts with the load order of many other things
-             *  so in order to get the name of the index we should use, and to switch to the
-             *  default if necessary, we parse the appState with a temporary State object and
-             *  then destroy it immediatly after we're done
-             *
-             *  @type {State}
-             */
-            const state = new State('_a', {});
-
-            const specified = !!state.index;
-            const exists = _.findIndex(savedObjects, o => o.id === state.index) > -1;
-            const id = exists ? state.index : config.get('defaultIndex');
-            state.destroy();
-
-            return Promise.props({
-              list: savedObjects,
-              loaded: indexPatterns.get(id),
-              stateVal: state.index,
-              stateValFound: specified && exists
-            });
+        return indexPatterns.getCache().then((savedObjects)=> {
+          /**
+           *  In making the indexPattern modifiable it was placed in appState. Unfortunately,
+           *  the load order of AppState conflicts with the load order of many other things
+           *  so in order to get the name of the index we should use, and to switch to the
+           *  default if necessary, we parse the appState with a temporary State object and
+           *  then destroy it immediatly after we're done
+           *
+           *  @type {State}
+           */
+          const state = new State('_a', {});
+
+          const specified = !!state.index;
+          const exists = _.findIndex(savedObjects, o => o.id === state.index) > -1;
+          const id = exists ? state.index : config.get('defaultIndex');
+          state.destroy();
+
+          return Promise.props({
+            list: savedObjects,
+            loaded: indexPatterns.get(id),
+            stateVal: state.index,
+            stateValFound: specified && exists
           });
+        });
       },
       savedSearch: function (redirectWhenMissing, savedSearches, $route) {
         const savedSearchId = $route.current.params.id;
         return savedSearches.get(savedSearchId)
           .then((savedSearch) => {
             if (savedSearchId) {
-              recentlyAccessed.add(
+              npStart.core.chrome.recentlyAccessed.add(
                 savedSearch.getFullPath(),
                 savedSearch.title,
                 savedSearchId);
diff --git a/src/legacy/core_plugins/kibana/public/discover/directives/__snapshots__/no_results.test.js.snap b/src/legacy/core_plugins/kibana/public/discover/directives/__snapshots__/no_results.test.js.snap
index 9f400e54899afd..ed7a4b5d548ed4 100644
--- a/src/legacy/core_plugins/kibana/public/discover/directives/__snapshots__/no_results.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/discover/directives/__snapshots__/no_results.test.js.snap
@@ -377,11 +377,11 @@ Array [
       <div
         class="euiText euiText--medium"
       >
-        <h3
+        <h2
           data-test-subj="discoverNoResultsTimefilter"
         >
           Expand your time range
-        </h3>
+        </h2>
         <p>
           One or more of the indices you’re looking at contains a date field. Your query may not match anything in the current time range, or there may not be any data at all in the currently selected time range. You can try changing the time range to one which contains data.
         </p>
diff --git a/src/legacy/core_plugins/kibana/public/discover/directives/no_results.js b/src/legacy/core_plugins/kibana/public/discover/directives/no_results.js
index 9f57c49977f5a5..5f6d32681b50e4 100644
--- a/src/legacy/core_plugins/kibana/public/discover/directives/no_results.js
+++ b/src/legacy/core_plugins/kibana/public/discover/directives/no_results.js
@@ -119,12 +119,12 @@ export class DiscoverNoResults extends Component {
           <EuiSpacer size="xl" />
 
           <EuiText>
-            <h3 data-test-subj="discoverNoResultsTimefilter">
+            <h2 data-test-subj="discoverNoResultsTimefilter">
               <FormattedMessage
                 id="kbn.discover.noResults.expandYourTimeRangeTitle"
                 defaultMessage="Expand your time range"
               />
-            </h3>
+            </h2>
 
             <p>
               <FormattedMessage
diff --git a/src/legacy/core_plugins/kibana/public/discover/index.html b/src/legacy/core_plugins/kibana/public/discover/index.html
index a9172a107e7ba5..45490ac7adc0f0 100644
--- a/src/legacy/core_plugins/kibana/public/discover/index.html
+++ b/src/legacy/core_plugins/kibana/public/discover/index.html
@@ -1,6 +1,7 @@
 <discover-app class="app-container">
-  <!-- Local nav. -->
+  <h1 class="euiScreenReaderOnly">{{screenTitle}}</h1>
 
+  <!-- Local nav. -->
   <kbn-top-nav
     app-name="'discover'"
     config="topNavMenu"
@@ -28,19 +29,20 @@
   <main class="container-fluid">
     <div class="row">
       <div class="col-md-2 sidebar-container collapsible-sidebar" id="discover-sidebar">
-        <disc-field-chooser
-          class="dscFieldChooser"
-          columns="state.columns"
-          hits="rows"
-          field-counts="fieldCounts"
-          index-pattern="searchSource.getField('index')"
-          index-pattern-list="opts.indexPatternList"
-          state="state"
-          on-add-field="addColumn"
-          on-add-filter="filterQuery"
-          on-remove-field="removeColumn"
-        >
-        </disc-field-chooser>
+        <div class="dscFieldChooser">
+          <disc-field-chooser
+            columns="state.columns"
+            hits="rows"
+            field-counts="fieldCounts"
+            index-pattern="searchSource.getField('index')"
+            index-pattern-list="opts.indexPatternList"
+            state="state"
+            on-add-field="addColumn"
+            on-add-filter="filterQuery"
+            on-remove-field="removeColumn"
+          >
+          </disc-field-chooser>
+        </div>
       </div>
 
       <div class="dscWrapper col-md-10">
@@ -175,8 +177,13 @@
             <section
               class="dscTable"
               fixed-scroll
-              aria-label="{{::'kbn.discover.documentsAriaLabel' | i18n: {defaultMessage: 'Documents'} }}"
+              aria-labelledby="documentsAriaLabel"
             >
+              <h2 class="euiScreenReaderOnly"
+                id="documentsAriaLabel"
+                i18n-id="kbn.discover.documentsAriaLabel"
+                i18n-default-message="Documents"
+              ></h2>
               <doc-table
                 hits="rows"
                 index-pattern="indexPattern"
diff --git a/src/legacy/core_plugins/kibana/public/discover/saved_searches/_saved_search.js b/src/legacy/core_plugins/kibana/public/discover/saved_searches/_saved_search.js
index ebf830dfae6426..eed6bcad0ec5d4 100644
--- a/src/legacy/core_plugins/kibana/public/discover/saved_searches/_saved_search.js
+++ b/src/legacy/core_plugins/kibana/public/discover/saved_searches/_saved_search.js
@@ -18,7 +18,6 @@
  */
 
 import 'ui/notify';
-import { i18n } from '@kbn/i18n';
 import { uiModules } from 'ui/modules';
 import { createLegacyClass } from 'ui/utils/legacy_class';
 import { SavedObjectProvider } from 'ui/saved_objects/saved_object';
@@ -38,9 +37,7 @@ module.factory('SavedSearch', function (Private) {
 
       id: id,
       defaults: {
-        title: i18n.translate('kbn.discover.savedSearch.newSavedSearchTitle', {
-          defaultMessage: 'New Saved Search',
-        }),
+        title: '',
         description: '',
         columns: [],
         hits: 0,
diff --git a/src/legacy/core_plugins/kibana/public/field_formats/__tests__/_conformance.js b/src/legacy/core_plugins/kibana/public/field_formats/__tests__/_conformance.js
index 42bfc3eb876fb8..bc27e1a0ac2a10 100644
--- a/src/legacy/core_plugins/kibana/public/field_formats/__tests__/_conformance.js
+++ b/src/legacy/core_plugins/kibana/public/field_formats/__tests__/_conformance.js
@@ -19,12 +19,11 @@
 
 import _ from 'lodash';
 import expect from '@kbn/expect';
-import chrome from 'ui/chrome';
 import { fieldFormats } from 'ui/registry/field_formats';
 import { FieldFormat } from '../../../../../../plugins/data/common/field_formats';
+import { npStart } from 'ui/new_platform';
 
-const config = chrome.getUiSettingsClient();
-
+const config = npStart.core.uiSettings;
 
 const formatIds = [
   'bytes',
diff --git a/src/legacy/core_plugins/kibana/public/home/index.js b/src/legacy/core_plugins/kibana/public/home/index.js
index b8e9bd3bddf842..8233df680edfdf 100644
--- a/src/legacy/core_plugins/kibana/public/home/index.js
+++ b/src/legacy/core_plugins/kibana/public/home/index.js
@@ -26,8 +26,8 @@ import { uiModules } from 'ui/modules';
 import {
   HomeApp
 } from './components/home_app';
-import { recentlyAccessed } from 'ui/persisted_log';
 import { i18n } from '@kbn/i18n';
+import { npStart } from 'ui/new_platform';
 
 const app = uiModules.get('apps/home', []);
 app.directive('homeApp', function (reactDirective) {
@@ -41,7 +41,7 @@ function getRoute() {
     template,
     controller($scope, Private) {
       $scope.directories = Private(FeatureCatalogueRegistryProvider).inTitleOrder;
-      $scope.recentlyAccessed = recentlyAccessed.get().map(item => {
+      $scope.recentlyAccessed = npStart.core.chrome.recentlyAccessed.get().map(item => {
         item.link = chrome.addBasePath(item.link);
         return item;
       });
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/settings/__snapshots__/advanced_settings.test.js.snap b/src/legacy/core_plugins/kibana/public/management/sections/settings/__snapshots__/advanced_settings.test.js.snap
index a3af9fcc884e5c..8c1db0c33e0b02 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/settings/__snapshots__/advanced_settings.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/management/sections/settings/__snapshots__/advanced_settings.test.js.snap
@@ -70,6 +70,7 @@ exports[`AdvancedSettings should render normally 1`] = `
             "readonly": false,
             "requiresPageReload": false,
             "type": "array",
+            "validation": undefined,
             "value": undefined,
           },
           Object {
@@ -88,6 +89,7 @@ exports[`AdvancedSettings should render normally 1`] = `
             "readonly": false,
             "requiresPageReload": false,
             "type": "boolean",
+            "validation": undefined,
             "value": undefined,
           },
         ],
@@ -108,6 +110,7 @@ exports[`AdvancedSettings should render normally 1`] = `
             "readonly": false,
             "requiresPageReload": false,
             "type": "string",
+            "validation": undefined,
             "value": undefined,
           },
           Object {
@@ -126,6 +129,7 @@ exports[`AdvancedSettings should render normally 1`] = `
             "readonly": false,
             "requiresPageReload": false,
             "type": "image",
+            "validation": undefined,
             "value": undefined,
           },
           Object {
@@ -146,6 +150,7 @@ exports[`AdvancedSettings should render normally 1`] = `
             "readonly": false,
             "requiresPageReload": false,
             "type": "json",
+            "validation": undefined,
             "value": undefined,
           },
           Object {
@@ -164,6 +169,7 @@ exports[`AdvancedSettings should render normally 1`] = `
             "readonly": false,
             "requiresPageReload": false,
             "type": "number",
+            "validation": undefined,
             "value": undefined,
           },
           Object {
@@ -186,6 +192,7 @@ exports[`AdvancedSettings should render normally 1`] = `
             "readonly": false,
             "requiresPageReload": false,
             "type": "select",
+            "validation": undefined,
             "value": undefined,
           },
           Object {
@@ -204,6 +211,7 @@ exports[`AdvancedSettings should render normally 1`] = `
             "readonly": false,
             "requiresPageReload": false,
             "type": "string",
+            "validation": undefined,
             "value": undefined,
           },
           Object {
@@ -222,6 +230,7 @@ exports[`AdvancedSettings should render normally 1`] = `
             "readonly": false,
             "requiresPageReload": false,
             "type": "json",
+            "validation": undefined,
             "value": undefined,
           },
           Object {
@@ -240,6 +249,7 @@ exports[`AdvancedSettings should render normally 1`] = `
             "readonly": false,
             "requiresPageReload": false,
             "type": "markdown",
+            "validation": undefined,
             "value": undefined,
           },
           Object {
@@ -258,6 +268,7 @@ exports[`AdvancedSettings should render normally 1`] = `
             "readonly": false,
             "requiresPageReload": false,
             "type": "number",
+            "validation": undefined,
             "value": undefined,
           },
           Object {
@@ -280,6 +291,7 @@ exports[`AdvancedSettings should render normally 1`] = `
             "readonly": false,
             "requiresPageReload": false,
             "type": "select",
+            "validation": undefined,
             "value": undefined,
           },
           Object {
@@ -298,6 +310,7 @@ exports[`AdvancedSettings should render normally 1`] = `
             "readonly": false,
             "requiresPageReload": false,
             "type": "string",
+            "validation": undefined,
             "value": undefined,
           },
         ],
@@ -342,6 +355,7 @@ exports[`AdvancedSettings should render normally 1`] = `
             "readonly": false,
             "requiresPageReload": false,
             "type": "array",
+            "validation": undefined,
             "value": undefined,
           },
           Object {
@@ -360,6 +374,7 @@ exports[`AdvancedSettings should render normally 1`] = `
             "readonly": false,
             "requiresPageReload": false,
             "type": "boolean",
+            "validation": undefined,
             "value": undefined,
           },
         ],
@@ -380,6 +395,7 @@ exports[`AdvancedSettings should render normally 1`] = `
             "readonly": false,
             "requiresPageReload": false,
             "type": "string",
+            "validation": undefined,
             "value": undefined,
           },
           Object {
@@ -398,6 +414,7 @@ exports[`AdvancedSettings should render normally 1`] = `
             "readonly": false,
             "requiresPageReload": false,
             "type": "image",
+            "validation": undefined,
             "value": undefined,
           },
           Object {
@@ -418,6 +435,7 @@ exports[`AdvancedSettings should render normally 1`] = `
             "readonly": false,
             "requiresPageReload": false,
             "type": "json",
+            "validation": undefined,
             "value": undefined,
           },
           Object {
@@ -436,6 +454,7 @@ exports[`AdvancedSettings should render normally 1`] = `
             "readonly": false,
             "requiresPageReload": false,
             "type": "number",
+            "validation": undefined,
             "value": undefined,
           },
           Object {
@@ -458,6 +477,7 @@ exports[`AdvancedSettings should render normally 1`] = `
             "readonly": false,
             "requiresPageReload": false,
             "type": "select",
+            "validation": undefined,
             "value": undefined,
           },
           Object {
@@ -476,6 +496,7 @@ exports[`AdvancedSettings should render normally 1`] = `
             "readonly": false,
             "requiresPageReload": false,
             "type": "string",
+            "validation": undefined,
             "value": undefined,
           },
           Object {
@@ -494,6 +515,7 @@ exports[`AdvancedSettings should render normally 1`] = `
             "readonly": false,
             "requiresPageReload": false,
             "type": "json",
+            "validation": undefined,
             "value": undefined,
           },
           Object {
@@ -512,6 +534,7 @@ exports[`AdvancedSettings should render normally 1`] = `
             "readonly": false,
             "requiresPageReload": false,
             "type": "markdown",
+            "validation": undefined,
             "value": undefined,
           },
           Object {
@@ -530,6 +553,7 @@ exports[`AdvancedSettings should render normally 1`] = `
             "readonly": false,
             "requiresPageReload": false,
             "type": "number",
+            "validation": undefined,
             "value": undefined,
           },
           Object {
@@ -552,6 +576,7 @@ exports[`AdvancedSettings should render normally 1`] = `
             "readonly": false,
             "requiresPageReload": false,
             "type": "select",
+            "validation": undefined,
             "value": undefined,
           },
           Object {
@@ -570,6 +595,7 @@ exports[`AdvancedSettings should render normally 1`] = `
             "readonly": false,
             "requiresPageReload": false,
             "type": "string",
+            "validation": undefined,
             "value": undefined,
           },
         ],
@@ -689,6 +715,7 @@ exports[`AdvancedSettings should render read-only when saving is disabled 1`] =
             "readonly": false,
             "requiresPageReload": false,
             "type": "string",
+            "validation": undefined,
             "value": undefined,
           },
         ],
@@ -731,6 +758,7 @@ exports[`AdvancedSettings should render read-only when saving is disabled 1`] =
             "readonly": false,
             "requiresPageReload": false,
             "type": "string",
+            "validation": undefined,
             "value": undefined,
           },
         ],
@@ -868,6 +896,7 @@ exports[`AdvancedSettings should render specific setting if given setting key 1`
             "readonly": false,
             "requiresPageReload": false,
             "type": "string",
+            "validation": undefined,
             "value": undefined,
           },
         ],
@@ -910,6 +939,7 @@ exports[`AdvancedSettings should render specific setting if given setting key 1`
             "readonly": false,
             "requiresPageReload": false,
             "type": "string",
+            "validation": undefined,
             "value": undefined,
           },
         ],
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/__snapshots__/field.test.js.snap b/src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/__snapshots__/field.test.js.snap
index 1a5039bbb96f84..eb8454f64e7ba7 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/__snapshots__/field.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/__snapshots__/field.test.js.snap
@@ -3707,3 +3707,422 @@ exports[`Field for string setting should render user value if there is user valu
   />
 </EuiFlexGroup>
 `;
+
+exports[`Field for stringWithValidation setting should render as read only if saving is disabled 1`] = `
+<EuiFlexGroup
+  className="mgtAdvancedSettings__field"
+>
+  <EuiFlexItem
+    grow={false}
+  >
+    <EuiDescribedFormGroup
+      className="mgtAdvancedSettings__fieldWrapper"
+      description={
+        <React.Fragment>
+          <div
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "Description for String test validation setting",
+              }
+            }
+          />
+        </React.Fragment>
+      }
+      fullWidth={false}
+      gutterSize="l"
+      idAria="string:test-validation:setting-aria"
+      title={
+        <h3>
+          String test validation setting
+          
+        </h3>
+      }
+      titleSize="xs"
+    >
+      <EuiFormRow
+        className="mgtAdvancedSettings__fieldRow"
+        describedByIds={
+          Array [
+            "string:test-validation:setting-aria",
+          ]
+        }
+        display="row"
+        error={null}
+        fullWidth={false}
+        hasEmptyLabelSpace={false}
+        helpText={null}
+        isInvalid={false}
+        label="string:test-validation:setting"
+        labelType="label"
+      >
+        <EuiFieldText
+          aria-label="string test validation setting"
+          compressed={false}
+          data-test-subj="advancedSetting-editField-string:test-validation:setting"
+          disabled={true}
+          fullWidth={false}
+          isLoading={false}
+          onChange={[Function]}
+          onKeyDown={[Function]}
+          value="foo-default"
+        />
+      </EuiFormRow>
+    </EuiDescribedFormGroup>
+  </EuiFlexItem>
+  <EuiFlexItem
+    grow={false}
+  />
+</EuiFlexGroup>
+`;
+
+exports[`Field for stringWithValidation setting should render as read only with help text if overridden 1`] = `
+<EuiFlexGroup
+  className="mgtAdvancedSettings__field"
+>
+  <EuiFlexItem
+    grow={false}
+  >
+    <EuiDescribedFormGroup
+      className="mgtAdvancedSettings__fieldWrapper"
+      description={
+        <React.Fragment>
+          <div
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "Description for String test validation setting",
+              }
+            }
+          />
+          <React.Fragment>
+            <EuiSpacer
+              size="s"
+            />
+            <EuiText
+              size="xs"
+            >
+              <React.Fragment>
+                <FormattedMessage
+                  defaultMessage="Default: {value}"
+                  id="kbn.management.settings.field.defaultValueText"
+                  values={
+                    Object {
+                      "value": <EuiCode>
+                        foo-default
+                      </EuiCode>,
+                    }
+                  }
+                />
+              </React.Fragment>
+            </EuiText>
+          </React.Fragment>
+        </React.Fragment>
+      }
+      fullWidth={false}
+      gutterSize="l"
+      idAria="string:test-validation:setting-aria"
+      title={
+        <h3>
+          String test validation setting
+          
+        </h3>
+      }
+      titleSize="xs"
+    >
+      <EuiFormRow
+        className="mgtAdvancedSettings__fieldRow"
+        describedByIds={
+          Array [
+            "string:test-validation:setting-aria",
+          ]
+        }
+        display="row"
+        error={null}
+        fullWidth={false}
+        hasEmptyLabelSpace={false}
+        helpText={
+          <EuiText
+            size="xs"
+          >
+            <FormattedMessage
+              defaultMessage="This setting is overridden by the Kibana server and can not be changed."
+              id="kbn.management.settings.field.helpText"
+              values={Object {}}
+            />
+          </EuiText>
+        }
+        isInvalid={false}
+        label="string:test-validation:setting"
+        labelType="label"
+      >
+        <EuiFieldText
+          aria-label="string test validation setting"
+          compressed={false}
+          data-test-subj="advancedSetting-editField-string:test-validation:setting"
+          disabled={true}
+          fullWidth={false}
+          isLoading={false}
+          onChange={[Function]}
+          onKeyDown={[Function]}
+          value="fooUserValue"
+        />
+      </EuiFormRow>
+    </EuiDescribedFormGroup>
+  </EuiFlexItem>
+  <EuiFlexItem
+    grow={false}
+  />
+</EuiFlexGroup>
+`;
+
+exports[`Field for stringWithValidation setting should render custom setting icon if it is custom 1`] = `
+<EuiFlexGroup
+  className="mgtAdvancedSettings__field"
+>
+  <EuiFlexItem
+    grow={false}
+  >
+    <EuiDescribedFormGroup
+      className="mgtAdvancedSettings__fieldWrapper"
+      description={
+        <React.Fragment>
+          <div
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "Description for String test validation setting",
+              }
+            }
+          />
+        </React.Fragment>
+      }
+      fullWidth={false}
+      gutterSize="l"
+      idAria="string:test-validation:setting-aria"
+      title={
+        <h3>
+          String test validation setting
+          <EuiIconTip
+            aria-label="Custom setting"
+            color="primary"
+            content={
+              <FormattedMessage
+                defaultMessage="Custom setting"
+                id="kbn.management.settings.field.customSettingTooltip"
+                values={Object {}}
+              />
+            }
+            type="asterisk"
+          />
+        </h3>
+      }
+      titleSize="xs"
+    >
+      <EuiFormRow
+        className="mgtAdvancedSettings__fieldRow"
+        describedByIds={
+          Array [
+            "string:test-validation:setting-aria",
+          ]
+        }
+        display="row"
+        error={null}
+        fullWidth={false}
+        hasEmptyLabelSpace={false}
+        helpText={null}
+        isInvalid={false}
+        label="string:test-validation:setting"
+        labelType="label"
+      >
+        <EuiFieldText
+          aria-label="string test validation setting"
+          compressed={false}
+          data-test-subj="advancedSetting-editField-string:test-validation:setting"
+          disabled={false}
+          fullWidth={false}
+          isLoading={false}
+          onChange={[Function]}
+          onKeyDown={[Function]}
+          value="foo-default"
+        />
+      </EuiFormRow>
+    </EuiDescribedFormGroup>
+  </EuiFlexItem>
+  <EuiFlexItem
+    grow={false}
+  />
+</EuiFlexGroup>
+`;
+
+exports[`Field for stringWithValidation setting should render default value if there is no user value set 1`] = `
+<EuiFlexGroup
+  className="mgtAdvancedSettings__field"
+>
+  <EuiFlexItem
+    grow={false}
+  >
+    <EuiDescribedFormGroup
+      className="mgtAdvancedSettings__fieldWrapper"
+      description={
+        <React.Fragment>
+          <div
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "Description for String test validation setting",
+              }
+            }
+          />
+        </React.Fragment>
+      }
+      fullWidth={false}
+      gutterSize="l"
+      idAria="string:test-validation:setting-aria"
+      title={
+        <h3>
+          String test validation setting
+          
+        </h3>
+      }
+      titleSize="xs"
+    >
+      <EuiFormRow
+        className="mgtAdvancedSettings__fieldRow"
+        describedByIds={
+          Array [
+            "string:test-validation:setting-aria",
+          ]
+        }
+        display="row"
+        error={null}
+        fullWidth={false}
+        hasEmptyLabelSpace={false}
+        helpText={null}
+        isInvalid={false}
+        label="string:test-validation:setting"
+        labelType="label"
+      >
+        <EuiFieldText
+          aria-label="string test validation setting"
+          compressed={false}
+          data-test-subj="advancedSetting-editField-string:test-validation:setting"
+          disabled={false}
+          fullWidth={false}
+          isLoading={false}
+          onChange={[Function]}
+          onKeyDown={[Function]}
+          value="foo-default"
+        />
+      </EuiFormRow>
+    </EuiDescribedFormGroup>
+  </EuiFlexItem>
+  <EuiFlexItem
+    grow={false}
+  />
+</EuiFlexGroup>
+`;
+
+exports[`Field for stringWithValidation setting should render user value if there is user value is set 1`] = `
+<EuiFlexGroup
+  className="mgtAdvancedSettings__field"
+>
+  <EuiFlexItem
+    grow={false}
+  >
+    <EuiDescribedFormGroup
+      className="mgtAdvancedSettings__fieldWrapper"
+      description={
+        <React.Fragment>
+          <div
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "Description for String test validation setting",
+              }
+            }
+          />
+          <React.Fragment>
+            <EuiSpacer
+              size="s"
+            />
+            <EuiText
+              size="xs"
+            >
+              <React.Fragment>
+                <FormattedMessage
+                  defaultMessage="Default: {value}"
+                  id="kbn.management.settings.field.defaultValueText"
+                  values={
+                    Object {
+                      "value": <EuiCode>
+                        foo-default
+                      </EuiCode>,
+                    }
+                  }
+                />
+              </React.Fragment>
+            </EuiText>
+          </React.Fragment>
+        </React.Fragment>
+      }
+      fullWidth={false}
+      gutterSize="l"
+      idAria="string:test-validation:setting-aria"
+      title={
+        <h3>
+          String test validation setting
+          
+        </h3>
+      }
+      titleSize="xs"
+    >
+      <EuiFormRow
+        className="mgtAdvancedSettings__fieldRow"
+        describedByIds={
+          Array [
+            "string:test-validation:setting-aria",
+          ]
+        }
+        display="row"
+        error={null}
+        fullWidth={false}
+        hasEmptyLabelSpace={false}
+        helpText={
+          <span>
+            <span>
+              <EuiLink
+                aria-label="Reset string test validation setting to default"
+                color="primary"
+                data-test-subj="advancedSetting-resetField-string:test-validation:setting"
+                onClick={[Function]}
+                type="button"
+              >
+                <FormattedMessage
+                  defaultMessage="Reset to default"
+                  id="kbn.management.settings.field.resetToDefaultLinkText"
+                  values={Object {}}
+                />
+              </EuiLink>
+                 
+            </span>
+          </span>
+        }
+        isInvalid={false}
+        label="string:test-validation:setting"
+        labelType="label"
+      >
+        <EuiFieldText
+          aria-label="string test validation setting"
+          compressed={false}
+          data-test-subj="advancedSetting-editField-string:test-validation:setting"
+          disabled={false}
+          fullWidth={false}
+          isLoading={false}
+          onChange={[Function]}
+          onKeyDown={[Function]}
+          value="fooUserValue"
+        />
+      </EuiFormRow>
+    </EuiDescribedFormGroup>
+  </EuiFlexItem>
+  <EuiFlexItem
+    grow={false}
+  />
+</EuiFlexGroup>
+`;
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/field.js b/src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/field.js
index f431a862fb4c8b..c0b1188950126c 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/field.js
+++ b/src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/field.js
@@ -166,7 +166,7 @@ class FieldUI extends PureComponent {
 
   onFieldChange = (e) => {
     const value = e.target.value;
-    const { type } = this.props.setting;
+    const { type, validation } = this.props.setting;
     const { unsavedValue } = this.state;
 
     let newUnsavedValue = undefined;
@@ -181,8 +181,21 @@ class FieldUI extends PureComponent {
       default:
         newUnsavedValue = value;
     }
+
+    let isInvalid = false;
+    let error = undefined;
+
+    if (validation && validation.regex) {
+      if (!validation.regex.test(newUnsavedValue)) {
+        error = validation.message;
+        isInvalid = true;
+      }
+    }
+
     this.setState({
       unsavedValue: newUnsavedValue,
+      isInvalid,
+      error
     });
   }
 
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/field.test.js b/src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/field.test.js
index 81cda09eaf0da5..0a2886d0d0287e 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/field.test.js
+++ b/src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/field.test.js
@@ -143,6 +143,22 @@ const settings = {
     isOverridden: false,
     options: null,
   },
+  stringWithValidation: {
+    name: 'string:test-validation:setting',
+    ariaName: 'string test validation setting',
+    displayName: 'String test validation setting',
+    description: 'Description for String test validation setting',
+    type: 'string',
+    validation: {
+      regex: new RegExp('/^foo'),
+      message: 'must start with "foo"'
+    },
+    value: undefined,
+    defVal: 'foo-default',
+    isCustom: false,
+    isOverridden: false,
+    options: null,
+  }
 };
 const userValues = {
   array: ['user', 'value'],
@@ -153,6 +169,10 @@ const userValues = {
   number: 10,
   select: 'banana',
   string: 'foo',
+  stringWithValidation: 'fooUserValue'
+};
+const invalidUserValues = {
+  stringWithValidation: 'invalidUserValue'
 };
 const save = jest.fn(() => Promise.resolve());
 const clear = jest.fn(() => Promise.resolve());
@@ -392,6 +412,16 @@ describe('Field', () => {
         const userValue = userValues[type];
         const fieldUserValue = type === 'array' ? userValue.join(', ') : userValue;
 
+        if (setting.validation) {
+          const invalidUserValue = invalidUserValues[type];
+          it('should display an error when validation fails', async () => {
+            component.instance().onFieldChange({ target: { value: invalidUserValue } });
+            component.update();
+            const errorMessage = component.find('.euiFormErrorText').text();
+            expect(errorMessage).toEqual(setting.validation.message);
+          });
+        }
+
         it('should be able to change value and cancel', async () => {
           component.instance().onFieldChange({ target: { value: fieldUserValue } });
           component.update();
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/settings/lib/__tests__/to_editable_config.test.js b/src/legacy/core_plugins/kibana/public/management/sections/settings/lib/__tests__/to_editable_config.test.js
index ad1ba30ece4b19..555aab8c2b5ffa 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/settings/lib/__tests__/to_editable_config.test.js
+++ b/src/legacy/core_plugins/kibana/public/management/sections/settings/lib/__tests__/to_editable_config.test.js
@@ -43,7 +43,7 @@ describe('Settings', function () {
           def = {
             value: 'the original',
             description: 'the one and only',
-            options: 'all the options'
+            options: 'all the options',
           };
         });
 
@@ -76,6 +76,18 @@ describe('Settings', function () {
             expect(invoke({ def }).type).to.equal('array');
           });
         });
+
+        describe('that contains a validation object', function () {
+          it('constructs a validation regex with message', function () {
+            def.validation = {
+              regexString: '^foo',
+              message: 'must start with "foo"'
+            };
+            const result = invoke({ def });
+            expect(result.validation.regex).to.be.a(RegExp);
+            expect(result.validation.message).to.equal('must start with "foo"');
+          });
+        });
       });
 
       describe('when not given a setting definition object', function () {
@@ -94,6 +106,10 @@ describe('Settings', function () {
         it('sets options to undefined', function () {
           expect(invoke().options).to.be.undefined;
         });
+
+        it('sets validation to undefined', function () {
+          expect(invoke().validation).to.be.undefined;
+        });
       });
     });
   });
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/settings/lib/to_editable_config.js b/src/legacy/core_plugins/kibana/public/management/sections/settings/lib/to_editable_config.js
index b557c880c496b5..4c3b87e5120920 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/settings/lib/to_editable_config.js
+++ b/src/legacy/core_plugins/kibana/public/management/sections/settings/lib/to_editable_config.js
@@ -43,6 +43,10 @@ export function toEditableConfig({ def, name, value, isCustom, isOverridden }) {
     defVal: def.value,
     type: getValType(def, value),
     description: def.description,
+    validation: def.validation ? {
+      regex: new RegExp(def.validation.regexString),
+      message: def.validation.message
+    } : undefined,
     options: def.options,
     optionLabels: def.optionLabels,
     requiresPageReload: !!def.requiresPageReload,
diff --git a/src/legacy/core_plugins/kibana/public/visualize/editor/editor.html b/src/legacy/core_plugins/kibana/public/visualize/editor/editor.html
index 8513deee800e39..aa59b2d0a81c42 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/editor/editor.html
+++ b/src/legacy/core_plugins/kibana/public/visualize/editor/editor.html
@@ -91,6 +91,16 @@
 
   <div class="visualize" ng-if="!chrome.getVisible()"/>
 
+  <h1
+    class="euiScreenReaderOnly"
+    i18n-id="kbn.visualize.pageHeading"
+    i18n-default-message="{chartName} {chartType} visualization"
+    i18n-values="{
+      chartName: savedVis.title,
+      chartType: vis.type.title
+    }"
+  >
+  </h1>
   <visualization-editor
     ng-if="chrome.getVisible()"
     saved-obj="savedVis"
diff --git a/src/legacy/core_plugins/kibana/public/visualize/editor/editor.js b/src/legacy/core_plugins/kibana/public/visualize/editor/editor.js
index a96848a853aeb6..ddd87542e4bdef 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/editor/editor.js
+++ b/src/legacy/core_plugins/kibana/public/visualize/editor/editor.js
@@ -45,7 +45,6 @@ import { KibanaParsedUrl } from 'ui/url/kibana_parsed_url';
 import { absoluteToParsedUrl } from 'ui/url/absolute_to_parsed_url';
 import { migrateLegacyQuery } from 'ui/utils/migrate_legacy_query';
 import { subscribeWithScope } from 'ui/utils/subscribe_with_scope';
-import { recentlyAccessed } from 'ui/persisted_log';
 import { timefilter } from 'ui/timefilter';
 import { getVisualizeLoader } from '../../../../../ui/public/visualize/loader';
 import { showShareContextMenu, ShareContextMenuExtensionsRegistryProvider } from 'ui/share';
@@ -55,7 +54,7 @@ import { SavedObjectSaveModal } from 'ui/saved_objects/components/saved_object_s
 import { getEditBreadcrumbs, getCreateBreadcrumbs } from '../breadcrumbs';
 import { npStart } from 'ui/new_platform';
 import { setup as data } from '../../../../../core_plugins/data/public/legacy';
-import { start as visualizations } from '../../../../visualizations/public/legacy';
+import { start as visualizations } from '../../../../visualizations/public/np_ready/public/legacy';
 
 import { addHelpMenuToAppChrome } from '../help_menu/help_menu_util';
 
@@ -100,7 +99,7 @@ uiRoutes
       savedVis: function (savedVisualizations, redirectWhenMissing, $route) {
         return savedVisualizations.get($route.current.params.id)
           .then((savedVis) => {
-            recentlyAccessed.add(
+            npStart.core.chrome.recentlyAccessed.add(
               savedVis.getFullPath(),
               savedVis.title,
               savedVis.id);
diff --git a/src/legacy/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable_factory.tsx b/src/legacy/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable_factory.tsx
index 52dcaaa05b94d0..3b49287cced814 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable_factory.tsx
+++ b/src/legacy/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable_factory.tsx
@@ -52,14 +52,14 @@ import {
   Container,
   EmbeddableOutput,
 } from '../../../../../../plugins/embeddable/public';
-import { start as visualizations } from '../../../../visualizations/public/legacy';
+import { start as visualizations } from '../../../../visualizations/public/np_ready/public/legacy';
 import { showNewVisModal } from '../wizard';
 import { SavedVisualizations } from '../types';
 import { DisabledLabEmbeddable } from './disabled_lab_embeddable';
 import { getIndexPattern } from './get_index_pattern';
 import { VisualizeEmbeddable, VisualizeInput, VisualizeOutput } from './visualize_embeddable';
 import { VISUALIZE_EMBEDDABLE_TYPE } from './constants';
-import { TypesStart } from '../../../../visualizations/public/np_ready/types';
+import { TypesStart } from '../../../../visualizations/public/np_ready/public/types';
 
 interface VisualizationAttributes extends SavedObjectAttributes {
   visState: string;
diff --git a/src/legacy/core_plugins/kibana/public/visualize/listing/visualize_listing.js b/src/legacy/core_plugins/kibana/public/visualize/listing/visualize_listing.js
index 2c95f9c16969e1..bb05ce34413db1 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/listing/visualize_listing.js
+++ b/src/legacy/core_plugins/kibana/public/visualize/listing/visualize_listing.js
@@ -29,7 +29,7 @@ import { SavedObjectsClientProvider } from 'ui/saved_objects';
 import { VisualizeListingTable } from './visualize_listing_table';
 import { NewVisModal } from '../wizard/new_vis_modal';
 import { VisualizeConstants } from '../visualize_constants';
-import { start as visualizations } from '../../../../visualizations/public/legacy';
+import { start as visualizations } from '../../../../visualizations/public/np_ready/public/legacy';
 import { i18n } from '@kbn/i18n';
 
 const app = uiModules.get('app/visualize', ['ngRoute', 'react']);
diff --git a/src/legacy/core_plugins/kibana/public/visualize/saved_visualizations/_saved_vis.js b/src/legacy/core_plugins/kibana/public/visualize/saved_visualizations/_saved_vis.js
index fd13e458caeaae..f8adaed0bf584a 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/saved_visualizations/_saved_vis.js
+++ b/src/legacy/core_plugins/kibana/public/visualize/saved_visualizations/_saved_vis.js
@@ -26,7 +26,6 @@
  */
 
 import { VisProvider } from 'ui/vis';
-import { i18n } from '@kbn/i18n';
 import { uiModules } from 'ui/modules';
 import { updateOldState } from 'ui/vis/vis_update_state';
 import { VisualizeConstants } from '../visualize_constants';
@@ -58,9 +57,7 @@ uiModules
         id: opts.id,
         indexPattern: opts.indexPattern,
         defaults: {
-          title: i18n.translate('kbn.visualize.defaultVisualizationTitle', {
-            defaultMessage: 'New Visualization',
-          }),
+          title: '',
           visState: (function () {
             if (!opts.type) return null;
             const def = {};
diff --git a/src/legacy/core_plugins/kibana/public/visualize/saved_visualizations/saved_visualizations.js b/src/legacy/core_plugins/kibana/public/visualize/saved_visualizations/saved_visualizations.js
index cc48cbe2cb1b97..2d51fc1fa5e36b 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/saved_visualizations/saved_visualizations.js
+++ b/src/legacy/core_plugins/kibana/public/visualize/saved_visualizations/saved_visualizations.js
@@ -21,7 +21,7 @@ import './_saved_vis';
 import { uiModules } from 'ui/modules';
 import { SavedObjectLoader, SavedObjectsClientProvider } from 'ui/saved_objects';
 import { savedObjectManagementRegistry } from '../../management/saved_object_registry';
-import { start as visualizations } from '../../../../visualizations/public/legacy';
+import { start as visualizations } from '../../../../visualizations/public/np_ready/public/legacy';
 import { createVisualizeEditUrl } from '../visualize_constants';
 import { findListItems } from './find_list_items';
 
diff --git a/src/legacy/core_plugins/kibana/public/visualize/wizard/new_vis_modal.test.tsx b/src/legacy/core_plugins/kibana/public/visualize/wizard/new_vis_modal.test.tsx
index 00c60c77182623..6b2f51c3dcf2b1 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/wizard/new_vis_modal.test.tsx
+++ b/src/legacy/core_plugins/kibana/public/visualize/wizard/new_vis_modal.test.tsx
@@ -25,7 +25,7 @@ import { settingsGet } from './new_vis_modal.test.mocks';
 import { NewVisModal } from './new_vis_modal';
 
 import { VisType } from 'ui/vis';
-import { TypesStart } from '../../../../visualizations/public/np_ready/types';
+import { TypesStart } from '../../../../visualizations/public/np_ready/public/types';
 
 describe('NewVisModal', () => {
   const defaultVisTypeParams = {
diff --git a/src/legacy/core_plugins/kibana/public/visualize/wizard/new_vis_modal.tsx b/src/legacy/core_plugins/kibana/public/visualize/wizard/new_vis_modal.tsx
index 1279157f6a9744..506f4f56d703b5 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/wizard/new_vis_modal.tsx
+++ b/src/legacy/core_plugins/kibana/public/visualize/wizard/new_vis_modal.tsx
@@ -28,7 +28,7 @@ import { VisualizeConstants } from '../visualize_constants';
 
 import { SearchSelection } from './search_selection';
 import { TypeSelection } from './type_selection';
-import { TypesStart } from '../../../../visualizations/public/np_ready/types';
+import { TypesStart } from '../../../../visualizations/public/np_ready/public/types';
 
 interface TypeSelectionProps {
   isOpen: boolean;
diff --git a/src/legacy/core_plugins/kibana/public/visualize/wizard/show_new_vis.tsx b/src/legacy/core_plugins/kibana/public/visualize/wizard/show_new_vis.tsx
index 2e43d3f78631c3..fa2ca6747bc408 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/wizard/show_new_vis.tsx
+++ b/src/legacy/core_plugins/kibana/public/visualize/wizard/show_new_vis.tsx
@@ -22,7 +22,7 @@ import ReactDOM from 'react-dom';
 
 import { I18nContext } from 'ui/i18n';
 import { NewVisModal } from './new_vis_modal';
-import { TypesStart } from '../../../../visualizations/public/np_ready/types';
+import { TypesStart } from '../../../../visualizations/public/np_ready/public/types';
 
 interface ShowNewVisModalParams {
   editorParams?: string[];
diff --git a/src/legacy/core_plugins/kibana/public/visualize/wizard/type_selection/type_selection.tsx b/src/legacy/core_plugins/kibana/public/visualize/wizard/type_selection/type_selection.tsx
index a4a37e6143f627..04d5456dbf80d9 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/wizard/type_selection/type_selection.tsx
+++ b/src/legacy/core_plugins/kibana/public/visualize/wizard/type_selection/type_selection.tsx
@@ -41,7 +41,7 @@ import { VisTypeAlias } from '../../../../../visualizations/public';
 import { NewVisHelp } from './new_vis_help';
 import { VisHelpText } from './vis_help_text';
 import { VisTypeIcon } from './vis_type_icon';
-import { TypesStart } from '../../../../../visualizations/public/np_ready/types';
+import { TypesStart } from '../../../../../visualizations/public/np_ready/public/types';
 
 interface VisTypeListEntry extends VisType {
   highlighted: boolean;
diff --git a/src/legacy/core_plugins/kibana/ui_setting_defaults.js b/src/legacy/core_plugins/kibana/ui_setting_defaults.js
index 8592242e7ff20c..7a152526339560 100644
--- a/src/legacy/core_plugins/kibana/ui_setting_defaults.js
+++ b/src/legacy/core_plugins/kibana/ui_setting_defaults.js
@@ -55,6 +55,24 @@ export function getUiSettingDefaults() {
     'buildNum': {
       readonly: true
     },
+    'defaultRoute': {
+      name: i18n.translate('kbn.advancedSettings.defaultRoute.defaultRouteTitle', {
+        defaultMessage: 'Default route',
+      }),
+      value: '/app/kibana',
+      validation: {
+        regexString: '^\/',
+        message: i18n.translate('kbn.advancedSettings.defaultRoute.defaultRouteValidationMessage', {
+          defaultMessage: 'The route must start with a slash ("/")',
+        }),
+      },
+      description:
+        i18n.translate('kbn.advancedSettings.defaultRoute.defaultRouteText', {
+          defaultMessage: 'This setting specifies the default route when opening Kibana. ' +
+          'You can use this setting to modify the landing page when opening Kibana. ' +
+          'The route must start with a slash ("/").',
+        }),
+    },
     'query:queryString:options': {
       name: i18n.translate('kbn.advancedSettings.query.queryStringOptionsTitle', {
         defaultMessage: 'Query string options',
@@ -811,7 +829,7 @@ export function getUiSettingDefaults() {
     },
     'timepicker:timeDefaults': {
       name: i18n.translate('kbn.advancedSettings.timepicker.timeDefaultsTitle', {
-        defaultMessage: 'Time picker defaults',
+        defaultMessage: 'Time filter defaults',
       }),
       value:
 `{
@@ -826,7 +844,7 @@ export function getUiSettingDefaults() {
     },
     'timepicker:refreshIntervalDefaults': {
       name: i18n.translate('kbn.advancedSettings.timepicker.refreshIntervalDefaultsTitle', {
-        defaultMessage: 'Time picker refresh interval',
+        defaultMessage: 'Time filter refresh interval',
       }),
       value:
 `{
@@ -841,7 +859,7 @@ export function getUiSettingDefaults() {
     },
     'timepicker:quickRanges': {
       name: i18n.translate('kbn.advancedSettings.timepicker.quickRangesTitle', {
-        defaultMessage: 'Time picker quick ranges',
+        defaultMessage: 'Time filter quick ranges',
       }),
       value: JSON.stringify([
         {
@@ -897,7 +915,7 @@ export function getUiSettingDefaults() {
       type: 'json',
       description: i18n.translate('kbn.advancedSettings.timepicker.quickRangesText', {
         defaultMessage:
-          'The list of ranges to show in the Quick section of the time picker. This should be an array of objects, ' +
+          'The list of ranges to show in the Quick section of the time filter. This should be an array of objects, ' +
           'with each object containing "from", "to" (see {acceptedFormatsLink}), and ' +
           '"display" (the title to be displayed).',
         description:
diff --git a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.test.tsx b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.test.tsx
index 39bf299cd8d125..21c5cef4ae9254 100644
--- a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.test.tsx
+++ b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.test.tsx
@@ -22,12 +22,20 @@ import { TopNavMenu } from './top_nav_menu';
 import { TopNavMenuData } from './top_nav_menu_data';
 import { shallowWithIntl } from 'test_utils/enzyme_helpers';
 
-import { coreMock } from '../../../../../core/public/mocks';
-const startMock = coreMock.createStart();
-
 import { timefilterServiceMock } from '../../../../core_plugins/data/public/timefilter/timefilter_service.mock';
 const timefilterSetupMock = timefilterServiceMock.createSetupContract();
 
+jest.mock('ui/new_platform');
+
+jest.mock('../../../../../../src/legacy/core_plugins/data/public/legacy', () => ({
+  start: {
+    ui: {
+      SearchBar: () => {},
+    },
+  },
+  setup: {},
+}));
+
 jest.mock('../../../../core_plugins/data/public', () => {
   return {
     SearchBar: () => <div className="searchBar"></div>,
@@ -57,34 +65,26 @@ describe('TopNavMenu', () => {
   ];
 
   it('Should render nothing when no config is provided', () => {
-    const component = shallowWithIntl(<TopNavMenu name={'test'} />);
+    const component = shallowWithIntl(<TopNavMenu appName={'test'} />);
     expect(component.find(TOP_NAV_ITEM_SELECTOR).length).toBe(0);
     expect(component.find(SEARCH_BAR_SELECTOR).length).toBe(0);
   });
 
   it('Should render 1 menu item', () => {
-    const component = shallowWithIntl(<TopNavMenu name={'test'} config={[menuItems[0]]} />);
+    const component = shallowWithIntl(<TopNavMenu appName={'test'} config={[menuItems[0]]} />);
     expect(component.find(TOP_NAV_ITEM_SELECTOR).length).toBe(1);
     expect(component.find(SEARCH_BAR_SELECTOR).length).toBe(0);
   });
 
   it('Should render multiple menu items', () => {
-    const component = shallowWithIntl(<TopNavMenu name={'test'} config={menuItems} />);
+    const component = shallowWithIntl(<TopNavMenu appName={'test'} config={menuItems} />);
     expect(component.find(TOP_NAV_ITEM_SELECTOR).length).toBe(menuItems.length);
     expect(component.find(SEARCH_BAR_SELECTOR).length).toBe(0);
   });
 
   it('Should render search bar', () => {
     const component = shallowWithIntl(
-      <TopNavMenu
-        name={'test'}
-        showSearchBar={true}
-        savedObjects={startMock.savedObjects}
-        notifications={startMock.notifications}
-        uiSettings={startMock.uiSettings}
-        http={startMock.http}
-        timeHistory={timefilterSetupMock.history}
-      />
+      <TopNavMenu appName={'test'} showSearchBar={true} timeHistory={timefilterSetupMock.history} />
     );
 
     expect(component.find(TOP_NAV_ITEM_SELECTOR).length).toBe(0);
diff --git a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx
index c99c71f97e1afe..aec91c2aa6bc64 100644
--- a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx
+++ b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx
@@ -21,27 +21,16 @@ import React from 'react';
 
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { I18nProvider } from '@kbn/i18n/react';
-import { UiSettingsClientContract, CoreStart } from 'src/core/public';
+
 import { TopNavMenuData } from './top_nav_menu_data';
 import { TopNavMenuItem } from './top_nav_menu_item';
-import { KibanaContextProvider } from '../../../../../plugins/kibana_react/public';
-import {
-  SearchBar,
-  SearchBarProps,
-  TimeHistoryContract,
-} from '../../../../core_plugins/data/public';
+import { SearchBarProps } from '../../../../core_plugins/data/public';
+import { start as data } from '../../../data/public/legacy';
 
 type Props = Partial<SearchBarProps> & {
-  name: string;
+  appName: string;
   config?: TopNavMenuData[];
   showSearchBar?: boolean;
-
-  // Search Bar dependencies
-  uiSettings?: UiSettingsClientContract;
-  savedObjects?: CoreStart['savedObjects'];
-  notifications?: CoreStart['notifications'];
-  timeHistory?: TimeHistoryContract;
-  http?: CoreStart['http'];
 };
 
 /*
@@ -54,9 +43,11 @@ type Props = Partial<SearchBarProps> & {
  **/
 
 export function TopNavMenu(props: Props) {
+  const { SearchBar } = data.ui;
+  const { config, showSearchBar, ...searchBarProps } = props;
   function renderItems() {
-    if (!props.config) return;
-    return props.config.map((menuItem: TopNavMenuData, i: number) => {
+    if (!config) return;
+    return config.map((menuItem: TopNavMenuData, i: number) => {
       return (
         <EuiFlexItem grow={false} key={`nav-menu-${i}`}>
           <TopNavMenuItem {...menuItem} />
@@ -67,53 +58,8 @@ export function TopNavMenu(props: Props) {
 
   function renderSearchBar() {
     // Validate presense of all required fields
-    if (
-      !props.showSearchBar ||
-      !props.savedObjects ||
-      !props.http ||
-      !props.notifications ||
-      !props.timeHistory
-    )
-      return;
-    return (
-      <KibanaContextProvider
-        services={{
-          uiSettings: props.uiSettings,
-          http: props.http,
-          notifications: props.notifications,
-          savedObjects: props.savedObjects,
-        }}
-      >
-        <SearchBar
-          notifications={props.notifications}
-          savedObjects={props.savedObjects}
-          timeHistory={props.timeHistory}
-          query={props.query}
-          filters={props.filters}
-          showQueryBar={props.showQueryBar}
-          showQueryInput={props.showQueryInput}
-          showFilterBar={props.showFilterBar}
-          showDatePicker={props.showDatePicker}
-          appName={props.appName!}
-          screenTitle={props.screenTitle!}
-          onQuerySubmit={props.onQuerySubmit}
-          onFiltersUpdated={props.onFiltersUpdated}
-          dateRangeFrom={props.dateRangeFrom}
-          dateRangeTo={props.dateRangeTo}
-          isRefreshPaused={props.isRefreshPaused}
-          showAutoRefreshOnly={props.showAutoRefreshOnly}
-          onRefreshChange={props.onRefreshChange}
-          refreshInterval={props.refreshInterval}
-          indexPatterns={props.indexPatterns}
-          store={props.store}
-          savedQuery={props.savedQuery}
-          showSaveQuery={props.showSaveQuery}
-          onClearSavedQuery={props.onClearSavedQuery}
-          onSaved={props.onSaved}
-          onSavedQueryUpdated={props.onSavedQueryUpdated}
-        />
-      </KibanaContextProvider>
-    );
+    if (!showSearchBar) return;
+    return <SearchBar {...searchBarProps} />;
   }
 
   function renderLayout() {
diff --git a/src/legacy/core_plugins/region_map/index.ts b/src/legacy/core_plugins/region_map/index.ts
index 258dc25f6a1e10..133d4be785d19b 100644
--- a/src/legacy/core_plugins/region_map/index.ts
+++ b/src/legacy/core_plugins/region_map/index.ts
@@ -25,7 +25,7 @@ import { LegacyPluginApi, LegacyPluginInitializer } from '../../../../src/legacy
 const regionMapPluginInitializer: LegacyPluginInitializer = ({ Plugin }: LegacyPluginApi) =>
   new Plugin({
     id: 'region_map',
-    require: ['kibana', 'elasticsearch', 'visualizations', 'interpreter', 'expressions'],
+    require: ['kibana', 'elasticsearch', 'interpreter', 'expressions'],
     publicDir: resolve(__dirname, 'public'),
     uiExports: {
       hacks: [resolve(__dirname, 'public/legacy')],
diff --git a/src/legacy/core_plugins/region_map/public/__tests__/region_map_visualization.js b/src/legacy/core_plugins/region_map/public/__tests__/region_map_visualization.js
index 2e6b48ff89e28a..9bfa413257967c 100644
--- a/src/legacy/core_plugins/region_map/public/__tests__/region_map_visualization.js
+++ b/src/legacy/core_plugins/region_map/public/__tests__/region_map_visualization.js
@@ -39,7 +39,7 @@ import afterdatachangePng from './afterdatachange.png';
 import afterdatachangeandresizePng from './afterdatachangeandresize.png';
 import aftercolorchangePng from './aftercolorchange.png';
 import changestartupPng from './changestartup.png';
-import { setup as visualizationsSetup } from '../../../visualizations/public/legacy';
+import { setup as visualizationsSetup } from '../../../visualizations/public/np_ready/public/legacy';
 
 import { createRegionMapVisualization } from '../region_map_visualization';
 import { createRegionMapTypeDefinition } from '../region_map_type';
@@ -196,7 +196,7 @@ describe('RegionMapsVisualizationTests', function () {
       imageComparator.destroy();
     });
 
-    it('should instantiate at zoom level 2', async function () {
+    it('should instantiate at zoom level 2 (may fail in dev env)', async function () {
       const regionMapsVisualization = new RegionMapsVisualization(domNode, vis);
       await regionMapsVisualization.render(dummyTableGroup, vis.params, {
         resize: false,
@@ -236,7 +236,7 @@ describe('RegionMapsVisualizationTests', function () {
       expect(mismatchedPixels).to.be.lessThan(PIXEL_DIFF);
     });
 
-    it('should resize', async function () {
+    it('should resize (may fail in dev env)', async function () {
       const regionMapsVisualization = new RegionMapsVisualization(domNode, vis);
       await regionMapsVisualization.render(dummyTableGroup, vis.params, {
         resize: false,
@@ -273,7 +273,7 @@ describe('RegionMapsVisualizationTests', function () {
       expect(mismatchedPixelsAfterSecondResize).to.be.lessThan(PIXEL_DIFF);
     });
 
-    it('should redo data', async function () {
+    it('should redo data (may fail in dev env)', async function () {
       const regionMapsVisualization = new RegionMapsVisualization(domNode, vis);
       await regionMapsVisualization.render(dummyTableGroup, vis.params, {
         resize: false,
@@ -317,7 +317,7 @@ describe('RegionMapsVisualizationTests', function () {
       expect(mismatchedPixelsAfterDataChangeAndResize).to.be.lessThan(PIXEL_DIFF);
     });
 
-    it('should redo data and color ramp', async function () {
+    it('should redo data and color ramp (may fail in dev env)', async function () {
       const regionMapsVisualization = new RegionMapsVisualization(domNode, vis);
       await regionMapsVisualization.render(dummyTableGroup, vis.params, {
         resize: false,
diff --git a/src/legacy/core_plugins/region_map/public/legacy.ts b/src/legacy/core_plugins/region_map/public/legacy.ts
index e16a21cb78cc56..495e558e29dd7c 100644
--- a/src/legacy/core_plugins/region_map/public/legacy.ts
+++ b/src/legacy/core_plugins/region_map/public/legacy.ts
@@ -20,7 +20,7 @@
 import { PluginInitializerContext } from 'kibana/public';
 import { npSetup, npStart } from 'ui/new_platform';
 
-import { setup as visualizationsSetup } from '../../visualizations/public/legacy';
+import { setup as visualizationsSetup } from '../../visualizations/public/np_ready/public/legacy';
 import { RegionMapPluginSetupDependencies, RegionMapsConfig } from './plugin';
 import { LegacyDependenciesPlugin } from './shim';
 import { plugin } from '.';
diff --git a/src/legacy/core_plugins/tile_map/index.ts b/src/legacy/core_plugins/tile_map/index.ts
index 15ce3bdb8e28b3..b6ab88327f6bd1 100644
--- a/src/legacy/core_plugins/tile_map/index.ts
+++ b/src/legacy/core_plugins/tile_map/index.ts
@@ -28,7 +28,7 @@ import { LegacyPluginApi, LegacyPluginInitializer } from '../../../../src/legacy
 const tileMapPluginInitializer: LegacyPluginInitializer = ({ Plugin }: LegacyPluginApi) =>
   new Plugin({
     id: 'tile_map',
-    require: ['kibana', 'elasticsearch', 'visualizations', 'interpreter', 'expressions'],
+    require: ['kibana', 'elasticsearch', 'interpreter', 'expressions'],
     publicDir: resolve(__dirname, 'public'),
     uiExports: {
       styleSheetPaths: resolve(__dirname, 'public/index.scss'),
diff --git a/src/legacy/core_plugins/tile_map/public/__tests__/coordinate_maps_visualization.js b/src/legacy/core_plugins/tile_map/public/__tests__/coordinate_maps_visualization.js
index a0ae604eb4659a..860c26bedd5238 100644
--- a/src/legacy/core_plugins/tile_map/public/__tests__/coordinate_maps_visualization.js
+++ b/src/legacy/core_plugins/tile_map/public/__tests__/coordinate_maps_visualization.js
@@ -33,7 +33,7 @@ import EMS_TILES from '../../../../ui/public/vis/__tests__/map/ems_mocks/sample_
 import EMS_STYLE_ROAD_MAP_BRIGHT from '../../../../ui/public/vis/__tests__/map/ems_mocks/sample_style_bright';
 import EMS_STYLE_ROAD_MAP_DESATURATED from '../../../../ui/public/vis/__tests__/map/ems_mocks/sample_style_desaturated';
 import EMS_STYLE_DARK_MAP from '../../../../ui/public/vis/__tests__/map/ems_mocks/sample_style_dark';
-import { setup as visualizationsSetup } from '../../../visualizations/public/legacy';
+import { setup as visualizationsSetup } from '../../../visualizations/public/np_ready/public/legacy';
 
 import { createTileMapVisualization } from '../tile_map_visualization';
 import { createTileMapTypeDefinition } from '../tile_map_type';
@@ -172,7 +172,7 @@ describe('CoordinateMapsVisualizationTest', function () {
       imageComparator.destroy();
     });
 
-    it('should initialize OK', async function () {
+    it('should initialize OK (may fail in dev env)', async function () {
       const coordinateMapVisualization = new CoordinateMapsVisualization(domNode, vis);
       await coordinateMapVisualization.render(dummyESResponse, vis.params, {
         resize: false,
@@ -211,7 +211,7 @@ describe('CoordinateMapsVisualizationTest', function () {
       expect(mismatchedPixels).to.be.lessThan(PIXEL_DIFF);
     });
 
-    it('should toggle back&forth OK between mapTypes', async function () {
+    it('should toggle back&forth OK between mapTypes (may fail in dev env)', async function () {
       const coordinateMapVisualization = new CoordinateMapsVisualization(domNode, vis);
       await coordinateMapVisualization.render(dummyESResponse, vis.params, {
         resize: false,
@@ -244,7 +244,7 @@ describe('CoordinateMapsVisualizationTest', function () {
       expect(mismatchedPixels).to.be.lessThan(PIXEL_DIFF);
     });
 
-    it('should toggle to different color schema ok', async function () {
+    it('should toggle to different color schema ok (may fail in dev env)', async function () {
       const coordinateMapVisualization = new CoordinateMapsVisualization(domNode, vis);
       await coordinateMapVisualization.render(dummyESResponse, vis.params, {
         resize: false,
diff --git a/src/legacy/core_plugins/tile_map/public/__tests__/geohash_layer.js b/src/legacy/core_plugins/tile_map/public/__tests__/geohash_layer.js
index 628175e4fd2b31..cca8571cf3091e 100644
--- a/src/legacy/core_plugins/tile_map/public/__tests__/geohash_layer.js
+++ b/src/legacy/core_plugins/tile_map/public/__tests__/geohash_layer.js
@@ -98,7 +98,7 @@ describe('geohash_layer', function () {
       // }
     ].forEach(function (test) {
 
-      it(test.options.mapType, async function () {
+      it(`${test.options.mapType} (may fail in dev env)`, async function () {
 
         const geohashGridOptions = test.options;
         const geohashLayer = new GeohashLayer(
diff --git a/src/legacy/core_plugins/tile_map/public/legacy.ts b/src/legacy/core_plugins/tile_map/public/legacy.ts
index c367a5b5376cac..74be8482bfd301 100644
--- a/src/legacy/core_plugins/tile_map/public/legacy.ts
+++ b/src/legacy/core_plugins/tile_map/public/legacy.ts
@@ -20,7 +20,7 @@
 import { PluginInitializerContext } from 'kibana/public';
 import { npSetup, npStart } from 'ui/new_platform';
 
-import { setup as visualizationsSetup } from '../../visualizations/public/legacy';
+import { setup as visualizationsSetup } from '../../visualizations/public/np_ready/public/legacy';
 import { TileMapPluginSetupDependencies } from './plugin';
 import { LegacyDependenciesPlugin } from './shim';
 import { plugin } from '.';
diff --git a/src/legacy/core_plugins/timelion/public/app.js b/src/legacy/core_plugins/timelion/public/app.js
index 29e56f77fd837b..a1f4699a1282ad 100644
--- a/src/legacy/core_plugins/timelion/public/app.js
+++ b/src/legacy/core_plugins/timelion/public/app.js
@@ -26,8 +26,8 @@ import { docTitle } from 'ui/doc_title';
 import { SavedObjectRegistryProvider } from 'ui/saved_objects/saved_object_registry';
 import { fatalError, toastNotifications } from 'ui/notify';
 import { timezoneProvider } from 'ui/vis/lib/timezone';
-import { recentlyAccessed } from 'ui/persisted_log';
 import { timefilter } from 'ui/timefilter';
+import { npStart } from 'ui/new_platform';
 import { getSavedSheetBreadcrumbs, getCreateBreadcrumbs } from './breadcrumbs';
 
 // import the uiExports that we want to "use"
@@ -97,7 +97,7 @@ require('ui/routes')
         return savedSheets.get($route.current.params.id)
           .then((savedSheet) => {
             if ($route.current.params.id) {
-              recentlyAccessed.add(
+              npStart.core.chrome.recentlyAccessed.add(
                 savedSheet.getFullPath(),
                 savedSheet.title,
                 savedSheet.id);
diff --git a/src/legacy/core_plugins/timelion/public/legacy.ts b/src/legacy/core_plugins/timelion/public/legacy.ts
index 8b8b5d4330b423..5d4939191a6cad 100644
--- a/src/legacy/core_plugins/timelion/public/legacy.ts
+++ b/src/legacy/core_plugins/timelion/public/legacy.ts
@@ -20,7 +20,7 @@
 import { PluginInitializerContext } from 'kibana/public';
 import { npSetup, npStart } from 'ui/new_platform';
 import { plugin } from '.';
-import { setup as visualizations } from '../../visualizations/public/legacy';
+import { setup as visualizations } from '../../visualizations/public/np_ready/public/legacy';
 import { TimelionPluginSetupDependencies, TimelionPluginStartDependencies } from './plugin';
 // @ts-ignore
 import panelRegistry from './lib/panel_registry';
diff --git a/src/legacy/core_plugins/timelion/public/plugin.ts b/src/legacy/core_plugins/timelion/public/plugin.ts
index 4adfac3726b95a..f7f0b48ef5011c 100644
--- a/src/legacy/core_plugins/timelion/public/plugin.ts
+++ b/src/legacy/core_plugins/timelion/public/plugin.ts
@@ -26,7 +26,7 @@ import {
   HttpSetup,
 } from 'kibana/public';
 import { Plugin as ExpressionsPlugin } from 'src/plugins/expressions/public';
-import { VisualizationsSetup } from '../../visualizations/public/np_ready';
+import { VisualizationsSetup } from '../../visualizations/public/np_ready/public';
 import { getTimelionVisualizationConfig } from './timelion_vis_fn';
 import { getTimelionVisualization } from './vis';
 import { getTimeChart } from './panels/timechart/timechart';
diff --git a/src/legacy/core_plugins/vis_type_markdown/index.ts b/src/legacy/core_plugins/vis_type_markdown/index.ts
index 8106e5d30ddd0d..1135872b24b8a4 100644
--- a/src/legacy/core_plugins/vis_type_markdown/index.ts
+++ b/src/legacy/core_plugins/vis_type_markdown/index.ts
@@ -25,7 +25,7 @@ import { LegacyPluginApi, LegacyPluginInitializer } from '../../../../src/legacy
 const markdownPluginInitializer: LegacyPluginInitializer = ({ Plugin }: LegacyPluginApi) =>
   new Plugin({
     id: 'markdown_vis',
-    require: ['kibana', 'elasticsearch', 'visualizations', 'interpreter', 'expressions'],
+    require: ['kibana', 'elasticsearch', 'interpreter', 'expressions'],
     publicDir: resolve(__dirname, 'public'),
     uiExports: {
       styleSheetPaths: resolve(__dirname, 'public/index.scss'),
diff --git a/src/legacy/core_plugins/vis_type_markdown/public/legacy.ts b/src/legacy/core_plugins/vis_type_markdown/public/legacy.ts
index 6074137532ae9c..d4a5290df865c0 100644
--- a/src/legacy/core_plugins/vis_type_markdown/public/legacy.ts
+++ b/src/legacy/core_plugins/vis_type_markdown/public/legacy.ts
@@ -20,7 +20,7 @@
 import { PluginInitializerContext } from 'kibana/public';
 import { npSetup, npStart } from 'ui/new_platform';
 
-import { setup as visualizationsSetup } from '../../visualizations/public/legacy';
+import { setup as visualizationsSetup } from '../../visualizations/public/np_ready/public/legacy';
 import { MarkdownPluginSetupDependencies } from './plugin';
 import { plugin } from '.';
 
diff --git a/src/legacy/core_plugins/vis_type_markdown/public/markdown_fn.test.ts b/src/legacy/core_plugins/vis_type_markdown/public/markdown_fn.test.ts
index 28021a763b2878..009797905701c5 100644
--- a/src/legacy/core_plugins/vis_type_markdown/public/markdown_fn.test.ts
+++ b/src/legacy/core_plugins/vis_type_markdown/public/markdown_fn.test.ts
@@ -30,7 +30,7 @@ describe('interpreter/functions#markdown', () => {
   };
 
   it('returns an object with the correct structure', async () => {
-    const actual = await fn(undefined, args);
+    const actual = await fn(undefined, args, undefined);
     expect(actual).toMatchSnapshot();
   });
 });
diff --git a/src/legacy/core_plugins/vis_type_markdown/public/markdown_options.tsx b/src/legacy/core_plugins/vis_type_markdown/public/markdown_options.tsx
index 79628afe485312..53a7b1caef2a47 100644
--- a/src/legacy/core_plugins/vis_type_markdown/public/markdown_options.tsx
+++ b/src/legacy/core_plugins/vis_type_markdown/public/markdown_options.tsx
@@ -46,7 +46,9 @@ function MarkdownOptions({ stateParams, setValue }: VisOptionsProps<MarkdownVisP
           <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween" alignItems="baseline">
             <EuiFlexItem grow={false}>
               <EuiTitle size="xs">
-                <h2>Markdown</h2>
+                <h2>
+                  <label htmlFor="markdownVisInput">Markdown</label>
+                </h2>
               </EuiTitle>
             </EuiFlexItem>
 
diff --git a/src/legacy/core_plugins/vis_type_markdown/public/markdown_vis_controller.test.tsx b/src/legacy/core_plugins/vis_type_markdown/public/markdown_vis_controller.test.tsx
index 9d2f68ddb74465..5bcb2961c42de2 100644
--- a/src/legacy/core_plugins/vis_type_markdown/public/markdown_vis_controller.test.tsx
+++ b/src/legacy/core_plugins/vis_type_markdown/public/markdown_vis_controller.test.tsx
@@ -22,7 +22,7 @@ import { render, mount } from 'enzyme';
 import { MarkdownVisWrapper } from './markdown_vis_controller';
 
 // We need Markdown to do these tests, so mock data plugin
-jest.mock('../../data/public', () => {
+jest.mock('../../data/public/legacy', () => {
   return {};
 });
 
diff --git a/src/legacy/core_plugins/vis_type_metric/index.ts b/src/legacy/core_plugins/vis_type_metric/index.ts
index f71fc4a75461e8..d5a86abfdc288d 100644
--- a/src/legacy/core_plugins/vis_type_metric/index.ts
+++ b/src/legacy/core_plugins/vis_type_metric/index.ts
@@ -25,7 +25,7 @@ import { LegacyPluginApi, LegacyPluginInitializer } from '../../../../src/legacy
 const metricPluginInitializer: LegacyPluginInitializer = ({ Plugin }: LegacyPluginApi) =>
   new Plugin({
     id: 'metric_vis',
-    require: ['kibana', 'elasticsearch', 'visualizations', 'interpreter', 'expressions'],
+    require: ['kibana', 'elasticsearch', 'interpreter', 'expressions'],
     publicDir: resolve(__dirname, 'public'),
     uiExports: {
       styleSheetPaths: resolve(__dirname, 'public/index.scss'),
diff --git a/src/legacy/core_plugins/vis_type_metric/public/legacy.ts b/src/legacy/core_plugins/vis_type_metric/public/legacy.ts
index c5fc86c7e35f53..f214bcbc82f7d2 100644
--- a/src/legacy/core_plugins/vis_type_metric/public/legacy.ts
+++ b/src/legacy/core_plugins/vis_type_metric/public/legacy.ts
@@ -20,7 +20,7 @@
 import { PluginInitializerContext } from 'kibana/public';
 import { npSetup, npStart } from 'ui/new_platform';
 
-import { setup as visualizationsSetup } from '../../visualizations/public/legacy';
+import { setup as visualizationsSetup } from '../../visualizations/public/np_ready/public/legacy';
 import { MetricVisPluginSetupDependencies } from './plugin';
 import { LegacyDependenciesPlugin } from './shim';
 import { plugin } from '.';
diff --git a/src/legacy/core_plugins/vis_type_metric/public/metric_vis_fn.test.ts b/src/legacy/core_plugins/vis_type_metric/public/metric_vis_fn.test.ts
index 5fe2ac7b7fdf00..fee6dec641842b 100644
--- a/src/legacy/core_plugins/vis_type_metric/public/metric_vis_fn.test.ts
+++ b/src/legacy/core_plugins/vis_type_metric/public/metric_vis_fn.test.ts
@@ -67,7 +67,7 @@ describe('interpreter/functions#metric', () => {
   };
 
   it('returns an object with the correct structure', () => {
-    const actual = fn(context, args);
+    const actual = fn(context, args, undefined);
 
     expect(actual).toMatchSnapshot();
   });
diff --git a/src/legacy/core_plugins/vis_type_table/index.ts b/src/legacy/core_plugins/vis_type_table/index.ts
index 3847dd6b582680..eba7af17c20579 100644
--- a/src/legacy/core_plugins/vis_type_table/index.ts
+++ b/src/legacy/core_plugins/vis_type_table/index.ts
@@ -25,7 +25,7 @@ import { LegacyPluginApi, LegacyPluginInitializer } from '../../../../src/legacy
 const tableVisPluginInitializer: LegacyPluginInitializer = ({ Plugin }: LegacyPluginApi) =>
   new Plugin({
     id: 'table_vis',
-    require: ['kibana', 'elasticsearch', 'visualizations', 'interpreter', 'expressions'],
+    require: ['kibana', 'elasticsearch', 'interpreter', 'expressions'],
     publicDir: resolve(__dirname, 'public'),
     uiExports: {
       styleSheetPaths: resolve(__dirname, 'public/index.scss'),
diff --git a/src/legacy/core_plugins/vis_type_table/public/__tests__/table_vis_controller.js b/src/legacy/core_plugins/vis_type_table/public/__tests__/table_vis_controller.js
index 94c8fec650dcf4..abebf8190dc9fc 100644
--- a/src/legacy/core_plugins/vis_type_table/public/__tests__/table_vis_controller.js
+++ b/src/legacy/core_plugins/vis_type_table/public/__tests__/table_vis_controller.js
@@ -28,7 +28,7 @@ import { AppStateProvider } from 'ui/state_management/app_state';
 import { tabifyAggResponse } from 'ui/agg_response/tabify';
 
 import { createTableVisTypeDefinition } from '../table_vis_type';
-import { setup as visualizationsSetup } from '../../../visualizations/public/legacy';
+import { setup as visualizationsSetup } from '../../../visualizations/public/np_ready/public/legacy';
 
 describe('Table Vis - Controller', async function () {
   let $rootScope;
diff --git a/src/legacy/core_plugins/vis_type_table/public/agg_table/__tests__/agg_table.js b/src/legacy/core_plugins/vis_type_table/public/agg_table/__tests__/agg_table.js
index 4dad6bf5e44a03..d22ff92c4d3f61 100644
--- a/src/legacy/core_plugins/vis_type_table/public/agg_table/__tests__/agg_table.js
+++ b/src/legacy/core_plugins/vis_type_table/public/agg_table/__tests__/agg_table.js
@@ -31,7 +31,7 @@ import { round } from 'lodash';
 
 import { VisFactoryProvider } from 'ui/vis/vis_factory';
 import { createTableVisTypeDefinition } from '../../table_vis_type';
-import { setup as visualizationsSetup } from '../../../../visualizations/public/legacy';
+import { setup as visualizationsSetup } from '../../../../visualizations/public/np_ready/public/legacy';
 
 describe('Table Vis - AggTable Directive', function () {
   let $rootScope;
diff --git a/src/legacy/core_plugins/vis_type_table/public/legacy.ts b/src/legacy/core_plugins/vis_type_table/public/legacy.ts
index 5ec181f0e69740..8513622dec9aad 100644
--- a/src/legacy/core_plugins/vis_type_table/public/legacy.ts
+++ b/src/legacy/core_plugins/vis_type_table/public/legacy.ts
@@ -22,7 +22,7 @@ import { npSetup, npStart } from 'ui/new_platform';
 import { plugin } from '.';
 
 import { TablePluginSetupDependencies } from './plugin';
-import { setup as visualizationsSetup } from '../../visualizations/public/legacy';
+import { setup as visualizationsSetup } from '../../visualizations/public/np_ready/public/legacy';
 import { LegacyDependenciesPlugin } from './shim';
 
 const plugins: Readonly<TablePluginSetupDependencies> = {
diff --git a/src/legacy/core_plugins/vis_type_table/public/table_vis_fn.test.ts b/src/legacy/core_plugins/vis_type_table/public/table_vis_fn.test.ts
index 2bdebc8a9d19ef..1c1b808ffb0143 100644
--- a/src/legacy/core_plugins/vis_type_table/public/table_vis_fn.test.ts
+++ b/src/legacy/core_plugins/vis_type_table/public/table_vis_fn.test.ts
@@ -76,12 +76,12 @@ describe('interpreter/functions#table', () => {
   });
 
   it('returns an object with the correct structure', async () => {
-    const actual = await fn(context, { visConfig: JSON.stringify(visConfig) });
+    const actual = await fn(context, { visConfig: JSON.stringify(visConfig) }, undefined);
     expect(actual).toMatchSnapshot();
   });
 
   it('calls response handler with correct values', async () => {
-    await fn(context, { visConfig: JSON.stringify(visConfig) });
+    await fn(context, { visConfig: JSON.stringify(visConfig) }, undefined);
     expect(mockResponseHandler).toHaveBeenCalledTimes(1);
     expect(mockResponseHandler).toHaveBeenCalledWith(context, visConfig.dimensions);
   });
diff --git a/src/legacy/core_plugins/vis_type_tagcloud/index.ts b/src/legacy/core_plugins/vis_type_tagcloud/index.ts
index a086a5af0261de..18dc8c9d78b743 100644
--- a/src/legacy/core_plugins/vis_type_tagcloud/index.ts
+++ b/src/legacy/core_plugins/vis_type_tagcloud/index.ts
@@ -25,7 +25,7 @@ import { LegacyPluginApi, LegacyPluginInitializer } from '../../../../src/legacy
 const tagCloudPluginInitializer: LegacyPluginInitializer = ({ Plugin }: LegacyPluginApi) =>
   new Plugin({
     id: 'tagcloud',
-    require: ['kibana', 'elasticsearch', 'visualizations', 'interpreter', 'expressions'],
+    require: ['kibana', 'elasticsearch', 'interpreter', 'expressions'],
     publicDir: resolve(__dirname, 'public'),
     uiExports: {
       styleSheetPaths: resolve(__dirname, 'public/index.scss'),
diff --git a/src/legacy/core_plugins/vis_type_tagcloud/public/legacy.ts b/src/legacy/core_plugins/vis_type_tagcloud/public/legacy.ts
index f173eff0aef883..66710791edc833 100644
--- a/src/legacy/core_plugins/vis_type_tagcloud/public/legacy.ts
+++ b/src/legacy/core_plugins/vis_type_tagcloud/public/legacy.ts
@@ -20,7 +20,7 @@
 import { PluginInitializerContext } from 'kibana/public';
 import { npSetup, npStart } from 'ui/new_platform';
 
-import { setup as visualizationsSetup } from '../../visualizations/public/legacy';
+import { setup as visualizationsSetup } from '../../visualizations/public/np_ready/public/legacy';
 import { TagCloudPluginSetupDependencies } from './plugin';
 import { plugin } from '.';
 
diff --git a/src/legacy/core_plugins/vis_type_tagcloud/public/tag_cloud_fn.test.ts b/src/legacy/core_plugins/vis_type_tagcloud/public/tag_cloud_fn.test.ts
index d14871c6bd3375..0365f7840cac42 100644
--- a/src/legacy/core_plugins/vis_type_tagcloud/public/tag_cloud_fn.test.ts
+++ b/src/legacy/core_plugins/vis_type_tagcloud/public/tag_cloud_fn.test.ts
@@ -39,7 +39,7 @@ describe('interpreter/functions#tagcloud', () => {
   };
 
   it('returns an object with the correct structure', () => {
-    const actual = fn(context, visConfig);
+    const actual = fn(context, visConfig, undefined);
     expect(actual).toMatchSnapshot();
   });
 });
diff --git a/src/legacy/core_plugins/vis_type_timeseries/index.ts b/src/legacy/core_plugins/vis_type_timeseries/index.ts
index f302e36c046c42..215e7975d97c8c 100644
--- a/src/legacy/core_plugins/vis_type_timeseries/index.ts
+++ b/src/legacy/core_plugins/vis_type_timeseries/index.ts
@@ -30,7 +30,7 @@ import { LegacyPluginApi, LegacyPluginInitializer } from '../../../../src/legacy
 const metricsPluginInitializer: LegacyPluginInitializer = ({ Plugin }: LegacyPluginApi) =>
   new Plugin({
     id: 'metrics',
-    require: ['kibana', 'elasticsearch', 'visualizations', 'interpreter', 'expressions'],
+    require: ['kibana', 'elasticsearch', 'interpreter', 'expressions'],
     publicDir: resolve(__dirname, 'public'),
     uiExports: {
       styleSheetPaths: resolve(__dirname, 'public/index.scss'),
diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/components/vis_editor.js b/src/legacy/core_plugins/vis_type_timeseries/public/components/vis_editor.js
index a6c52d8760666f..389a84babae87b 100644
--- a/src/legacy/core_plugins/vis_type_timeseries/public/components/vis_editor.js
+++ b/src/legacy/core_plugins/vis_type_timeseries/public/components/vis_editor.js
@@ -34,6 +34,7 @@ import { extractIndexPatterns } from '../../common/extract_index_patterns';
 import { npStart } from 'ui/new_platform';
 import { Storage } from 'ui/storage';
 import { CoreStartContextProvider } from '../contexts/query_input_bar_context';
+import { KibanaContextProvider } from '../../../../../plugins/kibana_react/public';
 const localStorage = new Storage(window.localStorage);
 import { timefilter } from 'ui/timefilter';
 
@@ -163,38 +164,48 @@ export class VisEditor extends Component {
     const { model } = this.state;
 
     if (model) {
+      //TODO: Remove CoreStartContextProvider, KibanaContextProvider should be raised to the top of the plugin.
       return (
-        <div className="tvbEditor" data-test-subj="tvbVisEditor">
-          <div className="tvbEditor--hideForReporting">
-            <VisPicker model={model} onChange={this.handleChange} />
+        <KibanaContextProvider
+          services={{
+            appName: APP_NAME,
+            store: localStorage,
+            autocomplete: npStart.plugins.data.autocomplete,
+            ...npStart.core,
+          }}
+        >
+          <div className="tvbEditor" data-test-subj="tvbVisEditor">
+            <div className="tvbEditor--hideForReporting">
+              <VisPicker model={model} onChange={this.handleChange} />
+            </div>
+            <VisEditorVisualization
+              dirty={this.state.dirty}
+              autoApply={this.state.autoApply}
+              model={model}
+              appState={this.appState}
+              savedObj={this.props.savedObj}
+              timeRange={this.props.timeRange}
+              uiState={this.uiState}
+              onCommit={this.handleCommit}
+              onToggleAutoApply={this.handleAutoApplyToggle}
+              title={this.props.vis.title}
+              description={this.props.vis.description}
+              onDataChange={this.onDataChange}
+            />
+            <div className="tvbEditor--hideForReporting">
+              <CoreStartContextProvider value={this.coreContext}>
+                <PanelConfig
+                  fields={this.state.visFields}
+                  model={model}
+                  visData$={this.visData$}
+                  dateFormat={this.props.config.get('dateFormat')}
+                  onChange={this.handleChange}
+                  getConfig={this.getConfig}
+                />
+              </CoreStartContextProvider>
+            </div>
           </div>
-          <VisEditorVisualization
-            dirty={this.state.dirty}
-            autoApply={this.state.autoApply}
-            model={model}
-            appState={this.appState}
-            savedObj={this.props.savedObj}
-            timeRange={this.props.timeRange}
-            uiState={this.uiState}
-            onCommit={this.handleCommit}
-            onToggleAutoApply={this.handleAutoApplyToggle}
-            title={this.props.vis.title}
-            description={this.props.vis.description}
-            onDataChange={this.onDataChange}
-          />
-          <div className="tvbEditor--hideForReporting">
-            <CoreStartContextProvider value={this.coreContext}>
-              <PanelConfig
-                fields={this.state.visFields}
-                model={model}
-                visData$={this.visData$}
-                dateFormat={this.props.config.get('dateFormat')}
-                onChange={this.handleChange}
-                getConfig={this.getConfig}
-              />
-            </CoreStartContextProvider>
-          </div>
-        </div>
+        </KibanaContextProvider>
       );
     }
 
diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/legacy.ts b/src/legacy/core_plugins/vis_type_timeseries/public/legacy.ts
index 17bfc3232c2ad1..93b35ee284f185 100644
--- a/src/legacy/core_plugins/vis_type_timeseries/public/legacy.ts
+++ b/src/legacy/core_plugins/vis_type_timeseries/public/legacy.ts
@@ -20,7 +20,7 @@
 import { PluginInitializerContext } from 'kibana/public';
 import { npSetup, npStart } from 'ui/new_platform';
 
-import { setup as visualizationsSetup } from '../../visualizations/public/legacy';
+import { setup as visualizationsSetup } from '../../visualizations/public/np_ready/public/legacy';
 import { MetricsPluginSetupDependencies } from './plugin';
 import { plugin } from '.';
 
diff --git a/src/legacy/core_plugins/vis_type_vega/index.ts b/src/legacy/core_plugins/vis_type_vega/index.ts
index 3c18b548413f47..59d1ad64577117 100644
--- a/src/legacy/core_plugins/vis_type_vega/index.ts
+++ b/src/legacy/core_plugins/vis_type_vega/index.ts
@@ -28,7 +28,7 @@ const vegaPluginInitializer: LegacyPluginInitializer = ({ Plugin }: LegacyPlugin
     // It is required to change the configuration property
     //   vega.enableExternalUrls -> vis_type_vega.enableExternalUrls
     id: 'vega',
-    require: ['kibana', 'elasticsearch', 'visualizations', 'interpreter', 'expressions'],
+    require: ['kibana', 'elasticsearch', 'interpreter', 'expressions'],
     publicDir: resolve(__dirname, 'public'),
     uiExports: {
       styleSheetPaths: resolve(__dirname, 'public/index.scss'),
diff --git a/src/legacy/core_plugins/vis_type_vega/public/__tests__/vega_visualization.js b/src/legacy/core_plugins/vis_type_vega/public/__tests__/vega_visualization.js
index 1bd68774ab0719..13f4ce06f1b627 100644
--- a/src/legacy/core_plugins/vis_type_vega/public/__tests__/vega_visualization.js
+++ b/src/legacy/core_plugins/vis_type_vega/public/__tests__/vega_visualization.js
@@ -41,7 +41,7 @@ import vegaMapImage256 from './vega_map_image_256.png';
 import { VegaParser } from '../data_model/vega_parser';
 import { SearchCache } from '../data_model/search_cache';
 
-import { setup as visualizationsSetup } from '../../../visualizations/public/legacy';
+import { setup as visualizationsSetup } from '../../../visualizations/public/np_ready/public/legacy';
 import { createVegaTypeDefinition } from '../vega_type';
 
 const THRESHOLD = 0.1;
@@ -93,7 +93,7 @@ describe('VegaVisualizations', () => {
       imageComparator.destroy();
     });
 
-    it('should show vegalite graph and update on resize', async function () {
+    it('should show vegalite graph and update on resize (may fail in dev env)', async function () {
       let vegaVis;
       try {
         vegaVis = new VegaVisualization(domNode, vis);
@@ -116,7 +116,7 @@ describe('VegaVisualizations', () => {
       }
     });
 
-    it('should show vega graph', async function () {
+    it('should show vega graph (may fail in dev env)', async function () {
       let vegaVis;
       try {
         vegaVis = new VegaVisualization(domNode, vis);
@@ -132,7 +132,7 @@ describe('VegaVisualizations', () => {
       }
     });
 
-    it('should show vegatooltip on mouseover over a vega graph', async () => {
+    it('should show vegatooltip on mouseover over a vega graph (may fail in dev env)', async () => {
       let vegaVis;
       try {
         vegaVis = new VegaVisualization(domNode, vis);
diff --git a/src/legacy/core_plugins/vis_type_vega/public/legacy.ts b/src/legacy/core_plugins/vis_type_vega/public/legacy.ts
index 73e03f6d323c2b..d40212bec3b7f3 100644
--- a/src/legacy/core_plugins/vis_type_vega/public/legacy.ts
+++ b/src/legacy/core_plugins/vis_type_vega/public/legacy.ts
@@ -20,7 +20,7 @@
 import { PluginInitializerContext } from 'kibana/public';
 import { npSetup, npStart } from 'ui/new_platform';
 
-import { setup as visualizationsSetup } from '../../visualizations/public/legacy';
+import { setup as visualizationsSetup } from '../../visualizations/public/np_ready/public/legacy';
 import { VegaPluginSetupDependencies } from './plugin';
 import { LegacyDependenciesPlugin } from './shim';
 import { plugin } from '.';
diff --git a/src/legacy/core_plugins/visualizations/package.json b/src/legacy/core_plugins/visualizations/package.json
deleted file mode 100644
index 5b436f0c2fef2f..00000000000000
--- a/src/legacy/core_plugins/visualizations/package.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "name": "visualizations",
-  "version": "kibana"
-}
diff --git a/src/legacy/core_plugins/visualizations/public/index.ts b/src/legacy/core_plugins/visualizations/public/index.ts
index 997f18cbd51469..ad86c9ddb14c59 100644
--- a/src/legacy/core_plugins/visualizations/public/index.ts
+++ b/src/legacy/core_plugins/visualizations/public/index.ts
@@ -50,7 +50,7 @@ export { Status } from 'ui/vis/update_status';
  *
  * @public
  */
-export * from './np_ready';
+export * from './np_ready/public';
 
 // for backwards compatibility with 7.3
-export { setup as visualizations } from './legacy';
+export { setup as visualizations } from './np_ready/public/legacy';
diff --git a/src/legacy/core_plugins/visualizations/public/np_ready/kibana.json b/src/legacy/core_plugins/visualizations/public/np_ready/kibana.json
new file mode 100644
index 00000000000000..888edde44a2611
--- /dev/null
+++ b/src/legacy/core_plugins/visualizations/public/np_ready/kibana.json
@@ -0,0 +1,10 @@
+{
+  "id": "visualizations",
+  "version": "kibana",
+  "server": false,
+  "ui": true,
+  "requiredPlugins": [
+    "data",
+    "search"
+  ]
+}
diff --git a/src/legacy/core_plugins/visualizations/public/np_ready/filters/filters_service.ts b/src/legacy/core_plugins/visualizations/public/np_ready/public/filters/filters_service.ts
similarity index 100%
rename from src/legacy/core_plugins/visualizations/public/np_ready/filters/filters_service.ts
rename to src/legacy/core_plugins/visualizations/public/np_ready/public/filters/filters_service.ts
diff --git a/src/legacy/core_plugins/visualizations/public/np_ready/filters/index.ts b/src/legacy/core_plugins/visualizations/public/np_ready/public/filters/index.ts
similarity index 100%
rename from src/legacy/core_plugins/visualizations/public/np_ready/filters/index.ts
rename to src/legacy/core_plugins/visualizations/public/np_ready/public/filters/index.ts
diff --git a/src/legacy/core_plugins/visualizations/public/np_ready/index.ts b/src/legacy/core_plugins/visualizations/public/np_ready/public/index.ts
similarity index 99%
rename from src/legacy/core_plugins/visualizations/public/np_ready/index.ts
rename to src/legacy/core_plugins/visualizations/public/np_ready/public/index.ts
index f43550676e1b24..5e1aa02712c085 100644
--- a/src/legacy/core_plugins/visualizations/public/np_ready/index.ts
+++ b/src/legacy/core_plugins/visualizations/public/np_ready/public/index.ts
@@ -28,6 +28,7 @@
  * in the setup/start interfaces in `plugin.ts`. The remaining items exported here are
  * either types, or static code.
  */
+
 import { PluginInitializerContext } from 'src/core/public';
 import { VisualizationsPlugin, VisualizationsSetup, VisualizationsStart } from './plugin';
 
diff --git a/src/legacy/core_plugins/visualizations/public/legacy.ts b/src/legacy/core_plugins/visualizations/public/np_ready/public/legacy.ts
similarity index 62%
rename from src/legacy/core_plugins/visualizations/public/legacy.ts
rename to src/legacy/core_plugins/visualizations/public/np_ready/public/legacy.ts
index 088563a1970c3b..16cec5d2d9e91c 100644
--- a/src/legacy/core_plugins/visualizations/public/legacy.ts
+++ b/src/legacy/core_plugins/visualizations/public/np_ready/public/legacy.ts
@@ -17,27 +17,13 @@
  * under the License.
  */
 
-/**
- * New Platform Shim
- *
- * In this file, we import any legacy dependencies we have, and shim them into
- * our plugin by manually constructing the values that the new platform will
- * eventually be passing to the `setup/start` method of our plugin definition.
- *
- * The idea is that our `plugin.ts` can stay "pure" and not contain any legacy
- * world code. Then when it comes time to migrate to the new platform, we can
- * simply delete this shim file.
- *
- * We are also calling `setup/start` here and exporting our public contract so that
- * other legacy plugins are able to import from '../core_plugins/visualizations/legacy'
- * and receive the response value of the `setup/start` contract, mimicking the
- * data that will eventually be injected by the new platform.
- */
-
 import { PluginInitializerContext } from 'src/core/public';
+
+/* eslint-disable @kbn/eslint/no-restricted-paths */
 import { npSetup, npStart } from 'ui/new_platform';
 // @ts-ignore
 import { VisFiltersProvider, createFilter } from 'ui/vis/vis_filters';
+/* eslint-enable @kbn/eslint/no-restricted-paths */
 
 import { plugin } from '.';
 
diff --git a/src/legacy/core_plugins/visualizations/public/mocks.ts b/src/legacy/core_plugins/visualizations/public/np_ready/public/mocks.ts
similarity index 89%
rename from src/legacy/core_plugins/visualizations/public/mocks.ts
rename to src/legacy/core_plugins/visualizations/public/np_ready/public/mocks.ts
index 11dccbb1737552..5dc0e452eea56c 100644
--- a/src/legacy/core_plugins/visualizations/public/mocks.ts
+++ b/src/legacy/core_plugins/visualizations/public/np_ready/public/mocks.ts
@@ -22,18 +22,17 @@ jest.mock('ui/vis/default_feedback_message');
 jest.mock('ui/vis/index.js');
 jest.mock('ui/vis/vis_factory');
 jest.mock('ui/registry/vis_types');
-// @ts-ignore
-import { VisFiltersProvider, createFilter } from 'ui/vis/vis_filters';
-// @ts-ignore
-import { VisProvider as Vis } from 'ui/vis/index.js';
-// @ts-ignore
-import { VisFactoryProvider } from 'ui/vis/vis_factory';
 jest.mock('./types/vis_type_alias_registry');
-import { PluginInitializerContext } from 'src/core/public';
 
+import { PluginInitializerContext } from 'src/core/public';
 import { VisualizationsSetup, VisualizationsStart } from './';
-import { VisualizationsPlugin } from './np_ready/plugin';
-import { coreMock } from '../../../../core/public/mocks';
+import { VisualizationsPlugin } from './plugin';
+import { coreMock } from '../../../../../../core/public/mocks';
+
+/* eslint-disable */
+// @ts-ignore
+import { VisFiltersProvider, createFilter } from 'ui/vis/vis_filters';
+/* eslint-enable */
 
 const createSetupContract = (): VisualizationsSetup => ({
   filters: {
diff --git a/src/legacy/core_plugins/visualizations/public/np_ready/plugin.ts b/src/legacy/core_plugins/visualizations/public/np_ready/public/plugin.ts
similarity index 100%
rename from src/legacy/core_plugins/visualizations/public/np_ready/plugin.ts
rename to src/legacy/core_plugins/visualizations/public/np_ready/public/plugin.ts
diff --git a/src/legacy/core_plugins/visualizations/public/np_ready/types/index.ts b/src/legacy/core_plugins/visualizations/public/np_ready/public/types/index.ts
similarity index 100%
rename from src/legacy/core_plugins/visualizations/public/np_ready/types/index.ts
rename to src/legacy/core_plugins/visualizations/public/np_ready/public/types/index.ts
diff --git a/src/legacy/core_plugins/visualizations/public/np_ready/types/types_service.ts b/src/legacy/core_plugins/visualizations/public/np_ready/public/types/types_service.ts
similarity index 100%
rename from src/legacy/core_plugins/visualizations/public/np_ready/types/types_service.ts
rename to src/legacy/core_plugins/visualizations/public/np_ready/public/types/types_service.ts
diff --git a/src/legacy/core_plugins/visualizations/public/np_ready/types/vis_type_alias_registry.ts b/src/legacy/core_plugins/visualizations/public/np_ready/public/types/vis_type_alias_registry.ts
similarity index 100%
rename from src/legacy/core_plugins/visualizations/public/np_ready/types/vis_type_alias_registry.ts
rename to src/legacy/core_plugins/visualizations/public/np_ready/public/types/vis_type_alias_registry.ts
diff --git a/src/legacy/plugin_discovery/find_plugin_specs.js b/src/legacy/plugin_discovery/find_plugin_specs.js
index 29434357558b10..faccdf396df043 100644
--- a/src/legacy/plugin_discovery/find_plugin_specs.js
+++ b/src/legacy/plugin_discovery/find_plugin_specs.js
@@ -39,7 +39,7 @@ import {
   isInvalidPackError,
 } from './errors';
 
-function defaultConfig(settings) {
+export function defaultConfig(settings) {
   return Config.withDefaultSchema(
     transformDeprecations(settings)
   );
diff --git a/src/legacy/plugin_discovery/plugin_spec/plugin_spec.js b/src/legacy/plugin_discovery/plugin_spec/plugin_spec.js
index 3627fafa9d39a7..17da5ffca12421 100644
--- a/src/legacy/plugin_discovery/plugin_spec/plugin_spec.js
+++ b/src/legacy/plugin_discovery/plugin_spec/plugin_spec.js
@@ -103,7 +103,10 @@ export class PluginSpec {
         throw createInvalidPluginError(this, 'plugin.publicDir must be an absolute path');
       }
       if (basename(this._publicDir) !== 'public') {
-        throw createInvalidPluginError(this, `publicDir for plugin ${this.getId()} must end with a "public" directory.`);
+        throw createInvalidPluginError(
+          this,
+          `publicDir for plugin ${this.getId()} must end with a "public" directory.`
+        );
       }
     }
   }
@@ -145,7 +148,9 @@ export class PluginSpec {
     // the version of kibana down to the patch level. If these two versions need
     // to diverge, they can specify a kibana.version in the package to indicate the
     // version of kibana the plugin is intended to work with.
-    return this._kibanaVersion || get(this.getPack().getPkg(), 'kibana.version') || this.getVersion();
+    return (
+      this._kibanaVersion || get(this.getPack().getPkg(), 'kibana.version') || this.getVersion()
+    );
   }
 
   isVersionCompatible(actualKibanaVersion) {
diff --git a/src/legacy/server/config/__tests__/deprecation_warnings.js b/src/legacy/server/config/__tests__/deprecation_warnings.js
index ecaa6fa22f54c9..db5c0e96654928 100644
--- a/src/legacy/server/config/__tests__/deprecation_warnings.js
+++ b/src/legacy/server/config/__tests__/deprecation_warnings.js
@@ -25,7 +25,7 @@ const RUN_KBN_SERVER_STARTUP = require.resolve('./fixtures/run_kbn_server_startu
 const SETUP_NODE_ENV = require.resolve('../../../../setup_node_env');
 const SECOND = 1000;
 
-describe('config/deprecation warnings mixin', function () {
+describe('config/deprecation warnings', function () {
   this.timeout(15 * SECOND);
 
   let stdio = '';
@@ -99,11 +99,11 @@ describe('config/deprecation warnings mixin', function () {
         }
       })
       .filter(Boolean)
-      .filter(line => (
+      .filter(line =>
         line.type === 'log' &&
         line.tags.includes('deprecation') &&
         line.tags.includes('warning')
-      ));
+      );
 
     expect(deprecationLines).to.have.length(1);
     expect(deprecationLines[0]).to.have.property('message', 'uiSettings.enabled is deprecated and is no longer used');
diff --git a/src/legacy/server/config/schema.js b/src/legacy/server/config/schema.js
index 2265952e9245d1..2b91eafd45caab 100644
--- a/src/legacy/server/config/schema.js
+++ b/src/legacy/server/config/schema.js
@@ -78,7 +78,7 @@ export default () => Joi.object({
   server: Joi.object({
     uuid: Joi.string().guid().default(),
     name: Joi.string().default(os.hostname()),
-    defaultRoute: Joi.string().default('/app/kibana').regex(/^\//, `start with a slash`),
+    defaultRoute: Joi.string().regex(/^\//, `start with a slash`),
     customResponseHeaders: Joi.object().unknown(true).default({}),
     xsrf: Joi.object({
       disableProtection: Joi.boolean().default(false),
@@ -154,12 +154,6 @@ export default () => Joi.object({
     data: Joi.string().default(getData())
   }).default(),
 
-  migrations: Joi.object({
-    batchSize: Joi.number().default(100),
-    scrollDuration: Joi.string().default('15m'),
-    pollInterval: Joi.number().default(1500),
-  }).default(),
-
   stats: Joi.object({
     maximumWaitTimeForAllCollectorsInS: Joi.number().default(60)
   }).default(),
diff --git a/src/legacy/server/config/transform_deprecations.js b/src/legacy/server/config/transform_deprecations.js
index 7cac17a88fe64b..8be880074f9fd3 100644
--- a/src/legacy/server/config/transform_deprecations.js
+++ b/src/legacy/server/config/transform_deprecations.js
@@ -95,6 +95,7 @@ const cspRules = (settings, log) => {
 
 const deprecations = [
   //server
+  rename('server.defaultRoute', 'uiSettings.overrides.defaultRoute'),
   unused('server.xsrf.token'),
   unused('uiSettings.enabled'),
   rename('optimize.lazy', 'optimize.watch'),
diff --git a/src/legacy/server/config/transform_deprecations.test.js b/src/legacy/server/config/transform_deprecations.test.js
index 38044357f230df..4094443ac0006a 100644
--- a/src/legacy/server/config/transform_deprecations.test.js
+++ b/src/legacy/server/config/transform_deprecations.test.js
@@ -62,6 +62,24 @@ describe('server/config', function () {
       });
     });
 
+    describe('server.defaultRoute', () => {
+      it('renames to uiSettings.overrides.defaultRoute when specified', () => {
+        const settings = {
+          server: {
+            defaultRoute: '/app/foo',
+          },
+        };
+
+        expect(transformDeprecations(settings)).toEqual({
+          uiSettings: {
+            overrides: {
+              defaultRoute: '/app/foo'
+            }
+          }
+        });
+      });
+    });
+
     describe('csp.rules', () => {
       describe('with nonce source', () => {
         it('logs a warning', () => {
@@ -74,20 +92,18 @@ describe('server/config', function () {
           const log = jest.fn();
           transformDeprecations(settings, log);
           expect(log.mock.calls).toMatchInlineSnapshot(`
-            Array [
-              Array [
-                "csp.rules no longer supports the {nonce} syntax. Replacing with 'self' in script-src",
-              ],
-            ]
-          `);
+                        Array [
+                          Array [
+                            "csp.rules no longer supports the {nonce} syntax. Replacing with 'self' in script-src",
+                          ],
+                        ]
+                    `);
         });
 
         it('replaces a nonce', () => {
           expect(
-            transformDeprecations(
-              { csp: { rules: [`script-src 'nonce-{nonce}'`] } },
-              jest.fn()
-            ).csp.rules
+            transformDeprecations({ csp: { rules: [`script-src 'nonce-{nonce}'`] } }, jest.fn()).csp
+              .rules
           ).toEqual([`script-src 'self'`]);
           expect(
             transformDeprecations(
@@ -158,12 +174,12 @@ describe('server/config', function () {
           const log = jest.fn();
           transformDeprecations({ csp: { rules: [`script-src 'unsafe-eval'`] } }, log);
           expect(log.mock.calls).toMatchInlineSnapshot(`
-            Array [
-              Array [
-                "csp.rules must contain the 'self' source. Automatically adding to script-src.",
-              ],
-            ]
-          `);
+                        Array [
+                          Array [
+                            "csp.rules must contain the 'self' source. Automatically adding to script-src.",
+                          ],
+                        ]
+                    `);
         });
 
         it('adds self', () => {
diff --git a/src/legacy/server/http/index.js b/src/legacy/server/http/index.js
index 40ac2baa032d63..f8fbc6c4976ff2 100644
--- a/src/legacy/server/http/index.js
+++ b/src/legacy/server/http/index.js
@@ -25,6 +25,7 @@ import Boom from 'boom';
 import { setupVersionCheck } from './version_check';
 import { registerHapiPlugins } from './register_hapi_plugins';
 import { setupBasePathProvider } from './setup_base_path_provider';
+import { setupDefaultRouteProvider } from './setup_default_route_provider';
 import { setupXsrf } from './xsrf';
 
 export default async function (kbnServer, server, config) {
@@ -33,6 +34,8 @@ export default async function (kbnServer, server, config) {
 
   setupBasePathProvider(kbnServer);
 
+  setupDefaultRouteProvider(server);
+
   await registerHapiPlugins(server);
 
   // provide a simple way to expose static directories
@@ -86,10 +89,8 @@ export default async function (kbnServer, server, config) {
   server.route({
     path: '/',
     method: 'GET',
-    handler(req, h) {
-      const basePath = req.getBasePath();
-      const defaultRoute = config.get('server.defaultRoute');
-      return h.redirect(`${basePath}${defaultRoute}`);
+    async handler(req, h) {
+      return h.redirect(await req.getDefaultRoute());
     }
   });
 
diff --git a/src/legacy/server/http/integration_tests/default_route_provider.test.ts b/src/legacy/server/http/integration_tests/default_route_provider.test.ts
new file mode 100644
index 00000000000000..fe8c4649651329
--- /dev/null
+++ b/src/legacy/server/http/integration_tests/default_route_provider.test.ts
@@ -0,0 +1,87 @@
+/*
+ * 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.
+ */
+jest.mock('../../../ui/ui_settings/ui_settings_mixin', () => {
+  return jest.fn();
+});
+
+import * as kbnTestServer from '../../../../test_utils/kbn_server';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { Root } from '../../../../core/server/root';
+
+let mockDefaultRouteSetting: any = '';
+
+describe('default route provider', () => {
+  let root: Root;
+  beforeAll(async () => {
+    root = kbnTestServer.createRoot();
+
+    await root.setup();
+    await root.start();
+
+    const kbnServer = kbnTestServer.getKbnServer(root);
+
+    kbnServer.server.decorate('request', 'getUiSettingsService', function() {
+      return {
+        get: (key: string) => {
+          if (key === 'defaultRoute') {
+            return Promise.resolve(mockDefaultRouteSetting);
+          }
+          throw Error(`unsupported ui setting: ${key}`);
+        },
+        getDefaults: () => {
+          return Promise.resolve({
+            defaultRoute: {
+              value: '/app/kibana',
+            },
+          });
+        },
+      };
+    });
+  }, 30000);
+
+  afterAll(async () => await root.shutdown());
+
+  it('redirects to the configured default route', async function() {
+    mockDefaultRouteSetting = '/app/some/default/route';
+
+    const { status, header } = await kbnTestServer.request.get(root, '/');
+    expect(status).toEqual(302);
+    expect(header).toMatchObject({
+      location: '/app/some/default/route',
+    });
+  });
+
+  const invalidRoutes = [
+    'http://not-your-kibana.com',
+    '///example.com',
+    '//example.com',
+    ' //example.com',
+  ];
+  for (const route of invalidRoutes) {
+    it(`falls back to /app/kibana when the configured route (${route}) is not a valid relative path`, async function() {
+      mockDefaultRouteSetting = route;
+
+      const { status, header } = await kbnTestServer.request.get(root, '/');
+      expect(status).toEqual(302);
+      expect(header).toMatchObject({
+        location: '/app/kibana',
+      });
+    });
+  }
+});
diff --git a/src/legacy/server/http/setup_default_route_provider.ts b/src/legacy/server/http/setup_default_route_provider.ts
new file mode 100644
index 00000000000000..07ff61015a1875
--- /dev/null
+++ b/src/legacy/server/http/setup_default_route_provider.ts
@@ -0,0 +1,74 @@
+/*
+ * 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 { Legacy } from 'kibana';
+import { parse } from 'url';
+
+export function setupDefaultRouteProvider(server: Legacy.Server) {
+  server.decorate('request', 'getDefaultRoute', async function() {
+    // @ts-ignore
+    const request: Legacy.Request = this;
+
+    const serverBasePath: string = server.config().get('server.basePath');
+
+    const uiSettings = request.getUiSettingsService();
+
+    const defaultRoute = await uiSettings.get('defaultRoute');
+    const qualifiedDefaultRoute = `${request.getBasePath()}${defaultRoute}`;
+
+    if (isRelativePath(qualifiedDefaultRoute, serverBasePath)) {
+      return qualifiedDefaultRoute;
+    } else {
+      server.log(
+        ['http', 'warn'],
+        `Ignoring configured default route of '${defaultRoute}', as it is malformed.`
+      );
+
+      const fallbackRoute = (await uiSettings.getDefaults()).defaultRoute.value;
+
+      const qualifiedFallbackRoute = `${request.getBasePath()}${fallbackRoute}`;
+      return qualifiedFallbackRoute;
+    }
+  });
+
+  function isRelativePath(candidatePath: string, basePath = '') {
+    // validate that `candidatePath` is not attempting a redirect to somewhere
+    // outside of this Kibana install
+    const { protocol, hostname, port, pathname } = parse(
+      candidatePath,
+      false /* parseQueryString */,
+      true /* slashesDenoteHost */
+    );
+
+    // We should explicitly compare `protocol`, `port` and `hostname` to null to make sure these are not
+    // detected in the URL at all. For example `hostname` can be empty string for Node URL parser, but
+    // browser (because of various bwc reasons) processes URL differently (e.g. `///abc.com` - for browser
+    // hostname is `abc.com`, but for Node hostname is an empty string i.e. everything between schema (`//`)
+    // and the first slash that belongs to path.
+    if (protocol !== null || hostname !== null || port !== null) {
+      return false;
+    }
+
+    if (!String(pathname).startsWith(basePath)) {
+      return false;
+    }
+
+    return true;
+  }
+}
diff --git a/src/legacy/server/kbn_server.d.ts b/src/legacy/server/kbn_server.d.ts
index 126cb8f8b94756..b3e7078d8b5a9a 100644
--- a/src/legacy/server/kbn_server.d.ts
+++ b/src/legacy/server/kbn_server.d.ts
@@ -26,7 +26,7 @@ import {
   ElasticsearchServiceSetup,
   LoggerFactory,
   SavedObjectsClientContract,
-  SavedObjectsService,
+  SavedObjectsLegacyService,
 } from '../../core/server';
 
 import { LegacyServiceSetupDeps, LegacyServiceStartDeps } from '../../core/server/';
@@ -39,6 +39,8 @@ import { CallClusterWithRequest, ElasticsearchPlugin } from '../core_plugins/ela
 import { CapabilitiesModifier } from './capabilities';
 import { IndexPatternsServiceFactory } from './index_patterns';
 import { Capabilities } from '../../core/public';
+import { IUiSettingsClient } from '../../legacy/ui/ui_settings/ui_settings_service';
+import { UiSettingsServiceFactoryOptions } from '../../legacy/ui/ui_settings/ui_settings_service_factory';
 
 export interface KibanaConfig {
   get<T>(key: string): T;
@@ -62,7 +64,7 @@ declare module 'hapi' {
   interface Server {
     config: () => KibanaConfig;
     indexPatternsServiceFactory: IndexPatternsServiceFactory;
-    savedObjects: SavedObjectsService;
+    savedObjects: SavedObjectsLegacyService;
     usage: { collectorSet: any };
     injectUiAppVars: (pluginName: string, getAppVars: () => { [key: string]: any }) => void;
     getHiddenUiAppById(appId: string): UiApp;
@@ -77,12 +79,15 @@ declare module 'hapi' {
       name: string,
       factoryFn: (request: Request) => Record<string, any>
     ) => void;
+    uiSettingsServiceFactory: (options?: UiSettingsServiceFactoryOptions) => IUiSettingsClient;
+    logWithMetadata: (tags: string[], message: string, meta: Record<string, any>) => void;
   }
 
   interface Request {
     getSavedObjectsClient(options?: SavedObjectsClientProviderOptions): SavedObjectsClientContract;
     getBasePath(): string;
-    getUiSettingsService(): any;
+    getDefaultRoute(): Promise<string>;
+    getUiSettingsService(): IUiSettingsClient;
     getCapabilities(): Promise<Capabilities>;
   }
 
@@ -118,6 +123,7 @@ export default class KbnServer {
   public close(): Promise<void>;
   public afterPluginsInit(callback: () => void): void;
   public applyLoggingConfiguration(settings: any): void;
+  public config: KibanaConfig;
 }
 
 // Re-export commonly used hapi types.
@@ -125,4 +131,4 @@ export { Server, Request, ResponseToolkit } from 'hapi';
 
 // Re-export commonly accessed api types.
 export { IndexPatternsService } from './index_patterns';
-export { SavedObjectsService, SavedObjectsClient } from 'src/core/server';
+export { SavedObjectsLegacyService, SavedObjectsClient } from 'src/core/server';
diff --git a/src/legacy/server/kbn_server.js b/src/legacy/server/kbn_server.js
index 779fd183ab593e..754b5da5258397 100644
--- a/src/legacy/server/kbn_server.js
+++ b/src/legacy/server/kbn_server.js
@@ -24,7 +24,6 @@ import { isWorker } from 'cluster';
 import { fromRoot, pkg } from '../utils';
 import { Config } from './config';
 import loggingConfiguration from './logging/configuration';
-import configSetupMixin from './config/setup';
 import httpMixin from './http';
 import { coreMixin } from './core';
 import { loggingMixin } from './logging';
@@ -50,14 +49,16 @@ import { i18nMixin } from './i18n';
 const rootDir = fromRoot('.');
 
 export default class KbnServer {
-  constructor(settings, core) {
+  constructor(settings, config, core, legacyPlugins) {
     this.name = pkg.name;
     this.version = pkg.version;
     this.build = pkg.build || false;
     this.rootDir = rootDir;
     this.settings = settings || {};
+    this.config = config;
 
     const { setupDeps, startDeps, handledConfigPaths, logger } = core;
+
     this.newPlatform = {
       coreContext: {
         logger,
@@ -70,12 +71,13 @@ export default class KbnServer {
       },
     };
 
+    this.uiExports = legacyPlugins.uiExports;
+    this.pluginSpecs = legacyPlugins.pluginSpecs;
+    this.disabledPluginSpecs = legacyPlugins.disabledPluginSpecs;
+
     this.ready = constant(this.mixin(
       Plugins.waitForInitSetupMixin,
 
-      // sets this.config, reads this.settings
-      configSetupMixin,
-
       // sets this.server
       httpMixin,
 
@@ -101,7 +103,7 @@ export default class KbnServer {
       // tell the config we are done loading plugins
       configCompleteMixin,
 
-      // setup this.uiExports and this.uiBundles
+      // setup this.uiBundles
       uiMixin,
       indexPatternsMixin,
 
@@ -161,8 +163,6 @@ export default class KbnServer {
 
     const { server, config } = this;
 
-    await server.kibanaMigrator.awaitMigration();
-
     if (isWorker) {
       // help parent process know when we are ready
       process.send(['WORKER_LISTENING']);
diff --git a/src/legacy/server/plugins/scan_mixin.js b/src/legacy/server/plugins/scan_mixin.js
index 5e21207482e9da..8deeeb191f7023 100644
--- a/src/legacy/server/plugins/scan_mixin.js
+++ b/src/legacy/server/plugins/scan_mixin.js
@@ -16,96 +16,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
-import * as Rx from 'rxjs';
-import { map, distinct, toArray, tap } from 'rxjs/operators';
-import { findPluginSpecs } from '../../plugin_discovery';
-
 import { Plugin } from './lib';
 
-export async function scanMixin(kbnServer, server, config) {
-  const {
-    pack$,
-    invalidDirectoryError$,
-    invalidPackError$,
-    otherError$,
-    deprecation$,
-    invalidVersionSpec$,
-    spec$,
-    disabledSpec$,
-  } = findPluginSpecs(kbnServer.settings, config);
-
-  const logging$ = Rx.merge(
-    pack$.pipe(
-      tap(definition => {
-        const path = definition.getPath();
-        server.logWithMetadata(['plugin', 'debug'], `Found plugin at ${path}`, {
-          path
-        });
-      })
-    ),
-
-    invalidDirectoryError$.pipe(
-      tap(error => {
-        server.logWithMetadata(['plugin', 'warning'], `${error.code}: Unable to scan directory for plugins "${error.path}"`, {
-          err: error,
-          dir: error.path
-        });
-      })
-    ),
-
-    invalidPackError$.pipe(
-      tap(error => {
-        server.logWithMetadata(['plugin', 'warning'], `Skipping non-plugin directory at ${error.path}`, {
-          path: error.path
-        });
-      })
-    ),
-
-    otherError$.pipe(
-      tap(error => {
-        // rethrow unhandled errors, which will fail the server
-        throw error;
-      })
-    ),
-
-    invalidVersionSpec$.pipe(
-      map(spec => {
-        const name = spec.getId();
-        const pluginVersion = spec.getExpectedKibanaVersion();
-        const kibanaVersion = config.get('pkg.version');
-        return `Plugin "${name}" was disabled because it expected Kibana version "${pluginVersion}", and found "${kibanaVersion}".`;
-      }),
-      distinct(),
-      tap(message => {
-        server.log(['plugin', 'warning'], message);
-      })
-    ),
-
-    deprecation$.pipe(
-      tap(({ spec, message }) => {
-        server.log(['warning', spec.getConfigPrefix(), 'config', 'deprecation'], message);
-      })
-    )
-  );
-
-  const enabledSpecs$ = spec$.pipe(
-    toArray(),
-    tap(specs => {
-      kbnServer.pluginSpecs = specs;
-    })
-  );
-
-  const disabledSpecs$ = disabledSpec$.pipe(
-    toArray(),
-    tap(specs => {
-      kbnServer.disabledPluginSpecs = specs;
-    })
-  );
-
-  // await completion of enabledSpecs$, disabledSpecs$, and logging$
-  await Rx.merge(logging$, enabledSpecs$, disabledSpecs$).toPromise();
-
+export async function scanMixin(kbnServer) {
   kbnServer.plugins = kbnServer.pluginSpecs.map(spec => (
     new Plugin(kbnServer, spec)
   ));
diff --git a/src/legacy/server/saved_objects/lib/create_saved_objects_stream_from_ndjson.ts b/src/legacy/server/saved_objects/lib/create_saved_objects_stream_from_ndjson.ts
index fa82e54e9fb0ac..10047284f5c96f 100644
--- a/src/legacy/server/saved_objects/lib/create_saved_objects_stream_from_ndjson.ts
+++ b/src/legacy/server/saved_objects/lib/create_saved_objects_stream_from_ndjson.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 import { Readable } from 'stream';
-import { SavedObject } from 'kibana/server';
+import { SavedObject } from 'src/core/server';
 import { createSplitStream, createMapStream, createFilterStream } from '../../../utils/streams';
 
 export function createSavedObjectsStreamFromNdJson(ndJsonStream: Readable) {
diff --git a/src/legacy/server/saved_objects/routes/find.ts b/src/legacy/server/saved_objects/routes/find.ts
index bb8fb21aea29c7..f8cb8c50d96843 100644
--- a/src/legacy/server/saved_objects/routes/find.ts
+++ b/src/legacy/server/saved_objects/routes/find.ts
@@ -39,6 +39,7 @@ interface FindRequest extends WithoutQueryAndParams<Hapi.Request> {
       id: string;
     };
     fields?: string[];
+    filter?: string;
   };
 }
 
@@ -79,6 +80,9 @@ export const createFindRoute = (prereqs: Prerequisites) => ({
           fields: Joi.array()
             .items(Joi.string())
             .single(),
+          filter: Joi.string()
+            .allow('')
+            .optional(),
         })
         .default(),
     },
@@ -94,6 +98,7 @@ export const createFindRoute = (prereqs: Prerequisites) => ({
         sortField: query.sort_field,
         hasReference: query.has_reference,
         fields: query.fields,
+        filter: query.filter,
       });
     },
   },
diff --git a/src/legacy/server/saved_objects/saved_objects_mixin.js b/src/legacy/server/saved_objects/saved_objects_mixin.js
index 924bea15590731..156c92ef6bdc05 100644
--- a/src/legacy/server/saved_objects/saved_objects_mixin.js
+++ b/src/legacy/server/saved_objects/saved_objects_mixin.js
@@ -20,13 +20,13 @@
 // Disable lint errors for imports from src/core/server/saved_objects until SavedObjects migration is complete
 /* eslint-disable @kbn/eslint/no-restricted-paths */
 
-import { KibanaMigrator } from '../../../core/server/saved_objects/migrations';
 import { SavedObjectsSchema } from '../../../core/server/saved_objects/schema';
 import { SavedObjectsSerializer } from '../../../core/server/saved_objects/serialization';
 import {
   SavedObjectsClient,
   SavedObjectsRepository,
   ScopedSavedObjectsClientProvider,
+  SavedObjectsCacheIndexPatterns,
   getSortedObjectsForExport,
   importSavedObjects,
   resolveImportErrors,
@@ -58,12 +58,13 @@ function getImportableAndExportableTypes({ kbnServer, visibleTypes }) {
 }
 
 export function savedObjectsMixin(kbnServer, server) {
-  const migrator = new KibanaMigrator({ kbnServer });
+  const migrator = kbnServer.newPlatform.start.core.savedObjects.migrator;
   const mappings = migrator.getActiveMappings();
   const allTypes = Object.keys(getRootPropertiesObjects(mappings));
   const schema = new SavedObjectsSchema(kbnServer.uiExports.savedObjectSchemas);
   const visibleTypes = allTypes.filter(type => !schema.isHiddenType(type));
   const importableAndExportableTypes = getImportableAndExportableTypes({ kbnServer, visibleTypes });
+  const cacheIndexPatterns = new SavedObjectsCacheIndexPatterns();
 
   server.decorate('server', 'kibanaMigrator', migrator);
   server.decorate(
@@ -114,11 +115,18 @@ export function savedObjectsMixin(kbnServer, server) {
     });
     const combinedTypes = visibleTypes.concat(extraTypes);
     const allowedTypes = [...new Set(combinedTypes)];
+
+    if (cacheIndexPatterns.getIndexPatternsService() == null) {
+      cacheIndexPatterns.setIndexPatternsService(
+        server.indexPatternsServiceFactory({ callCluster })
+      );
+    }
     const config = server.config();
 
     return new SavedObjectsRepository({
       index: config.get('kibana.index'),
       config,
+      cacheIndexPatterns,
       migrator,
       mappings,
       schema,
diff --git a/src/legacy/server/saved_objects/saved_objects_mixin.test.js b/src/legacy/server/saved_objects/saved_objects_mixin.test.js
index 3bf1aa8139cc2a..d3a40583dfe23e 100644
--- a/src/legacy/server/saved_objects/saved_objects_mixin.test.js
+++ b/src/legacy/server/saved_objects/saved_objects_mixin.test.js
@@ -18,6 +18,48 @@
  */
 
 import { savedObjectsMixin } from './saved_objects_mixin';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { mockKibanaMigrator } from '../../../core/server/saved_objects/migrations/kibana/kibana_migrator.mock';
+
+const savedObjectMappings = [
+  {
+    pluginId: 'testtype',
+    properties: {
+      testtype: {
+        properties: {
+          name: { type: 'keyword' },
+        },
+      },
+    },
+  },
+  {
+    pluginId: 'testtype2',
+    properties: {
+      doc1: {
+        properties: {
+          name: { type: 'keyword' },
+        },
+      },
+      doc2: {
+        properties: {
+          name: { type: 'keyword' },
+        },
+      },
+    },
+  },
+  {
+    pluginId: 'secretPlugin',
+    properties: {
+      hiddentype: {
+        properties: {
+          secret: { type: 'keyword' },
+        },
+      },
+    },
+  },
+];
+
+const migrator = mockKibanaMigrator.create({ savedObjectMappings });
 
 describe('Saved Objects Mixin', () => {
   let mockKbnServer;
@@ -42,6 +84,11 @@ describe('Saved Objects Mixin', () => {
           get: stubConfig,
         };
       },
+      indexPatternsServiceFactory: () => {
+        return {
+          getFieldsForWildcard: jest.fn(),
+        };
+      },
       plugins: {
         elasticsearch: {
           getCluster: () => {
@@ -55,6 +102,9 @@ describe('Saved Objects Mixin', () => {
       },
     };
     mockKbnServer = {
+      newPlatform: {
+        start: { core: { savedObjects: { migrator } } },
+      },
       server: mockServer,
       ready: () => {},
       pluginSpecs: {
@@ -63,6 +113,7 @@ describe('Saved Objects Mixin', () => {
         },
       },
       uiExports: {
+        savedObjectMappings,
         savedObjectSchemas: {
           hiddentype: {
             hidden: true,
@@ -71,43 +122,6 @@ describe('Saved Objects Mixin', () => {
             indexPattern: 'other-index',
           },
         },
-        savedObjectMappings: [
-          {
-            pluginId: 'testtype',
-            properties: {
-              testtype: {
-                properties: {
-                  name: { type: 'keyword' },
-                },
-              },
-            },
-          },
-          {
-            pluginId: 'testtype2',
-            properties: {
-              doc1: {
-                properties: {
-                  name: { type: 'keyword' },
-                },
-              },
-              doc2: {
-                properties: {
-                  name: { type: 'keyword' },
-                },
-              },
-            },
-          },
-          {
-            pluginId: 'secretPlugin',
-            properties: {
-              hiddentype: {
-                properties: {
-                  secret: { type: 'keyword' },
-                },
-              },
-            },
-          },
-        ],
       },
     };
   });
@@ -290,7 +304,7 @@ describe('Saved Objects Mixin', () => {
       });
 
       it('should call underlining callCluster', async () => {
-        stubCallCluster.mockImplementation(method => {
+        mockCallCluster.mockImplementation(method => {
           if (method === 'indices.get') {
             return { status: 404 };
           } else if (method === 'indices.getAlias') {
@@ -301,7 +315,7 @@ describe('Saved Objects Mixin', () => {
         });
         const client = await service.getScopedSavedObjectsClient();
         await client.create('testtype');
-        expect(stubCallCluster).toHaveBeenCalled();
+        expect(mockCallCluster).toHaveBeenCalled();
       });
     });
 
diff --git a/src/legacy/ui/public/chrome/directives/kbn_chrome.html b/src/legacy/ui/public/chrome/directives/kbn_chrome.html
index 541082e68de58d..ced89287d310f2 100644
--- a/src/legacy/ui/public/chrome/directives/kbn_chrome.html
+++ b/src/legacy/ui/public/chrome/directives/kbn_chrome.html
@@ -1,9 +1,9 @@
 <div class="app-wrapper-panel">
   <div id="globalBannerList"></div>
 
-  <div
+  <main
     class="application"
     ng-class="'tab-' + getFirstPathSegment() + ' ' + chrome.getApplicationClasses()"
     ng-view
-  ></div>
+  ></main>
 </div>
diff --git a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav.js b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav.js
index f2faeee75810ee..79365eb5cf1cc5 100644
--- a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav.js
+++ b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav.js
@@ -21,9 +21,6 @@ import 'ngreact';
 import { wrapInI18nContext } from 'ui/i18n';
 import { uiModules } from 'ui/modules';
 import { TopNavMenu } from '../../../core_plugins/kibana_react/public';
-import { Storage } from 'ui/storage';
-import { npStart } from 'ui/new_platform';
-import { start as data } from '../../../core_plugins/data/public/legacy';
 
 const module = uiModules.get('kibana');
 
@@ -43,25 +40,10 @@ module.directive('kbnTopNav', () => {
       // of the config array's disableButton function return value changes.
       child.setAttribute('disabled-buttons', 'disabledButtons');
 
-      // Pass in storage
-      const localStorage = new Storage(window.localStorage);
-      child.setAttribute('http', 'http');
-      child.setAttribute('store', 'store');
-      child.setAttribute('time-history', 'timeHistory');
-      child.setAttribute('ui-settings', 'uiSettings');
-      child.setAttribute('saved-objects', 'savedObjects');
-      child.setAttribute('notifications', 'notifications');
-
       // Append helper directive
       elem.append(child);
 
       const linkFn = ($scope, _, $attr) => {
-        $scope.store = localStorage;
-        $scope.http = npStart.core.http;
-        $scope.uiSettings = npStart.core.uiSettings;
-        $scope.savedObjects = npStart.core.savedObjects;
-        $scope.notifications = npStart.core.notifications;
-        $scope.timeHistory = data.timefilter.history;
 
         // Watch config changes
         $scope.$watch(() => {
@@ -95,20 +77,12 @@ module.directive('kbnTopNavHelper', (reactDirective) => {
   return reactDirective(
     wrapInI18nContext(TopNavMenu),
     [
-      ['name', { watchDepth: 'reference' }],
       ['config', { watchDepth: 'value' }],
       ['disabledButtons', { watchDepth: 'reference' }],
 
       ['query', { watchDepth: 'reference' }],
       ['savedQuery', { watchDepth: 'reference' }],
-      ['store', { watchDepth: 'reference' }],
-      ['uiSettings', { watchDepth: 'reference' }],
-      ['savedObjects', { watchDepth: 'reference' }],
-      ['notifications', { watchDepth: 'reference' }],
       ['intl', { watchDepth: 'reference' }],
-      ['timeHistory', { watchDepth: 'reference' }],
-      ['store', { watchDepth: 'reference' }],
-      ['http', { watchDepth: 'reference' }],
 
       ['onQuerySubmit', { watchDepth: 'reference' }],
       ['onFiltersUpdated', { watchDepth: 'reference' }],
diff --git a/src/legacy/ui/public/new_platform/new_platform.test.mocks.ts b/src/legacy/ui/public/new_platform/new_platform.test.mocks.ts
new file mode 100644
index 00000000000000..e660ad1f55840a
--- /dev/null
+++ b/src/legacy/ui/public/new_platform/new_platform.test.mocks.ts
@@ -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.
+ */
+
+export const setRootControllerMock = jest.fn();
+
+jest.doMock('ui/chrome', () => ({
+  setRootController: setRootControllerMock,
+}));
diff --git a/src/legacy/ui/public/new_platform/new_platform.test.ts b/src/legacy/ui/public/new_platform/new_platform.test.ts
new file mode 100644
index 00000000000000..cbdaccd65f94bb
--- /dev/null
+++ b/src/legacy/ui/public/new_platform/new_platform.test.ts
@@ -0,0 +1,83 @@
+/*
+ * 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 { setRootControllerMock } from './new_platform.test.mocks';
+import { legacyAppRegister, __reset__ } from './new_platform';
+
+describe('ui/new_platform', () => {
+  describe('legacyAppRegister', () => {
+    beforeEach(() => {
+      setRootControllerMock.mockReset();
+      __reset__();
+    });
+
+    const registerApp = () => {
+      const unmountMock = jest.fn();
+      const mountMock = jest.fn(() => unmountMock);
+      legacyAppRegister({
+        id: 'test',
+        title: 'Test',
+        mount: mountMock,
+      });
+      return { mountMock, unmountMock };
+    };
+
+    test('sets ui/chrome root controller', () => {
+      registerApp();
+      expect(setRootControllerMock).toHaveBeenCalledWith('test', expect.any(Function));
+    });
+
+    test('throws if called more than once', () => {
+      registerApp();
+      expect(registerApp).toThrowErrorMatchingInlineSnapshot(
+        `"core.application.register may only be called once for legacy plugins."`
+      );
+    });
+
+    test('controller calls app.mount when invoked', () => {
+      const { mountMock } = registerApp();
+      const controller = setRootControllerMock.mock.calls[0][1];
+      const scopeMock = { $on: jest.fn() };
+      const elementMock = [document.createElement('div')];
+
+      controller(scopeMock, elementMock);
+      expect(mountMock).toHaveBeenCalledWith(expect.any(Object), {
+        element: elementMock[0],
+        appBasePath: '',
+      });
+    });
+
+    test('controller calls unmount when $scope.$destroy', async () => {
+      const { unmountMock } = registerApp();
+      const controller = setRootControllerMock.mock.calls[0][1];
+      const scopeMock = { $on: jest.fn() };
+      const elementMock = [document.createElement('div')];
+
+      controller(scopeMock, elementMock);
+      // Flush promise queue. Must be done this way because the controller cannot return a Promise without breaking
+      // angular.
+      await new Promise(resolve => setTimeout(resolve, 1));
+
+      const [event, eventHandler] = scopeMock.$on.mock.calls[0];
+      expect(event).toEqual('$destroy');
+      eventHandler();
+      expect(unmountMock).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/legacy/ui/public/new_platform/new_platform.ts b/src/legacy/ui/public/new_platform/new_platform.ts
index ed13af591525c4..b86f9cde0125c2 100644
--- a/src/legacy/ui/public/new_platform/new_platform.ts
+++ b/src/legacy/ui/public/new_platform/new_platform.ts
@@ -16,9 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { IScope } from 'angular';
+
 import { IUiActionsStart, IUiActionsSetup } from 'src/plugins/ui_actions/public';
 import { Start as EmbeddableStart, Setup as EmbeddableSetup } from 'src/plugins/embeddable/public';
-import { LegacyCoreSetup, LegacyCoreStart } from '../../../../core/public';
+import { LegacyCoreSetup, LegacyCoreStart, App } from '../../../../core/public';
 import { Plugin as DataPlugin } from '../../../../plugins/data/public';
 import { Plugin as ExpressionsPlugin } from '../../../../plugins/expressions/public';
 import {
@@ -63,14 +65,44 @@ export function __reset__() {
   npSetup.plugins = {} as any;
   npStart.core = (null as unknown) as LegacyCoreStart;
   npStart.plugins = {} as any;
+  legacyAppRegistered = false;
 }
 
 export function __setup__(coreSetup: LegacyCoreSetup, plugins: PluginsSetup) {
   npSetup.core = coreSetup;
   npSetup.plugins = plugins;
+
+  // Setup compatibility layer for AppService in legacy platform
+  npSetup.core.application.register = legacyAppRegister;
 }
 
 export function __start__(coreStart: LegacyCoreStart, plugins: PluginsStart) {
   npStart.core = coreStart;
   npStart.plugins = plugins;
 }
+
+/** Flag used to ensure `legacyAppRegister` is only called once. */
+let legacyAppRegistered = false;
+
+/**
+ * Exported for testing only. Use `npSetup.core.application.register` in legacy apps.
+ * @internal
+ */
+export const legacyAppRegister = (app: App) => {
+  if (legacyAppRegistered) {
+    throw new Error(`core.application.register may only be called once for legacy plugins.`);
+  }
+  legacyAppRegistered = true;
+
+  require('ui/chrome').setRootController(app.id, ($scope: IScope, $element: JQLite) => {
+    const element = $element[0];
+
+    // Root controller cannot return a Promise so use an internal async function and call it immediately
+    (async () => {
+      const unmount = await app.mount({ core: npStart.core }, { element, appBasePath: '' });
+      $scope.$on('$destroy', () => {
+        unmount();
+      });
+    })();
+  });
+};
diff --git a/src/legacy/ui/public/persisted_log/directive.js b/src/legacy/ui/public/persisted_log/directive.js
deleted file mode 100644
index 29f2f93093aeb4..00000000000000
--- a/src/legacy/ui/public/persisted_log/directive.js
+++ /dev/null
@@ -1,26 +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 { uiModules } from '../modules';
-import { PersistedLog } from './persisted_log';
-
-uiModules.get('kibana/persisted_log')
-  .factory('PersistedLog', function () {
-    return PersistedLog;
-  });
diff --git a/src/legacy/ui/public/persisted_log/index.ts b/src/legacy/ui/public/persisted_log/index.ts
index 8821b4d7079a0a..52de69b9c50bfa 100644
--- a/src/legacy/ui/public/persisted_log/index.ts
+++ b/src/legacy/ui/public/persisted_log/index.ts
@@ -17,8 +17,5 @@
  * under the License.
  */
 
-// @ts-ignore
-import './directive';
-
 export { PersistedLog } from './persisted_log';
 export { recentlyAccessed } from './recently_accessed';
diff --git a/src/legacy/ui/public/registry/field_formats.js b/src/legacy/ui/public/registry/field_formats.js
index 8581e9232e4e87..9b6ef8609a96b8 100644
--- a/src/legacy/ui/public/registry/field_formats.js
+++ b/src/legacy/ui/public/registry/field_formats.js
@@ -18,13 +18,13 @@
  */
 
 import { memoize, forOwn, isFunction } from 'lodash';
-import chrome from '../chrome';
+import { npStart } from 'ui/new_platform';
 import { FieldFormat } from '../../../../plugins/data/common/field_formats';
 
 class FieldFormatRegistry {
   constructor() {
     this.fieldFormats = new Map();
-    this._uiSettings = chrome.getUiSettingsClient();
+    this._uiSettings = npStart.core.uiSettings;
     this.getConfig = (...args) => this._uiSettings.get(...args);
     this._defaultMap = [];
     this.init();
diff --git a/src/legacy/ui/public/saved_objects/saved_object.js b/src/legacy/ui/public/saved_objects/saved_object.js
index 2da1573d503a9a..cf83e6ef057f8b 100644
--- a/src/legacy/ui/public/saved_objects/saved_object.js
+++ b/src/legacy/ui/public/saved_objects/saved_object.js
@@ -39,7 +39,7 @@ import { SearchSourceProvider } from '../courier/search_source';
 import { findObjectByTitle } from './find_object_by_title';
 import { SavedObjectsClientProvider } from './saved_objects_client_provider';
 import { migrateLegacyQuery } from '../utils/migrate_legacy_query';
-import { recentlyAccessed } from '../persisted_log';
+import { npStart } from 'ui/new_platform';
 import { i18n } from '@kbn/i18n';
 
 /**
@@ -512,7 +512,7 @@ export function SavedObjectProvider(Promise, Private, confirmModalPromise, index
         })
         .then(() => {
           if (this.showInRecentlyAccessed && this.getFullPath) {
-            recentlyAccessed.add(this.getFullPath(), this.title, this.id);
+            npStart.core.chrome.recentlyAccessed.add(this.getFullPath(), this.title, this.id);
           }
           this.isSaving = false;
           this.lastSavedTitle = this.title;
diff --git a/src/legacy/ui/public/styles/_legacy/components/_sidebar.scss b/src/legacy/ui/public/styles/_legacy/components/_sidebar.scss
index a21f8fed525e7d..571064a1f29c4e 100644
--- a/src/legacy/ui/public/styles/_legacy/components/_sidebar.scss
+++ b/src/legacy/ui/public/styles/_legacy/components/_sidebar.scss
@@ -1,8 +1,8 @@
 // ONLY USED IN DISCOVER
 
 .sidebar-container {
-  padding-left: $euiSizeS !important;
-  padding-right: $euiSizeS !important;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
   background-color: $euiColorLightestShade;
   border-right-color: transparent;
   border-bottom-color: transparent;
diff --git a/src/legacy/ui/public/vis/__tests__/_vis.js b/src/legacy/ui/public/vis/__tests__/_vis.js
index 9ecfd90b29fe5c..5a2f93ab35b500 100644
--- a/src/legacy/ui/public/vis/__tests__/_vis.js
+++ b/src/legacy/ui/public/vis/__tests__/_vis.js
@@ -22,7 +22,7 @@ import ngMock from 'ng_mock';
 import expect from '@kbn/expect';
 import { VisProvider } from '..';
 import FixturesStubbedLogstashIndexPatternProvider from 'fixtures/stubbed_logstash_index_pattern';
-import { start as visualizations } from '../../../../core_plugins/visualizations/public/legacy';
+import { start as visualizations } from '../../../../core_plugins/visualizations/public/np_ready/public/legacy';
 
 describe('Vis Class', function () {
   let indexPattern;
diff --git a/src/legacy/ui/public/vis/editors/default/components/__snapshots__/agg_group.test.tsx.snap b/src/legacy/ui/public/vis/editors/default/components/__snapshots__/agg_group.test.tsx.snap
index 813b7978d26671..29af0887db2b8c 100644
--- a/src/legacy/ui/public/vis/editors/default/components/__snapshots__/agg_group.test.tsx.snap
+++ b/src/legacy/ui/public/vis/editors/default/components/__snapshots__/agg_group.test.tsx.snap
@@ -10,9 +10,9 @@ exports[`DefaultEditorAgg component should init with the default set of props 1`
     <eui-title
       size="xs"
     >
-      <div>
+      <h3>
         Metrics
-      </div>
+      </h3>
     </eui-title>
     <eui-spacer
       size="s"
diff --git a/src/legacy/ui/public/vis/editors/default/components/agg.test.tsx b/src/legacy/ui/public/vis/editors/default/components/agg.test.tsx
index 8f49c93b5c152e..b87eb3f5fb303c 100644
--- a/src/legacy/ui/public/vis/editors/default/components/agg.test.tsx
+++ b/src/legacy/ui/public/vis/editors/default/components/agg.test.tsx
@@ -61,6 +61,7 @@ describe('DefaultEditorAgg component', () => {
       dragHandleProps: null,
       formIsTouched: false,
       groupName: AggGroupNames.Metrics,
+      isDisabled: false,
       isDraggable: false,
       isLastBucket: false,
       isRemovable: false,
@@ -200,6 +201,18 @@ describe('DefaultEditorAgg component', () => {
       expect(defaultProps.onToggleEnableAgg).toBeCalledWith(defaultProps.agg, false);
     });
 
+    it('should disable the disableAggregation button', () => {
+      defaultProps.isDisabled = true;
+      defaultProps.isRemovable = true;
+      const comp = mount(<DefaultEditorAgg {...defaultProps} />);
+
+      expect(
+        comp
+          .find('EuiButtonIcon[data-test-subj="toggleDisableAggregationBtn disable"]')
+          .prop('disabled')
+      ).toBeTruthy();
+    });
+
     it('should enable agg', () => {
       defaultProps.agg.enabled = false;
       const comp = mount(<DefaultEditorAgg {...defaultProps} />);
diff --git a/src/legacy/ui/public/vis/editors/default/components/agg.tsx b/src/legacy/ui/public/vis/editors/default/components/agg.tsx
index e8b4839c8f85e1..345c9254ff6c15 100644
--- a/src/legacy/ui/public/vis/editors/default/components/agg.tsx
+++ b/src/legacy/ui/public/vis/editors/default/components/agg.tsx
@@ -37,6 +37,7 @@ export interface DefaultEditorAggProps extends DefaultEditorAggCommonProps {
   aggIndex: number;
   aggIsTooLow: boolean;
   dragHandleProps: {} | null;
+  isDisabled: boolean;
   isDraggable: boolean;
   isLastBucket: boolean;
   isRemovable: boolean;
@@ -49,6 +50,7 @@ function DefaultEditorAgg({
   dragHandleProps,
   formIsTouched,
   groupName,
+  isDisabled,
   isDraggable,
   isLastBucket,
   isRemovable,
@@ -142,6 +144,7 @@ function DefaultEditorAgg({
       actionIcons.push({
         id: 'disableAggregation',
         color: 'text',
+        disabled: isDisabled,
         type: 'eye',
         onClick: () => onToggleEnableAgg(agg, false),
         tooltip: i18n.translate('common.ui.vis.editors.agg.disableAggButtonTooltip', {
@@ -205,6 +208,7 @@ function DefaultEditorAgg({
           return (
             <EuiToolTip key={icon.id} position="bottom" content={icon.tooltip}>
               <EuiButtonIcon
+                disabled={icon.disabled}
                 iconType={icon.type}
                 color={icon.color as EuiButtonIconProps['color']}
                 onClick={icon.onClick}
diff --git a/src/legacy/ui/public/vis/editors/default/components/agg_group.tsx b/src/legacy/ui/public/vis/editors/default/components/agg_group.tsx
index a5dd5f28fa9f36..6d3b5fc4e63557 100644
--- a/src/legacy/ui/public/vis/editors/default/components/agg_group.tsx
+++ b/src/legacy/ui/public/vis/editors/default/components/agg_group.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { useEffect, useReducer } from 'react';
+import React, { useEffect, useReducer, useMemo } from 'react';
 import {
   EuiTitle,
   EuiDragDropContext,
@@ -33,13 +33,18 @@ import { aggGroupNamesMap, AggGroupNames } from '../agg_groups';
 import { DefaultEditorAgg } from './agg';
 import { DefaultEditorAggAdd } from './agg_add';
 import { DefaultEditorAggCommonProps } from './agg_common_props';
-import { isInvalidAggsTouched, isAggRemovable, calcAggIsTooLow } from './agg_group_helper';
+import {
+  isInvalidAggsTouched,
+  isAggRemovable,
+  calcAggIsTooLow,
+  getEnabledMetricAggsCount,
+} from './agg_group_helper';
 import { aggGroupReducer, initAggsState, AGGS_ACTION_KEYS } from './agg_group_state';
 import { Schema } from '../schemas';
 
 export interface DefaultEditorAggGroupProps extends DefaultEditorAggCommonProps {
   schemas: Schema[];
-  addSchema: (schems: Schema) => void;
+  addSchema: (schemas: Schema) => void;
   reorderAggs: (group: AggConfig[]) => void;
 }
 
@@ -77,6 +82,10 @@ function DefaultEditorAggGroup({
 
   const isGroupValid = Object.values(aggsState).every(item => item.valid);
   const isAllAggsTouched = isInvalidAggsTouched(aggsState);
+  const isMetricAggregationDisabled = useMemo(
+    () => groupName === AggGroupNames.Metrics && getEnabledMetricAggsCount(group) === 1,
+    [groupName, group]
+  );
 
   useEffect(() => {
     // when isAllAggsTouched is true, it means that all invalid aggs are touched and we will set ngModel's touched to true
@@ -132,7 +141,7 @@ function DefaultEditorAggGroup({
     <EuiDragDropContext onDragEnd={onDragEnd}>
       <EuiPanel paddingSize="s">
         <EuiTitle size="xs">
-          <div>{groupNameLabel}</div>
+          <h3>{groupNameLabel}</h3>
         </EuiTitle>
         <EuiSpacer size="s" />
         <EuiDroppable droppableId={`agg_group_dnd_${groupName}`}>
@@ -155,6 +164,7 @@ function DefaultEditorAggGroup({
                     isDraggable={stats.count > 1}
                     isLastBucket={groupName === AggGroupNames.Buckets && index === group.length - 1}
                     isRemovable={isAggRemovable(agg, group)}
+                    isDisabled={agg.schema.name === 'metric' && isMetricAggregationDisabled}
                     lastParentPipelineAggTitle={lastParentPipelineAggTitle}
                     metricAggs={metricAggs}
                     state={state}
diff --git a/src/legacy/ui/public/vis/editors/default/components/agg_group_helper.test.ts b/src/legacy/ui/public/vis/editors/default/components/agg_group_helper.test.ts
index b2dac344950bd4..6bb27d4a0c14eb 100644
--- a/src/legacy/ui/public/vis/editors/default/components/agg_group_helper.test.ts
+++ b/src/legacy/ui/public/vis/editors/default/components/agg_group_helper.test.ts
@@ -18,7 +18,12 @@
  */
 
 import { AggConfig } from '../../../../agg_types/agg_config';
-import { isAggRemovable, calcAggIsTooLow, isInvalidAggsTouched } from './agg_group_helper';
+import {
+  isAggRemovable,
+  calcAggIsTooLow,
+  isInvalidAggsTouched,
+  getEnabledMetricAggsCount,
+} from './agg_group_helper';
 import { AggsState } from './agg_group_state';
 
 describe('DefaultEditorGroup helpers', () => {
@@ -46,6 +51,7 @@ describe('DefaultEditorGroup helpers', () => {
       } as AggConfig,
     ];
   });
+
   describe('isAggRemovable', () => {
     it('should return true when the number of aggs with the same schema is above the min', () => {
       const isRemovable = isAggRemovable(group[0], group);
@@ -60,6 +66,23 @@ describe('DefaultEditorGroup helpers', () => {
     });
   });
 
+  describe('getEnabledMetricAggsCount', () => {
+    it('should return 1 when there is the only enabled agg', () => {
+      group[0].enabled = true;
+      const enabledAggs = getEnabledMetricAggsCount(group);
+
+      expect(enabledAggs).toBe(1);
+    });
+
+    it('should return 2 when there are multiple enabled aggs', () => {
+      group[0].enabled = true;
+      group[1].enabled = true;
+      const enabledAggs = getEnabledMetricAggsCount(group);
+
+      expect(enabledAggs).toBe(2);
+    });
+  });
+
   describe('calcAggIsTooLow', () => {
     it('should return false when agg.schema.mustBeFirst has falsy value', () => {
       const isRemovable = calcAggIsTooLow(group[1], 0, group);
diff --git a/src/legacy/ui/public/vis/editors/default/components/agg_group_helper.tsx b/src/legacy/ui/public/vis/editors/default/components/agg_group_helper.tsx
index 5bfb2cdfb48d8b..847aa0b87d2d30 100644
--- a/src/legacy/ui/public/vis/editors/default/components/agg_group_helper.tsx
+++ b/src/legacy/ui/public/vis/editors/default/components/agg_group_helper.tsx
@@ -17,22 +17,28 @@
  * under the License.
  */
 
-import { findIndex, reduce, isEmpty } from 'lodash';
+import { findIndex, isEmpty } from 'lodash';
 import { AggConfig } from '../../../../agg_types/agg_config';
 import { AggsState } from './agg_group_state';
 
 const isAggRemovable = (agg: AggConfig, group: AggConfig[]) => {
-  const metricCount = reduce(
-    group,
-    (count, aggregation: AggConfig) => {
-      return aggregation.schema.name === agg.schema.name ? ++count : count;
-    },
+  const metricCount = group.reduce(
+    (count, aggregation: AggConfig) =>
+      aggregation.schema.name === agg.schema.name ? ++count : count,
     0
   );
   // make sure the the number of these aggs is above the min
   return metricCount > agg.schema.min;
 };
 
+const getEnabledMetricAggsCount = (group: AggConfig[]) => {
+  return group.reduce(
+    (count, aggregation: AggConfig) =>
+      aggregation.schema.name === 'metric' && aggregation.enabled ? ++count : count,
+    0
+  );
+};
+
 const calcAggIsTooLow = (agg: AggConfig, aggIndex: number, group: AggConfig[]) => {
   if (!agg.schema.mustBeFirst) {
     return false;
@@ -59,4 +65,4 @@ function isInvalidAggsTouched(aggsState: AggsState) {
   return invalidAggs.every(agg => agg.touched);
 }
 
-export { isAggRemovable, calcAggIsTooLow, isInvalidAggsTouched };
+export { isAggRemovable, calcAggIsTooLow, isInvalidAggsTouched, getEnabledMetricAggsCount };
diff --git a/src/legacy/ui/public/vis/editors/default/controls/filter.tsx b/src/legacy/ui/public/vis/editors/default/controls/filter.tsx
index 779d5acf5b411e..cceaf86b5d85ca 100644
--- a/src/legacy/ui/public/vis/editors/default/controls/filter.tsx
+++ b/src/legacy/ui/public/vis/editors/default/controls/filter.tsx
@@ -24,6 +24,7 @@ import { Query, QueryBarInput } from 'plugins/data';
 import { AggConfig } from '../../..';
 import { npStart } from '../../../../new_platform';
 import { Storage } from '../../../../storage';
+import { KibanaContextProvider } from '../../../../../../../plugins/kibana_react/public';
 const localStorage = new Storage(window.localStorage);
 
 interface FilterRowProps {
@@ -82,6 +83,7 @@ function FilterRow({
     </div>
   );
 
+  // TODO: KibanaContextProvider should be raised to the top of the vis plugin
   return (
     <EuiForm>
       <EuiFormRow
@@ -89,20 +91,24 @@ function FilterRow({
         labelAppend={FilterControl}
         fullWidth={true}
       >
-        <QueryBarInput
-          query={value}
-          indexPatterns={[agg.getIndexPattern()]}
-          appName="filtersAgg"
-          onChange={(query: Query) => onChangeValue(id, query, customLabel)}
-          disableAutoFocus={!autoFocus}
-          data-test-subj={dataTestSubj}
-          bubbleSubmitEvent={true}
-          languageSwitcherPopoverAnchorPosition="leftDown"
-          store={localStorage}
-          uiSettings={npStart.core.uiSettings}
-          http={npStart.core.http}
-          savedObjectsClient={npStart.core.savedObjects.client}
-        />
+        <KibanaContextProvider
+          services={{
+            appName: 'filtersAgg',
+            store: localStorage,
+            autocomplete: npStart.plugins.data.autocomplete,
+            ...npStart.core,
+          }}
+        >
+          <QueryBarInput
+            query={value}
+            indexPatterns={[agg.getIndexPattern()]}
+            onChange={(query: Query) => onChangeValue(id, query, customLabel)}
+            disableAutoFocus={!autoFocus}
+            dataTestSubj={dataTestSubj}
+            bubbleSubmitEvent={true}
+            languageSwitcherPopoverAnchorPosition="leftDown"
+          />
+        </KibanaContextProvider>
       </EuiFormRow>
       {showCustomLabel ? (
         <EuiFormRow
diff --git a/src/legacy/ui/public/vis/editors/default/sidebar.html b/src/legacy/ui/public/vis/editors/default/sidebar.html
index 0434534bddbfdb..b0a03e461fc1ce 100644
--- a/src/legacy/ui/public/vis/editors/default/sidebar.html
+++ b/src/legacy/ui/public/vis/editors/default/sidebar.html
@@ -7,7 +7,7 @@
     ng-keydown="submitEditorWithKeyboard($event)"
   ><!-- see http://goo.gl/9kgz5w -->
 
-    <div
+    <h2
       css-truncate
       aria-label="{{
         ::'common.ui.vis.editors.sidebar.indexPatternAriaLabel' | i18n:
@@ -22,7 +22,7 @@
       id="sidebarIndexPatternTitle"
     >
       {{ vis.indexPattern.title }}
-    </div>
+    </h2>
 
     <nav class="navbar visEditorSidebar__nav">
       <div class="container-fluid">
diff --git a/src/legacy/ui/public/vis/editors/default/sidebar.js b/src/legacy/ui/public/vis/editors/default/sidebar.js
index ee33e0093f42b8..92cb99c56038db 100644
--- a/src/legacy/ui/public/vis/editors/default/sidebar.js
+++ b/src/legacy/ui/public/vis/editors/default/sidebar.js
@@ -24,6 +24,8 @@ import 'ui/directives/css_truncate';
 import { uiModules } from '../../../modules';
 import sidebarTemplate from './sidebar.html';
 import { move } from '../../../utils/collection';
+import { AggGroupNames } from './agg_groups';
+import { getEnabledMetricAggsCount } from './components/agg_group_helper';
 
 uiModules.get('app/visualize').directive('visEditorSidebar', function () {
   return {
@@ -76,6 +78,14 @@ uiModules.get('app/visualize').directive('visEditorSidebar', function () {
         }
 
         aggs.splice(index, 1);
+
+        if (agg.schema.group === AggGroupNames.Metrics) {
+          const metrics = $scope.state.aggs.bySchemaGroup(AggGroupNames.Metrics);
+
+          if (getEnabledMetricAggsCount(metrics) === 0) {
+            metrics.find(aggregation => aggregation.schema.name === 'metric').enabled = true;
+          }
+        }
       };
 
       $scope.onToggleEnableAgg = (agg, isEnable) => {
diff --git a/src/legacy/ui/public/vis/vis.js b/src/legacy/ui/public/vis/vis.js
index b3f032ae98d627..c34fc1b10378eb 100644
--- a/src/legacy/ui/public/vis/vis.js
+++ b/src/legacy/ui/public/vis/vis.js
@@ -34,7 +34,7 @@ import { AggConfigs } from '../agg_types/agg_configs';
 import { PersistedState } from '../persisted_state';
 import { updateVisualizationConfig } from './vis_update';
 import { SearchSourceProvider } from '../courier/search_source';
-import { start as visualizations } from '../../../core_plugins/visualizations/public/legacy';
+import { start as visualizations } from '../../../core_plugins/visualizations/public/np_ready/public/legacy';
 
 import '../directives/bind';
 
diff --git a/src/legacy/ui/public/visualize/loader/vis.js b/src/legacy/ui/public/visualize/loader/vis.js
index 39acf795a9372d..85ab07528b8464 100644
--- a/src/legacy/ui/public/visualize/loader/vis.js
+++ b/src/legacy/ui/public/visualize/loader/vis.js
@@ -31,7 +31,7 @@ import { EventEmitter } from 'events';
 import _ from 'lodash';
 import { PersistedState } from '../../persisted_state';
 
-import { start as visualizations } from '../../../../core_plugins/visualizations/public/legacy';
+import { start as visualizations } from '../../../../core_plugins/visualizations/public/np_ready/public/legacy';
 
 
 export function VisProvider(indexPatterns, getAppState) {
diff --git a/src/legacy/ui/ui_exports/collect_ui_exports.js b/src/legacy/ui/ui_exports/collect_ui_exports.ts
similarity index 74%
rename from src/legacy/ui/ui_exports/collect_ui_exports.js
rename to src/legacy/ui/ui_exports/collect_ui_exports.ts
index 3fda38b3e31a37..bfb290ffb36151 100644
--- a/src/legacy/ui/ui_exports/collect_ui_exports.js
+++ b/src/legacy/ui/ui_exports/collect_ui_exports.ts
@@ -17,14 +17,15 @@
  * under the License.
  */
 
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { SavedObjectsLegacyUiExports } from 'src/core/server/types';
+// @ts-ignore
 import { UI_EXPORT_DEFAULTS } from './ui_export_defaults';
+// @ts-ignore
 import * as uiExportTypeReducers from './ui_export_types';
+// @ts-ignore
 import { reduceExportSpecs } from '../../plugin_discovery';
 
-export function collectUiExports(pluginSpecs) {
-  return reduceExportSpecs(
-    pluginSpecs,
-    uiExportTypeReducers,
-    UI_EXPORT_DEFAULTS
-  );
+export function collectUiExports(pluginSpecs: unknown[]): SavedObjectsLegacyUiExports {
+  return reduceExportSpecs(pluginSpecs, uiExportTypeReducers, UI_EXPORT_DEFAULTS);
 }
diff --git a/src/legacy/ui/ui_exports/index.js b/src/legacy/ui/ui_exports/index.js
index f74553c70e0bf1..56db698dc7b037 100644
--- a/src/legacy/ui/ui_exports/index.js
+++ b/src/legacy/ui/ui_exports/index.js
@@ -18,4 +18,3 @@
  */
 
 export { collectUiExports } from './collect_ui_exports';
-export { uiExportsMixin } from './ui_exports_mixin';
diff --git a/src/legacy/ui/ui_mixin.js b/src/legacy/ui/ui_mixin.js
index d49a729cf27017..f5a25937c3a755 100644
--- a/src/legacy/ui/ui_mixin.js
+++ b/src/legacy/ui/ui_mixin.js
@@ -17,7 +17,6 @@
  * under the License.
  */
 
-import { uiExportsMixin } from './ui_exports';
 import { fieldFormatsMixin } from './field_formats';
 import { tutorialsMixin } from './tutorials_mixin';
 import { uiAppsMixin } from './ui_apps';
@@ -27,7 +26,6 @@ import { uiRenderMixin } from './ui_render';
 import { uiSettingsMixin } from './ui_settings';
 
 export async function uiMixin(kbnServer) {
-  await kbnServer.mixin(uiExportsMixin);
   await kbnServer.mixin(uiAppsMixin);
   await kbnServer.mixin(uiBundlesMixin);
   await kbnServer.mixin(uiSettingsMixin);
diff --git a/src/legacy/ui/ui_settings/__tests__/lib/create_objects_client_stub.js b/src/legacy/ui/ui_settings/create_objects_client_stub.ts
similarity index 59%
rename from src/legacy/ui/ui_settings/__tests__/lib/create_objects_client_stub.js
rename to src/legacy/ui/ui_settings/create_objects_client_stub.ts
index 9a6d44c313248f..ad19b5c8bc7cfd 100644
--- a/src/legacy/ui/ui_settings/__tests__/lib/create_objects_client_stub.js
+++ b/src/legacy/ui/ui_settings/create_objects_client_stub.ts
@@ -18,35 +18,31 @@
  */
 
 import sinon from 'sinon';
-import expect from '@kbn/expect';
-import { SavedObjectsClient } from '../../../../../core/server';
+import { SavedObjectsClient } from '../../../../src/core/server';
 
 export const savedObjectsClientErrors = SavedObjectsClient.errors;
 
-export function createObjectsClientStub(type, id, esDocSource = {}) {
+export interface SavedObjectsClientStub {
+  update: sinon.SinonStub<any[], any>;
+  get: sinon.SinonStub<any[], any>;
+  create: sinon.SinonStub<any[], any>;
+  bulkCreate: sinon.SinonStub<any[], any>;
+  bulkGet: sinon.SinonStub<any[], any>;
+  delete: sinon.SinonStub<any[], any>;
+  find: sinon.SinonStub<any[], any>;
+  errors: typeof savedObjectsClientErrors;
+}
+
+export function createObjectsClientStub(esDocSource = {}): SavedObjectsClientStub {
   const savedObjectsClient = {
     update: sinon.stub(),
     get: sinon.stub().returns({ attributes: esDocSource }),
     create: sinon.stub(),
-    errors: savedObjectsClientErrors
-  };
-
-  savedObjectsClient.assertGetQuery = () => {
-    sinon.assert.calledOnce(savedObjectsClient.get);
-
-    const { args } = savedObjectsClient.get.getCall(0);
-    expect(args[0]).to.be(type);
-    expect(args[1]).to.eql(id);
+    errors: savedObjectsClientErrors,
+    bulkCreate: sinon.stub(),
+    bulkGet: sinon.stub(),
+    delete: sinon.stub(),
+    find: sinon.stub(),
   };
-
-  savedObjectsClient.assertUpdateQuery = (expectedChanges) => {
-    sinon.assert.calledOnce(savedObjectsClient.update);
-
-    const { args } = savedObjectsClient.update.getCall(0);
-    expect(args[0]).to.be(type);
-    expect(args[1]).to.eql(id);
-    expect(args[2]).to.eql(expectedChanges);
-  };
-
   return savedObjectsClient;
 }
diff --git a/src/legacy/ui/ui_settings/create_or_upgrade_saved_config/__tests__/create_or_upgrade_saved_config.js b/src/legacy/ui/ui_settings/create_or_upgrade_saved_config/create_or_upgrade_saved_config.test.ts
similarity index 80%
rename from src/legacy/ui/ui_settings/create_or_upgrade_saved_config/__tests__/create_or_upgrade_saved_config.js
rename to src/legacy/ui/ui_settings/create_or_upgrade_saved_config/create_or_upgrade_saved_config.test.ts
index d047fd8bb25762..654c0fbb66c8be 100644
--- a/src/legacy/ui/ui_settings/create_or_upgrade_saved_config/__tests__/create_or_upgrade_saved_config.js
+++ b/src/legacy/ui/ui_settings/create_or_upgrade_saved_config/create_or_upgrade_saved_config.test.ts
@@ -21,12 +21,12 @@ import sinon from 'sinon';
 import expect from '@kbn/expect';
 import Chance from 'chance';
 
-import * as getUpgradeableConfigNS from '../get_upgradeable_config';
-import { createOrUpgradeSavedConfig } from '../create_or_upgrade_saved_config';
+import * as getUpgradeableConfigNS from './get_upgradeable_config';
+import { createOrUpgradeSavedConfig } from './create_or_upgrade_saved_config';
 
 const chance = new Chance();
 
-describe('uiSettings/createOrUpgradeSavedConfig', function () {
+describe('uiSettings/createOrUpgradeSavedConfig', function() {
   const sandbox = sinon.createSandbox();
   afterEach(() => sandbox.restore());
 
@@ -42,8 +42,8 @@ describe('uiSettings/createOrUpgradeSavedConfig', function () {
         type,
         id: options.id,
         version: 'foo',
-      }))
-    };
+      })),
+    } as any; // mute until we have savedObjects mocks
 
     async function run(options = {}) {
       const resp = await createOrUpgradeSavedConfig({
@@ -51,7 +51,7 @@ describe('uiSettings/createOrUpgradeSavedConfig', function () {
         version,
         buildNum,
         logWithMetadata,
-        ...options
+        ...options,
       });
 
       sinon.assert.calledOnce(getUpgradeableConfig);
@@ -70,44 +70,50 @@ describe('uiSettings/createOrUpgradeSavedConfig', function () {
     };
   }
 
-  describe('nothing is upgradeable', function () {
+  describe('nothing is upgradeable', function() {
     it('should create config with current version and buildNum', async () => {
       const { run, savedObjectsClient } = setup();
 
       await run();
 
       sinon.assert.calledOnce(savedObjectsClient.create);
-      sinon.assert.calledWithExactly(savedObjectsClient.create, 'config', {
-        buildNum,
-      }, {
-        id: version
-      });
+      sinon.assert.calledWithExactly(
+        savedObjectsClient.create,
+        'config',
+        {
+          buildNum,
+        },
+        {
+          id: version,
+        }
+      );
     });
   });
 
   describe('something is upgradeable', () => {
     it('should merge upgraded attributes with current build number in new config', async () => {
-      const {
-        run,
-        getUpgradeableConfig,
-        savedObjectsClient
-      } = setup();
+      const { run, getUpgradeableConfig, savedObjectsClient } = setup();
 
       const savedAttributes = {
         buildNum: buildNum - 100,
         [chance.word()]: chance.sentence(),
         [chance.word()]: chance.sentence(),
-        [chance.word()]: chance.sentence()
+        [chance.word()]: chance.sentence(),
       };
 
-      getUpgradeableConfig
-        .returns({ id: prevVersion, attributes: savedAttributes });
+      getUpgradeableConfig.resolves({
+        id: prevVersion,
+        attributes: savedAttributes,
+        type: '',
+        references: [],
+      });
 
       await run();
 
       sinon.assert.calledOnce(getUpgradeableConfig);
       sinon.assert.calledOnce(savedObjectsClient.create);
-      sinon.assert.calledWithExactly(savedObjectsClient.create,
+      sinon.assert.calledWithExactly(
+        savedObjectsClient.create,
         'config',
         {
           ...savedAttributes,
@@ -122,12 +128,17 @@ describe('uiSettings/createOrUpgradeSavedConfig', function () {
     it('should log a message for upgrades', async () => {
       const { getUpgradeableConfig, logWithMetadata, run } = setup();
 
-      getUpgradeableConfig
-        .returns({ id: prevVersion, attributes: { buildNum: buildNum - 100 } });
+      getUpgradeableConfig.resolves({
+        id: prevVersion,
+        attributes: { buildNum: buildNum - 100 },
+        type: '',
+        references: [],
+      });
 
       await run();
       sinon.assert.calledOnce(logWithMetadata);
-      sinon.assert.calledWithExactly(logWithMetadata,
+      sinon.assert.calledWithExactly(
+        logWithMetadata,
         ['plugin', 'elasticsearch'],
         sinon.match('Upgrade'),
         sinon.match({
@@ -140,8 +151,12 @@ describe('uiSettings/createOrUpgradeSavedConfig', function () {
     it('does not log when upgrade fails', async () => {
       const { getUpgradeableConfig, logWithMetadata, run, savedObjectsClient } = setup();
 
-      getUpgradeableConfig
-        .returns({ id: prevVersion, attributes: { buildNum: buildNum - 100 } });
+      getUpgradeableConfig.resolves({
+        id: prevVersion,
+        attributes: { buildNum: buildNum - 100 },
+        type: '',
+        references: [],
+      });
 
       savedObjectsClient.create.callsFake(async () => {
         throw new Error('foo');
@@ -171,7 +186,7 @@ describe('uiSettings/createOrUpgradeSavedConfig', function () {
       await run({ onWriteError });
       sinon.assert.calledOnce(onWriteError);
       sinon.assert.calledWithExactly(onWriteError, error, {
-        buildNum
+        buildNum,
       });
     });
 
@@ -195,9 +210,7 @@ describe('uiSettings/createOrUpgradeSavedConfig', function () {
 
       try {
         await run({
-          onWriteError: (error) => (
-            Promise.reject(new Error(`${error.message} bar`))
-          )
+          onWriteError: (error: Error) => Promise.reject(new Error(`${error.message} bar`)),
         });
         throw new Error('expected run() to reject');
       } catch (error) {
@@ -214,9 +227,9 @@ describe('uiSettings/createOrUpgradeSavedConfig', function () {
 
       try {
         await run({
-          onWriteError: (error) => {
+          onWriteError: (error: Error) => {
             throw new Error(`${error.message} bar`);
-          }
+          },
         });
         throw new Error('expected run() to reject');
       } catch (error) {
@@ -233,7 +246,7 @@ describe('uiSettings/createOrUpgradeSavedConfig', function () {
 
       try {
         await run({
-          onWriteError: undefined
+          onWriteError: undefined,
         });
         throw new Error('expected run() to reject');
       } catch (error) {
diff --git a/src/legacy/ui/ui_settings/create_or_upgrade_saved_config/create_or_upgrade_saved_config.js b/src/legacy/ui/ui_settings/create_or_upgrade_saved_config/create_or_upgrade_saved_config.ts
similarity index 55%
rename from src/legacy/ui/ui_settings/create_or_upgrade_saved_config/create_or_upgrade_saved_config.js
rename to src/legacy/ui/ui_settings/create_or_upgrade_saved_config/create_or_upgrade_saved_config.ts
index c175e583ee9163..0dc3d5f50e97e6 100644
--- a/src/legacy/ui/ui_settings/create_or_upgrade_saved_config/create_or_upgrade_saved_config.js
+++ b/src/legacy/ui/ui_settings/create_or_upgrade_saved_config/create_or_upgrade_saved_config.ts
@@ -18,37 +18,38 @@
  */
 
 import { defaults } from 'lodash';
+import { SavedObjectsClientContract, SavedObjectAttribute } from 'src/core/server';
+import { Legacy } from 'kibana';
 
 import { getUpgradeableConfig } from './get_upgradeable_config';
 
-export async function createOrUpgradeSavedConfig(options) {
-  const {
-    savedObjectsClient,
-    version,
-    buildNum,
-    logWithMetadata,
-    onWriteError,
-  } = options;
+interface Options {
+  savedObjectsClient: SavedObjectsClientContract;
+  version: string;
+  buildNum: number;
+  logWithMetadata: Legacy.Server['logWithMetadata'];
+  onWriteError?: <T extends SavedObjectAttribute = any>(
+    error: Error,
+    attributes: Record<string, any>
+  ) => Record<string, T> | undefined;
+}
+export async function createOrUpgradeSavedConfig<T extends SavedObjectAttribute = any>(
+  options: Options
+): Promise<Record<string, T> | undefined> {
+  const { savedObjectsClient, version, buildNum, logWithMetadata, onWriteError } = options;
 
   // try to find an older config we can upgrade
   const upgradeableConfig = await getUpgradeableConfig({
     savedObjectsClient,
-    version
+    version,
   });
 
   // default to the attributes of the upgradeableConfig if available
-  const attributes = defaults(
-    { buildNum },
-    upgradeableConfig ? upgradeableConfig.attributes : {}
-  );
+  const attributes = defaults({ buildNum }, upgradeableConfig ? upgradeableConfig.attributes : {});
 
   try {
     // create the new SavedConfig
-    await savedObjectsClient.create(
-      'config',
-      attributes,
-      { id: version }
-    );
+    await savedObjectsClient.create('config', attributes, { id: version });
   } catch (error) {
     if (onWriteError) {
       return onWriteError(error, attributes);
@@ -58,9 +59,13 @@ export async function createOrUpgradeSavedConfig(options) {
   }
 
   if (upgradeableConfig) {
-    logWithMetadata(['plugin', 'elasticsearch'], `Upgrade config from ${upgradeableConfig.id} to ${version}`, {
-      prevVersion: upgradeableConfig.id,
-      newVersion: version
-    });
+    logWithMetadata(
+      ['plugin', 'elasticsearch'],
+      `Upgrade config from ${upgradeableConfig.id} to ${version}`,
+      {
+        prevVersion: upgradeableConfig.id,
+        newVersion: version,
+      }
+    );
   }
 }
diff --git a/src/legacy/ui/ui_settings/create_or_upgrade_saved_config/get_upgradeable_config.js b/src/legacy/ui/ui_settings/create_or_upgrade_saved_config/get_upgradeable_config.ts
similarity index 80%
rename from src/legacy/ui/ui_settings/create_or_upgrade_saved_config/get_upgradeable_config.js
rename to src/legacy/ui/ui_settings/create_or_upgrade_saved_config/get_upgradeable_config.ts
index 1108a011675809..350137a81a49bf 100644
--- a/src/legacy/ui/ui_settings/create_or_upgrade_saved_config/get_upgradeable_config.js
+++ b/src/legacy/ui/ui_settings/create_or_upgrade_saved_config/get_upgradeable_config.ts
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
+import { SavedObjectsClientContract } from 'src/core/server';
 import { isConfigVersionUpgradeable } from './is_config_version_upgradeable';
 
 /**
@@ -26,18 +26,22 @@ import { isConfigVersionUpgradeable } from './is_config_version_upgradeable';
  *  @property {string} version
  *  @return {Promise<SavedConfig|undefined>}
  */
-export async function getUpgradeableConfig({ savedObjectsClient, version }) {
+export async function getUpgradeableConfig({
+  savedObjectsClient,
+  version,
+}: {
+  savedObjectsClient: SavedObjectsClientContract;
+  version: string;
+}) {
   // attempt to find a config we can upgrade
   const { saved_objects: savedConfigs } = await savedObjectsClient.find({
     type: 'config',
     page: 1,
     perPage: 1000,
     sortField: 'buildNum',
-    sortOrder: 'desc'
+    sortOrder: 'desc',
   });
 
   // try to find a config that we can upgrade
-  return savedConfigs.find(savedConfig => (
-    isConfigVersionUpgradeable(savedConfig.id, version)
-  ));
+  return savedConfigs.find(savedConfig => isConfigVersionUpgradeable(savedConfig.id, version));
 }
diff --git a/src/legacy/ui/ui_settings/create_or_upgrade_saved_config/index.js b/src/legacy/ui/ui_settings/create_or_upgrade_saved_config/index.ts
similarity index 100%
rename from src/legacy/ui/ui_settings/create_or_upgrade_saved_config/index.js
rename to src/legacy/ui/ui_settings/create_or_upgrade_saved_config/index.ts
diff --git a/src/legacy/ui/ui_settings/create_or_upgrade_saved_config/__tests__/create_or_upgrade_integration.js b/src/legacy/ui/ui_settings/create_or_upgrade_saved_config/integration_tests/create_or_upgrade.test.ts
similarity index 89%
rename from src/legacy/ui/ui_settings/create_or_upgrade_saved_config/__tests__/create_or_upgrade_integration.js
rename to src/legacy/ui/ui_settings/create_or_upgrade_saved_config/integration_tests/create_or_upgrade.test.ts
index 307c7f5f8869a0..753e73058af2f5 100644
--- a/src/legacy/ui/ui_settings/create_or_upgrade_saved_config/__tests__/create_or_upgrade_integration.js
+++ b/src/legacy/ui/ui_settings/create_or_upgrade_saved_config/integration_tests/create_or_upgrade.test.ts
@@ -19,20 +19,26 @@
 
 import sinon from 'sinon';
 import expect from '@kbn/expect';
+import { UnwrapPromise } from '@kbn/utility-types';
+import { SavedObjectsClientContract } from 'src/core/server';
 
+import KbnServer from '../../../../server/kbn_server';
 import { createTestServers } from '../../../../../test_utils/kbn_server';
 import { createOrUpgradeSavedConfig } from '../create_or_upgrade_saved_config';
 
 describe('createOrUpgradeSavedConfig()', () => {
-  let savedObjectsClient;
-  let kbn;
-  let kbnServer;
-  let esServer;
-  let servers;
+  let savedObjectsClient: SavedObjectsClientContract;
+  let kbnServer: KbnServer;
+  let servers: ReturnType<typeof createTestServers>;
+  let esServer: UnwrapPromise<ReturnType<typeof servers['startES']>>;
+  let kbn: UnwrapPromise<ReturnType<typeof servers['startKibana']>>;
 
-  before(async function () {
+  beforeAll(async function() {
     servers = createTestServers({
-      adjustTimeout: (t) => this.timeout(t),
+      adjustTimeout: t => {
+        jest.setTimeout(t);
+      },
+      settings: {},
     });
     esServer = await servers.startES();
     kbn = await servers.startKibana();
@@ -69,14 +75,13 @@ describe('createOrUpgradeSavedConfig()', () => {
     ]);
   });
 
-  after(() => {
-    esServer.stop();
-    kbn.stop();
-  });
-
-  it('upgrades the previous version on each increment', async function () {
-    this.timeout(30000);
+  afterAll(async () => {
+    await esServer.stop();
+    await kbn.stop();
+  }, 30000);
 
+  it('upgrades the previous version on each increment', async function() {
+    jest.setTimeout(30000);
     // ------------------------------------
     // upgrade to 5.4.0
     await createOrUpgradeSavedConfig({
diff --git a/src/legacy/ui/ui_settings/create_or_upgrade_saved_config/__tests__/is_config_version_upgradeable.js b/src/legacy/ui/ui_settings/create_or_upgrade_saved_config/is_config_version_upgradeable.test.ts
similarity index 88%
rename from src/legacy/ui/ui_settings/create_or_upgrade_saved_config/__tests__/is_config_version_upgradeable.js
rename to src/legacy/ui/ui_settings/create_or_upgrade_saved_config/is_config_version_upgradeable.test.ts
index 734d579d234046..6bb2cb3b878502 100644
--- a/src/legacy/ui/ui_settings/create_or_upgrade_saved_config/__tests__/is_config_version_upgradeable.js
+++ b/src/legacy/ui/ui_settings/create_or_upgrade_saved_config/is_config_version_upgradeable.test.ts
@@ -19,11 +19,12 @@
 
 import expect from '@kbn/expect';
 
-import { isConfigVersionUpgradeable } from '../is_config_version_upgradeable';
-import { pkg } from '../../../../utils';
+import { isConfigVersionUpgradeable } from './is_config_version_upgradeable';
+// @ts-ignore
+import { pkg } from '../../../utils';
 
-describe('savedObjects/health_check/isConfigVersionUpgradeable', function () {
-  function isUpgradeableTest(savedVersion, kibanaVersion, expected) {
+describe('savedObjects/health_check/isConfigVersionUpgradeable', function() {
+  function isUpgradeableTest(savedVersion: string, kibanaVersion: string, expected: boolean) {
     it(`should return ${expected} for config version ${savedVersion} and kibana version ${kibanaVersion}`, () => {
       expect(isConfigVersionUpgradeable(savedVersion, kibanaVersion)).to.be(expected);
     });
@@ -47,6 +48,6 @@ describe('savedObjects/health_check/isConfigVersionUpgradeable', function () {
   isUpgradeableTest('4.1.0-rc1-SNAPSHOT', '4.1.0-rc1', false);
   isUpgradeableTest('5.0.0-alpha11', '5.0.0', false);
   isUpgradeableTest('50.0.10-rc150-SNAPSHOT', '50.0.9', false);
-  isUpgradeableTest(undefined, pkg.version, false);
+  isUpgradeableTest(undefined as any, pkg.version, false);
   isUpgradeableTest('@@version', pkg.version, false);
 });
diff --git a/src/legacy/ui/ui_settings/create_or_upgrade_saved_config/is_config_version_upgradeable.js b/src/legacy/ui/ui_settings/create_or_upgrade_saved_config/is_config_version_upgradeable.ts
similarity index 89%
rename from src/legacy/ui/ui_settings/create_or_upgrade_saved_config/is_config_version_upgradeable.js
rename to src/legacy/ui/ui_settings/create_or_upgrade_saved_config/is_config_version_upgradeable.ts
index beeba6717f24a1..8359f02ffee744 100644
--- a/src/legacy/ui/ui_settings/create_or_upgrade_saved_config/is_config_version_upgradeable.js
+++ b/src/legacy/ui/ui_settings/create_or_upgrade_saved_config/is_config_version_upgradeable.ts
@@ -20,14 +20,12 @@
 import semver from 'semver';
 const rcVersionRegex = /^(\d+\.\d+\.\d+)\-rc(\d+)$/i;
 
-function extractRcNumber(version) {
+function extractRcNumber(version: string): [string, number] {
   const match = version.match(rcVersionRegex);
-  return match
-    ? [match[1], parseInt(match[2], 10)]
-    : [version, Infinity];
+  return match ? [match[1], parseInt(match[2], 10)] : [version, Infinity];
 }
 
-export function isConfigVersionUpgradeable(savedVersion, kibanaVersion) {
+export function isConfigVersionUpgradeable(savedVersion: string, kibanaVersion: string): boolean {
   if (
     typeof savedVersion !== 'string' ||
     typeof kibanaVersion !== 'string' ||
diff --git a/src/legacy/ui/ui_settings/__tests__/ui_settings_mixin_integration.js b/src/legacy/ui/ui_settings/integration_tests/ui_settings_mixin.test.ts
similarity index 56%
rename from src/legacy/ui/ui_settings/__tests__/ui_settings_mixin_integration.js
rename to src/legacy/ui/ui_settings/integration_tests/ui_settings_mixin.test.ts
index 9e8413a0f99e0b..f43c6436d1c335 100644
--- a/src/legacy/ui/ui_settings/__tests__/ui_settings_mixin_integration.js
+++ b/src/legacy/ui/ui_settings/integration_tests/ui_settings_mixin.test.ts
@@ -20,17 +20,19 @@
 import sinon from 'sinon';
 import expect from '@kbn/expect';
 
+// @ts-ignore
 import { Config } from '../../../server/config';
 
-/* eslint-disable import/no-duplicates */
 import * as uiSettingsServiceFactoryNS from '../ui_settings_service_factory';
-import { uiSettingsServiceFactory } from '../ui_settings_service_factory';
 import * as getUiSettingsServiceForRequestNS from '../ui_settings_service_for_request';
-import { getUiSettingsServiceForRequest } from '../ui_settings_service_for_request';
-/* eslint-enable import/no-duplicates */
-
+// @ts-ignore
 import { uiSettingsMixin } from '../ui_settings_mixin';
 
+interface Decorators {
+  server: { [name: string]: any };
+  request: { [name: string]: any };
+}
+
 describe('uiSettingsMixin()', () => {
   const sandbox = sinon.createSandbox();
 
@@ -38,15 +40,15 @@ describe('uiSettingsMixin()', () => {
     const config = Config.withDefaultSchema({
       uiSettings: {
         overrides: {
-          foo: 'bar'
-        }
-      }
+          foo: 'bar',
+        },
+      },
     });
 
     // maps of decorations passed to `server.decorate()`
-    const decorations = {
+    const decorations: Decorators = {
       server: {},
-      request: {}
+      request: {},
     };
 
     // mock hapi server
@@ -54,12 +56,12 @@ describe('uiSettingsMixin()', () => {
       log: sinon.stub(),
       route: sinon.stub(),
       config: () => config,
-      addMemoizedFactoryToRequest(name, factory) {
-        this.decorate('request', name, function () {
+      addMemoizedFactoryToRequest(name: string, factory: (...args: any[]) => any) {
+        this.decorate('request', name, function(this: typeof server) {
           return factory(this);
         });
       },
-      decorate: sinon.spy((type, name, value) => {
+      decorate: sinon.spy((type: keyof Decorators, name: string, value: any) => {
         decorations[type][name] = value;
       }),
     };
@@ -91,28 +93,39 @@ describe('uiSettingsMixin()', () => {
   describe('server.uiSettingsServiceFactory()', () => {
     it('decorates server with "uiSettingsServiceFactory"', () => {
       const { decorations } = setup();
-      expect(decorations.server).to.have.property('uiSettingsServiceFactory').a('function');
-
-      sandbox.stub(uiSettingsServiceFactoryNS, 'uiSettingsServiceFactory');
-      sinon.assert.notCalled(uiSettingsServiceFactory);
+      expect(decorations.server)
+        .to.have.property('uiSettingsServiceFactory')
+        .a('function');
+
+      const uiSettingsServiceFactoryStub = sandbox.stub(
+        uiSettingsServiceFactoryNS,
+        'uiSettingsServiceFactory'
+      );
+      sinon.assert.notCalled(uiSettingsServiceFactoryStub);
       decorations.server.uiSettingsServiceFactory();
-      sinon.assert.calledOnce(uiSettingsServiceFactory);
+      sinon.assert.calledOnce(uiSettingsServiceFactoryStub);
     });
 
     it('passes `server` and `options` argument to factory', () => {
       const { decorations, server } = setup();
-      expect(decorations.server).to.have.property('uiSettingsServiceFactory').a('function');
-
-      sandbox.stub(uiSettingsServiceFactoryNS, 'uiSettingsServiceFactory');
-      sinon.assert.notCalled(uiSettingsServiceFactory);
+      expect(decorations.server)
+        .to.have.property('uiSettingsServiceFactory')
+        .a('function');
+
+      const uiSettingsServiceFactoryStub = sandbox.stub(
+        uiSettingsServiceFactoryNS,
+        'uiSettingsServiceFactory'
+      );
+      sinon.assert.notCalled(uiSettingsServiceFactoryStub);
       decorations.server.uiSettingsServiceFactory({
-        foo: 'bar'
+        foo: 'bar',
       });
-      sinon.assert.calledOnce(uiSettingsServiceFactory);
-      sinon.assert.calledWithExactly(uiSettingsServiceFactory, server, {
+      sinon.assert.calledOnce(uiSettingsServiceFactoryStub);
+      sinon.assert.calledWithExactly(uiSettingsServiceFactoryStub, server as any, {
+        // @ts-ignore foo doesn't exist on Hapi.Server
         foo: 'bar',
         overrides: {
-          foo: 'bar'
+          foo: 'bar',
         },
         getDefaults: sinon.match.func,
       });
@@ -122,33 +135,50 @@ describe('uiSettingsMixin()', () => {
   describe('request.getUiSettingsService()', () => {
     it('exposes "getUiSettingsService" on requests', () => {
       const { decorations } = setup();
-      expect(decorations.request).to.have.property('getUiSettingsService').a('function');
-
-      sandbox.stub(getUiSettingsServiceForRequestNS, 'getUiSettingsServiceForRequest');
-      sinon.assert.notCalled(getUiSettingsServiceForRequest);
+      expect(decorations.request)
+        .to.have.property('getUiSettingsService')
+        .a('function');
+
+      const getUiSettingsServiceForRequestStub = sandbox.stub(
+        getUiSettingsServiceForRequestNS,
+        'getUiSettingsServiceForRequest'
+      );
+      sinon.assert.notCalled(getUiSettingsServiceForRequestStub);
       decorations.request.getUiSettingsService();
-      sinon.assert.calledOnce(getUiSettingsServiceForRequest);
+      sinon.assert.calledOnce(getUiSettingsServiceForRequestStub);
     });
 
     it('passes request to getUiSettingsServiceForRequest', () => {
       const { server, decorations } = setup();
-      expect(decorations.request).to.have.property('getUiSettingsService').a('function');
-
-      sandbox.stub(getUiSettingsServiceForRequestNS, 'getUiSettingsServiceForRequest');
-      sinon.assert.notCalled(getUiSettingsServiceForRequest);
+      expect(decorations.request)
+        .to.have.property('getUiSettingsService')
+        .a('function');
+
+      const getUiSettingsServiceForRequestStub = sandbox.stub(
+        getUiSettingsServiceForRequestNS,
+        'getUiSettingsServiceForRequest'
+      );
+      sinon.assert.notCalled(getUiSettingsServiceForRequestStub);
       const request = {};
       decorations.request.getUiSettingsService.call(request);
-      sinon.assert.calledWith(getUiSettingsServiceForRequest, server, request);
+      sinon.assert.calledWith(getUiSettingsServiceForRequestStub, server as any, request as any, {
+        overrides: {
+          foo: 'bar',
+        },
+        getDefaults: sinon.match.func,
+      });
     });
   });
 
   describe('server.uiSettings()', () => {
     it('throws an error, links to pr', () => {
       const { decorations } = setup();
-      expect(decorations.server).to.have.property('uiSettings').a('function');
+      expect(decorations.server)
+        .to.have.property('uiSettings')
+        .a('function');
       expect(() => {
         decorations.server.uiSettings();
-      }).to.throwError('http://github.com');
+      }).to.throwError('http://github.com' as any); // incorrect typings
     });
   });
 });
diff --git a/src/legacy/ui/ui_settings/routes/delete.js b/src/legacy/ui/ui_settings/routes/delete.ts
similarity index 81%
rename from src/legacy/ui/ui_settings/routes/delete.js
rename to src/legacy/ui/ui_settings/routes/delete.ts
index 78e07bbceab01d..7825204e6b99b1 100644
--- a/src/legacy/ui/ui_settings/routes/delete.js
+++ b/src/legacy/ui/ui_settings/routes/delete.ts
@@ -16,21 +16,22 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { Legacy } from 'kibana';
 
-async function handleRequest(request) {
+async function handleRequest(request: Legacy.Request) {
   const { key } = request.params;
   const uiSettings = request.getUiSettingsService();
 
   await uiSettings.remove(key);
   return {
-    settings: await uiSettings.getUserProvided()
+    settings: await uiSettings.getUserProvided(),
   };
 }
 
 export const deleteRoute = {
   path: '/api/kibana/settings/{key}',
   method: 'DELETE',
-  handler: async (request, h) => {
-    return h.response(await handleRequest(request));
-  }
+  handler: async (request: Legacy.Request) => {
+    return await handleRequest(request);
+  },
 };
diff --git a/src/legacy/ui/ui_settings/routes/get.js b/src/legacy/ui/ui_settings/routes/get.ts
similarity index 84%
rename from src/legacy/ui/ui_settings/routes/get.js
rename to src/legacy/ui/ui_settings/routes/get.ts
index 7e91bc46596b55..3e165a12522bbe 100644
--- a/src/legacy/ui/ui_settings/routes/get.js
+++ b/src/legacy/ui/ui_settings/routes/get.ts
@@ -16,18 +16,19 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { Legacy } from 'kibana';
 
-async function handleRequest(request) {
+async function handleRequest(request: Legacy.Request) {
   const uiSettings = request.getUiSettingsService();
   return {
-    settings: await uiSettings.getUserProvided()
+    settings: await uiSettings.getUserProvided(),
   };
 }
 
 export const getRoute = {
   path: '/api/kibana/settings',
   method: 'GET',
-  handler: function (request) {
+  handler(request: Legacy.Request) {
     return handleRequest(request);
-  }
+  },
 };
diff --git a/src/legacy/ui/ui_settings/routes/index.js b/src/legacy/ui/ui_settings/routes/index.ts
similarity index 100%
rename from src/legacy/ui/ui_settings/routes/index.js
rename to src/legacy/ui/ui_settings/routes/index.ts
diff --git a/src/legacy/ui/ui_settings/routes/__tests__/doc_exists.js b/src/legacy/ui/ui_settings/routes/integration_tests/doc_exists.ts
similarity index 82%
rename from src/legacy/ui/ui_settings/routes/__tests__/doc_exists.js
rename to src/legacy/ui/ui_settings/routes/integration_tests/doc_exists.ts
index 824194ae1788f7..7783fd99769634 100644
--- a/src/legacy/ui/ui_settings/routes/__tests__/doc_exists.js
+++ b/src/legacy/ui/ui_settings/routes/integration_tests/doc_exists.ts
@@ -20,17 +20,11 @@
 import expect from '@kbn/expect';
 import sinon from 'sinon';
 
-import {
-  getServices,
-  chance,
-  assertSinonMatch,
-} from './lib';
+import { getServices, chance, assertSinonMatch } from './lib';
 
 export function docExistsSuite() {
-  async function setup(options = {}) {
-    const {
-      initialSettings
-    } = options;
+  async function setup(options: any = {}) {
+    const { initialSettings } = options;
 
     const { kbnServer, uiSettings, callCluster } = getServices();
 
@@ -39,7 +33,7 @@ export function docExistsSuite() {
       index: kbnServer.config.get('kibana.index'),
       body: {
         conflicts: 'proceed',
-        query: { match_all: {} }
+        query: { match_all: {} },
       },
     });
 
@@ -55,29 +49,29 @@ export function docExistsSuite() {
       const defaultIndex = chance.word({ length: 10 });
       const { kbnServer } = await setup({
         initialSettings: {
-          defaultIndex
-        }
+          defaultIndex,
+        },
       });
 
       const { statusCode, result } = await kbnServer.inject({
         method: 'GET',
-        url: '/api/kibana/settings'
+        url: '/api/kibana/settings',
       });
 
       expect(statusCode).to.be(200);
       assertSinonMatch(result, {
         settings: {
           buildNum: {
-            userValue: sinon.match.number
+            userValue: sinon.match.number,
           },
           defaultIndex: {
-            userValue: defaultIndex
+            userValue: defaultIndex,
           },
           foo: {
             userValue: 'bar',
-            isOverridden: true
+            isOverridden: true,
           },
-        }
+        },
       });
     });
   });
@@ -91,24 +85,24 @@ export function docExistsSuite() {
         method: 'POST',
         url: '/api/kibana/settings/defaultIndex',
         payload: {
-          value: defaultIndex
-        }
+          value: defaultIndex,
+        },
       });
 
       expect(statusCode).to.be(200);
       assertSinonMatch(result, {
         settings: {
           buildNum: {
-            userValue: sinon.match.number
+            userValue: sinon.match.number,
           },
           defaultIndex: {
-            userValue: defaultIndex
+            userValue: defaultIndex,
           },
           foo: {
             userValue: 'bar',
-            isOverridden: true
+            isOverridden: true,
           },
-        }
+        },
       });
     });
 
@@ -119,15 +113,15 @@ export function docExistsSuite() {
         method: 'POST',
         url: '/api/kibana/settings/foo',
         payload: {
-          value: 'baz'
-        }
+          value: 'baz',
+        },
       });
 
       expect(statusCode).to.be(400);
       assertSinonMatch(result, {
         error: 'Bad Request',
         message: 'Unable to update "foo" because it is overridden',
-        statusCode: 400
+        statusCode: 400,
       });
     });
   });
@@ -142,25 +136,25 @@ export function docExistsSuite() {
         url: '/api/kibana/settings',
         payload: {
           changes: {
-            defaultIndex
-          }
-        }
+            defaultIndex,
+          },
+        },
       });
 
       expect(statusCode).to.be(200);
       assertSinonMatch(result, {
         settings: {
           buildNum: {
-            userValue: sinon.match.number
+            userValue: sinon.match.number,
           },
           defaultIndex: {
-            userValue: defaultIndex
+            userValue: defaultIndex,
           },
           foo: {
             userValue: 'bar',
-            isOverridden: true
+            isOverridden: true,
           },
-        }
+        },
       });
     });
 
@@ -172,16 +166,16 @@ export function docExistsSuite() {
         url: '/api/kibana/settings',
         payload: {
           changes: {
-            foo: 'baz'
-          }
-        }
+            foo: 'baz',
+          },
+        },
       });
 
       expect(statusCode).to.be(400);
       assertSinonMatch(result, {
         error: 'Bad Request',
         message: 'Unable to update "foo" because it is overridden',
-        statusCode: 400
+        statusCode: 400,
       });
     });
   });
@@ -191,27 +185,27 @@ export function docExistsSuite() {
       const defaultIndex = chance.word({ length: 10 });
 
       const { kbnServer, uiSettings } = await setup({
-        initialSettings: { defaultIndex }
+        initialSettings: { defaultIndex },
       });
 
       expect(await uiSettings.get('defaultIndex')).to.be(defaultIndex);
 
       const { statusCode, result } = await kbnServer.inject({
         method: 'DELETE',
-        url: '/api/kibana/settings/defaultIndex'
+        url: '/api/kibana/settings/defaultIndex',
       });
 
       expect(statusCode).to.be(200);
       assertSinonMatch(result, {
         settings: {
           buildNum: {
-            userValue: sinon.match.number
+            userValue: sinon.match.number,
           },
           foo: {
             userValue: 'bar',
-            isOverridden: true
+            isOverridden: true,
           },
-        }
+        },
       });
     });
     it('returns a 400 if deleting overridden value', async () => {
@@ -219,14 +213,14 @@ export function docExistsSuite() {
 
       const { statusCode, result } = await kbnServer.inject({
         method: 'DELETE',
-        url: '/api/kibana/settings/foo'
+        url: '/api/kibana/settings/foo',
       });
 
       expect(statusCode).to.be(400);
       assertSinonMatch(result, {
         error: 'Bad Request',
         message: 'Unable to update "foo" because it is overridden',
-        statusCode: 400
+        statusCode: 400,
       });
     });
   });
diff --git a/src/legacy/ui/ui_settings/routes/__tests__/doc_missing.js b/src/legacy/ui/ui_settings/routes/integration_tests/doc_missing.ts
similarity index 82%
rename from src/legacy/ui/ui_settings/routes/__tests__/doc_missing.js
rename to src/legacy/ui/ui_settings/routes/integration_tests/doc_missing.ts
index a1fbec8ad39dfa..580fe04b920878 100644
--- a/src/legacy/ui/ui_settings/routes/__tests__/doc_missing.js
+++ b/src/legacy/ui/ui_settings/routes/integration_tests/doc_missing.ts
@@ -20,11 +20,7 @@
 import expect from '@kbn/expect';
 import sinon from 'sinon';
 
-import {
-  getServices,
-  chance,
-  assertSinonMatch,
-} from './lib';
+import { getServices, chance, assertSinonMatch } from './lib';
 
 export function docMissingSuite() {
   // ensure the kibana index has no documents
@@ -35,15 +31,15 @@ export function docMissingSuite() {
     await kbnServer.inject({
       method: 'POST',
       url: '/api/kibana/settings/defaultIndex',
-      payload: { value: 'abc' }
+      payload: { value: 'abc' },
     });
 
     // delete all docs from kibana index to ensure savedConfig is not found
     await callCluster('deleteByQuery', {
       index: kbnServer.config.get('kibana.index'),
       body: {
-        query: { match_all: {} }
-      }
+        query: { match_all: {} },
+      },
     });
   });
 
@@ -53,7 +49,7 @@ export function docMissingSuite() {
 
       const { statusCode, result } = await kbnServer.inject({
         method: 'GET',
-        url: '/api/kibana/settings'
+        url: '/api/kibana/settings',
       });
 
       expect(statusCode).to.be(200);
@@ -64,9 +60,9 @@ export function docMissingSuite() {
           },
           foo: {
             userValue: 'bar',
-            isOverridden: true
-          }
-        }
+            isOverridden: true,
+          },
+        },
       });
     });
   });
@@ -79,23 +75,23 @@ export function docMissingSuite() {
       const { statusCode, result } = await kbnServer.inject({
         method: 'POST',
         url: '/api/kibana/settings/defaultIndex',
-        payload: { value: defaultIndex }
+        payload: { value: defaultIndex },
       });
 
       expect(statusCode).to.be(200);
       assertSinonMatch(result, {
         settings: {
           buildNum: {
-            userValue: sinon.match.number
+            userValue: sinon.match.number,
           },
           defaultIndex: {
-            userValue: defaultIndex
+            userValue: defaultIndex,
           },
           foo: {
             userValue: 'bar',
-            isOverridden: true
-          }
-        }
+            isOverridden: true,
+          },
+        },
       });
     });
   });
@@ -109,24 +105,24 @@ export function docMissingSuite() {
         method: 'POST',
         url: '/api/kibana/settings',
         payload: {
-          changes: { defaultIndex }
-        }
+          changes: { defaultIndex },
+        },
       });
 
       expect(statusCode).to.be(200);
       assertSinonMatch(result, {
         settings: {
           buildNum: {
-            userValue: sinon.match.number
+            userValue: sinon.match.number,
           },
           defaultIndex: {
-            userValue: defaultIndex
+            userValue: defaultIndex,
           },
           foo: {
             userValue: 'bar',
-            isOverridden: true
-          }
-        }
+            isOverridden: true,
+          },
+        },
       });
     });
   });
@@ -137,20 +133,20 @@ export function docMissingSuite() {
 
       const { statusCode, result } = await kbnServer.inject({
         method: 'DELETE',
-        url: '/api/kibana/settings/defaultIndex'
+        url: '/api/kibana/settings/defaultIndex',
       });
 
       expect(statusCode).to.be(200);
       assertSinonMatch(result, {
         settings: {
           buildNum: {
-            userValue: sinon.match.number
+            userValue: sinon.match.number,
           },
           foo: {
             userValue: 'bar',
-            isOverridden: true
-          }
-        }
+            isOverridden: true,
+          },
+        },
       });
     });
   });
diff --git a/src/legacy/ui/ui_settings/routes/__tests__/doc_missing_and_index_read_only.js b/src/legacy/ui/ui_settings/routes/integration_tests/doc_missing_and_index_read_only.ts
similarity index 85%
rename from src/legacy/ui/ui_settings/routes/__tests__/doc_missing_and_index_read_only.js
rename to src/legacy/ui/ui_settings/routes/integration_tests/doc_missing_and_index_read_only.ts
index 4ef004843054c0..1a17970081d9cc 100644
--- a/src/legacy/ui/ui_settings/routes/__tests__/doc_missing_and_index_read_only.js
+++ b/src/legacy/ui/ui_settings/routes/integration_tests/doc_missing_and_index_read_only.ts
@@ -20,11 +20,7 @@
 import expect from '@kbn/expect';
 import sinon from 'sinon';
 
-import {
-  getServices,
-  chance,
-  assertSinonMatch,
-} from './lib';
+import { getServices, chance, assertSinonMatch } from './lib';
 
 export function docMissingAndIndexReadOnlySuite() {
   // ensure the kibana index has no documents
@@ -35,15 +31,15 @@ export function docMissingAndIndexReadOnlySuite() {
     await kbnServer.inject({
       method: 'POST',
       url: '/api/kibana/settings/defaultIndex',
-      payload: { value: 'abc' }
+      payload: { value: 'abc' },
     });
 
     // delete all docs from kibana index to ensure savedConfig is not found
     await callCluster('deleteByQuery', {
       index: kbnServer.config.get('kibana.index'),
       body: {
-        query: { match_all: {} }
-      }
+        query: { match_all: {} },
+      },
     });
 
     // set the index to read only
@@ -52,10 +48,10 @@ export function docMissingAndIndexReadOnlySuite() {
       body: {
         index: {
           blocks: {
-            read_only: true
-          }
-        }
-      }
+            read_only: true,
+          },
+        },
+      },
     });
   });
 
@@ -68,10 +64,10 @@ export function docMissingAndIndexReadOnlySuite() {
       body: {
         index: {
           blocks: {
-            read_only: false
-          }
-        }
-      }
+            read_only: false,
+          },
+        },
+      },
     });
   });
 
@@ -81,20 +77,20 @@ export function docMissingAndIndexReadOnlySuite() {
 
       const { statusCode, result } = await kbnServer.inject({
         method: 'GET',
-        url: '/api/kibana/settings'
+        url: '/api/kibana/settings',
       });
 
       expect(statusCode).to.be(200);
       assertSinonMatch(result, {
         settings: {
           buildNum: {
-            userValue: sinon.match.number
+            userValue: sinon.match.number,
           },
           foo: {
             userValue: 'bar',
-            isOverridden: true
-          }
-        }
+            isOverridden: true,
+          },
+        },
       });
     });
   });
@@ -107,14 +103,14 @@ export function docMissingAndIndexReadOnlySuite() {
       const { statusCode, result } = await kbnServer.inject({
         method: 'POST',
         url: '/api/kibana/settings/defaultIndex',
-        payload: { value: defaultIndex }
+        payload: { value: defaultIndex },
       });
 
       expect(statusCode).to.be(403);
       assertSinonMatch(result, {
         error: 'Forbidden',
         message: sinon.match('index read-only'),
-        statusCode: 403
+        statusCode: 403,
       });
     });
   });
@@ -128,15 +124,15 @@ export function docMissingAndIndexReadOnlySuite() {
         method: 'POST',
         url: '/api/kibana/settings',
         payload: {
-          changes: { defaultIndex }
-        }
+          changes: { defaultIndex },
+        },
       });
 
       expect(statusCode).to.be(403);
       assertSinonMatch(result, {
         error: 'Forbidden',
         message: sinon.match('index read-only'),
-        statusCode: 403
+        statusCode: 403,
       });
     });
   });
@@ -147,14 +143,14 @@ export function docMissingAndIndexReadOnlySuite() {
 
       const { statusCode, result } = await kbnServer.inject({
         method: 'DELETE',
-        url: '/api/kibana/settings/defaultIndex'
+        url: '/api/kibana/settings/defaultIndex',
       });
 
       expect(statusCode).to.be(403);
       assertSinonMatch(result, {
         error: 'Forbidden',
         message: sinon.match('index read-only'),
-        statusCode: 403
+        statusCode: 403,
       });
     });
   });
diff --git a/src/legacy/ui/ui_settings/routes/__tests__/index.js b/src/legacy/ui/ui_settings/routes/integration_tests/index.test.ts
similarity index 89%
rename from src/legacy/ui/ui_settings/routes/__tests__/index.js
rename to src/legacy/ui/ui_settings/routes/integration_tests/index.test.ts
index bf4db3602eee34..db271761b39ea6 100644
--- a/src/legacy/ui/ui_settings/routes/__tests__/index.js
+++ b/src/legacy/ui/ui_settings/routes/integration_tests/index.test.ts
@@ -17,16 +17,13 @@
  * under the License.
  */
 
-import {
-  startServers,
-  stopServers,
-} from './lib';
+import { startServers, stopServers } from './lib';
 
 import { docExistsSuite } from './doc_exists';
 import { docMissingSuite } from './doc_missing';
 import { docMissingAndIndexReadOnlySuite } from './doc_missing_and_index_read_only';
 
-describe('uiSettings/routes', function () {
+describe('uiSettings/routes', function() {
   /**
    *  The "doc missing" and "index missing" tests verify how the uiSettings
    *  API behaves in between healthChecks, so they interact with the healthCheck
@@ -43,12 +40,13 @@ describe('uiSettings/routes', function () {
    *  stupidly fragile and timing sensitive. #14163 should fix that, but until then
    *  this is the most stable way I've been able to get this to work.
    */
-  this.slow(2000);
-  this.timeout(10000);
+  jest.setTimeout(10000);
 
-  before(startServers);
+  beforeAll(startServers);
+  /* eslint-disable jest/valid-describe */
   describe('doc missing', docMissingSuite);
   describe('doc missing and index readonly', docMissingAndIndexReadOnlySuite);
   describe('doc exists', docExistsSuite);
-  after(stopServers);
+  /* eslint-enable jest/valid-describe */
+  afterAll(stopServers);
 });
diff --git a/src/legacy/ui/ui_settings/routes/__tests__/lib/assert.js b/src/legacy/ui/ui_settings/routes/integration_tests/lib/assert.ts
similarity index 93%
rename from src/legacy/ui/ui_settings/routes/__tests__/lib/assert.js
rename to src/legacy/ui/ui_settings/routes/integration_tests/lib/assert.ts
index c7b8e057092643..62533b7ae734da 100644
--- a/src/legacy/ui/ui_settings/routes/__tests__/lib/assert.js
+++ b/src/legacy/ui/ui_settings/routes/integration_tests/lib/assert.ts
@@ -19,7 +19,7 @@
 
 import sinon from 'sinon';
 
-export function assertSinonMatch(value, match) {
+export function assertSinonMatch(value: any, match: any) {
   const stub = sinon.stub();
   stub(value);
   sinon.assert.calledWithExactly(stub, match);
diff --git a/src/legacy/ui/ui_settings/routes/__tests__/lib/chance.js b/src/legacy/ui/ui_settings/routes/integration_tests/lib/chance.ts
similarity index 100%
rename from src/legacy/ui/ui_settings/routes/__tests__/lib/chance.js
rename to src/legacy/ui/ui_settings/routes/integration_tests/lib/chance.ts
diff --git a/src/legacy/ui/ui_settings/routes/__tests__/lib/index.js b/src/legacy/ui/ui_settings/routes/integration_tests/lib/index.ts
similarity index 83%
rename from src/legacy/ui/ui_settings/routes/__tests__/lib/index.js
rename to src/legacy/ui/ui_settings/routes/integration_tests/lib/index.ts
index ecc20a09149d30..33a1cbd4d780b4 100644
--- a/src/legacy/ui/ui_settings/routes/__tests__/lib/index.js
+++ b/src/legacy/ui/ui_settings/routes/integration_tests/lib/index.ts
@@ -17,16 +17,8 @@
  * under the License.
  */
 
-export {
-  startServers,
-  getServices,
-  stopServers,
-} from './servers';
+export { startServers, getServices, stopServers } from './servers';
 
-export {
-  chance
-} from './chance';
+export { chance } from './chance';
 
-export {
-  assertSinonMatch,
-} from './assert';
+export { assertSinonMatch } from './assert';
diff --git a/src/legacy/ui/ui_settings/routes/__tests__/lib/servers.js b/src/legacy/ui/ui_settings/routes/integration_tests/lib/servers.ts
similarity index 66%
rename from src/legacy/ui/ui_settings/routes/__tests__/lib/servers.js
rename to src/legacy/ui/ui_settings/routes/integration_tests/lib/servers.ts
index 5db6b01750a70f..b076a2a86e1669 100644
--- a/src/legacy/ui/ui_settings/routes/__tests__/lib/servers.js
+++ b/src/legacy/ui/ui_settings/routes/integration_tests/lib/servers.ts
@@ -17,23 +17,38 @@
  * under the License.
  */
 
+import { UnwrapPromise } from '@kbn/utility-types';
+import { SavedObjectsClientContract } from 'src/core/server';
+
+import KbnServer from '../../../../../server/kbn_server';
 import { createTestServers } from '../../../../../../test_utils/kbn_server';
+import { CallCluster } from '../../../../../../legacy/core_plugins/elasticsearch';
+import { IUiSettingsClient } from '../../../ui_settings_service';
+
+let kbnServer: KbnServer;
+let servers: ReturnType<typeof createTestServers>;
+let esServer: UnwrapPromise<ReturnType<typeof servers['startES']>>;
+let kbn: UnwrapPromise<ReturnType<typeof servers['startKibana']>>;
+
+interface AllServices {
+  kbnServer: KbnServer;
+  savedObjectsClient: SavedObjectsClientContract;
+  callCluster: CallCluster;
+  uiSettings: IUiSettingsClient;
+  deleteKibanaIndex: typeof deleteKibanaIndex;
+}
 
-let kbnServer;
-let services;
-let servers;
-let esServer;
-let kbn;
+let services: AllServices;
 
 export async function startServers() {
   servers = createTestServers({
-    adjustTimeout: (t) => this.timeout(t),
+    adjustTimeout: t => jest.setTimeout(t),
     settings: {
       kbn: {
         uiSettings: {
           overrides: {
             foo: 'bar',
-          }
+          },
         },
       },
     },
@@ -43,9 +58,9 @@ export async function startServers() {
   kbnServer = kbn.kbnServer;
 }
 
-async function deleteKibanaIndex(callCluster) {
+async function deleteKibanaIndex(callCluster: CallCluster) {
   const kibanaIndices = await callCluster('cat.indices', { index: '.kibana*', format: 'json' });
-  const indexNames = kibanaIndices.map(x => x.index);
+  const indexNames = kibanaIndices.map((x: any) => x.index);
   if (!indexNames.length) {
     return;
   }
@@ -65,7 +80,7 @@ export function getServices() {
   const callCluster = esServer.es.getCallCluster();
 
   const savedObjects = kbnServer.server.savedObjects;
-  const savedObjectsClient = savedObjects.getScopedSavedObjectsClient();
+  const savedObjectsClient = savedObjects.getScopedSavedObjectsClient({});
 
   const uiSettings = kbnServer.server.uiSettingsServiceFactory({
     savedObjectsClient,
@@ -83,10 +98,10 @@ export function getServices() {
 }
 
 export async function stopServers() {
-  services = null;
-  kbnServer = null;
+  services = null!;
+  kbnServer = null!;
   if (servers) {
-    esServer.stop();
-    kbn.stop();
+    await esServer.stop();
+    await kbn.stop();
   }
 }
diff --git a/src/legacy/ui/ui_settings/routes/set.js b/src/legacy/ui/ui_settings/routes/set.ts
similarity index 70%
rename from src/legacy/ui/ui_settings/routes/set.js
rename to src/legacy/ui/ui_settings/routes/set.ts
index e50c9bf08de3e8..1f1ab17a0daf77 100644
--- a/src/legacy/ui/ui_settings/routes/set.js
+++ b/src/legacy/ui/ui_settings/routes/set.ts
@@ -16,18 +16,18 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
+import { Legacy } from 'kibana';
 import Joi from 'joi';
 
-async function handleRequest(request) {
+async function handleRequest(request: Legacy.Request) {
   const { key } = request.params;
-  const { value } = request.payload;
+  const { value } = request.payload as any;
   const uiSettings = request.getUiSettingsService();
 
   await uiSettings.set(key, value);
 
   return {
-    settings: await uiSettings.getUserProvided()
+    settings: await uiSettings.getUserProvided(),
   };
 }
 
@@ -36,16 +36,20 @@ export const setRoute = {
   method: 'POST',
   config: {
     validate: {
-      params: Joi.object().keys({
-        key: Joi.string().required(),
-      }).default(),
+      params: Joi.object()
+        .keys({
+          key: Joi.string().required(),
+        })
+        .default(),
 
-      payload: Joi.object().keys({
-        value: Joi.any().required()
-      }).required()
+      payload: Joi.object()
+        .keys({
+          value: Joi.any().required(),
+        })
+        .required(),
     },
-    handler(request) {
+    handler(request: Legacy.Request) {
       return handleRequest(request);
-    }
-  }
+    },
+  },
 };
diff --git a/src/legacy/ui/ui_settings/routes/set_many.js b/src/legacy/ui/ui_settings/routes/set_many.ts
similarity index 73%
rename from src/legacy/ui/ui_settings/routes/set_many.js
rename to src/legacy/ui/ui_settings/routes/set_many.ts
index 8e7882f48ef704..18b1046417feca 100644
--- a/src/legacy/ui/ui_settings/routes/set_many.js
+++ b/src/legacy/ui/ui_settings/routes/set_many.ts
@@ -16,17 +16,17 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
+import { Legacy } from 'kibana';
 import Joi from 'joi';
 
-async function handleRequest(request) {
-  const { changes } = request.payload;
+async function handleRequest(request: Legacy.Request) {
+  const { changes } = request.payload as any;
   const uiSettings = request.getUiSettingsService();
 
   await uiSettings.setMany(changes);
 
   return {
-    settings: await uiSettings.getUserProvided()
+    settings: await uiSettings.getUserProvided(),
   };
 }
 
@@ -35,12 +35,16 @@ export const setManyRoute = {
   method: 'POST',
   config: {
     validate: {
-      payload: Joi.object().keys({
-        changes: Joi.object().unknown(true).required()
-      }).required()
+      payload: Joi.object()
+        .keys({
+          changes: Joi.object()
+            .unknown(true)
+            .required(),
+        })
+        .required(),
     },
-    handler(request) {
+    handler(request: Legacy.Request) {
       return handleRequest(request);
-    }
-  }
+    },
+  },
 };
diff --git a/src/legacy/ui/ui_settings/ui_settings_service.js b/src/legacy/ui/ui_settings/ui_settings_service.js
deleted file mode 100644
index 0451dc588c9234..00000000000000
--- a/src/legacy/ui/ui_settings/ui_settings_service.js
+++ /dev/null
@@ -1,225 +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 { defaultsDeep } from 'lodash';
-import Boom from 'boom';
-
-import { createOrUpgradeSavedConfig } from './create_or_upgrade_saved_config';
-
-/**
- *  Service that provides access to the UiSettings stored in elasticsearch.
- *  @class UiSettingsService
- */
-export class UiSettingsService {
-  /**
-   *  @constructor
-   *  @param {Object} options
-   *  @property {string} options.type type of SavedConfig object
-   *  @property {string} options.id id of SavedConfig object
-   *  @property {number} options.buildNum
-   *  @property {SavedObjectsClient} options.savedObjectsClient
-   *  @property {Function} [options.getDefaults]
-   *  @property {Function} [options.log]
-   */
-  constructor(options) {
-    const {
-      type,
-      id,
-      buildNum,
-      savedObjectsClient,
-      // we use a function for getDefaults() so that defaults can be different in
-      // different scenarios, and so they can change over time
-      getDefaults = () => ({}),
-      // function that accepts log messages in the same format as server.logWithMetadata
-      logWithMetadata = () => {},
-      overrides = {},
-    } = options;
-
-    this._type = type;
-    this._id = id;
-    this._buildNum = buildNum;
-    this._savedObjectsClient = savedObjectsClient;
-    this._getDefaults = getDefaults;
-    this._overrides = overrides;
-    this._logWithMetadata = logWithMetadata;
-  }
-
-  async getDefaults() {
-    return await this._getDefaults();
-  }
-
-  // returns a Promise for the value of the requested setting
-  async get(key) {
-    const all = await this.getAll();
-    return all[key];
-  }
-
-  async getAll() {
-    const raw = await this.getRaw();
-
-    return Object.keys(raw)
-      .reduce((all, key) => {
-        const item = raw[key];
-        const hasUserValue = 'userValue' in item;
-        all[key] = hasUserValue ? item.userValue : item.value;
-        return all;
-      }, {});
-  }
-
-  async getRaw() {
-    const userProvided = await this.getUserProvided();
-    return defaultsDeep(userProvided, await this.getDefaults());
-  }
-
-  async getUserProvided(options) {
-    const userProvided = {};
-
-    // write the userValue for each key stored in the saved object that is not overridden
-    for (const [key, userValue] of Object.entries(await this._read(options))) {
-      if (userValue !== null && !this.isOverridden(key)) {
-        userProvided[key] = {
-          userValue
-        };
-      }
-    }
-
-    // write all overridden keys, dropping the userValue is override is null and
-    // adding keys for overrides that are not in saved object
-    for (const [key, userValue] of Object.entries(this._overrides)) {
-      userProvided[key] = userValue === null
-        ? { isOverridden: true }
-        : { isOverridden: true, userValue };
-    }
-
-    return userProvided;
-  }
-
-  async setMany(changes) {
-    await this._write({ changes });
-  }
-
-  async set(key, value) {
-    await this.setMany({ [key]: value });
-  }
-
-  async remove(key) {
-    await this.set(key, null);
-  }
-
-  async removeMany(keys) {
-    const changes = {};
-    keys.forEach(key => {
-      changes[key] = null;
-    });
-    await this.setMany(changes);
-  }
-
-  isOverridden(key) {
-    return this._overrides.hasOwnProperty(key);
-  }
-
-  assertUpdateAllowed(key) {
-    if (this.isOverridden(key)) {
-      throw Boom.badRequest(`Unable to update "${key}" because it is overridden`);
-    }
-  }
-
-  async _write({ changes, autoCreateOrUpgradeIfMissing = true }) {
-    for (const key of Object.keys(changes)) {
-      this.assertUpdateAllowed(key);
-    }
-
-    try {
-      await this._savedObjectsClient.update(this._type, this._id, changes);
-    } catch (error) {
-      const { isNotFoundError } = this._savedObjectsClient.errors;
-      if (!isNotFoundError(error) || !autoCreateOrUpgradeIfMissing) {
-        throw error;
-      }
-
-      await createOrUpgradeSavedConfig({
-        savedObjectsClient: this._savedObjectsClient,
-        version: this._id,
-        buildNum: this._buildNum,
-        logWithMetadata: this._logWithMetadata,
-      });
-
-      await this._write({
-        changes,
-        autoCreateOrUpgradeIfMissing: false
-      });
-    }
-  }
-
-  async _read(options = {}) {
-    const {
-      ignore401Errors = false,
-      autoCreateOrUpgradeIfMissing = true
-    } = options;
-
-    const {
-      isNotFoundError,
-      isForbiddenError,
-      isEsUnavailableError,
-      isNotAuthorizedError
-    } = this._savedObjectsClient.errors;
-
-    const isIgnorableError = error => (
-      isForbiddenError(error) ||
-      isEsUnavailableError(error) ||
-      (ignore401Errors && isNotAuthorizedError(error))
-    );
-
-    try {
-      const resp = await this._savedObjectsClient.get(this._type, this._id);
-      return resp.attributes;
-    } catch (error) {
-      if (isNotFoundError(error) && autoCreateOrUpgradeIfMissing) {
-        const failedUpgradeAttributes = await createOrUpgradeSavedConfig({
-          savedObjectsClient: this._savedObjectsClient,
-          version: this._id,
-          buildNum: this._buildNum,
-          logWithMetadata: this._logWithMetadata,
-          onWriteError(error, attributes) {
-            if (isNotAuthorizedError(error) || isForbiddenError(error)) {
-              return attributes;
-            }
-
-            throw error;
-          }
-        });
-
-        if (!failedUpgradeAttributes) {
-          return await this._read({
-            ...options,
-            autoCreateOrUpgradeIfMissing: false
-          });
-        }
-
-        return failedUpgradeAttributes;
-      }
-
-      if (isIgnorableError(error)) {
-        return {};
-      }
-
-      throw error;
-    }
-  }
-}
diff --git a/src/legacy/ui/ui_settings/ui_settings_service.mock.ts b/src/legacy/ui/ui_settings/ui_settings_service.mock.ts
new file mode 100644
index 00000000000000..7c1a17ebd447cc
--- /dev/null
+++ b/src/legacy/ui/ui_settings/ui_settings_service.mock.ts
@@ -0,0 +1,40 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { IUiSettingsClient } from './ui_settings_service';
+
+const createServiceMock = () => {
+  const mocked: jest.Mocked<IUiSettingsClient> = {
+    getDefaults: jest.fn(),
+    get: jest.fn(),
+    getAll: jest.fn(),
+    getUserProvided: jest.fn(),
+    setMany: jest.fn(),
+    set: jest.fn(),
+    remove: jest.fn(),
+    removeMany: jest.fn(),
+    isOverridden: jest.fn(),
+  };
+  mocked.get.mockResolvedValue(false);
+  return mocked;
+};
+
+export const uiSettingsServiceMock = {
+  create: createServiceMock,
+};
diff --git a/src/legacy/ui/ui_settings/__tests__/ui_settings_service.js b/src/legacy/ui/ui_settings/ui_settings_service.test.ts
similarity index 77%
rename from src/legacy/ui/ui_settings/__tests__/ui_settings_service.js
rename to src/legacy/ui/ui_settings/ui_settings_service.test.ts
index 3106ba429f7cea..f37076b27ad6f4 100644
--- a/src/legacy/ui/ui_settings/__tests__/ui_settings_service.js
+++ b/src/legacy/ui/ui_settings/ui_settings_service.test.ts
@@ -18,33 +18,32 @@
  */
 
 import expect from '@kbn/expect';
-import { errors as esErrors } from 'elasticsearch';
 import Chance from 'chance';
 import sinon from 'sinon';
 
-import { UiSettingsService } from '../ui_settings_service';
-import * as createOrUpgradeSavedConfigNS from '../create_or_upgrade_saved_config/create_or_upgrade_saved_config';
-import {
-  createObjectsClientStub,
-  savedObjectsClientErrors,
-} from './lib';
+import { UiSettingsService } from './ui_settings_service';
+import * as createOrUpgradeSavedConfigNS from './create_or_upgrade_saved_config/create_or_upgrade_saved_config';
+import { createObjectsClientStub, savedObjectsClientErrors } from './create_objects_client_stub';
 
 const TYPE = 'config';
 const ID = 'kibana-version';
 const BUILD_NUM = 1234;
 const chance = new Chance();
 
+interface SetupOptions {
+  getDefaults?: () => Record<string, any>;
+  defaults?: Record<string, any>;
+  esDocSource?: Record<string, any>;
+  overrides?: Record<string, any>;
+}
+
 describe('ui settings', () => {
   const sandbox = sinon.createSandbox();
 
-  function setup(options = {}) {
-    const {
-      getDefaults,
-      defaults = {},
-      overrides,
-      esDocSource = {},
-      savedObjectsClient = createObjectsClientStub(TYPE, ID, esDocSource)
-    } = options;
+  function setup(options: SetupOptions = {}) {
+    const { getDefaults, defaults = {}, overrides = {}, esDocSource = {} } = options;
+
+    const savedObjectsClient = createObjectsClientStub(esDocSource);
 
     const uiSettings = new UiSettingsService({
       type: TYPE,
@@ -55,14 +54,34 @@ describe('ui settings', () => {
       overrides,
     });
 
-    const createOrUpgradeSavedConfig = sandbox.stub(createOrUpgradeSavedConfigNS, 'createOrUpgradeSavedConfig');
+    const createOrUpgradeSavedConfig = sandbox.stub(
+      createOrUpgradeSavedConfigNS,
+      'createOrUpgradeSavedConfig'
+    );
+
+    function assertGetQuery() {
+      sinon.assert.calledOnce(savedObjectsClient.get);
+
+      const { args } = savedObjectsClient.get.getCall(0);
+      expect(args[0]).to.be(TYPE);
+      expect(args[1]).to.eql(ID);
+    }
+
+    function assertUpdateQuery(expectedChanges: unknown) {
+      sinon.assert.calledOnce(savedObjectsClient.update);
+
+      const { args } = savedObjectsClient.update.getCall(0);
+      expect(args[0]).to.be(TYPE);
+      expect(args[1]).to.eql(ID);
+      expect(args[2]).to.eql(expectedChanges);
+    }
 
     return {
       uiSettings,
       savedObjectsClient,
       createOrUpgradeSavedConfig,
-      assertGetQuery: savedObjectsClient.assertGetQuery,
-      assertUpdateQuery: savedObjectsClient.assertUpdateQuery,
+      assertGetQuery,
+      assertUpdateQuery,
     };
   }
 
@@ -75,15 +94,15 @@ describe('ui settings', () => {
     });
 
     it('updates a single value in one operation', async () => {
-      const { uiSettings, savedObjectsClient } = setup();
+      const { uiSettings, assertUpdateQuery } = setup();
       await uiSettings.setMany({ one: 'value' });
-      savedObjectsClient.assertUpdateQuery({ one: 'value' });
+      assertUpdateQuery({ one: 'value' });
     });
 
     it('updates several values in one operation', async () => {
-      const { uiSettings, savedObjectsClient } = setup();
+      const { uiSettings, assertUpdateQuery } = setup();
       await uiSettings.setMany({ one: 'value', another: 'val' });
-      savedObjectsClient.assertUpdateQuery({ one: 'value', another: 'val' });
+      assertUpdateQuery({ one: 'value', another: 'val' });
     });
 
     it('automatically creates the savedConfig if it is missing', async () => {
@@ -117,14 +136,14 @@ describe('ui settings', () => {
     it('throws an error if any key is overridden', async () => {
       const { uiSettings } = setup({
         overrides: {
-          foo: 'bar'
-        }
+          foo: 'bar',
+        },
       });
 
       try {
         await uiSettings.setMany({
           bar: 'box',
-          foo: 'baz'
+          foo: 'baz',
         });
       } catch (error) {
         expect(error.message).to.be('Unable to update "foo" because it is overridden');
@@ -139,16 +158,16 @@ describe('ui settings', () => {
     });
 
     it('updates single values by (key, value)', async () => {
-      const { uiSettings, savedObjectsClient } = setup();
+      const { uiSettings, assertUpdateQuery } = setup();
       await uiSettings.set('one', 'value');
-      savedObjectsClient.assertUpdateQuery({ one: 'value' });
+      assertUpdateQuery({ one: 'value' });
     });
 
     it('throws an error if the key is overridden', async () => {
       const { uiSettings } = setup({
         overrides: {
-          foo: 'bar'
-        }
+          foo: 'bar',
+        },
       });
 
       try {
@@ -166,16 +185,16 @@ describe('ui settings', () => {
     });
 
     it('removes single values by key', async () => {
-      const { uiSettings, savedObjectsClient } = setup();
+      const { uiSettings, assertUpdateQuery } = setup();
       await uiSettings.remove('one');
-      savedObjectsClient.assertUpdateQuery({ one: null });
+      assertUpdateQuery({ one: null });
     });
 
     it('throws an error if the key is overridden', async () => {
       const { uiSettings } = setup({
         overrides: {
-          foo: 'bar'
-        }
+          foo: 'bar',
+        },
       });
 
       try {
@@ -193,26 +212,26 @@ describe('ui settings', () => {
     });
 
     it('removes a single value', async () => {
-      const { uiSettings, savedObjectsClient } = setup();
+      const { uiSettings, assertUpdateQuery } = setup();
       await uiSettings.removeMany(['one']);
-      savedObjectsClient.assertUpdateQuery({ one: null });
+      assertUpdateQuery({ one: null });
     });
 
     it('updates several values in one operation', async () => {
-      const { uiSettings, savedObjectsClient } = setup();
+      const { uiSettings, assertUpdateQuery } = setup();
       await uiSettings.removeMany(['one', 'two', 'three']);
-      savedObjectsClient.assertUpdateQuery({ one: null, two: null, three: null });
+      assertUpdateQuery({ one: null, two: null, three: null });
     });
 
     it('throws an error if any key is overridden', async () => {
       const { uiSettings } = setup({
         overrides: {
-          foo: 'bar'
-        }
+          foo: 'bar',
+        },
       });
 
       try {
-        await uiSettings.setMany(['bar', 'foo']);
+        await uiSettings.setMany({ baz: 'baz', foo: 'foo' });
       } catch (error) {
         expect(error.message).to.be('Unable to update "foo" because it is overridden');
       }
@@ -239,16 +258,16 @@ describe('ui settings', () => {
       const value = chance.word();
       const { uiSettings } = setup({ defaults: { key: { value } } });
       expect(await uiSettings.getDefaults()).to.eql({
-        key: { value }
+        key: { value },
       });
     });
   });
 
   describe('#getUserProvided()', () => {
     it('pulls user configuration from ES', async () => {
-      const { uiSettings, savedObjectsClient } = setup();
+      const { uiSettings, assertGetQuery } = setup();
       await uiSettings.getUserProvided();
-      savedObjectsClient.assertGetQuery();
+      assertGetQuery();
     });
 
     it('returns user configuration', async () => {
@@ -258,7 +277,7 @@ describe('ui settings', () => {
       expect(result).to.eql({
         user: {
           userValue: 'customized',
-        }
+        },
       });
     });
 
@@ -268,89 +287,76 @@ describe('ui settings', () => {
       const result = await uiSettings.getUserProvided();
       expect(result).to.eql({
         user: {
-          userValue: 'customized'
+          userValue: 'customized',
         },
         something: {
-          userValue: 'else'
-        }
+          userValue: 'else',
+        },
       });
     });
 
-    it('returns an empty object on 404 responses', async () => {
-      const { uiSettings } = setup({
-        async callCluster() {
-          throw new esErrors[404]();
-        }
-      });
+    it.skip('returns an empty object on NotFound responses', async () => {
+      const { uiSettings, savedObjectsClient } = setup();
 
-      expect(await uiSettings.getUserProvided()).to.eql({});
+      const error = savedObjectsClientErrors.createGenericNotFoundError();
+      savedObjectsClient.get.throws(error);
+
+      expect(await uiSettings.getUserProvided({})).to.eql({});
     });
 
-    it('returns an empty object on 403 responses', async () => {
-      const { uiSettings } = setup({
-        async callCluster() {
-          throw new esErrors[403]();
-        }
-      });
+    it('returns an empty object on Forbidden responses', async () => {
+      const { uiSettings, savedObjectsClient } = setup();
+
+      const error = savedObjectsClientErrors.decorateForbiddenError(new Error());
+      savedObjectsClient.get.throws(error);
 
       expect(await uiSettings.getUserProvided()).to.eql({});
     });
 
-    it('returns an empty object on NoConnections responses', async () => {
-      const { uiSettings } = setup({
-        async callCluster() {
-          throw new esErrors.NoConnections();
-        }
-      });
+    it('returns an empty object on EsUnavailable responses', async () => {
+      const { uiSettings, savedObjectsClient } = setup();
+
+      const error = savedObjectsClientErrors.decorateEsUnavailableError(new Error());
+      savedObjectsClient.get.throws(error);
 
       expect(await uiSettings.getUserProvided()).to.eql({});
     });
 
-    it('throws 401 errors', async () => {
-      const { uiSettings } = setup({
-        savedObjectsClient: {
-          errors: savedObjectsClientErrors,
-          async get() {
-            throw new esErrors[401]();
-          }
-        }
-      });
+    it('throws Unauthorized errors', async () => {
+      const { uiSettings, savedObjectsClient } = setup();
+
+      const error = savedObjectsClientErrors.decorateNotAuthorizedError(new Error());
+      savedObjectsClient.get.throws(error);
 
       try {
         await uiSettings.getUserProvided();
         throw new Error('expect getUserProvided() to throw');
       } catch (err) {
-        expect(err).to.be.a(esErrors[401]);
+        expect(err).to.be(error);
       }
     });
 
-    it('throw when callCluster fails in some unexpected way', async () => {
-      const expectedUnexpectedError = new Error('unexpected');
+    it('throw when SavedObjectsClient throws in some unexpected way', async () => {
+      const { uiSettings, savedObjectsClient } = setup();
 
-      const { uiSettings } = setup({
-        savedObjectsClient: {
-          errors: savedObjectsClientErrors,
-          async get() {
-            throw expectedUnexpectedError;
-          }
-        }
-      });
+      const error = new Error('unexpected');
+      savedObjectsClient.get.throws(error);
 
       try {
         await uiSettings.getUserProvided();
         throw new Error('expect getUserProvided() to throw');
       } catch (err) {
-        expect(err).to.be(expectedUnexpectedError);
+        expect(err).to.be(error);
       }
     });
 
     it('includes overridden values for overridden keys', async () => {
       const esDocSource = {
-        user: 'customized'
+        user: 'customized',
       };
 
       const overrides = {
-        foo: 'bar'
+        foo: 'bar',
       };
 
       const { uiSettings } = setup({ esDocSource, overrides });
@@ -369,9 +375,9 @@ describe('ui settings', () => {
   describe('#getRaw()', () => {
     it('pulls user configuration from ES', async () => {
       const esDocSource = {};
-      const { uiSettings, savedObjectsClient } = setup({ esDocSource });
+      const { uiSettings, assertGetQuery } = setup({ esDocSource });
       await uiSettings.getRaw();
-      savedObjectsClient.assertGetQuery();
+      assertGetQuery();
     });
 
     it(`without user configuration it's equal to the defaults`, async () => {
@@ -420,17 +426,17 @@ describe('ui settings', () => {
   describe('#getAll()', () => {
     it('pulls user configuration from ES', async () => {
       const esDocSource = {};
-      const { uiSettings, savedObjectsClient } = setup({ esDocSource });
+      const { uiSettings, assertGetQuery } = setup({ esDocSource });
       await uiSettings.getAll();
-      savedObjectsClient.assertGetQuery();
+      assertGetQuery();
     });
 
     it(`returns defaults when es doc is empty`, async () => {
-      const esDocSource = { };
+      const esDocSource = {};
       const defaults = { foo: { value: 'bar' } };
       const { uiSettings } = setup({ esDocSource, defaults });
       expect(await uiSettings.getAll()).to.eql({
-        foo: 'bar'
+        foo: 'bar',
       });
     });
 
@@ -442,7 +448,7 @@ describe('ui settings', () => {
 
       const defaults = {
         foo: {
-          value: 'default'
+          value: 'default',
         },
       };
 
@@ -461,12 +467,12 @@ describe('ui settings', () => {
 
       const defaults = {
         foo: {
-          value: 'default'
+          value: 'default',
         },
       };
 
       const overrides = {
-        foo: 'bax'
+        foo: 'bax',
       };
 
       const { uiSettings } = setup({ esDocSource, defaults, overrides });
@@ -480,9 +486,9 @@ describe('ui settings', () => {
   describe('#get()', () => {
     it('pulls user configuration from ES', async () => {
       const esDocSource = {};
-      const { uiSettings, savedObjectsClient } = setup({ esDocSource });
-      await uiSettings.get();
-      savedObjectsClient.assertGetQuery();
+      const { uiSettings, assertGetQuery } = setup({ esDocSource });
+      await uiSettings.get('any');
+      assertGetQuery();
     });
 
     it(`returns the promised value for a key`, async () => {
@@ -525,7 +531,9 @@ describe('ui settings', () => {
     it('returns the overridden value if the document does not exist', async () => {
       const overrides = { dateFormat: 'foo' };
       const { uiSettings, savedObjectsClient } = setup({ overrides });
-      savedObjectsClient.get.onFirstCall().throws(savedObjectsClientErrors.createGenericNotFoundError());
+      savedObjectsClient.get
+        .onFirstCall()
+        .throws(savedObjectsClientErrors.createGenericNotFoundError());
       expect(await uiSettings.get('dateFormat')).to.be('foo');
     });
   });
@@ -557,7 +565,10 @@ describe('ui settings', () => {
     it('throws 400 Boom error when keys is overridden', () => {
       const { uiSettings } = setup({ overrides: { foo: true } });
       expect(() => uiSettings.assertUpdateAllowed('foo')).to.throwError(error => {
-        expect(error).to.have.property('message', 'Unable to update "foo" because it is overridden');
+        expect(error).to.have.property(
+          'message',
+          'Unable to update "foo" because it is overridden'
+        );
         expect(error).to.have.property('isBoom', true);
         expect(error.output).to.have.property('statusCode', 400);
       });
diff --git a/src/legacy/ui/ui_settings/ui_settings_service.ts b/src/legacy/ui/ui_settings/ui_settings_service.ts
new file mode 100644
index 00000000000000..57312140b16b31
--- /dev/null
+++ b/src/legacy/ui/ui_settings/ui_settings_service.ts
@@ -0,0 +1,295 @@
+/*
+ * 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 { Legacy } from 'kibana';
+import { defaultsDeep } from 'lodash';
+import Boom from 'boom';
+
+import { SavedObjectsClientContract, SavedObjectAttribute } from 'src/core/server';
+import { createOrUpgradeSavedConfig } from './create_or_upgrade_saved_config';
+
+export interface UiSettingsServiceOptions {
+  type: string;
+  id: string;
+  buildNum: number;
+  savedObjectsClient: SavedObjectsClientContract;
+  overrides?: Record<string, SavedObjectAttribute>;
+  getDefaults?: () => Record<string, UiSettingsParams>;
+  logWithMetadata?: Legacy.Server['logWithMetadata'];
+}
+
+interface ReadOptions {
+  ignore401Errors?: boolean;
+  autoCreateOrUpgradeIfMissing?: boolean;
+}
+
+interface UserProvidedValue {
+  userValue?: SavedObjectAttribute;
+  isOverridden?: boolean;
+}
+
+type UiSettingsRawValue = UiSettingsParams & UserProvidedValue;
+
+type UserProvided = Record<string, UserProvidedValue>;
+type UiSettingsRaw = Record<string, UiSettingsRawValue>;
+
+type UiSettingsType = 'json' | 'markdown' | 'number' | 'select' | 'boolean' | 'string';
+
+interface UiSettingsParams {
+  name: string;
+  value: SavedObjectAttribute;
+  description: string;
+  category: string[];
+  options?: string[];
+  optionLabels?: Record<string, string>;
+  requiresPageReload?: boolean;
+  readonly?: boolean;
+  type?: UiSettingsType;
+}
+
+export interface IUiSettingsClient {
+  getDefaults: () => Promise<Record<string, UiSettingsParams>>;
+  get: <T extends SavedObjectAttribute = any>(key: string) => Promise<T>;
+  getAll: <T extends SavedObjectAttribute = any>() => Promise<Record<string, T>>;
+  getUserProvided: () => Promise<UserProvided>;
+  setMany: <T extends SavedObjectAttribute = any>(changes: Record<string, T>) => Promise<void>;
+  set: <T extends SavedObjectAttribute = any>(key: string, value: T) => Promise<void>;
+  remove: (key: string) => Promise<void>;
+  removeMany: (keys: string[]) => Promise<void>;
+  isOverridden: (key: string) => boolean;
+}
+/**
+ *  Service that provides access to the UiSettings stored in elasticsearch.
+ *  @class UiSettingsService
+ */
+export class UiSettingsService implements IUiSettingsClient {
+  private readonly _type: UiSettingsServiceOptions['type'];
+  private readonly _id: UiSettingsServiceOptions['id'];
+  private readonly _buildNum: UiSettingsServiceOptions['buildNum'];
+  private readonly _savedObjectsClient: UiSettingsServiceOptions['savedObjectsClient'];
+  private readonly _overrides: NonNullable<UiSettingsServiceOptions['overrides']>;
+  private readonly _getDefaults: NonNullable<UiSettingsServiceOptions['getDefaults']>;
+  private readonly _logWithMetadata: NonNullable<UiSettingsServiceOptions['logWithMetadata']>;
+
+  constructor(options: UiSettingsServiceOptions) {
+    const {
+      type,
+      id,
+      buildNum,
+      savedObjectsClient,
+      // we use a function for getDefaults() so that defaults can be different in
+      // different scenarios, and so they can change over time
+      getDefaults = () => ({}),
+      // function that accepts log messages in the same format as server.logWithMetadata
+      logWithMetadata = () => {},
+      overrides = {},
+    } = options;
+
+    this._type = type;
+    this._id = id;
+    this._buildNum = buildNum;
+    this._savedObjectsClient = savedObjectsClient;
+    this._getDefaults = getDefaults;
+    this._overrides = overrides;
+    this._logWithMetadata = logWithMetadata;
+  }
+
+  async getDefaults() {
+    return await this._getDefaults();
+  }
+
+  // returns a Promise for the value of the requested setting
+  async get<T extends SavedObjectAttribute = any>(key: string): Promise<T> {
+    const all = await this.getAll();
+    return all[key];
+  }
+
+  async getAll<T extends SavedObjectAttribute = any>() {
+    const raw = await this.getRaw();
+
+    return Object.keys(raw).reduce(
+      (all, key) => {
+        const item = raw[key];
+        all[key] = ('userValue' in item ? item.userValue : item.value) as T;
+        return all;
+      },
+      {} as Record<string, T>
+    );
+  }
+
+  // NOTE: should be a private method
+  async getRaw(): Promise<UiSettingsRaw> {
+    const userProvided = await this.getUserProvided();
+    return defaultsDeep(userProvided, await this.getDefaults());
+  }
+
+  async getUserProvided(options: ReadOptions = {}): Promise<UserProvided> {
+    const userProvided: UserProvided = {};
+
+    // write the userValue for each key stored in the saved object that is not overridden
+    for (const [key, userValue] of Object.entries(await this._read(options))) {
+      if (userValue !== null && !this.isOverridden(key)) {
+        userProvided[key] = {
+          userValue,
+        };
+      }
+    }
+
+    // write all overridden keys, dropping the userValue is override is null and
+    // adding keys for overrides that are not in saved object
+    for (const [key, userValue] of Object.entries(this._overrides)) {
+      userProvided[key] =
+        userValue === null ? { isOverridden: true } : { isOverridden: true, userValue };
+    }
+
+    return userProvided;
+  }
+
+  async setMany<T extends SavedObjectAttribute = any>(changes: Record<string, T>) {
+    await this._write({ changes });
+  }
+
+  async set<T extends SavedObjectAttribute = any>(key: string, value: T) {
+    await this.setMany({ [key]: value });
+  }
+
+  async remove(key: string) {
+    await this.set(key, null);
+  }
+
+  async removeMany(keys: string[]) {
+    const changes: Record<string, null> = {};
+    keys.forEach(key => {
+      changes[key] = null;
+    });
+    await this.setMany(changes);
+  }
+
+  isOverridden(key: string) {
+    return this._overrides.hasOwnProperty(key);
+  }
+
+  // NOTE: should be private method
+  assertUpdateAllowed(key: string) {
+    if (this.isOverridden(key)) {
+      throw Boom.badRequest(`Unable to update "${key}" because it is overridden`);
+    }
+  }
+
+  private async _write<T extends SavedObjectAttribute = any>({
+    changes,
+    autoCreateOrUpgradeIfMissing = true,
+  }: {
+    changes: Record<string, T>;
+    autoCreateOrUpgradeIfMissing?: boolean;
+  }) {
+    for (const key of Object.keys(changes)) {
+      this.assertUpdateAllowed(key);
+    }
+
+    try {
+      await this._savedObjectsClient.update(this._type, this._id, changes);
+    } catch (error) {
+      const { isNotFoundError } = this._savedObjectsClient.errors;
+      if (!isNotFoundError(error) || !autoCreateOrUpgradeIfMissing) {
+        throw error;
+      }
+
+      await createOrUpgradeSavedConfig({
+        savedObjectsClient: this._savedObjectsClient,
+        version: this._id,
+        buildNum: this._buildNum,
+        logWithMetadata: this._logWithMetadata,
+      });
+
+      await this._write({
+        changes,
+        autoCreateOrUpgradeIfMissing: false,
+      });
+    }
+  }
+
+  private async _read<T extends SavedObjectAttribute>({
+    ignore401Errors = false,
+    autoCreateOrUpgradeIfMissing = true,
+  }: ReadOptions = {}): Promise<Record<string, T>> {
+    const {
+      isConflictError,
+      isNotFoundError,
+      isForbiddenError,
+      isNotAuthorizedError,
+    } = this._savedObjectsClient.errors;
+
+    try {
+      const resp = await this._savedObjectsClient.get(this._type, this._id);
+      return resp.attributes;
+    } catch (error) {
+      if (isNotFoundError(error) && autoCreateOrUpgradeIfMissing) {
+        const failedUpgradeAttributes = await createOrUpgradeSavedConfig<T>({
+          savedObjectsClient: this._savedObjectsClient,
+          version: this._id,
+          buildNum: this._buildNum,
+          logWithMetadata: this._logWithMetadata,
+          onWriteError(writeError, attributes) {
+            if (isConflictError(writeError)) {
+              // trigger `!failedUpgradeAttributes` check below, since another
+              // request caused the uiSettings object to be created so we can
+              // just re-read
+              return;
+            }
+
+            if (isNotAuthorizedError(writeError) || isForbiddenError(writeError)) {
+              return attributes;
+            }
+
+            throw writeError;
+          },
+        });
+
+        if (!failedUpgradeAttributes) {
+          return await this._read({
+            ignore401Errors,
+            autoCreateOrUpgradeIfMissing: false,
+          });
+        }
+
+        return failedUpgradeAttributes;
+      }
+
+      if (this.isIgnorableError(error, ignore401Errors)) {
+        return {};
+      }
+
+      throw error;
+    }
+  }
+
+  private isIgnorableError(error: Error, ignore401Errors: boolean) {
+    const {
+      isForbiddenError,
+      isEsUnavailableError,
+      isNotAuthorizedError,
+    } = this._savedObjectsClient.errors;
+
+    return (
+      isForbiddenError(error) ||
+      isEsUnavailableError(error) ||
+      (ignore401Errors && isNotAuthorizedError(error))
+    );
+  }
+}
diff --git a/src/legacy/ui/ui_settings/ui_settings_service_factory.js b/src/legacy/ui/ui_settings/ui_settings_service_factory.ts
similarity index 59%
rename from src/legacy/ui/ui_settings/ui_settings_service_factory.js
rename to src/legacy/ui/ui_settings/ui_settings_service_factory.ts
index f83a0d9825557b..9e1384494161c6 100644
--- a/src/legacy/ui/ui_settings/ui_settings_service_factory.js
+++ b/src/legacy/ui/ui_settings/ui_settings_service_factory.ts
@@ -16,29 +16,30 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { Legacy } from 'kibana';
+import {
+  IUiSettingsClient,
+  UiSettingsService,
+  UiSettingsServiceOptions,
+} from './ui_settings_service';
 
-import { UiSettingsService } from './ui_settings_service';
-
+export type UiSettingsServiceFactoryOptions = Pick<
+  UiSettingsServiceOptions,
+  'savedObjectsClient' | 'getDefaults' | 'overrides'
+>;
 /**
  *  Create an instance of UiSettingsService that will use the
- *  passed `callCluster` function to communicate with elasticsearch
+ *  passed `savedObjectsClient` to communicate with elasticsearch
  *
- *  @param {Hapi.Server} server
- *  @param {Object} options
- *  @property {AsyncFunction} options.callCluster function that accepts a method name and
- *                            param object which causes a request via some elasticsearch client
- *  @property {AsyncFunction} [options.getDefaults] async function that returns defaults/details about
- *                            the uiSettings.
- *  @return {UiSettingsService}
+ *  @return {IUiSettingsClient}
  */
-export function uiSettingsServiceFactory(server, options) {
+export function uiSettingsServiceFactory(
+  server: Legacy.Server,
+  options: UiSettingsServiceFactoryOptions
+): IUiSettingsClient {
   const config = server.config();
 
-  const {
-    savedObjectsClient,
-    getDefaults,
-    overrides,
-  } = options;
+  const { savedObjectsClient, getDefaults, overrides } = options;
 
   return new UiSettingsService({
     type: 'config',
@@ -47,6 +48,6 @@ export function uiSettingsServiceFactory(server, options) {
     savedObjectsClient,
     getDefaults,
     overrides,
-    logWithMetadata: (...args) => server.logWithMetadata(...args),
+    logWithMetadata: server.logWithMetadata,
   });
 }
diff --git a/src/legacy/ui/ui_settings/ui_settings_service_for_request.js b/src/legacy/ui/ui_settings/ui_settings_service_for_request.ts
similarity index 74%
rename from src/legacy/ui/ui_settings/ui_settings_service_for_request.js
rename to src/legacy/ui/ui_settings/ui_settings_service_for_request.ts
index 422c9cc14f833d..e265ad5f1e115a 100644
--- a/src/legacy/ui/ui_settings/ui_settings_service_for_request.js
+++ b/src/legacy/ui/ui_settings/ui_settings_service_for_request.ts
@@ -17,8 +17,11 @@
  * under the License.
  */
 
+import { Legacy } from 'kibana';
 import { uiSettingsServiceFactory } from './ui_settings_service_factory';
+import { IUiSettingsClient, UiSettingsServiceOptions } from './ui_settings_service';
 
+type Options = Pick<UiSettingsServiceOptions, 'getDefaults' | 'overrides'>;
 /**
  *  Get/create an instance of UiSettingsService bound to a specific request.
  *  Each call is cached (keyed on the request object itself) and subsequent
@@ -28,20 +31,20 @@ import { uiSettingsServiceFactory } from './ui_settings_service_factory';
  *  @param {Hapi.Server} server
  *  @param {Hapi.Request} request
  *  @param {Object} [options={}]
- *  @property {AsyncFunction} [options.getDefaults] async function that returns defaults/details about
- *                            the uiSettings.
- *  @return {UiSettingsService}
+
+ *  @return {IUiSettingsClient}
  */
-export function getUiSettingsServiceForRequest(server, request, options = {}) {
-  const {
-    getDefaults,
-    overrides,
-  } = options;
+export function getUiSettingsServiceForRequest(
+  server: Legacy.Server,
+  request: Legacy.Request,
+  options: Options
+): IUiSettingsClient {
+  const { getDefaults, overrides } = options;
 
   const uiSettingsService = uiSettingsServiceFactory(server, {
     getDefaults,
     overrides,
-    savedObjectsClient: request.getSavedObjectsClient()
+    savedObjectsClient: request.getSavedObjectsClient(),
   });
 
   return uiSettingsService;
diff --git a/src/plugins/data/common/field_formats/content_types/html_content_type.ts b/src/plugins/data/common/field_formats/content_types/html_content_type.ts
index 65b7944c5978ac..6bad1ef2b56c73 100644
--- a/src/plugins/data/common/field_formats/content_types/html_content_type.ts
+++ b/src/plugins/data/common/field_formats/content_types/html_content_type.ts
@@ -17,17 +17,17 @@
  * under the License.
  */
 import { escape, isFunction } from 'lodash';
-import { FieldFormatConvert, IFieldFormat, HtmlConventTypeConvert } from '../types';
+import { FieldFormatConvert, IFieldFormat, HtmlContextTypeConvert } from '../types';
 
 import { asPrettyString, getHighlightHtml } from '../utils';
 
-const CONTEXT_TYPE = 'html';
+export const HTML_CONTEXT_TYPE = 'html';
 
 const getConvertFn = (
   format: IFieldFormat,
-  fieldFormatConvert: FieldFormatConvert
-): HtmlConventTypeConvert => {
-  const fallbackHtml: HtmlConventTypeConvert = (value, field, hit) => {
+  fieldFormatConvert: Partial<FieldFormatConvert>
+): HtmlContextTypeConvert => {
+  const fallbackHtml: HtmlContextTypeConvert = (value, field, hit) => {
     const formatted = escape(format.convert(value, 'text'));
 
     return !field || !hit || !hit.highlight || !hit.highlight[field.name]
@@ -35,16 +35,16 @@ const getConvertFn = (
       : getHighlightHtml(formatted, hit.highlight[field.name]);
   };
 
-  return (fieldFormatConvert[CONTEXT_TYPE] || fallbackHtml) as HtmlConventTypeConvert;
+  return (fieldFormatConvert[HTML_CONTEXT_TYPE] || fallbackHtml) as HtmlContextTypeConvert;
 };
 
 export const setup = (
   format: IFieldFormat,
-  fieldFormatConvert: FieldFormatConvert
-): FieldFormatConvert => {
+  fieldFormatConvert: Partial<FieldFormatConvert>
+): HtmlContextTypeConvert => {
   const convert = getConvertFn(format, fieldFormatConvert);
 
-  const recurse: HtmlConventTypeConvert = (value, field, hit, meta) => {
+  const recurse: HtmlContextTypeConvert = (value, field, hit, meta) => {
     if (value == null) {
       return asPrettyString(value);
     }
@@ -63,11 +63,9 @@ export const setup = (
     return subValues.join(',' + (useMultiLine ? '\n' : ' '));
   };
 
-  const wrap: HtmlConventTypeConvert = (value, field, hit, meta) => {
+  const wrap: HtmlContextTypeConvert = (value, field, hit, meta) => {
     return `<span ng-non-bindable>${recurse(value, field, hit, meta)}</span>`;
   };
 
-  return {
-    [CONTEXT_TYPE]: wrap,
-  };
+  return wrap;
 };
diff --git a/src/plugins/data/common/field_formats/content_types/index.ts b/src/plugins/data/common/field_formats/content_types/index.ts
index b5d98a7bc83936..d391ba72d9f45d 100644
--- a/src/plugins/data/common/field_formats/content_types/index.ts
+++ b/src/plugins/data/common/field_formats/content_types/index.ts
@@ -17,5 +17,5 @@
  * under the License.
  */
 
-export { setup as textContentTypeSetup } from './text_content_type';
-export { setup as htmlContentTypeSetup } from './html_content_type';
+export { setup as textContentTypeSetup, TEXT_CONTEXT_TYPE } from './text_content_type';
+export { setup as htmlContentTypeSetup, HTML_CONTEXT_TYPE } from './html_content_type';
diff --git a/src/plugins/data/common/field_formats/content_types/text_content_type.ts b/src/plugins/data/common/field_formats/content_types/text_content_type.ts
index 40a450fae7067f..b0d3522f742a5b 100644
--- a/src/plugins/data/common/field_formats/content_types/text_content_type.ts
+++ b/src/plugins/data/common/field_formats/content_types/text_content_type.ts
@@ -22,15 +22,15 @@ import { IFieldFormat, FieldFormatConvert, TextContextTypeConvert } from '../typ
 
 import { asPrettyString } from '../utils';
 
-const CONTEXT_TYPE = 'text';
+export const TEXT_CONTEXT_TYPE = 'text';
 
-const getConvertFn = (fieldFormatConvert: FieldFormatConvert): TextContextTypeConvert =>
-  (fieldFormatConvert[CONTEXT_TYPE] || asPrettyString) as TextContextTypeConvert;
+const getConvertFn = (fieldFormatConvert: Partial<FieldFormatConvert>): TextContextTypeConvert =>
+  (fieldFormatConvert[TEXT_CONTEXT_TYPE] || asPrettyString) as TextContextTypeConvert;
 
 export const setup = (
   format: IFieldFormat,
-  fieldFormatConvert: FieldFormatConvert
-): FieldFormatConvert => {
+  fieldFormatConvert: Partial<FieldFormatConvert>
+): TextContextTypeConvert => {
   const convert = getConvertFn(fieldFormatConvert);
 
   const recurse: TextContextTypeConvert = value => {
@@ -42,5 +42,5 @@ export const setup = (
     return JSON.stringify(value.map(recurse));
   };
 
-  return { [CONTEXT_TYPE]: recurse };
+  return recurse;
 };
diff --git a/src/plugins/data/common/field_formats/converters/custom.ts b/src/plugins/data/common/field_formats/converters/custom.ts
index bc9b4211272281..3d562f97716be6 100644
--- a/src/plugins/data/common/field_formats/converters/custom.ts
+++ b/src/plugins/data/common/field_formats/converters/custom.ts
@@ -18,15 +18,13 @@
  */
 
 import { FieldFormat } from '../field_format';
-import { FieldFormatConvert } from '../types';
+import { FieldFormatConvertFunction } from '../types';
 
 const ID = 'custom';
 
-export const createCustomFieldFormat = (convert: FieldFormatConvert) =>
+export const createCustomFieldFormat = (convert: FieldFormatConvertFunction) =>
   class CustomFieldFormat extends FieldFormat {
     static id = ID;
 
-    public get _convert() {
-      return convert;
-    }
+    _convert = convert;
   };
diff --git a/src/plugins/data/common/field_formats/field_format.test.ts b/src/plugins/data/common/field_formats/field_format.test.ts
index 8e66eac85eb3ce..e4a64e91d1fff4 100644
--- a/src/plugins/data/common/field_formats/field_format.test.ts
+++ b/src/plugins/data/common/field_formats/field_format.test.ts
@@ -23,7 +23,7 @@ import { FieldFormatConvert } from './types';
 import { asPrettyString } from './utils/as_pretty_string';
 
 const getTestFormat = (
-  _convert: FieldFormatConvert = {
+  _convert: Partial<FieldFormatConvert> = {
     text: (val: string) => asPrettyString(val),
   },
   _params?: any
@@ -32,9 +32,7 @@ const getTestFormat = (
     static id = 'test-format';
     static title = 'Test Format';
 
-    public get _convert() {
-      return _convert;
-    }
+    _convert = _convert;
   })(_params);
 
 describe('FieldFormat class', () => {
diff --git a/src/plugins/data/common/field_formats/field_format.ts b/src/plugins/data/common/field_formats/field_format.ts
index 226631660b8a0f..962dc6b23d0985 100644
--- a/src/plugins/data/common/field_formats/field_format.ts
+++ b/src/plugins/data/common/field_formats/field_format.ts
@@ -21,10 +21,18 @@ import { isFunction, transform, size, cloneDeep, get, defaults } from 'lodash';
 import { createCustomFieldFormat } from './converters/custom';
 import { ContentType, FieldFormatConvert, FieldFormatConvertFunction } from './types';
 
-import { htmlContentTypeSetup, textContentTypeSetup } from './content_types';
+import {
+  htmlContentTypeSetup,
+  textContentTypeSetup,
+  TEXT_CONTEXT_TYPE,
+  HTML_CONTEXT_TYPE,
+} from './content_types';
 
 const DEFAULT_CONTEXT_TYPE = 'text';
 
+export const isFieldFormatConvertFn = (convert: any): convert is FieldFormatConvertFunction =>
+  isFunction(convert);
+
 export abstract class FieldFormat {
   /**
    * @property {string} - Field Format Id
@@ -43,19 +51,21 @@ export abstract class FieldFormat {
    * @property {string} - Field Format Type
    * @private
    */
-  static fieldType: string;
+  static fieldType: string | string[];
 
   /**
    * @property {FieldFormatConvert}
    * @private
+   * have to remove the private because of
+   * https://github.com/Microsoft/TypeScript/issues/17293
    */
-  _convert: FieldFormatConvert = FieldFormat.setupContentType(this, get(this, '_convert', {}));
+  convertObject: FieldFormatConvert | undefined;
 
   /**
    * @property {Function} - ref to child class
    * @private
    */
-  type: any = this.constructor;
+  public type: any = this.constructor;
 
   constructor(public _params: any = {}) {}
 
@@ -88,11 +98,11 @@ export abstract class FieldFormat {
   getConverterFor(
     contentType: ContentType = DEFAULT_CONTEXT_TYPE
   ): FieldFormatConvertFunction | null {
-    if (this._convert) {
-      return this._convert[contentType];
+    if (!this.convertObject) {
+      this.convertObject = FieldFormat.setupContentType(this, get(this, '_convert'));
     }
 
-    return null;
+    return this.convertObject[contentType] || null;
   }
 
   /**
@@ -160,32 +170,39 @@ export abstract class FieldFormat {
   }
 
   static from(convertFn: FieldFormatConvertFunction) {
-    return createCustomFieldFormat(FieldFormat.toConvertObject(convertFn));
+    return createCustomFieldFormat(convertFn);
   }
 
-  private static setupContentType(
+  /*
+   * have to remove the private because of
+   * https://github.com/Microsoft/TypeScript/issues/17293
+   */
+  static setupContentType(
     fieldFormat: IFieldFormat,
-    convert: FieldFormatConvert | FieldFormatConvertFunction
+    convert: Partial<FieldFormatConvert> | FieldFormatConvertFunction = {}
   ): FieldFormatConvert {
-    const convertObject = FieldFormat.toConvertObject(convert);
+    const convertObject = isFieldFormatConvertFn(convert)
+      ? FieldFormat.toConvertObject(convert)
+      : convert;
 
     return {
-      ...textContentTypeSetup(fieldFormat, convertObject),
-      ...htmlContentTypeSetup(fieldFormat, convertObject),
+      [TEXT_CONTEXT_TYPE]: textContentTypeSetup(fieldFormat, convertObject),
+      [HTML_CONTEXT_TYPE]: htmlContentTypeSetup(fieldFormat, convertObject),
     };
   }
 
-  private static toConvertObject(
-    convert: FieldFormatConvert | FieldFormatConvertFunction
-  ): FieldFormatConvert {
-    if (isFunction(convert)) {
+  /*
+   * have to remove the private because of
+   * https://github.com/Microsoft/TypeScript/issues/17293
+   */
+  static toConvertObject(convert: FieldFormatConvertFunction): Partial<FieldFormatConvert> {
+    if (isFieldFormatConvertFn(convert)) {
       return {
-        [DEFAULT_CONTEXT_TYPE]: convert,
+        [TEXT_CONTEXT_TYPE]: convert,
       };
     }
     return convert;
   }
 }
 
-export type FieldFormatConvert = { [key: string]: Function } | FieldFormatConvertFunction;
 export type IFieldFormat = PublicMethodsOf<FieldFormat>;
diff --git a/src/plugins/data/common/field_formats/types.ts b/src/plugins/data/common/field_formats/types.ts
index 39cf34b7103945..626bab297392b4 100644
--- a/src/plugins/data/common/field_formats/types.ts
+++ b/src/plugins/data/common/field_formats/types.ts
@@ -24,7 +24,7 @@ export type ContentType = 'html' | 'text';
 export { IFieldFormat } from './field_format';
 
 /** @internal **/
-export type HtmlConventTypeConvert = (
+export type HtmlContextTypeConvert = (
   value: any,
   field?: any,
   hit?: Record<string, any>,
@@ -35,9 +35,10 @@ export type HtmlConventTypeConvert = (
 export type TextContextTypeConvert = (value: any) => string;
 
 /** @internal **/
-export type FieldFormatConvertFunction = HtmlConventTypeConvert | TextContextTypeConvert;
+export type FieldFormatConvertFunction = HtmlContextTypeConvert | TextContextTypeConvert;
 
 /** @internal **/
 export interface FieldFormatConvert {
-  [key: string]: FieldFormatConvertFunction;
+  text: TextContextTypeConvert;
+  html: HtmlContextTypeConvert;
 }
diff --git a/src/plugins/data/public/autocomplete_provider/types.ts b/src/plugins/data/public/autocomplete_provider/types.ts
index f168533679ecd4..4b1c5dfbd3528e 100644
--- a/src/plugins/data/public/autocomplete_provider/types.ts
+++ b/src/plugins/data/public/autocomplete_provider/types.ts
@@ -18,6 +18,13 @@
  */
 
 import { StaticIndexPattern } from 'ui/index_patterns';
+import { AutocompleteProviderRegister } from '.';
+
+export type AutocompletePublicPluginSetup = Pick<
+  AutocompleteProviderRegister,
+  'addProvider' | 'getProvider'
+>;
+export type AutocompletePublicPluginStart = Pick<AutocompleteProviderRegister, 'getProvider'>;
 
 /** @public **/
 export type AutocompleteProvider = (args: {
diff --git a/src/plugins/data/public/index.ts b/src/plugins/data/public/index.ts
index 110ca3e68a97e1..91b94e09607ee0 100644
--- a/src/plugins/data/public/index.ts
+++ b/src/plugins/data/public/index.ts
@@ -25,6 +25,7 @@ export function plugin(initializerContext: PluginInitializerContext) {
 }
 
 export { DataPublicPlugin as Plugin };
+export { DataPublicPluginSetup, DataPublicPluginStart } from './types';
 
 export * from '../common';
 export * from './autocomplete_provider';
diff --git a/src/plugins/data/public/plugin.ts b/src/plugins/data/public/plugin.ts
index d1670ccb645dba..eb316477673605 100644
--- a/src/plugins/data/public/plugin.ts
+++ b/src/plugins/data/public/plugin.ts
@@ -19,14 +19,7 @@
 
 import { PluginInitializerContext, CoreSetup, CoreStart, Plugin } from '../../../core/public';
 import { AutocompleteProviderRegister } from './autocomplete_provider';
-
-export interface DataPublicPluginSetup {
-  autocomplete: Pick<AutocompleteProviderRegister, 'addProvider' | 'getProvider'>;
-}
-
-export interface DataPublicPluginStart {
-  autocomplete: Pick<AutocompleteProviderRegister, 'getProvider'>;
-}
+import { DataPublicPluginSetup, DataPublicPluginStart } from './types';
 
 export class DataPublicPlugin implements Plugin<DataPublicPluginSetup, DataPublicPluginStart> {
   private readonly autocomplete = new AutocompleteProviderRegister();
diff --git a/src/plugins/data/public/types.ts b/src/plugins/data/public/types.ts
index ea160d34dc1548..23308304b8ff8e 100644
--- a/src/plugins/data/public/types.ts
+++ b/src/plugins/data/public/types.ts
@@ -18,3 +18,12 @@
  */
 
 export * from './autocomplete_provider/types';
+
+import { AutocompletePublicPluginSetup, AutocompletePublicPluginStart } from '.';
+export interface DataPublicPluginSetup {
+  autocomplete: AutocompletePublicPluginSetup;
+}
+
+export interface DataPublicPluginStart {
+  autocomplete: AutocompletePublicPluginStart;
+}
diff --git a/src/plugins/embeddable/public/lib/containers/embeddable_child_panel.tsx b/src/plugins/embeddable/public/lib/containers/embeddable_child_panel.tsx
index 51e6771766690e..d3f9b07be47543 100644
--- a/src/plugins/embeddable/public/lib/containers/embeddable_child_panel.tsx
+++ b/src/plugins/embeddable/public/lib/containers/embeddable_child_panel.tsx
@@ -91,7 +91,7 @@ export class EmbeddableChildPanel extends React.Component<EmbeddableChildPanelPr
     });
 
     return (
-      <div id="embeddedPanel" className={classes}>
+      <div className={classes}>
         {this.state.loading || !this.embeddable ? (
           <EuiLoadingChart size="l" mono />
         ) : (
diff --git a/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx b/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx
index 3f3729645b7e27..8a8a2f44b7fd8a 100644
--- a/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx
+++ b/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { EuiContextMenuPanelDescriptor, EuiPanel } from '@elastic/eui';
+import { EuiContextMenuPanelDescriptor, EuiPanel, htmlIdGenerator } from '@elastic/eui';
 import classNames from 'classnames';
 import React from 'react';
 import { Subscription } from 'rxjs';
@@ -65,6 +65,8 @@ export class EmbeddablePanel extends React.Component<Props, State> {
   private parentSubscription?: Subscription;
   private subscription?: Subscription;
   private mounted: boolean = false;
+  private generateId = htmlIdGenerator();
+
   constructor(props: Props) {
     super(props);
     const { embeddable } = this.props;
@@ -153,8 +155,15 @@ export class EmbeddablePanel extends React.Component<Props, State> {
       'embPanel--editing': !viewOnlyMode,
     });
     const title = this.props.embeddable.getTitle();
+    const headerId = this.generateId();
     return (
-      <EuiPanel className={classes} data-test-subj="embeddablePanel" paddingSize="none">
+      <EuiPanel
+        className={classes}
+        data-test-subj="embeddablePanel"
+        paddingSize="none"
+        role="figure"
+        aria-labelledby={headerId}
+      >
         <PanelHeader
           getActionContextMenuPanel={this.getActionContextMenuPanel}
           hidePanelTitles={this.state.hidePanelTitles}
@@ -163,6 +172,7 @@ export class EmbeddablePanel extends React.Component<Props, State> {
           title={title}
           badges={this.state.badges}
           embeddable={this.props.embeddable}
+          headerId={headerId}
         />
         <div className="embPanel__content" ref={this.embeddableRoot} />
       </EuiPanel>
diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx b/src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx
index 930b68dc884eff..eedd4ba142d825 100644
--- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx
+++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx
@@ -17,7 +17,13 @@
  * under the License.
  */
 import { i18n } from '@kbn/i18n';
-import { EuiContextMenuPanelDescriptor, EuiBadge, EuiIcon, EuiToolTip } from '@elastic/eui';
+import {
+  EuiContextMenuPanelDescriptor,
+  EuiBadge,
+  EuiIcon,
+  EuiToolTip,
+  EuiScreenReaderOnly,
+} from '@elastic/eui';
 import classNames from 'classnames';
 import React from 'react';
 import { IAction } from 'src/plugins/ui_actions/public';
@@ -32,6 +38,7 @@ export interface PanelHeaderProps {
   closeContextMenu: boolean;
   badges: IAction[];
   embeddable: IEmbeddable;
+  headerId?: string;
 }
 
 function renderBadges(badges: IAction[], embeddable: IEmbeddable) {
@@ -48,8 +55,29 @@ function renderBadges(badges: IAction[], embeddable: IEmbeddable) {
   ));
 }
 
-function isVisualizeEmbeddable(embeddable: IEmbeddable | any): embeddable is any {
-  return embeddable.type === 'VISUALIZE_EMBEDDABLE_TYPE';
+function renderTooltip(description: string) {
+  return (
+    description !== '' && (
+      <EuiToolTip content={description} delay="regular" position="right">
+        <EuiIcon type="iInCircle" />
+      </EuiToolTip>
+    )
+  );
+}
+
+const VISUALIZE_EMBEDDABLE_TYPE = 'visualization';
+type VisualizeEmbeddable = any;
+
+function getViewDescription(embeddable: IEmbeddable | VisualizeEmbeddable) {
+  if (embeddable.type === VISUALIZE_EMBEDDABLE_TYPE) {
+    const description = embeddable.getVisualizationDescription();
+
+    if (description) {
+      return description;
+    }
+  }
+
+  return '';
 }
 
 export function PanelHeader({
@@ -60,10 +88,11 @@ export function PanelHeader({
   closeContextMenu,
   badges,
   embeddable,
+  headerId,
 }: PanelHeaderProps) {
-  const showTitle = !isViewMode || (title && !hidePanelTitles);
+  const viewDescription = getViewDescription(embeddable);
+  const showTitle = !isViewMode || (title && !hidePanelTitles) || viewDescription !== '';
   const showPanelBar = badges.length > 0 || showTitle;
-
   const classes = classNames('embPanel__header', {
     'embPanel__header--floater': !showPanelBar,
   });
@@ -75,60 +104,55 @@ export function PanelHeader({
           getActionContextMenuPanel={getActionContextMenuPanel}
           isViewMode={isViewMode}
           closeContextMenu={closeContextMenu}
+          title={title}
         />
       </div>
     );
   }
 
-  let viewDescr = '';
-  if (isVisualizeEmbeddable(embeddable)) {
-    const vd = (embeddable as any).getVisualizationDescription();
-    if (vd) {
-      viewDescr = vd;
-    }
-  } else {
-    viewDescr = '';
-  }
-
   return (
-    <div
+    <figcaption
       className={classes}
       data-test-subj={`embeddablePanelHeading-${(title || '').replace(/\s/g, '')}`}
     >
-      <div
+      <h2
+        id={headerId}
         data-test-subj="dashboardPanelTitle"
         className="embPanel__title embPanel__dragger"
-        /* title={title} */ /* this is redundant - it shows a tooltip with the view title - and clutters the UI */ aria-label={i18n.translate(
-          'embeddableApi.panel.dashboardPanelAriaLabel',
-          {
-            defaultMessage: 'Dashboard panel: {title}',
-            values: {
-              title,
-            },
-          }
-        )}
       >
-        {showTitle || viewDescr !== '' ? (
+        {showTitle ? (
           <span className="embPanel__titleInner">
-            <span className="embPanel__titleText">{title}</span>
-
-            {viewDescr !== '' && (
-              <EuiToolTip content={viewDescr} delay="regular" position="right">
-                <EuiIcon type="iInCircle" />
-              </EuiToolTip>
-            )}
+            <span className="embPanel__titleText" aria-hidden="true">
+              {title}
+            </span>
+            <EuiScreenReaderOnly>
+              <span>
+                {i18n.translate('embeddableApi.panel.enhancedDashboardPanelAriaLabel', {
+                  defaultMessage: 'Dashboard panel: {title}',
+                  values: { title },
+                })}
+              </span>
+            </EuiScreenReaderOnly>
+            {renderTooltip(viewDescription)}
           </span>
         ) : (
-          undefined
+          <EuiScreenReaderOnly>
+            <span>
+              {i18n.translate('embeddableApi.panel.dashboardPanelAriaLabel', {
+                defaultMessage: 'Dashboard panel',
+              })}
+            </span>
+          </EuiScreenReaderOnly>
         )}
         {renderBadges(badges, embeddable)}
-      </div>
+      </h2>
 
       <PanelOptionsMenu
         isViewMode={isViewMode}
         getActionContextMenuPanel={getActionContextMenuPanel}
         closeContextMenu={closeContextMenu}
+        title={title}
       />
-    </div>
+    </figcaption>
   );
 }
diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_options_menu.tsx b/src/plugins/embeddable/public/lib/panel/panel_header/panel_options_menu.tsx
index 2949e435e7f411..5548c9a0596b45 100644
--- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_options_menu.tsx
+++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_options_menu.tsx
@@ -31,6 +31,7 @@ export interface PanelOptionsMenuProps {
   getActionContextMenuPanel: () => Promise<EuiContextMenuPanelDescriptor>;
   isViewMode: boolean;
   closeContextMenu: boolean;
+  title?: string;
 }
 
 interface State {
@@ -73,15 +74,27 @@ export class PanelOptionsMenu extends React.Component<PanelOptionsMenuProps, Sta
   }
 
   public render() {
-    const { isViewMode } = this.props;
+    const { isViewMode, title } = this.props;
+    const enhancedAriaLabel = i18n.translate(
+      'embeddableApi.panel.optionsMenu.panelOptionsButtonEnhancedAriaLabel',
+      {
+        defaultMessage: 'Panel options for {title}',
+        values: { title },
+      }
+    );
+    const ariaLabelWithoutTitle = i18n.translate(
+      'embeddableApi.panel.optionsMenu.panelOptionsButtonAriaLabel',
+      {
+        defaultMessage: 'Panel options',
+      }
+    );
+
     const button = (
       <EuiButtonIcon
         iconType={isViewMode ? 'boxesHorizontal' : 'gear'}
         color="text"
         className="embPanel__optionsMenuButton"
-        aria-label={i18n.translate('embeddableApi.panel.optionsMenu.panelOptionsButtonAriaLabel', {
-          defaultMessage: 'Panel options',
-        })}
+        aria-label={title ? enhancedAriaLabel : ariaLabelWithoutTitle}
         data-test-subj="embeddablePanelToggleMenuIcon"
         onClick={this.toggleContextMenu}
       />
@@ -89,7 +102,6 @@ export class PanelOptionsMenu extends React.Component<PanelOptionsMenuProps, Sta
 
     return (
       <EuiPopover
-        id="dashboardPanelContextMenu"
         className="embPanel__optionsMenuPopover"
         button={button}
         isOpen={this.state.isPopoverOpen}
diff --git a/src/plugins/embeddable/public/lib/test_samples/embeddables/contact_card/contact_card.tsx b/src/plugins/embeddable/public/lib/test_samples/embeddables/contact_card/contact_card.tsx
index a83364f22021a7..51640749bc2b41 100644
--- a/src/plugins/embeddable/public/lib/test_samples/embeddables/contact_card/contact_card.tsx
+++ b/src/plugins/embeddable/public/lib/test_samples/embeddables/contact_card/contact_card.tsx
@@ -17,13 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import {
-  // @ts-ignore
-  EuiCard,
-  EuiFlexItem,
-  EuiFlexGroup,
-  EuiFormRow,
-} from '@elastic/eui';
+import { EuiCard, EuiFlexItem, EuiFlexGroup, EuiFormRow } from '@elastic/eui';
 
 import { Subscription } from 'rxjs';
 import { EuiButton } from '@elastic/eui';
@@ -96,7 +90,12 @@ export class ContactCardEmbeddableComponent extends React.Component<Props, State
 
   render() {
     return (
-      <EuiCard textAlign="left" title={this.state.fullName} footer={this.getCardFooterContent()} />
+      <EuiCard
+        textAlign="left"
+        title={this.state.fullName}
+        footer={this.getCardFooterContent()}
+        description=""
+      />
     );
   }
 }
diff --git a/src/plugins/es_ui_shared/public/request/request.ts b/src/plugins/es_ui_shared/public/request/request.ts
index 4d210dbf5823c3..fd6980367136eb 100644
--- a/src/plugins/es_ui_shared/public/request/request.ts
+++ b/src/plugins/es_ui_shared/public/request/request.ts
@@ -21,7 +21,7 @@ import { useEffect, useState, useRef } from 'react';
 
 export interface SendRequestConfig {
   path: string;
-  method: 'get' | 'post' | 'put' | 'delete' | 'patch';
+  method: 'get' | 'post' | 'put' | 'delete' | 'patch' | 'head';
   body?: any;
 }
 
diff --git a/src/plugins/eui_utils/README.md b/src/plugins/eui_utils/README.md
new file mode 100644
index 00000000000000..019cca9c045153
--- /dev/null
+++ b/src/plugins/eui_utils/README.md
@@ -0,0 +1,67 @@
+# EuiUtils
+
+The EuiUtils plugin is a way to create easier integration of EUI colors, themes, and other utilities with Kibana. They usually take into account the current theme (light or dark) of Kibana and return the correct object that was asked for.
+
+## EUI plus Elastic-Charts
+
+EUI provides a light and dark theme object to work with Elastic-Charts. However, every instance of a Chart would need to pass down this the correctly EUI theme depending on Kibana's light or dark mode. There are several ways you can use EuiUtils to grab the correct theme.
+
+### `useChartsTheme`
+
+The simple fetching of the correct EUI theme; a **React hook**.
+
+```js
+import { npStart } from 'ui/new_platform';
+import { Chart, Settings } from '@elastic/charts';
+
+export const YourComponent = () => (
+  <Chart>
+    <Settings theme={npStart.plugins.eui_utils.useChartsTheme()} />
+  </Chart>
+);
+```
+
+### `getChartsTheme$`
+
+An **observable** of the current charts theme. Use this implementation for more flexible updates to the chart theme without full page refreshes.
+
+```ts
+import { npStart } from 'ui/new_platform';
+import { EuiChartThemeType } from '@elastic/eui/src/themes/charts/themes';
+import { Subscription } from 'rxjs';
+import { Chart, Settings } from '@elastic/charts';
+
+interface YourComponentState {
+  chartsTheme: EuiChartThemeType['theme'];
+}
+
+export class YourComponent extends Component<YourComponentProps, YourComponentState> {
+  private subscription?: Subscription;
+  public state = {
+    chartsTheme: npStart.plugins.eui_utils.getChartsThemeDefault(),
+  };
+
+  componentDidMount() {
+    this.subscription = npStart.plugins.eui_utils
+      .getChartsTheme$()
+      .subscribe(chartsTheme => this.setState({ chartsTheme }));
+  }
+
+  componentWillUnmount() {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+      this.subscription = undefined;
+    }
+  }
+
+  public render() {
+    const { chartsTheme } = this.state;
+
+    return (
+      <Chart>
+        <Settings theme={chartsTheme} />
+      </Chart>
+    );
+  }
+}
+```
diff --git a/src/plugins/inspector/public/views/data/components/__snapshots__/data_view.test.tsx.snap b/src/plugins/inspector/public/views/data/components/__snapshots__/data_view.test.tsx.snap
index 37c77c97fe39de..adea7831d6b805 100644
--- a/src/plugins/inspector/public/views/data/components/__snapshots__/data_view.test.tsx.snap
+++ b/src/plugins/inspector/public/views/data/components/__snapshots__/data_view.test.tsx.snap
@@ -250,7 +250,6 @@ exports[`Inspector Data View component should render empty state 1`] = `
           </p>
         </React.Fragment>
       }
-      iconColor="subdued"
       title={
         <h2>
           <FormattedMessage
diff --git a/src/plugins/ui_actions/public/context_menu/open_context_menu.tsx b/src/plugins/ui_actions/public/context_menu/open_context_menu.tsx
index 9ddeb6f4228354..4d794618e85abe 100644
--- a/src/plugins/ui_actions/public/context_menu/open_context_menu.tsx
+++ b/src/plugins/ui_actions/public/context_menu/open_context_menu.tsx
@@ -141,7 +141,6 @@ export function openContextMenu(
 
   ReactDOM.render(
     <EuiPopover
-      id="dashboardPanelContextMenu"
       className="embPanel__optionsMenuPopover"
       button={container}
       isOpen={true}
diff --git a/tasks/config/run.js b/tasks/config/run.js
index a28eab17e280e3..ea5a4b01dc8a52 100644
--- a/tasks/config/run.js
+++ b/tasks/config/run.js
@@ -60,6 +60,7 @@ module.exports = function (grunt) {
     '--plugins.initialize=false',
     '--optimize.bundleFilter=tests',
     '--server.port=5610',
+    '--migrations.skip=true'
   ];
 
   const NODE = 'node';
diff --git a/test/api_integration/apis/saved_objects/find.js b/test/api_integration/apis/saved_objects/find.js
index fa03d46765e929..a41df24ea7a418 100644
--- a/test/api_integration/apis/saved_objects/find.js
+++ b/test/api_integration/apis/saved_objects/find.js
@@ -109,6 +109,63 @@ export default function ({ getService }) {
             })
         ));
       });
+
+      describe('with a filter', () => {
+        it('should return 200 with a valid response', async () => (
+          await supertest
+            .get('/api/saved_objects/_find?type=visualization&filter=visualization.attributes.title:"Count of requests"')
+            .expect(200)
+            .then(resp => {
+              expect(resp.body).to.eql({
+                page: 1,
+                per_page: 20,
+                total: 1,
+                saved_objects: [
+                  {
+                    type: 'visualization',
+                    id: 'dd7caf20-9efd-11e7-acb3-3dab96693fab',
+                    attributes: {
+                      title: 'Count of requests',
+                      visState: resp.body.saved_objects[0].attributes.visState,
+                      uiStateJSON: '{"spy":{"mode":{"name":null,"fill":false}}}',
+                      description: '',
+                      version: 1,
+                      kibanaSavedObjectMeta: {
+                        searchSourceJSON: resp.body.saved_objects[0].attributes.kibanaSavedObjectMeta.searchSourceJSON,
+                      },
+                    },
+                    references: [
+                      {
+                        name: 'kibanaSavedObjectMeta.searchSourceJSON.index',
+                        type: 'index-pattern',
+                        id: '91200a00-9efd-11e7-acb3-3dab96693fab',
+                      }
+                    ],
+                    migrationVersion: {
+                      visualization: '7.3.1',
+                    },
+                    updated_at: '2017-09-21T18:51:23.794Z',
+                    version: 'WzIsMV0=',
+                  },
+                ],
+              });
+            })
+        ));
+
+        it('wrong type should return 400 with Bad Request', async () => (
+          await supertest
+            .get('/api/saved_objects/_find?type=visualization&filter=dashboard.attributes.title:foo')
+            .expect(400)
+            .then(resp => {
+              console.log('body', JSON.stringify(resp.body));
+              expect(resp.body).to.eql({
+                error: 'Bad Request',
+                message: 'This type dashboard is not allowed: Bad Request',
+                statusCode: 400,
+              });
+            })
+        ));
+      });
     });
 
     describe('without kibana index', () => {
@@ -200,6 +257,36 @@ export default function ({ getService }) {
             })
         ));
       });
+
+      describe('with a filter', () => {
+        it('should return 200 with an empty response', async () => (
+          await supertest
+            .get('/api/saved_objects/_find?type=visualization&filter=visualization.attributes.title:"Count of requests"')
+            .expect(200)
+            .then(resp => {
+              expect(resp.body).to.eql({
+                page: 1,
+                per_page: 20,
+                total: 0,
+                saved_objects: []
+              });
+            })
+        ));
+
+        it('wrong type should return 400 with Bad Request', async () => (
+          await supertest
+            .get('/api/saved_objects/_find?type=visualization&filter=dashboard.attributes.title:foo')
+            .expect(400)
+            .then(resp => {
+              console.log('body', JSON.stringify(resp.body));
+              expect(resp.body).to.eql({
+                error: 'Bad Request',
+                message: 'This type dashboard is not allowed: Bad Request',
+                statusCode: 400,
+              });
+            })
+        ));
+      });
     });
   });
 }
diff --git a/test/api_integration/apis/saved_objects/migrations.js b/test/api_integration/apis/saved_objects/migrations.js
index 03b0baf1da92bd..5c492951ec9384 100644
--- a/test/api_integration/apis/saved_objects/migrations.js
+++ b/test/api_integration/apis/saved_objects/migrations.js
@@ -285,7 +285,7 @@ async function migrateIndex({ callCluster, index, migrations, mappingProperties,
     obsoleteIndexTemplatePattern,
     mappingProperties,
     batchSize: 10,
-    log: _.noop,
+    log: { info: _.noop, debug: _.noop, warn: _.noop },
     pollInterval: 50,
     scrollDuration: '5m',
     serializer: new SavedObjectsSerializer(new SavedObjectsSchema()),
diff --git a/test/common/services/kibana_server/kibana_server.ts b/test/common/services/kibana_server/kibana_server.ts
index 1455eb8ed8aa49..f7b7885840455e 100644
--- a/test/common/services/kibana_server/kibana_server.ts
+++ b/test/common/services/kibana_server/kibana_server.ts
@@ -18,36 +18,24 @@
  */
 
 import Url from 'url';
+import { KbnClient } from '@kbn/dev-utils';
 
 import { FtrProviderContext } from '../../ftr_provider_context';
-// @ts-ignore not ts yet
-import { KibanaServerStatus } from './status';
-// @ts-ignore not ts yet
-import { KibanaServerUiSettings } from './ui_settings';
-// @ts-ignore not ts yet
-import { KibanaServerVersion } from './version';
-import { KibanaServerSavedObjects } from './saved_objects';
 
 export function KibanaServerProvider({ getService }: FtrProviderContext) {
   const log = getService('log');
   const config = getService('config');
   const lifecycle = getService('lifecycle');
-
   const url = Url.format(config.get('servers.kibana'));
+  const defaults = config.get('uiSettings.defaults');
+
+  const kbn = new KbnClient(log, [url], defaults);
 
-  return new (class KibanaServer {
-    public readonly status = new KibanaServerStatus(url);
-    public readonly version = new KibanaServerVersion(this.status);
-    public readonly savedObjects = new KibanaServerSavedObjects(url, log);
-    public readonly uiSettings = new KibanaServerUiSettings(
-      url,
-      log,
-      config.get('uiSettings.defaults'),
-      lifecycle
-    );
+  if (defaults) {
+    lifecycle.on('beforeTests', async () => {
+      await kbn.uiSettings.update(defaults);
+    });
+  }
 
-    public resolveUrl(path = '/') {
-      return Url.resolve(url, path);
-    }
-  })();
+  return kbn;
 }
diff --git a/test/common/services/kibana_server/ui_settings.js b/test/common/services/kibana_server/ui_settings.js
deleted file mode 100644
index aa75839c20152f..00000000000000
--- a/test/common/services/kibana_server/ui_settings.js
+++ /dev/null
@@ -1,84 +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 Wreck from '@hapi/wreck';
-import { get } from 'lodash';
-
-export class KibanaServerUiSettings {
-  constructor(url, log, defaults, lifecycle) {
-    this._log = log;
-    this._defaults = defaults;
-    this._wreck = Wreck.defaults({
-      headers: { 'kbn-xsrf': 'ftr/services/uiSettings' },
-      baseUrl: url,
-      json: true,
-      redirects: 3,
-    });
-
-    if (this._defaults) {
-      lifecycle.on('beforeTests', async () => {
-        await this.update(defaults);
-      });
-    }
-  }
-
-  /**
-   * Gets defaultIndex from the config doc.
-   */
-  async getDefaultIndex() {
-    const { payload } = await this._wreck.get('/api/kibana/settings');
-    const defaultIndex = get(payload, 'settings.defaultIndex.userValue');
-    this._log.verbose('uiSettings.defaultIndex: %j', defaultIndex);
-    return defaultIndex;
-  }
-
-  async replace(doc) {
-    const { payload } = await this._wreck.get('/api/kibana/settings');
-
-    for (const key of Object.keys(payload.settings)) {
-      if (!payload.settings[key].isOverridden) {
-        await this._wreck.delete(`/api/kibana/settings/${key}`);
-      }
-    }
-
-    this._log.debug('replacing kibana config doc: %j', doc);
-
-    await this._wreck.post('/api/kibana/settings', {
-      payload: {
-        changes: {
-          ...this._defaults,
-          ...doc,
-        },
-      },
-    });
-  }
-
-  /**
-   * Add fields to the config doc (like setting timezone and defaultIndex)
-   * @return {Promise} A promise that is resolved when elasticsearch has a response
-   */
-  async update(updates) {
-    this._log.debug('applying update to kibana config: %j', updates);
-    await this._wreck.post('/api/kibana/settings', {
-      payload: {
-        changes: updates,
-      },
-    });
-  }
-}
diff --git a/test/functional/apps/visualize/_vertical_bar_chart.js b/test/functional/apps/visualize/_vertical_bar_chart.js
index 221ce68cf5ed83..3a704ab0a20261 100644
--- a/test/functional/apps/visualize/_vertical_bar_chart.js
+++ b/test/functional/apps/visualize/_vertical_bar_chart.js
@@ -27,7 +27,7 @@ export default function ({ getService, getPageObjects }) {
   const PageObjects = getPageObjects(['common', 'visualize', 'header', 'timePicker']);
 
   // FLAKY: https://github.com/elastic/kibana/issues/22322
-  describe.skip('vertical bar chart', function () {
+  describe('vertical bar chart', function () {
     const fromTime = '2015-09-19 06:31:44.000';
     const toTime = '2015-09-23 18:31:44.000';
     const vizName1 = 'Visualization VerticalBarChart';
@@ -278,8 +278,7 @@ export default function ({ getService, getPageObjects }) {
       });
     });
 
-    // FLAKY: https://github.com/elastic/kibana/issues/45105
-    describe.skip('vertical bar with multiple splits', function () {
+    describe('vertical bar with multiple splits', function () {
       before(initBarChart);
 
       it('should show correct series', async function () {
@@ -306,6 +305,8 @@ export default function ({ getService, getPageObjects }) {
       });
 
       it('should show correct series when disabling first agg', async function () {
+        // this will avoid issues with the play tooltip covering the disable agg button
+        await PageObjects.visualize.scrollSubjectIntoView('metricsAggGroup');
         await PageObjects.visualize.toggleDisabledAgg(3);
         await PageObjects.visualize.clickGo();
 
diff --git a/test/functional/page_objects/console_page.js b/test/functional/page_objects/console_page.js
index d277e3bc013490..186921e4516320 100644
--- a/test/functional/page_objects/console_page.js
+++ b/test/functional/page_objects/console_page.js
@@ -45,7 +45,7 @@ export function ConsolePageProvider({ getService }) {
     }
 
     async clickPlay() {
-      await testSubjects.click('send-request-button');
+      await testSubjects.click('sendRequestButton');
     }
 
     async collapseHelp() {
diff --git a/test/functional/page_objects/visualize_page.js b/test/functional/page_objects/visualize_page.js
index 6d403ce2dd4a68..e40ce93dd54011 100644
--- a/test/functional/page_objects/visualize_page.js
+++ b/test/functional/page_objects/visualize_page.js
@@ -1259,6 +1259,11 @@ export function VisualizePageProvider({ getService, getPageObjects, updateBaseli
       const inputMax = await control.findByCssSelector('[name$="maxValue"]');
       await inputMax.type(max);
     }
+
+    async scrollSubjectIntoView(subject) {
+      const element = await testSubjects.find(subject);
+      await element.scrollIntoViewIfNecessary();
+    }
   }
 
   return new VisualizePage();
diff --git a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
index 770f6b90b8ab66..df5a67b9cbb43f 100644
--- a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
+++ b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
@@ -7,7 +7,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "14.3.0",
+    "@elastic/eui": "14.4.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0"
   }
diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_top_row.test.mocks.tsx b/test/plugin_functional/plugins/core_legacy_compat/index.ts
similarity index 66%
rename from src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_top_row.test.mocks.tsx
rename to test/plugin_functional/plugins/core_legacy_compat/index.ts
index 585fad0e058b73..dbec4808168821 100644
--- a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_top_row.test.mocks.tsx
+++ b/test/plugin_functional/plugins/core_legacy_compat/index.ts
@@ -17,16 +17,19 @@
  * under the License.
  */
 
-import {
-  fatalErrorsServiceMock,
-  notificationServiceMock,
-} from '../../../../../../../core/public/mocks';
+import { Server } from 'hapi';
 
-jest.doMock('ui/new_platform', () => ({
-  npSetup: {
-    core: {
-      fatalErrors: fatalErrorsServiceMock.createSetupContract(),
-      notifications: notificationServiceMock.createSetupContract(),
+// eslint-disable-next-line import/no-default-export
+export default function(kibana: any) {
+  return new kibana.Plugin({
+    uiExports: {
+      app: {
+        title: 'Core Legacy Compat',
+        description: 'This is a sample plugin to test core to legacy compatibility',
+        main: 'plugins/core_legacy_compat/index',
+      },
     },
-  },
-}));
+
+    init(server: Server) {},
+  });
+}
diff --git a/test/plugin_functional/plugins/core_legacy_compat/package.json b/test/plugin_functional/plugins/core_legacy_compat/package.json
new file mode 100644
index 00000000000000..b42847356b9c2b
--- /dev/null
+++ b/test/plugin_functional/plugins/core_legacy_compat/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "core_legacy_compat",
+  "version": "1.0.0",
+  "main": "target/test/plugin_functional/plugins/core_legacy_compat",
+  "kibana": {
+    "version": "kibana",
+    "templateVersion": "1.0.0"
+  },
+  "license": "Apache-2.0",
+  "scripts": {
+    "kbn": "node ../../../../scripts/kbn.js",
+    "build": "rm -rf './target' && tsc"
+  },
+  "devDependencies": {
+    "typescript": "3.5.3"
+  }
+}
diff --git a/test/plugin_functional/plugins/core_legacy_compat/public/application.tsx b/test/plugin_functional/plugins/core_legacy_compat/public/application.tsx
new file mode 100644
index 00000000000000..ade618ca6cc46a
--- /dev/null
+++ b/test/plugin_functional/plugins/core_legacy_compat/public/application.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 ReactDOM from 'react-dom';
+
+import { AppMountContext, AppMountParameters } from 'kibana/public';
+
+const App = () => <h1 data-test-subj="coreLegacyCompatH1">core_legacy_compat</h1>;
+
+export const renderApp = (
+  context: AppMountContext,
+  { appBasePath, element }: AppMountParameters
+) => {
+  ReactDOM.render(<App />, element);
+
+  return () => ReactDOM.unmountComponentAtNode(element);
+};
diff --git a/src/legacy/core_plugins/data/public/timefilter/timefilter.test.mocks.ts b/test/plugin_functional/plugins/core_legacy_compat/public/index.ts
similarity index 75%
rename from src/legacy/core_plugins/data/public/timefilter/timefilter.test.mocks.ts
rename to test/plugin_functional/plugins/core_legacy_compat/public/index.ts
index 7354916c3fc359..6988ed82f34a7e 100644
--- a/src/legacy/core_plugins/data/public/timefilter/timefilter.test.mocks.ts
+++ b/test/plugin_functional/plugins/core_legacy_compat/public/index.ts
@@ -17,12 +17,13 @@
  * under the License.
  */
 
-import { chromeServiceMock } from '../../../../../core/public/mocks';
+import { npSetup } from 'ui/new_platform';
 
-jest.doMock('ui/new_platform', () => ({
-  npStart: {
-    core: {
-      chrome: chromeServiceMock.createStartContract(),
-    },
+npSetup.core.application.register({
+  id: 'core_legacy_compat',
+  title: 'Core Legacy Compat',
+  async mount(...args) {
+    const { renderApp } = await import('./application');
+    return renderApp(...args);
   },
-}));
+});
diff --git a/test/plugin_functional/plugins/core_legacy_compat/tsconfig.json b/test/plugin_functional/plugins/core_legacy_compat/tsconfig.json
new file mode 100644
index 00000000000000..4a564ee1e5578f
--- /dev/null
+++ b/test/plugin_functional/plugins/core_legacy_compat/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./target",
+    "skipLibCheck": true
+  },
+  "include": [
+    "index.ts",
+    "public/**/*.ts",
+    "public/**/*.tsx",
+    "../../../../typings/**/*"
+  ],
+  "exclude": []
+}
diff --git a/src/legacy/core_plugins/visualizations/index.ts b/test/plugin_functional/plugins/core_plugin_legacy/index.ts
similarity index 58%
rename from src/legacy/core_plugins/visualizations/index.ts
rename to test/plugin_functional/plugins/core_plugin_legacy/index.ts
index bb9ef1588bdc2a..b0536106dcf6c9 100644
--- a/src/legacy/core_plugins/visualizations/index.ts
+++ b/test/plugin_functional/plugins/core_plugin_legacy/index.ts
@@ -17,22 +17,21 @@
  * under the License.
  */
 
-import { resolve } from 'path';
-import { Legacy } from '../../../../kibana';
+import KbnServer from 'src/legacy/server/kbn_server';
 
 // eslint-disable-next-line import/no-default-export
-export default function VisualizationsPlugin(kibana: any) {
-  const config: Legacy.PluginSpecOptions = {
-    id: 'visualizations',
-    require: ['data'],
-    publicDir: resolve(__dirname, 'public'),
-    config: (Joi: any) => {
-      return Joi.object({
-        enabled: Joi.boolean().default(true),
-      }).default();
-    },
-    init: (server: Legacy.Server) => ({}),
-  };
+export default function(kibana: any) {
+  return new kibana.Plugin({
+    id: 'core_plugin_legacy',
+    require: ['kibana'],
+    init(server: KbnServer) {
+      const { http } = server.newPlatform.setup.core;
+      const router = http.createRouter('');
 
-  return new kibana.Plugin(config);
+      router.get({ path: '/api/np-http-in-legacy', validate: false }, async (context, req, res) => {
+        const response = await context.core.elasticsearch.adminClient.callAsInternalUser('ping');
+        return res.ok({ body: `Pong in legacy via new platform: ${response}` });
+      });
+    },
+  });
 }
diff --git a/test/plugin_functional/plugins/core_plugin_legacy/package.json b/test/plugin_functional/plugins/core_plugin_legacy/package.json
new file mode 100644
index 00000000000000..2ae83b28f7e859
--- /dev/null
+++ b/test/plugin_functional/plugins/core_plugin_legacy/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "core_plugin_legacy",
+  "version": "1.0.0",
+  "main": "index.ts",
+  "kibana": {
+    "version": "kibana",
+    "templateVersion": "1.0.0"
+  },
+  "license": "Apache-2.0",
+  "scripts": {
+    "kbn": "node ../../../../scripts/kbn.js",
+    "build": "rm -rf './target' && tsc"
+  },
+  "devDependencies": {
+    "typescript": "3.5.3"
+  }
+}
diff --git a/test/plugin_functional/plugins/core_plugin_legacy/tsconfig.json b/test/plugin_functional/plugins/core_plugin_legacy/tsconfig.json
new file mode 100644
index 00000000000000..1ba21f11b7de2a
--- /dev/null
+++ b/test/plugin_functional/plugins/core_plugin_legacy/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "extends": "../../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./target",
+    "skipLibCheck": true
+  },
+  "include": [
+    "index.ts",
+    "public/**/*.ts",
+    "public/**/*.tsx",
+    "server/**/*.ts",
+    "../../../../typings/**/*",
+  ],
+  "exclude": []
+}
diff --git a/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json b/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
index 33bc1068f0abc9..090cfe3513e6c1 100644
--- a/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
+++ b/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
@@ -7,7 +7,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "14.3.0",
+    "@elastic/eui": "14.4.0",
     "react": "^16.8.0"
   }
 }
diff --git a/test/plugin_functional/plugins/kbn_tp_custom_visualizations/public/self_changing_vis/self_changing_vis.js b/test/plugin_functional/plugins/kbn_tp_custom_visualizations/public/self_changing_vis/self_changing_vis.js
index daa493c727fd0c..c2d8ed7f5f9c17 100644
--- a/test/plugin_functional/plugins/kbn_tp_custom_visualizations/public/self_changing_vis/self_changing_vis.js
+++ b/test/plugin_functional/plugins/kbn_tp_custom_visualizations/public/self_changing_vis/self_changing_vis.js
@@ -22,7 +22,7 @@ import { visFactory } from 'ui/vis/vis_factory';
 import { SelfChangingEditor } from './self_changing_editor';
 import { SelfChangingComponent } from './self_changing_components';
 
-import { setup as visualizations } from '../../../../../../src/legacy/core_plugins/visualizations/public/legacy';
+import { setup as visualizations } from '../../../../../../src/legacy/core_plugins/visualizations/public/np_ready/public/legacy';
 
 function SelfChangingVisType() {
 
diff --git a/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json b/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json
index 3675fd63bc88d2..127aa30fe499ef 100644
--- a/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json
+++ b/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json
@@ -8,7 +8,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "14.3.0",
+    "@elastic/eui": "14.4.0",
     "react": "^16.8.0"
   },
   "scripts": {
diff --git a/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json b/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json
index 5ab0dc21e4affe..143460ce0a3adc 100644
--- a/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json
+++ b/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json
@@ -8,7 +8,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "14.3.0",
+    "@elastic/eui": "14.4.0",
     "react": "^16.8.0"
   },
   "scripts": {
diff --git a/test/plugin_functional/plugins/kbn_tp_visualize_embedding/package.json b/test/plugin_functional/plugins/kbn_tp_visualize_embedding/package.json
index 09b5ab98279f18..f4e771c4bb0bcd 100644
--- a/test/plugin_functional/plugins/kbn_tp_visualize_embedding/package.json
+++ b/test/plugin_functional/plugins/kbn_tp_visualize_embedding/package.json
@@ -7,7 +7,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "14.3.0",
+    "@elastic/eui": "14.4.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0"
   }
diff --git a/test/plugin_functional/test_suites/core_plugins/index.js b/test/plugin_functional/test_suites/core_plugins/index.js
index 73802a7e67df44..eeb81f67751edd 100644
--- a/test/plugin_functional/test_suites/core_plugins/index.js
+++ b/test/plugin_functional/test_suites/core_plugins/index.js
@@ -20,7 +20,8 @@
 export default function ({ loadTestFile }) {
   describe('core plugins', () => {
     loadTestFile(require.resolve('./applications'));
+    loadTestFile(require.resolve('./legacy_plugins'));
+    loadTestFile(require.resolve('./server_plugins'));
     loadTestFile(require.resolve('./ui_plugins'));
-    loadTestFile(require.resolve('./server_plugins.js'));
   });
 }
diff --git a/test/plugin_functional/test_suites/core_plugins/legacy_plugins.js b/test/plugin_functional/test_suites/core_plugins/legacy_plugins.js
new file mode 100644
index 00000000000000..4e421f45237504
--- /dev/null
+++ b/test/plugin_functional/test_suites/core_plugins/legacy_plugins.js
@@ -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 expect from '@kbn/expect';
+
+export default function ({ getService, getPageObjects }) {
+  const PageObjects = getPageObjects(['common']);
+  const browser = getService('browser');
+  const testSubjects = getService('testSubjects');
+
+  describe('legacy plugins', function describeIndexTests() {
+    it('have access to New Platform HTTP service', async () => {
+      const url = `${PageObjects.common.getHostPort()}/api/np-http-in-legacy`;
+      await browser.get(url);
+
+      const pageSource = await browser.execute('return window.document.body.textContent;');
+      expect(pageSource).to.equal('Pong in legacy via new platform: true');
+    });
+
+    describe('application service compatibility layer', function describeIndexTests() {
+      it('can render legacy apps', async () => {
+        await PageObjects.common.navigateToApp('core_legacy_compat');
+        expect(await testSubjects.exists('coreLegacyCompatH1')).to.be(true);
+      });
+    });
+  });
+}
diff --git a/test/tsconfig.json b/test/tsconfig.json
index 26d69347df5a93..71c9e375a41240 100644
--- a/test/tsconfig.json
+++ b/test/tsconfig.json
@@ -14,8 +14,9 @@
     "**/*.ts",
     "**/*.tsx",
     "../typings/lodash.topath/*.ts",
+    "typings/**/*"
   ],
   "exclude": [
     "plugin_functional/plugins/**/*"
   ]
-}
+}
\ No newline at end of file
diff --git a/src/legacy/server/config/setup.js b/test/typings/index.d.ts
similarity index 73%
rename from src/legacy/server/config/setup.js
rename to test/typings/index.d.ts
index 2164438a2fa55c..fd2500257b315c 100644
--- a/src/legacy/server/config/setup.js
+++ b/test/typings/index.d.ts
@@ -17,10 +17,14 @@
  * under the License.
  */
 
-import { Config } from './config';
-import { transformDeprecations } from './transform_deprecations';
-
-export default function (kbnServer) {
-  const settings = transformDeprecations(kbnServer.settings);
-  kbnServer.config = Config.withDefaultSchema(settings);
+declare module '*.html' {
+  const template: string;
+  // eslint-disable-next-line import/no-default-export
+  export default template;
 }
+
+type MethodKeysOf<T> = {
+  [K in keyof T]: T[K] extends (...args: any[]) => any ? K : never;
+}[keyof T];
+
+type PublicMethodsOf<T> = Pick<T, MethodKeysOf<T>>;
diff --git a/typings/@elastic/eui/index.d.ts b/typings/@elastic/eui/index.d.ts
index 70c07f96280946..39fc30230de18a 100644
--- a/typings/@elastic/eui/index.d.ts
+++ b/typings/@elastic/eui/index.d.ts
@@ -25,7 +25,6 @@ declare module '@elastic/eui' {
   export const EuiDescribedFormGroup: React.SFC<any>;
   export const EuiCodeEditor: React.SFC<any>;
   export const Query: any;
-  export const EuiCard: any;
 
   export interface EuiTableCriteria {
     page: { index: number; size: number };
diff --git a/x-pack/.i18nrc.json b/x-pack/.i18nrc.json
index b92edfd06ffb1f..db8e618ff11340 100644
--- a/x-pack/.i18nrc.json
+++ b/x-pack/.i18nrc.json
@@ -2,12 +2,12 @@
   "prefix": "xpack",
   "paths": {
     "xpack.actions": "legacy/plugins/actions",
-    "xpack.advancedUiActions": "legacy/plugins/advanced_ui_actions",
+    "xpack.advancedUiActions": "plugins/advanced_ui_actions",
     "xpack.alerting": "legacy/plugins/alerting",
     "xpack.apm": "legacy/plugins/apm",
     "xpack.beatsManagement": "legacy/plugins/beats_management",
     "xpack.canvas": "legacy/plugins/canvas",
-    "xpack.code": "legacy/plugins/code",
+    "xpack.code": ["legacy/plugins/code", "plugins/code"],
     "xpack.crossClusterReplication": "legacy/plugins/cross_cluster_replication",
     "xpack.dashboardMode": "legacy/plugins/dashboard_mode",
     "xpack.features": "plugins/features",
diff --git a/x-pack/index.js b/x-pack/index.js
index 1aaae50d5a6130..10f969a21b68be 100644
--- a/x-pack/index.js
+++ b/x-pack/index.js
@@ -43,7 +43,6 @@ import { encryptedSavedObjects } from './legacy/plugins/encrypted_saved_objects'
 import { snapshotRestore } from './legacy/plugins/snapshot_restore';
 import { actions } from './legacy/plugins/actions';
 import { alerting } from './legacy/plugins/alerting';
-import { advancedUiActions } from './legacy/plugins/advanced_ui_actions';
 import { lens } from './legacy/plugins/lens';
 
 module.exports = function (kibana) {
@@ -88,6 +87,5 @@ module.exports = function (kibana) {
     snapshotRestore(kibana),
     actions(kibana),
     alerting(kibana),
-    advancedUiActions(kibana),
   ];
 };
diff --git a/x-pack/legacy/plugins/actions/README.md b/x-pack/legacy/plugins/actions/README.md
index ba847b18a104f4..793792c3e202b0 100644
--- a/x-pack/legacy/plugins/actions/README.md
+++ b/x-pack/legacy/plugins/actions/README.md
@@ -19,9 +19,10 @@ action types.
 
 ## Usage
 
-1. Develop and register an action type (see action types -> example).
-2. Create an action by using the RESTful API (see actions -> create action).
-3. Use alerts to execute actions or execute manually (see firing actions).
+1. Enable the actions plugin in the `kibana.yml` by setting `xpack.actions.enabled: true`.
+2. Develop and register an action type (see action types -> example).
+3. Create an action by using the RESTful API (see actions -> create action).
+4. Use alerts to execute actions or execute manually (see firing actions).
 
 ## Kibana Actions Configuration
 Implemented under the [Actions Config](./server/actions_config.ts).
diff --git a/x-pack/legacy/plugins/advanced_ui_actions/index.ts b/x-pack/legacy/plugins/advanced_ui_actions/index.ts
deleted file mode 100644
index e7b54d8863456e..00000000000000
--- a/x-pack/legacy/plugins/advanced_ui_actions/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { resolve } from 'path';
-
-export const advancedUiActions = (kibana: any) =>
-  new kibana.Plugin({
-    id: 'advanced_ui_actions',
-    publicDir: resolve(__dirname, 'public'),
-    uiExports: {
-      hacks: 'plugins/advanced_ui_actions/np_ready/public/legacy',
-    },
-  });
diff --git a/x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/legacy.ts b/x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/legacy.ts
deleted file mode 100644
index 535e55d71d3494..00000000000000
--- a/x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/legacy.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.
- */
-
-/* eslint-disable @kbn/eslint/no-restricted-paths */
-import { npSetup, npStart } from 'ui/new_platform';
-/* eslint-enable @kbn/eslint/no-restricted-paths */
-
-import { plugin } from '.';
-
-const pluginInstance = plugin({} as any);
-export const setup = pluginInstance.setup(npSetup.core, {
-  embeddable: npSetup.plugins.embeddable,
-  uiActions: npSetup.plugins.uiActions,
-});
-export const start = pluginInstance.start(npStart.core, {
-  embeddable: npStart.plugins.embeddable,
-  uiActions: npStart.plugins.uiActions,
-});
diff --git a/x-pack/legacy/plugins/alerting/README.md b/x-pack/legacy/plugins/alerting/README.md
index 9e8e58f97bb5c0..fd131acaf5b7d9 100644
--- a/x-pack/legacy/plugins/alerting/README.md
+++ b/x-pack/legacy/plugins/alerting/README.md
@@ -23,8 +23,9 @@ A Kibana alert detects a condition and executes one or more actions when that co
 
 ## Usage
 
-1. Develop and register an alert type (see alert types -> example).
-2. Create an alert using the RESTful API (see alerts -> create).
+1. Enable the alerting plugin in the `kibana.yml` by setting `xpack.alerting.enabled: true`.
+2. Develop and register an alert type (see alert types -> example).
+3. Create an alert using the RESTful API (see alerts -> create).
 
 ## Limitations
 
diff --git a/x-pack/legacy/plugins/alerting/mappings.json b/x-pack/legacy/plugins/alerting/mappings.json
index d9399ac7673293..bc648e874cfa4c 100644
--- a/x-pack/legacy/plugins/alerting/mappings.json
+++ b/x-pack/legacy/plugins/alerting/mappings.json
@@ -46,6 +46,12 @@
       },
       "throttle": {
         "type": "keyword"
+      },
+      "muteAll": {
+        "type": "boolean"
+      },
+      "mutedInstanceIds": {
+        "type": "keyword"
       }
     }
   }
diff --git a/x-pack/legacy/plugins/alerting/server/alerts_client.mock.ts b/x-pack/legacy/plugins/alerting/server/alerts_client.mock.ts
index 154014b93e8998..c7d359491680f5 100644
--- a/x-pack/legacy/plugins/alerting/server/alerts_client.mock.ts
+++ b/x-pack/legacy/plugins/alerting/server/alerts_client.mock.ts
@@ -18,6 +18,10 @@ const createAlertsClientMock = () => {
     enable: jest.fn(),
     disable: jest.fn(),
     updateApiKey: jest.fn(),
+    muteAll: jest.fn(),
+    unmuteAll: jest.fn(),
+    muteInstance: jest.fn(),
+    unmuteInstance: jest.fn(),
   };
   return mocked;
 };
diff --git a/x-pack/legacy/plugins/alerting/server/alerts_client.test.ts b/x-pack/legacy/plugins/alerting/server/alerts_client.test.ts
index 0cbb02b676a99a..bba0051e31e089 100644
--- a/x-pack/legacy/plugins/alerting/server/alerts_client.test.ts
+++ b/x-pack/legacy/plugins/alerting/server/alerts_client.test.ts
@@ -127,25 +127,25 @@ describe('create()', () => {
     });
     const result = await alertsClient.create({ data });
     expect(result).toMatchInlineSnapshot(`
-                                                                                    Object {
-                                                                                      "actions": Array [
-                                                                                        Object {
-                                                                                          "group": "default",
-                                                                                          "id": "1",
-                                                                                          "params": Object {
-                                                                                            "foo": true,
-                                                                                          },
-                                                                                        },
-                                                                                      ],
-                                                                                      "alertTypeId": "123",
-                                                                                      "alertTypeParams": Object {
-                                                                                        "bar": true,
-                                                                                      },
-                                                                                      "id": "1",
-                                                                                      "interval": "10s",
-                                                                                      "scheduledTaskId": "task-123",
-                                                                                    }
-                                                        `);
+                                                                                                      Object {
+                                                                                                        "actions": Array [
+                                                                                                          Object {
+                                                                                                            "group": "default",
+                                                                                                            "id": "1",
+                                                                                                            "params": Object {
+                                                                                                              "foo": true,
+                                                                                                            },
+                                                                                                          },
+                                                                                                        ],
+                                                                                                        "alertTypeId": "123",
+                                                                                                        "alertTypeParams": Object {
+                                                                                                          "bar": true,
+                                                                                                        },
+                                                                                                        "id": "1",
+                                                                                                        "interval": "10s",
+                                                                                                        "scheduledTaskId": "task-123",
+                                                                                                      }
+                                                                    `);
     expect(savedObjectsClient.create).toHaveBeenCalledTimes(1);
     expect(savedObjectsClient.create.mock.calls[0]).toHaveLength(3);
     expect(savedObjectsClient.create.mock.calls[0][0]).toEqual('alert');
@@ -169,61 +169,63 @@ describe('create()', () => {
         "createdBy": "elastic",
         "enabled": true,
         "interval": "10s",
+        "muteAll": false,
+        "mutedInstanceIds": Array [],
         "throttle": null,
         "updatedBy": "elastic",
       }
     `);
     expect(savedObjectsClient.create.mock.calls[0][2]).toMatchInlineSnapshot(`
-                                                                                                Object {
-                                                                                                  "references": Array [
-                                                                                                    Object {
-                                                                                                      "id": "1",
-                                                                                                      "name": "action_0",
-                                                                                                      "type": "action",
-                                                                                                    },
-                                                                                                  ],
-                                                                                                }
-                                                                `);
+                                                                                                                  Object {
+                                                                                                                    "references": Array [
+                                                                                                                      Object {
+                                                                                                                        "id": "1",
+                                                                                                                        "name": "action_0",
+                                                                                                                        "type": "action",
+                                                                                                                      },
+                                                                                                                    ],
+                                                                                                                  }
+                                                                            `);
     expect(taskManager.schedule).toHaveBeenCalledTimes(1);
     expect(taskManager.schedule.mock.calls[0]).toMatchInlineSnapshot(`
-                                                      Array [
-                                                        Object {
-                                                          "params": Object {
-                                                            "alertId": "1",
-                                                            "spaceId": "default",
-                                                          },
-                                                          "scope": Array [
-                                                            "alerting",
-                                                          ],
-                                                          "state": Object {
-                                                            "alertInstances": Object {},
-                                                            "alertTypeState": Object {},
-                                                            "previousStartedAt": null,
-                                                          },
-                                                          "taskType": "alerting:123",
-                                                        },
-                                                      ]
-                                    `);
+                                                                        Array [
+                                                                          Object {
+                                                                            "params": Object {
+                                                                              "alertId": "1",
+                                                                              "spaceId": "default",
+                                                                            },
+                                                                            "scope": Array [
+                                                                              "alerting",
+                                                                            ],
+                                                                            "state": Object {
+                                                                              "alertInstances": Object {},
+                                                                              "alertTypeState": Object {},
+                                                                              "previousStartedAt": null,
+                                                                            },
+                                                                            "taskType": "alerting:123",
+                                                                          },
+                                                                        ]
+                                                `);
     expect(savedObjectsClient.update).toHaveBeenCalledTimes(1);
     expect(savedObjectsClient.update.mock.calls[0]).toHaveLength(4);
     expect(savedObjectsClient.update.mock.calls[0][0]).toEqual('alert');
     expect(savedObjectsClient.update.mock.calls[0][1]).toEqual('1');
     expect(savedObjectsClient.update.mock.calls[0][2]).toMatchInlineSnapshot(`
-                                                                                                Object {
-                                                                                                  "scheduledTaskId": "task-123",
-                                                                                                }
-                                                                `);
+                                                                                                                  Object {
+                                                                                                                    "scheduledTaskId": "task-123",
+                                                                                                                  }
+                                                                            `);
     expect(savedObjectsClient.update.mock.calls[0][3]).toMatchInlineSnapshot(`
-                                                                                                Object {
-                                                                                                  "references": Array [
-                                                                                                    Object {
-                                                                                                      "id": "1",
-                                                                                                      "name": "action_0",
-                                                                                                      "type": "action",
-                                                                                                    },
-                                                                                                  ],
-                                                                                                }
-                                                                `);
+                                                                                                                  Object {
+                                                                                                                    "references": Array [
+                                                                                                                      Object {
+                                                                                                                        "id": "1",
+                                                                                                                        "name": "action_0",
+                                                                                                                        "type": "action",
+                                                                                                                      },
+                                                                                                                    ],
+                                                                                                                  }
+                                                                            `);
   });
 
   test('creates a disabled alert', async () => {
@@ -265,25 +267,25 @@ describe('create()', () => {
     });
     const result = await alertsClient.create({ data });
     expect(result).toMatchInlineSnapshot(`
-                                                                                                Object {
-                                                                                                  "actions": Array [
-                                                                                                    Object {
-                                                                                                      "group": "default",
-                                                                                                      "id": "1",
-                                                                                                      "params": Object {
-                                                                                                        "foo": true,
-                                                                                                      },
-                                                                                                    },
-                                                                                                  ],
-                                                                                                  "alertTypeId": "123",
-                                                                                                  "alertTypeParams": Object {
-                                                                                                    "bar": true,
-                                                                                                  },
-                                                                                                  "enabled": false,
-                                                                                                  "id": "1",
-                                                                                                  "interval": 10000,
-                                                                                                }
-                                                                `);
+                                                                                                                  Object {
+                                                                                                                    "actions": Array [
+                                                                                                                      Object {
+                                                                                                                        "group": "default",
+                                                                                                                        "id": "1",
+                                                                                                                        "params": Object {
+                                                                                                                          "foo": true,
+                                                                                                                        },
+                                                                                                                      },
+                                                                                                                    ],
+                                                                                                                    "alertTypeId": "123",
+                                                                                                                    "alertTypeParams": Object {
+                                                                                                                      "bar": true,
+                                                                                                                    },
+                                                                                                                    "enabled": false,
+                                                                                                                    "id": "1",
+                                                                                                                    "interval": 10000,
+                                                                                                                  }
+                                                                            `);
     expect(savedObjectsClient.create).toHaveBeenCalledTimes(1);
     expect(taskManager.schedule).toHaveBeenCalledTimes(0);
   });
@@ -367,11 +369,11 @@ describe('create()', () => {
     );
     expect(savedObjectsClient.delete).toHaveBeenCalledTimes(1);
     expect(savedObjectsClient.delete.mock.calls[0]).toMatchInlineSnapshot(`
-                                                                                                Array [
-                                                                                                  "alert",
-                                                                                                  "1",
-                                                                                                ]
-                                                                `);
+                                                                                                                  Array [
+                                                                                                                    "alert",
+                                                                                                                    "1",
+                                                                                                                  ]
+                                                                            `);
   });
 
   test('returns task manager error if cleanup fails, logs to console', async () => {
@@ -417,14 +419,14 @@ describe('create()', () => {
     );
     expect(alertsClientParams.log).toHaveBeenCalledTimes(1);
     expect(alertsClientParams.log.mock.calls[0]).toMatchInlineSnapshot(`
-                                                                                                Array [
-                                                                                                  Array [
-                                                                                                    "alerting",
-                                                                                                    "error",
-                                                                                                  ],
-                                                                                                  "Failed to cleanup alert \\"1\\" after scheduling task failed. Error: Saved object delete error",
-                                                                                                ]
-                                                                `);
+                                                                                                                  Array [
+                                                                                                                    Array [
+                                                                                                                      "alerting",
+                                                                                                                      "error",
+                                                                                                                    ],
+                                                                                                                    "Failed to cleanup alert \\"1\\" after scheduling task failed. Error: Saved object delete error",
+                                                                                                                  ]
+                                                                            `);
   });
 
   test('throws an error if alert type not registerd', async () => {
@@ -526,6 +528,8 @@ describe('create()', () => {
         enabled: true,
         interval: '10s',
         throttle: null,
+        muteAll: false,
+        mutedInstanceIds: [],
       },
       {
         references: [
@@ -571,6 +575,8 @@ describe('enable()', () => {
       'alert',
       '1',
       {
+        interval: '10s',
+        alertTypeId: '2',
         enabled: true,
         scheduledTaskId: 'task-123',
         updatedBy: 'elastic',
@@ -648,6 +654,8 @@ describe('enable()', () => {
       'alert',
       '1',
       {
+        interval: '10s',
+        alertTypeId: '2',
         enabled: true,
         scheduledTaskId: 'task-123',
         apiKey: Buffer.from('123:abc').toString('base64'),
@@ -694,6 +702,8 @@ describe('disable()', () => {
       'alert',
       '1',
       {
+        interval: '10s',
+        alertTypeId: '2',
         apiKey: null,
         apiKeyOwner: null,
         enabled: false,
@@ -727,6 +737,216 @@ describe('disable()', () => {
   });
 });
 
+describe('muteAll()', () => {
+  test('mutes an alert', async () => {
+    const alertsClient = new AlertsClient(alertsClientParams);
+    savedObjectsClient.get.mockResolvedValueOnce({
+      id: '1',
+      type: 'alert',
+      attributes: {
+        muteAll: false,
+      },
+      references: [],
+    });
+
+    await alertsClient.muteAll({ id: '1' });
+    expect(savedObjectsClient.update).toHaveBeenCalledWith(
+      'alert',
+      '1',
+      { muteAll: true, mutedInstanceIds: [], updatedBy: 'elastic' },
+      { references: [] }
+    );
+  });
+
+  test('skips muting when alert already muted', async () => {
+    const alertsClient = new AlertsClient(alertsClientParams);
+    savedObjectsClient.get.mockResolvedValueOnce({
+      id: '1',
+      type: 'alert',
+      attributes: {
+        muteAll: true,
+      },
+      references: [],
+    });
+
+    await alertsClient.muteAll({ id: '1' });
+    expect(savedObjectsClient.update).not.toHaveBeenCalled();
+  });
+});
+
+describe('unmuteAll()', () => {
+  test('unmutes an alert', async () => {
+    const alertsClient = new AlertsClient(alertsClientParams);
+    savedObjectsClient.get.mockResolvedValueOnce({
+      id: '1',
+      type: 'alert',
+      attributes: {
+        muteAll: true,
+      },
+      references: [],
+    });
+
+    await alertsClient.unmuteAll({ id: '1' });
+    expect(savedObjectsClient.update).toHaveBeenCalledWith(
+      'alert',
+      '1',
+      { muteAll: false, mutedInstanceIds: [], updatedBy: 'elastic' },
+      { references: [] }
+    );
+  });
+
+  test(`skips unmuting when alert isn't unmuted`, async () => {
+    const alertsClient = new AlertsClient(alertsClientParams);
+    savedObjectsClient.get.mockResolvedValueOnce({
+      id: '1',
+      type: 'alert',
+      attributes: {
+        muteAll: false,
+      },
+      references: [],
+    });
+
+    await alertsClient.unmuteAll({ id: '1' });
+    expect(savedObjectsClient.update).not.toHaveBeenCalled();
+  });
+});
+
+describe('muteInstance()', () => {
+  test('mutes an alert instance', async () => {
+    const alertsClient = new AlertsClient(alertsClientParams);
+    savedObjectsClient.get.mockResolvedValueOnce({
+      id: '1',
+      type: 'alert',
+      attributes: {
+        interval: '10s',
+        alertTypeId: '2',
+        enabled: true,
+        scheduledTaskId: 'task-123',
+        mutedInstanceIds: [],
+      },
+      references: [],
+    });
+
+    await alertsClient.muteInstance({ alertId: '1', alertInstanceId: '2' });
+    expect(savedObjectsClient.update).toHaveBeenCalledWith(
+      'alert',
+      '1',
+      {
+        mutedInstanceIds: ['2'],
+        updatedBy: 'elastic',
+      },
+      { version: undefined, references: [] }
+    );
+  });
+
+  test('skips muting when alert instance already muted', async () => {
+    const alertsClient = new AlertsClient(alertsClientParams);
+    savedObjectsClient.get.mockResolvedValueOnce({
+      id: '1',
+      type: 'alert',
+      attributes: {
+        interval: '10s',
+        alertTypeId: '2',
+        enabled: true,
+        scheduledTaskId: 'task-123',
+        mutedInstanceIds: ['2'],
+      },
+      references: [],
+    });
+
+    await alertsClient.muteInstance({ alertId: '1', alertInstanceId: '2' });
+    expect(savedObjectsClient.update).not.toHaveBeenCalled();
+  });
+
+  test('skips muting when alert is muted', async () => {
+    const alertsClient = new AlertsClient(alertsClientParams);
+    savedObjectsClient.get.mockResolvedValueOnce({
+      id: '1',
+      type: 'alert',
+      attributes: {
+        interval: '10s',
+        alertTypeId: '2',
+        enabled: true,
+        scheduledTaskId: 'task-123',
+        mutedInstanceIds: [],
+        muteAll: true,
+      },
+      references: [],
+    });
+
+    await alertsClient.muteInstance({ alertId: '1', alertInstanceId: '2' });
+    expect(savedObjectsClient.update).not.toHaveBeenCalled();
+  });
+});
+
+describe('unmuteInstance()', () => {
+  test('unmutes an alert instance', async () => {
+    const alertsClient = new AlertsClient(alertsClientParams);
+    savedObjectsClient.get.mockResolvedValueOnce({
+      id: '1',
+      type: 'alert',
+      attributes: {
+        interval: '10s',
+        alertTypeId: '2',
+        enabled: true,
+        scheduledTaskId: 'task-123',
+        mutedInstanceIds: ['2'],
+      },
+      references: [],
+    });
+
+    await alertsClient.unmuteInstance({ alertId: '1', alertInstanceId: '2' });
+    expect(savedObjectsClient.update).toHaveBeenCalledWith(
+      'alert',
+      '1',
+      {
+        mutedInstanceIds: [],
+        updatedBy: 'elastic',
+      },
+      { version: undefined, references: [] }
+    );
+  });
+
+  test('skips unmuting when alert instance not muted', async () => {
+    const alertsClient = new AlertsClient(alertsClientParams);
+    savedObjectsClient.get.mockResolvedValueOnce({
+      id: '1',
+      type: 'alert',
+      attributes: {
+        interval: '10s',
+        alertTypeId: '2',
+        enabled: true,
+        scheduledTaskId: 'task-123',
+        mutedInstanceIds: [],
+      },
+      references: [],
+    });
+
+    await alertsClient.unmuteInstance({ alertId: '1', alertInstanceId: '2' });
+    expect(savedObjectsClient.update).not.toHaveBeenCalled();
+  });
+
+  test('skips unmuting when alert is muted', async () => {
+    const alertsClient = new AlertsClient(alertsClientParams);
+    savedObjectsClient.get.mockResolvedValueOnce({
+      id: '1',
+      type: 'alert',
+      attributes: {
+        interval: '10s',
+        alertTypeId: '2',
+        enabled: true,
+        scheduledTaskId: 'task-123',
+        mutedInstanceIds: [],
+        muteAll: true,
+      },
+      references: [],
+    });
+
+    await alertsClient.unmuteInstance({ alertId: '1', alertInstanceId: '2' });
+    expect(savedObjectsClient.update).not.toHaveBeenCalled();
+  });
+});
+
 describe('get()', () => {
   test('calls saved objects client with given params', async () => {
     const alertsClient = new AlertsClient(alertsClientParams);
@@ -759,31 +979,31 @@ describe('get()', () => {
     });
     const result = await alertsClient.get({ id: '1' });
     expect(result).toMatchInlineSnapshot(`
-                                                                                    Object {
-                                                                                      "actions": Array [
-                                                                                        Object {
-                                                                                          "group": "default",
-                                                                                          "id": "1",
-                                                                                          "params": Object {
-                                                                                            "foo": true,
-                                                                                          },
-                                                                                        },
-                                                                                      ],
-                                                                                      "alertTypeId": "123",
-                                                                                      "alertTypeParams": Object {
-                                                                                        "bar": true,
-                                                                                      },
-                                                                                      "id": "1",
-                                                                                      "interval": "10s",
-                                                                                    }
-                                                        `);
+                                                                                                      Object {
+                                                                                                        "actions": Array [
+                                                                                                          Object {
+                                                                                                            "group": "default",
+                                                                                                            "id": "1",
+                                                                                                            "params": Object {
+                                                                                                              "foo": true,
+                                                                                                            },
+                                                                                                          },
+                                                                                                        ],
+                                                                                                        "alertTypeId": "123",
+                                                                                                        "alertTypeParams": Object {
+                                                                                                          "bar": true,
+                                                                                                        },
+                                                                                                        "id": "1",
+                                                                                                        "interval": "10s",
+                                                                                                      }
+                                                                    `);
     expect(savedObjectsClient.get).toHaveBeenCalledTimes(1);
     expect(savedObjectsClient.get.mock.calls[0]).toMatchInlineSnapshot(`
-                                                                                                Array [
-                                                                                                  "alert",
-                                                                                                  "1",
-                                                                                                ]
-                                                                `);
+                                                                                                                  Array [
+                                                                                                                    "alert",
+                                                                                                                    "1",
+                                                                                                                  ]
+                                                                            `);
   });
 
   test(`throws an error when references aren't found`, async () => {
@@ -854,39 +1074,39 @@ describe('find()', () => {
     });
     const result = await alertsClient.find();
     expect(result).toMatchInlineSnapshot(`
-                                                            Object {
-                                                              "data": Array [
-                                                                Object {
-                                                                  "actions": Array [
-                                                                    Object {
-                                                                      "group": "default",
-                                                                      "id": "1",
-                                                                      "params": Object {
-                                                                        "foo": true,
-                                                                      },
-                                                                    },
-                                                                  ],
-                                                                  "alertTypeId": "123",
-                                                                  "alertTypeParams": Object {
-                                                                    "bar": true,
-                                                                  },
-                                                                  "id": "1",
-                                                                  "interval": "10s",
-                                                                },
-                                                              ],
-                                                              "page": 1,
-                                                              "perPage": 10,
-                                                              "total": 1,
-                                                            }
-                                        `);
+                                                                              Object {
+                                                                                "data": Array [
+                                                                                  Object {
+                                                                                    "actions": Array [
+                                                                                      Object {
+                                                                                        "group": "default",
+                                                                                        "id": "1",
+                                                                                        "params": Object {
+                                                                                          "foo": true,
+                                                                                        },
+                                                                                      },
+                                                                                    ],
+                                                                                    "alertTypeId": "123",
+                                                                                    "alertTypeParams": Object {
+                                                                                      "bar": true,
+                                                                                    },
+                                                                                    "id": "1",
+                                                                                    "interval": "10s",
+                                                                                  },
+                                                                                ],
+                                                                                "page": 1,
+                                                                                "perPage": 10,
+                                                                                "total": 1,
+                                                                              }
+                                                    `);
     expect(savedObjectsClient.find).toHaveBeenCalledTimes(1);
     expect(savedObjectsClient.find.mock.calls[0]).toMatchInlineSnapshot(`
-                                                                                                Array [
-                                                                                                  Object {
-                                                                                                    "type": "alert",
-                                                                                                  },
-                                                                                                ]
-                                                                `);
+                                                                                                                  Array [
+                                                                                                                    Object {
+                                                                                                                      "type": "alert",
+                                                                                                                    },
+                                                                                                                  ]
+                                                                            `);
   });
 });
 
@@ -928,17 +1148,17 @@ describe('delete()', () => {
     expect(result).toEqual({ success: true });
     expect(savedObjectsClient.delete).toHaveBeenCalledTimes(1);
     expect(savedObjectsClient.delete.mock.calls[0]).toMatchInlineSnapshot(`
-                                                                                                Array [
-                                                                                                  "alert",
-                                                                                                  "1",
-                                                                                                ]
-                                                                `);
+                                                                                                                  Array [
+                                                                                                                    "alert",
+                                                                                                                    "1",
+                                                                                                                  ]
+                                                                            `);
     expect(taskManager.remove).toHaveBeenCalledTimes(1);
     expect(taskManager.remove.mock.calls[0]).toMatchInlineSnapshot(`
-                                                                                                Array [
-                                                                                                  "task-123",
-                                                                                                ]
-                                                                `);
+                                                                                                                  Array [
+                                                                                                                    "task-123",
+                                                                                                                  ]
+                                                                            `);
   });
 });
 
@@ -960,6 +1180,7 @@ describe('update()', () => {
         scheduledTaskId: 'task-123',
       },
       references: [],
+      version: '123',
     });
     savedObjectsClient.update.mockResolvedValueOnce({
       id: '1',
@@ -1006,66 +1227,66 @@ describe('update()', () => {
           },
         ],
       },
-      options: {
-        version: '123',
-      },
     });
     expect(result).toMatchInlineSnapshot(`
-                                                                                    Object {
-                                                                                      "actions": Array [
-                                                                                        Object {
-                                                                                          "group": "default",
-                                                                                          "id": "1",
-                                                                                          "params": Object {
-                                                                                            "foo": true,
-                                                                                          },
-                                                                                        },
-                                                                                      ],
-                                                                                      "alertTypeParams": Object {
-                                                                                        "bar": true,
-                                                                                      },
-                                                                                      "enabled": true,
-                                                                                      "id": "1",
-                                                                                      "interval": "10s",
-                                                                                      "scheduledTaskId": "task-123",
-                                                                                    }
-                                                        `);
+                                                                                                      Object {
+                                                                                                        "actions": Array [
+                                                                                                          Object {
+                                                                                                            "group": "default",
+                                                                                                            "id": "1",
+                                                                                                            "params": Object {
+                                                                                                              "foo": true,
+                                                                                                            },
+                                                                                                          },
+                                                                                                        ],
+                                                                                                        "alertTypeParams": Object {
+                                                                                                          "bar": true,
+                                                                                                        },
+                                                                                                        "enabled": true,
+                                                                                                        "id": "1",
+                                                                                                        "interval": "10s",
+                                                                                                        "scheduledTaskId": "task-123",
+                                                                                                      }
+                                                                    `);
     expect(savedObjectsClient.update).toHaveBeenCalledTimes(1);
     expect(savedObjectsClient.update.mock.calls[0]).toHaveLength(4);
     expect(savedObjectsClient.update.mock.calls[0][0]).toEqual('alert');
     expect(savedObjectsClient.update.mock.calls[0][1]).toEqual('1');
     expect(savedObjectsClient.update.mock.calls[0][2]).toMatchInlineSnapshot(`
-            Object {
-              "actions": Array [
-                Object {
-                  "actionRef": "action_0",
-                  "group": "default",
-                  "params": Object {
-                    "foo": true,
-                  },
-                },
-              ],
-              "alertTypeParams": Object {
-                "bar": true,
-              },
-              "apiKey": null,
-              "apiKeyOwner": null,
-              "interval": "10s",
-              "updatedBy": "elastic",
-            }
-        `);
+      Object {
+        "actions": Array [
+          Object {
+            "actionRef": "action_0",
+            "group": "default",
+            "params": Object {
+              "foo": true,
+            },
+          },
+        ],
+        "alertTypeId": "123",
+        "alertTypeParams": Object {
+          "bar": true,
+        },
+        "apiKey": null,
+        "apiKeyOwner": null,
+        "enabled": true,
+        "interval": "10s",
+        "scheduledTaskId": "task-123",
+        "updatedBy": "elastic",
+      }
+    `);
     expect(savedObjectsClient.update.mock.calls[0][3]).toMatchInlineSnapshot(`
-                                                                                                Object {
-                                                                                                  "references": Array [
-                                                                                                    Object {
-                                                                                                      "id": "1",
-                                                                                                      "name": "action_0",
-                                                                                                      "type": "action",
-                                                                                                    },
-                                                                                                  ],
-                                                                                                  "version": "123",
-                                                                                                }
-                                                                `);
+                                                                                                                  Object {
+                                                                                                                    "references": Array [
+                                                                                                                      Object {
+                                                                                                                        "id": "1",
+                                                                                                                        "name": "action_0",
+                                                                                                                        "type": "action",
+                                                                                                                      },
+                                                                                                                    ],
+                                                                                                                    "version": "123",
+                                                                                                                  }
+                                                                            `);
   });
 
   it('calls the createApiKey function', async () => {
@@ -1085,6 +1306,7 @@ describe('update()', () => {
         scheduledTaskId: 'task-123',
       },
       references: [],
+      version: '123',
     });
     alertsClientParams.createAPIKey.mockResolvedValueOnce({
       created: true,
@@ -1136,67 +1358,67 @@ describe('update()', () => {
           },
         ],
       },
-      options: {
-        version: '123',
-      },
     });
     expect(result).toMatchInlineSnapshot(`
-                        Object {
-                          "actions": Array [
-                            Object {
-                              "group": "default",
-                              "id": "1",
-                              "params": Object {
-                                "foo": true,
-                              },
-                            },
-                          ],
-                          "alertTypeParams": Object {
-                            "bar": true,
-                          },
-                          "apiKey": "MTIzOmFiYw==",
-                          "enabled": true,
-                          "id": "1",
-                          "interval": "10s",
-                          "scheduledTaskId": "task-123",
-                        }
-                `);
+                                          Object {
+                                            "actions": Array [
+                                              Object {
+                                                "group": "default",
+                                                "id": "1",
+                                                "params": Object {
+                                                  "foo": true,
+                                                },
+                                              },
+                                            ],
+                                            "alertTypeParams": Object {
+                                              "bar": true,
+                                            },
+                                            "apiKey": "MTIzOmFiYw==",
+                                            "enabled": true,
+                                            "id": "1",
+                                            "interval": "10s",
+                                            "scheduledTaskId": "task-123",
+                                          }
+                            `);
     expect(savedObjectsClient.update).toHaveBeenCalledTimes(1);
     expect(savedObjectsClient.update.mock.calls[0]).toHaveLength(4);
     expect(savedObjectsClient.update.mock.calls[0][0]).toEqual('alert');
     expect(savedObjectsClient.update.mock.calls[0][1]).toEqual('1');
     expect(savedObjectsClient.update.mock.calls[0][2]).toMatchInlineSnapshot(`
-            Object {
-              "actions": Array [
-                Object {
-                  "actionRef": "action_0",
-                  "group": "default",
-                  "params": Object {
-                    "foo": true,
-                  },
-                },
-              ],
-              "alertTypeParams": Object {
-                "bar": true,
-              },
-              "apiKey": "MTIzOmFiYw==",
-              "apiKeyOwner": "elastic",
-              "interval": "10s",
-              "updatedBy": "elastic",
-            }
-        `);
+      Object {
+        "actions": Array [
+          Object {
+            "actionRef": "action_0",
+            "group": "default",
+            "params": Object {
+              "foo": true,
+            },
+          },
+        ],
+        "alertTypeId": "123",
+        "alertTypeParams": Object {
+          "bar": true,
+        },
+        "apiKey": "MTIzOmFiYw==",
+        "apiKeyOwner": "elastic",
+        "enabled": true,
+        "interval": "10s",
+        "scheduledTaskId": "task-123",
+        "updatedBy": "elastic",
+      }
+    `);
     expect(savedObjectsClient.update.mock.calls[0][3]).toMatchInlineSnapshot(`
-                              Object {
-                                "references": Array [
-                                  Object {
-                                    "id": "1",
-                                    "name": "action_0",
-                                    "type": "action",
-                                  },
-                                ],
-                                "version": "123",
-                              }
-                    `);
+                                                Object {
+                                                  "references": Array [
+                                                    Object {
+                                                      "id": "1",
+                                                      "name": "action_0",
+                                                      "type": "action",
+                                                    },
+                                                  ],
+                                                  "version": "123",
+                                                }
+                                `);
   });
 
   it('should validate alertTypeParams', async () => {
@@ -1238,9 +1460,6 @@ describe('update()', () => {
             },
           ],
         },
-        options: {
-          version: '123',
-        },
       })
     ).rejects.toThrowErrorMatchingInlineSnapshot(
       `"alertTypeParams invalid: [param1]: expected value of type [string] but got [undefined]"`
@@ -1271,6 +1490,9 @@ describe('updateApiKey()', () => {
       'alert',
       '1',
       {
+        interval: '10s',
+        alertTypeId: '2',
+        enabled: true,
         apiKey: Buffer.from('123:abc').toString('base64'),
         apiKeyOwner: 'elastic',
         updatedBy: 'elastic',
diff --git a/x-pack/legacy/plugins/alerting/server/alerts_client.ts b/x-pack/legacy/plugins/alerting/server/alerts_client.ts
index 493b457abd9142..10f87dbd6024aa 100644
--- a/x-pack/legacy/plugins/alerting/server/alerts_client.ts
+++ b/x-pack/legacy/plugins/alerting/server/alerts_client.ts
@@ -56,7 +56,13 @@ interface FindResult {
 }
 
 interface CreateOptions {
-  data: Pick<Alert, Exclude<keyof Alert, 'createdBy' | 'updatedBy' | 'apiKey' | 'apiKeyOwner'>>;
+  data: Pick<
+    Alert,
+    Exclude<
+      keyof Alert,
+      'createdBy' | 'updatedBy' | 'apiKey' | 'apiKeyOwner' | 'muteAll' | 'mutedInstanceIds'
+    >
+  >;
   options?: {
     migrationVersion?: Record<string, string>;
   };
@@ -69,7 +75,6 @@ interface UpdateOptions {
     actions: AlertAction[];
     alertTypeParams: Record<string, any>;
   };
-  options?: { version?: string };
 }
 
 export class AlertsClient {
@@ -117,6 +122,8 @@ export class AlertsClient {
         ? Buffer.from(`${apiKey.result.id}:${apiKey.result.api_key}`).toString('base64')
         : undefined,
       alertTypeParams: validatedAlertTypeParams,
+      muteAll: false,
+      mutedInstanceIds: [],
     });
     const createdAlert = await this.savedObjectsClient.create('alert', rawAlert, {
       ...options,
@@ -188,10 +195,9 @@ export class AlertsClient {
     return removeResult;
   }
 
-  public async update({ id, data, options = {} }: UpdateOptions) {
-    const existingObject = await this.savedObjectsClient.get('alert', id);
-    const { alertTypeId } = existingObject.attributes;
-    const alertType = this.alertTypeRegistry.get(alertTypeId);
+  public async update({ id, data }: UpdateOptions) {
+    const { attributes, version } = await this.savedObjectsClient.get('alert', id);
+    const alertType = this.alertTypeRegistry.get(attributes.alertTypeId);
     const apiKey = await this.createAPIKey();
 
     // Validate
@@ -204,6 +210,7 @@ export class AlertsClient {
       'alert',
       id,
       {
+        ...attributes,
         ...data,
         alertTypeParams: validatedAlertTypeParams,
         actions,
@@ -214,7 +221,7 @@ export class AlertsClient {
           : null,
       },
       {
-        ...options,
+        version,
         references,
       }
     );
@@ -222,7 +229,7 @@ export class AlertsClient {
   }
 
   public async updateApiKey({ id }: { id: string }) {
-    const { references } = await this.savedObjectsClient.get('alert', id);
+    const { references, version, attributes } = await this.savedObjectsClient.get('alert', id);
 
     const apiKey = await this.createAPIKey();
     const username = await this.getUserName();
@@ -230,6 +237,7 @@ export class AlertsClient {
       'alert',
       id,
       {
+        ...attributes,
         updatedBy: username,
         apiKeyOwner: apiKey.created ? username : null,
         apiKey: apiKey.created
@@ -237,25 +245,27 @@ export class AlertsClient {
           : null,
       },
       {
+        version,
         references,
       }
     );
   }
 
   public async enable({ id }: { id: string }) {
-    const existingObject = await this.savedObjectsClient.get('alert', id);
-    if (existingObject.attributes.enabled === false) {
+    const { attributes, version, references } = await this.savedObjectsClient.get('alert', id);
+    if (attributes.enabled === false) {
       const apiKey = await this.createAPIKey();
       const scheduledTask = await this.scheduleAlert(
         id,
-        existingObject.attributes.alertTypeId,
-        existingObject.attributes.interval
+        attributes.alertTypeId,
+        attributes.interval
       );
       const username = await this.getUserName();
       await this.savedObjectsClient.update(
         'alert',
         id,
         {
+          ...attributes,
           enabled: true,
           updatedBy: username,
           apiKeyOwner: apiKey.created ? username : null,
@@ -264,27 +274,123 @@ export class AlertsClient {
             ? Buffer.from(`${apiKey.result.id}:${apiKey.result.api_key}`).toString('base64')
             : null,
         },
-        { references: existingObject.references }
+        {
+          version,
+          references,
+        }
       );
     }
   }
 
   public async disable({ id }: { id: string }) {
-    const existingObject = await this.savedObjectsClient.get('alert', id);
-    if (existingObject.attributes.enabled === true) {
+    const { attributes, version, references } = await this.savedObjectsClient.get('alert', id);
+    if (attributes.enabled === true) {
       await this.savedObjectsClient.update(
         'alert',
         id,
         {
+          ...attributes,
           enabled: false,
           scheduledTaskId: null,
           apiKey: null,
           apiKeyOwner: null,
           updatedBy: await this.getUserName(),
         },
-        { references: existingObject.references }
+        {
+          version,
+          references,
+        }
+      );
+      await this.taskManager.remove(attributes.scheduledTaskId);
+    }
+  }
+
+  public async muteAll({ id }: { id: string }) {
+    const {
+      references,
+      attributes: { muteAll },
+    } = await this.savedObjectsClient.get('alert', id);
+    if (!muteAll) {
+      await this.savedObjectsClient.update(
+        'alert',
+        id,
+        {
+          muteAll: true,
+          mutedInstanceIds: [],
+          updatedBy: await this.getUserName(),
+        },
+        { references }
+      );
+    }
+  }
+
+  public async unmuteAll({ id }: { id: string }) {
+    const {
+      references,
+      attributes: { muteAll },
+    } = await this.savedObjectsClient.get('alert', id);
+    if (muteAll) {
+      await this.savedObjectsClient.update(
+        'alert',
+        id,
+        {
+          muteAll: false,
+          mutedInstanceIds: [],
+          updatedBy: await this.getUserName(),
+        },
+        { references }
+      );
+    }
+  }
+
+  public async muteInstance({
+    alertId,
+    alertInstanceId,
+  }: {
+    alertId: string;
+    alertInstanceId: string;
+  }) {
+    const { attributes, version, references } = await this.savedObjectsClient.get('alert', alertId);
+    const mutedInstanceIds = attributes.mutedInstanceIds || [];
+    if (!attributes.muteAll && !mutedInstanceIds.includes(alertInstanceId)) {
+      mutedInstanceIds.push(alertInstanceId);
+      await this.savedObjectsClient.update(
+        'alert',
+        alertId,
+        {
+          mutedInstanceIds,
+          updatedBy: await this.getUserName(),
+        },
+        {
+          version,
+          references,
+        }
+      );
+    }
+  }
+
+  public async unmuteInstance({
+    alertId,
+    alertInstanceId,
+  }: {
+    alertId: string;
+    alertInstanceId: string;
+  }) {
+    const { attributes, version, references } = await this.savedObjectsClient.get('alert', alertId);
+    const mutedInstanceIds = attributes.mutedInstanceIds || [];
+    if (!attributes.muteAll && mutedInstanceIds.includes(alertInstanceId)) {
+      await this.savedObjectsClient.update(
+        'alert',
+        alertId,
+        {
+          updatedBy: await this.getUserName(),
+          mutedInstanceIds: mutedInstanceIds.filter((id: string) => id !== alertInstanceId),
+        },
+        {
+          version,
+          references,
+        }
       );
-      await this.taskManager.remove(existingObject.attributes.scheduledTaskId);
     }
   }
 
diff --git a/x-pack/legacy/plugins/alerting/server/init.ts b/x-pack/legacy/plugins/alerting/server/init.ts
index e41275134a2434..191d9b08c8ab7c 100644
--- a/x-pack/legacy/plugins/alerting/server/init.ts
+++ b/x-pack/legacy/plugins/alerting/server/init.ts
@@ -28,6 +28,10 @@ import {
   enableAlertRoute,
   disableAlertRoute,
   updateApiKeyRoute,
+  muteAllAlertRoute,
+  unmuteAllAlertRoute,
+  muteAlertInstanceRoute,
+  unmuteAlertInstanceRoute,
 } from './routes';
 
 // Extend PluginProperties to indicate which plugins are guaranteed to exist
@@ -88,7 +92,12 @@ export function init(server: Server) {
   server.plugins.encrypted_saved_objects.registerType({
     type: 'alert',
     attributesToEncrypt: new Set(['apiKey']),
-    attributesToExcludeFromAAD: new Set(['scheduledTaskId']),
+    attributesToExcludeFromAAD: new Set([
+      'scheduledTaskId',
+      'muted',
+      'mutedInstanceIds',
+      'updatedBy',
+    ]),
   });
 
   function getServices(request: any): Services {
@@ -127,6 +136,10 @@ export function init(server: Server) {
   enableAlertRoute(server);
   disableAlertRoute(server);
   updateApiKeyRoute(server);
+  muteAllAlertRoute(server);
+  unmuteAllAlertRoute(server);
+  muteAlertInstanceRoute(server);
+  unmuteAlertInstanceRoute(server);
 
   // Expose functions
   server.decorate('request', 'getAlertsClient', function() {
diff --git a/x-pack/legacy/plugins/alerting/server/lib/alert_instance.test.ts b/x-pack/legacy/plugins/alerting/server/lib/alert_instance.test.ts
index 68f828066ea78c..d3f11006212460 100644
--- a/x-pack/legacy/plugins/alerting/server/lib/alert_instance.test.ts
+++ b/x-pack/legacy/plugins/alerting/server/lib/alert_instance.test.ts
@@ -64,10 +64,10 @@ describe('hasScheduledActions()', () => {
   });
 });
 
-describe('getSechduledActionOptions()', () => {
+describe('getScheduledActionOptions()', () => {
   test('defaults to undefined', () => {
     const alertInstance = new AlertInstance();
-    expect(alertInstance.getSechduledActionOptions()).toBeUndefined();
+    expect(alertInstance.getScheduledActionOptions()).toBeUndefined();
   });
 });
 
@@ -80,16 +80,16 @@ describe('unscheduleActions()', () => {
     expect(alertInstance.hasScheduledActions(null)).toEqual(false);
   });
 
-  test('makes getSechduledActionOptions() return undefined', () => {
+  test('makes getScheduledActionOptions() return undefined', () => {
     const alertInstance = new AlertInstance();
     alertInstance.scheduleActions('default');
-    expect(alertInstance.getSechduledActionOptions()).toEqual({
+    expect(alertInstance.getScheduledActionOptions()).toEqual({
       actionGroup: 'default',
       context: {},
       state: {},
     });
     alertInstance.unscheduleActions();
-    expect(alertInstance.getSechduledActionOptions()).toBeUndefined();
+    expect(alertInstance.getScheduledActionOptions()).toBeUndefined();
   });
 });
 
@@ -145,10 +145,10 @@ describe('scheduleActions()', () => {
     expect(alertInstance.hasScheduledActions('1m')).toEqual(true);
   });
 
-  test('makes getSechduledActionOptions() return given options', () => {
+  test('makes getScheduledActionOptions() return given options', () => {
     const alertInstance = new AlertInstance({ state: { foo: true }, meta: {} });
     alertInstance.replaceState({ otherField: true }).scheduleActions('default', { field: true });
-    expect(alertInstance.getSechduledActionOptions()).toEqual({
+    expect(alertInstance.getScheduledActionOptions()).toEqual({
       actionGroup: 'default',
       context: { field: true },
       state: { otherField: true },
diff --git a/x-pack/legacy/plugins/alerting/server/lib/alert_instance.ts b/x-pack/legacy/plugins/alerting/server/lib/alert_instance.ts
index e952e3dfb87539..ec2dc1dfa4691d 100644
--- a/x-pack/legacy/plugins/alerting/server/lib/alert_instance.ts
+++ b/x-pack/legacy/plugins/alerting/server/lib/alert_instance.ts
@@ -54,7 +54,7 @@ export class AlertInstance {
     return true;
   }
 
-  getSechduledActionOptions() {
+  getScheduledActionOptions() {
     return this.scheduledExecutionOptions;
   }
 
diff --git a/x-pack/legacy/plugins/alerting/server/lib/get_create_task_runner_function.test.ts b/x-pack/legacy/plugins/alerting/server/lib/get_create_task_runner_function.test.ts
index b99e206c810342..2490a187ee4587 100644
--- a/x-pack/legacy/plugins/alerting/server/lib/get_create_task_runner_function.test.ts
+++ b/x-pack/legacy/plugins/alerting/server/lib/get_create_task_runner_function.test.ts
@@ -68,6 +68,7 @@ const mockedAlertTypeSavedObject = {
     enabled: true,
     alertTypeId: '123',
     interval: '10s',
+    mutedInstanceIds: [],
     alertTypeParams: {
       bar: true,
     },
diff --git a/x-pack/legacy/plugins/alerting/server/lib/get_create_task_runner_function.ts b/x-pack/legacy/plugins/alerting/server/lib/get_create_task_runner_function.ts
index 5b5a32cfa52109..8725017148d4a7 100644
--- a/x-pack/legacy/plugins/alerting/server/lib/get_create_task_runner_function.ts
+++ b/x-pack/legacy/plugins/alerting/server/lib/get_create_task_runner_function.ts
@@ -74,7 +74,7 @@ export function getCreateTaskRunnerFunction({
         const services = getServices(fakeRequest);
         // Ensure API key is still valid and user has access
         const {
-          attributes: { alertTypeParams, actions, interval, throttle },
+          attributes: { alertTypeParams, actions, interval, throttle, muteAll, mutedInstanceIds },
           references,
         } = await services.savedObjectsClient.get<RawAlert>('alert', alertId);
 
@@ -128,7 +128,10 @@ export function getCreateTaskRunnerFunction({
           Object.keys(alertInstances).map(alertInstanceId => {
             const alertInstance = alertInstances[alertInstanceId];
             if (alertInstance.hasScheduledActions(throttle)) {
-              const { actionGroup, context, state } = alertInstance.getSechduledActionOptions()!;
+              if (muteAll || mutedInstanceIds.includes(alertInstanceId)) {
+                return;
+              }
+              const { actionGroup, context, state } = alertInstance.getScheduledActionOptions()!;
               alertInstance.updateLastScheduledActions(actionGroup);
               alertInstance.unscheduleActions();
               return executionHandler({ actionGroup, context, state, alertInstanceId });
diff --git a/x-pack/legacy/plugins/alerting/server/routes/index.ts b/x-pack/legacy/plugins/alerting/server/routes/index.ts
index a8c0e28335973b..9e568c21f29922 100644
--- a/x-pack/legacy/plugins/alerting/server/routes/index.ts
+++ b/x-pack/legacy/plugins/alerting/server/routes/index.ts
@@ -13,3 +13,7 @@ export { updateAlertRoute } from './update';
 export { enableAlertRoute } from './enable';
 export { disableAlertRoute } from './disable';
 export { updateApiKeyRoute } from './update_api_key';
+export { muteAlertInstanceRoute } from './mute_instance';
+export { unmuteAlertInstanceRoute } from './unmute_instance';
+export { muteAllAlertRoute } from './mute_all';
+export { unmuteAllAlertRoute } from './unmute_all';
diff --git a/x-pack/legacy/plugins/alerting/server/routes/mute_all.test.ts b/x-pack/legacy/plugins/alerting/server/routes/mute_all.test.ts
new file mode 100644
index 00000000000000..17114fcc62a42a
--- /dev/null
+++ b/x-pack/legacy/plugins/alerting/server/routes/mute_all.test.ts
@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { createMockServer } from './_mock_server';
+import { muteAllAlertRoute } from './mute_all';
+
+const { server, alertsClient } = createMockServer();
+muteAllAlertRoute(server);
+
+test('mutes an alert', async () => {
+  const request = {
+    method: 'POST',
+    url: '/api/alert/1/_mute_all',
+  };
+
+  const { statusCode } = await server.inject(request);
+  expect(statusCode).toBe(204);
+  expect(alertsClient.muteAll).toHaveBeenCalledWith({ id: '1' });
+});
diff --git a/x-pack/legacy/plugins/alerting/server/routes/mute_all.ts b/x-pack/legacy/plugins/alerting/server/routes/mute_all.ts
new file mode 100644
index 00000000000000..5ad63c8ed97d42
--- /dev/null
+++ b/x-pack/legacy/plugins/alerting/server/routes/mute_all.ts
@@ -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 Hapi from 'hapi';
+
+interface MuteAllRequest extends Hapi.Request {
+  params: {
+    id: string;
+  };
+}
+
+export function muteAllAlertRoute(server: Hapi.Server) {
+  server.route({
+    method: 'POST',
+    path: '/api/alert/{id}/_mute_all',
+    options: {
+      tags: ['access:alerting-all'],
+      response: {
+        emptyStatusCode: 204,
+      },
+    },
+    async handler(request: MuteAllRequest, h: Hapi.ResponseToolkit) {
+      const alertsClient = request.getAlertsClient!();
+      await alertsClient.muteAll(request.params);
+      return h.response();
+    },
+  });
+}
diff --git a/x-pack/legacy/plugins/alerting/server/routes/mute_instance.test.ts b/x-pack/legacy/plugins/alerting/server/routes/mute_instance.test.ts
new file mode 100644
index 00000000000000..9ab46562d12f24
--- /dev/null
+++ b/x-pack/legacy/plugins/alerting/server/routes/mute_instance.test.ts
@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { createMockServer } from './_mock_server';
+import { muteAlertInstanceRoute } from './mute_instance';
+
+const { server, alertsClient } = createMockServer();
+muteAlertInstanceRoute(server);
+
+test('mutes an alert instance', async () => {
+  const request = {
+    method: 'POST',
+    url: '/api/alert/1/alert_instance/2/_mute',
+  };
+
+  const { statusCode } = await server.inject(request);
+  expect(statusCode).toBe(204);
+  expect(alertsClient.muteInstance).toHaveBeenCalledWith({ alertId: '1', alertInstanceId: '2' });
+});
diff --git a/x-pack/legacy/plugins/alerting/server/routes/mute_instance.ts b/x-pack/legacy/plugins/alerting/server/routes/mute_instance.ts
new file mode 100644
index 00000000000000..90d3b116f66170
--- /dev/null
+++ b/x-pack/legacy/plugins/alerting/server/routes/mute_instance.ts
@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import Hapi from 'hapi';
+
+interface MuteInstanceRequest extends Hapi.Request {
+  params: {
+    alertId: string;
+    alertInstanceId: string;
+  };
+}
+
+export function muteAlertInstanceRoute(server: Hapi.Server) {
+  server.route({
+    method: 'POST',
+    path: '/api/alert/{alertId}/alert_instance/{alertInstanceId}/_mute',
+    options: {
+      tags: ['access:alerting-all'],
+      response: {
+        emptyStatusCode: 204,
+      },
+    },
+    async handler(request: MuteInstanceRequest, h: Hapi.ResponseToolkit) {
+      const alertsClient = request.getAlertsClient!();
+      await alertsClient.muteInstance(request.params);
+      return h.response();
+    },
+  });
+}
diff --git a/x-pack/legacy/plugins/alerting/server/routes/unmute_all.test.ts b/x-pack/legacy/plugins/alerting/server/routes/unmute_all.test.ts
new file mode 100644
index 00000000000000..62fce147b0105c
--- /dev/null
+++ b/x-pack/legacy/plugins/alerting/server/routes/unmute_all.test.ts
@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { createMockServer } from './_mock_server';
+import { unmuteAllAlertRoute } from './unmute_all';
+
+const { server, alertsClient } = createMockServer();
+unmuteAllAlertRoute(server);
+
+test('unmutes an alert', async () => {
+  const request = {
+    method: 'POST',
+    url: '/api/alert/1/_unmute_all',
+  };
+
+  const { statusCode } = await server.inject(request);
+  expect(statusCode).toBe(204);
+  expect(alertsClient.unmuteAll).toHaveBeenCalledWith({ id: '1' });
+});
diff --git a/x-pack/legacy/plugins/alerting/server/routes/unmute_all.ts b/x-pack/legacy/plugins/alerting/server/routes/unmute_all.ts
new file mode 100644
index 00000000000000..8a72f1d9e08f9a
--- /dev/null
+++ b/x-pack/legacy/plugins/alerting/server/routes/unmute_all.ts
@@ -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 Hapi from 'hapi';
+
+interface UnmuteAllRequest extends Hapi.Request {
+  params: {
+    id: string;
+  };
+}
+
+export function unmuteAllAlertRoute(server: Hapi.Server) {
+  server.route({
+    method: 'POST',
+    path: '/api/alert/{id}/_unmute_all',
+    options: {
+      tags: ['access:alerting-all'],
+      response: {
+        emptyStatusCode: 204,
+      },
+    },
+    async handler(request: UnmuteAllRequest, h: Hapi.ResponseToolkit) {
+      const alertsClient = request.getAlertsClient!();
+      await alertsClient.unmuteAll(request.params);
+      return h.response();
+    },
+  });
+}
diff --git a/x-pack/legacy/plugins/alerting/server/routes/unmute_instance.test.ts b/x-pack/legacy/plugins/alerting/server/routes/unmute_instance.test.ts
new file mode 100644
index 00000000000000..002cfdd3d80517
--- /dev/null
+++ b/x-pack/legacy/plugins/alerting/server/routes/unmute_instance.test.ts
@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { createMockServer } from './_mock_server';
+import { unmuteAlertInstanceRoute } from './unmute_instance';
+
+const { server, alertsClient } = createMockServer();
+unmuteAlertInstanceRoute(server);
+
+test('unmutes an alert instance', async () => {
+  const request = {
+    method: 'POST',
+    url: '/api/alert/1/alert_instance/2/_unmute',
+  };
+
+  const { statusCode } = await server.inject(request);
+  expect(statusCode).toBe(204);
+  expect(alertsClient.unmuteInstance).toHaveBeenCalledWith({ alertId: '1', alertInstanceId: '2' });
+});
diff --git a/x-pack/legacy/plugins/alerting/server/routes/unmute_instance.ts b/x-pack/legacy/plugins/alerting/server/routes/unmute_instance.ts
new file mode 100644
index 00000000000000..2adc847d02629e
--- /dev/null
+++ b/x-pack/legacy/plugins/alerting/server/routes/unmute_instance.ts
@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import Hapi from 'hapi';
+
+interface UnmuteInstanceRequest extends Hapi.Request {
+  params: {
+    alertId: string;
+    alertInstanceId: string;
+  };
+}
+
+export function unmuteAlertInstanceRoute(server: Hapi.Server) {
+  server.route({
+    method: 'POST',
+    path: '/api/alert/{alertId}/alert_instance/{alertInstanceId}/_unmute',
+    options: {
+      tags: ['access:alerting-all'],
+      response: {
+        emptyStatusCode: 204,
+      },
+    },
+    async handler(request: UnmuteInstanceRequest, h: Hapi.ResponseToolkit) {
+      const alertsClient = request.getAlertsClient!();
+      await alertsClient.unmuteInstance(request.params);
+      return h.response();
+    },
+  });
+}
diff --git a/x-pack/legacy/plugins/alerting/server/types.ts b/x-pack/legacy/plugins/alerting/server/types.ts
index c52cbf34156f35..723436c4f1c70d 100644
--- a/x-pack/legacy/plugins/alerting/server/types.ts
+++ b/x-pack/legacy/plugins/alerting/server/types.ts
@@ -75,6 +75,8 @@ export interface Alert {
   apiKey?: string;
   apiKeyOwner?: string;
   throttle: string | null;
+  muteAll: boolean;
+  mutedInstanceIds: string[];
 }
 
 export interface RawAlert extends SavedObjectAttributes {
@@ -89,6 +91,8 @@ export interface RawAlert extends SavedObjectAttributes {
   apiKey?: string;
   apiKeyOwner?: string;
   throttle: string | null;
+  muteAll: boolean;
+  mutedInstanceIds: string[];
 }
 
 export interface AlertingPlugin {
diff --git a/x-pack/legacy/plugins/apm/common/__snapshots__/elasticsearch_fieldnames.test.ts.snap b/x-pack/legacy/plugins/apm/common/__snapshots__/elasticsearch_fieldnames.test.ts.snap
index 6b5ea81ee17756..ca1029db12d527 100644
--- a/x-pack/legacy/plugins/apm/common/__snapshots__/elasticsearch_fieldnames.test.ts.snap
+++ b/x-pack/legacy/plugins/apm/common/__snapshots__/elasticsearch_fieldnames.test.ts.snap
@@ -58,6 +58,8 @@ exports[`Error SERVICE_ENVIRONMENT 1`] = `undefined`;
 
 exports[`Error SERVICE_NAME 1`] = `"service name"`;
 
+exports[`Error SERVICE_NODE_NAME 1`] = `undefined`;
+
 exports[`Error SPAN_ACTION 1`] = `undefined`;
 
 exports[`Error SPAN_DURATION 1`] = `undefined`;
@@ -152,6 +154,8 @@ exports[`Span SERVICE_ENVIRONMENT 1`] = `undefined`;
 
 exports[`Span SERVICE_NAME 1`] = `"service name"`;
 
+exports[`Span SERVICE_NODE_NAME 1`] = `undefined`;
+
 exports[`Span SPAN_ACTION 1`] = `"my action"`;
 
 exports[`Span SPAN_DURATION 1`] = `1337`;
@@ -246,6 +250,8 @@ exports[`Transaction SERVICE_ENVIRONMENT 1`] = `undefined`;
 
 exports[`Transaction SERVICE_NAME 1`] = `"service name"`;
 
+exports[`Transaction SERVICE_NODE_NAME 1`] = `undefined`;
+
 exports[`Transaction SPAN_ACTION 1`] = `undefined`;
 
 exports[`Transaction SPAN_DURATION 1`] = `undefined`;
diff --git a/x-pack/legacy/plugins/apm/common/agent_name.ts b/x-pack/legacy/plugins/apm/common/agent_name.ts
index aa873ea2fd6b66..daaeb14dc9eaa2 100644
--- a/x-pack/legacy/plugins/apm/common/agent_name.ts
+++ b/x-pack/legacy/plugins/apm/common/agent_name.ts
@@ -29,11 +29,11 @@ export function isAgentName(agentName: string): boolean {
 }
 
 export function isRumAgentName(agentName: string | undefined) {
-  if (!agentName) {
-    return false;
-  }
-
-  return ([agentNames['js-base'], agentNames['rum-js']] as string[]).includes(
-    agentName
+  return (
+    agentName === agentNames['js-base'] || agentName === agentNames['rum-js']
   );
 }
+
+export function isJavaAgentName(agentName: string | undefined) {
+  return agentName === agentNames.java;
+}
diff --git a/x-pack/legacy/plugins/apm/common/elasticsearch_fieldnames.ts b/x-pack/legacy/plugins/apm/common/elasticsearch_fieldnames.ts
index 140ab2423732c9..4787b54d8dd5a2 100644
--- a/x-pack/legacy/plugins/apm/common/elasticsearch_fieldnames.ts
+++ b/x-pack/legacy/plugins/apm/common/elasticsearch_fieldnames.ts
@@ -6,6 +6,7 @@
 export const SERVICE_NAME = 'service.name';
 export const SERVICE_ENVIRONMENT = 'service.environment';
 export const SERVICE_AGENT_NAME = 'agent.name';
+export const SERVICE_NODE_NAME = 'service.node.name';
 export const URL_FULL = 'url.full';
 export const HTTP_REQUEST_METHOD = 'http.request.method';
 export const USER_ID = 'user.id';
diff --git a/x-pack/legacy/plugins/apm/common/projections/metrics.ts b/x-pack/legacy/plugins/apm/common/projections/metrics.ts
index 51e74e19afb1f4..96d7992e2919bd 100644
--- a/x-pack/legacy/plugins/apm/common/projections/metrics.ts
+++ b/x-pack/legacy/plugins/apm/common/projections/metrics.ts
@@ -10,13 +10,19 @@ import { rangeFilter } from '../../server/lib/helpers/range_filter';
 
 export function getMetricsProjection({
   setup,
-  serviceName
+  serviceName,
+  serviceNodeName
 }: {
   setup: Setup;
   serviceName: string;
+  serviceNodeName?: string;
 }) {
   const { start, end, uiFiltersES, config } = setup;
 
+  const serviceNodeNameFilters = serviceNodeName
+    ? [{ term: { [SERVICE_NAME]: serviceName } }]
+    : [];
+
   return {
     index: config.get<string>('apm_oss.metricsIndices'),
     body: {
@@ -24,6 +30,7 @@ export function getMetricsProjection({
         bool: {
           filter: [
             { term: { [SERVICE_NAME]: serviceName } },
+            ...serviceNodeNameFilters,
             { term: { [PROCESSOR_EVENT]: 'metric' } },
             {
               range: rangeFilter(start, end)
diff --git a/x-pack/legacy/plugins/apm/common/projections/service_nodes.ts b/x-pack/legacy/plugins/apm/common/projections/service_nodes.ts
new file mode 100644
index 00000000000000..95f92fe623a13a
--- /dev/null
+++ b/x-pack/legacy/plugins/apm/common/projections/service_nodes.ts
@@ -0,0 +1,46 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { Setup } from '../../server/lib/helpers/setup_request';
+import {
+  SERVICE_NAME,
+  SERVICE_NODE_NAME,
+  PROCESSOR_EVENT
+} from '../elasticsearch_fieldnames';
+import { rangeFilter } from '../../server/lib/helpers/range_filter';
+
+export function getServiceNodesProjection({
+  setup,
+  serviceName
+}: {
+  setup: Setup;
+  serviceName: string;
+}) {
+  const { start, end, uiFiltersES, config } = setup;
+
+  return {
+    index: config.get<string>('apm_oss.metricsIndices'),
+    body: {
+      query: {
+        bool: {
+          filter: [
+            { term: { [SERVICE_NAME]: serviceName } },
+            { term: { [PROCESSOR_EVENT]: 'metric' } },
+            { range: rangeFilter(start, end) },
+            ...uiFiltersES
+          ]
+        }
+      },
+      aggs: {
+        nodes: {
+          terms: {
+            field: SERVICE_NODE_NAME
+          }
+        }
+      }
+    }
+  };
+}
diff --git a/x-pack/legacy/plugins/apm/common/projections/typings.ts b/x-pack/legacy/plugins/apm/common/projections/typings.ts
index b49dba5e0a6fde..0c56fd2f75bdef 100644
--- a/x-pack/legacy/plugins/apm/common/projections/typings.ts
+++ b/x-pack/legacy/plugins/apm/common/projections/typings.ts
@@ -24,5 +24,6 @@ export enum PROJECTION {
   TRACES = 'traces',
   TRANSACTIONS = 'transactions',
   METRICS = 'metrics',
-  ERROR_GROUPS = 'errorGroups'
+  ERROR_GROUPS = 'errorGroups',
+  SERVICE_NODES = 'serviceNodes'
 }
diff --git a/x-pack/legacy/plugins/apm/public/components/app/Main/route_config/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/Main/route_config/index.tsx
index 3bba5ebe8faab0..528870da12cdc1 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/Main/route_config/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/Main/route_config/index.tsx
@@ -15,6 +15,12 @@ import { BreadcrumbRoute } from '../ProvideBreadcrumbs';
 import { RouteName } from './route_names';
 import { Settings } from '../../Settings';
 import { toQuery } from '../../../shared/Links/url_helpers';
+import { ServiceNodeMetrics } from '../../ServiceNodeMetrics';
+import { resolveUrlParams } from '../../../../context/UrlParamsContext/resolveUrlParams';
+
+const metricsBreadcrumb = i18n.translate('xpack.apm.breadcrumb.metricsTitle', {
+  defaultMessage: 'Metrics'
+});
 
 interface RouteParams {
   serviceName: string;
@@ -76,7 +82,6 @@ export const routes: BreadcrumbRoute[] = [
       )(props),
     name: RouteName.SERVICE
   },
-
   // errors
   {
     exact: true,
@@ -94,7 +99,6 @@ export const routes: BreadcrumbRoute[] = [
     }),
     name: RouteName.ERRORS
   },
-
   // transactions
   {
     exact: true,
@@ -110,11 +114,30 @@ export const routes: BreadcrumbRoute[] = [
     exact: true,
     path: '/services/:serviceName/metrics',
     component: () => <ServiceDetails tab="metrics" />,
-    breadcrumb: i18n.translate('xpack.apm.breadcrumb.metricsTitle', {
-      defaultMessage: 'Metrics'
-    }),
+    breadcrumb: metricsBreadcrumb,
     name: RouteName.METRICS
   },
+  // service nodes, only enabled for java agents for now
+  {
+    exact: true,
+    path: '/services/:serviceName/nodes',
+    component: () => <ServiceDetails tab="nodes" />,
+    breadcrumb: i18n.translate('xpack.apm.breadcrumb.nodesTitle', {
+      defaultMessage: 'JVMs'
+    }),
+    name: RouteName.SERVICE_NODES
+  },
+  // node metrics
+  {
+    exact: true,
+    path: '/services/:serviceName/nodes/:serviceNodeName/metrics',
+    component: () => <ServiceNodeMetrics />,
+    breadcrumb: ({ location }) => {
+      const { serviceNodeName } = resolveUrlParams(location, {});
+      return serviceNodeName || '';
+    },
+    name: RouteName.SERVICE_NODE_METRICS
+  },
   {
     exact: true,
     path: '/services/:serviceName/transactions/view',
diff --git a/x-pack/legacy/plugins/apm/public/components/app/Main/route_config/route_names.tsx b/x-pack/legacy/plugins/apm/public/components/app/Main/route_config/route_names.tsx
index 10b633c40560f5..26c68b835ff03f 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/Main/route_config/route_names.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/Main/route_config/route_names.tsx
@@ -13,7 +13,9 @@ export enum RouteName {
   ERRORS = 'errors',
   ERROR = 'error',
   METRICS = 'metrics',
+  SERVICE_NODE_METRICS = 'node_metrics',
   TRANSACTION_TYPE = 'transaction_type',
   TRANSACTION_NAME = 'transaction_name',
-  SETTINGS = 'settings'
+  SETTINGS = 'settings',
+  SERVICE_NODES = 'nodes'
 }
diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceDetailTabs.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceDetailTabs.tsx
index 04cf715e989090..fd9002e0edd941 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceDetailTabs.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceDetailTabs.tsx
@@ -10,33 +10,24 @@ import { EuiTabs, EuiSpacer } from '@elastic/eui';
 import { ErrorGroupOverview } from '../ErrorGroupOverview';
 import { TransactionOverview } from '../TransactionOverview';
 import { ServiceMetrics } from '../ServiceMetrics';
-import { useFetcher } from '../../../hooks/useFetcher';
-import { isRumAgentName } from '../../../../common/agent_name';
-import { callApmApi } from '../../../services/rest/callApmApi';
+import { isRumAgentName, isJavaAgentName } from '../../../../common/agent_name';
 import { EuiTabLink } from '../../shared/EuiTabLink';
 import { useUrlParams } from '../../../hooks/useUrlParams';
 import { TransactionOverviewLink } from '../../shared/Links/apm/TransactionOverviewLink';
 import { ErrorOverviewLink } from '../../shared/Links/apm/ErrorOverviewLink';
 import { MetricOverviewLink } from '../../shared/Links/apm/MetricOverviewLink';
+import { ServiceNodeOverviewLink } from '../../shared/Links/apm/ServiceNodeOverviewLink';
+import { ServiceNodeOverview } from '../ServiceNodeOverview';
+import { useAgentName } from '../../../hooks/useAgentName';
 
 interface Props {
-  tab: 'transactions' | 'errors' | 'metrics';
+  tab: 'transactions' | 'errors' | 'metrics' | 'nodes';
 }
 
 export function ServiceDetailTabs({ tab }: Props) {
   const { urlParams } = useUrlParams();
-  const { serviceName, start, end } = urlParams;
-  const { data: agentName } = useFetcher(() => {
-    if (serviceName && start && end) {
-      return callApmApi({
-        pathname: '/api/apm/services/{serviceName}/agent_name',
-        params: {
-          path: { serviceName },
-          query: { start, end }
-        }
-      }).then(res => res.agentName);
-    }
-  }, [serviceName, start, end]);
+  const { serviceName } = urlParams;
+  const { agentName } = useAgentName();
 
   if (!serviceName) {
     // this never happens, urlParams type is not accurate enough
@@ -70,7 +61,21 @@ export function ServiceDetailTabs({ tab }: Props) {
   };
 
   const tabs = [transactionsTab, errorsTab];
-  if (agentName && !isRumAgentName(agentName)) {
+
+  if (isJavaAgentName(agentName)) {
+    const nodesListTab = {
+      link: (
+        <ServiceNodeOverviewLink serviceName={serviceName}>
+          {i18n.translate('xpack.apm.serviceDetails.nodesTabLabel', {
+            defaultMessage: 'JVMs'
+          })}
+        </ServiceNodeOverviewLink>
+      ),
+      render: () => <ServiceNodeOverview />,
+      name: 'nodes'
+    };
+    tabs.push(nodesListTab);
+  } else if (agentName && !isRumAgentName(agentName)) {
     const metricsTab = {
       link: (
         <MetricOverviewLink serviceName={serviceName}>
@@ -82,7 +87,6 @@ export function ServiceDetailTabs({ tab }: Props) {
       render: () => <ServiceMetrics agentName={agentName} />,
       name: 'metrics'
     };
-
     tabs.push(metricsTab);
   }
 
diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceMetrics/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceMetrics/index.tsx
index 871e48c290503a..276d309cbb3e39 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/ServiceMetrics/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/ServiceMetrics/index.tsx
@@ -13,7 +13,7 @@ import {
 } from '@elastic/eui';
 import React, { useMemo } from 'react';
 import { useServiceMetricCharts } from '../../../hooks/useServiceMetricCharts';
-import { MetricsChart } from './MetricsChart';
+import { MetricsChart } from '../../shared/charts/MetricsChart';
 import { useUrlParams } from '../../../hooks/useUrlParams';
 import { ChartsSyncContextProvider } from '../../../context/ChartsSyncContext';
 import { PROJECTION } from '../../../../common/projections/typings';
@@ -25,7 +25,7 @@ interface ServiceMetricsProps {
 
 export function ServiceMetrics({ agentName }: ServiceMetricsProps) {
   const { urlParams } = useUrlParams();
-  const { serviceName } = urlParams;
+  const { serviceName, serviceNodeName } = urlParams;
   const { data } = useServiceMetricCharts(urlParams, agentName);
   const { start, end } = urlParams;
 
@@ -35,12 +35,13 @@ export function ServiceMetrics({ agentName }: ServiceMetricsProps) {
     () => ({
       filterNames: ['host', 'containerId', 'podName'],
       params: {
-        serviceName
+        serviceName,
+        serviceNodeName
       },
       projection: PROJECTION.METRICS,
       showCount: false
     }),
-    [serviceName]
+    [serviceName, serviceNodeName]
   );
 
   return (
diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceNodeMetrics/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceNodeMetrics/index.tsx
new file mode 100644
index 00000000000000..562fd5add83c5b
--- /dev/null
+++ b/x-pack/legacy/plugins/apm/public/components/app/ServiceNodeMetrics/index.tsx
@@ -0,0 +1,129 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiTitle,
+  EuiHorizontalRule,
+  EuiFlexGrid,
+  EuiPanel,
+  EuiSpacer,
+  EuiStat,
+  EuiToolTip
+} from '@elastic/eui';
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import styled from 'styled-components';
+import { ApmHeader } from '../../shared/ApmHeader';
+import { useUrlParams } from '../../../hooks/useUrlParams';
+import { useAgentName } from '../../../hooks/useAgentName';
+import { useServiceMetricCharts } from '../../../hooks/useServiceMetricCharts';
+import { ChartsSyncContextProvider } from '../../../context/ChartsSyncContext';
+import { MetricsChart } from '../../shared/charts/MetricsChart';
+import { useFetcher, FETCH_STATUS } from '../../../hooks/useFetcher';
+import { callApmApi } from '../../../services/rest/callApmApi';
+import { truncate, px, unit } from '../../../style/variables';
+
+const INITIAL_DATA = {
+  host: '',
+  containerId: ''
+};
+
+const Truncate = styled.span`
+  display: block;
+  ${truncate(px(unit * 12))}
+`;
+
+export function ServiceNodeMetrics() {
+  const { urlParams } = useUrlParams();
+  const { serviceName, serviceNodeName } = urlParams;
+
+  const { agentName } = useAgentName();
+  const { data } = useServiceMetricCharts(urlParams, agentName);
+  const { start, end } = urlParams;
+
+  const {
+    data: { host, containerId } = INITIAL_DATA,
+    status
+  } = useFetcher(() => {
+    if (serviceName && serviceNodeName) {
+      return callApmApi({
+        pathname:
+          '/api/apm/services/{serviceName}/node/{serviceNodeName}/metadata',
+        params: {
+          path: { serviceName, serviceNodeName }
+        }
+      });
+    }
+  }, [serviceName, serviceNodeName]);
+
+  const isLoading =
+    status === FETCH_STATUS.LOADING || status === FETCH_STATUS.PENDING;
+
+  return (
+    <div>
+      <ApmHeader>
+        <EuiFlexGroup alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiTitle size="l">
+              <h1>{serviceName}</h1>
+            </EuiTitle>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </ApmHeader>
+      <EuiHorizontalRule margin="m" />
+      <EuiFlexGroup gutterSize="xl">
+        <EuiFlexItem grow={false}>
+          <EuiStat
+            titleSize="s"
+            isLoading={isLoading}
+            description={i18n.translate('xpack.apm.serviceNodeMetrics.host', {
+              defaultMessage: 'Host'
+            })}
+            title={
+              <EuiToolTip content={host}>
+                <Truncate>{host}</Truncate>
+              </EuiToolTip>
+            }
+          ></EuiStat>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiStat
+            titleSize="s"
+            isLoading={isLoading}
+            description={i18n.translate(
+              'xpack.apm.serviceNodeMetrics.containerId',
+              {
+                defaultMessage: 'Container ID'
+              }
+            )}
+            title={
+              <EuiToolTip content={containerId}>
+                <Truncate>{containerId}</Truncate>
+              </EuiToolTip>
+            }
+          ></EuiStat>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiHorizontalRule margin="m" />
+      {agentName && serviceNodeName && (
+        <ChartsSyncContextProvider>
+          <EuiFlexGrid columns={2} gutterSize="s">
+            {data.charts.map(chart => (
+              <EuiFlexItem key={chart.key}>
+                <EuiPanel>
+                  <MetricsChart start={start} end={end} chart={chart} />
+                </EuiPanel>
+              </EuiFlexItem>
+            ))}
+          </EuiFlexGrid>
+          <EuiSpacer size="xxl" />
+        </ChartsSyncContextProvider>
+      )}
+    </div>
+  );
+}
diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceNodeOverview/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceNodeOverview/index.tsx
new file mode 100644
index 00000000000000..09d220435a1f1e
--- /dev/null
+++ b/x-pack/legacy/plugins/apm/public/components/app/ServiceNodeOverview/index.tsx
@@ -0,0 +1,150 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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, { useMemo } from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiToolTip } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import styled from 'styled-components';
+import { PROJECTION } from '../../../../common/projections/typings';
+import { LocalUIFilters } from '../../shared/LocalUIFilters';
+import { useUrlParams } from '../../../hooks/useUrlParams';
+import { ManagedTable, ITableColumn } from '../../shared/ManagedTable';
+import { useFetcher } from '../../../hooks/useFetcher';
+import { callApmApi } from '../../../services/rest/callApmApi';
+import {
+  asDynamicBytes,
+  asInteger,
+  asPercent
+} from '../../../utils/formatters';
+import { ServiceNodeMetricOverviewLink } from '../../shared/Links/apm/ServiceNodeMetricOverviewLink';
+import { truncate, px, unit } from '../../../style/variables';
+
+const INITIAL_PAGE_SIZE = 10;
+const INITIAL_SORT_FIELD = 'name';
+const INITIAL_SORT_DIRECTION = 'asc';
+
+const ServiceNodeName = styled.div`
+  ${truncate(px(8 * unit))}
+`;
+
+const ServiceNodeOverview = () => {
+  const { uiFilters, urlParams } = useUrlParams();
+  const { serviceName, start, end } = urlParams;
+
+  const localFiltersConfig: React.ComponentProps<
+    typeof LocalUIFilters
+  > = useMemo(
+    () => ({
+      filterNames: ['host', 'containerId', 'podName'],
+      params: {
+        serviceName
+      },
+      projection: PROJECTION.SERVICE_NODES
+    }),
+    [serviceName]
+  );
+
+  const { data: items } = useFetcher(() => {
+    if (!serviceName || !start || !end) {
+      return;
+    }
+    return callApmApi({
+      pathname: '/api/apm/services/{serviceName}/serviceNodes',
+      params: {
+        path: {
+          serviceName
+        },
+        query: {
+          start,
+          end,
+          uiFilters: JSON.stringify(uiFilters)
+        }
+      }
+    });
+  }, [serviceName, start, end, uiFilters]);
+
+  if (!serviceName) {
+    return null;
+  }
+
+  const columns: Array<ITableColumn<typeof items[0]>> = [
+    {
+      name: i18n.translate('xpack.apm.jvmsTable.nameColumnLabel', {
+        defaultMessage: 'Name'
+      }),
+      field: 'name',
+      sortable: true,
+      render: (name: string) => {
+        return (
+          <EuiToolTip content={name}>
+            <ServiceNodeMetricOverviewLink
+              serviceName={serviceName}
+              serviceNodeName={name}
+            >
+              <ServiceNodeName>{name}</ServiceNodeName>
+            </ServiceNodeMetricOverviewLink>
+          </EuiToolTip>
+        );
+      }
+    },
+    {
+      name: i18n.translate('xpack.apm.jvmsTable.cpuColumnLabel', {
+        defaultMessage: 'CPU'
+      }),
+      field: 'cpu',
+      sortable: true,
+      render: (value: number | null) => asPercent(value || 0, 1)
+    },
+    {
+      name: i18n.translate('xpack.apm.jvmsTable.heapMemoryColumnLabel', {
+        defaultMessage: 'Heap memory max'
+      }),
+      field: 'heapMemory',
+      sortable: true,
+      render: asDynamicBytes
+    },
+    {
+      name: i18n.translate('xpack.apm.jvmsTable.nonHeapMemoryColumnLabel', {
+        defaultMessage: 'Non-heap memory max'
+      }),
+      field: 'nonHeapMemory',
+      sortable: true,
+      render: asDynamicBytes
+    },
+    {
+      name: i18n.translate('xpack.apm.jvmsTable.threadCountColumnLabel', {
+        defaultMessage: 'Thread count'
+      }),
+      field: 'threadCount',
+      sortable: true,
+      render: asInteger
+    }
+  ];
+
+  return (
+    <EuiFlexGroup>
+      <EuiFlexItem grow={1}>
+        <LocalUIFilters {...localFiltersConfig} />
+      </EuiFlexItem>
+      <EuiFlexItem grow={7}>
+        <EuiPanel>
+          <ManagedTable
+            noItemsMessage={i18n.translate('xpack.apm.jvmsTable.noJvmsLabel', {
+              defaultMessage: 'No JVMs were found'
+            })}
+            items={items || []}
+            columns={columns}
+            initialPageSize={INITIAL_PAGE_SIZE}
+            initialSortField={INITIAL_SORT_FIELD}
+            initialSortDirection={INITIAL_SORT_DIRECTION}
+            hidePerPageOptions={false}
+          />
+        </EuiPanel>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
+
+export { ServiceNodeOverview };
diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/NoServicesMessage.test.tsx.snap b/x-pack/legacy/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/NoServicesMessage.test.tsx.snap
index de8e109e62324a..209b88f73b9e2c 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/NoServicesMessage.test.tsx.snap
+++ b/x-pack/legacy/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/NoServicesMessage.test.tsx.snap
@@ -33,7 +33,6 @@ exports[`NoServicesMessage status: pending and historicalDataFound: false 1`] =
       </p>
     </React.Fragment>
   }
-  iconColor="subdued"
   title={
     <div>
       Looks like you don't have any APM services installed. Let's add some!
@@ -45,7 +44,6 @@ exports[`NoServicesMessage status: pending and historicalDataFound: false 1`] =
 
 exports[`NoServicesMessage status: pending and historicalDataFound: true 1`] = `
 <EuiEmptyPrompt
-  iconColor="subdued"
   title={
     <div>
       No services found
@@ -80,7 +78,6 @@ exports[`NoServicesMessage status: success and historicalDataFound: false 1`] =
       </p>
     </React.Fragment>
   }
-  iconColor="subdued"
   title={
     <div>
       Looks like you don't have any APM services installed. Let's add some!
@@ -92,7 +89,6 @@ exports[`NoServicesMessage status: success and historicalDataFound: false 1`] =
 
 exports[`NoServicesMessage status: success and historicalDataFound: true 1`] = `
 <EuiEmptyPrompt
-  iconColor="subdued"
   title={
     <div>
       No services found
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/DottedKeyValueTable/__test__/DottedKeyValueTable.test.tsx b/x-pack/legacy/plugins/apm/public/components/shared/DottedKeyValueTable/__test__/DottedKeyValueTable.test.tsx
index deecd955293bb4..aebc86352a7745 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/DottedKeyValueTable/__test__/DottedKeyValueTable.test.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/shared/DottedKeyValueTable/__test__/DottedKeyValueTable.test.tsx
@@ -104,4 +104,31 @@ describe('DottedKeyValueTable', () => {
       'top.name.last'
     ]);
   });
+
+  it('should not add 0 sufix if value is an array with one element', () => {
+    const data = {
+      a: {
+        b: {
+          c1: ['foo', 'bar'],
+          c2: ['foo']
+        }
+      },
+      b: {
+        c: ['foo']
+      },
+      c: {
+        d: ['foo', 'bar']
+      }
+    };
+    const output = render(<DottedKeyValueTable data={data} maxDepth={5} />);
+
+    expect(getKeys(output)).toEqual([
+      'a.b.c1.0',
+      'a.b.c1.1',
+      'a.b.c2',
+      'b.c',
+      'c.d.0',
+      'c.d.1'
+    ]);
+  });
 });
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/DottedKeyValueTable/index.tsx b/x-pack/legacy/plugins/apm/public/components/shared/DottedKeyValueTable/index.tsx
index baeea829f401f2..674df14c62eb0b 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/DottedKeyValueTable/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/shared/DottedKeyValueTable/index.tsx
@@ -34,10 +34,12 @@ export function pathify(
   item: StringMap<any>,
   { maxDepth, parentKey = '', depth = 0 }: PathifyOptions
 ): PathifyResult {
+  const isArrayWithSingleValue = Array.isArray(item) && item.length === 1;
   return Object.keys(item)
     .sort()
     .reduce((pathified, key) => {
-      const currentKey = compact([parentKey, key]).join('.');
+      const childKey = isArrayWithSingleValue ? '' : key;
+      const currentKey = compact([parentKey, childKey]).join('.');
       if ((!maxDepth || depth + 1 <= maxDepth) && isObject(item[key])) {
         return {
           ...pathified,
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/Links/apm/ServiceNodeMetricOverviewLink.tsx b/x-pack/legacy/plugins/apm/public/components/shared/Links/apm/ServiceNodeMetricOverviewLink.tsx
new file mode 100644
index 00000000000000..925d85fa0663ed
--- /dev/null
+++ b/x-pack/legacy/plugins/apm/public/components/shared/Links/apm/ServiceNodeMetricOverviewLink.tsx
@@ -0,0 +1,41 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React from 'react';
+import { APMLink, APMLinkExtendProps } from './APMLink';
+import { useUrlParams } from '../../../../hooks/useUrlParams';
+import { pickKeys } from '../../../../utils/pickKeys';
+
+interface Props extends APMLinkExtendProps {
+  serviceName: string;
+  serviceNodeName: string;
+}
+
+const ServiceNodeMetricOverviewLink = ({
+  serviceName,
+  serviceNodeName,
+  ...rest
+}: Props) => {
+  const { urlParams } = useUrlParams();
+
+  const persistedFilters = pickKeys(
+    urlParams,
+    'host',
+    'containerId',
+    'podName'
+  );
+
+  return (
+    <APMLink
+      path={`/services/${serviceName}/nodes/${encodeURIComponent(
+        serviceNodeName
+      )}/metrics`}
+      query={persistedFilters}
+      {...rest}
+    />
+  );
+};
+
+export { ServiceNodeMetricOverviewLink };
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/Links/apm/ServiceNodeOverviewLink.tsx b/x-pack/legacy/plugins/apm/public/components/shared/Links/apm/ServiceNodeOverviewLink.tsx
new file mode 100644
index 00000000000000..10e55d3382448e
--- /dev/null
+++ b/x-pack/legacy/plugins/apm/public/components/shared/Links/apm/ServiceNodeOverviewLink.tsx
@@ -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 React from 'react';
+import { APMLink, APMLinkExtendProps } from './APMLink';
+import { useUrlParams } from '../../../../hooks/useUrlParams';
+import { pickKeys } from '../../../../utils/pickKeys';
+
+interface Props extends APMLinkExtendProps {
+  serviceName: string;
+}
+
+const ServiceNodeOverviewLink = ({ serviceName, ...rest }: Props) => {
+  const { urlParams } = useUrlParams();
+
+  const persistedFilters = pickKeys(
+    urlParams,
+    'host',
+    'containerId',
+    'podName'
+  );
+
+  return (
+    <APMLink
+      path={`/services/${serviceName}/nodes`}
+      query={persistedFilters}
+      {...rest}
+    />
+  );
+};
+
+export { ServiceNodeOverviewLink };
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/Summary/HttpInfoSummaryItem/HttpInfoSummaryItem.test.tsx b/x-pack/legacy/plugins/apm/public/components/shared/Summary/HttpInfoSummaryItem/__test__/HttpInfoSummaryItem.test.tsx
similarity index 75%
rename from x-pack/legacy/plugins/apm/public/components/shared/Summary/HttpInfoSummaryItem/HttpInfoSummaryItem.test.tsx
rename to x-pack/legacy/plugins/apm/public/components/shared/Summary/HttpInfoSummaryItem/__test__/HttpInfoSummaryItem.test.tsx
index e87c16b9fd100a..7edc7eab3b3851 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/Summary/HttpInfoSummaryItem/HttpInfoSummaryItem.test.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/shared/Summary/HttpInfoSummaryItem/__test__/HttpInfoSummaryItem.test.tsx
@@ -6,16 +6,16 @@
 
 import React from 'react';
 import { shallow, mount } from 'enzyme';
-import { palettes } from '@elastic/eui';
-import { HttpInfoSummaryItem } from './';
-import * as exampleTransactions from '../__fixtures__/transactions';
+import theme from '@elastic/eui/dist/eui_theme_light.json';
+import { HttpInfoSummaryItem } from '../';
+import * as exampleTransactions from '../../__fixtures__/transactions';
 
 describe('HttpInfoSummaryItem', () => {
   describe('render', () => {
     const transaction = exampleTransactions.httpOk;
     const url = 'https://example.com';
     const method = 'get';
-    const props = { transaction, url, method, status: 200 };
+    const props = { transaction, url, method, status: 100 };
 
     it('renders', () => {
       expect(() =>
@@ -23,12 +23,23 @@ describe('HttpInfoSummaryItem', () => {
       ).not.toThrowError();
     });
 
-    describe('with status code 200', () => {
+    describe('with status code 100', () => {
       it('shows a success color', () => {
         const wrapper = mount(<HttpInfoSummaryItem {...props} />);
 
         expect(wrapper.find('HttpStatusBadge EuiBadge').prop('color')).toEqual(
-          palettes.euiPaletteForStatus.colors[0]
+          theme.euiColorDarkShade
+        );
+      });
+    });
+
+    describe('with status code 200', () => {
+      it('shows a success color', () => {
+        const p = { ...props, status: 200 };
+        const wrapper = mount(<HttpInfoSummaryItem {...p} />);
+
+        expect(wrapper.find('HttpStatusBadge EuiBadge').prop('color')).toEqual(
+          theme.euiColorSecondary
         );
       });
     });
@@ -40,7 +51,7 @@ describe('HttpInfoSummaryItem', () => {
         const wrapper = mount(<HttpInfoSummaryItem {...p} />);
 
         expect(wrapper.find('HttpStatusBadge EuiBadge').prop('color')).toEqual(
-          palettes.euiPaletteForStatus.colors[4]
+          theme.euiColorDarkShade
         );
       });
     });
@@ -52,7 +63,7 @@ describe('HttpInfoSummaryItem', () => {
         const wrapper = mount(<HttpInfoSummaryItem {...p} />);
 
         expect(wrapper.find('HttpStatusBadge EuiBadge').prop('color')).toEqual(
-          palettes.euiPaletteForStatus.colors[9]
+          theme.euiColorWarning
         );
       });
     });
@@ -64,7 +75,7 @@ describe('HttpInfoSummaryItem', () => {
         const wrapper = mount(<HttpInfoSummaryItem {...p} />);
 
         expect(wrapper.find('HttpStatusBadge EuiBadge').prop('color')).toEqual(
-          palettes.euiPaletteForStatus.colors[9]
+          theme.euiColorDanger
         );
       });
     });
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/Summary/HttpInfoSummaryItem/index.tsx b/x-pack/legacy/plugins/apm/public/components/shared/Summary/HttpInfoSummaryItem/index.tsx
index d433dae75a1aee..5396b57fc27a6f 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/Summary/HttpInfoSummaryItem/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/shared/Summary/HttpInfoSummaryItem/index.tsx
@@ -6,24 +6,26 @@
 
 import React from 'react';
 import { EuiToolTip, EuiBadge } from '@elastic/eui';
+import theme from '@elastic/eui/dist/eui_theme_light.json';
 import { i18n } from '@kbn/i18n';
 import styled from 'styled-components';
-import { palettes } from '@elastic/eui';
 import { units, px, truncate, unit } from '../../../../style/variables';
 import { statusCodes } from './statusCodes';
 
-const statusColors = {
-  success: palettes.euiPaletteForStatus.colors[0],
-  warning: palettes.euiPaletteForStatus.colors[4],
-  error: palettes.euiPaletteForStatus.colors[9]
-};
+const {
+  euiColorDarkShade,
+  euiColorSecondary,
+  euiColorWarning,
+  euiColorDanger
+} = theme;
 
 function getStatusColor(status: number) {
   const colors: { [key: string]: string } = {
-    2: statusColors.success,
-    3: statusColors.warning,
-    4: statusColors.error,
-    5: statusColors.error
+    1: euiColorDarkShade,
+    2: euiColorSecondary,
+    3: euiColorDarkShade,
+    4: euiColorWarning,
+    5: euiColorDanger
   };
 
   return colors[status.toString().substr(0, 1)] || 'default';
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownHeader.tsx b/x-pack/legacy/plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownHeader.tsx
index e4519a82f95567..ce39003da21f84 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownHeader.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownHeader.tsx
@@ -9,8 +9,6 @@ import {
   EuiTitle,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiSpacer,
-  EuiBetaBadge,
   EuiButtonEmpty
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -24,28 +22,9 @@ const TransactionBreakdownHeader: React.FC<{
       <EuiFlexItem>
         <EuiTitle size="xs">
           <h3>
-            <EuiFlexGroup alignItems="center" gutterSize="s">
-              <EuiFlexItem grow={false}>
-                {i18n.translate('xpack.apm.transactionBreakdown.chartTitle', {
-                  defaultMessage: 'Time spent by span type'
-                })}
-              </EuiFlexItem>
-              <EuiSpacer size="xs" />
-              <EuiFlexItem grow={false}>
-                <EuiBetaBadge
-                  label={i18n.translate('xpack.apm.ui.betaBadgeLabel', {
-                    defaultMessage: 'Beta'
-                  })}
-                  tooltipContent={i18n.translate(
-                    'xpack.apm.ui.betaBadgeTooltipTitle',
-                    {
-                      defaultMessage:
-                        'This feature is still in development. If you have feedback, please reach out in our Discuss forum.'
-                    }
-                  )}
-                />
-              </EuiFlexItem>
-            </EuiFlexGroup>
+            {i18n.translate('xpack.apm.transactionBreakdown.chartTitle', {
+              defaultMessage: 'Time spent by span type'
+            })}
           </h3>
         </EuiTitle>
       </EuiFlexItem>
diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceMetrics/MetricsChart.tsx b/x-pack/legacy/plugins/apm/public/components/shared/charts/MetricsChart/index.tsx
similarity index 84%
rename from x-pack/legacy/plugins/apm/public/components/app/ServiceMetrics/MetricsChart.tsx
rename to x-pack/legacy/plugins/apm/public/components/shared/charts/MetricsChart/index.tsx
index 526d77ca845373..9a12a704af9684 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/ServiceMetrics/MetricsChart.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/shared/charts/MetricsChart/index.tsx
@@ -5,18 +5,18 @@
  */
 import { EuiTitle } from '@elastic/eui';
 import React from 'react';
-import { GenericMetricsChart } from '../../../../server/lib/metrics/transform_metrics_chart';
+import { GenericMetricsChart } from '../../../../../server/lib/metrics/transform_metrics_chart';
 // @ts-ignore
-import CustomPlot from '../../shared/charts/CustomPlot';
+import CustomPlot from '../CustomPlot';
 import {
   asDynamicBytes,
   asPercent,
   getFixedByteFormatter,
   asDecimal
-} from '../../../utils/formatters';
-import { Coordinate } from '../../../../typings/timeseries';
-import { isValidCoordinateValue } from '../../../utils/isValidCoordinateValue';
-import { useChartsSync } from '../../../hooks/useChartsSync';
+} from '../../../../utils/formatters';
+import { Coordinate } from '../../../../../typings/timeseries';
+import { isValidCoordinateValue } from '../../../../utils/isValidCoordinateValue';
+import { useChartsSync } from '../../../../hooks/useChartsSync';
 
 interface Props {
   start: number | string | undefined;
diff --git a/x-pack/legacy/plugins/apm/public/context/UrlParamsContext/helpers.ts b/x-pack/legacy/plugins/apm/public/context/UrlParamsContext/helpers.ts
index b1c6f6d5266370..909b632ee1c254 100644
--- a/x-pack/legacy/plugins/apm/public/context/UrlParamsContext/helpers.ts
+++ b/x-pack/legacy/plugins/apm/public/context/UrlParamsContext/helpers.ts
@@ -61,10 +61,17 @@ export function getPathParams(pathname: string = '') {
   const pageName = paths[0];
 
   // TODO: use react router's real match params instead of guessing the path order
+
   switch (pageName) {
     case 'services':
-      const servicePageName = paths[2];
+      let servicePageName = paths[2];
       const serviceName = paths[1];
+      const serviceNodeName = paths[3];
+
+      if (servicePageName === 'nodes' && paths.length > 3) {
+        servicePageName = 'metrics';
+      }
+
       switch (servicePageName) {
         case 'transactions':
           return {
@@ -80,8 +87,14 @@ export function getPathParams(pathname: string = '') {
         case 'metrics':
           return {
             processorEvent: 'metric',
+            serviceName,
+            serviceNodeName
+          };
+        case 'nodes':
+          return {
             serviceName
           };
+
         default:
           return {
             processorEvent: 'transaction'
diff --git a/x-pack/legacy/plugins/apm/public/context/UrlParamsContext/resolveUrlParams.ts b/x-pack/legacy/plugins/apm/public/context/UrlParamsContext/resolveUrlParams.ts
index 06abf9c0945b75..febe0691d7c1ce 100644
--- a/x-pack/legacy/plugins/apm/public/context/UrlParamsContext/resolveUrlParams.ts
+++ b/x-pack/legacy/plugins/apm/public/context/UrlParamsContext/resolveUrlParams.ts
@@ -26,9 +26,12 @@ type TimeUrlParams = Pick<
 >;
 
 export function resolveUrlParams(location: Location, state: TimeUrlParams) {
-  const { processorEvent, serviceName, errorGroupId } = getPathParams(
-    location.pathname
-  );
+  const {
+    processorEvent,
+    serviceName,
+    serviceNodeName,
+    errorGroupId
+  } = getPathParams(location.pathname);
 
   const query = toQuery(location.search);
 
@@ -83,6 +86,9 @@ export function resolveUrlParams(location: Location, state: TimeUrlParams) {
     processorEvent,
     serviceName,
     errorGroupId,
+    serviceNodeName: serviceNodeName
+      ? decodeURIComponent(serviceNodeName)
+      : serviceNodeName,
 
     // ui filters
     environment,
diff --git a/x-pack/legacy/plugins/apm/public/context/UrlParamsContext/types.ts b/x-pack/legacy/plugins/apm/public/context/UrlParamsContext/types.ts
index 979fd3e8d60bdd..ca4e0413aa4bfc 100644
--- a/x-pack/legacy/plugins/apm/public/context/UrlParamsContext/types.ts
+++ b/x-pack/legacy/plugins/apm/public/context/UrlParamsContext/types.ts
@@ -28,4 +28,5 @@ export type IUrlParams = {
   waterfallItemId?: string;
   page?: number;
   pageSize?: number;
+  serviceNodeName?: string;
 } & Partial<Record<LocalUIFilterName, string>>;
diff --git a/x-pack/legacy/plugins/apm/public/hooks/useAgentName.ts b/x-pack/legacy/plugins/apm/public/hooks/useAgentName.ts
new file mode 100644
index 00000000000000..a13b0d1ea0973b
--- /dev/null
+++ b/x-pack/legacy/plugins/apm/public/hooks/useAgentName.ts
@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { useFetcher } from './useFetcher';
+import { callApmApi } from '../services/rest/callApmApi';
+import { useUrlParams } from './useUrlParams';
+
+export function useAgentName() {
+  const { urlParams } = useUrlParams();
+  const { start, end, serviceName } = urlParams;
+
+  const { data: agentName, error, status } = useFetcher(() => {
+    if (serviceName && start && end) {
+      return callApmApi({
+        pathname: '/api/apm/services/{serviceName}/agent_name',
+        params: {
+          path: { serviceName },
+          query: { start, end }
+        }
+      }).then(res => res.agentName);
+    }
+  }, [serviceName, start, end]);
+
+  return {
+    agentName,
+    status,
+    error
+  };
+}
diff --git a/x-pack/legacy/plugins/apm/public/hooks/useServiceMetricCharts.ts b/x-pack/legacy/plugins/apm/public/hooks/useServiceMetricCharts.ts
index 05841f6b2d4fc6..e67b0540235f99 100644
--- a/x-pack/legacy/plugins/apm/public/hooks/useServiceMetricCharts.ts
+++ b/x-pack/legacy/plugins/apm/public/hooks/useServiceMetricCharts.ts
@@ -16,7 +16,7 @@ const INITIAL_DATA: MetricsChartsByAgentAPIResponse = {
 
 export function useServiceMetricCharts(
   urlParams: IUrlParams,
-  agentName: string
+  agentName?: string
 ) {
   const { serviceName, start, end } = urlParams;
   const uiFilters = useUiFilters(urlParams);
diff --git a/x-pack/legacy/plugins/apm/server/lib/helpers/setup_request.test.ts b/x-pack/legacy/plugins/apm/server/lib/helpers/setup_request.test.ts
index bd45cec316dfc7..91809fbaede032 100644
--- a/x-pack/legacy/plugins/apm/server/lib/helpers/setup_request.test.ts
+++ b/x-pack/legacy/plugins/apm/server/lib/helpers/setup_request.test.ts
@@ -6,6 +6,7 @@
 
 import { Legacy } from 'kibana';
 import { setupRequest } from './setup_request';
+import { uiSettingsServiceMock } from '../../../../../../../src/legacy/ui/ui_settings/ui_settings_service.mock';
 
 function getMockRequest() {
   const callWithRequestSpy = jest.fn();
@@ -125,8 +126,10 @@ describe('setupRequest', () => {
     it('should set `ignore_throttled=true` if `includeFrozen=false`', async () => {
       const { mockRequest, callWithRequestSpy } = getMockRequest();
 
+      const uiSettingsService = uiSettingsServiceMock.create();
       // mock includeFrozen to return false
-      mockRequest.getUiSettingsService = () => ({ get: async () => false });
+      uiSettingsService.get.mockResolvedValue(false);
+      mockRequest.getUiSettingsService = () => uiSettingsService;
       const { client } = await setupRequest(mockRequest);
       await client.search({});
       const params = callWithRequestSpy.mock.calls[0][2];
@@ -136,8 +139,10 @@ describe('setupRequest', () => {
     it('should set `ignore_throttled=false` if `includeFrozen=true`', async () => {
       const { mockRequest, callWithRequestSpy } = getMockRequest();
 
+      const uiSettingsService = uiSettingsServiceMock.create();
       // mock includeFrozen to return true
-      mockRequest.getUiSettingsService = () => ({ get: async () => true });
+      uiSettingsService.get.mockResolvedValue(true);
+      mockRequest.getUiSettingsService = () => uiSettingsService;
       const { client } = await setupRequest(mockRequest);
       await client.search({});
       const params = callWithRequestSpy.mock.calls[0][2];
diff --git a/x-pack/legacy/plugins/apm/server/lib/metrics/by_agent/java/heap_memory/index.ts b/x-pack/legacy/plugins/apm/server/lib/metrics/by_agent/java/heap_memory/index.ts
index 48c7ee29a16a32..ca98a486b3a588 100644
--- a/x-pack/legacy/plugins/apm/server/lib/metrics/by_agent/java/heap_memory/index.ts
+++ b/x-pack/legacy/plugins/apm/server/lib/metrics/by_agent/java/heap_memory/index.ts
@@ -50,10 +50,15 @@ const chartBase: ChartBase = {
   series
 };
 
-export async function getHeapMemoryChart(setup: Setup, serviceName: string) {
+export async function getHeapMemoryChart(
+  setup: Setup,
+  serviceName: string,
+  serviceNodeName?: string
+) {
   return fetchAndTransformMetrics({
     setup,
     serviceName,
+    serviceNodeName,
     chartBase,
     aggs: {
       heapMemoryMax: { avg: { field: METRIC_JAVA_HEAP_MEMORY_MAX } },
diff --git a/x-pack/legacy/plugins/apm/server/lib/metrics/by_agent/java/index.ts b/x-pack/legacy/plugins/apm/server/lib/metrics/by_agent/java/index.ts
index 9fc9f3029da361..55fcdd1c284ecd 100644
--- a/x-pack/legacy/plugins/apm/server/lib/metrics/by_agent/java/index.ts
+++ b/x-pack/legacy/plugins/apm/server/lib/metrics/by_agent/java/index.ts
@@ -11,13 +11,17 @@ import { getThreadCountChart } from './thread_count';
 import { getCPUChartData } from '../shared/cpu';
 import { getMemoryChartData } from '../shared/memory';
 
-export async function getJavaMetricsCharts(setup: Setup, serviceName: string) {
+export async function getJavaMetricsCharts(
+  setup: Setup,
+  serviceName: string,
+  serviceNodeName?: string
+) {
   const charts = await Promise.all([
-    getCPUChartData(setup, serviceName),
-    getMemoryChartData(setup, serviceName),
-    getHeapMemoryChart(setup, serviceName),
-    getNonHeapMemoryChart(setup, serviceName),
-    getThreadCountChart(setup, serviceName)
+    getCPUChartData(setup, serviceName, serviceNodeName),
+    getMemoryChartData(setup, serviceName, serviceNodeName),
+    getHeapMemoryChart(setup, serviceName, serviceNodeName),
+    getNonHeapMemoryChart(setup, serviceName, serviceNodeName),
+    getThreadCountChart(setup, serviceName, serviceNodeName)
   ]);
 
   return { charts };
diff --git a/x-pack/legacy/plugins/apm/server/lib/metrics/by_agent/java/non_heap_memory/index.ts b/x-pack/legacy/plugins/apm/server/lib/metrics/by_agent/java/non_heap_memory/index.ts
index 446d9258b43105..899852e1d5659b 100644
--- a/x-pack/legacy/plugins/apm/server/lib/metrics/by_agent/java/non_heap_memory/index.ts
+++ b/x-pack/legacy/plugins/apm/server/lib/metrics/by_agent/java/non_heap_memory/index.ts
@@ -47,10 +47,15 @@ const chartBase: ChartBase = {
   series
 };
 
-export async function getNonHeapMemoryChart(setup: Setup, serviceName: string) {
+export async function getNonHeapMemoryChart(
+  setup: Setup,
+  serviceName: string,
+  serviceNodeName?: string
+) {
   return fetchAndTransformMetrics({
     setup,
     serviceName,
+    serviceNodeName,
     chartBase,
     aggs: {
       nonHeapMemoryMax: { avg: { field: METRIC_JAVA_NON_HEAP_MEMORY_MAX } },
diff --git a/x-pack/legacy/plugins/apm/server/lib/metrics/by_agent/java/thread_count/index.ts b/x-pack/legacy/plugins/apm/server/lib/metrics/by_agent/java/thread_count/index.ts
index 5f53cde44d6224..eb0984d7aaf59e 100644
--- a/x-pack/legacy/plugins/apm/server/lib/metrics/by_agent/java/thread_count/index.ts
+++ b/x-pack/legacy/plugins/apm/server/lib/metrics/by_agent/java/thread_count/index.ts
@@ -39,10 +39,15 @@ const chartBase: ChartBase = {
   series
 };
 
-export async function getThreadCountChart(setup: Setup, serviceName: string) {
+export async function getThreadCountChart(
+  setup: Setup,
+  serviceName: string,
+  serviceNodeName?: string
+) {
   return fetchAndTransformMetrics({
     setup,
     serviceName,
+    serviceNodeName,
     chartBase,
     aggs: {
       threadCount: { avg: { field: METRIC_JAVA_THREAD_COUNT } },
diff --git a/x-pack/legacy/plugins/apm/server/lib/metrics/by_agent/shared/cpu/index.ts b/x-pack/legacy/plugins/apm/server/lib/metrics/by_agent/shared/cpu/index.ts
index 67f69456e9e1b3..5f4ad0af474c19 100644
--- a/x-pack/legacy/plugins/apm/server/lib/metrics/by_agent/shared/cpu/index.ts
+++ b/x-pack/legacy/plugins/apm/server/lib/metrics/by_agent/shared/cpu/index.ts
@@ -51,10 +51,15 @@ const chartBase: ChartBase = {
   series
 };
 
-export async function getCPUChartData(setup: Setup, serviceName: string) {
+export async function getCPUChartData(
+  setup: Setup,
+  serviceName: string,
+  serviceNodeName?: string
+) {
   const metricsChart = await fetchAndTransformMetrics({
     setup,
     serviceName,
+    serviceNodeName,
     chartBase,
     aggs: {
       systemCPUAverage: { avg: { field: METRIC_SYSTEM_CPU_PERCENT } },
diff --git a/x-pack/legacy/plugins/apm/server/lib/metrics/by_agent/shared/memory/index.ts b/x-pack/legacy/plugins/apm/server/lib/metrics/by_agent/shared/memory/index.ts
index e372a62a7ce05a..bf0f21dcb3d423 100644
--- a/x-pack/legacy/plugins/apm/server/lib/metrics/by_agent/shared/memory/index.ts
+++ b/x-pack/legacy/plugins/apm/server/lib/metrics/by_agent/shared/memory/index.ts
@@ -44,10 +44,15 @@ const percentUsedScript = {
   source: `1 - doc['${METRIC_SYSTEM_FREE_MEMORY}'] / doc['${METRIC_SYSTEM_TOTAL_MEMORY}']`
 };
 
-export async function getMemoryChartData(setup: Setup, serviceName: string) {
+export async function getMemoryChartData(
+  setup: Setup,
+  serviceName: string,
+  serviceNodeName?: string
+) {
   return fetchAndTransformMetrics({
     setup,
     serviceName,
+    serviceNodeName,
     chartBase,
     aggs: {
       memoryUsedAvg: { avg: { script: percentUsedScript } },
diff --git a/x-pack/legacy/plugins/apm/server/lib/metrics/fetch_and_transform_metrics.ts b/x-pack/legacy/plugins/apm/server/lib/metrics/fetch_and_transform_metrics.ts
index 89b263612359e2..9837fb21b6da0f 100644
--- a/x-pack/legacy/plugins/apm/server/lib/metrics/fetch_and_transform_metrics.ts
+++ b/x-pack/legacy/plugins/apm/server/lib/metrics/fetch_and_transform_metrics.ts
@@ -32,19 +32,25 @@ interface Filter {
 export async function fetchAndTransformMetrics<T extends Aggs>({
   setup,
   serviceName,
+  serviceNodeName,
   chartBase,
   aggs,
   additionalFilters = []
 }: {
   setup: Setup;
   serviceName: string;
+  serviceNodeName?: string;
   chartBase: ChartBase;
   aggs: T;
   additionalFilters?: Filter[];
 }) {
   const { start, end, client } = setup;
 
-  const projection = getMetricsProjection({ setup, serviceName });
+  const projection = getMetricsProjection({
+    setup,
+    serviceName,
+    serviceNodeName
+  });
 
   const params = mergeProjection(projection, {
     body: {
diff --git a/x-pack/legacy/plugins/apm/server/lib/metrics/get_metrics_chart_data_by_agent.ts b/x-pack/legacy/plugins/apm/server/lib/metrics/get_metrics_chart_data_by_agent.ts
index 02b94c515d841f..34c8b2f867fbb1 100644
--- a/x-pack/legacy/plugins/apm/server/lib/metrics/get_metrics_chart_data_by_agent.ts
+++ b/x-pack/legacy/plugins/apm/server/lib/metrics/get_metrics_chart_data_by_agent.ts
@@ -15,15 +15,17 @@ export interface MetricsChartsByAgentAPIResponse {
 export async function getMetricsChartDataByAgent({
   setup,
   serviceName,
+  serviceNodeName,
   agentName
 }: {
   setup: Setup;
   serviceName: string;
+  serviceNodeName?: string;
   agentName: string;
 }): Promise<MetricsChartsByAgentAPIResponse> {
   switch (agentName) {
     case 'java': {
-      return getJavaMetricsCharts(setup, serviceName);
+      return getJavaMetricsCharts(setup, serviceName, serviceNodeName);
     }
 
     default: {
diff --git a/x-pack/legacy/plugins/apm/server/lib/service_nodes/__snapshots__/queries.test.ts.snap b/x-pack/legacy/plugins/apm/server/lib/service_nodes/__snapshots__/queries.test.ts.snap
new file mode 100644
index 00000000000000..d20adeba1bcc76
--- /dev/null
+++ b/x-pack/legacy/plugins/apm/server/lib/service_nodes/__snapshots__/queries.test.ts.snap
@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`service node queries fetches services nodes 1`] = `
+Object {
+  "body": Object {
+    "aggs": Object {
+      "nodes": Object {
+        "aggs": Object {
+          "cpu": Object {
+            "avg": Object {
+              "field": "system.process.cpu.total.norm.pct",
+            },
+          },
+          "heapMemory": Object {
+            "avg": Object {
+              "field": "jvm.memory.heap.used",
+            },
+          },
+          "nonHeapMemory": Object {
+            "avg": Object {
+              "field": "jvm.memory.non_heap.used",
+            },
+          },
+          "threadCount": Object {
+            "max": Object {
+              "field": "jvm.thread.count",
+            },
+          },
+        },
+        "terms": Object {
+          "field": "service.node.name",
+          "size": 10000,
+        },
+      },
+    },
+    "query": Object {
+      "bool": Object {
+        "filter": Array [
+          Object {
+            "term": Object {
+              "service.name": "foo",
+            },
+          },
+          Object {
+            "term": Object {
+              "processor.event": "metric",
+            },
+          },
+          Object {
+            "range": Object {
+              "@timestamp": Object {
+                "format": "epoch_millis",
+                "gte": 1528113600000,
+                "lte": 1528977600000,
+              },
+            },
+          },
+          Object {
+            "term": Object {
+              "service.environment": "prod",
+            },
+          },
+        ],
+      },
+    },
+  },
+  "index": "myIndex",
+}
+`;
diff --git a/x-pack/legacy/plugins/apm/server/lib/service_nodes/index.ts b/x-pack/legacy/plugins/apm/server/lib/service_nodes/index.ts
new file mode 100644
index 00000000000000..bef22584d8a466
--- /dev/null
+++ b/x-pack/legacy/plugins/apm/server/lib/service_nodes/index.ts
@@ -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 { Setup } from '../helpers/setup_request';
+import { getServiceNodesProjection } from '../../../common/projections/service_nodes';
+import { mergeProjection } from '../../../common/projections/util/merge_projection';
+import {
+  METRIC_PROCESS_CPU_PERCENT,
+  METRIC_JAVA_THREAD_COUNT,
+  METRIC_JAVA_HEAP_MEMORY_USED,
+  METRIC_JAVA_NON_HEAP_MEMORY_USED
+} from '../../../common/elasticsearch_fieldnames';
+
+const getServiceNodes = async ({
+  setup,
+  serviceName
+}: {
+  setup: Setup;
+  serviceName: string;
+}) => {
+  const { client } = setup;
+
+  const projection = mergeProjection(
+    getServiceNodesProjection({ setup, serviceName }),
+    {
+      body: {
+        aggs: {
+          nodes: {
+            terms: {
+              size: 10000
+            },
+            aggs: {
+              cpu: {
+                avg: {
+                  field: METRIC_PROCESS_CPU_PERCENT
+                }
+              },
+              heapMemory: {
+                avg: {
+                  field: METRIC_JAVA_HEAP_MEMORY_USED
+                }
+              },
+              nonHeapMemory: {
+                avg: {
+                  field: METRIC_JAVA_NON_HEAP_MEMORY_USED
+                }
+              },
+              threadCount: {
+                max: {
+                  field: METRIC_JAVA_THREAD_COUNT
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  );
+
+  const response = await client.search(projection);
+
+  if (!response.aggregations) {
+    return [];
+  }
+
+  return response.aggregations.nodes.buckets.map(bucket => {
+    return {
+      name: bucket.key,
+      cpu: bucket.cpu.value,
+      heapMemory: bucket.heapMemory.value,
+      nonHeapMemory: bucket.nonHeapMemory.value,
+      threadCount: bucket.threadCount.value
+    };
+  });
+};
+
+export { getServiceNodes };
diff --git a/x-pack/legacy/plugins/apm/server/lib/service_nodes/queries.test.ts b/x-pack/legacy/plugins/apm/server/lib/service_nodes/queries.test.ts
new file mode 100644
index 00000000000000..b5b7e492386f4e
--- /dev/null
+++ b/x-pack/legacy/plugins/apm/server/lib/service_nodes/queries.test.ts
@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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 { getServiceNodes } from './';
+import {
+  SearchParamsMock,
+  inspectSearchParams
+} from '../../../public/utils/testHelpers';
+
+describe('service node queries', () => {
+  let mock: SearchParamsMock;
+
+  afterEach(() => {
+    mock.teardown();
+  });
+
+  it('fetches services nodes', async () => {
+    mock = await inspectSearchParams(setup =>
+      getServiceNodes({ setup, serviceName: 'foo' })
+    );
+
+    expect(mock.params).toMatchSnapshot();
+  });
+});
diff --git a/x-pack/legacy/plugins/apm/server/lib/services/get_service_node_metadata.ts b/x-pack/legacy/plugins/apm/server/lib/services/get_service_node_metadata.ts
new file mode 100644
index 00000000000000..14bad7151757d3
--- /dev/null
+++ b/x-pack/legacy/plugins/apm/server/lib/services/get_service_node_metadata.ts
@@ -0,0 +1,69 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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 { idx } from '@kbn/elastic-idx';
+import { Setup } from '../helpers/setup_request';
+import {
+  HOST_NAME,
+  SERVICE_NAME,
+  SERVICE_NODE_NAME,
+  CONTAINER_ID,
+  PROCESSOR_EVENT
+} from '../../../common/elasticsearch_fieldnames';
+import { NOT_AVAILABLE_LABEL } from '../../../common/i18n';
+
+export async function getServiceNodeMetadata({
+  serviceName,
+  serviceNodeName,
+  setup
+}: {
+  serviceName: string;
+  serviceNodeName: string;
+  setup: Setup;
+}) {
+  const { client, config } = setup;
+
+  const query = {
+    index: config.get<string>('apm_oss.metricsIndices'),
+    body: {
+      size: 0,
+      query: {
+        bool: {
+          filter: [
+            { term: { [PROCESSOR_EVENT]: 'metric' } },
+            { term: { [SERVICE_NAME]: serviceName } },
+            { term: { [SERVICE_NODE_NAME]: serviceNodeName } }
+          ]
+        }
+      },
+      aggs: {
+        host: {
+          terms: {
+            field: HOST_NAME,
+            size: 1
+          }
+        },
+        containerId: {
+          terms: {
+            field: CONTAINER_ID,
+            size: 1
+          }
+        }
+      }
+    }
+  };
+
+  const response = await client.search(query);
+
+  return {
+    host:
+      idx(response, _ => _.aggregations.host.buckets[0].key) ||
+      NOT_AVAILABLE_LABEL,
+    containerId:
+      idx(response, _ => _.aggregations.containerId.buckets[0].key) ||
+      NOT_AVAILABLE_LABEL
+  };
+}
diff --git a/x-pack/legacy/plugins/apm/server/lib/transactions/__snapshots__/queries.test.ts.snap b/x-pack/legacy/plugins/apm/server/lib/transactions/__snapshots__/queries.test.ts.snap
index cdc473b567ea8a..3d485e39dbbbfd 100644
--- a/x-pack/legacy/plugins/apm/server/lib/transactions/__snapshots__/queries.test.ts.snap
+++ b/x-pack/legacy/plugins/apm/server/lib/transactions/__snapshots__/queries.test.ts.snap
@@ -151,6 +151,11 @@ Object {
               "transaction.type": "bar",
             },
           },
+          Object {
+            "term": Object {
+              "processor.event": "metric",
+            },
+          },
           Object {
             "range": Object {
               "@timestamp": Object {
@@ -281,6 +286,11 @@ Object {
               "transaction.type": "bar",
             },
           },
+          Object {
+            "term": Object {
+              "processor.event": "metric",
+            },
+          },
           Object {
             "range": Object {
               "@timestamp": Object {
diff --git a/x-pack/legacy/plugins/apm/server/lib/transactions/breakdown/index.ts b/x-pack/legacy/plugins/apm/server/lib/transactions/breakdown/index.ts
index 9aac9761df86c2..1d120e82bc6a2e 100644
--- a/x-pack/legacy/plugins/apm/server/lib/transactions/breakdown/index.ts
+++ b/x-pack/legacy/plugins/apm/server/lib/transactions/breakdown/index.ts
@@ -13,7 +13,8 @@ import {
   SPAN_SELF_TIME_SUM,
   TRANSACTION_TYPE,
   TRANSACTION_NAME,
-  TRANSACTION_BREAKDOWN_COUNT
+  TRANSACTION_BREAKDOWN_COUNT,
+  PROCESSOR_EVENT
 } from '../../../../common/elasticsearch_fieldnames';
 import { PromiseReturnType } from '../../../../typings/common';
 import { Setup } from '../../helpers/setup_request';
@@ -82,6 +83,7 @@ export async function getTransactionBreakdown({
   const filters = [
     { term: { [SERVICE_NAME]: serviceName } },
     { term: { [TRANSACTION_TYPE]: transactionType } },
+    { term: { [PROCESSOR_EVENT]: 'metric' } },
     { range: rangeFilter(start, end) },
     ...uiFiltersES
   ];
diff --git a/x-pack/legacy/plugins/apm/server/routes/create_apm_api.ts b/x-pack/legacy/plugins/apm/server/routes/create_apm_api.ts
index b286026fae1f6c..bc4fb770844386 100644
--- a/x-pack/legacy/plugins/apm/server/routes/create_apm_api.ts
+++ b/x-pack/legacy/plugins/apm/server/routes/create_apm_api.ts
@@ -12,7 +12,8 @@ import {
 import {
   serviceAgentNameRoute,
   serviceTransactionTypesRoute,
-  servicesRoute
+  servicesRoute,
+  serviceNodeMetadataRoute
 } from './services';
 import {
   agentConfigurationRoute,
@@ -24,6 +25,7 @@ import {
   updateAgentConfigurationRoute
 } from './settings';
 import { metricsChartsRoute } from './metrics';
+import { serviceNodesRoute } from './service_nodes';
 import { tracesRoute, tracesByIdRoute } from './traces';
 import {
   transactionGroupsBreakdownRoute,
@@ -39,6 +41,7 @@ import {
   tracesLocalFiltersRoute,
   transactionGroupsLocalFiltersRoute,
   transactionsLocalFiltersRoute,
+  serviceNodesLocalFiltersRoute,
   uiFiltersEnvironmentsRoute
 } from './ui_filters';
 import { createApi } from './create_api';
@@ -49,10 +52,10 @@ const createApmApi = () => {
     .add(errorDistributionRoute)
     .add(errorGroupsRoute)
     .add(errorsRoute)
-    .add(metricsChartsRoute)
     .add(serviceAgentNameRoute)
     .add(serviceTransactionTypesRoute)
     .add(servicesRoute)
+    .add(serviceNodeMetadataRoute)
     .add(agentConfigurationRoute)
     .add(agentConfigurationSearchRoute)
     .add(createAgentConfigurationRoute)
@@ -60,6 +63,8 @@ const createApmApi = () => {
     .add(listAgentConfigurationEnvironmentsRoute)
     .add(listAgentConfigurationServicesRoute)
     .add(updateAgentConfigurationRoute)
+    .add(metricsChartsRoute)
+    .add(serviceNodesRoute)
     .add(tracesRoute)
     .add(tracesByIdRoute)
     .add(transactionGroupsBreakdownRoute)
@@ -73,6 +78,7 @@ const createApmApi = () => {
     .add(tracesLocalFiltersRoute)
     .add(transactionGroupsLocalFiltersRoute)
     .add(transactionsLocalFiltersRoute)
+    .add(serviceNodesLocalFiltersRoute)
     .add(uiFiltersEnvironmentsRoute);
 
   return api;
diff --git a/x-pack/legacy/plugins/apm/server/routes/metrics.ts b/x-pack/legacy/plugins/apm/server/routes/metrics.ts
index 3bd8939a1f7d25..ef9145b3dcd4a0 100644
--- a/x-pack/legacy/plugins/apm/server/routes/metrics.ts
+++ b/x-pack/legacy/plugins/apm/server/routes/metrics.ts
@@ -20,6 +20,9 @@ export const metricsChartsRoute = createRoute(() => ({
       t.type({
         agentName: t.string
       }),
+      t.partial({
+        serviceNodeName: t.string
+      }),
       uiFiltersRt,
       rangeRt
     ])
@@ -27,11 +30,12 @@ export const metricsChartsRoute = createRoute(() => ({
   handler: async (req, { path, query }) => {
     const setup = await setupRequest(req);
     const { serviceName } = path;
-    const { agentName } = query;
+    const { agentName, serviceNodeName } = query;
     return await getMetricsChartDataByAgent({
       setup,
       serviceName,
-      agentName
+      agentName,
+      serviceNodeName
     });
   }
 }));
diff --git a/x-pack/legacy/plugins/apm/server/routes/service_nodes.ts b/x-pack/legacy/plugins/apm/server/routes/service_nodes.ts
new file mode 100644
index 00000000000000..a87ef7d8e58782
--- /dev/null
+++ b/x-pack/legacy/plugins/apm/server/routes/service_nodes.ts
@@ -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 * as t from 'io-ts';
+import { createRoute } from './create_route';
+import { setupRequest } from '../lib/helpers/setup_request';
+import { getServiceNodes } from '../lib/service_nodes';
+import { rangeRt, uiFiltersRt } from './default_api_types';
+
+export const serviceNodesRoute = createRoute(core => ({
+  path: '/api/apm/services/{serviceName}/serviceNodes',
+  params: {
+    path: t.type({
+      serviceName: t.string
+    }),
+    query: t.intersection([rangeRt, uiFiltersRt])
+  },
+  handler: async (req, { path, query }) => {
+    const setup = await setupRequest(req);
+    const { serviceName } = path;
+
+    return getServiceNodes({
+      setup,
+      serviceName
+    });
+  }
+}));
diff --git a/x-pack/legacy/plugins/apm/server/routes/services.ts b/x-pack/legacy/plugins/apm/server/routes/services.ts
index 0c1f54c661f32f..10e7c737f20d72 100644
--- a/x-pack/legacy/plugins/apm/server/routes/services.ts
+++ b/x-pack/legacy/plugins/apm/server/routes/services.ts
@@ -11,6 +11,7 @@ import { setupRequest } from '../lib/helpers/setup_request';
 import { getServiceAgentName } from '../lib/services/get_service_agent_name';
 import { getServices } from '../lib/services/get_services';
 import { getServiceTransactionTypes } from '../lib/services/get_service_transaction_types';
+import { getServiceNodeMetadata } from '../lib/services/get_service_node_metadata';
 import { createRoute } from './create_route';
 import { uiFiltersRt, rangeRt } from './default_api_types';
 
@@ -64,3 +65,18 @@ export const serviceTransactionTypesRoute = createRoute(() => ({
     return getServiceTransactionTypes(serviceName, setup);
   }
 }));
+
+export const serviceNodeMetadataRoute = createRoute(() => ({
+  path: '/api/apm/services/{serviceName}/node/{serviceNodeName}/metadata',
+  params: {
+    path: t.type({
+      serviceName: t.string,
+      serviceNodeName: t.string
+    })
+  },
+  handler: async (req, { path }) => {
+    const setup = await setupRequest(req);
+    const { serviceName, serviceNodeName } = path;
+    return getServiceNodeMetadata({ setup, serviceName, serviceNodeName });
+  }
+}));
diff --git a/x-pack/legacy/plugins/apm/server/routes/ui_filters.ts b/x-pack/legacy/plugins/apm/server/routes/ui_filters.ts
index 91f1e54d3c8099..9d36946d29cf65 100644
--- a/x-pack/legacy/plugins/apm/server/routes/ui_filters.ts
+++ b/x-pack/legacy/plugins/apm/server/routes/ui_filters.ts
@@ -23,6 +23,7 @@ import { getTransactionsProjection } from '../../common/projections/transactions
 import { createRoute } from './create_route';
 import { uiFiltersRt, rangeRt } from './default_api_types';
 import { jsonRt } from '../../common/runtime_types/json_rt';
+import { getServiceNodesProjection } from '../../common/projections/service_nodes';
 
 export const uiFiltersEnvironmentsRoute = createRoute(() => ({
   path: '/api/apm/ui_filters/environments',
@@ -169,15 +170,21 @@ export const transactionsLocalFiltersRoute = createLocalFiltersRoute({
 export const metricsLocalFiltersRoute = createLocalFiltersRoute({
   path: '/api/apm/ui_filters/local_filters/metrics',
   getProjection: ({ setup, query }) => {
-    const { serviceName } = query;
+    const { serviceName, serviceNodeName } = query;
     return getMetricsProjection({
       setup,
-      serviceName
+      serviceName,
+      serviceNodeName
     });
   },
-  queryRt: t.type({
-    serviceName: t.string
-  })
+  queryRt: t.intersection([
+    t.type({
+      serviceName: t.string
+    }),
+    t.partial({
+      serviceNodeName: t.string
+    })
+  ])
 });
 
 export const errorGroupsLocalFiltersRoute = createLocalFiltersRoute({
@@ -194,6 +201,19 @@ export const errorGroupsLocalFiltersRoute = createLocalFiltersRoute({
   })
 });
 
+export const serviceNodesLocalFiltersRoute = createLocalFiltersRoute({
+  path: '/api/apm/ui_filters/local_filters/serviceNodes',
+  getProjection: ({ setup, query }) => {
+    return getServiceNodesProjection({
+      setup,
+      serviceName: query.serviceName
+    });
+  },
+  queryRt: t.type({
+    serviceName: t.string
+  })
+});
+
 type BaseQueryType = typeof localUiBaseQueryRt;
 
 type GetProjection<
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/strings/ui.ts b/x-pack/legacy/plugins/canvas/canvas_plugin_src/strings/ui.ts
index b48846f28b9d62..7082bba3b6b2a0 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/strings/ui.ts
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/strings/ui.ts
@@ -5,9 +5,120 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { BOOLEAN_FALSE, BOOLEAN_TRUE, CSS, URL, MARKDOWN, HTML, HEX, RGB } from '../../i18n';
+
+import {
+  BOOLEAN_FALSE,
+  BOOLEAN_TRUE,
+  CANVAS,
+  CSS,
+  ELASTICSEARCH,
+  HEX,
+  HTML,
+  KIBANA,
+  LUCENE,
+  MARKDOWN,
+  MOMENTJS,
+  NUMERALJS,
+  RGB,
+  SQL,
+  TIMELION,
+  URL,
+} from '../../i18n';
 
 export const ArgumentStrings = {
+  AxisConfig: {
+    getDisplayName: () =>
+      i18n.translate('xpack.canvas.uis.arguments.axisConfigTitle', {
+        defaultMessage: 'Axis config',
+      }),
+    getHelp: () =>
+      i18n.translate('xpack.canvas.uis.arguments.axisConfigLabel', {
+        defaultMessage: 'Visualization axis configuration',
+      }),
+    getPositionLabel: () =>
+      i18n.translate('xpack.canvas.uis.arguments.axisConfig.positionLabel', {
+        defaultMessage: 'Position',
+      }),
+    getPositionTop: () =>
+      i18n.translate('xpack.canvas.uis.arguments.axisConfig.position.options.topDropDown', {
+        defaultMessage: 'top',
+      }),
+    getPositionBottom: () =>
+      i18n.translate('xpack.canvas.uis.arguments.axisConfig.position.options.bottomDropDown', {
+        defaultMessage: 'bottom',
+      }),
+    getPositionRight: () =>
+      i18n.translate('xpack.canvas.uis.arguments.axisConfig.position.options.rightDropDown', {
+        defaultMessage: 'right',
+      }),
+    getPositionLeft: () =>
+      i18n.translate('xpack.canvas.uis.arguments.axisConfig.position.options.leftDropDown', {
+        defaultMessage: 'left',
+      }),
+  },
+  DataColumn: {
+    getDisplayName: () =>
+      i18n.translate('xpack.canvas.uis.arguments.dataColumnTitle', {
+        defaultMessage: 'Column',
+      }),
+    getHelp: () =>
+      i18n.translate('xpack.canvas.uis.arguments.dataColumnLabel', {
+        defaultMessage: 'Select the data column',
+      }),
+    getOptionAverage: () =>
+      i18n.translate('xpack.canvas.uis.arguments.dataColumn.options.averageDropDown', {
+        defaultMessage: 'Average',
+      }),
+    getOptionCount: () =>
+      i18n.translate('xpack.canvas.uis.arguments.dataColumn.options.countDropDown', {
+        defaultMessage: 'Count',
+      }),
+    getOptionFirst: () =>
+      i18n.translate('xpack.canvas.uis.arguments.dataColumn.options.firstDropDown', {
+        defaultMessage: 'First',
+      }),
+    getOptionLast: () =>
+      i18n.translate('xpack.canvas.uis.arguments.dataColumn.options.lastDropDown', {
+        defaultMessage: 'Last',
+      }),
+    getOptionMax: () =>
+      i18n.translate('xpack.canvas.uis.arguments.dataColumn.options.maxDropDown', {
+        defaultMessage: 'Max',
+      }),
+    getOptionMedian: () =>
+      i18n.translate('xpack.canvas.uis.arguments.dataColumn.options.medianDropDown', {
+        defaultMessage: 'Median',
+      }),
+    getOptionMin: () =>
+      i18n.translate('xpack.canvas.uis.arguments.dataColumn.options.minDropDown', {
+        defaultMessage: 'Min',
+      }),
+    getOptionSum: () =>
+      i18n.translate('xpack.canvas.uis.arguments.dataColumn.options.sumDropDown', {
+        defaultMessage: 'Sum',
+      }),
+    getOptionUnique: () =>
+      i18n.translate('xpack.canvas.uis.arguments.dataColumn.options.uniqueDropDown', {
+        defaultMessage: 'Unique',
+      }),
+    getOptionValue: () =>
+      i18n.translate('xpack.canvas.uis.arguments.dataColumn.options.valueDropDown', {
+        defaultMessage: 'Value',
+      }),
+  },
+  DateFormat: {
+    getDisplayName: () =>
+      i18n.translate('xpack.canvas.uis.arguments.dateFormatTitle', {
+        defaultMessage: 'Date Format',
+      }),
+    getHelp: () =>
+      i18n.translate('xpack.canvas.uis.arguments.dateFormatLabel', {
+        defaultMessage: 'Select or enter a {momentJS} format',
+        values: {
+          momentJS: MOMENTJS,
+        },
+      }),
+  },
   FilterGroup: {
     getDisplayName: () =>
       i18n.translate('xpack.canvas.uis.arguments.filterGroupTitle', {
@@ -59,6 +170,49 @@ export const ArgumentStrings = {
         defaultMessage: 'Asset',
       }),
   },
+  Number: {
+    getDisplayName: () =>
+      i18n.translate('xpack.canvas.uis.arguments.numberTitle', {
+        defaultMessage: 'Number',
+      }),
+    getHelp: () =>
+      i18n.translate('xpack.canvas.uis.arguments.numberLabel', {
+        defaultMessage: 'Input a number',
+      }),
+  },
+  NumberFormat: {
+    getDisplayName: () =>
+      i18n.translate('xpack.canvas.uis.arguments.numberFormatTitle', {
+        defaultMessage: 'Number Format',
+      }),
+    getHelp: () =>
+      i18n.translate('xpack.canvas.uis.arguments.numberFormatLabel', {
+        defaultMessage: 'Select or enter a valid {numeralJS} format',
+        values: {
+          numeralJS: NUMERALJS,
+        },
+      }),
+    getFormatNumber: () =>
+      i18n.translate('xpack.canvas.uis.arguments.numberFormat.format.numberDropDown', {
+        defaultMessage: 'Number',
+      }),
+    getFormatPercent: () =>
+      i18n.translate('xpack.canvas.uis.arguments.numberFormat.format.percentDropDown', {
+        defaultMessage: 'Percent',
+      }),
+    getFormatCurrency: () =>
+      i18n.translate('xpack.canvas.uis.arguments.numberFormat.format.currencyDropDown', {
+        defaultMessage: 'Currency',
+      }),
+    getFormatDuration: () =>
+      i18n.translate('xpack.canvas.uis.arguments.numberFormat.format.durationDropDown', {
+        defaultMessage: 'Duration',
+      }),
+    getFormatBytes: () =>
+      i18n.translate('xpack.canvas.uis.arguments.numberFormat.format.bytesDropDown', {
+        defaultMessage: 'Bytes',
+      }),
+  },
   Palette: {
     getDisplayName: () =>
       i18n.translate('xpack.canvas.uis.arguments.paletteTitle', {
@@ -69,6 +223,272 @@ export const ArgumentStrings = {
         defaultMessage: 'Choose a color palette',
       }),
   },
+  Percentage: {
+    getDisplayName: () =>
+      i18n.translate('xpack.canvas.uis.arguments.percentageTitle', {
+        defaultMessage: 'Percentage',
+      }),
+    getHelp: () =>
+      i18n.translate('xpack.canvas.uis.arguments.percentageLabel', {
+        defaultMessage: 'Slider for percentage ',
+      }),
+  },
+  Range: {
+    getDisplayName: () =>
+      i18n.translate('xpack.canvas.uis.arguments.rangeTitle', {
+        defaultMessage: 'Range',
+      }),
+    getHelp: () =>
+      i18n.translate('xpack.canvas.uis.arguments.rangeLabel', {
+        defaultMessage: 'Slider for values within a range',
+      }),
+  },
+  Select: {
+    getDisplayName: () =>
+      i18n.translate('xpack.canvas.uis.arguments.selectTitle', {
+        defaultMessage: 'Select',
+      }),
+    getHelp: () =>
+      i18n.translate('xpack.canvas.uis.arguments.selectLabel', {
+        defaultMessage: 'Select from multiple options in a drop down',
+      }),
+  },
+  Shape: {
+    getDisplayName: () =>
+      i18n.translate('xpack.canvas.uis.arguments.shapeTitle', {
+        defaultMessage: 'Shape',
+      }),
+    getHelp: () =>
+      i18n.translate('xpack.canvas.uis.arguments.shapeLabel', {
+        defaultMessage: 'Shape picker',
+      }),
+  },
+  String: {
+    getDisplayName: () =>
+      i18n.translate('xpack.canvas.uis.arguments.stringTitle', {
+        defaultMessage: 'String',
+      }),
+    getHelp: () =>
+      i18n.translate('xpack.canvas.uis.arguments.stringLabel', {
+        defaultMessage: 'Input short strings',
+      }),
+  },
+  Textarea: {
+    getDisplayName: () =>
+      i18n.translate('xpack.canvas.uis.arguments.textareaTitle', {
+        defaultMessage: 'Textarea',
+      }),
+    getHelp: () =>
+      i18n.translate('xpack.canvas.uis.arguments.textareaLabel', {
+        defaultMessage: 'Input long strings',
+      }),
+  },
+  Toggle: {
+    getDisplayName: () =>
+      i18n.translate('xpack.canvas.uis.arguments.toggleTitle', {
+        defaultMessage: 'Toggle',
+      }),
+    getHelp: () =>
+      i18n.translate('xpack.canvas.uis.arguments.toggleLabel', {
+        defaultMessage: 'A true/false toggle switch',
+      }),
+  },
+};
+
+export const DataSourceStrings = {
+  DemoData: {
+    getDisplayName: () =>
+      i18n.translate('xpack.canvas.uis.dataSources.demoDataTitle', {
+        defaultMessage: 'Demo data',
+      }),
+    getHelp: () =>
+      i18n.translate('xpack.canvas.uis.dataSources.demoDataLabel', {
+        defaultMessage: 'Mock data set with usernames, prices, projects, countries, and phases',
+      }),
+    getHeading: () =>
+      i18n.translate('xpack.canvas.uis.dataSources.demoData.headingTitle', {
+        defaultMessage: 'You are using demo data',
+      }),
+  },
+  Essql: {
+    getDisplayName: () =>
+      i18n.translate('xpack.canvas.uis.dataSources.essqlTitle', {
+        defaultMessage: '{elasticsearch} {sql}',
+        values: {
+          elasticsearch: ELASTICSEARCH,
+          sql: SQL,
+        },
+      }),
+    getHelp: () =>
+      i18n.translate('xpack.canvas.uis.dataSources.essqlLabel', {
+        defaultMessage: 'Use {elasticsearch} {sql} to get a data table',
+        values: {
+          elasticsearch: ELASTICSEARCH,
+          sql: SQL,
+        },
+      }),
+    getLabel: () =>
+      i18n.translate('xpack.canvas.uis.dataSources.essql.queryTitle', {
+        defaultMessage: '{elasticsearch} {sql} query',
+        values: {
+          elasticsearch: ELASTICSEARCH,
+          sql: SQL,
+        },
+      }),
+  },
+  Timelion: {
+    getHelp: () =>
+      i18n.translate('xpack.canvas.uis.dataSources.timelionLabel', {
+        defaultMessage: 'Use {timelion} syntax to retrieve a timeseries',
+        values: {
+          timelion: TIMELION,
+        },
+      }),
+    getAbout: () =>
+      i18n.translate('xpack.canvas.uis.dataSources.timelion.aboutDetail', {
+        defaultMessage:
+          '{canvas} integrates with {kibanaTimelion} application to allow you to use {timelion} queries to pull back timeseries data in a tabular format that can be used with {canvas} elements.',
+        values: {
+          timelion: TIMELION,
+          kibanaTimelion: `${KIBANA}'s ${TIMELION}`,
+          canvas: CANVAS,
+        },
+      }),
+    getQueryLabel: () =>
+      i18n.translate('xpack.canvas.uis.dataSources.timelion.queryTitle', {
+        defaultMessage: 'Query',
+      }),
+    getQueryHelp: () =>
+      i18n.translate('xpack.canvas.uis.dataSources.timelion.queryLabel', {
+        defaultMessage: '{lucene} Query String syntax',
+        values: {
+          lucene: LUCENE,
+        },
+      }),
+    getIntervalLabel: () =>
+      i18n.translate('xpack.canvas.uis.dataSources.timelion.intervalTitle', {
+        defaultMessage: 'Interval',
+      }),
+    getIntervalHelp: () =>
+      i18n.translate('xpack.canvas.uis.dataSources.timelion.intervalLabel', {
+        defaultMessage:
+          'Accepts {elasticsearch} date math: {weeksExample}, {daysExample}, {secondsExample}, or {auto}',
+        values: {
+          elasticsearch: ELASTICSEARCH,
+          secondsExample: '10s',
+          daysExample: '5d',
+          weeksExample: '1w',
+          auto: 'auto',
+        },
+      }),
+    getTipsHeading: () =>
+      i18n.translate('xpack.canvas.uis.dataSources.timelion.tipsTitle', {
+        defaultMessage: 'Some tips',
+      }),
+  },
+};
+
+export const ModelStrings = {
+  PointSeries: {
+    getDisplayName: () =>
+      i18n.translate('xpack.canvas.uis.models.pointSeriesTitle', {
+        defaultMessage: 'Dimensions & measures',
+      }),
+    getXAxisDisplayName: () =>
+      i18n.translate('xpack.canvas.uis.models.pointSeries.args.xaxisTitle', {
+        defaultMessage: 'X-axis',
+      }),
+    getXAxisHelp: () =>
+      i18n.translate('xpack.canvas.uis.models.pointSeries.args.xaxisLabel', {
+        defaultMessage: 'Data along the horizontal axis. Usually a number, string or date',
+      }),
+    getYaxisDisplayName: () =>
+      i18n.translate('xpack.canvas.uis.models.pointSeries.args.yaxisTitle', {
+        defaultMessage: 'Y-axis',
+      }),
+    getYaxisHelp: () =>
+      i18n.translate('xpack.canvas.uis.models.pointSeries.args.yaxisLabel', {
+        defaultMessage: 'Data along the vertical axis. Usually a number',
+      }),
+    getColorDisplayName: () =>
+      i18n.translate('xpack.canvas.uis.models.pointSeries.args.colorTitle', {
+        defaultMessage: 'Color',
+      }),
+    getColorHelp: () =>
+      i18n.translate('xpack.canvas.uis.models.pointSeries.args.colorLabel', {
+        defaultMessage: 'Determines the color of a mark or series',
+      }),
+    getSizeDisplayName: () =>
+      i18n.translate('xpack.canvas.uis.models.pointSeries.args.sizeTitle', {
+        defaultMessage: 'Size',
+      }),
+    getSizeHelp: () =>
+      i18n.translate('xpack.canvas.uis.models.pointSeries.args.sizeLabel', {
+        defaultMessage: 'Determine the size of a mark',
+      }),
+    getTextDisplayName: () =>
+      i18n.translate('xpack.canvas.uis.models.pointSeries.args.textTitle', {
+        defaultMessage: 'Text',
+      }),
+    getTextHelp: () =>
+      i18n.translate('xpack.canvas.uis.models.pointSeries.args.textLabel', {
+        defaultMessage: 'Set the text to use as, or around, the mark',
+      }),
+  },
+};
+
+export const TransformStrings = {
+  FormatDate: {
+    getDisplayName: () =>
+      i18n.translate('xpack.canvas.uis.transforms.formatDateTitle', {
+        defaultMessage: 'Date format',
+      }),
+    getFormatDisplayName: () =>
+      i18n.translate('xpack.canvas.uis.transforms.formatDate.args.formatTitle', {
+        defaultMessage: 'Format',
+      }),
+  },
+  FormatNumber: {
+    getDisplayName: () =>
+      i18n.translate('xpack.canvas.uis.transforms.formatNumberTitle', {
+        defaultMessage: 'Number format',
+      }),
+    getFormatDisplayName: () =>
+      i18n.translate('xpack.canvas.uis.transforms.formatNumber.args.formatTitle', {
+        defaultMessage: 'Format',
+      }),
+  },
+  RoundDate: {
+    getDisplayName: () =>
+      i18n.translate('xpack.canvas.uis.transforms.roundDateTitle', {
+        defaultMessage: 'Round date',
+      }),
+    getFormatDisplayName: () =>
+      i18n.translate('xpack.canvas.uis.transforms.roundDate.args.formatTitle', {
+        defaultMessage: 'Format',
+      }),
+    getFormatHelp: () =>
+      i18n.translate('xpack.canvas.uis.transforms.roundDate.args.formatLabel', {
+        defaultMessage: 'Select or enter a {momentJs} format to round the date',
+        values: {
+          momentJs: MOMENTJS,
+        },
+      }),
+  },
+  Sort: {
+    getDisplayName: () =>
+      i18n.translate('xpack.canvas.uis.transforms.sortTitle', {
+        defaultMessage: 'Datatable sorting',
+      }),
+    getSortFieldDisplayName: () =>
+      i18n.translate('xpack.canvas.uis.transforms.sort.args.sortFieldTitle', {
+        defaultMessage: 'Sort field',
+      }),
+    getReverseDisplayName: () =>
+      i18n.translate('xpack.canvas.uis.transforms.sort.args.reverseToggleSwitch', {
+        defaultMessage: 'Descending',
+      }),
+  },
 };
 
 export const ViewStrings = {
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/extended_template.tsx b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/extended_template.tsx
index 4521a0d113a49d..6061169cbe9f6b 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/extended_template.tsx
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/extended_template.tsx
@@ -10,6 +10,9 @@ import { EuiSelect, EuiFormRow, EuiSpacer, EuiText } from '@elastic/eui';
 import immutable from 'object-path-immutable';
 import { get } from 'lodash';
 import { ExpressionAST } from '../../../../types';
+import { ArgumentStrings } from '../../../strings';
+
+const { AxisConfig: strings } = ArgumentStrings;
 
 const { set } = immutable;
 
@@ -72,8 +75,8 @@ export class ExtendedTemplate extends PureComponent<Props> {
     }
 
     const positions = {
-      xaxis: ['bottom', 'top'],
-      yaxis: ['left', 'right'],
+      xaxis: [strings.getPositionBottom(), strings.getPositionTop()],
+      yaxis: [strings.getPositionLeft(), strings.getPositionRight()],
     };
     const argName = this.props.typeInstance.name;
     const position = this.getArgValue('position', positions[argName][0]);
@@ -82,7 +85,7 @@ export class ExtendedTemplate extends PureComponent<Props> {
 
     return (
       <Fragment>
-        <EuiFormRow label="Position" display="rowCompressed">
+        <EuiFormRow label={strings.getPositionLabel()} display="rowCompressed">
           <EuiSelect
             compressed
             value={position}
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/index.ts b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/index.ts
index e8237ecc32314a..3f250afacc3bed 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/index.ts
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/index.ts
@@ -7,11 +7,14 @@
 import { templateFromReactComponent } from '../../../../public/lib/template_from_react_component';
 import { SimpleTemplate } from './simple_template';
 import { ExtendedTemplate } from './extended_template';
+import { ArgumentStrings } from '../../../strings';
+
+const { AxisConfig: strings } = ArgumentStrings;
 
 export const axisConfig = () => ({
   name: 'axisConfig',
-  displayName: 'Axis config',
-  help: 'Visualization axis configuration',
+  displayName: strings.getDisplayName(),
+  help: strings.getHelp(),
   simpleTemplate: templateFromReactComponent(SimpleTemplate),
   template: templateFromReactComponent(ExtendedTemplate),
 });
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/datacolumn/index.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/datacolumn/index.js
index 8f7907dfeeb46e..ffa0c6983d5733 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/datacolumn/index.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/datacolumn/index.js
@@ -12,9 +12,11 @@ import { sortBy } from 'lodash';
 import { getType } from '@kbn/interpreter/common';
 import { createStatefulPropHoc } from '../../../../public/components/enhance/stateful_prop';
 import { templateFromReactComponent } from '../../../../public/lib/template_from_react_component';
+import { ArgumentStrings } from '../../../strings';
 import { SimpleMathFunction } from './simple_math_function';
 import { getFormObject } from './get_form_object';
 
+const { DataColumn: strings } = ArgumentStrings;
 const maybeQuoteValue = val => (val.match(/\s/) ? `'${val}'` : val);
 
 // TODO: Garbage, we could make a much nicer math form that can handle way more.
@@ -141,8 +143,8 @@ EnhancedDatacolumnArgInput.propTypes = {
 
 export const datacolumn = () => ({
   name: 'datacolumn',
-  displayName: 'Column',
-  help: 'Select the data column',
+  displayName: strings.getDisplayName(),
+  help: strings.getHelp(),
   default: '""',
   simpleTemplate: templateFromReactComponent(EnhancedDatacolumnArgInput),
 });
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/datacolumn/simple_math_function.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/datacolumn/simple_math_function.js
index 7f4a333ced00cd..219b3582a7526f 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/datacolumn/simple_math_function.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/datacolumn/simple_math_function.js
@@ -7,22 +7,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { EuiSelect } from '@elastic/eui';
+import { ArgumentStrings } from '../../../strings';
+
+const { DataColumn: strings } = ArgumentStrings;
 
 export const SimpleMathFunction = ({ onChange, value, inputRef, onlymath }) => {
   const options = [
-    { text: 'Average', value: 'mean' },
-    { text: 'Count', value: 'size' },
-    { text: 'First', value: 'first' },
-    { text: 'Last', value: 'last' },
-    { text: 'Max', value: 'max' },
-    { text: 'Median', value: 'median' },
-    { text: 'Min', value: 'min' },
-    { text: 'Sum', value: 'sum' },
-    { text: 'Unique', value: 'unique' },
+    { text: strings.getOptionAverage(), value: 'mean' },
+    { text: strings.getOptionCount(), value: 'size' },
+    { text: strings.getOptionFirst(), value: 'first' },
+    { text: strings.getOptionLast(), value: 'last' },
+    { text: strings.getOptionMax(), value: 'max' },
+    { text: strings.getOptionMedian(), value: 'median' },
+    { text: strings.getOptionMin(), value: 'min' },
+    { text: strings.getOptionSum(), value: 'sum' },
+    { text: strings.getOptionUnique(), value: 'unique' },
   ];
 
   if (!onlymath) {
-    options.unshift({ text: 'Value', value: '' });
+    options.unshift({ text: strings.getOptionValue(), value: '' });
   }
 
   return (
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/date_format/index.ts b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/date_format/index.ts
index f0aeecd276b820..6bf6f38f7d3a2c 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/date_format/index.ts
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/date_format/index.ts
@@ -11,6 +11,9 @@ import { AdvancedSettings } from '../../../../public/lib/kibana_advanced_setting
 // @ts-ignore untyped local lib
 import { templateFromReactComponent } from '../../../../public/lib/template_from_react_component';
 import { ArgumentFactory } from '../../../../types/arguments';
+import { ArgumentStrings } from '../../../strings';
+
+const { DateFormat: strings } = ArgumentStrings;
 
 const formatMap = {
   DEFAULT: AdvancedSettings.get('dateFormat'),
@@ -35,7 +38,7 @@ export const DateFormatArgInput = compose<ComponentProps, null>(withProps({ date
 
 export const dateFormat: ArgumentFactory<ComponentProps> = () => ({
   name: 'dateFormat',
-  displayName: 'Date Format',
-  help: 'Select or enter a MomentJS format',
+  displayName: strings.getDisplayName(),
+  help: strings.getHelp(),
   simpleTemplate: templateFromReactComponent(DateFormatArgInput),
 });
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/number.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/number.js
index 49c22e80a2eb60..1ed8f10f6b3103 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/number.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/number.js
@@ -11,6 +11,9 @@ import { EuiFieldNumber, EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/e
 import { get } from 'lodash';
 import { createStatefulPropHoc } from '../../../public/components/enhance/stateful_prop';
 import { templateFromReactComponent } from '../../../public/lib/template_from_react_component';
+import { ArgumentStrings } from '../../strings';
+
+const { Number: strings } = ArgumentStrings;
 
 // This is basically a direct copy of the string input, but with some Number() goodness maybe you think that's cheating and it should be
 // abstracted. If you can think of a 3rd or 4th usage for that abstraction, cool, do it, just don't make it more confusing. Copying is the
@@ -62,8 +65,8 @@ EnhancedNumberArgInput.propTypes = {
 
 export const number = () => ({
   name: 'number',
-  displayName: 'number',
-  help: 'Input a number',
+  displayName: strings.getDisplayName(),
+  help: strings.getHelp(),
   simpleTemplate: templateFromReactComponent(EnhancedNumberArgInput),
   default: '0',
 });
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/number_format/index.ts b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/number_format/index.ts
index 28eed414bcc2b8..8f68042f0dca64 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/number_format/index.ts
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/number_format/index.ts
@@ -10,6 +10,9 @@ import { AdvancedSettings } from '../../../../public/lib/kibana_advanced_setting
 // @ts-ignore untyped local lib
 import { templateFromReactComponent } from '../../../../public/lib/template_from_react_component';
 import { ArgumentFactory } from '../../../../types/arguments';
+import { ArgumentStrings } from '../../../strings';
+
+const { NumberFormat: strings } = ArgumentStrings;
 
 const formatMap = {
   NUMBER: AdvancedSettings.get('format:number:defaultPattern'),
@@ -20,11 +23,11 @@ const formatMap = {
 };
 
 const numberFormats = [
-  { value: formatMap.NUMBER, text: 'Number' },
-  { value: formatMap.PERCENT, text: 'Percent' },
-  { value: formatMap.CURRENCY, text: 'Currency' },
-  { value: formatMap.DURATION, text: 'Duration' },
-  { value: formatMap.BYTES, text: 'Bytes' },
+  { value: formatMap.NUMBER, text: strings.getFormatNumber() },
+  { value: formatMap.PERCENT, text: strings.getFormatPercent() },
+  { value: formatMap.CURRENCY, text: strings.getFormatCurrency() },
+  { value: formatMap.DURATION, text: strings.getFormatDuration() },
+  { value: formatMap.BYTES, text: strings.getFormatBytes() },
 ];
 
 export const NumberFormatArgInput = compose<ComponentProps, null>(withProps({ numberFormats }))(
@@ -33,7 +36,7 @@ export const NumberFormatArgInput = compose<ComponentProps, null>(withProps({ nu
 
 export const numberFormat: ArgumentFactory<ComponentProps> = () => ({
   name: 'numberFormat',
-  displayName: 'Number Format',
-  help: 'Select or enter a valid NumeralJS format',
+  displayName: strings.getDisplayName(),
+  help: strings.getHelp(),
   simpleTemplate: templateFromReactComponent(NumberFormatArgInput),
 });
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/percentage.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/percentage.js
index da4af530b5d121..82a234042f8111 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/percentage.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/percentage.js
@@ -8,6 +8,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { EuiRange } from '@elastic/eui';
 import { templateFromReactComponent } from '../../../public/lib/template_from_react_component';
+import { ArgumentStrings } from '../../strings';
+
+const { Percentage: strings } = ArgumentStrings;
 
 const PercentageArgInput = ({ onValueChange, argValue }) => {
   const handleChange = ev => {
@@ -35,7 +38,7 @@ PercentageArgInput.propTypes = {
 
 export const percentage = () => ({
   name: 'percentage',
-  displayName: 'Percentage',
-  help: 'Slider for percentage ',
+  displayName: strings.getDisplayName(),
+  help: strings.getHelp(),
   simpleTemplate: templateFromReactComponent(PercentageArgInput),
 });
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/range.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/range.js
index 598ac2cee5d18a..7b99fc8c5442f9 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/range.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/range.js
@@ -8,6 +8,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { EuiRange } from '@elastic/eui';
 import { templateFromReactComponent } from '../../../public/lib/template_from_react_component';
+import { ArgumentStrings } from '../../strings';
+
+const { Range: strings } = ArgumentStrings;
 
 const RangeArgInput = ({ typeInstance, onValueChange, argValue }) => {
   const { min, max, step } = typeInstance.options;
@@ -44,7 +47,7 @@ RangeArgInput.propTypes = {
 
 export const range = () => ({
   name: 'range',
-  displayName: 'Range',
-  help: 'Slider for values within a range',
+  displayName: strings.getDisplayName(),
+  help: strings.getHelp(),
   simpleTemplate: templateFromReactComponent(RangeArgInput),
 });
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/select.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/select.js
index 39f0f4da359262..095aa2dc4f3fdc 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/select.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/select.js
@@ -8,6 +8,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { EuiSelect } from '@elastic/eui';
 import { templateFromReactComponent } from '../../../public/lib/template_from_react_component';
+import { ArgumentStrings } from '../../strings';
+
+const { Select: strings } = ArgumentStrings;
 
 const SelectArgInput = ({ typeInstance, onValueChange, argValue, argId }) => {
   const choices = typeInstance.options.choices.map(({ value, name }) => ({ value, text: name }));
@@ -43,7 +46,7 @@ SelectArgInput.propTypes = {
 
 export const select = () => ({
   name: 'select',
-  displayName: 'Select',
-  help: 'Select from multiple options in a drop down',
+  displayName: strings.getDisplayName(),
+  help: strings.getHelp(),
   simpleTemplate: templateFromReactComponent(SelectArgInput),
 });
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/shape.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/shape.js
index 26b13e4b4175ec..7a3dad36dcf019 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/shape.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/shape.js
@@ -9,6 +9,9 @@ import PropTypes from 'prop-types';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { templateFromReactComponent } from '../../../public/lib/template_from_react_component';
 import { ShapePickerPopover } from '../../../public/components/shape_picker_popover/';
+import { ArgumentStrings } from '../../strings';
+
+const { Shape: strings } = ArgumentStrings;
 
 const ShapeArgInput = ({ onValueChange, argValue, typeInstance }) => (
   <EuiFlexGroup gutterSize="s">
@@ -32,8 +35,8 @@ ShapeArgInput.propTypes = {
 
 export const shape = () => ({
   name: 'shape',
-  displayName: 'Shape',
-  help: 'Shape picker',
+  displayName: strings.getDisplayName(),
+  help: strings.getHelp(),
   simpleTemplate: templateFromReactComponent(ShapeArgInput),
   default: '"square"',
 });
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/string.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/string.js
index 9c117e694a1fda..46749cc8562e26 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/string.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/string.js
@@ -11,6 +11,9 @@ import { EuiFlexItem, EuiFlexGroup, EuiFieldText, EuiButton } from '@elastic/eui
 import { get } from 'lodash';
 import { createStatefulPropHoc } from '../../../public/components/enhance/stateful_prop';
 import { templateFromReactComponent } from '../../../public/lib/template_from_react_component';
+import { ArgumentStrings } from '../../strings';
+
+const { String: strings } = ArgumentStrings;
 
 const StringArgInput = ({ updateValue, value, confirm, commit, argId }) => (
   <EuiFlexGroup gutterSize="s">
@@ -57,7 +60,7 @@ EnhancedStringArgInput.propTypes = {
 
 export const string = () => ({
   name: 'string',
-  displayName: 'String',
-  help: 'Input short strings',
+  displayName: strings.getDisplayName(),
+  help: strings.getHelp(),
   simpleTemplate: templateFromReactComponent(EnhancedStringArgInput),
 });
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/textarea.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/textarea.js
index 61dde4d5187fd6..e7009300b32e63 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/textarea.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/textarea.js
@@ -11,6 +11,9 @@ import { EuiFormRow, EuiTextArea, EuiSpacer, EuiButton } from '@elastic/eui';
 import { get } from 'lodash';
 import { createStatefulPropHoc } from '../../../public/components/enhance/stateful_prop';
 import { templateFromReactComponent } from '../../../public/lib/template_from_react_component';
+import { ArgumentStrings } from '../../strings';
+
+const { Textarea: strings } = ArgumentStrings;
 
 const TextAreaArgInput = ({ updateValue, value, confirm, commit, renderError, argId }) => {
   if (typeof value !== 'string') {
@@ -66,7 +69,7 @@ EnhancedTextAreaArgInput.propTypes = {
 
 export const textarea = () => ({
   name: 'textarea',
-  displayName: 'Textarea',
-  help: 'Input long strings',
+  displayName: strings.getDisplayName(),
+  help: strings.getHelp(),
   template: templateFromReactComponent(EnhancedTextAreaArgInput),
 });
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/toggle.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/toggle.js
index d3aab4cf811e58..e52679d80e908f 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/toggle.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/toggle.js
@@ -8,6 +8,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { EuiFormRow, EuiSwitch } from '@elastic/eui';
 import { templateFromReactComponent } from '../../../public/lib/template_from_react_component';
+import { ArgumentStrings } from '../../strings';
+
+const { Toggle: strings } = ArgumentStrings;
 
 const ToggleArgInput = ({ onValueChange, argValue, argId, renderError }) => {
   const handleChange = () => onValueChange(!argValue);
@@ -31,8 +34,8 @@ ToggleArgInput.propTypes = {
 
 export const toggle = () => ({
   name: 'toggle',
-  displayName: 'Toggle',
-  help: 'A true/false toggle switch',
+  displayName: strings.getDisplayName(),
+  help: strings.getHelp(),
   simpleTemplate: templateFromReactComponent(ToggleArgInput),
   default: 'false',
 });
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/demodata.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/demodata.js
index 32be8b79d8fc91..6438cc56897476 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/demodata.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/demodata.js
@@ -5,25 +5,36 @@
  */
 
 import React from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiText } from '@elastic/eui';
 import { templateFromReactComponent } from '../../../public/lib/template_from_react_component';
+import { DataSourceStrings } from '../../strings';
+import { ComponentStrings, CANVAS } from '../../../i18n';
+
+const { DemoData: strings } = DataSourceStrings;
 
 const DemodataDatasource = () => (
   <EuiText>
-    <h3>You are using demo data</h3>
+    <h3>{strings.getHeading()}</h3>
     <p>
-      This data source is connected to every Canvas element by default. Its purpose is to give you
-      some playground data to get started. The demo set contains 4 strings, 3 numbers and a date.
-      Feel free to experiment and, when you're ready, click <strong>Change your data source</strong>{' '}
-      above to connect to your own data.
+      <FormattedMessage
+        id="xpack.canvas.uis.dataSources.demoDataDescription"
+        defaultMessage="This data source is connected to every {canvas} element by default. Its purpose is to give you some playground data to get started. The demo set contains 4 strings, 3 numbers and a date. Feel free to experiment and, when you're ready, click {clickText} above to connect to your own data."
+        values={{
+          canvas: CANVAS,
+          clickText: (
+            <strong>{ComponentStrings.DatasourceDatasourceComponent.getChangeButtonLabel()}</strong>
+          ),
+        }}
+      />
     </p>
   </EuiText>
 );
 
 export const demodata = () => ({
   name: 'demodata',
-  displayName: 'Demo data',
-  help: 'Mock data set with usernames, prices, projects, countries, and phases',
+  displayName: strings.getDisplayName(),
+  help: strings.getHelp(),
   // Replace this with a better icon when we have time.
   image: 'logoElasticStack',
   template: templateFromReactComponent(DemodataDatasource),
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/essql.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/essql.js
index 1973737be14792..8b6b8695a74a3a 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/essql.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/essql.js
@@ -9,6 +9,9 @@ import PropTypes from 'prop-types';
 import { EuiFormRow, EuiTextArea } from '@elastic/eui';
 import { getSimpleArg, setSimpleArg } from '../../../public/lib/arg_helpers';
 import { templateFromReactComponent } from '../../../public/lib/template_from_react_component';
+import { DataSourceStrings } from '../../strings';
+
+const { Essql: strings } = DataSourceStrings;
 
 class EssqlDatasource extends PureComponent {
   componentDidMount() {
@@ -56,7 +59,7 @@ class EssqlDatasource extends PureComponent {
     const { isInvalid } = this.props;
 
     return (
-      <EuiFormRow isInvalid={isInvalid} label="Elasticsearch SQL query">
+      <EuiFormRow isInvalid={isInvalid} label={strings.getLabel()}>
         <EuiTextArea
           placeholder={this.defaultQuery}
           isInvalid={isInvalid}
@@ -79,8 +82,8 @@ EssqlDatasource.propTypes = {
 
 export const essql = () => ({
   name: 'essql',
-  displayName: 'Elasticsearch SQL',
-  help: 'Use Elasticsearch SQL to get a data table',
+  displayName: strings.getDisplayName(),
+  help: strings.getHelp(),
   // Replace this with a SQL logo when we have one in EUI
   image: 'logoElasticsearch',
   template: templateFromReactComponent(EssqlDatasource),
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/timelion.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/timelion.js
index 1f7770538e8a0c..3065f0fc713073 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/timelion.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/timelion.js
@@ -15,8 +15,13 @@ import {
   EuiText,
   EuiTextArea,
 } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { getSimpleArg, setSimpleArg } from '../../../public/lib/arg_helpers';
 import { templateFromReactComponent } from '../../../public/lib/template_from_react_component';
+import { DataSourceStrings } from '../../strings';
+import { TIMELION, CANVAS } from '../../../i18n';
+
+const { Timelion: strings } = DataSourceStrings;
 
 const TimelionDatasource = ({ args, updateArgs, defaultIndex }) => {
   const DEFAULT_QUERY = `.es(index=${defaultIndex})`;
@@ -54,16 +59,13 @@ const TimelionDatasource = ({ args, updateArgs, defaultIndex }) => {
   return (
     <div>
       <EuiText size="xs">
-        <h3>Timelion</h3>
-        <p>
-          Canvas integrates with Kibana's Timelion application to allow you to use Timelion queries
-          to pull back timeseries data in a tabular format that can be used with Canvas elements.
-        </p>
+        <h3>{TIMELION}</h3>
+        <p>{strings.getAbout()}</p>
       </EuiText>
 
       <EuiSpacer />
 
-      <EuiFormRow label="Query" helpText="Lucene Query String syntax">
+      <EuiFormRow label={strings.getQueryLabel()} helpText={strings.getQueryHelp()}>
         <EuiTextArea
           className="canvasTextArea__code"
           value={getQuery()}
@@ -74,8 +76,8 @@ const TimelionDatasource = ({ args, updateArgs, defaultIndex }) => {
         // TODO: Time timelion interval picker should be a drop down
       }
       <EuiFormRow
-        label="Interval"
-        helpText="Accepts Elasticsearch date math: 1w, 5d, 10s, or auto"
+        label={strings.getIntervalLabel()}
+        helpText={strings.getIntervalHelp()}
         display="rowCompressed"
       >
         <EuiFieldText
@@ -87,15 +89,27 @@ const TimelionDatasource = ({ args, updateArgs, defaultIndex }) => {
 
       <EuiSpacer size="m" />
 
-      <EuiCallOut color="warning" title="Some tips" size="s">
+      <EuiCallOut color="warning" title={strings.getTipsHeading()} size="s">
         <ul>
           <li>
-            Timelion requires a time range, you should add a time filter element to your page
-            somewhere, or use the code editor to pass in a time filter.
+            <FormattedMessage
+              id="xpack.canvas.uis.dataSources.timelion.tips.time"
+              defaultMessage="{timelion} requires a time range, you should add a time filter element to your page somewhere, or use the code editor to pass in a time filter."
+              values={{
+                timelion: TIMELION,
+              }}
+            />
           </li>
           <li>
-            Some Timelion functions, such as <EuiCode>.color()</EuiCode>, don't translate to a
-            Canvas data table. Anything todo with data manipulation should work grand.
+            <FormattedMessage
+              id="xpack.canvas.uis.dataSources.timelion.tips.functions"
+              defaultMessage="Some {timelion} functions, such as {functionExample}, don't translate to a {canvas} data table. Anything todo with data manipulation should work grand."
+              values={{
+                timelion: TIMELION,
+                canvas: CANVAS,
+                functionExample: <EuiCode>.color()</EuiCode>,
+              }}
+            />
           </li>
         </ul>
       </EuiCallOut>
@@ -111,8 +125,8 @@ TimelionDatasource.propTypes = {
 
 export const timelion = () => ({
   name: 'timelion',
-  displayName: 'Timelion',
-  help: 'Use Timelion syntax to retrieve a timeseries',
+  displayName: TIMELION,
+  help: strings.getHelp(),
   image: 'timelionApp',
   template: templateFromReactComponent(TimelionDatasource),
 });
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/models/point_series.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/models/point_series.js
index 0cc6570b285295..bea7e4d6435680 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/models/point_series.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/models/point_series.js
@@ -6,39 +6,42 @@
 
 import { get } from 'lodash';
 import { getState, getValue } from '../../../public/lib/resolved_arg';
+import { ModelStrings } from '../../strings';
+
+const { PointSeries: strings } = ModelStrings;
 
 export const pointseries = () => ({
   name: 'pointseries',
-  displayName: 'Dimensions & measures',
+  displayName: strings.getDisplayName(),
   args: [
     {
       name: 'x',
-      displayName: 'X-axis',
-      help: 'Data along the horizontal axis. Usually a number, string or date',
+      displayName: strings.getXAxisDisplayName(),
+      help: strings.getXAxisHelp(),
       argType: 'datacolumn',
     },
     {
       name: 'y',
-      displayName: 'Y-axis',
-      help: 'Data along the vertical axis. Usually a number',
+      displayName: strings.getYaxisDisplayName(),
+      help: strings.getYaxisHelp(),
       argType: 'datacolumn',
     },
     {
       name: 'color',
-      displayName: 'Color',
-      help: 'Determines the color of a mark or series',
+      displayName: strings.getColorDisplayName(),
+      help: strings.getColorHelp(),
       argType: 'datacolumn',
     },
     {
       name: 'size',
-      displayName: 'Size',
-      help: 'Determine the size of a mark',
+      displayName: strings.getSizeDisplayName(),
+      help: strings.getSizeHelp(),
       argType: 'datacolumn',
     },
     {
       name: 'text',
-      displayName: 'Text',
-      help: 'Set the text to use as, or around, the mark',
+      displayName: strings.getTextDisplayName(),
+      help: strings.getTextHelp(),
       argType: 'datacolumn',
     },
   ],
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/transforms/formatdate.ts b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/transforms/formatdate.ts
index 08c8c0e68a1b4c..a2e440dd62e132 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/transforms/formatdate.ts
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/transforms/formatdate.ts
@@ -6,14 +6,17 @@
 
 import { TransformFactory } from '../../../types/transforms';
 import { Arguments } from '../../functions/common/formatdate';
+import { TransformStrings } from '../../strings';
+
+const { FormatDate: strings } = TransformStrings;
 
 export const formatdate: TransformFactory<Arguments> = () => ({
   name: 'formatdate',
-  displayName: 'Date format',
+  displayName: strings.getDisplayName(),
   args: [
     {
       name: 'format',
-      displayName: 'Format',
+      displayName: strings.getFormatDisplayName(),
       argType: 'dateformat',
     },
   ],
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/transforms/formatnumber.ts b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/transforms/formatnumber.ts
index c7c1ace456ed2e..a67695e635fb5f 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/transforms/formatnumber.ts
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/transforms/formatnumber.ts
@@ -6,14 +6,17 @@
 
 import { TransformFactory } from '../../../types/transforms';
 import { Arguments } from '../../functions/common/formatnumber';
+import { TransformStrings } from '../../strings';
+
+const { FormatNumber: strings } = TransformStrings;
 
 export const formatnumber: TransformFactory<Arguments> = () => ({
   name: 'formatnumber',
-  displayName: 'Number format',
+  displayName: strings.getDisplayName(),
   args: [
     {
       name: 'format',
-      displayName: 'Format',
+      displayName: strings.getFormatDisplayName(),
       argType: 'numberformat',
     },
   ],
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/transforms/rounddate.ts b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/transforms/rounddate.ts
index c94b32456f90c0..bc7c8b983bbae9 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/transforms/rounddate.ts
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/transforms/rounddate.ts
@@ -6,16 +6,19 @@
 
 import { TransformFactory } from '../../../types/transforms';
 import { Arguments } from '../../functions/common/rounddate';
+import { TransformStrings } from '../../strings';
+
+const { RoundDate: strings } = TransformStrings;
 
 export const rounddate: TransformFactory<Arguments> = () => ({
   name: 'rounddate',
-  displayName: 'Round date',
+  displayName: strings.getDisplayName(),
   args: [
     {
       name: 'format',
-      displayName: 'Format',
+      displayName: strings.getFormatDisplayName(),
       argType: 'dateformat',
-      help: 'Select or enter a MomentJS format to round the date',
+      help: strings.getFormatHelp(),
     },
   ],
 });
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/transforms/sort.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/transforms/sort.js
index e79b81df914288..e15f2166342237 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/transforms/sort.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/transforms/sort.js
@@ -6,19 +6,22 @@
 
 import { get } from 'lodash';
 import { getState, getValue } from '../../../public/lib/resolved_arg';
+import { TransformStrings } from '../../strings';
+
+const { Sort: strings } = TransformStrings;
 
 export const sort = () => ({
   name: 'sort',
-  displayName: 'Datatable sorting',
+  displayName: strings.getDisplayName(),
   args: [
     {
       name: '_',
-      displayName: 'Sort field',
+      displayName: strings.getSortFieldDisplayName(),
       argType: 'datacolumn',
     },
     {
       name: 'reverse',
-      displayName: 'Descending',
+      displayName: strings.getReverseDisplayName(),
       argType: 'toggle',
     },
   ],
diff --git a/x-pack/legacy/plugins/canvas/i18n/components.ts b/x-pack/legacy/plugins/canvas/i18n/components.ts
index d8e8b586d2b823..941db91c417223 100644
--- a/x-pack/legacy/plugins/canvas/i18n/components.ts
+++ b/x-pack/legacy/plugins/canvas/i18n/components.ts
@@ -41,6 +41,43 @@ export const ComponentStrings = {
         defaultMessage: 'Add argument',
       }),
   },
+  ArgFormAdvancedFailure: {
+    getApplyButtonLabel: () =>
+      i18n.translate('xpack.canvas.argFormAdvancedFailure.applyButtonLabel', {
+        defaultMessage: 'Apply',
+      }),
+    getRowErrorMessage: () =>
+      i18n.translate('xpack.canvas.argFormAdvancedFailure.rowErrorMessage', {
+        defaultMessage: 'Invalid Expression',
+      }),
+    getResetButtonLabel: () =>
+      i18n.translate('xpack.canvas.argFormAdvancedFailure.resetButtonLabel', {
+        defaultMessage: 'Reset',
+      }),
+  },
+  ArgFormArgSimpleForm: {
+    getRemoveAriaLabel: () =>
+      i18n.translate('xpack.canvas.argFormArgSimpleForm.removeAriaLabel', {
+        defaultMessage: 'Remove',
+      }),
+    getRequiredTooltip: () =>
+      i18n.translate('xpack.canvas.argFormArgSimpleForm.requiredTooltip', {
+        defaultMessage: 'This argument is required, you should specify a value.',
+      }),
+  },
+  ArgFormPendingArgValue: {
+    getLoadingMessage: () =>
+      i18n.translate('xpack.canvas.argFormPendingArgValue.loadingMessage', {
+        defaultMessage: 'Loading',
+      }),
+  },
+  ArgFormSimpleFailure: {
+    getFailureTooltip: () =>
+      i18n.translate('xpack.canvas.argFormSimpleFailure.failureTooltip', {
+        defaultMessage:
+          'The interface for this argument could not parse the value, so a fallback input is being used',
+      }),
+  },
   Asset: {
     getCopyAssetTooltip: () =>
       i18n.translate('xpack.canvas.asset.copyAssetTooltip', {
@@ -214,6 +251,33 @@ export const ComponentStrings = {
         defaultMessage: 'Closes keyboard shortcuts reference',
       }),
   },
+  PageManager: {
+    getPageNumberAriaLabel: (pageNumber: number) =>
+      i18n.translate('xpack.canvas.pageManager.pageNumberAriaLabel', {
+        defaultMessage: 'Load page number {pageNumber}',
+        values: {
+          pageNumber,
+        },
+      }),
+  },
+  PagePreviewPageControls: {
+    getClonePageAriaLabel: () =>
+      i18n.translate('xpack.canvas.pagePreviewPageControls.clonePageAriaLabel', {
+        defaultMessage: 'Clone page',
+      }),
+    getClonePageTooltip: () =>
+      i18n.translate('xpack.canvas.pagePreviewPageControls.clonePageTooltip', {
+        defaultMessage: 'Clone',
+      }),
+    getDeletePageAriaLabel: () =>
+      i18n.translate('xpack.canvas.pagePreviewPageControls.deletePageAriaLabel', {
+        defaultMessage: 'Delete page',
+      }),
+    getDeletePageTooltip: () =>
+      i18n.translate('xpack.canvas.pagePreviewPageControls.deletePageTooltip', {
+        defaultMessage: 'Delete',
+      }),
+  },
   Toolbar: {
     getEditorButtonLabel: () =>
       i18n.translate('xpack.canvas.toolbar.editorButtonLabel', {
diff --git a/x-pack/legacy/plugins/canvas/i18n/constants.ts b/x-pack/legacy/plugins/canvas/i18n/constants.ts
index 349e77ac3bd537..3cc583f6af8a88 100644
--- a/x-pack/legacy/plugins/canvas/i18n/constants.ts
+++ b/x-pack/legacy/plugins/canvas/i18n/constants.ts
@@ -31,6 +31,7 @@ export const POST = 'POST';
 export const RGB = 'RGB';
 export const SQL = 'SQL';
 export const SVG = 'SVG';
+export const TIMELION = 'Timelion';
 export const TINYMATH = '`TinyMath`';
 export const TINYMATH_URL =
   'https://www.elastic.co/guide/en/kibana/current/canvas-tinymath-functions.html';
diff --git a/x-pack/legacy/plugins/canvas/public/components/arg_form/advanced_failure.js b/x-pack/legacy/plugins/canvas/public/components/arg_form/advanced_failure.js
index a559c478ea3360..962a7e592acb7f 100644
--- a/x-pack/legacy/plugins/canvas/public/components/arg_form/advanced_failure.js
+++ b/x-pack/legacy/plugins/canvas/public/components/arg_form/advanced_failure.js
@@ -11,6 +11,10 @@ import { EuiTextArea, EuiButton, EuiButtonEmpty, EuiFormRow, EuiSpacer } from '@
 import { fromExpression, toExpression } from '@kbn/interpreter/common';
 import { createStatefulPropHoc } from '../../components/enhance/stateful_prop';
 
+import { ComponentStrings } from '../../../i18n';
+
+const { ArgFormAdvancedFailure: strings } = ComponentStrings;
+
 export const AdvancedFailureComponent = props => {
   const {
     onValueChange,
@@ -40,7 +44,12 @@ export const AdvancedFailureComponent = props => {
 
   return (
     <div>
-      <EuiFormRow display="rowCompressed" id={argId} isInvalid={!valid} error="Invalid Expression">
+      <EuiFormRow
+        display="rowCompressed"
+        id={argId}
+        isInvalid={!valid}
+        error={strings.getRowErrorMessage()}
+      >
         <EuiTextArea
           id={argId}
           isInvalid={!valid}
@@ -53,11 +62,11 @@ export const AdvancedFailureComponent = props => {
       <EuiSpacer size="s" />
       <div>
         <EuiButton disabled={!valid} onClick={e => valueChange(e)} size="s" type="submit">
-          Apply
+          {strings.getApplyButtonLabel()}
         </EuiButton>
         {defaultValue && defaultValue.length && (
           <EuiButtonEmpty size="s" color="danger" onClick={confirmReset}>
-            Reset
+            {strings.getResetButtonLabel()}
           </EuiButtonEmpty>
         )}
       </div>
diff --git a/x-pack/legacy/plugins/canvas/public/components/arg_form/arg_simple_form.js b/x-pack/legacy/plugins/canvas/public/components/arg_form/arg_simple_form.tsx
similarity index 63%
rename from x-pack/legacy/plugins/canvas/public/components/arg_form/arg_simple_form.js
rename to x-pack/legacy/plugins/canvas/public/components/arg_form/arg_simple_form.tsx
index 0d50345279a258..5b45772c143730 100644
--- a/x-pack/legacy/plugins/canvas/public/components/arg_form/arg_simple_form.js
+++ b/x-pack/legacy/plugins/canvas/public/components/arg_form/arg_simple_form.tsx
@@ -4,13 +4,29 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { ReactNode, MouseEventHandler } from 'react';
 import PropTypes from 'prop-types';
 import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { TooltipIcon } from '../tooltip_icon';
+import { TooltipIcon, IconType } from '../tooltip_icon';
+
+import { ComponentStrings } from '../../../i18n';
+
+const { ArgFormArgSimpleForm: strings } = ComponentStrings;
+
+interface Props {
+  children?: ReactNode;
+  required?: boolean;
+  valueMissing?: boolean;
+  onRemove: MouseEventHandler<HTMLAnchorElement>;
+}
 
 // This is what is being generated by render() from the Arg class. It is called in FunctionForm
-export const ArgSimpleForm = ({ children, required, valueMissing, onRemove }) => {
+export const ArgSimpleForm: React.FunctionComponent<Props> = ({
+  children,
+  required,
+  valueMissing,
+  onRemove,
+}) => {
   return (
     <EuiFlexGroup alignItems="center" gutterSize="s" className="canvasArg__form">
       <EuiFlexItem>{children}</EuiFlexItem>
@@ -18,8 +34,8 @@ export const ArgSimpleForm = ({ children, required, valueMissing, onRemove }) =>
         <EuiFlexItem grow={false}>
           <TooltipIcon
             position="left"
-            icon="error"
-            content="This argument is required, you should specify a value."
+            icon={IconType.error}
+            content={strings.getRequiredTooltip()}
           />
         </EuiFlexItem>
       )}
@@ -29,7 +45,7 @@ export const ArgSimpleForm = ({ children, required, valueMissing, onRemove }) =>
           color="danger"
           onClick={onRemove}
           iconType="trash"
-          aria-label="Remove"
+          aria-label={strings.getRemoveAriaLabel()}
           className="canvasArg__remove"
         />
       )}
diff --git a/x-pack/legacy/plugins/canvas/public/components/arg_form/pending_arg_value.js b/x-pack/legacy/plugins/canvas/public/components/arg_form/pending_arg_value.js
index 429072081424e2..516ac729935e7b 100644
--- a/x-pack/legacy/plugins/canvas/public/components/arg_form/pending_arg_value.js
+++ b/x-pack/legacy/plugins/canvas/public/components/arg_form/pending_arg_value.js
@@ -6,9 +6,12 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { ComponentStrings } from '../../../i18n';
 import { Loading } from '../loading';
 import { ArgLabel } from './arg_label';
 
+const { ArgFormPendingArgValue: strings } = ComponentStrings;
+
 export class PendingArgValue extends React.PureComponent {
   static propTypes = {
     label: PropTypes.string,
@@ -47,7 +50,7 @@ export class PendingArgValue extends React.PureComponent {
           expandable={false}
         >
           <div className="canvasArg--pending">
-            <Loading animated text="Loading" />
+            <Loading animated text={strings.getLoadingMessage()} />
           </div>
         </ArgLabel>
       </div>
diff --git a/x-pack/legacy/plugins/canvas/public/components/arg_form/simple_failure.js b/x-pack/legacy/plugins/canvas/public/components/arg_form/simple_failure.tsx
similarity index 64%
rename from x-pack/legacy/plugins/canvas/public/components/arg_form/simple_failure.js
rename to x-pack/legacy/plugins/canvas/public/components/arg_form/simple_failure.tsx
index 85cc47daddf1d3..146563d62e746e 100644
--- a/x-pack/legacy/plugins/canvas/public/components/arg_form/simple_failure.js
+++ b/x-pack/legacy/plugins/canvas/public/components/arg_form/simple_failure.tsx
@@ -5,15 +5,15 @@
  */
 
 import React from 'react';
-import { TooltipIcon } from '../tooltip_icon';
+import { TooltipIcon, IconType } from '../tooltip_icon';
+
+import { ComponentStrings } from '../../../i18n';
+
+const { ArgFormSimpleFailure: strings } = ComponentStrings;
 
 // This is what is being generated by render() from the Arg class. It is called in FunctionForm
 export const SimpleFailure = () => (
   <div className="canvasArg--error canvasArg--error-simple">
-    <TooltipIcon
-      position="left"
-      icon="warning"
-      content="The interface for this argument could not parse the value, so a fallback input is being used"
-    />
+    <TooltipIcon position="left" icon={IconType.warning} content={strings.getFailureTooltip()} />
   </div>
 );
diff --git a/x-pack/legacy/plugins/canvas/public/components/datasource/datasource_preview/datasource_preview.js b/x-pack/legacy/plugins/canvas/public/components/datasource/datasource_preview/datasource_preview.js
index 6340df8dced760..e6d2fe550a9356 100644
--- a/x-pack/legacy/plugins/canvas/public/components/datasource/datasource_preview/datasource_preview.js
+++ b/x-pack/legacy/plugins/canvas/public/components/datasource/datasource_preview/datasource_preview.js
@@ -19,8 +19,8 @@ import {
 } from '@elastic/eui';
 import { Datatable } from '../../datatable';
 import { Error } from '../../error';
-
 import { ComponentStrings } from '../../../../i18n';
+
 const { DatasourceDatasourcePreview: strings } = ComponentStrings;
 const { DatasourceDatasourceComponent: datasourceStrings } = ComponentStrings;
 
diff --git a/x-pack/legacy/plugins/canvas/public/components/element_card/element_card.tsx b/x-pack/legacy/plugins/canvas/public/components/element_card/element_card.tsx
index 9262a67cf393cc..819282d5881292 100644
--- a/x-pack/legacy/plugins/canvas/public/components/element_card/element_card.tsx
+++ b/x-pack/legacy/plugins/canvas/public/components/element_card/element_card.tsx
@@ -5,11 +5,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  // @ts-ignore unconverted EUI component
-  EuiCard,
-  EuiIcon,
-} from '@elastic/eui';
+import { EuiCard, EuiIcon } from '@elastic/eui';
 import { TagList } from '../tag_list/';
 
 export interface Props {
@@ -45,7 +41,7 @@ export const ElementCard = ({ title, description, image, tags = [], onClick, ...
     description={description}
     footer={<TagList tags={tags} tagType={tagType} />}
     image={image}
-    icon={image ? null : <EuiIcon type="canvasApp" size="xxl" />}
+    icon={image ? undefined : <EuiIcon type="canvasApp" size="xxl" />}
     onClick={onClick}
     {...rest}
   />
diff --git a/x-pack/legacy/plugins/canvas/public/components/page_manager/page_manager.js b/x-pack/legacy/plugins/canvas/public/components/page_manager/page_manager.js
index 533733f9aeacf1..2208d7f363f5ec 100644
--- a/x-pack/legacy/plugins/canvas/public/components/page_manager/page_manager.js
+++ b/x-pack/legacy/plugins/canvas/public/components/page_manager/page_manager.js
@@ -13,6 +13,10 @@ import { ConfirmModal } from '../confirm_modal';
 import { Link } from '../link';
 import { PagePreview } from '../page_preview';
 
+import { ComponentStrings } from '../../../i18n';
+
+const { PageManager: strings } = ComponentStrings;
+
 export class PageManager extends React.PureComponent {
   static propTypes = {
     isWriteable: PropTypes.bool.isRequired,
@@ -154,7 +158,7 @@ export class PageManager extends React.PureComponent {
                 <Link
                   name="loadWorkpad"
                   params={{ id: workpadId, page: pageNumber }}
-                  aria-label={`Load page number ${pageNumber}`}
+                  aria-label={strings.getPageNumberAriaLabel(pageNumber)}
                 >
                   {Style.it(
                     workpadCSS,
diff --git a/x-pack/legacy/plugins/canvas/public/components/page_preview/page_controls.js b/x-pack/legacy/plugins/canvas/public/components/page_preview/page_controls.js
index f04d44a74165ef..727794e72ee15e 100644
--- a/x-pack/legacy/plugins/canvas/public/components/page_preview/page_controls.js
+++ b/x-pack/legacy/plugins/canvas/public/components/page_preview/page_controls.js
@@ -8,6 +8,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { EuiFlexGroup, EuiFlexItem, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
 
+import { ComponentStrings } from '../../../i18n';
+
+const { PagePreviewPageControls: strings } = ComponentStrings;
+
 export const PageControls = ({ pageId, onDelete, onDuplicate }) => {
   const handleDuplicate = ev => {
     ev.preventDefault();
@@ -26,16 +30,20 @@ export const PageControls = ({ pageId, onDelete, onDuplicate }) => {
       justifyContent="spaceBetween"
     >
       <EuiFlexItem grow={false}>
-        <EuiToolTip content="Clone">
-          <EuiButtonIcon iconType="copy" aria-label="Clone page" onClick={handleDuplicate} />
+        <EuiToolTip content={strings.getClonePageTooltip()}>
+          <EuiButtonIcon
+            iconType="copy"
+            aria-label={strings.getClonePageAriaLabel()}
+            onClick={handleDuplicate}
+          />
         </EuiToolTip>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <EuiToolTip content="Delete">
+        <EuiToolTip content={strings.getDeletePageTooltip()}>
           <EuiButtonIcon
             color="danger"
             iconType="trash"
-            aria-label="Delete Page"
+            aria-label={strings.getDeletePageAriaLabel()}
             onClick={handleDelete}
           />
         </EuiToolTip>
diff --git a/x-pack/legacy/plugins/canvas/public/components/tooltip_icon/index.js b/x-pack/legacy/plugins/canvas/public/components/tooltip_icon/index.ts
similarity index 89%
rename from x-pack/legacy/plugins/canvas/public/components/tooltip_icon/index.js
rename to x-pack/legacy/plugins/canvas/public/components/tooltip_icon/index.ts
index 3d94574570b9e9..6e71baa3647852 100644
--- a/x-pack/legacy/plugins/canvas/public/components/tooltip_icon/index.js
+++ b/x-pack/legacy/plugins/canvas/public/components/tooltip_icon/index.ts
@@ -6,5 +6,6 @@
 
 import { pure } from 'recompose';
 import { TooltipIcon as Component } from './tooltip_icon';
+export { IconType } from './tooltip_icon';
 
 export const TooltipIcon = pure(Component);
diff --git a/x-pack/legacy/plugins/canvas/public/components/tooltip_icon/tooltip_icon.js b/x-pack/legacy/plugins/canvas/public/components/tooltip_icon/tooltip_icon.js
deleted file mode 100644
index 207e7156393fe0..00000000000000
--- a/x-pack/legacy/plugins/canvas/public/components/tooltip_icon/tooltip_icon.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-/* eslint react/forbid-elements: 0 */
-import React from 'react';
-import { PropTypes } from 'prop-types';
-import { EuiIconTip } from '@elastic/eui';
-
-export const TooltipIcon = ({ icon = 'info', ...rest }) => {
-  const icons = {
-    error: { type: 'alert', color: 'danger' },
-    warning: { type: 'alert', color: 'warning' },
-    info: { type: 'iInCircle', color: 'default' },
-  };
-
-  if (!Object.keys(icons).includes(icon)) {
-    throw new Error(`Unsupported icon type: ${icon}`);
-  }
-
-  return <EuiIconTip {...rest} type={icons[icon].type} color={icons[icon].color} />;
-};
-
-TooltipIcon.propTypes = {
-  icon: PropTypes.string,
-};
diff --git a/x-pack/legacy/plugins/canvas/public/components/tooltip_icon/tooltip_icon.tsx b/x-pack/legacy/plugins/canvas/public/components/tooltip_icon/tooltip_icon.tsx
new file mode 100644
index 00000000000000..78c2b0ec53c9f0
--- /dev/null
+++ b/x-pack/legacy/plugins/canvas/public/components/tooltip_icon/tooltip_icon.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.
+ */
+
+/* eslint react/forbid-elements: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { EuiIconTip, PropsOf } from '@elastic/eui';
+
+export enum IconType {
+  error = 'error',
+  warning = 'warning',
+  info = 'info',
+}
+
+type EuiIconTipProps = PropsOf<typeof EuiIconTip>;
+
+interface Props extends Omit<EuiIconTipProps, 'type' | 'color'> {
+  icon: IconType;
+}
+
+export const TooltipIcon = ({ icon = IconType.info, ...rest }: Props) => {
+  const icons = {
+    [IconType.error]: { type: 'alert', color: 'danger' },
+    [IconType.warning]: { type: 'alert', color: 'warning' },
+    [IconType.info]: { type: 'iInCircle', color: 'default' },
+  };
+
+  return <EuiIconTip {...rest} type={icons[icon].type} color={icons[icon].color} />;
+};
+
+TooltipIcon.propTypes = {
+  icon: PropTypes.string,
+};
diff --git a/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/simple_template.tsx b/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/simple_template.tsx
index f41a1711e54a89..4d51f9a656b00d 100644
--- a/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/simple_template.tsx
+++ b/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/simple_template.tsx
@@ -10,8 +10,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink, EuiButtonIcon, EuiText } f
 import immutable from 'object-path-immutable';
 import { get } from 'lodash';
 import { ColorPickerPopover } from '../../../components/color_picker_popover';
-// @ts-ignore Untyped local
-import { TooltipIcon } from '../../../components/tooltip_icon';
+import { TooltipIcon, IconType } from '../../../components/tooltip_icon';
 import { ExpressionAST, CanvasWorkpad } from '../../../../types';
 
 const { set, del } = immutable;
@@ -88,7 +87,7 @@ export const SimpleTemplate: FunctionComponent<Props> = props => {
         <EuiFlexItem grow={false}>
           <TooltipIcon
             position="left"
-            icon="warning"
+            icon={IconType.warning}
             content="Data has no series to style, add a color dimension"
           />
         </EuiFlexItem>
diff --git a/x-pack/legacy/plugins/canvas/public/lib/template_from_react_component.tsx b/x-pack/legacy/plugins/canvas/public/lib/template_from_react_component.tsx
index 76dc741a79eb54..f5059dfa04b952 100644
--- a/x-pack/legacy/plugins/canvas/public/lib/template_from_react_component.tsx
+++ b/x-pack/legacy/plugins/canvas/public/lib/template_from_react_component.tsx
@@ -7,6 +7,7 @@
 import React, { ComponentType, FunctionComponent } from 'react';
 import { unmountComponentAtNode, render } from 'react-dom';
 import PropTypes from 'prop-types';
+import { I18nProvider } from '@kbn/i18n/react';
 import { ErrorBoundary } from '../components/enhance/error_boundary';
 import { ArgumentHandlers } from '../../types/arguments';
 
@@ -23,7 +24,11 @@ export const templateFromReactComponent = (Component: ComponentType<any>) => {
           return null;
         }
 
-        return <Component {...props} />;
+        return (
+          <I18nProvider>
+            <Component {...props} />
+          </I18nProvider>
+        );
       }}
     </ErrorBoundary>
   );
diff --git a/x-pack/legacy/plugins/canvas/public/state/reducers/workpad.js b/x-pack/legacy/plugins/canvas/public/state/reducers/workpad.js
index 12a2a2761b4687..40e36a455705b6 100644
--- a/x-pack/legacy/plugins/canvas/public/state/reducers/workpad.js
+++ b/x-pack/legacy/plugins/canvas/public/state/reducers/workpad.js
@@ -5,7 +5,7 @@
  */
 
 import { handleActions } from 'redux-actions';
-import { recentlyAccessed } from 'ui/persisted_log';
+import { npStart } from 'ui/new_platform';
 import { getDefaultWorkpad } from '../defaults';
 import {
   setWorkpad,
@@ -22,7 +22,11 @@ import { APP_ROUTE_WORKPAD } from '../../../common/lib/constants';
 export const workpadReducer = handleActions(
   {
     [setWorkpad]: (workpadState, { payload }) => {
-      recentlyAccessed.add(`${APP_ROUTE_WORKPAD}/${payload.id}`, payload.name, payload.id);
+      npStart.core.chrome.recentlyAccessed.add(
+        `${APP_ROUTE_WORKPAD}/${payload.id}`,
+        payload.name,
+        payload.id
+      );
       return payload;
     },
 
@@ -35,7 +39,11 @@ export const workpadReducer = handleActions(
     },
 
     [setName]: (workpadState, { payload }) => {
-      recentlyAccessed.add(`${APP_ROUTE_WORKPAD}/${workpadState.id}`, payload, workpadState.id);
+      npStart.core.chrome.recentlyAccessed.add(
+        `${APP_ROUTE_WORKPAD}/${workpadState.id}`,
+        payload,
+        workpadState.id
+      );
       return { ...workpadState, name: payload };
     },
 
diff --git a/x-pack/legacy/plugins/code/common/commit_utils.test.ts b/x-pack/legacy/plugins/code/common/commit_utils.test.ts
new file mode 100644
index 00000000000000..9deb15e9a26e75
--- /dev/null
+++ b/x-pack/legacy/plugins/code/common/commit_utils.test.ts
@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { parseCommitMessage } from './commit_utils';
+
+describe('Commit Utils', () => {
+  describe('parseCommitMessage', () => {
+    it('parses the summary from a commit message', () => {
+      const message = "This is a summary\n\nAnd here's the body";
+      const { summary } = parseCommitMessage(message);
+
+      expect(summary).toEqual('This is a summary');
+    });
+
+    it('parses the body from a commit message', () => {
+      const message = "This is a summary\n\nAnd here's the body";
+      const { body } = parseCommitMessage(message);
+
+      expect(body).toEqual("And here's the body");
+    });
+
+    it('includes the second line as body, if erroneously present', () => {
+      const messageWithSecondLine = 'summary\nsecond\ndescription';
+      const { summary, body } = parseCommitMessage(messageWithSecondLine);
+
+      expect(summary).toEqual('summary');
+      expect(body).toEqual('second\ndescription');
+    });
+  });
+});
diff --git a/x-pack/legacy/plugins/code/common/commit_utils.ts b/x-pack/legacy/plugins/code/common/commit_utils.ts
new file mode 100644
index 00000000000000..4a5a6d9f2da5aa
--- /dev/null
+++ b/x-pack/legacy/plugins/code/common/commit_utils.ts
@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+const parseCommitMessage: (message: string) => { summary: string; body: string } = message => {
+  const [summary, ...rest] = message.split('\n');
+  const body = rest.join('\n').trim();
+
+  return { summary, body };
+};
+
+export { parseCommitMessage };
diff --git a/x-pack/legacy/plugins/code/index.ts b/x-pack/legacy/plugins/code/index.ts
index 9e99a0c65485eb..96e2efc793834a 100644
--- a/x-pack/legacy/plugins/code/index.ts
+++ b/x-pack/legacy/plugins/code/index.ts
@@ -7,14 +7,11 @@
 import { RequestQuery, ResponseToolkit, RouteOptions, ServerRoute } from 'hapi';
 import JoiNamespace from 'joi';
 import { Legacy } from 'kibana';
-import moment from 'moment';
 import { resolve } from 'path';
+import { CoreSetup } from 'src/core/server';
 
-import { CoreSetup, PluginInitializerContext } from 'src/core/server';
 import { APP_TITLE } from './common/constants';
 import { codePlugin } from './server';
-import { DEFAULT_WATERMARK_LOW_PERCENTAGE } from './server/disk_watermark';
-import { LanguageServers, LanguageServersDeveloping } from './server/lsp/language_servers';
 
 export type RequestFacade = Legacy.Request;
 export type RequestQueryFacade = RequestQuery;
@@ -25,7 +22,7 @@ export type ServerRouteFacade = ServerRoute;
 
 export const code = (kibana: any) =>
   new kibana.Plugin({
-    require: ['kibana', 'elasticsearch', 'xpack_main'],
+    require: ['kibana', 'elasticsearch'],
     id: 'code',
     configPrefix: 'xpack.code',
     publicDir: resolve(__dirname, 'public'),
@@ -46,98 +43,29 @@ export const code = (kibana: any) =>
       hacks: ['plugins/code/hacks/toggle_app_link_in_nav'],
     },
     config(Joi: typeof JoiNamespace) {
-      const langSwitches: any = {};
-      LanguageServers.forEach(lang => {
-        langSwitches[lang.name] = Joi.object({
-          enabled: Joi.boolean().default(true),
-        });
-      });
-      LanguageServersDeveloping.forEach(lang => {
-        langSwitches[lang.name] = Joi.object({
-          enabled: Joi.boolean().default(false),
-        });
-      });
       return Joi.object({
+        // Still keep this config item here for the injectDefaultVars
+        // in line 40 here.
         ui: Joi.object({
           enabled: Joi.boolean().default(true),
         }).default(),
         enabled: Joi.boolean().default(true),
-        queueIndex: Joi.string().default('.code_internal-worker-queue'),
-        // 1 hour by default.
-        queueTimeoutMs: Joi.number().default(moment.duration(1, 'hour').asMilliseconds()),
-        // The frequency which update scheduler executes. 1 minute by default.
-        updateFrequencyMs: Joi.number().default(moment.duration(1, 'minute').asMilliseconds()),
-        // The frequency which index scheduler executes. 1 day by default.
-        indexFrequencyMs: Joi.number().default(moment.duration(1, 'day').asMilliseconds()),
-        // The frequency which each repo tries to update. 5 minutes by default.
-        updateRepoFrequencyMs: Joi.number().default(moment.duration(5, 'minute').asMilliseconds()),
-        // The frequency which each repo tries to index. 1 day by default.
-        indexRepoFrequencyMs: Joi.number().default(moment.duration(1, 'day').asMilliseconds()),
-        // whether we want to show more logs
-        verbose: Joi.boolean().default(false),
-        lsp: Joi.object({
-          ...langSwitches,
-          // timeout of a request
-          requestTimeoutMs: Joi.number().default(moment.duration(10, 'second').asMilliseconds()),
-          // if we want the language server run in seperately
-          detach: Joi.boolean().default(false),
-          // enable oom_score_adj on linux
-          oomScoreAdj: Joi.boolean().default(true),
-        }).default(),
-        repos: Joi.array().default([]),
-        security: Joi.object({
-          enableMavenImport: Joi.boolean().default(true),
-          enableGradleImport: Joi.boolean().default(false),
-          installGoDependency: Joi.boolean().default(false),
-          installNodeDependency: Joi.boolean().default(true),
-          gitHostWhitelist: Joi.array()
-            .items(Joi.string())
-            .default([
-              'github.com',
-              'gitlab.com',
-              'bitbucket.org',
-              'gitbox.apache.org',
-              'eclipse.org',
-            ]),
-          gitProtocolWhitelist: Joi.array()
-            .items(Joi.string())
-            .default(['https', 'git', 'ssh']),
-          enableGitCertCheck: Joi.boolean().default(true),
-        }).default(),
-        disk: Joi.object({
-          thresholdEnabled: Joi.bool().default(true),
-          watermarkLow: Joi.string().default(`${DEFAULT_WATERMARK_LOW_PERCENTAGE}%`),
-        }).default(),
-        maxWorkspace: Joi.number().default(5), // max workspace folder for each language server
-        enableGlobalReference: Joi.boolean().default(false), // Global reference as optional feature for now
-        enableCommitIndexing: Joi.boolean().default(false),
-        codeNodeUrl: Joi.string(),
-        clustering: Joi.object({
-          enabled: Joi.bool().default(false),
-          codeNodes: Joi.array()
-            .items(
-              Joi.object({
-                id: Joi.string(),
-                address: Joi.string(),
-              })
-            )
-            .default([]),
-        }).default(),
       }).default();
     },
-    init(server: ServerFacade, options: any) {
-      if (!options.ui.enabled) {
+    async init(server: ServerFacade) {
+      // @ts-ignore
+      const initializerContext = server.newPlatform.setup.plugins.code;
+      if (!initializerContext.legacy.config.ui.enabled) {
         return;
       }
 
-      const initializerContext = {} as PluginInitializerContext;
       const coreSetup = ({
         http: { server },
       } as any) as CoreSetup;
 
       // Set up with the new platform plugin lifecycle API.
       const plugin = codePlugin(initializerContext);
-      plugin.setup(coreSetup, options);
+      plugin.setup(coreSetup);
 
       // @ts-ignore
       const kbnServer = this.kbnServer;
diff --git a/x-pack/legacy/plugins/code/kibana.json b/x-pack/legacy/plugins/code/kibana.json
index 03fd3694df5321..5536f1e5957cf9 100644
--- a/x-pack/legacy/plugins/code/kibana.json
+++ b/x-pack/legacy/plugins/code/kibana.json
@@ -3,8 +3,5 @@
   "version": "kibana",
   "server": true,
   "ui": true,
-  "requiredPlugins": [
-    "elasticsearch",
-    "xpack_main"
-  ]
+  "requiredPlugins": ["elasticsearch"]
 }
diff --git a/x-pack/legacy/plugins/code/public/components/admin_page/empty_project.tsx b/x-pack/legacy/plugins/code/public/components/admin_page/empty_project.tsx
index b574dc94805c71..f071fd06f84c92 100644
--- a/x-pack/legacy/plugins/code/public/components/admin_page/empty_project.tsx
+++ b/x-pack/legacy/plugins/code/public/components/admin_page/empty_project.tsx
@@ -4,17 +4,18 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { get } from 'lodash';
 import React from 'react';
 import { Link } from 'react-router-dom';
 
 import { EuiButton, EuiFlexGroup, EuiSpacer, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { capabilities } from 'ui/capabilities';
+import { npStart } from 'ui/new_platform';
 
 import { ImportProject } from './import_project';
 
 export const EmptyProject = () => {
-  const isAdmin = capabilities.get().code.admin as boolean;
+  const isAdmin = get(npStart.core.application.capabilities, 'code.admin') as boolean;
   return (
     <div className="codeTab__projects">
       <EuiSpacer size="xl" />
diff --git a/x-pack/legacy/plugins/code/public/components/admin_page/project_tab.tsx b/x-pack/legacy/plugins/code/public/components/admin_page/project_tab.tsx
index d5e0f4a52d12df..56f518fc82aa45 100644
--- a/x-pack/legacy/plugins/code/public/components/admin_page/project_tab.tsx
+++ b/x-pack/legacy/plugins/code/public/components/admin_page/project_tab.tsx
@@ -27,9 +27,11 @@ import {
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import moment from 'moment';
+import { get } from 'lodash';
 import React, { ChangeEvent } from 'react';
 import { connect } from 'react-redux';
-import { capabilities } from 'ui/capabilities';
+import { npStart } from 'ui/new_platform';
+
 import { Repository } from '../../../model';
 import { closeToast, importRepo, RepoStatus } from '../../actions';
 import { RootState } from '../../reducers';
@@ -250,7 +252,7 @@ class CodeProjectTab extends React.PureComponent<Props, State> {
         project={repo}
         showStatus={true}
         status={status[repo.uri]}
-        enableManagement={capabilities.get().code.admin as boolean}
+        enableManagement={get(npStart.core.application.capabilities, 'code.admin') as boolean}
       />
     ));
 
@@ -292,7 +294,7 @@ class CodeProjectTab extends React.PureComponent<Props, State> {
           <EuiFlexItem grow />
           <EuiFlexItem grow />
           <EuiFlexItem>
-            {(capabilities.get().code.admin as boolean) && (
+            {(get(npStart.core.application.capabilities, 'code.admin') as boolean) && (
               // @ts-ignore
               <EuiButton
                 className="codeButton__projectImport"
diff --git a/x-pack/legacy/plugins/code/public/components/codeblock/codeblock.tsx b/x-pack/legacy/plugins/code/public/components/codeblock/codeblock.tsx
index ff83b93a144cd6..910129eb1a3c13 100644
--- a/x-pack/legacy/plugins/code/public/components/codeblock/codeblock.tsx
+++ b/x-pack/legacy/plugins/code/public/components/codeblock/codeblock.tsx
@@ -7,7 +7,8 @@
 import { EuiPanel } from '@elastic/eui';
 import { editor, IPosition, IRange } from 'monaco-editor';
 import React from 'react';
-import { ResizeChecker } from 'ui/resize_checker';
+
+import { ResizeChecker } from '../shared/resize_checker';
 import { monaco } from '../../monaco/monaco';
 import { registerEditor } from '../../monaco/single_selection_helper';
 
diff --git a/x-pack/legacy/plugins/code/public/components/commits/__snapshots__/commit.test.tsx.snap b/x-pack/legacy/plugins/code/public/components/commits/__snapshots__/commit.test.tsx.snap
new file mode 100644
index 00000000000000..fc4db9ed95bf1e
--- /dev/null
+++ b/x-pack/legacy/plugins/code/public/components/commits/__snapshots__/commit.test.tsx.snap
@@ -0,0 +1,235 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Commit component renders correctly for a commit 1`] = `
+<Commit
+  commit={
+    Object {
+      "author": "author",
+      "committer": "committer",
+      "id": "4ba67b8",
+      "message": "This is my commit message
+
+This is the description",
+      "parents": Array [
+        "9817575",
+      ],
+      "treeId": "96440ceb55e04a99d33c1c8ee021400a680fbf74",
+      "updated": 2222-11-11T00:00:00.000Z,
+    }
+  }
+  date="11/11/2222"
+  repoUri="github.com/elastic/code"
+  showRepoLink={false}
+>
+  <EuiPanel
+    className="code-timeline__commit--root"
+  >
+    <div
+      className="euiPanel euiPanel--paddingMedium code-timeline__commit--root"
+    >
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="none"
+        justifyContent="spaceBetween"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <div
+            className="eui-textTruncate"
+          >
+            <EuiTitle
+              className="eui-textTruncate"
+              size="xxs"
+            >
+              <h4
+                className="euiTitle euiTitle--xxsmall eui-textTruncate"
+              >
+                This is my commit message
+              </h4>
+            </EuiTitle>
+            <EuiText
+              className="commit__metadata"
+              size="xs"
+            >
+              <div
+                className="euiText euiText--extraSmall commit__metadata"
+              >
+                <EuiTextColor
+                  color="subdued"
+                >
+                  <span
+                    className="euiTextColor euiTextColor--subdued"
+                  >
+                    <FormattedMessage
+                      defaultMessage="Committed on {date} by {committer}"
+                      id="xpack.code.commits.committedDescription"
+                      values={
+                        Object {
+                          "committer": "committer",
+                          "date": "11/11/2222",
+                        }
+                      }
+                    >
+                      <span>
+                        Committed on 11/11/2222 by committer
+                      </span>
+                    </FormattedMessage>
+                  </span>
+                </EuiTextColor>
+              </div>
+            </EuiText>
+            <EuiText
+              size="s"
+            >
+              <div
+                className="euiText euiText--small"
+              >
+                <p
+                  className="eui-textTruncate"
+                >
+                  This is the description
+                </p>
+              </div>
+            </EuiText>
+          </div>
+          <CommitActions
+            commitId="4ba67b8"
+            repoUri="github.com/elastic/code"
+          >
+            <div
+              className="commit__actions"
+            >
+              <EuiCopy
+                afterMessage="Copied"
+                textToCopy="4ba67b8"
+              >
+                <EuiToolTip
+                  delay="regular"
+                  onMouseOut={[Function]}
+                  position="top"
+                >
+                  <span
+                    className="euiToolTipAnchor"
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                  >
+                    <EuiButtonIcon
+                      aria-label="Copy the full commit ID"
+                      iconType="copyClipboard"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                    >
+                      <button
+                        aria-label="Copy the full commit ID"
+                        className="euiButtonIcon euiButtonIcon--primary"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        type="button"
+                      >
+                        <EuiIcon
+                          aria-hidden="true"
+                          className="euiButtonIcon__icon"
+                          size="m"
+                          type="copyClipboard"
+                        >
+                          <EuiIconEmpty
+                            aria-hidden="true"
+                            className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
+                            focusable="false"
+                            style={null}
+                          >
+                            <svg
+                              aria-hidden="true"
+                              className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
+                              focusable="false"
+                              height={16}
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            />
+                          </EuiIconEmpty>
+                        </EuiIcon>
+                      </button>
+                    </EuiButtonIcon>
+                  </span>
+                </EuiToolTip>
+              </EuiCopy>
+              <EuiButtonEmpty
+                aria-label="View the project at this commit"
+                className="commit__diff-link"
+                href="#/github.com/elastic/code/tree/4ba67b8"
+              >
+                <a
+                  aria-label="View the project at this commit"
+                  className="euiButtonEmpty euiButtonEmpty--primary commit__diff-link"
+                  href="#/github.com/elastic/code/tree/4ba67b8"
+                  rel="noreferrer"
+                >
+                  <span
+                    className="euiButtonEmpty__content"
+                  >
+                    <span
+                      className="euiButtonEmpty__text"
+                    >
+                      <EuiText
+                        size="s"
+                      >
+                        <div
+                          className="euiText euiText--small"
+                        >
+                          4ba67b8
+                        </div>
+                      </EuiText>
+                    </span>
+                  </span>
+                </a>
+              </EuiButtonEmpty>
+              <EuiButtonIcon
+                aria-label="View the project at this commit"
+                href="#/github.com/elastic/code/tree/4ba67b8"
+                iconType="editorCodeBlock"
+              >
+                <a
+                  aria-label="View the project at this commit"
+                  className="euiButtonIcon euiButtonIcon--primary"
+                  href="#/github.com/elastic/code/tree/4ba67b8"
+                  rel="noreferrer"
+                >
+                  <EuiIcon
+                    aria-hidden="true"
+                    className="euiButtonIcon__icon"
+                    size="m"
+                    type="editorCodeBlock"
+                  >
+                    <EuiIconEmpty
+                      aria-hidden="true"
+                      className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
+                      focusable="false"
+                      style={null}
+                    >
+                      <svg
+                        aria-hidden="true"
+                        className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
+                        focusable="false"
+                        height={16}
+                        style={null}
+                        viewBox="0 0 16 16"
+                        width={16}
+                        xmlns="http://www.w3.org/2000/svg"
+                      />
+                    </EuiIconEmpty>
+                  </EuiIcon>
+                </a>
+              </EuiButtonIcon>
+            </div>
+          </CommitActions>
+        </div>
+      </EuiFlexGroup>
+    </div>
+  </EuiPanel>
+</Commit>
+`;
diff --git a/x-pack/legacy/plugins/code/public/components/commits/commit.test.tsx b/x-pack/legacy/plugins/code/public/components/commits/commit.test.tsx
new file mode 100644
index 00000000000000..1c87f7cc72235c
--- /dev/null
+++ b/x-pack/legacy/plugins/code/public/components/commits/commit.test.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 from 'react';
+import { mount } from 'enzyme';
+import toJson from 'enzyme-to-json';
+
+import { Commit } from './commit';
+import { CommitInfo } from '../../../model/commit';
+
+describe('Commit component', () => {
+  test('renders correctly for a commit', () => {
+    const commitInfo: CommitInfo = {
+      updated: new Date(Date.UTC(2222, 10, 11)),
+      message: 'This is my commit message\n\nThis is the description',
+      author: 'author',
+      committer: 'committer',
+      id: '4ba67b8',
+      parents: ['9817575'],
+      treeId: '96440ceb55e04a99d33c1c8ee021400a680fbf74',
+    };
+    const wrapper = mount(
+      <Commit
+        showRepoLink={false}
+        commit={commitInfo}
+        date="11/11/2222"
+        repoUri="github.com/elastic/code"
+      />
+    );
+
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+});
diff --git a/x-pack/legacy/plugins/code/public/components/commits/commit.tsx b/x-pack/legacy/plugins/code/public/components/commits/commit.tsx
new file mode 100644
index 00000000000000..31020f65983935
--- /dev/null
+++ b/x-pack/legacy/plugins/code/public/components/commits/commit.tsx
@@ -0,0 +1,119 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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 {
+  EuiButtonIcon,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiLink,
+  EuiPanel,
+  EuiText,
+  EuiTextColor,
+  EuiCopy,
+  EuiTitle,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { CommitInfo } from '../../../model/commit';
+import { PathTypes } from '../../common/types';
+import { RepositoryUtils } from '../../../common/repository_utils';
+import { parseCommitMessage } from '../../../common/commit_utils';
+
+const COMMIT_ID_LENGTH = 8;
+
+const RepoLink = ({ repoUri }: { repoUri: string }) => {
+  const repoOrg = RepositoryUtils.orgNameFromUri(repoUri);
+  const repoName = RepositoryUtils.repoNameFromUri(repoUri);
+  const repoPath = `#/${repoUri}`;
+
+  return (
+    <>
+      <EuiLink href={repoPath}>
+        {repoOrg} / {repoName}
+      </EuiLink>
+      <EuiTextColor color="subdued" className="commit__inline-separator">
+        •
+      </EuiTextColor>
+    </>
+  );
+};
+
+interface ActionProps {
+  repoUri: string;
+  commitId: string;
+}
+
+const copyLabel = i18n.translate('xpack.code.commits.copyCommitAriaLabel', {
+  defaultMessage: 'Copy the full commit ID',
+});
+const revisionLinkLabel = i18n.translate('xpack.code.commits.revisionLinkAriaLabel', {
+  defaultMessage: 'View the project at this commit',
+});
+
+const CommitActions = ({ commitId, repoUri }: ActionProps) => {
+  const revisionPath = `#/${repoUri}/${PathTypes.tree}/${commitId}`;
+
+  return (
+    <div className="commit__actions">
+      <EuiCopy textToCopy={commitId}>
+        {copy => <EuiButtonIcon aria-label={copyLabel} onClick={copy} iconType="copyClipboard" />}
+      </EuiCopy>
+      <EuiButtonEmpty
+        className="commit__diff-link"
+        href={revisionPath}
+        aria-label={revisionLinkLabel}
+      >
+        <EuiText size="s">{commitId}</EuiText>
+      </EuiButtonEmpty>
+      <EuiButtonIcon
+        href={revisionPath}
+        aria-label={revisionLinkLabel}
+        iconType="editorCodeBlock"
+      />
+    </div>
+  );
+};
+
+interface Props {
+  commit: CommitInfo;
+  date: string;
+  repoUri: string;
+  showRepoLink: boolean;
+}
+
+export const Commit = (props: Props) => {
+  const { date, commit, repoUri, showRepoLink } = props;
+  const { message, committer, id } = commit;
+  const { summary, body } = parseCommitMessage(message);
+  const commitId = id.substring(0, COMMIT_ID_LENGTH);
+
+  return (
+    <EuiPanel className="code-timeline__commit--root">
+      <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween" alignItems="center">
+        <div className="eui-textTruncate">
+          <EuiTitle size="xxs" className="eui-textTruncate">
+            <h4>{summary}</h4>
+          </EuiTitle>
+          <EuiText size="xs" className="commit__metadata">
+            {showRepoLink && <RepoLink repoUri={repoUri} />}
+            <EuiTextColor color="subdued">
+              <FormattedMessage
+                id="xpack.code.commits.committedDescription"
+                defaultMessage="Committed on {date} by {committer}"
+                values={{ committer, date }}
+              />
+            </EuiTextColor>
+          </EuiText>
+          <EuiText size="s">
+            <p className="eui-textTruncate">{body}</p>
+          </EuiText>
+        </div>
+        <CommitActions repoUri={repoUri} commitId={commitId} />
+      </EuiFlexGroup>
+    </EuiPanel>
+  );
+};
diff --git a/x-pack/legacy/plugins/code/public/components/diff_page/commit_link.tsx b/x-pack/legacy/plugins/code/public/components/commits/commit_link.tsx
similarity index 100%
rename from x-pack/legacy/plugins/code/public/components/diff_page/commit_link.tsx
rename to x-pack/legacy/plugins/code/public/components/commits/commit_link.tsx
diff --git a/x-pack/legacy/plugins/code/public/components/commits/group.tsx b/x-pack/legacy/plugins/code/public/components/commits/group.tsx
new file mode 100644
index 00000000000000..01c2844d38622e
--- /dev/null
+++ b/x-pack/legacy/plugins/code/public/components/commits/group.tsx
@@ -0,0 +1,53 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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, EuiText, EuiTextColor } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { CommitInfo } from '../../../model/commit';
+import { Commit } from './commit';
+
+interface Props {
+  commits: CommitInfo[];
+  date: string;
+  repoUri: string;
+}
+
+export const CommitGroup = (props: Props) => {
+  const commitList = props.commits.map(commit => (
+    <Commit
+      commit={commit}
+      key={commit.id}
+      date={props.date}
+      repoUri={props.repoUri}
+      showRepoLink={false}
+    />
+  ));
+
+  return (
+    <div className="code-timeline__commit-container">
+      <EuiFlexGroup justifyContent="flexStart" gutterSize="s">
+        <EuiFlexItem grow={false}>
+          <div className="code-timeline__marker" />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiText>
+            <h4>
+              <EuiTextColor color="subdued">
+                <FormattedMessage
+                  id="xpack.code.mainPage.history.commitsOnTitle"
+                  defaultMessage="Commits on {date}"
+                  values={{ date: props.date }}
+                />
+              </EuiTextColor>
+            </h4>
+          </EuiText>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <div className="code-timeline">{commitList}</div>
+    </div>
+  );
+};
diff --git a/x-pack/legacy/plugins/code/public/components/main/commit_history.tsx b/x-pack/legacy/plugins/code/public/components/commits/history.tsx
similarity index 57%
rename from x-pack/legacy/plugins/code/public/components/main/commit_history.tsx
rename to x-pack/legacy/plugins/code/public/components/commits/history.tsx
index e731c43fd439f3..590e081dc29675 100644
--- a/x-pack/legacy/plugins/code/public/components/main/commit_history.tsx
+++ b/x-pack/legacy/plugins/code/public/components/commits/history.tsx
@@ -4,97 +4,27 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import {
-  EuiButton,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiLoadingSpinner,
-  EuiPanel,
-  EuiText,
-  EuiTextColor,
-} from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
-
 import _ from 'lodash';
 import moment from 'moment';
 import React from 'react';
 import { connect } from 'react-redux';
 import { i18n } from '@kbn/i18n';
+import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+import { CommitGroup } from './group';
 import { CommitInfo } from '../../../model/commit';
-import { CommitLink } from '../diff_page/commit_link';
 import { RootState } from '../../reducers';
 import { hasMoreCommitsSelector, treeCommitsSelector } from '../../selectors';
 import { fetchMoreCommits } from '../../actions';
 
-const COMMIT_ID_LENGTH = 8;
-
-const Commit = (props: { commit: CommitInfo; date: string; repoUri: string }) => {
-  const { date, commit } = props;
-  const { message, committer, id } = commit;
-  const commitId = id
-    .split('')
-    .slice(0, COMMIT_ID_LENGTH)
-    .join('');
-  return (
-    <EuiPanel className="code-timeline__commit--root">
-      <div className="eui-textTruncate">
-        <EuiText size="s">
-          <p className="eui-textTruncate">{message}</p>
-        </EuiText>
-        <EuiText size="xs">
-          <EuiTextColor color="subdued">
-            {committer} · {date}
-          </EuiTextColor>
-        </EuiText>
-      </div>
-      <div className="code-commit-id">
-        <CommitLink repoUri={props.repoUri} commit={commitId} />
-      </div>
-    </EuiPanel>
-  );
-};
-
-const CommitGroup = (props: { commits: CommitInfo[]; date: string; repoUri: string }) => {
-  const commitList = props.commits.map(commit => (
-    <Commit commit={commit} key={commit.id} date={props.date} repoUri={props.repoUri} />
-  ));
-  return (
-    <div className="code-timeline__commit-container">
-      <EuiFlexGroup justifyContent="flexStart" gutterSize="s">
-        <EuiFlexItem grow={false}>
-          <div className="code-timeline__marker" />
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiText>
-            <h4>
-              <EuiTextColor color="subdued">
-                <FormattedMessage
-                  id="xpack.code.mainPage.history.commitsOnTitle"
-                  defaultMessage="Commits on {date}"
-                  values={{ date: props.date }}
-                />{' '}
-                {}
-              </EuiTextColor>
-            </h4>
-          </EuiText>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-      <div className="code-timeline">{commitList}</div>
-    </div>
-  );
-};
-
-export const CommitHistoryLoading = () => (
+const CommitHistoryLoading = () => (
   <div className="codeLoader">
     <EuiLoadingSpinner size="xl" />
   </div>
 );
 
-export const PageButtons = (props: {
-  loading?: boolean;
-  disabled: boolean;
-  onClick: () => void;
-}) => (
+const PageButtons = (props: { loading?: boolean; disabled: boolean; onClick: () => void }) => (
   <EuiFlexGroup justifyContent="spaceAround">
     <EuiFlexItem grow={false}>
       <EuiButton
@@ -111,7 +41,7 @@ export const PageButtons = (props: {
 );
 
 const commitDateFormatMap: { [key: string]: string } = {
-  en: 'MMMM Do, YYYY',
+  en: 'MMM Do, YYYY',
   'zh-cn': 'YYYY年MoDo',
 };
 
@@ -166,5 +96,4 @@ const mapDispatchToProps = {
 export const CommitHistory = connect(
   mapStateToProps,
   mapDispatchToProps
-  // @ts-ignore
 )(CommitHistoryComponent);
diff --git a/x-pack/legacy/plugins/code/public/components/commits/index.ts b/x-pack/legacy/plugins/code/public/components/commits/index.ts
new file mode 100644
index 00000000000000..bd751bc90dd3b6
--- /dev/null
+++ b/x-pack/legacy/plugins/code/public/components/commits/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 { Commit } from './commit';
+export { CommitLink } from './commit_link';
+export { CommitGroup } from './group';
+export { CommitHistory, CommitHistoryComponent } from './history';
diff --git a/x-pack/legacy/plugins/code/public/components/main/content.tsx b/x-pack/legacy/plugins/code/public/components/main/content.tsx
index e9dfd358d37864..c9179f694a740e 100644
--- a/x-pack/legacy/plugins/code/public/components/main/content.tsx
+++ b/x-pack/legacy/plugins/code/public/components/main/content.tsx
@@ -54,7 +54,7 @@ import { encodeRevisionString } from '../../../common/uri_util';
 import { history } from '../../utils/url';
 import { Editor } from '../editor/editor';
 import { CloneStatus } from './clone_status';
-import { CommitHistory } from './commit_history';
+import { CommitHistory } from '../commits';
 import { Directory } from './directory';
 import { ErrorPanel } from './error_panel';
 import { NotFound } from './not_found';
diff --git a/x-pack/legacy/plugins/code/public/components/main/main.scss b/x-pack/legacy/plugins/code/public/components/main/main.scss
index 58776fe1cec6fa..e256cc5a9b67b4 100644
--- a/x-pack/legacy/plugins/code/public/components/main/main.scss
+++ b/x-pack/legacy/plugins/code/public/components/main/main.scss
@@ -99,9 +99,6 @@
 }
 
 .euiPanel.code-timeline__commit--root {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
   &:not(:first-child) {
     border-top: none;
   }
@@ -272,14 +269,6 @@
   min-width: unset !important;
 }
 
-.code-commit-id {
-  @include euiCodeFont;
-  height: calc(20rem / 14);
-  margin: auto 0 auto $euiSizeM;
-  text-align: center;
-  flex-shrink: 0;
-}
-
 .code-line-decoration {
   border-right: $euiBorderThick;
   margin-left: $euiSize;
diff --git a/x-pack/legacy/plugins/code/public/components/main/side_tabs.tsx b/x-pack/legacy/plugins/code/public/components/main/side_tabs.tsx
index 688d196495e21a..4bc271ce9254da 100644
--- a/x-pack/legacy/plugins/code/public/components/main/side_tabs.tsx
+++ b/x-pack/legacy/plugins/code/public/components/main/side_tabs.tsx
@@ -8,9 +8,10 @@ import { EuiLoadingSpinner, EuiSpacer, EuiTabbedContent, EuiText } from '@elasti
 import { parse as parseQuery } from 'querystring';
 import React from 'react';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
-import { QueryString } from 'ui/utils/query_string';
 import { i18n } from '@kbn/i18n';
+
 import { MainRouteParams } from '../../common/types';
+import { replaceParamInUrl } from '../../utils/query_string';
 import { FileTree } from '../file_tree/file_tree';
 import { Shortcut } from '../shortcuts';
 import { SymbolTree } from '../symbol_tree/symbol_tree';
@@ -109,8 +110,7 @@ class CodeSideTabs extends React.PureComponent<Props> {
   public switchTab = (tab: Tabs) => {
     const { history } = this.props;
     const { pathname, search } = history.location;
-    // @ts-ignore
-    history.push(QueryString.replaceParamInUrl(`${pathname}${search}`, 'sideTab', tab));
+    history.push(replaceParamInUrl(`${pathname}${search}`, 'sideTab', tab));
   };
 
   public render() {
diff --git a/x-pack/legacy/plugins/code/public/components/search_page/search.tsx b/x-pack/legacy/plugins/code/public/components/search_page/search.tsx
index 2813fbd389a8aa..8ccc46d09502f8 100644
--- a/x-pack/legacy/plugins/code/public/components/search_page/search.tsx
+++ b/x-pack/legacy/plugins/code/public/components/search_page/search.tsx
@@ -9,9 +9,10 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import querystring from 'querystring';
 import React from 'react';
 import { connect } from 'react-redux';
-import chrome from 'ui/chrome';
 import url from 'url';
+import { npStart } from 'ui/new_platform';
 
+import { APP_TITLE } from '../../../common/constants';
 import { DocumentSearchResult, SearchOptions, SearchScope } from '../../../model';
 import { changeSearchScope } from '../../actions';
 import { RootState } from '../../reducers';
@@ -53,11 +54,16 @@ class SearchPage extends React.PureComponent<Props, State> {
   public componentDidMount() {
     // track search page load count
     trackCodeUiMetric(METRIC_TYPE.LOADED, CodeUIUsageMetrics.SEARCH_PAGE_LOAD_COUNT);
-    chrome.breadcrumbs.push({ text: `Search` });
+    npStart.core.chrome.setBreadcrumbs([
+      { text: APP_TITLE, href: '#/' },
+      {
+        text: 'Search',
+      },
+    ]);
   }
 
   public componentWillUnmount() {
-    chrome.breadcrumbs.pop();
+    npStart.core.chrome.setBreadcrumbs([{ text: APP_TITLE, href: '#/' }]);
   }
 
   public onLanguageFilterToggled = (lang: string) => {
diff --git a/x-pack/legacy/plugins/code/public/components/shared/resize_checker.tsx b/x-pack/legacy/plugins/code/public/components/shared/resize_checker.tsx
new file mode 100644
index 00000000000000..9693f4870c5b89
--- /dev/null
+++ b/x-pack/legacy/plugins/code/public/components/shared/resize_checker.tsx
@@ -0,0 +1,111 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+/**
+ * Copied from `ui/resize_checker` because of NP migration.
+ */
+
+import { EventEmitter } from 'events';
+import $ from 'jquery';
+import { isEqual } from 'lodash';
+import ResizeObserver from 'resize-observer-polyfill';
+
+function validateElArg(el: HTMLElement) {
+  // the ResizeChecker historically accepted jquery elements,
+  // so we wrap in jQuery then extract the element
+  const $el = $(el);
+
+  if ($el.length !== 1) {
+    throw new TypeError('ResizeChecker must be constructed with a single DOM element.');
+  }
+
+  return $el.get(0);
+}
+
+function getSize(el: HTMLElement): [number, number] {
+  return [el.clientWidth, el.clientHeight];
+}
+
+/**
+ *  ResizeChecker receives an element and emits a "resize" event every time it changes size.
+ */
+export class ResizeChecker extends EventEmitter {
+  private destroyed: boolean = false;
+  private el: HTMLElement | null;
+  private observer: ResizeObserver | null;
+  private expectedSize: [number, number] | null = null;
+
+  constructor(el: HTMLElement, args: { disabled?: boolean } = {}) {
+    super();
+
+    this.el = validateElArg(el);
+
+    this.observer = new ResizeObserver(() => {
+      if (this.expectedSize) {
+        const sameSize = isEqual(getSize(el), this.expectedSize);
+        this.expectedSize = null;
+
+        if (sameSize) {
+          // don't trigger resize notification if the size is what we expect
+          return;
+        }
+      }
+
+      this.emit('resize');
+    });
+
+    // Only enable the checker immediately if args.disabled wasn't set to true
+    if (!args.disabled) {
+      this.enable();
+    }
+  }
+
+  public enable() {
+    if (this.destroyed) {
+      // Don't allow enabling an already destroyed resize checker
+      return;
+    }
+    // the width and height of the element that we expect to see
+    // on the next resize notification. If it matches the size at
+    // the time of starting observing then it we will be ignored.
+    // We know that observer and el are not null since we are not yet destroyed.
+    this.expectedSize = getSize(this.el!);
+    this.observer!.observe(this.el!);
+  }
+
+  /**
+   *  Run a function and ignore all resizes that occur
+   *  while it's running.
+   */
+  public modifySizeWithoutTriggeringResize(block: () => void): void {
+    try {
+      block();
+    } finally {
+      if (this.el) {
+        this.expectedSize = getSize(this.el);
+      }
+    }
+  }
+
+  /**
+   * Tell the ResizeChecker to shutdown, stop listenings, and never
+   * emit another resize event.
+   *
+   * Cleans up it's listeners and timers.
+   */
+  public destroy(): void {
+    if (this.destroyed) {
+      return;
+    }
+    this.destroyed = true;
+
+    this.observer!.disconnect();
+    this.observer = null;
+    this.expectedSize = null;
+    this.el = null;
+    this.removeAllListeners();
+  }
+}
diff --git a/x-pack/legacy/plugins/code/public/index.scss b/x-pack/legacy/plugins/code/public/index.scss
index 0ea2cdf5b7300c..aecaa46272dedf 100644
--- a/x-pack/legacy/plugins/code/public/index.scss
+++ b/x-pack/legacy/plugins/code/public/index.scss
@@ -17,4 +17,5 @@
 @import "./style/monaco";
 @import "./style/filetree";
 @import "./style/query_bar";
+@import "./style/commits";
 @import "./style/filters";
diff --git a/x-pack/legacy/plugins/code/public/monaco/monaco_diff_editor.ts b/x-pack/legacy/plugins/code/public/monaco/monaco_diff_editor.ts
index 98486da772d84a..12cb75825cb641 100644
--- a/x-pack/legacy/plugins/code/public/monaco/monaco_diff_editor.ts
+++ b/x-pack/legacy/plugins/code/public/monaco/monaco_diff_editor.ts
@@ -3,7 +3,8 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { ResizeChecker } from 'ui/resize_checker';
+
+import { ResizeChecker } from '../components/shared/resize_checker';
 import { monaco } from './monaco';
 export class MonacoDiffEditor {
   public diffEditor: monaco.editor.IDiffEditor | null = null;
diff --git a/x-pack/legacy/plugins/code/public/monaco/monaco_helper.ts b/x-pack/legacy/plugins/code/public/monaco/monaco_helper.ts
index cf185d4eb3e658..3dee78b9be803a 100644
--- a/x-pack/legacy/plugins/code/public/monaco/monaco_helper.ts
+++ b/x-pack/legacy/plugins/code/public/monaco/monaco_helper.ts
@@ -5,7 +5,8 @@
  */
 
 import { editor } from 'monaco-editor';
-import { ResizeChecker } from 'ui/resize_checker';
+
+import { ResizeChecker } from '../components/shared/resize_checker';
 import { EditorActions } from '../components/editor/editor';
 
 import { toCanonicalUrl } from '../../common/uri_util';
diff --git a/x-pack/legacy/plugins/code/public/style/_commits.scss b/x-pack/legacy/plugins/code/public/style/_commits.scss
new file mode 100644
index 00000000000000..edf212fe03224b
--- /dev/null
+++ b/x-pack/legacy/plugins/code/public/style/_commits.scss
@@ -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.
+ */
+
+.commit__actions {
+  flex-shrink: 0;
+  margin-left: $euiSizeXL;
+}
+
+.commit__metadata {
+  margin-bottom: $euiSizeXS;
+}
+
+.commit__inline-separator {
+  margin: 0 $euiSizeS;
+}
+
+.commit__diff-link {
+  @include euiCodeFont;
+}
diff --git a/x-pack/legacy/plugins/code/public/utils/query_string.ts b/x-pack/legacy/plugins/code/public/utils/query_string.ts
new file mode 100644
index 00000000000000..6fc98f3dd44376
--- /dev/null
+++ b/x-pack/legacy/plugins/code/public/utils/query_string.ts
@@ -0,0 +1,119 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+/**
+ * Copied from `ui/utils/query_string` because of NP migration.
+ */
+
+function encodeQueryComponent(val: string, pctEncodeSpaces = false) {
+  return encodeURIComponent(val)
+    .replace(/%40/gi, '@')
+    .replace(/%3A/gi, ':')
+    .replace(/%24/g, '$')
+    .replace(/%2C/gi, ',')
+    .replace(/%20/g, pctEncodeSpaces ? '%20' : '+');
+}
+
+function tryDecodeURIComponent(value: string) {
+  try {
+    return decodeURIComponent(value);
+  } catch (e) {} // eslint-disable-line no-empty
+}
+
+/**
+ * Parses an escaped url query string into key-value pairs.
+ * @returns {Object.<string,boolean|Array>}
+ */
+const decode = (keyValue: any) => {
+  const obj: { [s: string]: any } = {};
+  let keyValueParts;
+  let key;
+
+  (keyValue || '').split('&').forEach((keyVal: any) => {
+    if (keyVal) {
+      keyValueParts = keyVal.split('=');
+      key = tryDecodeURIComponent(keyValueParts[0]);
+      if (key !== void 0) {
+        const val = keyValueParts[1] !== void 0 ? tryDecodeURIComponent(keyValueParts[1]) : true;
+        if (!obj[key]) {
+          obj[key] = val;
+        } else if (Array.isArray(obj[key])) {
+          obj[key].push(val);
+        } else {
+          obj[key] = [obj[key], val];
+        }
+      }
+    }
+  });
+  return obj;
+};
+
+/**
+ * Creates a queryString out of an object
+ * @param  {Object} obj
+ * @return {String}
+ */
+const encode = (obj: any) => {
+  const parts: any[] = [];
+  const keys = Object.keys(obj).sort();
+  keys.forEach((key: any) => {
+    const value = obj[key];
+    if (Array.isArray(value)) {
+      value.forEach((arrayValue: any) => {
+        parts.push(param(key, arrayValue));
+      });
+    } else {
+      parts.push(param(key, value));
+    }
+  });
+  return parts.length ? parts.join('&') : '';
+};
+
+const param = (key: string, val: any) => {
+  return (
+    encodeQueryComponent(key, true) + (val === true ? '' : '=' + encodeQueryComponent(val, true))
+  );
+};
+
+/**
+ * Extracts the query string from a url
+ * @param  {String} url
+ * @return {Object} - returns an object describing the start/end index of the url in the string. The indices will be
+ *                    the same if the url does not have a query string
+ */
+const findInUrl = (url: string) => {
+  let qsStart = url.indexOf('?');
+  let hashStart = url.lastIndexOf('#');
+
+  if (hashStart === -1) {
+    // out of bounds
+    hashStart = url.length;
+  }
+
+  if (qsStart === -1) {
+    qsStart = hashStart;
+  }
+
+  return {
+    start: qsStart,
+    end: hashStart,
+  };
+};
+
+export const replaceParamInUrl = (url: string, p: string, newVal: any) => {
+  const loc = findInUrl(url);
+  const parsed = decode(url.substring(loc.start + 1, loc.end));
+
+  if (newVal != null) {
+    parsed[p] = newVal;
+  } else {
+    delete parsed[p];
+  }
+
+  const chars = url.split('');
+  chars.splice(loc.start, loc.end - loc.start, '?' + encode(parsed));
+  return chars.join('');
+};
diff --git a/x-pack/legacy/plugins/code/scripts/mocha.js b/x-pack/legacy/plugins/code/scripts/mocha.js
index 8c66d6090fd216..dd543f32e5d404 100644
--- a/x-pack/legacy/plugins/code/scripts/mocha.js
+++ b/x-pack/legacy/plugins/code/scripts/mocha.js
@@ -4,4 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-require('./_helpers').runXPackScript('mocha', ['legacy/plugins/code/server/__tests__/*.{ts,tsx}']);
+require('./_helpers').runKibanaScript('mocha', ['x-pack/legacy/plugins/code/server/__tests__/*.{ts,tsx}']);
diff --git a/x-pack/legacy/plugins/code/server/distributed/apis/workspace_api.ts b/x-pack/legacy/plugins/code/server/distributed/apis/workspace_api.ts
index 19fa9fc937d965..e370efe0f37f61 100644
--- a/x-pack/legacy/plugins/code/server/distributed/apis/workspace_api.ts
+++ b/x-pack/legacy/plugins/code/server/distributed/apis/workspace_api.ts
@@ -4,12 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Server } from 'hapi';
 import { ServiceHandlerFor } from '../service_definition';
 import { WorkspaceHandler } from '../../lsp/workspace_handler';
 import { RepoConfig } from '../../../model';
 import { WorkspaceCommand } from '../../lsp/workspace_command';
-import { Logger } from '../../log';
+import { LoggerFactory as CodeLoggerFactory } from '../../utils/log_factory';
 
 export const WorkspaceDefinition = {
   initCmd: {
@@ -19,7 +18,7 @@ export const WorkspaceDefinition = {
 };
 
 export const getWorkspaceHandler = (
-  server: Server,
+  loggerFactory: CodeLoggerFactory,
   workspaceHandler: WorkspaceHandler
 ): ServiceHandlerFor<typeof WorkspaceDefinition> => ({
   async initCmd({ repoUri, revision, repoConfig, force }) {
@@ -28,9 +27,13 @@ export const getWorkspaceHandler = (
         repoUri,
         revision
       );
-      const log = new Logger(server, ['workspace', repoUri]);
 
-      const workspaceCmd = new WorkspaceCommand(repoConfig, workspaceDir, workspaceRevision, log);
+      const workspaceCmd = new WorkspaceCommand(
+        repoConfig,
+        workspaceDir,
+        workspaceRevision,
+        loggerFactory.getLogger(['workspace', repoUri])
+      );
       await workspaceCmd.runInit(force);
       return {};
     } catch (e) {
diff --git a/x-pack/legacy/plugins/code/server/distributed/code_services.test.ts b/x-pack/legacy/plugins/code/server/distributed/code_services.test.ts
index eaefdaf5448e21..5f5319730c2586 100644
--- a/x-pack/legacy/plugins/code/server/distributed/code_services.test.ts
+++ b/x-pack/legacy/plugins/code/server/distributed/code_services.test.ts
@@ -3,6 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+
 import { Request, Server } from 'hapi';
 import { createTestHapiServer } from '../test_utils';
 import { LocalHandlerAdapter } from './local_handler_adapter';
@@ -13,9 +14,10 @@ import { DEFAULT_SERVICE_OPTION } from './service_handler_adapter';
 import { NonCodeNodeAdapter } from './multinode/non_code_node_adapter';
 import { CodeServices } from './code_services';
 import { Logger } from '../log';
+import { ConsoleLoggerFactory } from '../utils/console_logger_factory';
 
+const log: Logger = new ConsoleLoggerFactory().getLogger(['test']);
 let hapiServer: Server = createTestHapiServer();
-const log = new Logger(hapiServer);
 
 let server: CodeServerRouter = new CodeServerRouter(hapiServer);
 beforeEach(async () => {
diff --git a/x-pack/legacy/plugins/code/server/index.ts b/x-pack/legacy/plugins/code/server/index.ts
index 510abaef68a092..61ed0c0c5a58cc 100644
--- a/x-pack/legacy/plugins/code/server/index.ts
+++ b/x-pack/legacy/plugins/code/server/index.ts
@@ -4,11 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { PluginInitializerContext } from 'src/core/server';
-
 import * as constants from '../common/constants';
 import { CodePlugin } from './plugin';
+import { PluginSetupContract } from '../../../../plugins/code/server/index';
 
-export const codePlugin = (initializerContext: PluginInitializerContext) =>
+export const codePlugin = (initializerContext: PluginSetupContract) =>
   new CodePlugin(initializerContext);
+
 export { constants };
diff --git a/x-pack/legacy/plugins/code/server/init_local.ts b/x-pack/legacy/plugins/code/server/init_local.ts
index f39726c5e55e51..cd26ccfd644f43 100644
--- a/x-pack/legacy/plugins/code/server/init_local.ts
+++ b/x-pack/legacy/plugins/code/server/init_local.ts
@@ -5,12 +5,13 @@
  */
 
 import { Server } from 'hapi';
+
+import { LoggerFactory } from 'src/core/server';
 import { ServerOptions } from './server_options';
 import { CodeServices } from './distributed/code_services';
 import { EsClient } from './lib/esqueue';
 import { RepositoryConfigController } from './repository_config_controller';
 import { GitOperations } from './git_operations';
-import { Logger } from './log';
 import {
   getGitServiceHandler,
   getLspServiceHandler,
@@ -29,7 +30,7 @@ import { ServerLoggerFactory } from './utils/server_logger_factory';
 
 export function initLocalService(
   server: Server,
-  log: Logger,
+  loggerFactory: LoggerFactory,
   serverOptions: ServerOptions,
   codeServices: CodeServices,
   esClient: EsClient,
@@ -43,6 +44,7 @@ export function initLocalService(
     GitServiceDefinitionOption
   );
 
+  const serverLoggerFactory = new ServerLoggerFactory(loggerFactory, serverOptions.verbose);
   const installManager = new InstallManager(server, serverOptions);
   const lspService = new LspService(
     '127.0.0.1',
@@ -50,11 +52,11 @@ export function initLocalService(
     gitOps,
     esClient,
     installManager,
-    new ServerLoggerFactory(server),
+    serverLoggerFactory,
     repoConfigController
   );
   server.events.on('stop', async () => {
-    log.debug('shutdown lsp process');
+    loggerFactory.get().debug('shutdown lsp process');
     await lspService.shutdown();
     await gitOps.cleanAllRepo();
   });
@@ -65,7 +67,7 @@ export function initLocalService(
   );
   codeServices.registerHandler(
     WorkspaceDefinition,
-    getWorkspaceHandler(server, lspService.workspaceHandler)
+    getWorkspaceHandler(serverLoggerFactory, lspService.workspaceHandler)
   );
   codeServices.registerHandler(SetupDefinition, setupServiceHandler);
 
diff --git a/x-pack/legacy/plugins/code/server/init_queue.ts b/x-pack/legacy/plugins/code/server/init_queue.ts
index 444eb589d53030..12e8eeba15760b 100644
--- a/x-pack/legacy/plugins/code/server/init_queue.ts
+++ b/x-pack/legacy/plugins/code/server/init_queue.ts
@@ -4,13 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Server } from 'hapi';
 import { EsClient, Esqueue } from './lib/esqueue';
 import { Logger } from './log';
+import { ServerOptions } from './server_options';
 
-export function initQueue(server: Server, log: Logger, esClient: EsClient) {
-  const queueIndex: string = server.config().get('xpack.code.queueIndex');
-  const queueTimeoutMs: number = server.config().get('xpack.code.queueTimeoutMs');
+export function initQueue(serverOptions: ServerOptions, log: Logger, esClient: EsClient) {
+  const queueIndex: string = serverOptions.queueIndex;
+  const queueTimeoutMs: number = serverOptions.queueTimeoutMs;
   const queue = new Esqueue(queueIndex, {
     client: esClient,
     timeout: queueTimeoutMs,
diff --git a/x-pack/legacy/plugins/code/server/log.ts b/x-pack/legacy/plugins/code/server/log.ts
index 961065e59f4e12..cb4a5e89aff3dc 100644
--- a/x-pack/legacy/plugins/code/server/log.ts
+++ b/x-pack/legacy/plugins/code/server/log.ts
@@ -7,19 +7,22 @@
 import { inspect } from 'util';
 import { Logger as VsLogger } from 'vscode-jsonrpc';
 
-import { ServerFacade } from '..';
+import { Logger as KibanaLogger, LoggerFactory } from 'src/core/server';
 
 export class Logger implements VsLogger {
-  private readonly verbose: boolean = false;
-  constructor(private server: ServerFacade, private baseTags: string[] = ['code']) {
-    if (server) {
-      this.verbose = this.server.config().get('xpack.code.verbose');
-    }
+  private logger: KibanaLogger;
+
+  constructor(
+    private readonly loggerFactory: LoggerFactory,
+    private readonly verbose: boolean = false,
+    private readonly baseTags: string[] = []
+  ) {
+    this.logger = this.loggerFactory.get(...this.baseTags);
   }
 
   // Return a new logger with new tags
   public addTags(tags: string[]): Logger {
-    return new Logger(this.server, this.baseTags.concat(tags));
+    return new Logger(this.loggerFactory, this.verbose, this.baseTags.concat(tags));
   }
 
   public info(msg: string | any) {
@@ -28,7 +31,7 @@ export class Logger implements VsLogger {
         colors: process.stdout.isTTY,
       });
     }
-    this.server.log([...this.baseTags, 'info'], msg);
+    this.logger.info(msg);
   }
 
   public error(msg: string | any) {
@@ -42,11 +45,11 @@ export class Logger implements VsLogger {
       });
     }
 
-    this.server.log([...this.baseTags, 'error'], msg);
+    this.logger.error(msg);
   }
 
-  public log(message: string): void {
-    this.info(message);
+  public log(msg: string): void {
+    this.logger.info(msg);
   }
 
   public debug(msg: string | any) {
@@ -56,9 +59,9 @@ export class Logger implements VsLogger {
       });
     }
     if (this.verbose) {
-      this.server.log([...this.baseTags, 'info'], msg);
+      this.logger.info(msg);
     } else {
-      this.server.log([...this.baseTags, 'debug'], msg);
+      this.logger.debug(msg);
     }
   }
 
@@ -73,7 +76,7 @@ export class Logger implements VsLogger {
       });
     }
 
-    this.server.log([...this.baseTags, 'warning'], msg);
+    this.logger.warn(msg);
   }
 
   // Log subprocess stdout
@@ -84,9 +87,9 @@ export class Logger implements VsLogger {
       });
     }
     if (this.verbose) {
-      this.server.log([...this.baseTags, 'info', 'stdout'], msg);
+      this.logger.info(msg);
     } else {
-      this.server.log([...this.baseTags, 'debug', 'stdout'], msg);
+      this.logger.debug(msg);
     }
   }
 
@@ -98,9 +101,9 @@ export class Logger implements VsLogger {
       });
     }
     if (this.verbose) {
-      this.server.log([...this.baseTags, 'error', 'stderr'], msg);
+      this.logger.error(msg);
     } else {
-      this.server.log([...this.baseTags, 'debug', 'stderr'], msg);
+      this.logger.debug(msg);
     }
   }
 }
diff --git a/x-pack/legacy/plugins/code/server/lsp/controller.test.ts b/x-pack/legacy/plugins/code/server/lsp/controller.test.ts
index d1b62fdc278415..d3928f71abef43 100644
--- a/x-pack/legacy/plugins/code/server/lsp/controller.test.ts
+++ b/x-pack/legacy/plugins/code/server/lsp/controller.test.ts
@@ -29,7 +29,21 @@ const workspaceDir = path.join(baseDir, 'workspace');
 // @ts-ignore
 const options: ServerOptions = sinon.createStubInstance(ServerOptions);
 // @ts-ignore
-options.lsp = { detach: false };
+options.lsp = {
+  TypeScript: {
+    enabled: true,
+  },
+  Java: {
+    enabled: true,
+  },
+  Go: {
+    enabled: true,
+  },
+  Ctags: {
+    enabled: true,
+  },
+  detach: false,
+};
 // @ts-ignore
 options.maxWorkspace = 2;
 const server = createTestHapiServer();
diff --git a/x-pack/legacy/plugins/code/server/lsp/controller.ts b/x-pack/legacy/plugins/code/server/lsp/controller.ts
index 662689f171046d..4dd2ae3ffa5b18 100644
--- a/x-pack/legacy/plugins/code/server/lsp/controller.ts
+++ b/x-pack/legacy/plugins/code/server/lsp/controller.ts
@@ -57,7 +57,7 @@ export class LanguageServerController implements ILanguageServerHandler {
     readonly repoConfigController: RepositoryConfigController
   ) {
     this.log = loggerFactory.getLogger([]);
-    this.languageServers = enabledLanguageServers(installManager.server).map(def => ({
+    this.languageServers = enabledLanguageServers(options).map(def => ({
       definition: def,
       builtinWorkspaceFolders: def.builtinWorkspaceFolders,
       languages: def.languages,
diff --git a/x-pack/legacy/plugins/code/server/lsp/language_servers.ts b/x-pack/legacy/plugins/code/server/lsp/language_servers.ts
index 0c2179bfebee9e..40b6a41d68c582 100644
--- a/x-pack/legacy/plugins/code/server/lsp/language_servers.ts
+++ b/x-pack/legacy/plugins/code/server/lsp/language_servers.ts
@@ -4,9 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { ServerFacade } from '../..';
 import { InstallationType } from '../../common/installation';
 import { CTAGS_SUPPORT_LANGS, LanguageServer } from '../../common/language_server';
+import { ServerOptions } from '../server_options';
 import { CtagsLauncher } from './ctags_launcher';
 import { GoServerLauncher } from './go_launcher';
 import { JavaLauncher } from './java_launcher';
@@ -72,12 +72,13 @@ export const CTAGS: LanguageServerDefinition = {
 export const LanguageServers: LanguageServerDefinition[] = [TYPESCRIPT, JAVA, GO, CTAGS];
 export const LanguageServersDeveloping: LanguageServerDefinition[] = [];
 
-export function enabledLanguageServers(server: ServerFacade) {
-  const devMode: boolean = server.config().get('env.dev');
+export function enabledLanguageServers(serverOptions: ServerOptions) {
+  const devMode: boolean = serverOptions.devMode;
 
   function isEnabled(lang: LanguageServerDefinition, defaultEnabled: boolean) {
     const name = lang.name;
-    const enabled = server.config().get(`xpack.code.lsp.${name}.enabled`);
+    // @ts-ignore
+    const enabled = serverOptions.lsp[name] && serverOptions.lsp[name].enabled;
     return enabled === undefined ? defaultEnabled : enabled;
   }
   const results = LanguageServers.filter(lang => isEnabled(lang, true));
diff --git a/x-pack/legacy/plugins/code/server/plugin.ts b/x-pack/legacy/plugins/code/server/plugin.ts
index bae89cc5f16799..802a851a612453 100644
--- a/x-pack/legacy/plugins/code/server/plugin.ts
+++ b/x-pack/legacy/plugins/code/server/plugin.ts
@@ -4,12 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { i18n } from '@kbn/i18n';
 import crypto from 'crypto';
 import * as _ from 'lodash';
-import { CoreSetup, PluginInitializerContext } from 'src/core/server';
+import { CoreSetup } from 'src/core/server';
 
-import { XPackMainPlugin } from '../../xpack_main/xpack_main';
 import { GitOperations } from './git_operations';
 import { RepositoryIndexInitializerFactory, tryMigrateIndices } from './indexer';
 import { Esqueue } from './lib/esqueue';
@@ -56,6 +54,7 @@ import { initWorkers } from './init_workers';
 import { ClusterNodeAdapter } from './distributed/cluster/cluster_node_adapter';
 import { NodeRepositoriesService } from './distributed/cluster/node_repositories_service';
 import { initCodeUsageCollector } from './usage_collector';
+import { PluginSetupContract } from '../../../../plugins/code/server/index';
 
 export class CodePlugin {
   private isCodeNode = false;
@@ -70,50 +69,15 @@ export class CodePlugin {
   private codeServices: CodeServices | null = null;
   private nodeService: NodeRepositoriesService | null = null;
 
-  constructor(initializerContext: PluginInitializerContext) {
+  constructor(private readonly initContext: PluginSetupContract) {
     this.log = {} as Logger;
     this.serverOptions = {} as ServerOptions;
   }
 
-  // TODO: options is not a valid param for the setup() api
-  // of the new platform. Will need to pass through the configs
-  // correctly in the new platform.
-  public setup(core: CoreSetup, options: any) {
+  public setup(core: CoreSetup) {
     const { server } = core.http as any;
-
-    this.log = new Logger(server);
-    this.serverOptions = new ServerOptions(options, server.config());
-
-    const xpackMainPlugin: XPackMainPlugin = server.plugins.xpack_main;
-    xpackMainPlugin.registerFeature({
-      id: 'code',
-      name: i18n.translate('xpack.code.featureRegistry.codeFeatureName', {
-        defaultMessage: 'Code',
-      }),
-      icon: 'codeApp',
-      navLinkId: 'code',
-      app: ['code', 'kibana'],
-      catalogue: [], // TODO add catalogue here
-      privileges: {
-        all: {
-          excludeFromBasePrivileges: true,
-          api: ['code_user', 'code_admin'],
-          savedObject: {
-            all: [],
-            read: ['config'],
-          },
-          ui: ['show', 'user', 'admin'],
-        },
-        read: {
-          api: ['code_user'],
-          savedObject: {
-            all: [],
-            read: ['config'],
-          },
-          ui: ['show', 'user'],
-        },
-      },
-    });
+    this.serverOptions = new ServerOptions(this.initContext.legacy.config, server.config());
+    this.log = new Logger(this.initContext.legacy.logger, this.serverOptions.verbose);
   }
 
   // TODO: CodeStart will not have the register route api.
@@ -165,11 +129,11 @@ export class CodePlugin {
 
     const codeServices = new CodeServices(clusterNodeAdapter);
 
-    this.queue = initQueue(server, this.log, esClient);
+    this.queue = initQueue(this.serverOptions, this.log, esClient);
 
     const { gitOps, lspService } = initLocalService(
       server,
-      this.log,
+      this.initContext.legacy.logger,
       this.serverOptions,
       codeServices,
       esClient,
@@ -213,11 +177,11 @@ export class CodePlugin {
       this.log
     );
 
-    this.queue = initQueue(server, this.log, esClient);
+    this.queue = initQueue(this.serverOptions, this.log, esClient);
 
     const { gitOps, lspService } = initLocalService(
       server,
-      this.log,
+      this.initContext.legacy.logger,
       this.serverOptions,
       codeServices,
       esClient,
@@ -293,7 +257,8 @@ export class CodePlugin {
       codeServices,
       repoIndexInitializerFactory,
       repoConfigController,
-      this.serverOptions
+      this.serverOptions,
+      this.log
     );
     repositorySearchRoute(codeServerRouter, this.log);
     if (this.serverOptions.enableCommitIndexing) {
@@ -304,8 +269,8 @@ export class CodePlugin {
     fileRoute(codeServerRouter, codeServices);
     workspaceRoute(codeServerRouter, this.serverOptions, codeServices);
     symbolByQnameRoute(codeServerRouter, this.log);
-    installRoute(codeServerRouter, codeServices);
-    lspRoute(codeServerRouter, codeServices, this.serverOptions);
+    installRoute(codeServerRouter, codeServices, this.serverOptions);
+    lspRoute(codeServerRouter, codeServices, this.serverOptions, this.log);
     setupRoute(codeServerRouter, codeServices);
     statusRoute(codeServerRouter, codeServices);
   }
@@ -342,7 +307,7 @@ export class CodePlugin {
 
   private initDevMode(server: any) {
     // @ts-ignore
-    const devMode: boolean = server.config().get('env.dev');
+    const devMode: boolean = this.serverOptions.devMode;
     server.injectUiAppVars('code', () => ({
       enableLangserversDeveloping: devMode,
     }));
diff --git a/x-pack/legacy/plugins/code/server/routes/install.ts b/x-pack/legacy/plugins/code/server/routes/install.ts
index 87f5f049fc0fa2..338f305cba8580 100644
--- a/x-pack/legacy/plugins/code/server/routes/install.ts
+++ b/x-pack/legacy/plugins/code/server/routes/install.ts
@@ -12,8 +12,13 @@ import { CodeServerRouter } from '../security';
 import { CodeServices } from '../distributed/code_services';
 import { LspServiceDefinition } from '../distributed/apis';
 import { Endpoint } from '../distributed/resource_locator';
+import { ServerOptions } from '../server_options';
 
-export function installRoute(router: CodeServerRouter, codeServices: CodeServices) {
+export function installRoute(
+  router: CodeServerRouter,
+  codeServices: CodeServices,
+  options: ServerOptions
+) {
   const lspService = codeServices.serviceFor(LspServiceDefinition);
   const kibanaVersion = router.server.config().get('pkg.version') as string;
   const status = async (endpoint: Endpoint, def: LanguageServerDefinition) => ({
@@ -32,9 +37,7 @@ export function installRoute(router: CodeServerRouter, codeServices: CodeService
     path: '/api/code/install',
     async handler(req: RequestFacade) {
       const endpoint = await codeServices.locate(req, '');
-      return await Promise.all(
-        enabledLanguageServers(router.server).map(def => status(endpoint, def))
-      );
+      return await Promise.all(enabledLanguageServers(options).map(def => status(endpoint, def)));
     },
     method: 'GET',
   });
@@ -43,7 +46,7 @@ export function installRoute(router: CodeServerRouter, codeServices: CodeService
     path: '/api/code/install/{name}',
     async handler(req: RequestFacade) {
       const name = req.params.name;
-      const def = enabledLanguageServers(router.server).find(d => d.name === name);
+      const def = enabledLanguageServers(options).find(d => d.name === name);
       const endpoint = await codeServices.locate(req, '');
       if (def) {
         return await status(endpoint, def);
diff --git a/x-pack/legacy/plugins/code/server/routes/lsp.ts b/x-pack/legacy/plugins/code/server/routes/lsp.ts
index b8dcf0e5cd772c..6aa2ca072cae0b 100644
--- a/x-pack/legacy/plugins/code/server/routes/lsp.ts
+++ b/x-pack/legacy/plugins/code/server/routes/lsp.ts
@@ -7,8 +7,8 @@
 import Boom from 'boom';
 import { ResponseError } from 'vscode-jsonrpc';
 import { ResponseMessage } from 'vscode-jsonrpc/lib/messages';
-
 import { SymbolLocator } from '@elastic/lsp-extension';
+
 import {
   LanguageServerStartFailed,
   ServerNotInitialized,
@@ -32,9 +32,9 @@ const LANG_SERVER_ERROR = 'language server error';
 export function lspRoute(
   server: CodeServerRouter,
   codeServices: CodeServices,
-  serverOptions: ServerOptions
+  serverOptions: ServerOptions,
+  log: Logger
 ) {
-  const log = new Logger(server.server);
   const lspService = codeServices.serviceFor(LspServiceDefinition);
   const gitService = codeServices.serviceFor(GitServiceDefinition);
 
diff --git a/x-pack/legacy/plugins/code/server/routes/repository.ts b/x-pack/legacy/plugins/code/server/routes/repository.ts
index a2f7fe9a433da0..f40a562178079c 100644
--- a/x-pack/legacy/plugins/code/server/routes/repository.ts
+++ b/x-pack/legacy/plugins/code/server/routes/repository.ts
@@ -25,7 +25,8 @@ export function repositoryRoute(
   codeServices: CodeServices,
   repoIndexInitializerFactory: RepositoryIndexInitializerFactory,
   repoConfigController: RepositoryConfigController,
-  options: ServerOptions
+  options: ServerOptions,
+  log: Logger
 ) {
   const repositoryService = codeServices.serviceFor(RepositoryServiceDefinition);
   // Clone a git repository
@@ -35,7 +36,6 @@ export function repositoryRoute(
     method: 'POST',
     async handler(req: RequestFacade, h: ResponseToolkitFacade) {
       const repoUrl: string = (req.payload as any).url;
-      const log = new Logger(req.server);
 
       // Reject the request if the url is an invalid git url.
       try {
@@ -104,7 +104,6 @@ export function repositoryRoute(
     method: 'DELETE',
     async handler(req: RequestFacade, h: ResponseToolkitFacade) {
       const repoUri: string = req.params.uri as string;
-      const log = new Logger(req.server);
       const repoObjectClient = new RepositoryObjectClient(new EsClientWithRequest(req));
       try {
         // Check if the repository already exists. If not, an error will be thrown.
@@ -146,7 +145,6 @@ export function repositoryRoute(
     method: 'GET',
     async handler(req: RequestFacade) {
       const repoUri = req.params.uri as string;
-      const log = new Logger(req.server);
       try {
         const repoObjectClient = new RepositoryObjectClient(new EsClientWithRequest(req));
         return await repoObjectClient.getRepository(repoUri);
@@ -164,7 +162,6 @@ export function repositoryRoute(
     method: 'GET',
     async handler(req: RequestFacade) {
       const repoUri = req.params.uri as string;
-      const log = new Logger(req.server);
       try {
         const repoObjectClient = new RepositoryObjectClient(new EsClientWithRequest(req));
         let gitStatus = null;
@@ -206,7 +203,6 @@ export function repositoryRoute(
     path: '/api/code/repos',
     method: 'GET',
     async handler(req: RequestFacade) {
-      const log = new Logger(req.server);
       try {
         const repoObjectClient = new RepositoryObjectClient(new EsClientWithRequest(req));
         return await repoObjectClient.getAllRepositories();
@@ -228,7 +224,6 @@ export function repositoryRoute(
     requireAdmin: true,
     async handler(req: RequestFacade) {
       const repoUri = req.params.uri as string;
-      const log = new Logger(req.server);
       const reindex: boolean = (req.payload as any).reindex;
       try {
         const repoObjectClient = new RepositoryObjectClient(new EsClientWithRequest(req));
@@ -259,7 +254,6 @@ export function repositoryRoute(
     async handler(req: RequestFacade) {
       const config: RepositoryConfig = req.payload as RepositoryConfig;
       const repoUri: RepositoryUri = config.uri;
-      const log = new Logger(req.server);
       const repoObjectClient = new RepositoryObjectClient(new EsClientWithRequest(req));
 
       try {
diff --git a/x-pack/legacy/plugins/code/server/server_options.ts b/x-pack/legacy/plugins/code/server/server_options.ts
index a2e744a48be49f..50c175f7b2ef73 100644
--- a/x-pack/legacy/plugins/code/server/server_options.ts
+++ b/x-pack/legacy/plugins/code/server/server_options.ts
@@ -30,6 +30,8 @@ export interface DiskOptions {
 }
 
 export class ServerOptions {
+  public readonly devMode: boolean = this.config.get('env.dev');
+
   public readonly workspacePath = resolve(this.config.get('path.data'), 'code/workspace');
 
   public readonly repoPath = resolve(this.config.get('path.data'), 'code/repos');
@@ -76,8 +78,13 @@ export class ServerOptions {
 
   public readonly clusterEnabled: boolean = this.options.clustering.enabled;
 
+  public readonly verbose: boolean = this.options.verbose;
+
   public readonly codeNodes: CodeNode[] = this.options.clustering.codeNodes;
 
+  public readonly queueIndex: string = this.options.queueIndex;
+  public readonly queueTimeoutMs: number = this.options.queueTimeoutMs;
+
   constructor(private options: any, private config: any) {}
 
   /**
diff --git a/x-pack/legacy/plugins/code/server/utils/console_logger.ts b/x-pack/legacy/plugins/code/server/utils/console_logger.ts
index 1a0292e6f2b595..afc8677f494cfb 100644
--- a/x-pack/legacy/plugins/code/server/utils/console_logger.ts
+++ b/x-pack/legacy/plugins/code/server/utils/console_logger.ts
@@ -9,8 +9,11 @@ import { Logger } from '../log';
 
 export class ConsoleLogger extends Logger {
   constructor() {
-    // @ts-ignore
-    super(undefined);
+    super({
+      get: (...contextParts: string[]) => {
+        return console as any;
+      },
+    });
   }
 
   public info(msg: string | any) {
diff --git a/x-pack/legacy/plugins/code/server/utils/console_logger_factory.ts b/x-pack/legacy/plugins/code/server/utils/console_logger_factory.ts
index 6dc1f211902efc..01588f38a85804 100644
--- a/x-pack/legacy/plugins/code/server/utils/console_logger_factory.ts
+++ b/x-pack/legacy/plugins/code/server/utils/console_logger_factory.ts
@@ -9,7 +9,7 @@ import { ConsoleLogger } from './console_logger';
 import { LoggerFactory } from './log_factory';
 
 export class ConsoleLoggerFactory implements LoggerFactory {
-  public getLogger(tags: string[]): Logger {
+  public getLogger(tags: string[] = []): Logger {
     return new ConsoleLogger();
   }
 }
diff --git a/x-pack/legacy/plugins/code/server/utils/server_logger_factory.ts b/x-pack/legacy/plugins/code/server/utils/server_logger_factory.ts
index 62a7d197e419e1..e9687da443f9a6 100644
--- a/x-pack/legacy/plugins/code/server/utils/server_logger_factory.ts
+++ b/x-pack/legacy/plugins/code/server/utils/server_logger_factory.ts
@@ -4,14 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { LoggerFactory } from 'src/core/server';
 import { Logger } from '../log';
-import { LoggerFactory } from './log_factory';
-import { ServerFacade } from '../..';
+import { LoggerFactory as CodeLoggerFactory } from './log_factory';
 
-export class ServerLoggerFactory implements LoggerFactory {
-  constructor(private readonly server: ServerFacade) {}
+export class ServerLoggerFactory implements CodeLoggerFactory {
+  constructor(private readonly loggerFactory: LoggerFactory, private readonly verbose: boolean) {}
 
-  public getLogger(tags: string[]): Logger {
-    return new Logger(this.server, tags);
+  public getLogger(tags: string[] = []): Logger {
+    return new Logger(this.loggerFactory, this.verbose, tags);
   }
 }
diff --git a/x-pack/legacy/plugins/file_upload/public/components/json_upload_and_parse.js b/x-pack/legacy/plugins/file_upload/public/components/json_upload_and_parse.js
index d5f9a21d6454d3..f761899719d649 100644
--- a/x-pack/legacy/plugins/file_upload/public/components/json_upload_and_parse.js
+++ b/x-pack/legacy/plugins/file_upload/public/components/json_upload_and_parse.js
@@ -65,6 +65,14 @@ export class JsonUploadAndParse extends Component {
     indexPatternResp: '',
   };
 
+  componentDidMount() {
+    this._isMounted = true;
+  }
+
+  componentWillUnmount() {
+    this._isMounted = false;
+  }
+
   _resetFileAndIndexSettings = () => {
     if (this.props.onFileRemove && this.state.fileRef) {
       this.props.onFileRemove(this.state.fileRef);
@@ -86,7 +94,11 @@ export class JsonUploadAndParse extends Component {
     this._setSelectedType(this.state);
     this._setIndexReady({ ...this.state, ...this.props });
     this._indexData({ ...this.state, ...this.props });
-    if (this.props.isIndexingTriggered && !this.state.showImportProgress) {
+    if (
+      this.props.isIndexingTriggered &&
+      !this.state.showImportProgress &&
+      this._isMounted
+    ) {
       this.setState({ showImportProgress: true });
     }
   }
@@ -131,6 +143,10 @@ export class JsonUploadAndParse extends Component {
       parsedFile, transformDetails, indexName, selectedIndexType, appName
     );
 
+    if (!this._isMounted) {
+      return;
+    }
+
     // Index error
     if (!indexDataResp.success) {
       this.setState({
@@ -158,6 +174,9 @@ export class JsonUploadAndParse extends Component {
     }
 
     // Indexing complete, update state & callback (if any)
+    if (!this._isMounted || !indexPatternResp) {
+      return;
+    }
     this.setState({
       currentIndexingStage: INDEXING_STAGE.INDEX_PATTERN_COMPLETE
     });
@@ -170,12 +189,18 @@ export class JsonUploadAndParse extends Component {
   }
 
   _createIndexPattern = async ({ indexName }) => {
+    if (!this._isMounted) {
+      return;
+    }
     this.setState({
       indexPatternRequestInFlight: true,
       currentIndexingStage: INDEXING_STAGE.CREATING_INDEX_PATTERN
     });
     const indexPatternResp = await createIndexPattern(indexName);
 
+    if (!this._isMounted) {
+      return;
+    }
     this.setState({
       indexPatternResp,
       indexPatternRequestInFlight: false,
diff --git a/x-pack/legacy/plugins/graph/public/_main.scss b/x-pack/legacy/plugins/graph/public/_main.scss
index 7e70ccd6f35d8b..2559b7d1aba5ca 100644
--- a/x-pack/legacy/plugins/graph/public/_main.scss
+++ b/x-pack/legacy/plugins/graph/public/_main.scss
@@ -1,32 +1,3 @@
-/**
- * Nodes
- */
-
-.gphNode-disabled{
-  opacity:0.3;
-}
-
-.gphNode__circle {
-  fill: $euiColorMediumShade;
-
-  // SASSTODO: Can't definitively change modifier class
-  // because it's not easy to tell what's a class and what's
-  // part of the data object since they are named the same
-  &.selectedNode {
-    stroke-width: $euiSizeXS;
-    stroke: transparentize($euiColorPrimary, .25);
-  }
-}
-
-.gphNode__text {
-  fill: $euiColorDarkestShade;
-
-  &--lowOpacity{
-    fill-opacity: 0.5;
-  }
-}
-
-
 /**
  * Forms
  */
@@ -35,64 +6,16 @@
   margin-bottom: $euiSizeS;
 }
 
-.gphColorPicker__color,
-.gphIconPicker__icon {
+.gphColorPicker__color {
   margin: $euiSizeXS;
   cursor: pointer;
 
-  &.selectedNode,
   &:hover,
   &:focus {
     transform: scale(1.4);
   }
 }
 
-.gphIconPicker__icon {
-  opacity: .7;
-
-  &.selectedNode,
-  &:hover,
-  &:focus {
-    opacity: 1;
-  }
-}
-
-.gphIndexSelect{
-  max-width: $euiSizeL * 10;
-  margin-right: $euiSizeXS;
-
-  &-unselected {
-    @include euiFocusRing;
-  }
-}
-
-.gphAddButton {
-  background: $euiColorPrimary;
-  color: $euiColorEmptyShade;
-  border-radius: 50%;
-  font-size: $euiFontSizeXS;
-  margin: 2px $euiSizeS 0 $euiSizeXS;
-  @include size(26px); // same as svg
-
-  &:hover:not(:disabled) {
-    background: shadeOrTint($euiColorPrimary, 10%, 10%);
-    cursor: pointer;
-  }
-
-  &:disabled {
-    background: $euiColorMediumShade;
-    cursor: not-allowed;
-  }
-
-  &-focus {
-    @include euiFocusRing;
-  }
-}
-
-.gphFieldList {
-  min-width: $euiSizeXL * 10;
-}
-
 /**
  * Utilities
  */
diff --git a/x-pack/legacy/plugins/graph/public/angular/graph_client_workspace.js b/x-pack/legacy/plugins/graph/public/angular/graph_client_workspace.js
index db427fd11c7651..96be9eed2b4679 100644
--- a/x-pack/legacy/plugins/graph/public/angular/graph_client_workspace.js
+++ b/x-pack/legacy/plugins/graph/public/angular/graph_client_workspace.js
@@ -1200,11 +1200,14 @@ module.exports = (function () {
     }
 
 
-    //Add missing links between existing nodes
-    this.fillInGraph = function () {
+    /**
+     * Add missing links between existing nodes
+     * @param maxNewEdges Max number of new edges added. Avoid adding too many new edges
+     * at once into the graph otherwise disorientating
+     */
+    this.fillInGraph = function (maxNewEdges = 10) {
       let nodesForLinking = self.getSelectedOrAllTopNodes();
 
-      const maxNewEdges = 10; // Avoid adding too many new edges at once into the graph otherwise disorientating
       const maxNumVerticesSearchable = 100;
 
 
diff --git a/x-pack/legacy/plugins/graph/public/angular/templates/_graph.scss b/x-pack/legacy/plugins/graph/public/angular/templates/_graph.scss
index 20ca704b9282ba..0f2bf90a10d4f3 100644
--- a/x-pack/legacy/plugins/graph/public/angular/templates/_graph.scss
+++ b/x-pack/legacy/plugins/graph/public/angular/templates/_graph.scss
@@ -27,53 +27,6 @@
   flex: 1;
 }
 
-.gphGraph {
-  // SASSTODO: Can't definitively change child class
-  // because it's not easy to tell what's a class and what's
-  // part of the data object since they are named the same
-  .edge {
-    fill: $euiColorMediumShade;
-    stroke: $euiColorMediumShade;
-    stroke-width: 2;
-    stroke-opacity: 0.5;
-
-    &:hover {
-      stroke-opacity: 0.95;
-      cursor: pointer;
-    }
-  }
-
-  .edge.selectedEdge {
-    stroke: $euiColorDarkShade;
-    stroke-opacity: 0.95;
-  }
-
-  .edge.inferredEdge {
-    stroke-dasharray: 5,5;
-  }
-}
-
-.gphNode__label {
-  @include gphSvgText;
-  cursor: pointer;
-}
-
-.gphNode__label--html {
-  @include euiTextTruncate;
-  text-align: center;
-}
-
-.gphNode__markerCircle {
-  fill: $euiColorDarkShade;
-  stroke: $euiColorEmptyShade;
-}
-
-.gphNode__markerText {
-  @include gphSvgText;
-  font-size: $euiSizeS - 2px;
-  fill: $euiColorEmptyShade;
-}
-
 .gphGraph__menus {
   margin: $euiSizeS;
 }
diff --git a/x-pack/legacy/plugins/graph/public/angular/templates/index.html b/x-pack/legacy/plugins/graph/public/angular/templates/index.html
index 52f901f7d169ed..9e9356f30642e8 100644
--- a/x-pack/legacy/plugins/graph/public/angular/templates/index.html
+++ b/x-pack/legacy/plugins/graph/public/angular/templates/index.html
@@ -9,77 +9,26 @@
 
   <graph-app
     current-index-pattern="selectedIndex"
-    on-index-pattern-selected="uiSelectIndex"
     on-query-submit="submit"
-    saved-objects="pluginDependencies.savedObjects"
-    ui-settings="pluginDependencies.uiSettings"
-    http="pluginDependencies.http"
-    overlays="pluginDependencies.overlays"
+    index-pattern-provider="indexPatternProvider"
+    redux-store="reduxStore"
+    confirm-wipe-workspace="confirmWipeWorkspace"
     is-loading="loading"
+    is-initialized="workspaceInitialized || savedWorkspace.id"
     initial-query="initialQuery"
-    state="reduxState"
-    dispatch="reduxDispatch"
+    on-fill-workspace="fillWorkspace"
+    autocomplete-start="autocompleteStart"
+    core-start="coreStart"
+    store="store"
   ></graph-app>
 
-  <div class="gphGraph__container" id="GraphSvgContainer">
-    <svg class="gphGraph" width="100%" height="100%" pointer-events="all" id="graphSvg" ng-click="hideAllConfigPanels()">
-      <g id="svgRootGroup">
-        <g>
-          <line ng-repeat="edge in workspace.edges" class="edge" ng-attr-x1="{{edge.topSrc.kx}}" ng-attr-y1="{{edge.topSrc.ky}}"
-            ng-attr-x2="{{edge.topTarget.kx}}" ng-attr-y2="{{edge.topTarget.ky}}" ng-click="clickEdge(edge)" ng-class="{'selectedEdge':edge.isSelected, 'inferredEdge':edge.inferred}"
-            ng-attr-style="stroke-width:{{edge.width}}px" stroke-linecap="round" />
-        </g>
-        <g ng-repeat="n in workspace.nodes" ng-if="!n.parent">
-          <circle class="gphNode__circle" ng-attr-r="{{n.scaledSize}}" ng-attr-cx="{{n.kx}}" ng-attr-cy="{{n.ky}}" ng-click="nodeClick(n, $event)"
-            ng-class="{selectedNode:n.isSelected}" ng-attr-style="fill:{{n.color}}" />
-          <text class="fa gphNode__text gphNode__text--lowOpacity" transform="translate(0,5)" text-anchor="middle" ng-attr-x="{{n.kx}}"
-            ng-attr-y="{{n.ky}}" ng-if="n.icon" ng-click="nodeClick(n, $event)">{{n.icon.code}}</text>
-
-          <!-- Using 2 strategies for rendering labels - small text uses SVG for performance,
-            larger text uses HTML for word-wrapping capabilities but can be jittery.
-          -->
-
-          <text ng-if="n.label.length<30" class="gphNode__label" text-anchor="middle" transform="translate(0,22)"
-            ng-attr-x="{{n.kx}}" ng-attr-y="{{n.ky}}" ng-click="nodeClick(n, $event)">
-            {{n.label}}
-          </text>
-          <foreignObject ng-if="n.label.length>=30" width="100" height="20" transform="translate(-50,15)" ng-attr-x="{{n.kx}}"
-            ng-attr-y="{{n.ky}}" ng-click="nodeClick(n, $event)">
-
-            <body xmlns="http://www.w3.org/1999/xhtml">
-              <p class="gphNode__label gphNode__label--html gphNoUserSelect">{{n.label}}</p>
-            </body>
-          </foreignObject>
-
-          <g ng-if="n.numChildren>0">
-            <circle r="5" class="gphNode__markerCircle" transform="translate(10,10)" ng-attr-cx="{{n.kx}}" ng-attr-cy="{{n.ky}}"
-              ng-click="nodeClick(n, $event)" />
-            <text class="gphNode__markerText" text-anchor="middle" transform="translate(10,12)" ng-attr-x="{{n.kx}}"
-              ng-attr-y="{{n.ky}}" ng-click="nodeClick(n, $event)">{{n.numChildren}}
-            </text>
-
-          </g>
-        </g>
-      </g>
-    </svg>
-
-    <!--
-            Experiment with group/ungroup buttons that reveal-on-zoom on nodes.
-
-     <g ng-if="workspace.selectedNodes.length>1||(workspace.selectedNodes.length>0&&workspace.selectedNodes[0] !== n)">
-      <g ng-if="zoomLevel>10" transform="translate(-1,-7)">
-        <rect class="SvgZoomedIconButton" ng-attr-x="{{n.kx}}" ng-attr-y="{{n.ky}}" transform="translate(-1.5,-1.2)" ng-click="workspace.groupSelections(n)" width="6.5" height="2.2" rx="0.2" ry="0.2" />
-        <text class="SvgZoomedButtonText" transform="translate(3,0.3)" text-anchor="middle" ng-attr-x="{{n.kx}}" ng-attr-y="{{n.ky}}" ng-click="workspace.groupSelections(n)">group</text>
-        <text class="SvgZoomedIconButtonText" transform="translate(-0.2,0.6)" text-anchor="middle" ng-attr-x="{{n.kx}}" ng-attr-y="{{n.ky}}" ng-click="workspace.groupSelections(n)">&#xf247</text>
-      </g>
-    </g>
-    <g ng-if="zoomLevel>10" transform="translate(8,12.5)">
-      <rect class="SvgZoomedIconButton" ng-attr-x="{{n.kx}}" ng-attr-y="{{n.ky}}" transform="translate(-1.5,-1.2)" ng-click="workspace.ungroup(n)" width="7" height="2" rx="0.2" ry="0.2" />
-      <text class="SvgZoomedButtonText" transform="translate(3,0.3)" text-anchor="middle" ng-attr-x="{{n.kx}}" ng-attr-y="{{n.ky}}" ng-click="workspace.ungroup(n)">ungroup</text>
-      <text class="SvgZoomedIconButtonText" transform="translate(-0.4,0.6)" text-anchor="middle" ng-attr-x="{{n.kx}}" ng-attr-y="{{n.ky}}" ng-click="workspace.ungroup(n)">&#xf09c</text>
-    </g>
-
-  -->
+  <div class="gphGraph__container" id="GraphSvgContainer" ng-if="workspaceInitialized || savedWorkspace.id">
+    <graph-visualization
+      nodes="workspace.nodes"
+      edges="workspace.edges"
+      edge-click="clickEdge"
+      node-click="nodeClick"
+    ></graph-visualization>
 
     <div id="sidebar" class="gphSidebar" ng-if="workspace !== null">
 
diff --git a/x-pack/legacy/plugins/graph/public/app.js b/x-pack/legacy/plugins/graph/public/app.js
index a9b74bb4f6e672..2cd3e13013d9aa 100644
--- a/x-pack/legacy/plugins/graph/public/app.js
+++ b/x-pack/legacy/plugins/graph/public/app.js
@@ -5,11 +5,10 @@
  */
 
 import _ from 'lodash';
-import d3 from 'd3';
 import { i18n } from '@kbn/i18n';
 import 'ace';
-import rison from 'rison-node';
 import React from 'react';
+import { Provider } from 'react-redux';
 
 // import the uiExports that we want to "use"
 import 'uiExports/fieldFormats';
@@ -24,15 +23,15 @@ import 'uiExports/autocompleteProviders';
 import chrome from 'ui/chrome';
 import { uiModules } from 'ui/modules';
 import uiRoutes from 'ui/routes';
-import { addAppRedirectMessageToUrl, fatalError, toastNotifications } from 'ui/notify';
+import { addAppRedirectMessageToUrl, toastNotifications } from 'ui/notify';
 import { formatAngularHttpError } from 'ui/notify/lib';
 import { setup as data } from '../../../../../src/legacy/core_plugins/data/public/legacy';
 import { SavedObjectsClientProvider } from 'ui/saved_objects';
-import { KibanaParsedUrl } from 'ui/url/kibana_parsed_url';
 import { npStart } from 'ui/new_platform';
 import { SavedObjectRegistryProvider } from 'ui/saved_objects/saved_object_registry';
 import { capabilities } from 'ui/capabilities';
 import { showSaveModal } from 'ui/saved_objects/show_saved_object_save_modal';
+import { Storage } from 'ui/storage';
 
 import { xpackInfo } from 'plugins/xpack_main/services/xpack_info';
 
@@ -45,32 +44,22 @@ import { GraphApp } from './components/app';
 import { VennDiagram } from './components/venn_diagram';
 import { Listing } from './components/listing';
 import { Settings } from './components/settings';
+import { GraphVisualization } from './components/graph_visualization';
 
 import gws from './angular/graph_client_workspace.js';
 import { SavedWorkspacesProvider } from './angular/services/saved_workspaces';
-import {
-  iconChoices,
-  colorChoices,
-  iconChoicesByClass,
-  urlTemplateIconChoices,
-} from './helpers/style_choices';
-import {
-  outlinkEncoders,
-} from './helpers/outlink_encoders';
 import { getEditUrl, getNewPath, getEditPath, setBreadcrumbs, getHomePath } from './services/url';
-import { openSourceModal } from './services/source_modal';
-import { openSaveModal } from  './services/save_modal';
-import { appStateToSavedWorkspace, savedWorkspaceToAppState, lookupIndexPattern, mapFields } from './services/persistence';
+import { createCachedIndexPatternProvider } from './services/index_pattern_cache';
 import { urlTemplateRegex } from  './helpers/url_template';
 import {
   asAngularSyncedObservable,
 } from './helpers/as_observable';
+import { fetchTopNodes } from './services/fetch_top_nodes';
 import {
   createGraphStore,
-  loadFields,
-  fieldsSelector,
   selectedFieldsSelector,
-  liveResponseFieldsSelector
+  datasourceSelector,
+  hasFieldsSelector
 } from './state_management';
 
 import './angular/directives/graph_inspect';
@@ -108,20 +97,26 @@ app.directive('graphListing', function (reactDirective) {
 
 app.directive('graphApp', function (reactDirective) {
   return reactDirective(GraphApp, [
-    ['state', { watchDepth: 'reference' }],
-    ['dispatch', { watchDepth: 'reference' }],
+    ['store', { watchDepth: 'reference' }],
+    ['onFillWorkspace', { watchDepth: 'reference' }],
+    ['isInitialized', { watchDepth: 'reference' }],
     ['currentIndexPattern', { watchDepth: 'reference' }],
+    ['indexPatternProvider', { watchDepth: 'reference' }],
     ['isLoading', { watchDepth: 'reference' }],
-    ['onIndexPatternSelected', { watchDepth: 'reference' }],
     ['onQuerySubmit', { watchDepth: 'reference' }],
-    ['savedObjects', { watchDepth: 'reference' }],
-    ['uiSettings', { watchDepth: 'reference' }],
-    ['http', { watchDepth: 'reference' }],
     ['initialQuery', { watchDepth: 'reference' }],
-    ['overlays', { watchDepth: 'reference' }]
+    ['confirmWipeWorkspace', { watchDepth: 'reference' }],
+    ['autocompleteStart', { watchDepth: 'reference' }],
+    ['coreStart', { watchDepth: 'reference' }],
+    ['reduxStore', { watchDepth: 'reference' }]
   ]);
 });
 
+app.directive('graphVisualization', function (reactDirective) {
+  return reactDirective(GraphVisualization);
+});
+
+
 if (uiRoutes.enable) {
   uiRoutes.enable();
 }
@@ -159,8 +154,8 @@ uiRoutes
     template: appTemplate,
     badge: getReadonlyBadge,
     resolve: {
-      savedWorkspace: function (savedGraphWorkspaces, courier, $route) {
-        return $route.current.params.id && savedGraphWorkspaces.get($route.current.params.id)
+      savedWorkspace: function (savedGraphWorkspaces, $route) {
+        return $route.current.params.id ? savedGraphWorkspaces.get($route.current.params.id)
           .catch(
             function () {
               toastNotifications.addDanger(
@@ -169,8 +164,7 @@ uiRoutes
                 })
               );
             }
-          );
-
+          ) : savedGraphWorkspaces.get();
       },
       //Copied from example found in wizard.js ( Kibana TODO - can't
       indexPatterns: function (Private) {
@@ -237,89 +231,106 @@ app.controller('graphuiPlugin', function (
       });
   }
 
-  function updateBreadcrumbs() {
-    setBreadcrumbs({
-      chrome,
-      savedWorkspace: $route.current.locals.savedWorkspace,
-      navigateTo: () => {
-        // TODO this should be wrapped into canWipeWorkspace,
-        // but the check is too simple right now. Change this
-        // once actual state-diffing is in place.
-        $scope.$evalAsync(() => {
-          kbnUrl.changePath(getHomePath());
-        });
-      }
-    });
-  }
-
-  const store = createGraphStore();
-
-  $scope.title = 'Graph';
-  $scope.spymode = 'request';
-
-  $scope.iconChoices = iconChoices;
-  $scope.drillDownIconChoices = urlTemplateIconChoices;
-  $scope.colors = colorChoices;
-  $scope.iconChoicesByClass = iconChoicesByClass;
-
-  $scope.outlinkEncoders = outlinkEncoders;
-
-  $scope.fields = [];
-  $scope.canEditDrillDownUrls = chrome.getInjected('canEditDrillDownUrls');
-
-  $scope.graphSavePolicy = chrome.getInjected('graphSavePolicy');
-  $scope.allSavingDisabled = $scope.graphSavePolicy === 'none';
-  $scope.searchTerm = '';
-
-  $scope.reduxDispatch = (action) => {
-    store.dispatch(action);
-
-    // patch updated icons and fields on the nodes in the workspace state
-    // this workaround is necessary because the nodes are still managed by
-    // angular - once they are moved over to redux, this can be handled in
-    // the reducer
-    if (action.type === 'x-pack/graph/fields/UPDATE_FIELD_PROPERTIES' &&
-        action.payload.fieldProperties.color && $scope.workspace) {
-      $scope.workspace.nodes.forEach(function (node) {
-        if (node.data.field === action.payload.fieldName) {
-          node.color = action.payload.fieldProperties.color;
+  // Replacement function for graphClientWorkspace's comms so
+  // that it works with Kibana.
+  function callNodeProxy(indexName, query, responseHandler) {
+    const request = {
+      index: indexName,
+      query: query
+    };
+    $scope.loading = true;
+    return $http.post('../api/graph/graphExplore', request)
+      .then(function (resp) {
+        if (resp.data.resp.timed_out) {
+          toastNotifications.addWarning(
+            i18n.translate('xpack.graph.exploreGraph.timedOutWarningText', {
+              defaultMessage: 'Exploration timed out',
+            })
+          );
         }
+        responseHandler(resp.data.resp);
+      })
+      .catch(handleHttpError)
+      .finally(() => {
+        $scope.loading = false;
       });
-    }
+  }
 
-    if (action.type === 'x-pack/graph/fields/UPDATE_FIELD_PROPERTIES' &&
-        action.payload.fieldProperties.icon && $scope.workspace) {
-      $scope.workspace.nodes.forEach(function (node) {
-        if (node.data.field === action.payload.fieldName) {
-          node.icon = action.payload.fieldProperties.icon;
-        }
+
+  //Helper function for the graphClientWorkspace to perform a query
+  const callSearchNodeProxy = function (indexName, query, responseHandler) {
+    const request = {
+      index: indexName,
+      body: query
+    };
+    $scope.loading = true;
+    $http.post('../api/graph/searchProxy', request)
+      .then(function (resp) {
+        responseHandler(resp.data.resp);
+      })
+      .catch(handleHttpError)
+      .finally(() => {
+        $scope.loading = false;
       });
-    }
   };
 
-  $scope.pluginDependencies = npStart.core;
+  $scope.indexPatternProvider = createCachedIndexPatternProvider($route.current.locals.GetIndexPatternProvider.get);
+
+  const store = createGraphStore({
+    basePath: chrome.getBasePath(),
+    indexPatternProvider: $scope.indexPatternProvider,
+    indexPatterns: $route.current.locals.indexPatterns,
+    createWorkspace: (indexPattern, exploreControls) => {
+      const options = {
+        indexName: indexPattern,
+        vertex_fields: [],
+        // Here we have the opportunity to look up labels for nodes...
+        nodeLabeller: function () {
+          //   console.log(newNodes);
+        },
+        changeHandler: function () {
+          //Allows DOM to update with graph layout changes.
+          $scope.$apply();
+        },
+        graphExploreProxy: callNodeProxy,
+        searchProxy: callSearchNodeProxy,
+        exploreControls,
+      };
+      $scope.workspace = gws.createWorkspace(options);
+    },
+    setLiveResponseFields: (fields) => {
+      $scope.liveResponseFields = fields;
+    },
+    getWorkspace: () => {
+      return $scope.workspace;
+    },
+    getSavedWorkspace: () => {
+      return $route.current.locals.savedWorkspace;
+    },
+    notifications: npStart.core.notifications,
+    showSaveModal,
+    savePolicy: chrome.getInjected('graphSavePolicy'),
+    changeUrl: (newUrl) => {
+      $scope.$evalAsync(() => {
+        kbnUrl.change(newUrl, {});
+      });
+    },
+    notifyAngular: () => {
+      $scope.$digest();
+    },
+    chrome,
+  });
 
+  $scope.store = new Storage(window.localStorage);
+  $scope.coreStart = npStart.core;
+  $scope.autocompleteStart = npStart.plugins.data.autocomplete;
   $scope.loading = false;
 
-  const updateScope = () => {
-    const newState = store.getState();
-    $scope.reduxState = newState;
-    $scope.allFields = fieldsSelector(newState);
-    $scope.selectedFields = selectedFieldsSelector(newState);
-    $scope.liveResponseFields = liveResponseFieldsSelector(newState);
-    if ($scope.workspace) {
-      $scope.workspace.options.vertex_fields = $scope.selectedFields;
-    }
-  };
-  store.subscribe(updateScope);
-  updateScope();
+  $scope.spymode = 'request';
 
-  //So scope properties can be used consistently with ng-model
-  $scope.grr = $scope;
+  const allSavingDisabled = chrome.getInjected('graphSavePolicy') === 'none';
 
-  $scope.toggleDrillDownIcon = function (urlTemplate, icon) {
-    urlTemplate.icon === icon ? urlTemplate.icon = null : urlTemplate.icon = icon;
-  };
+  $scope.reduxStore = store;
 
   $scope.nodeClick = function (n, $event) {
 
@@ -340,14 +351,14 @@ app.controller('graphuiPlugin', function (
     }
   };
 
-  function canWipeWorkspace(yesFn, noFn) {
-    if ($scope.selectedFields.length === 0 && $scope.workspace === null) {
-      yesFn();
+  function canWipeWorkspace(callback) {
+    if (!hasFieldsSelector(store.getState())) {
+      callback();
       return;
     }
     const confirmModalOptions = {
-      onConfirm: yesFn,
-      onCancel: noFn || (() => {}),
+      onConfirm: callback,
+      onCancel: (() => {}),
       confirmButtonText: i18n.translate('xpack.graph.clearWorkspace.confirmButtonLabel', {
         defaultMessage: 'Continue',
       }),
@@ -359,30 +370,7 @@ app.controller('graphuiPlugin', function (
       defaultMessage: 'Once you discard changes made to a workspace, there is no getting them back.',
     }), confirmModalOptions);
   }
-
-  $scope.uiSelectIndex = function (proposedIndex) {
-    canWipeWorkspace(function () {
-      $scope.indexSelected(proposedIndex);
-    });
-  };
-
-  $scope.indexSelected = function (selectedIndex) {
-    $scope.clearWorkspace();
-    $scope.allFields = [];
-    $scope.selectedFields = [];
-    $scope.basicModeSelectedSingleField = null;
-    $scope.selectedField = null;
-    $scope.selectedFieldConfig = null;
-
-    return $route.current.locals.GetIndexPatternProvider.get(selectedIndex.id)
-      .then(handleSuccess)
-      .then(function (indexPattern) {
-        $scope.selectedIndex = indexPattern;
-        store.dispatch(loadFields(mapFields(indexPattern)));
-        $scope.$digest();
-      }, handleError);
-  };
-
+  $scope.confirmWipeWorkspace = canWipeWorkspace;
 
   $scope.clickEdge = function (edge) {
     if (edge.inferred) {
@@ -392,51 +380,33 @@ app.controller('graphuiPlugin', function (
     }
   };
 
-  // Replacement function for graphClientWorkspace's comms so
-  // that it works with Kibana.
-  function callNodeProxy(indexName, query, responseHandler) {
-    const request = {
-      index: indexName,
-      query: query
-    };
-    $scope.loading = true;
-    return $http.post('../api/graph/graphExplore', request)
-      .then(function (resp) {
-        if (resp.data.resp.timed_out) {
-          toastNotifications.addWarning(
-            i18n.translate('xpack.graph.exploreGraph.timedOutWarningText', {
-              defaultMessage: 'Exploration timed out',
-            })
-          );
-        }
-        responseHandler(resp.data.resp);
-      })
-      .catch(handleHttpError)
-      .finally(() => {
-        $scope.loading = false;
-      });
-  }
-
 
-  //Helper function for the graphClientWorkspace to perform a query
-  const callSearchNodeProxy = function (indexName, query, responseHandler) {
-    const request = {
-      index: indexName,
-      body: query
-    };
-    $scope.loading = true;
-    $http.post('../api/graph/searchProxy', request)
-      .then(function (resp) {
-        responseHandler(resp.data.resp);
-      })
-      .catch(handleHttpError)
-      .finally(() => {
-        $scope.loading = false;
+  $scope.fillWorkspace = async () => {
+    try {
+      const fields = selectedFieldsSelector(store.getState());
+      const topTermNodes = await fetchTopNodes(
+        npStart.core.http.post,
+        datasourceSelector(store.getState()).current.title,
+        fields
+      );
+      $scope.workspace.mergeGraph({
+        nodes: topTermNodes,
+        edges: []
+      });
+      $scope.workspaceInitialized = true;
+      $scope.workspace.fillInGraph(fields.length * 10);
+    } catch (e) {
+      toastNotifications.addDanger({
+        title: i18n.translate(
+          'xpack.graph.fillWorkspaceError',
+          { defaultMessage: 'Fetching top terms failed: {message}', values: { message: e.message } }
+        ),
       });
+    }
   };
 
   $scope.submit = function (searchTerm) {
-    initWorkspaceIfRequired();
+    $scope.workspaceInitialized = true;
     const numHops = 2;
     if (searchTerm.startsWith('{')) {
       try {
@@ -475,121 +445,16 @@ app.controller('graphuiPlugin', function (
     return $scope.selectedSelectedVertex === node;
   };
 
-  $scope.saveUrlTemplate = function (index, urlTemplate) {
-    const newTemplatesList = [...$scope.urlTemplates];
-    if (index !== -1) {
-      newTemplatesList[index] = urlTemplate;
-    } else {
-      newTemplatesList.push(urlTemplate);
-    }
-
-    $scope.urlTemplates = newTemplatesList;
-  };
-
-  $scope.removeUrlTemplate = function (urlTemplate) {
-    const newTemplatesList = [...$scope.urlTemplates];
-    const i = newTemplatesList.indexOf(urlTemplate);
-    newTemplatesList.splice(i, 1);
-    $scope.urlTemplates = newTemplatesList;
-  };
-
   $scope.openUrlTemplate = function (template) {
     const url = template.url;
     const newUrl = url.replace(urlTemplateRegex, template.encoder.encode($scope.workspace));
     window.open(newUrl, '_blank');
   };
 
-
-  //============================
-
-  $scope.resetWorkspace = function () {
-    $scope.clearWorkspace();
-    $scope.selectedIndex = null;
-    $scope.proposedIndex = null;
-    $scope.detail = null;
-    $scope.selectedSelectedVertex = null;
-    $scope.selectedField = null;
-    $scope.description = null;
-    $scope.allFields = [];
-    $scope.urlTemplates = [];
-
-    $scope.fieldNamesFilterString = null;
-    $scope.filteredFields = [];
-
-    $scope.selectedFields = [];
-    $scope.liveResponseFields = [];
-
-    $scope.exploreControls = {
-      useSignificance: true,
-      sampleSize: 2000,
-      timeoutMillis: 5000,
-      sampleDiversityField: null,
-      maxValuesPerDoc: 1,
-      minDocCount: 3
-    };
+  $scope.aceLoaded = (editor) => {
+    editor.$blockScrolling = Infinity;
   };
 
-
-  function initWorkspaceIfRequired() {
-    if ($scope.workspace) {
-      return;
-    }
-    const options = {
-      indexName: $scope.selectedIndex.title,
-      vertex_fields: $scope.selectedFields,
-      // Here we have the opportunity to look up labels for nodes...
-      nodeLabeller: function () {
-        //   console.log(newNodes);
-      },
-      changeHandler: function () {
-        //Allows DOM to update with graph layout changes.
-        $scope.$apply();
-      },
-      graphExploreProxy: callNodeProxy,
-      searchProxy: callSearchNodeProxy,
-      exploreControls: $scope.exploreControls
-    };
-    $scope.workspace = gws.createWorkspace(options);
-    $scope.detail = null;
-
-    // filter out default url templates because they will get re-added
-    $scope.urlTemplates = $scope.urlTemplates.filter(template => !template.isDefault);
-
-    if ($scope.urlTemplates.length === 0) {
-      // url templates specified by users can include the `{{gquery}}` tag and
-      // will have the elasticsearch query for the graph nodes injected there
-      const tag = '{{gquery}}';
-
-      const kUrl = new KibanaParsedUrl({
-        appId: 'kibana',
-        basePath: chrome.getBasePath(),
-        appPath: '/discover'
-      });
-
-      kUrl.addQueryParameter('_a', rison.encode({
-        columns: ['_source'],
-        index: $scope.selectedIndex.id,
-        interval: 'auto',
-        query: { language: 'kuery', query: tag },
-        sort: ['_score', 'desc']
-      }));
-
-      const discoverUrl = kUrl.getRootRelativePath()
-        // replace the URI encoded version of the tag with the unescaped version
-        // so it can be found with String.replace, regexp, etc.
-        .replace(encodeURIComponent(tag), tag);
-
-      $scope.urlTemplates.push({
-        url: discoverUrl,
-        description: i18n.translate('xpack.graph.settings.drillDowns.defaultUrlTemplateTitle', {
-          defaultMessage: 'Raw documents',
-        }),
-        encoder: $scope.outlinkEncoders[0],
-        isDefault: true
-      });
-    }
-  }
-
   $scope.setDetail = function (data) {
     $scope.detail = data;
   };
@@ -630,63 +495,6 @@ app.controller('graphuiPlugin', function (
     $scope.detail = { mergeCandidates };
   };
 
-  // Zoom functions for the SVG-based graph
-  const redraw = function () {
-    d3.select('#svgRootGroup')
-      .attr('transform',
-        'translate(' + d3.event.translate + ')' + 'scale(' + d3.event.scale + ')')
-      .attr('style', 'stroke-width: ' + 1 / d3.event.scale);
-    //To make scale-dependent features possible....
-    if ($scope.zoomLevel !== d3.event.scale) {
-      $scope.zoomLevel = d3.event.scale;
-      $scope.$apply();
-    }
-  };
-
-  //initialize all the state
-  $scope.resetWorkspace();
-
-
-  const blockScroll = function () {
-    d3.event.preventDefault();
-  };
-  d3.select('#graphSvg')
-    .on('mousewheel', blockScroll)
-    .on('DOMMouseScroll', blockScroll)
-    .call(d3.behavior.zoom()
-      .on('zoom', redraw));
-
-
-  const managementUrl = npStart.core.chrome.navLinks.get('kibana:management').url;
-  const url = `${managementUrl}/kibana/index_patterns`;
-
-  if ($route.current.locals.indexPatterns.length === 0) {
-    toastNotifications.addWarning({
-      title: i18n.translate('xpack.graph.noDataSourceNotificationMessageTitle', {
-        defaultMessage: 'No data source',
-      }),
-      text: (
-        <p>
-          <FormattedMessage
-            id="xpack.graph.noDataSourceNotificationMessageText"
-            defaultMessage="Go to {managementIndexPatternsLink} and create an index pattern"
-            values={{
-              managementIndexPatternsLink: (
-                <a href={url}>
-                  <FormattedMessage
-                    id="xpack.graph.noDataSourceNotificationMessageText.managementIndexPatternLinkText"
-                    defaultMessage="Management &gt; Index Patterns"
-                  />
-                </a>
-              )
-            }}
-          />
-        </p>
-      ),
-    });
-  }
-
-
   // ===== Menubar configuration =========
   $scope.topNavMenu = [];
   $scope.topNavMenu.push({
@@ -723,7 +531,7 @@ app.controller('graphuiPlugin', function (
         defaultMessage: 'Save workspace',
       }),
       tooltip: () => {
-        if ($scope.allSavingDisabled) {
+        if (allSavingDisabled) {
           return i18n.translate('xpack.graph.topNavMenu.saveWorkspace.disabledTooltip', {
             defaultMessage: 'No changes to saved workspaces are permitted by the current save policy',
           });
@@ -734,15 +542,12 @@ app.controller('graphuiPlugin', function (
         }
       },
       disableButton: function () {
-        return $scope.allSavingDisabled || $scope.selectedFields.length === 0;
+        return allSavingDisabled || !hasFieldsSelector(store.getState());
       },
       run: () => {
-        openSaveModal({
-          savePolicy: $scope.graphSavePolicy,
-          hasData: $scope.workspace && ($scope.workspace.nodes.length > 0 || $scope.workspace.blacklistedNodes.length > 0),
-          workspace: $scope.savedWorkspace,
-          saveWorkspace: $scope.saveWorkspace,
-          showSaveModal
+        store.dispatch({
+          type: 'x-pack/graph/SAVE_WORKSPACE',
+          payload: $route.current.locals.savedWorkspace,
         });
       },
       testId: 'graphSaveButton',
@@ -766,10 +571,9 @@ app.controller('graphuiPlugin', function (
     },
   });
 
-  let currentSettingsFlyout;
   $scope.topNavMenu.push({
     key: 'settings',
-    disableButton: function () { return $scope.selectedIndex === null; },
+    disableButton: function () { return datasourceSelector(store.getState()).type === 'none'; },
     label: i18n.translate('xpack.graph.topNavMenu.settingsLabel', {
       defaultMessage: 'Settings',
     }),
@@ -777,40 +581,25 @@ app.controller('graphuiPlugin', function (
       defaultMessage: 'Settings',
     }),
     run: () => {
-      if (currentSettingsFlyout) {
-        currentSettingsFlyout.close();
-        return;
-      }
       const settingsObservable = asAngularSyncedObservable(() => ({
-        advancedSettings: { ...$scope.exploreControls },
-        updateAdvancedSettings: (updatedSettings) => {
-          $scope.exploreControls = updatedSettings;
-          if ($scope.workspace) {
-            $scope.workspace.options.exploreControls = updatedSettings;
-          }
-        },
         blacklistedNodes: $scope.workspace ? [...$scope.workspace.blacklistedNodes] : undefined,
         unblacklistNode: $scope.workspace ? $scope.workspace.unblacklist : undefined,
-        urlTemplates: [...$scope.urlTemplates],
-        removeUrlTemplate: $scope.removeUrlTemplate,
-        saveUrlTemplate: $scope.saveUrlTemplate,
-        allFields: [...$scope.allFields],
-        canEditDrillDownUrls: $scope.canEditDrillDownUrls
+        canEditDrillDownUrls: chrome.getInjected('canEditDrillDownUrls')
       }), $scope.$digest.bind($scope));
-      currentSettingsFlyout = npStart.core.overlays.openFlyout(<Settings observable={settingsObservable} />, {
-        size: 'm',
-        closeButtonAriaLabel: i18n.translate('xpack.graph.settings.closeLabel', { defaultMessage: 'Close' }),
-        'data-test-subj': 'graphSettingsFlyout',
-        ownFocus: true,
-        className: 'gphSettingsFlyout',
-        maxWidth: 520,
-      });
-      currentSettingsFlyout.onClose.then(() => { currentSettingsFlyout = null; });
+      npStart.core.overlays.openFlyout(
+        <Provider store={store}>
+          <Settings observable={settingsObservable} />
+        </Provider>, {
+          size: 'm',
+          closeButtonAriaLabel: i18n.translate('xpack.graph.settings.closeLabel', { defaultMessage: 'Close' }),
+          'data-test-subj': 'graphSettingsFlyout',
+          ownFocus: true,
+          className: 'gphSettingsFlyout',
+          maxWidth: 520,
+        });
     },
   });
 
-  updateBreadcrumbs();
-
   $scope.menus = {
     showSettings: false,
   };
@@ -822,102 +611,42 @@ app.controller('graphuiPlugin', function (
   };
 
   // Deal with situation of request to open saved workspace
-  if ($route.current.locals.savedWorkspace) {
-    $scope.savedWorkspace = $route.current.locals.savedWorkspace;
-    const selectedIndex = lookupIndexPattern($scope.savedWorkspace, $route.current.locals.indexPatterns);
-    if(!selectedIndex) {
-      toastNotifications.addDanger(
-        i18n.translate('xpack.graph.loadWorkspace.missingIndexPatternErrorMessage', {
-          defaultMessage: 'Index pattern not found',
-        })
-      );
-      return;
-    }
-    $route.current.locals.GetIndexPatternProvider.get(selectedIndex.id).then(indexPattern => {
-      $scope.selectedIndex = indexPattern;
-      initWorkspaceIfRequired();
-      const {
-        urlTemplates,
-        advancedSettings,
-        allFields,
-      } = savedWorkspaceToAppState($scope.savedWorkspace, indexPattern, $scope.workspace);
-
-      // wire up stuff to angular
-      store.dispatch(loadFields(allFields));
-      $scope.exploreControls = advancedSettings;
-      $scope.workspace.options.exploreControls = advancedSettings;
-      $scope.urlTemplates = urlTemplates;
-      $scope.workspace.runLayout();
-      // Allow URLs to include a user-defined text query
-      if ($route.current.params.query) {
-        $scope.initialQuery = $route.current.params.query;
-        $scope.submit($route.current.params.query);
-      }
-
-      $scope.$digest();
+  if ($route.current.locals.savedWorkspace.id) {
+    store.dispatch({
+      type: 'x-pack/graph/LOAD_WORKSPACE',
+      payload: $route.current.locals.savedWorkspace,
     });
   } else {
-    $route.current.locals.SavedWorkspacesProvider.get().then(function (newWorkspace) {
-      $scope.savedWorkspace = newWorkspace;
-      openSourceModal(npStart.core, indexPattern => {
-        $scope.indexSelected(indexPattern);
-      });
-    });
-  }
+    const managementUrl = npStart.core.chrome.navLinks.get('kibana:management').url;
+    const url = `${managementUrl}/kibana/index_patterns`;
 
-  $scope.saveWorkspace = function (saveOptions, userHasConfirmedSaveWorkspaceData) {
-    if ($scope.allSavingDisabled) {
-      // It should not be possible to navigate to this function if allSavingDisabled is set
-      // but adding check here as a safeguard.
-      toastNotifications.addWarning(
-        i18n.translate('xpack.graph.saveWorkspace.disabledWarning', { defaultMessage: 'Saving is disabled' })
-      );
-      return;
+    if ($route.current.locals.indexPatterns.length === 0) {
+      toastNotifications.addWarning({
+        title: i18n.translate('xpack.graph.noDataSourceNotificationMessageTitle', {
+          defaultMessage: 'No data source',
+        }),
+        text: (
+          <p>
+            <FormattedMessage
+              id="xpack.graph.noDataSourceNotificationMessageText"
+              defaultMessage="Go to {managementIndexPatternsLink} and create an index pattern"
+              values={{
+                managementIndexPatternsLink: (
+                  <a href={url}>
+                    <FormattedMessage
+                      id="xpack.graph.noDataSourceNotificationMessageText.managementIndexPatternLinkText"
+                      defaultMessage="Management &gt; Index Patterns"
+                    />
+                  </a>
+                )
+              }}
+            />
+          </p>
+        ),
+      });
     }
-    initWorkspaceIfRequired();
-    const canSaveData = $scope.graphSavePolicy === 'configAndData' ||
-      ($scope.graphSavePolicy === 'configAndDataWithConsent' && userHasConfirmedSaveWorkspaceData);
-
-    appStateToSavedWorkspace(
-      $scope.savedWorkspace,
-      {
-        workspace: $scope.workspace,
-        urlTemplates: $scope.urlTemplates,
-        advancedSettings: $scope.exploreControls,
-        selectedIndex: $scope.selectedIndex,
-        selectedFields: $scope.selectedFields
-      },
-      canSaveData
-    );
-
-    return $scope.savedWorkspace.save(saveOptions).then(function (id) {
-      if (id) {
-        const title = i18n.translate('xpack.graph.saveWorkspace.successNotificationTitle', {
-          defaultMessage: 'Saved "{workspaceTitle}"',
-          values: { workspaceTitle: $scope.savedWorkspace.title },
-        });
-        let text;
-        if (!canSaveData && $scope.workspace.nodes.length > 0) {
-          text = i18n.translate('xpack.graph.saveWorkspace.successNotification.noDataSavedText', {
-            defaultMessage: 'The configuration was saved, but the data was not saved',
-          });
-        }
-
-        toastNotifications.addSuccess({
-          title,
-          text,
-          'data-test-subj': 'saveGraphSuccess',
-        });
-        if ($scope.savedWorkspace.id !== $route.current.params.id) {
-          kbnUrl.change(getEditPath($scope.savedWorkspace));
-        }
-      }
-      return { id };
-    }, fatalError);
-
-  };
-
-
+  }
 
+  $scope.savedWorkspace = $route.current.locals.savedWorkspace;
 });
-//End controller
+
diff --git a/x-pack/legacy/plugins/graph/public/components/_index.scss b/x-pack/legacy/plugins/graph/public/components/_index.scss
index bf0af682310e04..a06209e7e4d344 100644
--- a/x-pack/legacy/plugins/graph/public/components/_index.scss
+++ b/x-pack/legacy/plugins/graph/public/components/_index.scss
@@ -1,5 +1,8 @@
 @import './app';
 @import './search_bar';
+@import './source_modal';
+@import './guidance_panel/index';
+@import './graph_visualization/index';
 @import './venn_diagram/index';
 @import './settings/index';
 @import './legacy_icon/index';
diff --git a/x-pack/legacy/plugins/graph/public/components/_source_modal.scss b/x-pack/legacy/plugins/graph/public/components/_source_modal.scss
new file mode 100644
index 00000000000000..fbc293442f3316
--- /dev/null
+++ b/x-pack/legacy/plugins/graph/public/components/_source_modal.scss
@@ -0,0 +1,4 @@
+.gphSourceModal {
+  width: 720px;
+  min-height: 530px;
+}
\ No newline at end of file
diff --git a/x-pack/legacy/plugins/graph/public/components/app.tsx b/x-pack/legacy/plugins/graph/public/components/app.tsx
index 7e75a13bb39e3b..efc8c1bfcc00a9 100644
--- a/x-pack/legacy/plugins/graph/public/components/app.tsx
+++ b/x-pack/legacy/plugins/graph/public/components/app.tsx
@@ -5,23 +5,65 @@
  */
 
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import React from 'react';
-import { FieldManagerProps, FieldManager } from './field_manager';
+import { Provider } from 'react-redux';
+import React, { useState } from 'react';
+import { I18nProvider } from '@kbn/i18n/react';
+import { Storage } from 'ui/storage';
+import { CoreStart } from 'kibana/public';
+import { AutocompletePublicPluginStart } from 'src/plugins/data/public';
+import { FieldManager } from './field_manager';
 import { SearchBarProps, SearchBar } from './search_bar';
+import { GraphStore } from '../state_management';
+import { GuidancePanel } from './guidance_panel';
 
-export interface GraphAppProps extends FieldManagerProps, SearchBarProps {}
+import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public';
+
+export interface GraphAppProps extends SearchBarProps {
+  coreStart: CoreStart;
+  autocompleteStart: AutocompletePublicPluginStart;
+  store: Storage;
+  reduxStore: GraphStore;
+  isInitialized: boolean;
+  onFillWorkspace: () => void;
+}
 
 export function GraphApp(props: GraphAppProps) {
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const { coreStart, autocompleteStart, store, reduxStore, ...searchBarProps } = props;
+
   return (
-    <div className="gphGraph__bar">
-      <EuiFlexGroup direction="column" gutterSize="s">
-        <EuiFlexItem>
-          <SearchBar {...props} />
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <FieldManager {...props} />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </div>
+    <I18nProvider>
+      <KibanaContextProvider
+        services={{
+          appName: 'graph',
+          store: props.store,
+          autocomplete: props.autocompleteStart,
+          ...props.coreStart,
+        }}
+      >
+        <Provider store={reduxStore}>
+          <>
+            <div className="gphGraph__bar">
+              <EuiFlexGroup direction="column" gutterSize="s">
+                <EuiFlexItem>
+                  <SearchBar {...searchBarProps} />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <FieldManager pickerOpen={pickerOpen} setPickerOpen={setPickerOpen} />
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </div>
+            {!props.isInitialized && (
+              <GuidancePanel
+                onFillWorkspace={props.onFillWorkspace}
+                onOpenFieldPicker={() => {
+                  setPickerOpen(true);
+                }}
+              />
+            )}
+          </>
+        </Provider>
+      </KibanaContextProvider>
+    </I18nProvider>
   );
 }
diff --git a/x-pack/legacy/plugins/graph/public/components/field_manager/field_editor.tsx b/x-pack/legacy/plugins/graph/public/components/field_manager/field_editor.tsx
index b9de9b9c628a04..519e41e8460517 100644
--- a/x-pack/legacy/plugins/graph/public/components/field_manager/field_editor.tsx
+++ b/x-pack/legacy/plugins/graph/public/components/field_manager/field_editor.tsx
@@ -30,9 +30,10 @@ import { WorkspaceField } from '../../types';
 import { iconChoices } from '../../helpers/style_choices';
 import { LegacyIcon } from '../legacy_icon';
 import { FieldIcon } from './field_icon';
+import { UpdateableFieldProperties } from './field_manager';
+
 import { isEqual } from '../helpers';
 
-type UpdateableFieldProperties = 'hopSize' | 'lastValidHopSize' | 'color' | 'icon';
 export interface FieldPickerProps {
   field: WorkspaceField;
   allFields: WorkspaceField[];
diff --git a/x-pack/legacy/plugins/graph/public/components/field_manager/field_icon.tsx b/x-pack/legacy/plugins/graph/public/components/field_manager/field_icon.tsx
index 93561e17229360..429eec19a47fa7 100644
--- a/x-pack/legacy/plugins/graph/public/components/field_manager/field_icon.tsx
+++ b/x-pack/legacy/plugins/graph/public/components/field_manager/field_icon.tsx
@@ -16,7 +16,7 @@ function getIconForDataType(dataType: string) {
     boolean: 'invert',
     date: 'calendar',
     geo_point: 'globe',
-    ip: 'link',
+    ip: 'storage',
   };
   return icons[dataType] || ICON_TYPES.find(t => t === dataType) || 'document';
 }
diff --git a/x-pack/legacy/plugins/graph/public/components/field_manager/field_manager.test.tsx b/x-pack/legacy/plugins/graph/public/components/field_manager/field_manager.test.tsx
index 32cc546a3ad0ce..e9d3f3738ea6ea 100644
--- a/x-pack/legacy/plugins/graph/public/components/field_manager/field_manager.test.tsx
+++ b/x-pack/legacy/plugins/graph/public/components/field_manager/field_manager.test.tsx
@@ -5,22 +5,25 @@
  */
 
 import React, { ReactElement } from 'react';
-import { EuiColorPicker, EuiSelectable, EuiContextMenu, EuiPopover, EuiButton } from '@elastic/eui';
+import { EuiColorPicker, EuiSelectable, EuiContextMenu, EuiButton } from '@elastic/eui';
 import { FieldPicker } from './field_picker';
 import { FieldEditor } from './field_editor';
-import { GraphStore, createGraphStore, loadFields } from '../../state_management';
+import { GraphStore, loadFields } from '../../state_management';
 import { getSuitableIcon } from '../../helpers/style_choices';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 import { FieldManager } from './field_manager';
+import { Provider } from 'react-redux';
+import { createMockGraphStore } from '../../state_management/mocks';
 
 describe('field_manager', () => {
   let store: GraphStore;
   let instance: ShallowWrapper;
+  let getInstance: () => ShallowWrapper;
   let dispatchSpy: jest.Mock;
 
   beforeEach(() => {
-    store = createGraphStore();
+    store = createMockGraphStore({ includeSagas: false }).store;
     store.dispatch(
       loadFields([
         {
@@ -52,27 +55,31 @@ describe('field_manager', () => {
     );
 
     dispatchSpy = jest.fn(store.dispatch);
+    store.dispatch = dispatchSpy;
 
-    instance = shallow(<FieldManager state={store.getState()} dispatch={dispatchSpy} />);
-  });
+    instance = shallow(
+      <Provider store={store}>
+        <FieldManager pickerOpen={true} setPickerOpen={() => {}} />
+      </Provider>
+    );
 
-  function update() {
-    instance.setProps({
-      state: store.getState(),
-      dispatch: dispatchSpy,
-    });
-  }
+    getInstance = () =>
+      instance
+        .find(FieldManager)
+        .dive()
+        .dive();
+  });
 
   it('should list editors for all selected fields', () => {
-    expect(instance.find(FieldEditor).length).toEqual(2);
+    expect(getInstance().find(FieldEditor).length).toEqual(2);
     expect(
-      instance
+      getInstance()
         .find(FieldEditor)
         .at(0)
         .prop('field').name
     ).toEqual('field1');
     expect(
-      instance
+      getInstance()
         .find(FieldEditor)
         .at(1)
         .prop('field').name
@@ -80,23 +87,21 @@ describe('field_manager', () => {
   });
 
   it('should select fields from picker', () => {
-    const fieldPicker = instance.find(FieldPicker).dive();
-
-    act(() => {
-      (fieldPicker.find(EuiPopover).prop('button')! as ReactElement).props.onClick();
-    });
-
-    fieldPicker.update();
-
     expect(
-      fieldPicker
+      getInstance()
+        .find(FieldPicker)
+        .dive()
         .find(EuiSelectable)
         .prop('options')
         .map((option: { label: string }) => option.label)
     ).toEqual(['field1', 'field2', 'field3']);
 
     act(() => {
-      fieldPicker.find(EuiSelectable).prop('onChange')([{ checked: 'on', label: 'field3' }]);
+      getInstance()
+        .find(FieldPicker)
+        .dive()
+        .find(EuiSelectable)
+        .prop('onChange')([{ checked: 'on', label: 'field3' }]);
     });
 
     expect(dispatchSpy).toHaveBeenCalledWith({
@@ -104,13 +109,12 @@ describe('field_manager', () => {
       payload: 'field3',
     });
 
-    update();
-    expect(instance.find(FieldEditor).length).toEqual(3);
+    expect(getInstance().find(FieldEditor).length).toEqual(3);
   });
 
   it('should deselect field', () => {
     act(() => {
-      instance
+      getInstance()
         .find(FieldEditor)
         .at(0)
         .dive()
@@ -123,12 +127,11 @@ describe('field_manager', () => {
       payload: 'field1',
     });
 
-    update();
-    expect(instance.find(FieldEditor).length).toEqual(1);
+    expect(getInstance().find(FieldEditor).length).toEqual(1);
   });
 
   it('should disable field', () => {
-    const toggleItem = instance
+    const toggleItem = getInstance()
       .find(FieldEditor)
       .at(0)
       .dive()
@@ -150,10 +153,8 @@ describe('field_manager', () => {
       },
     });
 
-    update();
-
     expect(
-      instance
+      getInstance()
         .find(FieldEditor)
         .at(0)
         .dive()
@@ -163,7 +164,7 @@ describe('field_manager', () => {
   });
 
   it('should enable field', () => {
-    const toggleItem = instance
+    const toggleItem = getInstance()
       .find(FieldEditor)
       .at(1)
       .dive()
@@ -185,10 +186,8 @@ describe('field_manager', () => {
       },
     });
 
-    update();
-
     expect(
-      instance
+      getInstance()
         .find(FieldEditor)
         .at(1)
         .dive()
@@ -198,7 +197,7 @@ describe('field_manager', () => {
   });
 
   it('should change color', () => {
-    const fieldEditor = instance
+    const fieldEditor = getInstance()
       .find(FieldEditor)
       .at(1)
       .dive();
diff --git a/x-pack/legacy/plugins/graph/public/components/field_manager/field_manager.tsx b/x-pack/legacy/plugins/graph/public/components/field_manager/field_manager.tsx
index 7f89b555c9f7a0..89b325d737bd59 100644
--- a/x-pack/legacy/plugins/graph/public/components/field_manager/field_manager.tsx
+++ b/x-pack/legacy/plugins/graph/public/components/field_manager/field_manager.tsx
@@ -4,54 +4,65 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { I18nProvider } from '@kbn/i18n/react';
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
 import { FieldPicker } from './field_picker';
 import { FieldEditor } from './field_editor';
 import {
   selectedFieldsSelector,
   fieldsSelector,
+  fieldMapSelector,
   updateFieldProperties,
   selectField,
   deselectField,
-  GraphDispatch,
   GraphState,
-  fieldMapSelector,
 } from '../../state_management';
+import { WorkspaceField } from '../../types';
 
-export interface FieldManagerProps {
-  state: GraphState;
-  dispatch: GraphDispatch;
-}
-
-export function FieldManager({ state, dispatch }: FieldManagerProps) {
-  const fieldMap = fieldMapSelector(state);
-  const allFields = fieldsSelector(state);
-  const selectedFields = selectedFieldsSelector(state);
-
-  const actionCreators = bindActionCreators(
-    {
-      updateFieldProperties,
-      selectField,
-      deselectField,
-    },
-    dispatch
-  );
+export type UpdateableFieldProperties = 'hopSize' | 'lastValidHopSize' | 'color' | 'icon';
 
+export function FieldManagerComponent(props: {
+  allFields: WorkspaceField[];
+  fieldMap: Record<string, WorkspaceField>;
+  selectedFields: WorkspaceField[];
+  updateFieldProperties: (props: {
+    fieldName: string;
+    fieldProperties: Partial<Pick<WorkspaceField, UpdateableFieldProperties>>;
+  }) => void;
+  selectField: (fieldName: string) => void;
+  deselectField: (fieldName: string) => void;
+  pickerOpen: boolean;
+  setPickerOpen: (open: boolean) => void;
+}) {
   return (
-    <I18nProvider>
-      <EuiFlexGroup gutterSize="s" className="gphFieldManager" alignItems="center" wrap>
-        {selectedFields.map(field => (
-          <EuiFlexItem key={field.name} grow={false}>
-            <FieldEditor allFields={allFields} {...actionCreators} field={field} />
-          </EuiFlexItem>
-        ))}
-        <EuiFlexItem grow={false}>
-          <FieldPicker fieldMap={fieldMap} {...actionCreators} />
+    <EuiFlexGroup gutterSize="s" className="gphFieldManager" alignItems="center">
+      {props.selectedFields.map(field => (
+        <EuiFlexItem key={field.name} grow={false}>
+          <FieldEditor {...props} field={field} />
         </EuiFlexItem>
-      </EuiFlexGroup>
-    </I18nProvider>
+      ))}
+      <EuiFlexItem grow={false}>
+        <FieldPicker {...props} open={props.pickerOpen} setOpen={props.setPickerOpen} />
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 }
+
+export const FieldManager = connect(
+  (state: GraphState) => ({
+    fieldMap: fieldMapSelector(state),
+    allFields: fieldsSelector(state),
+    selectedFields: selectedFieldsSelector(state),
+  }),
+  dispatch =>
+    bindActionCreators(
+      {
+        updateFieldProperties,
+        selectField,
+        deselectField,
+      },
+      dispatch
+    )
+)(FieldManagerComponent);
diff --git a/x-pack/legacy/plugins/graph/public/components/field_manager/field_picker.tsx b/x-pack/legacy/plugins/graph/public/components/field_manager/field_picker.tsx
index b1ddce4fa1744e..8ef566e881989f 100644
--- a/x-pack/legacy/plugins/graph/public/components/field_manager/field_picker.tsx
+++ b/x-pack/legacy/plugins/graph/public/components/field_manager/field_picker.tsx
@@ -16,11 +16,17 @@ export interface FieldPickerProps {
   fieldMap: Record<string, WorkspaceField>;
   selectField: (fieldName: string) => void;
   deselectField: (fieldName: string) => void;
+  open: boolean;
+  setOpen: (open: boolean) => void;
 }
 
-export function FieldPicker({ fieldMap, selectField, deselectField }: FieldPickerProps) {
-  const [open, setOpen] = useState(false);
-
+export function FieldPicker({
+  fieldMap,
+  selectField,
+  deselectField,
+  open,
+  setOpen,
+}: FieldPickerProps) {
   const allFields = Object.values(fieldMap);
   const unselectedFields = allFields.filter(field => !field.selected);
   const hasSelectedFields = unselectedFields.length < allFields.length;
diff --git a/x-pack/legacy/plugins/graph/public/components/graph_visualization/__snapshots__/graph_visualization.test.tsx.snap b/x-pack/legacy/plugins/graph/public/components/graph_visualization/__snapshots__/graph_visualization.test.tsx.snap
new file mode 100644
index 00000000000000..0339bfc8a9be5d
--- /dev/null
+++ b/x-pack/legacy/plugins/graph/public/components/graph_visualization/__snapshots__/graph_visualization.test.tsx.snap
@@ -0,0 +1,173 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`graph_visualization should render to svg elements 1`] = `
+<svg
+  className="gphGraph"
+  height="100%"
+  id="graphSvg"
+  pointerEvents="all"
+  width="100%"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g>
+    <g>
+      <line
+        className="gphEdge gphEdge--selected"
+        key="A..1-B..2"
+        onClick={[Function]}
+        strokeLinecap="round"
+        style={
+          Object {
+            "strokeWidth": 2,
+          }
+        }
+        x1={5}
+        x2={7}
+        y1={5}
+        y2={9}
+      />
+      <line
+        className="gphEdge gphEdge--selected"
+        key="B..2-C..3"
+        onClick={[Function]}
+        strokeLinecap="round"
+        style={
+          Object {
+            "strokeWidth": 2.2,
+          }
+        }
+        x1={7}
+        x2={12}
+        y1={9}
+        y2={2}
+      />
+    </g>
+    <g
+      className="gphNode"
+      key="A..1"
+      onClick={[Function]}
+      onMouseDown={[Function]}
+    >
+      <circle
+        className="gphNode__circle gphNode__circle--selected"
+        cx={5}
+        cy={5}
+        r={10}
+        style={
+          Object {
+            "fill": "black",
+          }
+        }
+      />
+      <text
+        className="fa gphNode__text gphNode__text--inverse"
+        textAnchor="middle"
+        transform="translate(0,5)"
+        x={5}
+        y={5}
+      >
+        a
+      </text>
+      <text
+        className="gphNode__label"
+        textAnchor="middle"
+        transform="translate(0,22)"
+        x={5}
+        y={5}
+      >
+        1
+      </text>
+      <g>
+        <circle
+          className="gphNode__markerCircle"
+          cx={5}
+          cy={5}
+          r="5"
+          transform="translate(10,10)"
+        />
+        <text
+          className="gphNode__markerText"
+          textAnchor="middle"
+          transform="translate(10,12)"
+          x={5}
+          y={5}
+        >
+          1
+        </text>
+      </g>
+    </g>
+    <g
+      className="gphNode"
+      key="B..2"
+      onClick={[Function]}
+      onMouseDown={[Function]}
+    >
+      <circle
+        className="gphNode__circle"
+        cx={7}
+        cy={9}
+        r={10}
+        style={
+          Object {
+            "fill": "red",
+          }
+        }
+      />
+      <text
+        className="fa gphNode__text gphNode__text--inverse"
+        textAnchor="middle"
+        transform="translate(0,5)"
+        x={7}
+        y={9}
+      >
+        b
+      </text>
+      <text
+        className="gphNode__label"
+        textAnchor="middle"
+        transform="translate(0,22)"
+        x={7}
+        y={9}
+      >
+        2
+      </text>
+    </g>
+    <g
+      className="gphNode"
+      key="C..3"
+      onClick={[Function]}
+      onMouseDown={[Function]}
+    >
+      <circle
+        className="gphNode__circle"
+        cx={12}
+        cy={2}
+        r={10}
+        style={
+          Object {
+            "fill": "yellow",
+          }
+        }
+      />
+      <text
+        className="fa gphNode__text gphNode__text--inverse"
+        textAnchor="middle"
+        transform="translate(0,5)"
+        x={12}
+        y={2}
+      >
+        c
+      </text>
+      <text
+        className="gphNode__label"
+        textAnchor="middle"
+        transform="translate(0,22)"
+        x={12}
+        y={2}
+      >
+        3
+      </text>
+    </g>
+  </g>
+</svg>
+`;
diff --git a/x-pack/legacy/plugins/graph/public/components/graph_visualization/_graph_visualization.scss b/x-pack/legacy/plugins/graph/public/components/graph_visualization/_graph_visualization.scss
new file mode 100644
index 00000000000000..4613ac77b97bba
--- /dev/null
+++ b/x-pack/legacy/plugins/graph/public/components/graph_visualization/_graph_visualization.scss
@@ -0,0 +1,60 @@
+.gphEdge {
+  fill: $euiColorMediumShade;
+  stroke: $euiColorMediumShade;
+  stroke-width: 2;
+  stroke-opacity: 0.5;
+
+  &:hover {
+    stroke-opacity: 0.95;
+    cursor: pointer;
+  }
+
+  &--selected {
+    stroke: $euiColorDarkShade;
+    stroke-opacity: 0.95;
+  }
+
+  &--inferred {
+    stroke-dasharray: 5, 5;
+  }
+}
+
+.gphNode {
+  cursor: pointer;
+}
+
+.gphNode__label {
+  @include gphSvgText;
+  cursor: pointer;
+  &--html {
+    @include euiTextTruncate;
+    text-align: center;
+  }
+}
+
+.gphNode__markerCircle {
+  fill: $euiColorDarkShade;
+  stroke: $euiColorEmptyShade;
+}
+
+.gphNode__markerText {
+  @include gphSvgText;
+  font-size: $euiSizeS - 2px;
+  fill: $euiColorEmptyShade;
+}
+
+.gphNode__circle {
+  fill: $euiColorMediumShade;
+  &--selected {
+    stroke-width: $euiSizeXS;
+    stroke: transparentize($euiColorPrimary, 0.25);
+  }
+}
+
+.gphNode__text {
+  fill: $euiColorInk;
+
+  &--inverse {
+    fill: $euiColorGhost;
+  }
+}
diff --git a/x-pack/legacy/plugins/graph/public/components/graph_visualization/_index.scss b/x-pack/legacy/plugins/graph/public/components/graph_visualization/_index.scss
new file mode 100644
index 00000000000000..8df131c731c22d
--- /dev/null
+++ b/x-pack/legacy/plugins/graph/public/components/graph_visualization/_index.scss
@@ -0,0 +1 @@
+@import './graph_visualization';
\ No newline at end of file
diff --git a/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.test.tsx b/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.test.tsx
new file mode 100644
index 00000000000000..deeea8175da8ec
--- /dev/null
+++ b/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.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 React from 'react';
+import { shallow } from 'enzyme';
+import {
+  GraphVisualization,
+  GroupAwareWorkspaceNode,
+  GroupAwareWorkspaceEdge,
+} from './graph_visualization';
+
+describe('graph_visualization', () => {
+  const nodes: GroupAwareWorkspaceNode[] = [
+    {
+      color: 'black',
+      data: {
+        field: 'A',
+        term: '1',
+      },
+      icon: {
+        class: 'a',
+        code: 'a',
+        label: '',
+      },
+      isSelected: true,
+      kx: 5,
+      ky: 5,
+      label: '1',
+      numChildren: 1,
+      parent: null,
+      scaledSize: 10,
+      x: 5,
+      y: 5,
+    },
+    {
+      color: 'red',
+      data: {
+        field: 'B',
+        term: '2',
+      },
+      icon: {
+        class: 'b',
+        code: 'b',
+        label: '',
+      },
+      isSelected: false,
+      kx: 7,
+      ky: 9,
+      label: '2',
+      numChildren: 0,
+      parent: null,
+      scaledSize: 10,
+      x: 7,
+      y: 9,
+    },
+    {
+      color: 'yellow',
+      data: {
+        field: 'C',
+        term: '3',
+      },
+      icon: {
+        class: 'c',
+        code: 'c',
+        label: '',
+      },
+      isSelected: false,
+      kx: 12,
+      ky: 2,
+      label: '3',
+      numChildren: 0,
+      parent: null,
+      scaledSize: 10,
+      x: 7,
+      y: 9,
+    },
+  ];
+  const edges: GroupAwareWorkspaceEdge[] = [
+    {
+      inferred: false,
+      isSelected: true,
+      label: '',
+      topSrc: nodes[0],
+      topTarget: nodes[1],
+      source: nodes[0],
+      target: nodes[1],
+      weight: 10,
+      width: 2,
+    },
+    {
+      inferred: false,
+      isSelected: true,
+      label: '',
+      topSrc: nodes[1],
+      topTarget: nodes[2],
+      source: nodes[1],
+      target: nodes[2],
+      weight: 10,
+      width: 2.2,
+    },
+  ];
+  it('should render empty workspace without data', () => {
+    expect(shallow(<GraphVisualization edgeClick={() => {}} nodeClick={() => {}} />))
+      .toMatchInlineSnapshot(`
+      <svg
+        className="gphGraph"
+        height="100%"
+        id="graphSvg"
+        pointerEvents="all"
+        width="100%"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g>
+          <g />
+        </g>
+      </svg>
+    `);
+  });
+
+  it('should render to svg elements', () => {
+    expect(
+      shallow(
+        <GraphVisualization edgeClick={() => {}} nodeClick={() => {}} nodes={nodes} edges={edges} />
+      )
+    ).toMatchSnapshot();
+  });
+
+  it('should react to node click', () => {
+    const nodeClickSpy = jest.fn();
+    const instance = shallow(
+      <GraphVisualization
+        edgeClick={() => {}}
+        nodeClick={nodeClickSpy}
+        nodes={nodes}
+        edges={edges}
+      />
+    );
+    instance
+      .find('.gphNode')
+      .first()
+      .simulate('click', {});
+    expect(nodeClickSpy).toHaveBeenCalledWith(nodes[0], {});
+  });
+
+  it('should react to edge click', () => {
+    const edgeClickSpy = jest.fn();
+    const instance = shallow(
+      <GraphVisualization
+        edgeClick={edgeClickSpy}
+        nodeClick={() => {}}
+        nodes={nodes}
+        edges={edges}
+      />
+    );
+    instance
+      .find('.gphEdge')
+      .first()
+      .simulate('click');
+    expect(edgeClickSpy).toHaveBeenCalledWith(edges[0]);
+  });
+});
diff --git a/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx b/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx
new file mode 100644
index 00000000000000..696e94da68a68a
--- /dev/null
+++ b/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx
@@ -0,0 +1,194 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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, { useRef } from 'react';
+import classNames from 'classnames';
+import d3, { ZoomEvent } from 'd3';
+import { isColorDark, hexToRgb } from '@elastic/eui';
+import { WorkspaceNode, WorkspaceEdge } from '../../types';
+import { makeNodeId } from '../../services/persistence';
+
+/*
+ * The layouting algorithm sets a few extra properties on
+ * node objects to handle grouping. This will be moved to
+ * a separate data structure when the layouting is migrated
+ */
+
+export interface GroupAwareWorkspaceNode extends WorkspaceNode {
+  kx: number;
+  ky: number;
+  numChildren: number;
+}
+
+export interface GroupAwareWorkspaceEdge extends WorkspaceEdge {
+  topTarget: GroupAwareWorkspaceNode;
+  topSrc: GroupAwareWorkspaceNode;
+}
+
+export interface GraphVisualizationProps {
+  nodes?: GroupAwareWorkspaceNode[];
+  edges?: GroupAwareWorkspaceEdge[];
+  edgeClick: (edge: GroupAwareWorkspaceEdge) => void;
+  nodeClick: (node: GroupAwareWorkspaceNode, e: React.MouseEvent<Element, MouseEvent>) => void;
+}
+
+function registerZooming(element: SVGSVGElement) {
+  const blockScroll = function() {
+    (d3.event as Event).preventDefault();
+  };
+  d3.select(element)
+    .on('mousewheel', blockScroll)
+    .on('DOMMouseScroll', blockScroll)
+    .call(
+      d3.behavior.zoom().on('zoom', () => {
+        const event = d3.event as ZoomEvent;
+        d3.select(element)
+          .select('g')
+          .attr('transform', 'translate(' + event.translate + ')' + 'scale(' + event.scale + ')')
+          .attr('style', 'stroke-width: ' + 1 / event.scale);
+      })
+    );
+}
+
+export function GraphVisualization({
+  nodes,
+  edges,
+  edgeClick,
+  nodeClick,
+}: GraphVisualizationProps) {
+  const svgRoot = useRef<SVGSVGElement | null>(null);
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="gphGraph"
+      width="100%"
+      height="100%"
+      pointerEvents="all"
+      id="graphSvg"
+      ref={element => {
+        if (element && svgRoot.current !== element) {
+          svgRoot.current = element;
+          registerZooming(element);
+        }
+      }}
+    >
+      <g>
+        <g>
+          {edges &&
+            edges.map(edge => (
+              <line
+                key={`${makeNodeId(edge.source.data.field, edge.source.data.term)}-${makeNodeId(
+                  edge.target.data.field,
+                  edge.target.data.term
+                )}`}
+                x1={edge.topSrc.kx}
+                y1={edge.topSrc.ky}
+                x2={edge.topTarget.kx}
+                y2={edge.topTarget.ky}
+                onClick={() => {
+                  edgeClick(edge);
+                }}
+                className={classNames('gphEdge', {
+                  'gphEdge--selected': edge.isSelected,
+                  'gphEdge--inferred': edge.inferred,
+                })}
+                style={{ strokeWidth: edge.width }}
+                strokeLinecap="round"
+              />
+            ))}
+        </g>
+        {nodes &&
+          nodes
+            .filter(node => !node.parent)
+            .map(node => (
+              <g
+                key={makeNodeId(node.data.field, node.data.term)}
+                onClick={e => {
+                  nodeClick(node, e);
+                }}
+                onMouseDown={e => {
+                  // avoid selecting text when selecting nodes
+                  if (e.ctrlKey || e.shiftKey) {
+                    e.preventDefault();
+                  }
+                }}
+                className="gphNode"
+              >
+                <circle
+                  cx={node.kx}
+                  cy={node.ky}
+                  r={node.scaledSize}
+                  className={classNames('gphNode__circle', {
+                    'gphNode__circle--selected': node.isSelected,
+                  })}
+                  style={{ fill: node.color }}
+                />
+                {node.icon && (
+                  <text
+                    className={classNames('fa gphNode__text', {
+                      'gphNode__text--inverse': isColorDark(...hexToRgb(node.color)),
+                    })}
+                    transform="translate(0,5)"
+                    textAnchor="middle"
+                    x={node.kx}
+                    y={node.ky}
+                  >
+                    {node.icon.code}
+                  </text>
+                )}
+
+                {node.label.length < 30 && (
+                  <text
+                    className="gphNode__label"
+                    textAnchor="middle"
+                    transform="translate(0,22)"
+                    x={node.kx}
+                    y={node.ky}
+                  >
+                    {node.label}
+                  </text>
+                )}
+                {node.label.length >= 30 && (
+                  <foreignObject
+                    width="100"
+                    height="20"
+                    transform="translate(-50,15)"
+                    x={node.kx}
+                    y={node.ky}
+                  >
+                    <p className="gphNode__label gphNode__label--html gphNoUserSelect">
+                      {node.label}
+                    </p>
+                  </foreignObject>
+                )}
+
+                {node.numChildren > 0 && (
+                  <g>
+                    <circle
+                      r="5"
+                      className="gphNode__markerCircle"
+                      transform="translate(10,10)"
+                      cx={node.kx}
+                      cy={node.ky}
+                    />
+                    <text
+                      className="gphNode__markerText"
+                      textAnchor="middle"
+                      transform="translate(10,12)"
+                      x={node.kx}
+                      y={node.ky}
+                    >
+                      {node.numChildren}
+                    </text>
+                  </g>
+                )}
+              </g>
+            ))}
+      </g>
+    </svg>
+  );
+}
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/index_or_search/index.js b/x-pack/legacy/plugins/graph/public/components/graph_visualization/index.ts
similarity index 85%
rename from x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/index_or_search/index.js
rename to x-pack/legacy/plugins/graph/public/components/graph_visualization/index.ts
index 1fefb7ce92c107..7f8fd972efb775 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/index_or_search/index.js
+++ b/x-pack/legacy/plugins/graph/public/components/graph_visualization/index.ts
@@ -4,6 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-
-
-import './index_or_search_controller';
+export * from './graph_visualization';
diff --git a/x-pack/legacy/plugins/graph/public/components/guidance_panel/_guidance_panel.scss b/x-pack/legacy/plugins/graph/public/components/guidance_panel/_guidance_panel.scss
new file mode 100644
index 00000000000000..f1c332eba1aa8a
--- /dev/null
+++ b/x-pack/legacy/plugins/graph/public/components/guidance_panel/_guidance_panel.scss
@@ -0,0 +1,47 @@
+.gphGuidancePanel {
+  max-width: 580px;
+  margin: $euiSizeL 0;
+}
+
+.gphGuidancePanel__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.gphGuidancePanel__item {
+  display: block;
+  max-width: 420px;
+  position: relative;
+  padding-left: $euiSizeXL;
+  margin-bottom: $euiSizeL;
+
+  button {
+    // make buttons wrap lines like regular text
+    display: contents;
+  }
+}
+
+.gphGuidancePanel__item--disabled {
+  color: $euiColorDarkShade;
+  pointer-events: none;
+
+  button {
+    color: $euiColorDarkShade !important;
+  }
+}
+
+.gphGuidancePanel__itemIcon {
+  position: absolute;
+  left: 0;
+  top: -($euiSizeXS / 2);
+  width: $euiSizeL;
+  height: $euiSizeL;
+  padding: $euiSizeXS;
+
+  &--done {
+    background-color: $euiColorSecondary;
+    color: $euiColorEmptyShade;
+    border-radius: 50%;
+  }
+}
diff --git a/x-pack/legacy/plugins/graph/public/components/guidance_panel/_index.scss b/x-pack/legacy/plugins/graph/public/components/guidance_panel/_index.scss
new file mode 100644
index 00000000000000..65c71cc17ba354
--- /dev/null
+++ b/x-pack/legacy/plugins/graph/public/components/guidance_panel/_index.scss
@@ -0,0 +1 @@
+@import './_guidance_panel';
\ No newline at end of file
diff --git a/x-pack/legacy/plugins/graph/public/components/guidance_panel/guidance_panel.tsx b/x-pack/legacy/plugins/graph/public/components/guidance_panel/guidance_panel.tsx
new file mode 100644
index 00000000000000..840280a7541544
--- /dev/null
+++ b/x-pack/legacy/plugins/graph/public/components/guidance_panel/guidance_panel.tsx
@@ -0,0 +1,183 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { ReactNode } from 'react';
+import { EuiPanel, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText, EuiLink } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import classNames from 'classnames';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { connect } from 'react-redux';
+import { IDataPluginServices } from 'src/legacy/core_plugins/data/public/types';
+import {
+  GraphState,
+  hasDatasourceSelector,
+  hasFieldsSelector,
+  requestDatasource,
+} from '../../state_management';
+import { IndexPatternSavedObject } from '../../types';
+import { openSourceModal } from '../../services/source_modal';
+
+import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
+
+export interface GuidancePanelProps {
+  onFillWorkspace: () => void;
+  onOpenFieldPicker: () => void;
+  hasDatasource: boolean;
+  hasFields: boolean;
+  onIndexPatternSelected: (indexPattern: IndexPatternSavedObject) => void;
+}
+
+function ListItem({
+  children,
+  state,
+}: {
+  state: 'done' | 'active' | 'disabled';
+  children: ReactNode;
+}) {
+  return (
+    <li
+      className={classNames('gphGuidancePanel__item', {
+        'gphGuidancePanel__item--disabled': state === 'disabled',
+      })}
+      aria-disabled={state === 'disabled'}
+    >
+      {state !== 'disabled' && (
+        <span
+          className={classNames('gphGuidancePanel__itemIcon', {
+            'gphGuidancePanel__itemIcon--done': state === 'done',
+          })}
+          aria-hidden={true}
+        >
+          <EuiIcon type={state === 'active' ? 'sortRight' : 'check'} />
+        </span>
+      )}
+      <EuiText>{children}</EuiText>
+    </li>
+  );
+}
+
+function GuidancePanelComponent(props: GuidancePanelProps) {
+  const {
+    onFillWorkspace,
+    onOpenFieldPicker,
+    onIndexPatternSelected,
+    hasDatasource,
+    hasFields,
+  } = props;
+
+  const kibana = useKibana<IDataPluginServices>();
+  const { overlays, savedObjects, uiSettings } = kibana.services;
+  if (!overlays) return null;
+
+  const onOpenDatasourcePicker = () => {
+    openSourceModal({ overlays, savedObjects, uiSettings }, onIndexPatternSelected);
+  };
+
+  return (
+    <EuiFlexGroup justifyContent="center">
+      <EuiFlexItem className="gphGuidancePanel">
+        <EuiPanel>
+          <EuiFlexGroup direction="column" alignItems="center">
+            <EuiFlexItem grow={false}>
+              <EuiIcon type="graphApp" size="xxl" />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiText>
+                <h1
+                  aria-label={i18n.translate('xpack.graph.guidancePanel.ariaLabel', {
+                    defaultMessage: "Let's get started building your first graph!",
+                  })}
+                >
+                  {i18n.translate('xpack.graph.guidancePanel.title', {
+                    defaultMessage: "Let's get started!",
+                  })}
+                </h1>
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <ul className="gphGuidancePanel__list">
+                <ListItem state={hasDatasource ? 'done' : 'active'}>
+                  <FormattedMessage
+                    id="xpack.graph.guidancePanel.datasourceItem.description"
+                    defaultMessage="Choose an {indexpattern}"
+                    values={{
+                      indexpattern: (
+                        <EuiLink onClick={onOpenDatasourcePicker}>
+                          {i18n.translate(
+                            'xpack.graph.guidancePanel.datasourceItem.indexPatternButtonLabel',
+                            {
+                              defaultMessage: 'index pattern',
+                            }
+                          )}
+                        </EuiLink>
+                      ),
+                    }}
+                  />
+                </ListItem>
+                <ListItem state={hasFields ? 'done' : hasDatasource ? 'active' : 'disabled'}>
+                  <FormattedMessage
+                    id="xpack.graph.guidancePanel.fieldsItem.description"
+                    defaultMessage="{fields} to explore"
+                    values={{
+                      fields: (
+                        <EuiLink onClick={onOpenFieldPicker}>
+                          {i18n.translate(
+                            'xpack.graph.guidancePanel.fieldsItem.fieldsButtonLabel',
+                            {
+                              defaultMessage: 'Select fields',
+                            }
+                          )}
+                        </EuiLink>
+                      ),
+                    }}
+                  />
+                </ListItem>
+                <ListItem state={hasFields ? 'active' : 'disabled'}>
+                  <FormattedMessage
+                    id="xpack.graph.guidancePanel.nodesItem.description"
+                    defaultMessage="Search for something in the search bar above to begin exploration. If you don't know where to start, you can also {topTerms}"
+                    values={{
+                      topTerms: (
+                        <EuiLink onClick={onFillWorkspace}>
+                          {i18n.translate(
+                            'xpack.graph.guidancePanel.nodesItem.topTermsButtonLabel',
+                            {
+                              defaultMessage: 'show correlations of the top terms',
+                            }
+                          )}
+                        </EuiLink>
+                      ),
+                    }}
+                  />
+                </ListItem>
+              </ul>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiPanel>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
+
+export const GuidancePanel = connect(
+  (state: GraphState) => {
+    return {
+      hasDatasource: hasDatasourceSelector(state),
+      hasFields: hasFieldsSelector(state),
+    };
+  },
+  dispatch => ({
+    onIndexPatternSelected: (indexPattern: IndexPatternSavedObject) => {
+      dispatch(
+        requestDatasource({
+          type: 'indexpattern',
+          id: indexPattern.id,
+          title: indexPattern.attributes.title,
+        })
+      );
+    },
+  })
+)(GuidancePanelComponent);
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/job_type/index.js b/x-pack/legacy/plugins/graph/public/components/guidance_panel/index.ts
similarity index 87%
rename from x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/job_type/index.js
rename to x-pack/legacy/plugins/graph/public/components/guidance_panel/index.ts
index 9a9fa7e73b9f1e..8704eb2eb6761c 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/job_type/index.js
+++ b/x-pack/legacy/plugins/graph/public/components/guidance_panel/index.ts
@@ -4,6 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-
-
-import './job_type_controller';
+export * from './guidance_panel';
diff --git a/x-pack/legacy/plugins/graph/public/components/legacy_icon/_legacy_icon.scss b/x-pack/legacy/plugins/graph/public/components/legacy_icon/_legacy_icon.scss
index 75a578fe6ed21a..56fc1b31a9ffaf 100644
--- a/x-pack/legacy/plugins/graph/public/components/legacy_icon/_legacy_icon.scss
+++ b/x-pack/legacy/plugins/graph/public/components/legacy_icon/_legacy_icon.scss
@@ -1,7 +1,20 @@
 .gphLegacyIcon {
   width: $euiSizeS * 2;
-}
 
-.gphLegacyIcon--list {
-  margin-right: $euiSizeM;
+  &--list {
+    margin-right: $euiSizeM;
+  }
+
+  &--pickable {
+    margin: $euiSizeXS;
+    cursor: pointer;
+    opacity: 0.7;
+  }
+
+  &--pickable:hover,
+  &--pickable:focus,
+  &--selected {
+    transform: scale(1.4);
+    opacity: 1;
+  }
 }
diff --git a/x-pack/legacy/plugins/graph/public/components/legacy_icon/legacy_icon.tsx b/x-pack/legacy/plugins/graph/public/components/legacy_icon/legacy_icon.tsx
index 7b0f2fbee6938d..2c7b625664b227 100644
--- a/x-pack/legacy/plugins/graph/public/components/legacy_icon/legacy_icon.tsx
+++ b/x-pack/legacy/plugins/graph/public/components/legacy_icon/legacy_icon.tsx
@@ -21,11 +21,8 @@ export function LegacyIcon(props: LegacyIconProps) {
   const icon = (
     <i
       className={classNames('fa', props.className, 'gphLegacyIcon', {
-        selectedNode: props.selected,
-        gphNode__text: !props.onClick,
-        'gphNode__text--lowOpacity': !props.onClick,
-        gphIconPicker__icon: !!props.onClick,
-        gphNoUserSelect: !!props.onClick,
+        'gphLegacyIcon--selected': props.selected,
+        'gphLegacyIcon--pickable': !!props.onClick,
         'gphLegacyIcon--list': props.asListIcon,
       })}
       aria-label={props.icon.label}
diff --git a/x-pack/legacy/plugins/graph/public/components/search_bar.test.tsx b/x-pack/legacy/plugins/graph/public/components/search_bar.test.tsx
index eb97d63a333951..3c37c77e6d4504 100644
--- a/x-pack/legacy/plugins/graph/public/components/search_bar.test.tsx
+++ b/x-pack/legacy/plugins/graph/public/components/search_bar.test.tsx
@@ -4,33 +4,95 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { SearchBar } from './search_bar';
-import { shallowWithIntl } from 'test_utils/enzyme_helpers';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import { SearchBar, OuterSearchBarProps } from './search_bar';
 import React, { ReactElement } from 'react';
 import { CoreStart } from 'src/core/public';
 import { act } from 'react-dom/test-utils';
-import { IndexPattern, QueryBarInput } from 'src/legacy/core_plugins/data/public';
+import { QueryBarInput, IndexPattern } from 'src/legacy/core_plugins/data/public';
+
+import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public';
+import { I18nProvider } from '@kbn/i18n/react';
 
 jest.mock('ui/new_platform');
+
 import { openSourceModal } from '../services/source_modal';
+import { GraphStore, setDatasource } from '../state_management';
+import { ReactWrapper } from 'enzyme';
+import { createMockGraphStore } from '../state_management/mocks';
+import { Provider } from 'react-redux';
 
 jest.mock('../services/source_modal', () => ({ openSourceModal: jest.fn() }));
+jest.mock('../../../../../../src/legacy/core_plugins/data/public', () => ({
+  QueryBarInput: () => null,
+}));
+
+const waitForIndexPatternFetch = () => new Promise(r => setTimeout(r));
+
+function wrapSearchBarInContext(testProps: OuterSearchBarProps) {
+  const services = {
+    uiSettings: {
+      get: (key: string) => {
+        return 10;
+      },
+    } as CoreStart['uiSettings'],
+    savedObjects: {} as CoreStart['savedObjects'],
+    notifications: {} as CoreStart['notifications'],
+    http: {} as CoreStart['http'],
+    overlays: {} as CoreStart['overlays'],
+  };
+
+  return (
+    <I18nProvider>
+      <KibanaContextProvider services={services}>
+        <SearchBar {...testProps} />
+      </KibanaContextProvider>
+    </I18nProvider>
+  );
+}
 
 describe('search_bar', () => {
-  it('should render search bar and submit queryies', () => {
-    const querySubmit = jest.fn();
-    const instance = shallowWithIntl(
-      <SearchBar
-        isLoading={false}
-        onIndexPatternSelected={() => {}}
-        onQuerySubmit={querySubmit}
-        savedObjects={{} as CoreStart['savedObjects']}
-        uiSettings={{} as CoreStart['uiSettings']}
-        http={{} as CoreStart['http']}
-        overlays={{} as CoreStart['overlays']}
-        currentIndexPattern={{ title: 'Testpattern' } as IndexPattern}
-      />
+  const defaultProps = {
+    isLoading: false,
+    onQuerySubmit: jest.fn(),
+    indexPatternProvider: {
+      get: jest.fn(() => Promise.resolve(({ fields: [] } as unknown) as IndexPattern)),
+    },
+    confirmWipeWorkspace: (callback: () => void) => {
+      callback();
+    },
+  };
+  let instance: ReactWrapper;
+  let store: GraphStore;
+
+  beforeEach(() => {
+    store = createMockGraphStore({ includeSagas: false }).store;
+    store.dispatch(
+      setDatasource({
+        type: 'indexpattern',
+        id: '123',
+        title: 'test-index',
+      })
     );
+  });
+
+  function mountSearchBar() {
+    jest.clearAllMocks();
+    const wrappedSearchBar = wrapSearchBarInContext({ ...defaultProps });
+    instance = mountWithIntl(<Provider store={store}>{wrappedSearchBar}</Provider>);
+  }
+
+  it('should render search bar and fetch index pattern', () => {
+    mountSearchBar();
+
+    expect(defaultProps.indexPatternProvider.get).toHaveBeenCalledWith('123');
+  });
+
+  it('should render search bar and submit queries', async () => {
+    mountSearchBar();
+
+    await waitForIndexPatternFetch();
+
     act(() => {
       instance.find(QueryBarInput).prop('onChange')!({ language: 'lucene', query: 'testQuery' });
     });
@@ -39,23 +101,14 @@ describe('search_bar', () => {
       instance.find('form').simulate('submit', { preventDefault: () => {} });
     });
 
-    expect(querySubmit).toHaveBeenCalledWith('testQuery');
+    expect(defaultProps.onQuerySubmit).toHaveBeenCalledWith('testQuery');
   });
 
-  it('should translate kql query into JSON dsl', () => {
-    const querySubmit = jest.fn();
-    const instance = shallowWithIntl(
-      <SearchBar
-        isLoading={false}
-        onIndexPatternSelected={() => {}}
-        onQuerySubmit={querySubmit}
-        savedObjects={{} as CoreStart['savedObjects']}
-        uiSettings={{} as CoreStart['uiSettings']}
-        http={{} as CoreStart['http']}
-        overlays={{} as CoreStart['overlays']}
-        currentIndexPattern={{ title: 'Testpattern', fields: [{ name: 'test' }] } as IndexPattern}
-      />
-    );
+  it('should translate kql query into JSON dsl', async () => {
+    mountSearchBar();
+
+    await waitForIndexPatternFetch();
+
     act(() => {
       instance.find(QueryBarInput).prop('onChange')!({ language: 'kuery', query: 'test: abc' });
     });
@@ -64,26 +117,14 @@ describe('search_bar', () => {
       instance.find('form').simulate('submit', { preventDefault: () => {} });
     });
 
-    const parsedQuery = JSON.parse(querySubmit.mock.calls[0][0]);
+    const parsedQuery = JSON.parse(defaultProps.onQuerySubmit.mock.calls[0][0]);
     expect(parsedQuery).toEqual({
       bool: { should: [{ match: { test: 'abc' } }], minimum_should_match: 1 },
     });
   });
 
   it('should open index pattern picker', () => {
-    const indexPatternSelected = jest.fn();
-    const instance = shallowWithIntl(
-      <SearchBar
-        isLoading={false}
-        onIndexPatternSelected={indexPatternSelected}
-        onQuerySubmit={() => {}}
-        savedObjects={{} as CoreStart['savedObjects']}
-        uiSettings={{} as CoreStart['uiSettings']}
-        http={{} as CoreStart['http']}
-        overlays={{} as CoreStart['overlays']}
-        currentIndexPattern={{ title: 'Testpattern' } as IndexPattern}
-      />
-    );
+    mountSearchBar();
 
     // pick the button component out of the tree because
     // it's part of a popover and thus not covered by enzyme
diff --git a/x-pack/legacy/plugins/graph/public/components/search_bar.tsx b/x-pack/legacy/plugins/graph/public/components/search_bar.tsx
index 358d7d23d9ed4c..ae0d32cd5f6862 100644
--- a/x-pack/legacy/plugins/graph/public/components/search_bar.tsx
+++ b/x-pack/legacy/plugins/graph/public/components/search_bar.tsx
@@ -5,33 +5,39 @@
  */
 
 import { EuiFlexGroup, EuiFlexItem, EuiButton, EuiButtonEmpty, EuiToolTip } from '@elastic/eui';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
-import { Storage } from 'ui/storage';
-import { CoreStart } from 'src/core/public';
 import { i18n } from '@kbn/i18n';
-import { I18nProvider } from '@kbn/i18n/react';
+import { connect } from 'react-redux';
 import { fromKueryExpression, toElasticsearchQuery } from '@kbn/es-query';
+import { IDataPluginServices } from 'src/legacy/core_plugins/data/public/types';
+import { IndexPatternSavedObject, IndexPatternProvider } from '../types';
 import {
   QueryBarInput,
   Query,
   IndexPattern,
 } from '../../../../../../src/legacy/core_plugins/data/public';
-import { IndexPatternSavedObject } from '../types/app_state';
 import { openSourceModal } from '../services/source_modal';
+import {
+  GraphState,
+  datasourceSelector,
+  requestDatasource,
+  IndexpatternDatasource,
+} from '../state_management';
 
-const localStorage = new Storage(window.localStorage);
+import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
 
-export interface SearchBarProps {
+export interface OuterSearchBarProps {
   isLoading: boolean;
-  currentIndexPattern?: IndexPattern;
   initialQuery?: string;
-  onIndexPatternSelected: (indexPattern: IndexPatternSavedObject) => void;
   onQuerySubmit: (query: string) => void;
-  savedObjects: CoreStart['savedObjects'];
-  uiSettings: CoreStart['uiSettings'];
-  http: CoreStart['http'];
-  overlays: CoreStart['overlays'];
+  confirmWipeWorkspace: (onConfirm: () => void) => void;
+  indexPatternProvider: IndexPatternProvider;
+}
+
+export interface SearchBarProps extends OuterSearchBarProps {
+  currentDatasource?: IndexpatternDatasource;
+  onIndexPatternSelected: (indexPattern: IndexPatternSavedObject) => void;
 }
 
 function queryToString(query: Query, indexPattern: IndexPattern) {
@@ -50,78 +56,114 @@ function queryToString(query: Query, indexPattern: IndexPattern) {
   return JSON.stringify(query.query);
 }
 
-export function SearchBar(props: SearchBarProps) {
+export function SearchBarComponent(props: SearchBarProps) {
   const {
-    currentIndexPattern,
+    currentDatasource,
     onQuerySubmit,
     isLoading,
     onIndexPatternSelected,
-    uiSettings,
-    savedObjects,
-    http,
     initialQuery,
+    indexPatternProvider,
+    confirmWipeWorkspace,
   } = props;
   const [query, setQuery] = useState<Query>({ language: 'kuery', query: initialQuery || '' });
+  const [currentIndexPattern, setCurrentIndexPattern] = useState<IndexPattern | undefined>(
+    undefined
+  );
+
+  useEffect(() => {
+    async function fetchPattern() {
+      if (currentDatasource) {
+        setCurrentIndexPattern(await indexPatternProvider.get(currentDatasource.id));
+      } else {
+        setCurrentIndexPattern(undefined);
+      }
+    }
+    fetchPattern();
+  }, [currentDatasource]);
+
+  const kibana = useKibana<IDataPluginServices>();
+  const { overlays, savedObjects, uiSettings } = kibana.services;
+  if (!overlays) return null;
+
   return (
-    <I18nProvider>
-      <form
-        className="gphSearchBar"
-        onSubmit={e => {
-          e.preventDefault();
-          if (!isLoading && currentIndexPattern) {
-            onQuerySubmit(queryToString(query, currentIndexPattern));
-          }
-        }}
-      >
-        <EuiFlexGroup gutterSize="m">
-          <EuiFlexItem>
-            <QueryBarInput
-              disableAutoFocus
-              bubbleSubmitEvent
-              uiSettings={uiSettings}
-              savedObjectsClient={savedObjects.client}
-              http={http}
-              query={query}
-              indexPatterns={currentIndexPattern ? [currentIndexPattern] : []}
-              store={localStorage}
-              appName="graph"
-              placeholder={i18n.translate('xpack.graph.bar.searchFieldPlaceholder', {
-                defaultMessage: 'Search your data and add to your graph',
-              })}
-              prepend={
-                <EuiToolTip
-                  content={i18n.translate('xpack.graph.bar.pickSourceTooltip', {
-                    defaultMessage: 'Click here to pick another data source',
-                  })}
+    <form
+      onSubmit={e => {
+        e.preventDefault();
+        if (!isLoading && currentIndexPattern) {
+          onQuerySubmit(queryToString(query, currentIndexPattern));
+        }
+      }}
+    >
+      <EuiFlexGroup gutterSize="m">
+        <EuiFlexItem>
+          <QueryBarInput
+            disableAutoFocus
+            bubbleSubmitEvent
+            indexPatterns={currentIndexPattern ? [currentIndexPattern] : []}
+            placeholder={i18n.translate('xpack.graph.bar.searchFieldPlaceholder', {
+              defaultMessage: 'Search your data and add to your graph',
+            })}
+            query={query}
+            prepend={
+              <EuiToolTip
+                content={i18n.translate('xpack.graph.bar.pickSourceTooltip', {
+                  defaultMessage: 'Click here to pick another data source',
+                })}
+              >
+                <EuiButtonEmpty
+                  size="xs"
+                  className="gphSearchBar__datasourceButton"
+                  data-test-subj="graphDatasourceButton"
+                  onClick={() => {
+                    confirmWipeWorkspace(() =>
+                      openSourceModal(
+                        { overlays, savedObjects, uiSettings },
+                        onIndexPatternSelected
+                      )
+                    );
+                  }}
                 >
-                  <EuiButtonEmpty
-                    size="xs"
-                    className="gphSearchBar__datasourceButton"
-                    data-test-subj="graphDatasourceButton"
-                    onClick={() => {
-                      openSourceModal(props, onIndexPatternSelected);
-                    }}
-                  >
-                    {currentIndexPattern
-                      ? currentIndexPattern.title
-                      : // This branch will be shown if the user exits the
-                        // initial picker modal
-                        i18n.translate('xpack.graph.bar.pickSourceLabel', {
-                          defaultMessage: 'Click here to pick a data source',
-                        })}
-                  </EuiButtonEmpty>
-                </EuiToolTip>
-              }
-              onChange={setQuery}
-            />
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButton fill type="submit" disabled={isLoading || !currentIndexPattern}>
-              {i18n.translate('xpack.graph.bar.exploreLabel', { defaultMessage: 'Explore' })}
-            </EuiButton>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </form>
-    </I18nProvider>
+                  {currentIndexPattern
+                    ? currentIndexPattern.title
+                    : // This branch will be shown if the user exits the
+                      // initial picker modal
+                      i18n.translate('xpack.graph.bar.pickSourceLabel', {
+                        defaultMessage: 'Click here to pick a data source',
+                      })}
+                </EuiButtonEmpty>
+              </EuiToolTip>
+            }
+            onChange={setQuery}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton fill type="submit" disabled={isLoading || !currentIndexPattern}>
+            {i18n.translate('xpack.graph.bar.exploreLabel', { defaultMessage: 'Explore' })}
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </form>
   );
 }
+
+export const SearchBar = connect(
+  (state: GraphState) => {
+    const datasource = datasourceSelector(state);
+    return {
+      currentDatasource:
+        datasource.current.type === 'indexpattern' ? datasource.current : undefined,
+    };
+  },
+  dispatch => ({
+    onIndexPatternSelected: (indexPattern: IndexPatternSavedObject) => {
+      dispatch(
+        requestDatasource({
+          type: 'indexpattern',
+          id: indexPattern.id,
+          title: indexPattern.attributes.title,
+        })
+      );
+    },
+  })
+)(SearchBarComponent);
diff --git a/x-pack/legacy/plugins/graph/public/components/settings/advanced_settings_form.tsx b/x-pack/legacy/plugins/graph/public/components/settings/advanced_settings_form.tsx
index f963d53c639c4c..e6a99e909c69e4 100644
--- a/x-pack/legacy/plugins/graph/public/components/settings/advanced_settings_form.tsx
+++ b/x-pack/legacy/plugins/graph/public/components/settings/advanced_settings_form.tsx
@@ -23,11 +23,11 @@ type NumberKeys<T> = Exclude<
 
 export function AdvancedSettingsForm({
   advancedSettings,
-  updateAdvancedSettings,
+  updateSettings,
   allFields,
-}: Pick<SettingsProps, 'advancedSettings' | 'updateAdvancedSettings' | 'allFields'>) {
+}: Pick<SettingsProps, 'advancedSettings' | 'updateSettings' | 'allFields'>) {
   function updateSetting<K extends keyof AdvancedSettings>(key: K, value: AdvancedSettings[K]) {
-    updateAdvancedSettings({ ...advancedSettings, [key]: value });
+    updateSettings({ ...advancedSettings, [key]: value });
   }
 
   function getNumberUpdater<K extends NumberKeys<AdvancedSettings>>(key: K) {
diff --git a/x-pack/legacy/plugins/graph/public/components/settings/settings.test.tsx b/x-pack/legacy/plugins/graph/public/components/settings/settings.test.tsx
index a0c95a894ee843..782b26a5582496 100644
--- a/x-pack/legacy/plugins/graph/public/components/settings/settings.test.tsx
+++ b/x-pack/legacy/plugins/graph/public/components/settings/settings.test.tsx
@@ -8,21 +8,44 @@ import React from 'react';
 import { EuiTab, EuiListGroupItem, EuiButton, EuiAccordion, EuiFieldText } from '@elastic/eui';
 import * as Rx from 'rxjs';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
-import { Settings, SettingsProps } from './settings';
+import { Settings, AngularProps } from './settings';
 import { act } from 'react-testing-library';
 import { ReactWrapper } from 'enzyme';
 import { UrlTemplateForm } from './url_template_form';
+import {
+  GraphStore,
+  updateSettings,
+  loadFields,
+  saveTemplate,
+  removeTemplate,
+} from '../../state_management';
+import { createMockGraphStore } from '../../state_management/mocks';
+import { Provider } from 'react-redux';
+import { UrlTemplate } from '../../types';
 
 describe('settings', () => {
-  const props: jest.Mocked<SettingsProps> = {
-    advancedSettings: {
-      maxValuesPerDoc: 5,
-      minDocCount: 10,
-      sampleSize: 12,
-      useSignificance: true,
-      timeoutMillis: 10000,
+  let store: GraphStore;
+  let dispatchSpy: jest.Mock;
+
+  const initialTemplate: UrlTemplate = {
+    description: 'template',
+    encoder: {
+      description: 'test encoder description',
+      encode: jest.fn(),
+      id: 'test',
+      title: 'test encoder',
+      type: 'esq',
+    },
+    url: 'http://example.org',
+    icon: {
+      class: 'test',
+      code: '1',
+      label: 'test',
     },
-    updateAdvancedSettings: jest.fn(),
+    isDefault: false,
+  };
+
+  const angularProps: jest.Mocked<AngularProps> = {
     blacklistedNodes: [
       {
         x: 0,
@@ -60,59 +83,63 @@ describe('settings', () => {
       },
     ],
     unblacklistNode: jest.fn(),
-    urlTemplates: [
-      {
-        description: 'template',
-        encoder: {
-          description: 'test encoder description',
-          encode: jest.fn(),
-          id: 'test',
-          title: 'test encoder',
-          type: 'esq',
-        },
-        url: 'http://example.org',
-        icon: {
-          class: 'test',
-          code: '1',
-          label: 'test',
-        },
-      },
-    ],
-    removeUrlTemplate: jest.fn(),
-    saveUrlTemplate: jest.fn(),
-    allFields: [
-      {
-        selected: false,
-        color: 'black',
-        name: 'B',
-        type: 'string',
-        icon: {
-          class: 'test',
-          code: '1',
-          label: 'test',
-        },
-      },
-      {
-        selected: false,
-        color: 'red',
-        name: 'C',
-        type: 'string',
-        icon: {
-          class: 'test',
-          code: '1',
-          label: 'test',
-        },
-      },
-    ],
     canEditDrillDownUrls: true,
   };
 
-  let subject: Rx.BehaviorSubject<jest.Mocked<SettingsProps>>;
+  let subject: Rx.BehaviorSubject<jest.Mocked<AngularProps>>;
   let instance: ReactWrapper;
 
   beforeEach(() => {
-    subject = new Rx.BehaviorSubject(props);
-    instance = mountWithIntl(<Settings observable={subject.asObservable()} />);
+    store = createMockGraphStore({ includeSagas: false }).store;
+    store.dispatch(
+      updateSettings({
+        maxValuesPerDoc: 5,
+        minDocCount: 10,
+        sampleSize: 12,
+        useSignificance: true,
+        timeoutMillis: 10000,
+      })
+    );
+    store.dispatch(
+      loadFields([
+        {
+          selected: false,
+          color: 'black',
+          name: 'B',
+          type: 'string',
+          icon: {
+            class: 'test',
+            code: '1',
+            label: 'test',
+          },
+        },
+        {
+          selected: false,
+          color: 'red',
+          name: 'C',
+          type: 'string',
+          icon: {
+            class: 'test',
+            code: '1',
+            label: 'test',
+          },
+        },
+      ])
+    );
+    store.dispatch(
+      saveTemplate({
+        index: -1,
+        template: initialTemplate,
+      })
+    );
+    dispatchSpy = jest.fn(store.dispatch);
+    store.dispatch = dispatchSpy;
+    subject = new Rx.BehaviorSubject(angularProps);
+    instance = mountWithIntl(
+      <Provider store={store}>
+        <Settings observable={subject.asObservable()} />
+      </Provider>
+    );
   });
 
   function toTab(tab: string) {
@@ -139,25 +166,14 @@ describe('settings', () => {
         HTMLInputElement
       >);
 
-      expect(props.updateAdvancedSettings).toHaveBeenCalledWith(
-        expect.objectContaining({ sampleSize: 13 })
-      );
-    });
-
-    it('should update on new data', () => {
-      act(() => {
-        subject.next({
-          ...props,
-          advancedSettings: {
-            ...props.advancedSettings,
+      expect(dispatchSpy).toHaveBeenCalledWith(
+        updateSettings(
+          expect.objectContaining({
+            timeoutMillis: 10000,
             sampleSize: 13,
-          },
-        });
-      });
-
-      instance.update();
-
-      expect(input('Sample size').prop('value')).toEqual(13);
+          })
+        )
+      );
     });
   });
 
@@ -173,13 +189,46 @@ describe('settings', () => {
       ]);
     });
 
+    it('should update on new data', () => {
+      act(() => {
+        subject.next({
+          ...angularProps,
+          blacklistedNodes: [
+            {
+              x: 0,
+              y: 0,
+              scaledSize: 10,
+              parent: null,
+              color: 'black',
+              data: {
+                field: 'A',
+                term: '1',
+              },
+              label: 'blacklisted node 3',
+              icon: {
+                class: 'test',
+                code: '1',
+                label: 'test',
+              },
+            },
+          ],
+        });
+      });
+
+      instance.update();
+
+      expect(instance.find(EuiListGroupItem).map(item => item.prop('label'))).toEqual([
+        'blacklisted node 3',
+      ]);
+    });
+
     it('should delete node', () => {
       instance
         .find(EuiListGroupItem)
         .at(0)
         .prop('extraAction')!.onClick!({} as any);
 
-      expect(props.unblacklistNode).toHaveBeenCalledWith(props.blacklistedNodes![0]);
+      expect(angularProps.unblacklistNode).toHaveBeenCalledWith(angularProps.blacklistedNodes![0]);
     });
 
     it('should delete all nodes', () => {
@@ -188,8 +237,8 @@ describe('settings', () => {
         .find(EuiButton)
         .simulate('click');
 
-      expect(props.unblacklistNode).toHaveBeenCalledWith(props.blacklistedNodes![0]);
-      expect(props.unblacklistNode).toHaveBeenCalledWith(props.blacklistedNodes![1]);
+      expect(angularProps.unblacklistNode).toHaveBeenCalledWith(angularProps.blacklistedNodes![0]);
+      expect(angularProps.unblacklistNode).toHaveBeenCalledWith(angularProps.blacklistedNodes![1]);
     });
   });
 
@@ -226,7 +275,7 @@ describe('settings', () => {
       templateForm(0)
         .find('EuiButtonEmpty[data-test-subj="graphRemoveUrlTemplate"]')
         .simulate('click');
-      expect(props.removeUrlTemplate).toHaveBeenCalledWith(props.urlTemplates[0]);
+      expect(dispatchSpy).toHaveBeenCalledWith(removeTemplate(initialTemplate));
     });
 
     it('should update url template', () => {
@@ -236,10 +285,9 @@ describe('settings', () => {
           .find('form')
           .simulate('submit');
       });
-      expect(props.saveUrlTemplate).toHaveBeenCalledWith(0, {
-        ...props.urlTemplates[0],
-        description: 'Updated title',
-      });
+      expect(dispatchSpy).toHaveBeenCalledWith(
+        saveTemplate({ index: 0, template: { ...initialTemplate, description: 'Updated title' } })
+      );
     });
 
     it('should add url template', async () => {
@@ -256,9 +304,11 @@ describe('settings', () => {
           .find('form')
           .simulate('submit');
       });
-      expect(props.saveUrlTemplate).toHaveBeenCalledWith(
-        -1,
-        expect.objectContaining({ description: 'Title', url: 'test-url' })
+      expect(dispatchSpy).toHaveBeenCalledWith(
+        saveTemplate({
+          index: -1,
+          template: expect.objectContaining({ description: 'Title', url: 'test-url' }),
+        })
       );
     });
   });
diff --git a/x-pack/legacy/plugins/graph/public/components/settings/settings.tsx b/x-pack/legacy/plugins/graph/public/components/settings/settings.tsx
index 4cb4b473f73726..4dab0ece5b52d4 100644
--- a/x-pack/legacy/plugins/graph/public/components/settings/settings.tsx
+++ b/x-pack/legacy/plugins/graph/public/components/settings/settings.tsx
@@ -8,10 +8,21 @@ import { i18n } from '@kbn/i18n';
 import React, { useState, useEffect } from 'react';
 import { EuiFlyoutHeader, EuiTitle, EuiTabs, EuiFlyoutBody, EuiTab } from '@elastic/eui';
 import * as Rx from 'rxjs';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 import { AdvancedSettingsForm } from './advanced_settings_form';
 import { BlacklistForm } from './blacklist_form';
 import { UrlTemplateList } from './url_template_list';
 import { WorkspaceNode, AdvancedSettings, UrlTemplate, WorkspaceField } from '../../types';
+import {
+  GraphState,
+  settingsSelector,
+  templatesSelector,
+  fieldsSelector,
+  updateSettings,
+  saveTemplate,
+  removeTemplate,
+} from '../../state_management';
 
 const tabs = [
   {
@@ -35,31 +46,46 @@ const tabs = [
   },
 ];
 
-export interface SettingsProps {
+/**
+ * These props are wired in the angular scope and are passed in via observable
+ * to catch update outside updates
+ */
+export interface AngularProps {
+  blacklistedNodes: WorkspaceNode[];
+  unblacklistNode: (node: WorkspaceNode) => void;
+  canEditDrillDownUrls: boolean;
+}
+
+export interface StateProps {
   advancedSettings: AdvancedSettings;
-  updateAdvancedSettings: (advancedSettings: AdvancedSettings) => void;
-  blacklistedNodes?: WorkspaceNode[];
-  unblacklistNode?: (node: WorkspaceNode) => void;
   urlTemplates: UrlTemplate[];
-  removeUrlTemplate: (urlTemplate: UrlTemplate) => void;
-  saveUrlTemplate: (index: number, urlTemplate: UrlTemplate) => void;
   allFields: WorkspaceField[];
-  canEditDrillDownUrls: boolean;
+}
+
+export interface DispatchProps {
+  updateSettings: (advancedSettings: AdvancedSettings) => void;
+  removeTemplate: (urlTemplate: UrlTemplate) => void;
+  saveTemplate: (props: { index: number; template: UrlTemplate }) => void;
 }
 
 interface AsObservable<P> {
   observable: Readonly<Rx.Observable<P>>;
 }
 
-export function Settings({ observable }: AsObservable<SettingsProps>) {
-  const [currentProps, setCurrentProps] = useState<SettingsProps | undefined>(undefined);
+export interface SettingsProps extends AngularProps, StateProps, DispatchProps {}
+
+export function SettingsComponent({
+  observable,
+  ...props
+}: AsObservable<AngularProps> & StateProps & DispatchProps) {
+  const [angularProps, setAngularProps] = useState<AngularProps | undefined>(undefined);
   const [activeTab, setActiveTab] = useState(0);
 
   useEffect(() => {
-    observable.subscribe(setCurrentProps);
+    observable.subscribe(setAngularProps);
   }, [observable]);
 
-  if (!currentProps) return null;
+  if (!angularProps) return null;
 
   const ActiveTabContent = tabs[activeTab].component;
   return (
@@ -70,7 +96,7 @@ export function Settings({ observable }: AsObservable<SettingsProps>) {
         </EuiTitle>
         <EuiTabs style={{ margin: '0 -16px -25px' }}>
           {tabs
-            .filter(({ id }) => id !== 'drillDowns' || currentProps.canEditDrillDownUrls)
+            .filter(({ id }) => id !== 'drillDowns' || angularProps.canEditDrillDownUrls)
             .map(({ title }, index) => (
               <EuiTab
                 key={title}
@@ -85,8 +111,25 @@ export function Settings({ observable }: AsObservable<SettingsProps>) {
         </EuiTabs>
       </EuiFlyoutHeader>
       <EuiFlyoutBody>
-        <ActiveTabContent {...currentProps} />
+        <ActiveTabContent {...angularProps} {...props} />
       </EuiFlyoutBody>
     </>
   );
 }
+
+export const Settings = connect<StateProps, DispatchProps, AsObservable<AngularProps>, GraphState>(
+  (state: GraphState) => ({
+    advancedSettings: settingsSelector(state),
+    urlTemplates: templatesSelector(state),
+    allFields: fieldsSelector(state),
+  }),
+  dispatch =>
+    bindActionCreators(
+      {
+        updateSettings,
+        saveTemplate,
+        removeTemplate,
+      },
+      dispatch
+    )
+)(SettingsComponent);
diff --git a/x-pack/legacy/plugins/graph/public/components/settings/url_template_list.tsx b/x-pack/legacy/plugins/graph/public/components/settings/url_template_list.tsx
index 2e41f78bb94035..1946c18b41425d 100644
--- a/x-pack/legacy/plugins/graph/public/components/settings/url_template_list.tsx
+++ b/x-pack/legacy/plugins/graph/public/components/settings/url_template_list.tsx
@@ -14,10 +14,10 @@ import { useListKeys } from './use_list_keys';
 const generateId = htmlIdGenerator();
 
 export function UrlTemplateList({
-  removeUrlTemplate,
-  saveUrlTemplate,
+  removeTemplate,
+  saveTemplate,
   urlTemplates,
-}: Pick<SettingsProps, 'removeUrlTemplate' | 'saveUrlTemplate' | 'urlTemplates'>) {
+}: Pick<SettingsProps, 'removeTemplate' | 'saveTemplate' | 'urlTemplates'>) {
   const [uncommittedForms, setUncommittedForms] = useState<string[]>([]);
   const getListKey = useListKeys(urlTemplates);
 
@@ -40,10 +40,10 @@ export function UrlTemplateList({
           id={getListKey(template)}
           initialTemplate={template}
           onSubmit={newTemplate => {
-            saveUrlTemplate(index, newTemplate);
+            saveTemplate({ index, template: newTemplate });
           }}
           onRemove={() => {
-            removeUrlTemplate(template);
+            removeTemplate(template);
           }}
         />
       ))}
@@ -53,7 +53,7 @@ export function UrlTemplateList({
           id={`accordion-new-${id}`}
           key={id}
           onSubmit={newTemplate => {
-            saveUrlTemplate(-1, newTemplate);
+            saveTemplate({ index: -1, template: newTemplate });
             removeUncommittedForm(id);
           }}
           onRemove={removeUncommittedForm.bind(undefined, id)}
diff --git a/x-pack/legacy/plugins/graph/public/components/source_modal.tsx b/x-pack/legacy/plugins/graph/public/components/source_modal.tsx
index 4c3b3c8be9110b..5829370b030e65 100644
--- a/x-pack/legacy/plugins/graph/public/components/source_modal.tsx
+++ b/x-pack/legacy/plugins/graph/public/components/source_modal.tsx
@@ -12,7 +12,7 @@ import { SourcePicker, SourcePickerProps } from './source_picker';
 
 export function SourceModal(props: SourcePickerProps) {
   return (
-    <>
+    <div className="gphSourceModal">
       <EuiModalHeader>
         <EuiModalHeaderTitle>
           <FormattedMessage
@@ -24,6 +24,6 @@ export function SourceModal(props: SourcePickerProps) {
       <EuiModalBody>
         <SourcePicker {...props} />
       </EuiModalBody>
-    </>
+    </div>
   );
 }
diff --git a/x-pack/legacy/plugins/graph/public/helpers/style_choices.ts b/x-pack/legacy/plugins/graph/public/helpers/style_choices.ts
index 33c94dbcdbfcb5..855818886ab6fa 100644
--- a/x-pack/legacy/plugins/graph/public/helpers/style_choices.ts
+++ b/x-pack/legacy/plugins/graph/public/helpers/style_choices.ts
@@ -7,7 +7,6 @@
 import { i18n } from '@kbn/i18n';
 // @ts-ignore
 import { palettes } from '@elastic/eui/lib/services';
-import { isColorDark, hexToRgb } from '@elastic/eui';
 
 export interface FontawesomeIcon {
   class: string;
@@ -256,6 +255,4 @@ urlTemplateIconChoices.forEach(icon => {
   urlTemplateIconChoicesByClass[icon.class] = icon;
 });
 
-export const colorChoices = palettes.euiPaletteColorBlind.colors.filter(
-  (hex: string) => !isColorDark(...hexToRgb(hex))
-);
+export const colorChoices = palettes.euiPaletteColorBlind.colors;
diff --git a/x-pack/legacy/plugins/graph/public/helpers/url_template.ts b/x-pack/legacy/plugins/graph/public/helpers/url_template.ts
index bb85d2e8c5836d..f982d0443c39a9 100644
--- a/x-pack/legacy/plugins/graph/public/helpers/url_template.ts
+++ b/x-pack/legacy/plugins/graph/public/helpers/url_template.ts
@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+export const urlTemplatePlaceholder = '{{gquery}}';
 export const urlTemplateRegex = /\{\{gquery\}\}/g;
 const defaultKibanaQuery = /,query:\(language:kuery,query:'.*?'\)/g;
 
@@ -34,5 +35,8 @@ export function isKibanaUrl(url: string) {
  * @param url The url to turn into an url template
  */
 export function replaceKibanaUrlParam(url: string) {
-  return url.replace(defaultKibanaQuery, ',query:(language:kuery,query:{{gquery}})');
+  return url.replace(
+    defaultKibanaQuery,
+    `,query:(language:kuery,query:{{${urlTemplatePlaceholder}}})`
+  );
 }
diff --git a/x-pack/legacy/plugins/graph/public/services/fetch_top_nodes.test.ts b/x-pack/legacy/plugins/graph/public/services/fetch_top_nodes.test.ts
new file mode 100644
index 00000000000000..0a0fc8cae5d269
--- /dev/null
+++ b/x-pack/legacy/plugins/graph/public/services/fetch_top_nodes.test.ts
@@ -0,0 +1,97 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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 { getSuitableIcon } from '../helpers/style_choices';
+import { fetchTopNodes } from './fetch_top_nodes';
+
+const icon = getSuitableIcon('');
+
+describe('fetch_top_nodes', () => {
+  it('should build terms agg', async () => {
+    const postMock = jest.fn(() => Promise.resolve({ resp: {} }));
+    await fetchTopNodes(postMock, 'test', [
+      { color: '', hopSize: 5, icon, name: 'field1', selected: false, type: 'string' },
+      { color: '', hopSize: 5, icon, name: 'field2', selected: false, type: 'string' },
+    ]);
+    expect(postMock).toHaveBeenCalledWith('../api/graph/searchProxy', {
+      body: JSON.stringify({
+        index: 'test',
+        body: {
+          size: 0,
+          aggs: {
+            sample: {
+              sampler: {
+                shard_size: 5000,
+              },
+              aggs: {
+                top_values_field1: {
+                  terms: {
+                    field: 'field1',
+                    size: 10,
+                  },
+                },
+                top_values_field2: {
+                  terms: {
+                    field: 'field2',
+                    size: 10,
+                  },
+                },
+              },
+            },
+          },
+        },
+      }),
+    });
+  });
+
+  it('should map result to nodes', async () => {
+    const postMock = jest.fn(() =>
+      Promise.resolve({
+        resp: {
+          aggregations: {
+            sample: {
+              top_values_field1: {
+                buckets: [{ key: 'A' }, { key: 'B' }],
+              },
+              top_values_field2: {
+                buckets: [{ key: 'C' }, { key: 'D' }],
+              },
+            },
+          },
+        },
+      })
+    );
+    const result = await fetchTopNodes(postMock, 'test', [
+      { color: 'red', hopSize: 5, icon, name: 'field1', selected: false, type: 'string' },
+      { color: 'blue', hopSize: 5, icon, name: 'field2', selected: false, type: 'string' },
+    ]);
+    expect(result.length).toEqual(4);
+    expect(result[0]).toEqual({
+      color: 'red',
+      data: {
+        field: 'field1',
+        term: 'A',
+      },
+      field: 'field1',
+      icon,
+      id: '',
+      label: 'A',
+      term: 'A',
+    });
+    expect(result[2]).toEqual({
+      color: 'blue',
+      data: {
+        field: 'field2',
+        term: 'C',
+      },
+      field: 'field2',
+      icon,
+      id: '',
+      label: 'C',
+      term: 'C',
+    });
+  });
+});
diff --git a/x-pack/legacy/plugins/graph/public/services/fetch_top_nodes.ts b/x-pack/legacy/plugins/graph/public/services/fetch_top_nodes.ts
new file mode 100644
index 00000000000000..87b33cbe35f82c
--- /dev/null
+++ b/x-pack/legacy/plugins/graph/public/services/fetch_top_nodes.ts
@@ -0,0 +1,112 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { CoreStart } from 'src/core/public';
+import { WorkspaceField, ServerResultNode } from '../types';
+
+const DEFAULT_SHARD_SIZE = 5000;
+
+function createSamplerSearchBody(aggs: object, shardSize: number = DEFAULT_SHARD_SIZE) {
+  return {
+    size: 0,
+    aggs: {
+      sample: {
+        sampler: {
+          shard_size: shardSize,
+        },
+        aggs,
+      },
+    },
+  };
+}
+
+function createTopTermsAggName(fieldName: string) {
+  return `top_values_${fieldName}`;
+}
+
+function createTopTermsSubAgg(field: string, size: number = 10) {
+  return {
+    [createTopTermsAggName(field)]: {
+      terms: {
+        field,
+        size,
+      },
+    },
+  };
+}
+
+// TODO use elasticsearch types here
+interface TopTermsAggResponse {
+  aggregations?: {
+    sample: Record<
+      string,
+      {
+        buckets: Array<{ key: string; doc_count: number }>;
+      }
+    >;
+  };
+}
+
+function getTopTermsResult(response: TopTermsAggResponse, fieldName: string) {
+  if (!response.aggregations) {
+    return [];
+  }
+  return response.aggregations.sample[createTopTermsAggName(fieldName)].buckets.map(
+    bucket => bucket.key
+  );
+}
+
+export function createServerResultNode(
+  fieldName: string,
+  term: string,
+  allFields: WorkspaceField[]
+): ServerResultNode {
+  const field = allFields.find(({ name }) => name === fieldName);
+
+  if (!field) {
+    throw new Error('Invariant error: field not found');
+  }
+
+  return {
+    field: fieldName,
+    term,
+    id: '',
+    color: field.color,
+    icon: field.icon,
+    data: {
+      field: fieldName,
+      term,
+    },
+    label: term,
+  };
+}
+
+export async function fetchTopNodes(
+  post: CoreStart['http']['post'],
+  index: string,
+  fields: WorkspaceField[]
+) {
+  const aggs = fields
+    .map(({ name }) => name)
+    .map(fieldName => createTopTermsSubAgg(fieldName))
+    .reduce((allAggs, subAgg) => ({ ...allAggs, ...subAgg }));
+  const body = createSamplerSearchBody(aggs);
+
+  const response: TopTermsAggResponse = (await post('../api/graph/searchProxy', {
+    body: JSON.stringify({ index, body }),
+  })).resp;
+
+  const nodes: ServerResultNode[] = [];
+
+  fields.forEach(({ name }) => {
+    const topTerms = getTopTermsResult(response, name);
+    const fieldNodes = topTerms.map(term => createServerResultNode(name, term, fields));
+
+    nodes.push(...fieldNodes);
+  });
+
+  return nodes;
+}
diff --git a/x-pack/legacy/plugins/graph/public/services/index_pattern_cache.ts b/x-pack/legacy/plugins/graph/public/services/index_pattern_cache.ts
new file mode 100644
index 00000000000000..e4e02f860db14c
--- /dev/null
+++ b/x-pack/legacy/plugins/graph/public/services/index_pattern_cache.ts
@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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 { IndexPattern } from 'src/legacy/core_plugins/data/public';
+import { IndexPatternProvider } from '../types';
+
+export function createCachedIndexPatternProvider(
+  indexPatternGetter: (id: string) => Promise<IndexPattern>
+): IndexPatternProvider {
+  const cache = new Map<string, IndexPattern>();
+
+  return {
+    get: async (id: string) => {
+      if (!cache.has(id)) {
+        cache.set(id, await indexPatternGetter(id));
+      }
+      return Promise.resolve(cache.get(id)!);
+    },
+  };
+}
diff --git a/x-pack/legacy/plugins/graph/public/services/persistence/deserialize.test.ts b/x-pack/legacy/plugins/graph/public/services/persistence/deserialize.test.ts
index 589ed4f3f637e8..6aa9fd671ffcb3 100644
--- a/x-pack/legacy/plugins/graph/public/services/persistence/deserialize.test.ts
+++ b/x-pack/legacy/plugins/graph/public/services/persistence/deserialize.test.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { GraphWorkspaceSavedObject } from '../../types';
+import { GraphWorkspaceSavedObject, Workspace } from '../../types';
 import { savedWorkspaceToAppState } from './deserialize';
 import { IndexPattern } from 'src/legacy/core_plugins/data/public';
 import { createWorkspace } from '../../angular/graph_client_workspace';
@@ -12,6 +12,7 @@ import { outlinkEncoders } from '../../helpers/outlink_encoders';
 
 describe('deserialize', () => {
   let savedWorkspace: GraphWorkspaceSavedObject;
+  let workspace: Workspace;
 
   beforeEach(() => {
     savedWorkspace = {
@@ -110,6 +111,7 @@ describe('deserialize', () => {
         },
       }),
     } as GraphWorkspaceSavedObject;
+    workspace = createWorkspace({});
   });
 
   function callSavedWorkspaceToAppState() {
@@ -122,7 +124,7 @@ describe('deserialize', () => {
           { name: 'field3', type: 'string' },
         ],
       } as IndexPattern,
-      createWorkspace({})
+      workspace
     );
   }
 
@@ -133,7 +135,7 @@ describe('deserialize', () => {
   });
 
   it('should deserialize fields', () => {
-    const { allFields, selectedFields } = callSavedWorkspaceToAppState();
+    const { allFields } = callSavedWorkspaceToAppState();
 
     expect(allFields).toMatchInlineSnapshot(`
       Array [
@@ -156,7 +158,7 @@ describe('deserialize', () => {
           "type": "string",
         },
         Object {
-          "color": "#FCA5D3",
+          "color": "#CE0060",
           "hopSize": 5,
           "icon": Object {
             "class": "fa-folder-open-o",
@@ -175,9 +177,6 @@ describe('deserialize', () => {
         },
       ]
     `);
-
-    expect(selectedFields.length).toEqual(2);
-    selectedFields.forEach(field => expect(allFields.includes(field)).toEqual(true));
   });
 
   it('should deserialize url templates', () => {
@@ -188,7 +187,7 @@ describe('deserialize', () => {
   });
 
   it('should deserialize nodes and edges', () => {
-    const { workspace } = callSavedWorkspaceToAppState();
+    callSavedWorkspaceToAppState();
 
     expect(workspace.blacklistedNodes.length).toEqual(1);
     expect(workspace.nodes.length).toEqual(5);
diff --git a/x-pack/legacy/plugins/graph/public/services/persistence/deserialize.ts b/x-pack/legacy/plugins/graph/public/services/persistence/deserialize.ts
index 39c7ef841dcb6f..b1879ec92c131d 100644
--- a/x-pack/legacy/plugins/graph/public/services/persistence/deserialize.ts
+++ b/x-pack/legacy/plugins/graph/public/services/persistence/deserialize.ts
@@ -6,7 +6,6 @@
 
 import { IndexPattern } from 'src/legacy/core_plugins/data/public/index_patterns/index_patterns';
 import {
-  AppState,
   SerializedNode,
   UrlTemplate,
   SerializedUrlTemplate,
@@ -188,10 +187,11 @@ export function savedWorkspaceToAppState(
   savedWorkspace: GraphWorkspaceSavedObject,
   indexPattern: IndexPattern,
   workspaceInstance: Workspace
-): Pick<
-  AppState,
-  'urlTemplates' | 'advancedSettings' | 'workspace' | 'allFields' | 'selectedFields'
-> {
+): {
+  urlTemplates: UrlTemplate[];
+  advancedSettings: AdvancedSettings;
+  allFields: WorkspaceField[];
+} {
   const persistedWorkspaceState: SerializedWorkspaceState = JSON.parse(savedWorkspace.wsState);
 
   // ================== url templates =============================
@@ -205,9 +205,11 @@ export function savedWorkspaceToAppState(
     persistedWorkspaceState.selectedFields
   );
   const selectedFields = allFields.filter(field => field.selected);
+  workspaceInstance.options.vertex_fields = selectedFields;
 
   // ================== advanced settings =============================
   const advancedSettings = Object.assign(
+    {},
     defaultAdvancedSettings,
     persistedWorkspaceState.exploreControls
   );
@@ -220,6 +222,8 @@ export function savedWorkspaceToAppState(
     );
   }
 
+  workspaceInstance.options.exploreControls = advancedSettings;
+
   // ================== nodes and edges =============================
   const graph = getNodesAndEdges(persistedWorkspaceState, allFields);
   workspaceInstance.mergeGraph(graph);
@@ -232,8 +236,6 @@ export function savedWorkspaceToAppState(
   return {
     urlTemplates,
     advancedSettings,
-    workspace: workspaceInstance,
     allFields,
-    selectedFields,
   };
 }
diff --git a/x-pack/legacy/plugins/graph/public/services/persistence/serialize.test.ts b/x-pack/legacy/plugins/graph/public/services/persistence/serialize.test.ts
index b3450cce05c0b8..95f55bcc87eb75 100644
--- a/x-pack/legacy/plugins/graph/public/services/persistence/serialize.test.ts
+++ b/x-pack/legacy/plugins/graph/public/services/persistence/serialize.test.ts
@@ -5,12 +5,25 @@
  */
 
 import { appStateToSavedWorkspace } from './serialize';
-import { GraphWorkspaceSavedObject, Workspace, WorkspaceEdge, AppState } from '../../types';
+import {
+  GraphWorkspaceSavedObject,
+  Workspace,
+  WorkspaceEdge,
+  UrlTemplate,
+  AdvancedSettings,
+  WorkspaceField,
+} from '../../types';
 import { outlinkEncoders } from '../../helpers/outlink_encoders';
-import { IndexPattern } from 'src/legacy/core_plugins/data/public';
+import { IndexpatternDatasource } from '../../state_management';
 
 describe('serialize', () => {
-  let appState: AppState;
+  let appState: {
+    workspace: Workspace;
+    urlTemplates: UrlTemplate[];
+    advancedSettings: AdvancedSettings;
+    selectedIndex: IndexpatternDatasource;
+    selectedFields: WorkspaceField[];
+  };
 
   beforeEach(() => {
     appState = {
@@ -21,29 +34,6 @@ describe('serialize', () => {
         maxValuesPerDoc: 1,
         minDocCount: 3,
       },
-      allFields: [
-        {
-          color: 'black',
-          icon: { class: 'a', code: '', label: '' },
-          name: 'field1',
-          selected: true,
-          type: 'string',
-        },
-        {
-          color: 'black',
-          icon: { class: 'b', code: '', label: '' },
-          name: 'field2',
-          selected: true,
-          type: 'string',
-        },
-        {
-          color: 'black',
-          icon: { class: 'c', code: '', label: '' },
-          name: 'field3',
-          selected: false,
-          type: 'string',
-        },
-      ],
       selectedFields: [
         {
           color: 'black',
@@ -61,8 +51,10 @@ describe('serialize', () => {
         },
       ],
       selectedIndex: {
+        type: 'indexpattern',
+        id: '123',
         title: 'Testindexpattern',
-      } as IndexPattern,
+      },
       urlTemplates: [
         {
           description: 'Template',
diff --git a/x-pack/legacy/plugins/graph/public/services/persistence/serialize.ts b/x-pack/legacy/plugins/graph/public/services/persistence/serialize.ts
index 21583781cb14b0..3a94136d26e7ca 100644
--- a/x-pack/legacy/plugins/graph/public/services/persistence/serialize.ts
+++ b/x-pack/legacy/plugins/graph/public/services/persistence/serialize.ts
@@ -5,7 +5,6 @@
  */
 
 import {
-  AppState,
   SerializedNode,
   WorkspaceNode,
   WorkspaceEdge,
@@ -15,7 +14,10 @@ import {
   WorkspaceField,
   GraphWorkspaceSavedObject,
   SerializedWorkspaceState,
+  Workspace,
+  AdvancedSettings,
 } from '../../types';
+import { IndexpatternDatasource } from '../../state_management';
 
 function serializeNode(
   { data, scaledSize, parent, x, y, label, color }: WorkspaceNode,
@@ -80,7 +82,19 @@ function serializeField({
 
 export function appStateToSavedWorkspace(
   currentSavedWorkspace: GraphWorkspaceSavedObject,
-  { workspace, urlTemplates, advancedSettings, selectedIndex, selectedFields }: AppState,
+  {
+    workspace,
+    urlTemplates,
+    advancedSettings,
+    selectedIndex,
+    selectedFields,
+  }: {
+    workspace: Workspace;
+    urlTemplates: UrlTemplate[];
+    advancedSettings: AdvancedSettings;
+    selectedIndex: IndexpatternDatasource;
+    selectedFields: WorkspaceField[];
+  },
   canSaveData: boolean
 ) {
   const blacklist: SerializedNode[] = canSaveData
diff --git a/x-pack/legacy/plugins/graph/public/services/save_modal.tsx b/x-pack/legacy/plugins/graph/public/services/save_modal.tsx
index bb453bd95df5ea..5930d2283b7c05 100644
--- a/x-pack/legacy/plugins/graph/public/services/save_modal.tsx
+++ b/x-pack/legacy/plugins/graph/public/services/save_modal.tsx
@@ -9,6 +9,15 @@ import { SaveResult } from 'ui/saved_objects/show_saved_object_save_modal';
 import { GraphWorkspaceSavedObject, GraphSavePolicy } from '../types';
 import { SaveModal, OnSaveGraphProps } from '../components/save_modal';
 
+export type SaveWorkspaceHandler = (
+  saveOptions: {
+    confirmOverwrite: boolean;
+    isTitleDuplicateConfirmed: boolean;
+    onTitleDuplicate: () => void;
+  },
+  dataConsent: boolean
+) => Promise<SaveResult>;
+
 export function openSaveModal({
   savePolicy,
   hasData,
@@ -19,14 +28,7 @@ export function openSaveModal({
   savePolicy: GraphSavePolicy;
   hasData: boolean;
   workspace: GraphWorkspaceSavedObject;
-  saveWorkspace: (
-    saveOptions: {
-      confirmOverwrite: boolean;
-      isTitleDuplicateConfirmed: boolean;
-      onTitleDuplicate: () => void;
-    },
-    dataConsent: boolean
-  ) => Promise<SaveResult>;
+  saveWorkspace: SaveWorkspaceHandler;
   showSaveModal: (el: React.ReactNode) => void;
 }) {
   const currentTitle = workspace.title;
diff --git a/x-pack/legacy/plugins/graph/public/services/url.ts b/x-pack/legacy/plugins/graph/public/services/url.ts
index 97a30e26c25f36..ff14faf3e350c9 100644
--- a/x-pack/legacy/plugins/graph/public/services/url.ts
+++ b/x-pack/legacy/plugins/graph/public/services/url.ts
@@ -7,6 +7,7 @@
 import { i18n } from '@kbn/i18n';
 import { Chrome } from 'ui/chrome';
 import { GraphWorkspaceSavedObject } from '../types';
+import { MetaDataState } from '../state_management';
 
 export function getHomePath() {
   return '/home';
@@ -30,12 +31,12 @@ export type SetBreadcrumbOptions =
     }
   | {
       chrome: Chrome;
-      savedWorkspace?: GraphWorkspaceSavedObject;
+      metaData: MetaDataState;
       navigateTo: (path: string) => void;
     };
 
 export function setBreadcrumbs(options: SetBreadcrumbOptions) {
-  if ('savedWorkspace' in options) {
+  if ('metaData' in options) {
     options.chrome.breadcrumbs.set([
       {
         text: i18n.translate('xpack.graph.home.breadcrumb', {
@@ -47,11 +48,7 @@ export function setBreadcrumbs(options: SetBreadcrumbOptions) {
         'data-test-subj': 'graphHomeBreadcrumb',
       },
       {
-        text: options.savedWorkspace
-          ? options.savedWorkspace.title
-          : i18n.translate('xpack.graph.newWorkspaceTitle', {
-              defaultMessage: 'Unsaved workspace',
-            }),
+        text: options.metaData.title,
         'data-test-subj': 'graphCurrentWorkspaceBreadcrumb',
       },
     ]);
diff --git a/x-pack/legacy/plugins/graph/public/state_management/advanced_settings.ts b/x-pack/legacy/plugins/graph/public/state_management/advanced_settings.ts
new file mode 100644
index 00000000000000..44950f8a45f854
--- /dev/null
+++ b/x-pack/legacy/plugins/graph/public/state_management/advanced_settings.ts
@@ -0,0 +1,54 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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 actionCreatorFactory, { Action } from 'typescript-fsa';
+import { reducerWithInitialState } from 'typescript-fsa-reducers/dist';
+import { takeLatest } from 'redux-saga/effects';
+import { GraphState, GraphStoreDependencies } from './store';
+import { AdvancedSettings } from '../types';
+import { reset } from './global';
+
+const actionCreator = actionCreatorFactory('x-pack/graph/advancedSettings');
+
+export type AdvancedSettingsState = AdvancedSettings;
+
+export const updateSettings = actionCreator<AdvancedSettingsState>('UPDATE_SETTINGS');
+
+const initialSettings: AdvancedSettingsState = {
+  useSignificance: true,
+  sampleSize: 2000,
+  timeoutMillis: 5000,
+  sampleDiversityField: undefined,
+  maxValuesPerDoc: 1,
+  minDocCount: 3,
+};
+
+export const advancedSettingsReducer = reducerWithInitialState(initialSettings)
+  .case(reset, () => initialSettings)
+  .case(updateSettings, (_oldSettings, newSettings) => newSettings)
+  .build();
+
+export const settingsSelector = (state: GraphState) => state.advancedSettings;
+
+/**
+ * Saga making sure the advanced settings are always synced up to the workspace instance.
+ *
+ * Won't be necessary once the workspace is moved to redux
+ */
+export const syncSettingsSaga = ({ getWorkspace, notifyAngular }: GraphStoreDependencies) => {
+  function* syncSettings(action: Action<AdvancedSettingsState>): IterableIterator<void> {
+    const workspace = getWorkspace();
+    if (!workspace) {
+      return;
+    }
+    workspace.options.exploreControls = action.payload;
+    notifyAngular();
+  }
+
+  return function*() {
+    yield takeLatest(updateSettings.match, syncSettings);
+  };
+};
diff --git a/x-pack/legacy/plugins/graph/public/state_management/datasource.ts b/x-pack/legacy/plugins/graph/public/state_management/datasource.ts
new file mode 100644
index 00000000000000..801dd315df30e5
--- /dev/null
+++ b/x-pack/legacy/plugins/graph/public/state_management/datasource.ts
@@ -0,0 +1,110 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import actionCreatorFactory, { Action } from 'typescript-fsa';
+import { reducerWithInitialState } from 'typescript-fsa-reducers/dist';
+import { takeLatest, put, call, select } from 'redux-saga/effects';
+import { i18n } from '@kbn/i18n';
+import { IndexPattern } from 'src/legacy/core_plugins/data/public';
+import { createSelector } from 'reselect';
+import { GraphState, GraphStoreDependencies } from './store';
+import { reset } from './global';
+import { loadFields } from './fields';
+import { mapFields } from '../services/persistence';
+import { settingsSelector } from './advanced_settings';
+
+const actionCreator = actionCreatorFactory('x-pack/graph/datasource');
+
+export interface NoDatasource {
+  type: 'none';
+}
+export interface IndexpatternDatasource {
+  type: 'indexpattern';
+  id: string;
+  title: string;
+}
+
+export interface DatasourceState {
+  current: NoDatasource | IndexpatternDatasource;
+  loading: boolean;
+}
+
+/**
+ * Sets the current datasource. This will not trigger a load of fields
+ */
+export const setDatasource = actionCreator<NoDatasource | IndexpatternDatasource>('SET_DATASOURCE');
+
+/**
+ * Sets the current datasource. This will trigger a load of fields and overwrite the current
+ * fields configuration
+ */
+export const requestDatasource = actionCreator<IndexpatternDatasource>('SET_DATASOURCE_REQUEST');
+
+/**
+ * Datasource loading finished successfully.
+ */
+export const datasourceLoaded = actionCreator<void>('SET_DATASOURCE_SUCCESS');
+
+const initialDatasource: DatasourceState = {
+  current: { type: 'none' },
+  loading: false,
+};
+
+export const datasourceReducer = reducerWithInitialState<DatasourceState>(initialDatasource)
+  .case(reset, () => initialDatasource)
+  .case(setDatasource, (_oldDatasource, newDatasource) => ({
+    current: newDatasource,
+    loading: false,
+  }))
+  .case(requestDatasource, (_oldDatasource, newDatasource) => ({
+    current: newDatasource,
+    loading: true,
+  }))
+  .case(datasourceLoaded, datasource => ({
+    ...datasource,
+    loading: false,
+  }))
+  .build();
+
+export const datasourceSelector = (state: GraphState) => state.datasource;
+export const hasDatasourceSelector = createSelector(
+  datasourceSelector,
+  datasource => datasource.current.type !== 'none'
+);
+
+/**
+ * Saga loading field information when the datasource is switched. This will overwrite current settings
+ * in fields.
+ *
+ * TODO: Carry over fields than can be carried over because they also exist in the target index pattern
+ */
+export const datasourceSaga = ({
+  indexPatternProvider,
+  notifications,
+  createWorkspace,
+}: GraphStoreDependencies) => {
+  function* fetchFields(action: Action<IndexpatternDatasource>) {
+    try {
+      const indexPattern: IndexPattern = yield call(indexPatternProvider.get, action.payload.id);
+      yield put(loadFields(mapFields(indexPattern)));
+      yield put(datasourceLoaded());
+      const advancedSettings = settingsSelector(yield select());
+      createWorkspace(indexPattern.title, advancedSettings);
+    } catch (e) {
+      // in case of errors, reset the datasource and show notification
+      yield put(setDatasource({ type: 'none' }));
+      notifications.toasts.addDanger(
+        i18n.translate('xpack.graph.loadWorkspace.missingIndexPatternErrorMessage', {
+          defaultMessage: 'Index pattern not found',
+        })
+      );
+    }
+  }
+
+  return function*() {
+    yield takeLatest(requestDatasource.match, fetchFields);
+  };
+};
diff --git a/x-pack/legacy/plugins/graph/public/state_management/fields.ts b/x-pack/legacy/plugins/graph/public/state_management/fields.ts
index 4708d17734ad09..62bb62c1f6125c 100644
--- a/x-pack/legacy/plugins/graph/public/state_management/fields.ts
+++ b/x-pack/legacy/plugins/graph/public/state_management/fields.ts
@@ -4,11 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import actionCreatorFactory from 'typescript-fsa';
+import actionCreatorFactory, { Action } from 'typescript-fsa';
 import { reducerWithInitialState } from 'typescript-fsa-reducers/dist';
 import { createSelector } from 'reselect';
+import { select, takeLatest, takeEvery } from 'redux-saga/effects';
 import { WorkspaceField } from '../types';
-import { GraphState } from './store';
+import { GraphState, GraphStoreDependencies } from './store';
+import { reset } from './global';
+import { setDatasource } from './datasource';
+import { matchesOne, InferActionType } from './helpers';
 
 const actionCreator = actionCreatorFactory('x-pack/graph/fields');
 
@@ -25,6 +29,8 @@ export type FieldsState = Record<string, WorkspaceField>;
 const initialFields: FieldsState = {};
 
 export const fieldsReducer = reducerWithInitialState(initialFields)
+  .case(reset, () => initialFields)
+  .case(setDatasource, () => initialFields)
   .case(loadFields, (_currentFields, newFields) => {
     const newFieldMap: Record<string, WorkspaceField> = {};
     newFields.forEach(field => {
@@ -57,3 +63,86 @@ export const liveResponseFieldsSelector = createSelector(
   selectedFieldsSelector,
   fields => fields.filter(field => field.hopSize && field.hopSize > 0)
 );
+export const hasFieldsSelector = createSelector(
+  selectedFieldsSelector,
+  fields => fields.length > 0
+);
+
+/**
+ * Saga making notifying angular when fields are selected to re-calculate the state of the save button.
+ *
+ * Won't be necessary once the workspace is moved to redux
+ */
+export const updateSaveButtonSaga = ({ notifyAngular }: GraphStoreDependencies) => {
+  function* notify(): IterableIterator<void> {
+    notifyAngular();
+  }
+  return function*() {
+    yield takeLatest(matchesOne(selectField, deselectField), notify);
+  };
+};
+
+/**
+ * Saga making sure the fields in the store are always synced with the fields
+ * known to the workspace.
+ *
+ * Won't be necessary once the workspace is moved to redux
+ */
+export const syncFieldsSaga = ({ getWorkspace, setLiveResponseFields }: GraphStoreDependencies) => {
+  function* syncFields() {
+    const workspace = getWorkspace();
+    if (!workspace) {
+      return;
+    }
+
+    const currentState = yield select();
+    workspace.options.vertex_fields = selectedFieldsSelector(currentState);
+    setLiveResponseFields(liveResponseFieldsSelector(currentState));
+  }
+  return function*() {
+    yield takeEvery(
+      matchesOne(loadFields, selectField, deselectField, updateFieldProperties),
+      syncFields
+    );
+  };
+};
+
+/**
+ * Saga making sure the field styles (icons and colors) are applied to nodes currently active
+ * in the workspace.
+ *
+ * Won't be necessary once the workspace is moved to redux
+ */
+export const syncNodeStyleSaga = ({ getWorkspace, notifyAngular }: GraphStoreDependencies) => {
+  function* syncNodeStyle(action: Action<InferActionType<typeof updateFieldProperties>>) {
+    const workspace = getWorkspace();
+    if (!workspace) {
+      return;
+    }
+    const newColor = action.payload.fieldProperties.color;
+    if (newColor) {
+      workspace.nodes.forEach(function(node) {
+        if (node.data.field === action.payload.fieldName) {
+          node.color = newColor;
+        }
+      });
+    }
+    const newIcon = action.payload.fieldProperties.icon;
+
+    if (newIcon) {
+      workspace.nodes.forEach(function(node) {
+        if (node.data.field === action.payload.fieldName) {
+          node.icon = newIcon;
+        }
+      });
+    }
+    notifyAngular();
+
+    const selectedFields = selectedFieldsSelector(yield select());
+    workspace.options.vertex_fields = selectedFields;
+  }
+
+  return function*() {
+    yield takeLatest(updateFieldProperties.match, syncNodeStyle);
+  };
+};
diff --git a/x-pack/legacy/plugins/graph/public/state_management/global.ts b/x-pack/legacy/plugins/graph/public/state_management/global.ts
new file mode 100644
index 00000000000000..cfd1493a7e3533
--- /dev/null
+++ b/x-pack/legacy/plugins/graph/public/state_management/global.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.
+ */
+
+import actionCreatorFactory from 'typescript-fsa';
+const actionCreator = actionCreatorFactory('x-pack/graph');
+
+export const reset = actionCreator<void>('RESET');
diff --git a/x-pack/legacy/plugins/graph/public/state_management/helpers.ts b/x-pack/legacy/plugins/graph/public/state_management/helpers.ts
new file mode 100644
index 00000000000000..215691d4544843
--- /dev/null
+++ b/x-pack/legacy/plugins/graph/public/state_management/helpers.ts
@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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 { ActionCreator, AnyAction } from 'typescript-fsa';
+
+/**
+ * Infers the type of an action out of a given action type.
+ * This makes it easier to distribute the action types because they come
+ * along with the creators: `type MyAction = InferActionType<typeof myActionCreator>`.
+ *
+ * This isn't expected to be used in a lot of places - if it is, naming the individual
+ * action types might make more sense.
+ */
+export type InferActionType<X> = X extends ActionCreator<infer T> ? T : never;
+
+/**
+ * Helper to create a matcher that matches all passed in action creators.
+ *
+ * This is helpful to create a saga that takes multiple actions:
+ * `yield takeEvery(matchesOne(actionCreator1, actionCreator2), handler);`
+ *
+ * @param actionCreators The action creators to create a unified matcher for
+ */
+export const matchesOne = (...actionCreators: Array<ActionCreator<any>>) => (action: AnyAction) =>
+  actionCreators.some(actionCreator => actionCreator.match(action));
diff --git a/x-pack/legacy/plugins/graph/public/state_management/index.ts b/x-pack/legacy/plugins/graph/public/state_management/index.ts
index 546af1673ea929..e577fed63a504a 100644
--- a/x-pack/legacy/plugins/graph/public/state_management/index.ts
+++ b/x-pack/legacy/plugins/graph/public/state_management/index.ts
@@ -5,4 +5,11 @@
  */
 
 export * from './fields';
+export * from './url_templates';
+export * from './advanced_settings';
+export * from './datasource';
+export * from './meta_data';
+export * from './persistence';
+
+export * from './global';
 export * from './store';
diff --git a/x-pack/legacy/plugins/graph/public/state_management/meta_data.ts b/x-pack/legacy/plugins/graph/public/state_management/meta_data.ts
new file mode 100644
index 00000000000000..7d4ad4814081df
--- /dev/null
+++ b/x-pack/legacy/plugins/graph/public/state_management/meta_data.ts
@@ -0,0 +1,61 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import actionCreatorFactory from 'typescript-fsa';
+import { reducerWithInitialState } from 'typescript-fsa-reducers';
+import { select, takeLatest, call } from 'redux-saga/effects';
+import { i18n } from '@kbn/i18n';
+import { GraphState, GraphStoreDependencies } from './store';
+import { reset } from './global';
+import { setBreadcrumbs } from '../services/url';
+
+const actionCreator = actionCreatorFactory('x-pack/graph/metaData');
+
+export interface MetaDataState {
+  title: string;
+  description: string;
+  savedObjectId?: string;
+}
+
+export const updateMetaData = actionCreator<Partial<MetaDataState>>('UPDATE_META_DATA');
+
+const initialMetaData: MetaDataState = {
+  title: i18n.translate('xpack.graph.newWorkspaceTitle', {
+    defaultMessage: 'Unsaved workspace',
+  }),
+  description: '',
+};
+
+export const metaDataReducer = reducerWithInitialState(initialMetaData)
+  .case(reset, () => initialMetaData)
+  .case(updateMetaData, (oldMetaData, newMetaData) => ({ ...oldMetaData, ...newMetaData }))
+  .build();
+
+export const metaDataSelector = (state: GraphState) => state.metaData;
+
+/**
+ * Saga updating the breadcrumb when the shown workspace changes.
+ */
+export const syncBreadcrumbSaga = ({ chrome, changeUrl }: GraphStoreDependencies) => {
+  function* syncBreadcrumb() {
+    const metaData = metaDataSelector(yield select());
+    setBreadcrumbs({
+      chrome,
+      metaData,
+      navigateTo: (path: string) => {
+        // TODO this should be wrapped into canWipeWorkspace,
+        // but the check is too simple right now. Change this
+        // once actual state-diffing is in place.
+        changeUrl(path);
+      },
+    });
+  }
+  return function*() {
+    // initial sync
+    yield call(syncBreadcrumb);
+    yield takeLatest(updateMetaData.match, syncBreadcrumb);
+  };
+};
diff --git a/x-pack/legacy/plugins/graph/public/state_management/mocks.ts b/x-pack/legacy/plugins/graph/public/state_management/mocks.ts
new file mode 100644
index 00000000000000..9d22fd521a96fe
--- /dev/null
+++ b/x-pack/legacy/plugins/graph/public/state_management/mocks.ts
@@ -0,0 +1,57 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { Chrome } from 'ui/chrome';
+import { IndexPattern } from 'src/legacy/core_plugins/data/public';
+import { NotificationsStart } from 'kibana/public';
+import createSagaMiddleware from 'redux-saga';
+import { createStore, applyMiddleware } from 'redux';
+import { GraphStoreDependencies, createRootReducer, registerSagas } from './store';
+import { Workspace, GraphWorkspaceSavedObject, IndexPatternSavedObject } from '../types';
+
+jest.mock('ui/new_platform');
+
+export function createMockGraphStore({ includeSagas }: { includeSagas: boolean }) {
+  const mockedDeps: jest.Mocked<GraphStoreDependencies> = {
+    basePath: '',
+    changeUrl: jest.fn(),
+    chrome: ({
+      breadcrumbs: {
+        set: jest.fn(),
+      },
+    } as unknown) as Chrome,
+    createWorkspace: jest.fn(),
+    getWorkspace: jest.fn(() => (({} as unknown) as Workspace)),
+    getSavedWorkspace: jest.fn(() => (({} as unknown) as GraphWorkspaceSavedObject)),
+    indexPatternProvider: {
+      get: jest.fn(() => Promise.resolve(({} as unknown) as IndexPattern)),
+    },
+    indexPatterns: [
+      ({ id: '123', attributes: { title: 'test-pattern' } } as unknown) as IndexPatternSavedObject,
+    ],
+    notifications: ({
+      toasts: {
+        addDanger: jest.fn(),
+        addSuccess: jest.fn(),
+      },
+    } as unknown) as NotificationsStart,
+    notifyAngular: jest.fn(),
+    savePolicy: 'configAndDataWithConsent',
+    showSaveModal: jest.fn(),
+    setLiveResponseFields: jest.fn(),
+  };
+  const sagaMiddleware = createSagaMiddleware();
+
+  const rootReducer = createRootReducer('');
+
+  const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
+
+  if (includeSagas) {
+    registerSagas(sagaMiddleware, mockedDeps);
+  }
+
+  return { store, mockedDeps };
+}
diff --git a/x-pack/legacy/plugins/graph/public/state_management/persistence.ts b/x-pack/legacy/plugins/graph/public/state_management/persistence.ts
new file mode 100644
index 00000000000000..0b8130a766cd3c
--- /dev/null
+++ b/x-pack/legacy/plugins/graph/public/state_management/persistence.ts
@@ -0,0 +1,203 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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 actionCreatorFactory, { Action } from 'typescript-fsa';
+import { i18n } from '@kbn/i18n';
+import { takeLatest, call, put, select, cps } from 'redux-saga/effects';
+import { GraphWorkspaceSavedObject, Workspace } from '../types';
+import { GraphStoreDependencies, GraphState } from '.';
+import { setDatasource, datasourceSelector, IndexpatternDatasource } from './datasource';
+import { loadFields, selectedFieldsSelector } from './fields';
+import { updateSettings, settingsSelector } from './advanced_settings';
+import { loadTemplates, templatesSelector } from './url_templates';
+import {
+  lookupIndexPattern,
+  savedWorkspaceToAppState,
+  appStateToSavedWorkspace,
+} from '../services/persistence';
+import { updateMetaData, metaDataSelector } from './meta_data';
+import { openSaveModal, SaveWorkspaceHandler } from '../services/save_modal';
+import { getEditPath } from '../services/url';
+const actionCreator = actionCreatorFactory('x-pack/graph');
+
+export const loadSavedWorkspace = actionCreator<GraphWorkspaceSavedObject>('LOAD_WORKSPACE');
+export const saveWorkspace = actionCreator<void>('SAVE_WORKSPACE');
+
+/**
+ * Saga handling loading of a saved workspace.
+ *
+ * It will load the index pattern associated with the saved object and deserialize all properties
+ * into the store. Existing state will be overwritten.
+ */
+export const loadingSaga = ({
+  createWorkspace,
+  getWorkspace,
+  indexPatterns,
+  notifications,
+  indexPatternProvider,
+}: GraphStoreDependencies) => {
+  function* deserializeWorkspace(action: Action<GraphWorkspaceSavedObject>) {
+    const selectedIndex = lookupIndexPattern(action.payload, indexPatterns);
+    if (!selectedIndex) {
+      notifications.toasts.addDanger(
+        i18n.translate('xpack.graph.loadWorkspace.missingIndexPatternErrorMessage', {
+          defaultMessage: 'Index pattern not found',
+        })
+      );
+      return;
+    }
+
+    const indexPattern = yield call(indexPatternProvider.get, selectedIndex.id);
+    const initialSettings = settingsSelector(yield select());
+
+    createWorkspace(selectedIndex.attributes.title, initialSettings);
+
+    const { urlTemplates, advancedSettings, allFields } = savedWorkspaceToAppState(
+      action.payload,
+      indexPattern,
+      // workspace won't be null because it's created in the same call stack
+      getWorkspace()!
+    );
+
+    // put everything in the store
+    yield put(
+      updateMetaData({
+        title: action.payload.title,
+        description: action.payload.description,
+        savedObjectId: action.payload.id,
+      })
+    );
+    yield put(
+      setDatasource({
+        type: 'indexpattern',
+        id: selectedIndex.id,
+        title: selectedIndex.attributes.title,
+      })
+    );
+    yield put(loadFields(allFields));
+    yield put(updateSettings(advancedSettings));
+    yield put(loadTemplates(urlTemplates));
+
+    // workspace won't be null because it's created in the same call stack
+    getWorkspace()!.runLayout();
+  }
+
+  return function*() {
+    yield takeLatest(loadSavedWorkspace.match, deserializeWorkspace);
+  };
+};
+
+/**
+ * Saga handling saving of current state.
+ *
+ * It will serialize everything and save it using the saved objects client
+ */
+export const savingSaga = (deps: GraphStoreDependencies) => {
+  function* persistWorkspace() {
+    const savedWorkspace = deps.getSavedWorkspace();
+    const state: GraphState = yield select();
+    const workspace = deps.getWorkspace();
+    const selectedDatasource = datasourceSelector(state).current;
+    if (!workspace || selectedDatasource.type === 'none') {
+      return;
+    }
+
+    const savedObjectId = yield cps(showModal, {
+      deps,
+      workspace,
+      savedWorkspace,
+      state,
+      selectedDatasource,
+    });
+    if (savedObjectId) {
+      yield put(updateMetaData({ savedObjectId }));
+    }
+  }
+
+  return function*() {
+    yield takeLatest(saveWorkspace.match, persistWorkspace);
+  };
+};
+
+function showModal(
+  {
+    deps,
+    workspace,
+    savedWorkspace,
+    state,
+    selectedDatasource,
+  }: {
+    deps: GraphStoreDependencies;
+    workspace: Workspace;
+    savedWorkspace: GraphWorkspaceSavedObject;
+    state: GraphState;
+    selectedDatasource: IndexpatternDatasource;
+  },
+  savingCallback: (error: unknown, id?: string) => void
+) {
+  const saveWorkspaceHandler: SaveWorkspaceHandler = async (
+    saveOptions,
+    userHasConfirmedSaveWorkspaceData
+  ) => {
+    const canSaveData =
+      deps.savePolicy === 'configAndData' ||
+      (deps.savePolicy === 'configAndDataWithConsent' && userHasConfirmedSaveWorkspaceData);
+    appStateToSavedWorkspace(
+      savedWorkspace,
+      {
+        workspace,
+        urlTemplates: templatesSelector(state),
+        advancedSettings: settingsSelector(state),
+        selectedIndex: selectedDatasource,
+        selectedFields: selectedFieldsSelector(state),
+      },
+      canSaveData
+    );
+    try {
+      const id = await savedWorkspace.save(saveOptions);
+      if (id) {
+        const title = i18n.translate('xpack.graph.saveWorkspace.successNotificationTitle', {
+          defaultMessage: 'Saved "{workspaceTitle}"',
+          values: { workspaceTitle: savedWorkspace.title },
+        });
+        let text;
+        if (!canSaveData && workspace.nodes.length > 0) {
+          text = i18n.translate('xpack.graph.saveWorkspace.successNotification.noDataSavedText', {
+            defaultMessage: 'The configuration was saved, but the data was not saved',
+          });
+        }
+        deps.notifications.toasts.addSuccess({
+          title,
+          text,
+          'data-test-subj': 'saveGraphSuccess',
+        });
+        if (savedWorkspace.id !== metaDataSelector(state).savedObjectId) {
+          deps.changeUrl(getEditPath(savedWorkspace));
+        }
+      }
+      savingCallback(null, id);
+      return { id };
+    } catch (error) {
+      deps.notifications.toasts.addDanger(
+        i18n.translate('xpack.graph.saveWorkspace.savingErrorMessage', {
+          defaultMessage: 'Failed to save workspace: {message}',
+          values: {
+            message: error,
+          },
+        })
+      );
+      return { error };
+    }
+  };
+
+  openSaveModal({
+    savePolicy: deps.savePolicy,
+    hasData: workspace.nodes.length > 0 || workspace.blacklistedNodes.length > 0,
+    workspace: savedWorkspace,
+    showSaveModal: deps.showSaveModal,
+    saveWorkspace: saveWorkspaceHandler,
+  });
+}
diff --git a/x-pack/legacy/plugins/graph/public/state_management/store.ts b/x-pack/legacy/plugins/graph/public/state_management/store.ts
index f5317e9c5b6abd..4161a3c48593e2 100644
--- a/x-pack/legacy/plugins/graph/public/state_management/store.ts
+++ b/x-pack/legacy/plugins/graph/public/state_management/store.ts
@@ -4,16 +4,95 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { combineReducers, createStore, Store, AnyAction, Dispatch } from 'redux';
-import { fieldsReducer, FieldsState } from './fields';
+import createSagaMiddleware, { SagaMiddleware } from 'redux-saga';
+import { combineReducers, createStore, Store, AnyAction, Dispatch, applyMiddleware } from 'redux';
+import { CoreStart } from 'src/core/public';
+import { Chrome } from 'ui/chrome';
+import {
+  fieldsReducer,
+  FieldsState,
+  syncNodeStyleSaga,
+  syncFieldsSaga,
+  updateSaveButtonSaga,
+} from './fields';
+import { UrlTemplatesState, urlTemplatesReducer } from './url_templates';
+import {
+  AdvancedSettingsState,
+  advancedSettingsReducer,
+  syncSettingsSaga,
+} from './advanced_settings';
+import { DatasourceState, datasourceReducer, datasourceSaga } from './datasource';
+import {
+  IndexPatternProvider,
+  Workspace,
+  IndexPatternSavedObject,
+  GraphSavePolicy,
+  GraphWorkspaceSavedObject,
+  AdvancedSettings,
+  WorkspaceField,
+} from '../types';
+import { loadingSaga, savingSaga } from './persistence';
+import { metaDataReducer, MetaDataState, syncBreadcrumbSaga } from './meta_data';
 
 export interface GraphState {
   fields: FieldsState;
+  urlTemplates: UrlTemplatesState;
+  advancedSettings: AdvancedSettingsState;
+  datasource: DatasourceState;
+  metaData: MetaDataState;
 }
 
-const rootReducer = combineReducers({ fields: fieldsReducer });
+export interface GraphStoreDependencies {
+  basePath: string;
+  indexPatternProvider: IndexPatternProvider;
+  indexPatterns: IndexPatternSavedObject[];
+  createWorkspace: (index: string, advancedSettings: AdvancedSettings) => void;
+  getWorkspace: () => Workspace | null;
+  getSavedWorkspace: () => GraphWorkspaceSavedObject;
+  notifications: CoreStart['notifications'];
+  showSaveModal: (el: React.ReactNode) => void;
+  savePolicy: GraphSavePolicy;
+  changeUrl: (newUrl: string) => void;
+  notifyAngular: () => void;
+  setLiveResponseFields: (fields: WorkspaceField[]) => void;
+  chrome: Chrome;
+}
+
+export function createRootReducer(basePath: string) {
+  return combineReducers({
+    fields: fieldsReducer,
+    urlTemplates: urlTemplatesReducer(basePath),
+    advancedSettings: advancedSettingsReducer,
+    datasource: datasourceReducer,
+    metaData: metaDataReducer,
+  });
+}
+
+export function registerSagas(
+  sagaMiddleware: SagaMiddleware<object>,
+  deps: GraphStoreDependencies
+) {
+  sagaMiddleware.run(datasourceSaga(deps));
+  sagaMiddleware.run(loadingSaga(deps));
+  sagaMiddleware.run(savingSaga(deps));
+  sagaMiddleware.run(syncFieldsSaga(deps));
+  sagaMiddleware.run(syncNodeStyleSaga(deps));
+  sagaMiddleware.run(syncSettingsSaga(deps));
+  sagaMiddleware.run(updateSaveButtonSaga(deps));
+  sagaMiddleware.run(syncBreadcrumbSaga(deps));
+}
+
+export const createGraphStore = (deps: GraphStoreDependencies) => {
+  const sagaMiddleware = createSagaMiddleware();
+
+  const rootReducer = createRootReducer(deps.basePath);
+
+  const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
+
+  registerSagas(sagaMiddleware, deps);
 
-export const createGraphStore = () => createStore(rootReducer);
+  return store;
+};
 
 export type GraphStore = Store<GraphState, AnyAction>;
 export type GraphDispatch = Dispatch<AnyAction>;
diff --git a/x-pack/legacy/plugins/graph/public/state_management/url_templates.ts b/x-pack/legacy/plugins/graph/public/state_management/url_templates.ts
new file mode 100644
index 00000000000000..3bb97c343ba340
--- /dev/null
+++ b/x-pack/legacy/plugins/graph/public/state_management/url_templates.ts
@@ -0,0 +1,92 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import actionCreatorFactory from 'typescript-fsa';
+import { reducerWithInitialState } from 'typescript-fsa-reducers/dist';
+import { KibanaParsedUrl } from 'ui/url/kibana_parsed_url';
+import { i18n } from '@kbn/i18n';
+import rison from 'rison-node';
+import { GraphState } from './store';
+import { UrlTemplate } from '../types';
+import { reset } from './global';
+import { setDatasource, IndexpatternDatasource, requestDatasource } from './datasource';
+import { outlinkEncoders } from '../helpers/outlink_encoders';
+import { urlTemplatePlaceholder } from '../helpers/url_template';
+
+const actionCreator = actionCreatorFactory('x-pack/graph/urlTemplates');
+
+export const loadTemplates = actionCreator<UrlTemplate[]>('LOAD_TEMPLATES');
+export const saveTemplate = actionCreator<{ index: number; template: UrlTemplate }>(
+  'SAVE_TEMPLATE'
+);
+export const removeTemplate = actionCreator<UrlTemplate>('REMOVE_TEMPLATE');
+
+export type UrlTemplatesState = UrlTemplate[];
+
+const initialTemplates: UrlTemplatesState = [];
+
+function generateDefaultTemplate(
+  datasource: IndexpatternDatasource,
+  basePath: string
+): UrlTemplate {
+  const kUrl = new KibanaParsedUrl({
+    appId: 'kibana',
+    basePath,
+    appPath: '/discover',
+  });
+
+  kUrl.addQueryParameter(
+    '_a',
+    rison.encode({
+      columns: ['_source'],
+      index: datasource.title,
+      interval: 'auto',
+      query: { language: 'kuery', query: urlTemplatePlaceholder },
+      sort: ['_score', 'desc'],
+    })
+  );
+
+  // replace the URI encoded version of the tag with the unescaped version
+  // so it can be found with String.replace, regexp, etc.
+  const discoverUrl = kUrl
+    .getRootRelativePath()
+    .replace(encodeURIComponent(urlTemplatePlaceholder), urlTemplatePlaceholder);
+
+  return {
+    url: discoverUrl,
+    description: i18n.translate('xpack.graph.settings.drillDowns.defaultUrlTemplateTitle', {
+      defaultMessage: 'Raw documents',
+    }),
+    encoder: outlinkEncoders[0],
+    isDefault: true,
+    icon: null,
+  };
+}
+
+export const urlTemplatesReducer = (basePath: string) =>
+  reducerWithInitialState(initialTemplates)
+    .case(reset, () => initialTemplates)
+    .cases([requestDatasource, setDatasource], (templates, datasource) => {
+      if (datasource.type === 'none') {
+        return initialTemplates;
+      }
+      const customTemplates = templates.filter(template => !template.isDefault);
+      return [...customTemplates, generateDefaultTemplate(datasource, basePath)];
+    })
+    .case(loadTemplates, (_currentTemplates, newTemplates) => newTemplates)
+    .case(saveTemplate, (templates, { index: indexToUpdate, template: updatedTemplate }) => {
+      // set default flag to false as soon as template is overwritten.
+      const newTemplate = { ...updatedTemplate, isDefault: false };
+      return indexToUpdate === -1
+        ? [...templates, newTemplate]
+        : templates.map((template, index) => (index === indexToUpdate ? newTemplate : template));
+    })
+    .case(removeTemplate, (templates, templateToDelete) =>
+      templates.filter(template => template !== templateToDelete)
+    )
+    .build();
+
+export const templatesSelector = (state: GraphState) => state.urlTemplates;
diff --git a/x-pack/legacy/plugins/graph/public/types/app_state.ts b/x-pack/legacy/plugins/graph/public/types/app_state.ts
index f72c4057f4c2f6..24b1876bb713f7 100644
--- a/x-pack/legacy/plugins/graph/public/types/app_state.ts
+++ b/x-pack/legacy/plugins/graph/public/types/app_state.ts
@@ -6,7 +6,6 @@
 
 import { SimpleSavedObject } from 'src/core/public';
 import { IndexPattern } from 'src/legacy/core_plugins/data/public';
-import { Workspace } from './workspace_state';
 import { FontawesomeIcon } from '../helpers/style_choices';
 import { OutlinkEncoder } from '../helpers/outlink_encoders';
 
@@ -39,11 +38,6 @@ export interface AdvancedSettings {
 
 export type IndexPatternSavedObject = SimpleSavedObject<{ title: string }>;
 
-export interface AppState {
-  urlTemplates: UrlTemplate[];
-  advancedSettings: AdvancedSettings;
-  workspace: Workspace;
-  allFields: WorkspaceField[];
-  selectedFields: WorkspaceField[];
-  selectedIndex: IndexPattern;
+export interface IndexPatternProvider {
+  get(id: string): Promise<IndexPattern>;
 }
diff --git a/x-pack/legacy/plugins/graph/public/types/workspace_state.ts b/x-pack/legacy/plugins/graph/public/types/workspace_state.ts
index 42e1e759835a70..c23ab49de496d9 100644
--- a/x-pack/legacy/plugins/graph/public/types/workspace_state.ts
+++ b/x-pack/legacy/plugins/graph/public/types/workspace_state.ts
@@ -28,6 +28,7 @@ export interface WorkspaceNode {
   scaledSize: number;
   parent: WorkspaceNode | null;
   color: string;
+  isSelected?: boolean;
 }
 
 export interface WorkspaceEdge {
@@ -37,32 +38,38 @@ export interface WorkspaceEdge {
   label: string;
   source: WorkspaceNode;
   target: WorkspaceNode;
+  isSelected?: boolean;
 }
 
-export interface GraphData {
-  nodes: Array<{
+export interface ServerResultNode {
+  field: string;
+  term: string;
+  id: string;
+  label: string;
+  color: string;
+  icon: FontawesomeIcon;
+  data: {
     field: string;
     term: string;
-    id: string;
-    label: string;
-    color: string;
-    icon: FontawesomeIcon;
-    data: {
-      field: string;
-      term: string;
-    };
-  }>;
-  edges: Array<{
-    source: number;
-    target: number;
-    weight: number;
-    width: number;
-    doc_count?: number;
-    inferred: boolean;
-  }>;
+  };
+}
+
+export interface ServerResultEdge {
+  source: number;
+  target: number;
+  weight: number;
+  width: number;
+  doc_count?: number;
+  inferred: boolean;
+}
+
+export interface GraphData {
+  nodes: ServerResultNode[];
+  edges: ServerResultEdge[];
 }
 
 export interface Workspace {
+  options: WorkspaceOptions;
   nodesMap: Record<string, WorkspaceNode>;
   nodes: WorkspaceNode[];
   edges: WorkspaceEdge[];
@@ -83,6 +90,9 @@ export interface Workspace {
    * @param newData
    */
   mergeGraph(newData: GraphData): void;
+
+  runLayout(): void;
+  stopLayout(): void;
 }
 
 export type ExploreRequest = any;
diff --git a/x-pack/legacy/plugins/infra/common/http_api/log_analysis/results/log_entry_rate.ts b/x-pack/legacy/plugins/infra/common/http_api/log_analysis/results/log_entry_rate.ts
index 2dcaf35cc41d9f..3af07980910b8a 100644
--- a/x-pack/legacy/plugins/infra/common/http_api/log_analysis/results/log_entry_rate.ts
+++ b/x-pack/legacy/plugins/infra/common/http_api/log_analysis/results/log_entry_rate.ts
@@ -6,13 +6,7 @@
 
 import * as rt from 'io-ts';
 
-import {
-  badRequestErrorRT,
-  conflictErrorRT,
-  forbiddenErrorRT,
-  metricStatisticsRT,
-  timeRangeRT,
-} from '../../shared';
+import { badRequestErrorRT, conflictErrorRT, forbiddenErrorRT, timeRangeRT } from '../../shared';
 
 export const LOG_ANALYSIS_GET_LOG_ENTRY_RATE_PATH =
   '/api/infra/log_analysis/results/log_entry_rate';
@@ -43,12 +37,15 @@ export const logEntryRateAnomaly = rt.type({
   typicalLogEntryRate: rt.number,
 });
 
-export const logEntryRateHistogramBucket = rt.type({
+export const logEntryRateDataSetRT = rt.type({
+  analysisBucketCount: rt.number,
   anomalies: rt.array(logEntryRateAnomaly),
-  duration: rt.number,
-  logEntryRateStats: metricStatisticsRT,
-  modelLowerBoundStats: metricStatisticsRT,
-  modelUpperBoundStats: metricStatisticsRT,
+  averageActualLogEntryRate: rt.number,
+  dataSetId: rt.string,
+});
+
+export const logEntryRateHistogramBucket = rt.type({
+  dataSets: rt.array(logEntryRateDataSetRT),
   startTime: rt.number,
 });
 
diff --git a/x-pack/legacy/plugins/infra/public/components/logging/log_minimap/density_chart.tsx b/x-pack/legacy/plugins/infra/public/components/logging/log_minimap/density_chart.tsx
index 8b71fd405e0734..d928ac678918bb 100644
--- a/x-pack/legacy/plugins/infra/public/components/logging/log_minimap/density_chart.tsx
+++ b/x-pack/legacy/plugins/infra/public/components/logging/log_minimap/density_chart.tsx
@@ -65,7 +65,7 @@ export const DensityChart: React.SFC<DensityChartProps> = ({
 };
 
 const DensityChartNegativeBackground = euiStyled.rect`
-  fill: white;
+  fill: ${props => props.theme.eui.euiColorEmptyShade};
 `;
 
 const DensityChartPositiveBackground = euiStyled.rect`
diff --git a/x-pack/legacy/plugins/infra/public/containers/logs/log_analysis/api/get_log_entry_rate.ts b/x-pack/legacy/plugins/infra/public/containers/logs/log_analysis/api/get_log_entry_rate.ts
new file mode 100644
index 00000000000000..471a00d40984cf
--- /dev/null
+++ b/x-pack/legacy/plugins/infra/public/containers/logs/log_analysis/api/get_log_entry_rate.ts
@@ -0,0 +1,45 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { fold } from 'fp-ts/lib/Either';
+import { pipe } from 'fp-ts/lib/pipeable';
+import { identity } from 'fp-ts/lib/function';
+import { kfetch } from 'ui/kfetch';
+
+import {
+  getLogEntryRateRequestPayloadRT,
+  getLogEntryRateSuccessReponsePayloadRT,
+  LOG_ANALYSIS_GET_LOG_ENTRY_RATE_PATH,
+} from '../../../../../common/http_api/log_analysis';
+import { createPlainError, throwErrors } from '../../../../../common/runtime_types';
+
+export const callGetLogEntryRateAPI = async (
+  sourceId: string,
+  startTime: number,
+  endTime: number,
+  bucketDuration: number
+) => {
+  const response = await kfetch({
+    method: 'POST',
+    pathname: LOG_ANALYSIS_GET_LOG_ENTRY_RATE_PATH,
+    body: JSON.stringify(
+      getLogEntryRateRequestPayloadRT.encode({
+        data: {
+          sourceId,
+          timeRange: {
+            startTime,
+            endTime,
+          },
+          bucketDuration,
+        },
+      })
+    ),
+  });
+  return pipe(
+    getLogEntryRateSuccessReponsePayloadRT.decode(response),
+    fold(throwErrors(createPlainError), identity)
+  );
+};
diff --git a/x-pack/legacy/plugins/infra/public/containers/logs/log_analysis/log_analysis_graph_data/log_entry_rate.tsx b/x-pack/legacy/plugins/infra/public/containers/logs/log_analysis/log_analysis_graph_data/log_entry_rate.tsx
deleted file mode 100644
index f54402a1a87073..00000000000000
--- a/x-pack/legacy/plugins/infra/public/containers/logs/log_analysis/log_analysis_graph_data/log_entry_rate.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { useMemo } from 'react';
-import { GetLogEntryRateSuccessResponsePayload } from '../../../../../common/http_api/log_analysis';
-
-interface LogRateAreaSeriesDataPoint {
-  x: number;
-  min: number | null;
-  max: number | null;
-}
-type LogRateAreaSeries = LogRateAreaSeriesDataPoint[];
-type LogRateLineSeriesDataPoint = [number, number | null];
-type LogRateLineSeries = LogRateLineSeriesDataPoint[];
-type LogRateAnomalySeriesDataPoint = [number, number];
-type LogRateAnomalySeries = LogRateAnomalySeriesDataPoint[];
-
-export const useLogEntryRateGraphData = ({
-  data,
-}: {
-  data: GetLogEntryRateSuccessResponsePayload['data'] | null;
-}) => {
-  const areaSeries: LogRateAreaSeries = useMemo(() => {
-    if (!data || (data && data.histogramBuckets && !data.histogramBuckets.length)) {
-      return [];
-    }
-    return data.histogramBuckets.reduce((acc: any, bucket) => {
-      acc.push({
-        x: bucket.startTime,
-        min: bucket.modelLowerBoundStats.min,
-        max: bucket.modelUpperBoundStats.max,
-      });
-      return acc;
-    }, []);
-  }, [data]);
-
-  const lineSeries: LogRateLineSeries = useMemo(() => {
-    if (!data || (data && data.histogramBuckets && !data.histogramBuckets.length)) {
-      return [];
-    }
-    return data.histogramBuckets.reduce((acc: any, bucket) => {
-      acc.push([bucket.startTime, bucket.logEntryRateStats.avg]);
-      return acc;
-    }, []);
-  }, [data]);
-
-  const anomalySeries: LogRateAnomalySeries = useMemo(() => {
-    if (!data || (data && data.histogramBuckets && !data.histogramBuckets.length)) {
-      return [];
-    }
-    return data.histogramBuckets.reduce((acc: any, bucket) => {
-      if (bucket.anomalies.length > 0) {
-        bucket.anomalies.forEach(anomaly => {
-          acc.push([anomaly.startTime, anomaly.actualLogEntryRate]);
-        });
-        return acc;
-      } else {
-        return acc;
-      }
-    }, []);
-  }, [data]);
-
-  return {
-    areaSeries,
-    lineSeries,
-    anomalySeries,
-  };
-};
diff --git a/x-pack/legacy/plugins/infra/public/containers/logs/log_analysis/log_entry_rate.tsx b/x-pack/legacy/plugins/infra/public/containers/logs/log_analysis/log_entry_rate.tsx
index 4e7a6647a95793..8b21a7e8298944 100644
--- a/x-pack/legacy/plugins/infra/public/containers/logs/log_analysis/log_entry_rate.tsx
+++ b/x-pack/legacy/plugins/infra/public/containers/logs/log_analysis/log_entry_rate.tsx
@@ -5,19 +5,10 @@
  */
 
 import { useMemo, useState } from 'react';
-import { kfetch } from 'ui/kfetch';
 
-import { fold } from 'fp-ts/lib/Either';
-import { pipe } from 'fp-ts/lib/pipeable';
-import { identity } from 'fp-ts/lib/function';
-import {
-  getLogEntryRateRequestPayloadRT,
-  getLogEntryRateSuccessReponsePayloadRT,
-  GetLogEntryRateSuccessResponsePayload,
-  LOG_ANALYSIS_GET_LOG_ENTRY_RATE_PATH,
-} from '../../../../common/http_api/log_analysis';
-import { createPlainError, throwErrors } from '../../../../common/runtime_types';
+import { GetLogEntryRateSuccessResponsePayload } from '../../../../common/http_api/log_analysis';
 import { useTrackedPromise } from '../../../utils/use_tracked_promise';
+import { callGetLogEntryRateAPI } from './api/get_log_entry_rate';
 
 type LogEntryRateResults = GetLogEntryRateSuccessResponsePayload['data'];
 
@@ -38,30 +29,10 @@ export const useLogEntryRate = ({
     {
       cancelPreviousOn: 'resolution',
       createPromise: async () => {
-        return await kfetch({
-          method: 'POST',
-          pathname: LOG_ANALYSIS_GET_LOG_ENTRY_RATE_PATH,
-          body: JSON.stringify(
-            getLogEntryRateRequestPayloadRT.encode({
-              data: {
-                sourceId,
-                timeRange: {
-                  startTime,
-                  endTime,
-                },
-                bucketDuration,
-              },
-            })
-          ),
-        });
+        return await callGetLogEntryRateAPI(sourceId, startTime, endTime, bucketDuration);
       },
       onResolve: response => {
-        const { data } = pipe(
-          getLogEntryRateSuccessReponsePayloadRT.decode(response),
-          fold(throwErrors(createPlainError), identity)
-        );
-
-        setLogEntryRate(data);
+        setLogEntryRate(response.data);
       },
     },
     [sourceId, startTime, endTime, bucketDuration]
diff --git a/x-pack/legacy/plugins/infra/public/pages/logs/analysis/chart_helpers/index.tsx b/x-pack/legacy/plugins/infra/public/pages/logs/analysis/chart_helpers/index.tsx
deleted file mode 100644
index df0eca449bb9f8..00000000000000
--- a/x-pack/legacy/plugins/infra/public/pages/logs/analysis/chart_helpers/index.tsx
+++ /dev/null
@@ -1,20 +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 chrome from 'ui/chrome';
-import { SpecId, Theme, LIGHT_THEME, DARK_THEME } from '@elastic/charts';
-
-export const getColorsMap = (color: string, specId: SpecId) => {
-  const map = new Map();
-  map.set({ colorValues: [], specId }, color);
-  return map;
-};
-
-export const isDarkMode = () => chrome.getUiSettingsClient().get('theme:darkMode');
-
-export const getChartTheme = (): Theme => {
-  return isDarkMode() ? DARK_THEME : LIGHT_THEME;
-};
diff --git a/x-pack/legacy/plugins/infra/public/pages/logs/analysis/page_results_content.tsx b/x-pack/legacy/plugins/infra/public/pages/logs/analysis/page_results_content.tsx
index 3629413d6d30c5..aaf24c22594e52 100644
--- a/x-pack/legacy/plugins/infra/public/pages/logs/analysis/page_results_content.tsx
+++ b/x-pack/legacy/plugins/infra/public/pages/logs/analysis/page_results_content.tsx
@@ -6,7 +6,6 @@
 
 import datemath from '@elastic/datemath';
 import {
-  EuiBadge,
   EuiFlexGroup,
   EuiFlexItem,
   EuiPage,
@@ -17,7 +16,6 @@ import {
   EuiSuperDatePicker,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n/react';
 import moment from 'moment';
 import React, { useCallback, useMemo, useState } from 'react';
 
@@ -122,21 +120,6 @@ export const AnalysisResultsContent = ({
     [setAutoRefresh]
   );
 
-  const anomaliesDetected = useMemo(() => {
-    if (!logEntryRate) {
-      return null;
-    } else {
-      if (logEntryRate.histogramBuckets && logEntryRate.histogramBuckets.length) {
-        return logEntryRate.histogramBuckets.reduce(
-          (acc, bucket) => acc + bucket.anomalies.length,
-          0
-        );
-      } else {
-        return null;
-      }
-    }
-  }, [logEntryRate]);
-
   return (
     <>
       {isLoading && !logEntryRate ? (
@@ -150,29 +133,8 @@ export const AnalysisResultsContent = ({
           <EuiPage>
             <EuiPanel paddingSize="l">
               <EuiFlexGroup justifyContent="spaceBetween">
-                <EuiFlexItem grow={7}>
-                  <EuiFlexGroup alignItems="center">
-                    <EuiFlexItem grow={false}>
-                      {anomaliesDetected !== null ? (
-                        <span>
-                          <FormattedMessage
-                            id="xpack.infra.logs.analysis.anomaliesDetectedText"
-                            defaultMessage="Detected {formattedNumber} {number, plural, one {anomaly} other {anomalies}}"
-                            values={{
-                              formattedNumber: (
-                                <EuiBadge color={anomaliesDetected === 0 ? 'default' : 'warning'}>
-                                  {anomaliesDetected}
-                                </EuiBadge>
-                              ),
-                              number: anomaliesDetected,
-                            }}
-                          />
-                        </span>
-                      ) : null}
-                    </EuiFlexItem>
-                  </EuiFlexGroup>
-                </EuiFlexItem>
-                <EuiFlexItem>
+                <EuiFlexItem></EuiFlexItem>
+                <EuiFlexItem grow={false}>
                   <EuiSuperDatePicker
                     start={selectedTimeRange.startTime}
                     end={selectedTimeRange.endTime}
diff --git a/x-pack/legacy/plugins/infra/public/pages/logs/analysis/sections/log_rate/bar_chart.tsx b/x-pack/legacy/plugins/infra/public/pages/logs/analysis/sections/log_rate/bar_chart.tsx
new file mode 100644
index 00000000000000..0719bf956b680c
--- /dev/null
+++ b/x-pack/legacy/plugins/infra/public/pages/logs/analysis/sections/log_rate/bar_chart.tsx
@@ -0,0 +1,167 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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 {
+  Axis,
+  BarSeries,
+  Chart,
+  getAnnotationId,
+  getAxisId,
+  getSpecId,
+  niceTimeFormatter,
+  RectAnnotation,
+  RectAnnotationDatum,
+  Settings,
+  TooltipValue,
+  LIGHT_THEME,
+  DARK_THEME,
+} from '@elastic/charts';
+import { i18n } from '@kbn/i18n';
+import moment from 'moment';
+import React, { useCallback, useMemo } from 'react';
+
+import { GetLogEntryRateSuccessResponsePayload } from '../../../../../../common/http_api/log_analysis/results/log_entry_rate';
+import { TimeRange } from '../../../../../../common/http_api/shared/time_range';
+import { useKibanaUiSetting } from '../../../../../utils/use_kibana_ui_setting';
+
+type LogEntryRateHistogramBuckets = GetLogEntryRateSuccessResponsePayload['data']['histogramBuckets'];
+
+export const LogEntryRateBarChart: React.FunctionComponent<{
+  bucketDuration: number;
+  histogramBuckets: LogEntryRateHistogramBuckets | null;
+  setTimeRange: (timeRange: TimeRange) => void;
+  timeRange: TimeRange;
+}> = ({ bucketDuration, histogramBuckets, setTimeRange, timeRange }) => {
+  const [dateFormat] = useKibanaUiSetting('dateFormat');
+  const [isDarkMode] = useKibanaUiSetting('theme:darkMode');
+
+  const chartDateFormatter = useMemo(
+    () => niceTimeFormatter([timeRange.startTime, timeRange.endTime]),
+    [timeRange]
+  );
+
+  const logEntryRateSeries = useMemo(
+    () =>
+      histogramBuckets
+        ? histogramBuckets.reduce<Array<{ group: string; time: number; value: number }>>(
+            (buckets, bucket) => {
+              return [
+                ...buckets,
+                ...bucket.dataSets.map(dataSet => ({
+                  group: dataSet.dataSetId === '' ? 'unknown' : dataSet.dataSetId,
+                  time: bucket.startTime,
+                  value: dataSet.averageActualLogEntryRate,
+                })),
+              ];
+            },
+            []
+          )
+        : [],
+    [histogramBuckets]
+  );
+
+  const logEntryRateAnomalyAnnotations = useMemo(
+    () =>
+      histogramBuckets
+        ? histogramBuckets.reduce<RectAnnotationDatum[]>((annotatedBuckets, bucket) => {
+            const anomalies = bucket.dataSets.reduce<typeof bucket['dataSets'][0]['anomalies']>(
+              (accumulatedAnomalies, dataSet) => [...accumulatedAnomalies, ...dataSet.anomalies],
+              []
+            );
+            if (anomalies.length <= 0) {
+              return annotatedBuckets;
+            }
+            return [
+              ...annotatedBuckets,
+              {
+                coordinates: {
+                  x0: bucket.startTime,
+                  x1: bucket.startTime + bucketDuration,
+                },
+                details: i18n.translate(
+                  'xpack.infra.logs.analysis.logRateSectionAnomalyCountTooltipLabel',
+                  {
+                    defaultMessage: `{anomalyCount, plural, one {# anomaly} other {# anomalies}}`,
+                    values: {
+                      anomalyCount: anomalies.length,
+                    },
+                  }
+                ),
+              },
+            ];
+          }, [])
+        : [],
+    [histogramBuckets]
+  );
+
+  const logEntryRateSpecId = getSpecId('averageValues');
+  const logEntryRateAnomalyAnnotationsId = getAnnotationId('anomalies');
+
+  const tooltipProps = useMemo(
+    () => ({
+      headerFormatter: (tooltipData: TooltipValue) =>
+        moment(tooltipData.value).format(dateFormat || 'Y-MM-DD HH:mm:ss.SSS'),
+    }),
+    [dateFormat]
+  );
+
+  const handleBrushEnd = useCallback(
+    (startTime: number, endTime: number) => {
+      setTimeRange({
+        endTime,
+        startTime,
+      });
+    },
+    [setTimeRange]
+  );
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <Chart className="log-entry-rate-chart">
+        <Axis
+          id={getAxisId('timestamp')}
+          title={i18n.translate('xpack.infra.logs.analysis.logRateSectionXaxisTitle', {
+            defaultMessage: 'Time',
+          })}
+          position="bottom"
+          showOverlappingTicks
+          tickFormat={chartDateFormatter}
+        />
+        <Axis
+          id={getAxisId('values')}
+          title={i18n.translate('xpack.infra.logs.analysis.logRateSectionYaxisTitle', {
+            defaultMessage: 'Log entries per 15 minutes',
+          })}
+          position="left"
+          tickFormat={value => Number(value).toFixed(0)}
+        />
+        <BarSeries
+          id={logEntryRateSpecId}
+          name={i18n.translate('xpack.infra.logs.analysis.logRateSectionLineSeriesName', {
+            defaultMessage: 'Log entries per 15 minutes (avg)',
+          })}
+          xScaleType="time"
+          yScaleType="linear"
+          xAccessor={'time'}
+          yAccessors={['value']}
+          splitSeriesAccessors={['group']}
+          stackAccessors={['time']}
+          data={logEntryRateSeries}
+        />
+        <RectAnnotation
+          dataValues={logEntryRateAnomalyAnnotations}
+          annotationId={logEntryRateAnomalyAnnotationsId}
+        />
+        <Settings
+          onBrushEnd={handleBrushEnd}
+          tooltip={tooltipProps}
+          theme={isDarkMode ? DARK_THEME : LIGHT_THEME}
+          xDomain={{ min: timeRange.startTime, max: timeRange.endTime }}
+        />
+      </Chart>
+    </div>
+  );
+};
diff --git a/x-pack/legacy/plugins/infra/public/pages/logs/analysis/sections/log_rate/chart.tsx b/x-pack/legacy/plugins/infra/public/pages/logs/analysis/sections/log_rate/chart.tsx
deleted file mode 100644
index 0d703420e7412a..00000000000000
--- a/x-pack/legacy/plugins/infra/public/pages/logs/analysis/sections/log_rate/chart.tsx
+++ /dev/null
@@ -1,196 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import React, { useMemo, useCallback, useState } from 'react';
-import { i18n } from '@kbn/i18n';
-import moment from 'moment';
-import {
-  Axis,
-  Chart,
-  getAxisId,
-  getSpecId,
-  AreaSeries,
-  LineSeries,
-  niceTimeFormatter,
-  Settings,
-  TooltipValue,
-} from '@elastic/charts';
-import { EuiFlexGroup, EuiFlexItem, EuiCheckbox } from '@elastic/eui';
-import { getColorsMap, isDarkMode, getChartTheme } from '../../chart_helpers';
-import { GetLogEntryRateSuccessResponsePayload } from '../../../../../../common/http_api/log_analysis/results/log_entry_rate';
-import { useLogEntryRateGraphData } from '../../../../../containers/logs/log_analysis/log_analysis_graph_data/log_entry_rate';
-import { useKibanaUiSetting } from '../../../../../utils/use_kibana_ui_setting';
-import { TimeRange } from '../../../../../../common/http_api/shared/time_range';
-
-const areaSeriesColour = 'rgb(224, 237, 255)';
-const lineSeriesColour = 'rgb(49, 133, 252)';
-
-interface Props {
-  data: GetLogEntryRateSuccessResponsePayload['data'] | null;
-  setTimeRange: (timeRange: TimeRange) => void;
-  timeRange: TimeRange;
-}
-
-export const ChartView = ({ data, setTimeRange, timeRange }: Props) => {
-  const { areaSeries, lineSeries, anomalySeries } = useLogEntryRateGraphData({ data });
-
-  const dateFormatter = useMemo(
-    () =>
-      lineSeries.length > 0
-        ? niceTimeFormatter([timeRange.startTime, timeRange.endTime])
-        : (value: number) => `${value}`,
-    [lineSeries, timeRange]
-  );
-
-  const areaSpecId = getSpecId('modelBounds');
-  const lineSpecId = getSpecId('averageValues');
-  const anomalySpecId = getSpecId('anomalies');
-
-  const [dateFormat] = useKibanaUiSetting('dateFormat');
-
-  const tooltipProps = useMemo(
-    () => ({
-      headerFormatter: (tooltipData: TooltipValue) =>
-        moment(tooltipData.value).format(dateFormat || 'Y-MM-DD HH:mm:ss.SSS'),
-    }),
-    [dateFormat]
-  );
-
-  const [isShowingModelBounds, setIsShowingModelBounds] = useState<boolean>(true);
-
-  const handleBrushEnd = useCallback(
-    (startTime: number, endTime: number) => {
-      setTimeRange({
-        endTime,
-        startTime,
-      });
-    },
-    [setTimeRange]
-  );
-
-  return (
-    <>
-      <EuiFlexGroup justifyContent="flexEnd">
-        <EuiFlexItem grow={false}>
-          <EuiCheckbox
-            id={'showModelBoundsCheckbox'}
-            label={showModelBoundsLabel}
-            aria-label={showModelBoundsLabel}
-            checked={isShowingModelBounds}
-            onChange={e => {
-              setIsShowingModelBounds(e.target.checked);
-            }}
-          />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-      <div style={{ height: 400, width: '100%' }}>
-        <Chart className="log-entry-rate-chart">
-          <Axis
-            id={getAxisId('timestamp')}
-            title={i18n.translate('xpack.infra.logs.analysis.logRateSectionXaxisTitle', {
-              defaultMessage: 'Time',
-            })}
-            position="bottom"
-            showOverlappingTicks
-            tickFormat={dateFormatter}
-          />
-          <Axis
-            id={getAxisId('values')}
-            title={i18n.translate('xpack.infra.logs.analysis.logRateSectionYaxisTitle', {
-              defaultMessage: 'Log entries per 15 minutes',
-            })}
-            position="left"
-            tickFormat={value => Number(value).toFixed(0)}
-          />
-          {isShowingModelBounds ? (
-            <AreaSeries
-              id={areaSpecId}
-              name={i18n.translate('xpack.infra.logs.analysis.logRateSectionAreaSeriesName', {
-                defaultMessage: 'Expected',
-              })}
-              xScaleType="time"
-              yScaleType="linear"
-              xAccessor="x"
-              yAccessors={['max']}
-              y0Accessors={['min']}
-              data={areaSeries}
-              yScaleToDataExtent
-              curve={2}
-              areaSeriesStyle={
-                !isDarkMode()
-                  ? {
-                      line: { stroke: areaSeriesColour },
-                      area: { fill: areaSeriesColour, visible: true, opacity: 0.8 },
-                    }
-                  : undefined
-              }
-              customSeriesColors={
-                !isDarkMode() ? getColorsMap(areaSeriesColour, areaSpecId) : undefined
-              }
-            />
-          ) : null}
-          <LineSeries
-            id={lineSpecId}
-            name={i18n.translate('xpack.infra.logs.analysis.logRateSectionLineSeriesName', {
-              defaultMessage: 'Log entries per 15 minutes (avg)',
-            })}
-            xScaleType="time"
-            yScaleType="linear"
-            xAccessor={0}
-            yAccessors={[1]}
-            data={lineSeries}
-            yScaleToDataExtent
-            curve={2}
-            lineSeriesStyle={
-              !isDarkMode()
-                ? {
-                    line: { stroke: lineSeriesColour },
-                    point: { radius: 2, fill: lineSeriesColour },
-                  }
-                : undefined
-            }
-            customSeriesColors={
-              !isDarkMode() ? getColorsMap(lineSeriesColour, lineSpecId) : undefined
-            }
-          />
-          <LineSeries
-            id={anomalySpecId}
-            name={i18n.translate('xpack.infra.logs.analysis.logRateSectionAnomalySeriesName', {
-              defaultMessage: 'Anomalies',
-            })}
-            xScaleType="time"
-            yScaleType="linear"
-            xAccessor={0}
-            yAccessors={[1]}
-            data={anomalySeries}
-            yScaleToDataExtent
-            curve={2}
-            lineSeriesStyle={
-              !isDarkMode()
-                ? {
-                    line: { stroke: 'red', opacity: 0 },
-                    point: { radius: 3, fill: 'red' },
-                  }
-                : undefined
-            }
-            customSeriesColors={!isDarkMode() ? getColorsMap('red', anomalySpecId) : undefined}
-          />
-          <Settings
-            onBrushEnd={handleBrushEnd}
-            tooltip={tooltipProps}
-            theme={getChartTheme()}
-            xDomain={{ min: timeRange.startTime, max: timeRange.endTime }}
-          />
-        </Chart>
-      </div>
-    </>
-  );
-};
-
-const showModelBoundsLabel = i18n.translate(
-  'xpack.infra.logs.analysis.logRateSectionModelBoundsCheckboxLabel',
-  { defaultMessage: 'Show model bounds' }
-);
diff --git a/x-pack/legacy/plugins/infra/public/pages/logs/analysis/sections/log_rate/index.tsx b/x-pack/legacy/plugins/infra/public/pages/logs/analysis/sections/log_rate/index.tsx
index 8a23d7ac091110..1f01af33e33c4f 100644
--- a/x-pack/legacy/plugins/infra/public/pages/logs/analysis/sections/log_rate/index.tsx
+++ b/x-pack/legacy/plugins/infra/public/pages/logs/analysis/sections/log_rate/index.tsx
@@ -13,13 +13,11 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React, { useState } from 'react';
+import React from 'react';
 
 import { GetLogEntryRateSuccessResponsePayload } from '../../../../../../common/http_api/log_analysis/results/log_entry_rate';
-import { ChartView } from './chart';
-import { isValidLogRateView, LogRateView, LogRateViewSwitcher } from './log_rate_view_switcher';
-import { TableView } from './table';
 import { TimeRange } from '../../../../../../common/http_api/shared/time_range';
+import { LogEntryRateBarChart } from './bar_chart';
 
 export const LogRateResults = ({
   isLoading,
@@ -41,8 +39,6 @@ export const LogRateResults = ({
     { defaultMessage: 'Loading log rate results' }
   );
 
-  const [viewMode, setViewMode] = useState<LogRateView>('chart');
-
   return (
     <>
       <EuiTitle size="m" aria-label={title}>
@@ -74,22 +70,12 @@ export const LogRateResults = ({
           }
         />
       ) : (
-        <>
-          <EuiFlexGroup>
-            <EuiFlexItem grow={true}>
-              <LogRateViewSwitcher
-                selectedView={viewMode}
-                onChange={id => (isValidLogRateView(id) ? setViewMode(id) : undefined)}
-              />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-          <EuiSpacer size="l" />
-          {viewMode === 'chart' ? (
-            <ChartView data={results} setTimeRange={setTimeRange} timeRange={timeRange} />
-          ) : (
-            <TableView data={results} />
-          )}
-        </>
+        <LogEntryRateBarChart
+          bucketDuration={results.bucketDuration}
+          histogramBuckets={results.histogramBuckets}
+          setTimeRange={setTimeRange}
+          timeRange={timeRange}
+        />
       )}
     </>
   );
diff --git a/x-pack/legacy/plugins/infra/public/pages/logs/analysis/sections/log_rate/log_rate_view_switcher.tsx b/x-pack/legacy/plugins/infra/public/pages/logs/analysis/sections/log_rate/log_rate_view_switcher.tsx
deleted file mode 100644
index 43280d5c02ead5..00000000000000
--- a/x-pack/legacy/plugins/infra/public/pages/logs/analysis/sections/log_rate/log_rate_view_switcher.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { EuiButtonGroup, EuiButtonGroupProps } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-import React from 'react';
-
-export type LogRateView = 'chart' | 'table';
-
-export const isValidLogRateView = (maybeView: string): maybeView is LogRateView =>
-  ['chart', 'table'].includes(maybeView);
-
-interface LogRateViewSwitcherProps {
-  selectedView: LogRateView;
-  onChange: EuiButtonGroupProps['onChange'];
-}
-
-const chartLabel = i18n.translate(
-  'xpack.infra.logs.analysis.logRateSection.viewSwitcher.chartLabel',
-  { defaultMessage: 'Rate chart' }
-);
-const tableLabel = i18n.translate(
-  'xpack.infra.logs.analysis.logRateSection.viewSwitcher.tableLabel',
-  { defaultMessage: 'Anomaly table' }
-);
-const legendLabel = i18n.translate(
-  'xpack.infra.logs.analysis.logRateSection.viewSwitcher.legendLabel',
-  { defaultMessage: 'Switch between the log rate chart and the anomalies table view' }
-);
-
-const buttons = [
-  {
-    id: 'chart',
-    label: chartLabel,
-    iconType: 'apps',
-  },
-  {
-    id: 'table',
-    label: tableLabel,
-    iconType: 'editorUnorderedList',
-  },
-];
-
-export const LogRateViewSwitcher: React.FunctionComponent<LogRateViewSwitcherProps> = ({
-  selectedView,
-  onChange,
-}) => {
-  return (
-    <EuiButtonGroup
-      legend={legendLabel}
-      options={buttons}
-      color="primary"
-      idSelected={selectedView}
-      onChange={onChange}
-    />
-  );
-};
diff --git a/x-pack/legacy/plugins/infra/public/pages/logs/analysis/sections/log_rate/table.tsx b/x-pack/legacy/plugins/infra/public/pages/logs/analysis/sections/log_rate/table.tsx
deleted file mode 100644
index 19bfaacf5d5dfa..00000000000000
--- a/x-pack/legacy/plugins/infra/public/pages/logs/analysis/sections/log_rate/table.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import React, { useMemo } from 'react';
-import { i18n } from '@kbn/i18n';
-import moment from 'moment';
-import { EuiInMemoryTable } from '@elastic/eui';
-import { GetLogEntryRateSuccessResponsePayload } from '../../../../../../common/http_api/log_analysis/results/log_entry_rate';
-import { useKibanaUiSetting } from '../../../../../utils/use_kibana_ui_setting';
-
-interface Props {
-  data: GetLogEntryRateSuccessResponsePayload['data'];
-}
-
-const startTimeLabel = i18n.translate(
-  'xpack.infra.logs.analysis.logRateSection.table.startTimeLabel',
-  { defaultMessage: 'Start time' }
-);
-const anomalyScoreLabel = i18n.translate(
-  'xpack.infra.logs.analysis.logRateSection.table.anomalyScoreLabel',
-  { defaultMessage: 'Anomaly score' }
-);
-const actualLogEntryRateLabel = i18n.translate(
-  'xpack.infra.logs.analysis.logRateSection.table.actualLogEntryRateLabel',
-  { defaultMessage: 'Actual rate' }
-);
-const typicalLogEntryRateLabel = i18n.translate(
-  'xpack.infra.logs.analysis.logRateSection.table.typicalLogEntryRateLabel',
-  { defaultMessage: 'Typical rate' }
-);
-
-export const TableView = ({ data }: Props) => {
-  const [dateFormat] = useKibanaUiSetting('dateFormat');
-
-  const formattedAnomalies = useMemo(() => {
-    return data.histogramBuckets.reduce((acc: any, bucket) => {
-      if (bucket.anomalies.length > 0) {
-        bucket.anomalies.forEach(anomaly => {
-          const formattedAnomaly = {
-            startTime: moment(anomaly.startTime).format(dateFormat || 'Y-MM-DD HH:mm:ss.SSS'),
-            anomalyScore: Number(anomaly.anomalyScore).toFixed(3),
-            typicalLogEntryRate: Number(anomaly.typicalLogEntryRate).toFixed(3),
-            actualLogEntryRate: Number(anomaly.actualLogEntryRate).toFixed(3),
-          };
-          acc.push(formattedAnomaly);
-        });
-        return acc;
-      } else {
-        return acc;
-      }
-    }, []);
-  }, [data]);
-
-  const columns = [
-    {
-      field: 'startTime',
-      name: startTimeLabel,
-      sortable: true,
-      'data-test-subj': 'startTimeCell',
-    },
-    {
-      field: 'anomalyScore',
-      name: anomalyScoreLabel,
-      sortable: true,
-      'data-test-subj': 'anomalyScoreCell',
-    },
-    {
-      field: 'actualLogEntryRate',
-      name: actualLogEntryRateLabel,
-      sortable: true,
-      'data-test-subj': 'actualLogEntryRateCell',
-    },
-    {
-      field: 'typicalLogEntryRate',
-      name: typicalLogEntryRateLabel,
-      sortable: true,
-      'data-test-subj': 'typicalLogEntryRateCell',
-    },
-  ];
-
-  const initialSorting = {
-    sort: {
-      field: 'anomalyScore',
-      direction: 'desc',
-    },
-  };
-
-  return (
-    <>
-      <EuiInMemoryTable items={formattedAnomalies} columns={columns} sorting={initialSorting} />
-    </>
-  );
-};
diff --git a/x-pack/legacy/plugins/infra/server/lib/log_analysis/log_analysis.ts b/x-pack/legacy/plugins/infra/server/lib/log_analysis/log_analysis.ts
index ac7f7b6df8d62f..31d9c5403e2d2b 100644
--- a/x-pack/legacy/plugins/infra/server/lib/log_analysis/log_analysis.ts
+++ b/x-pack/legacy/plugins/infra/server/lib/log_analysis/log_analysis.ts
@@ -4,8 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import * as rt from 'io-ts';
-
 import { pipe } from 'fp-ts/lib/pipeable';
 import { map, fold } from 'fp-ts/lib/Either';
 import { identity } from 'fp-ts/lib/function';
@@ -13,8 +11,14 @@ import { getJobId } from '../../../common/log_analysis';
 import { throwErrors, createPlainError } from '../../../common/runtime_types';
 import { InfraBackendFrameworkAdapter, InfraFrameworkRequest } from '../adapters/framework';
 import { NoLogRateResultsIndexError } from './errors';
+import {
+  logRateModelPlotResponseRT,
+  createLogEntryRateQuery,
+  LogRateModelPlotBucket,
+  CompositeTimestampDataSetKey,
+} from './queries';
 
-const ML_ANOMALY_INDEX_PREFIX = '.ml-anomalies-';
+const COMPOSITE_AGGREGATION_BATCH_SIZE = 1000;
 
 export class InfraLogAnalysis {
   constructor(
@@ -38,168 +42,95 @@ export class InfraLogAnalysis {
   ) {
     const logRateJobId = this.getJobIds(request, sourceId).logEntryRate;
 
-    const mlModelPlotResponse = await this.libs.framework.callWithRequest(request, 'search', {
-      allowNoIndices: true,
-      body: {
-        query: {
-          bool: {
-            filter: [
-              {
-                range: {
-                  timestamp: {
-                    gte: startTime,
-                    lt: endTime,
-                  },
-                },
-              },
-              {
-                terms: {
-                  result_type: ['model_plot', 'record'],
-                },
-              },
-              {
-                term: {
-                  detector_index: {
-                    value: 0,
-                  },
-                },
-              },
-            ],
-          },
-        },
-        aggs: {
-          timestamp_buckets: {
-            date_histogram: {
-              field: 'timestamp',
-              fixed_interval: `${bucketDuration}ms`,
-            },
-            aggs: {
-              filter_model_plot: {
-                filter: {
-                  term: {
-                    result_type: 'model_plot',
-                  },
-                },
-                aggs: {
-                  stats_model_lower: {
-                    stats: {
-                      field: 'model_lower',
-                    },
-                  },
-                  stats_model_upper: {
-                    stats: {
-                      field: 'model_upper',
-                    },
-                  },
-                  stats_actual: {
-                    stats: {
-                      field: 'actual',
-                    },
-                  },
-                },
-              },
-              filter_records: {
-                filter: {
-                  term: {
-                    result_type: 'record',
-                  },
-                },
-                aggs: {
-                  top_hits_record: {
-                    top_hits: {
-                      _source: Object.keys(logRateMlRecordRT.props),
-                      size: 100,
-                      sort: [
-                        {
-                          timestamp: 'asc',
-                        },
-                      ],
-                    },
-                  },
-                },
-              },
-            },
-          },
-        },
-      },
-      ignoreUnavailable: true,
-      index: `${ML_ANOMALY_INDEX_PREFIX}${logRateJobId}`,
-      size: 0,
-      trackScores: false,
-      trackTotalHits: false,
-    });
+    let mlModelPlotBuckets: LogRateModelPlotBucket[] = [];
+    let afterLatestBatchKey: CompositeTimestampDataSetKey | undefined;
 
-    if (mlModelPlotResponse._shards.total === 0) {
-      throw new NoLogRateResultsIndexError(
-        `Failed to find ml result index for job ${logRateJobId}.`
+    while (true) {
+      const mlModelPlotResponse = await this.libs.framework.callWithRequest(
+        request,
+        'search',
+        createLogEntryRateQuery(
+          logRateJobId,
+          startTime,
+          endTime,
+          bucketDuration,
+          COMPOSITE_AGGREGATION_BATCH_SIZE,
+          afterLatestBatchKey
+        )
       );
-    }
 
-    const mlModelPlotBuckets = pipe(
-      logRateModelPlotResponseRT.decode(mlModelPlotResponse),
-      map(response => response.aggregations.timestamp_buckets.buckets),
-      fold(throwErrors(createPlainError), identity)
-    );
+      if (mlModelPlotResponse._shards.total === 0) {
+        throw new NoLogRateResultsIndexError(
+          `Failed to find ml result index for job ${logRateJobId}.`
+        );
+      }
 
-    return mlModelPlotBuckets.map(bucket => ({
-      anomalies: bucket.filter_records.top_hits_record.hits.hits.map(({ _source: record }) => ({
-        actualLogEntryRate: record.actual[0],
-        anomalyScore: record.record_score,
-        duration: record.bucket_span * 1000,
-        startTime: record.timestamp,
-        typicalLogEntryRate: record.typical[0],
-      })),
-      duration: bucketDuration,
-      logEntryRateStats: bucket.filter_model_plot.stats_actual,
-      modelLowerBoundStats: bucket.filter_model_plot.stats_model_lower,
-      modelUpperBoundStats: bucket.filter_model_plot.stats_model_upper,
-      startTime: bucket.key,
-    }));
-  }
-}
+      const { after_key: afterKey, buckets: latestBatchBuckets } = pipe(
+        logRateModelPlotResponseRT.decode(mlModelPlotResponse),
+        map(response => response.aggregations.timestamp_data_set_buckets),
+        fold(throwErrors(createPlainError), identity)
+      );
 
-const logRateMlRecordRT = rt.type({
-  actual: rt.array(rt.number),
-  bucket_span: rt.number,
-  record_score: rt.number,
-  timestamp: rt.number,
-  typical: rt.array(rt.number),
-});
+      mlModelPlotBuckets = [...mlModelPlotBuckets, ...latestBatchBuckets];
+      afterLatestBatchKey = afterKey;
 
-const logRateStatsAggregationRT = rt.type({
-  avg: rt.union([rt.number, rt.null]),
-  count: rt.number,
-  max: rt.union([rt.number, rt.null]),
-  min: rt.union([rt.number, rt.null]),
-  sum: rt.number,
-});
+      if (latestBatchBuckets.length < COMPOSITE_AGGREGATION_BATCH_SIZE) {
+        break;
+      }
+    }
 
-const logRateModelPlotResponseRT = rt.type({
-  aggregations: rt.type({
-    timestamp_buckets: rt.type({
-      buckets: rt.array(
-        rt.type({
-          key: rt.number,
-          filter_records: rt.type({
-            doc_count: rt.number,
-            top_hits_record: rt.type({
-              hits: rt.type({
-                hits: rt.array(
-                  rt.type({
-                    _source: logRateMlRecordRT,
-                  })
-                ),
-              }),
-            }),
-          }),
-          filter_model_plot: rt.type({
-            doc_count: rt.number,
-            stats_actual: logRateStatsAggregationRT,
-            stats_model_lower: logRateStatsAggregationRT,
-            stats_model_upper: logRateStatsAggregationRT,
-          }),
-        })
-      ),
-    }),
-  }),
-});
+    return mlModelPlotBuckets.reduce<
+      Array<{
+        dataSets: Array<{
+          analysisBucketCount: number;
+          anomalies: Array<{
+            actualLogEntryRate: number;
+            anomalyScore: number;
+            duration: number;
+            startTime: number;
+            typicalLogEntryRate: number;
+          }>;
+          averageActualLogEntryRate: number;
+          dataSetId: string;
+        }>;
+        startTime: number;
+      }>
+    >((histogramBuckets, timestampDataSetBucket) => {
+      const previousHistogramBucket = histogramBuckets[histogramBuckets.length - 1];
+      const dataSet = {
+        analysisBucketCount: timestampDataSetBucket.filter_model_plot.doc_count,
+        anomalies: timestampDataSetBucket.filter_records.top_hits_record.hits.hits.map(
+          ({ _source: record }) => ({
+            actualLogEntryRate: record.actual[0],
+            anomalyScore: record.record_score,
+            duration: record.bucket_span * 1000,
+            startTime: record.timestamp,
+            typicalLogEntryRate: record.typical[0],
+          })
+        ),
+        averageActualLogEntryRate: timestampDataSetBucket.filter_model_plot.average_actual.value,
+        dataSetId: timestampDataSetBucket.key.data_set,
+      };
+      if (
+        previousHistogramBucket &&
+        previousHistogramBucket.startTime === timestampDataSetBucket.key.timestamp
+      ) {
+        return [
+          ...histogramBuckets.slice(0, -1),
+          {
+            ...previousHistogramBucket,
+            dataSets: [...previousHistogramBucket.dataSets, dataSet],
+          },
+        ];
+      } else {
+        return [
+          ...histogramBuckets,
+          {
+            dataSets: [dataSet],
+            startTime: timestampDataSetBucket.key.timestamp,
+          },
+        ];
+      }
+    }, []);
+  }
+}
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/index_or_search/paginated_selectable_list/index.js b/x-pack/legacy/plugins/infra/server/lib/log_analysis/queries/index.ts
similarity index 86%
rename from x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/index_or_search/paginated_selectable_list/index.js
rename to x-pack/legacy/plugins/infra/server/lib/log_analysis/queries/index.ts
index ee6039fdb16210..17494212777198 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/index_or_search/paginated_selectable_list/index.js
+++ b/x-pack/legacy/plugins/infra/server/lib/log_analysis/queries/index.ts
@@ -4,4 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import './paginated_selectable_list';
+export * from './log_entry_rate';
diff --git a/x-pack/legacy/plugins/infra/server/lib/log_analysis/queries/log_entry_rate.ts b/x-pack/legacy/plugins/infra/server/lib/log_analysis/queries/log_entry_rate.ts
new file mode 100644
index 00000000000000..b10b1fe04db24f
--- /dev/null
+++ b/x-pack/legacy/plugins/infra/server/lib/log_analysis/queries/log_entry_rate.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.
+ */
+
+import * as rt from 'io-ts';
+
+const ML_ANOMALY_INDEX_PREFIX = '.ml-anomalies-';
+
+export const createLogEntryRateQuery = (
+  logRateJobId: string,
+  startTime: number,
+  endTime: number,
+  bucketDuration: number,
+  size: number,
+  afterKey?: CompositeTimestampDataSetKey
+) => ({
+  allowNoIndices: true,
+  body: {
+    query: {
+      bool: {
+        filter: [
+          {
+            range: {
+              timestamp: {
+                gte: startTime,
+                lt: endTime,
+              },
+            },
+          },
+          {
+            terms: {
+              result_type: ['model_plot', 'record'],
+            },
+          },
+          {
+            term: {
+              detector_index: {
+                value: 0,
+              },
+            },
+          },
+        ],
+      },
+    },
+    aggs: {
+      timestamp_data_set_buckets: {
+        composite: {
+          after: afterKey,
+          size,
+          sources: [
+            {
+              timestamp: {
+                date_histogram: {
+                  field: 'timestamp',
+                  fixed_interval: `${bucketDuration}ms`,
+                  order: 'asc',
+                },
+              },
+            },
+            {
+              data_set: {
+                terms: {
+                  field: 'partition_field_value',
+                  order: 'asc',
+                },
+              },
+            },
+          ],
+        },
+        aggs: {
+          filter_model_plot: {
+            filter: {
+              term: {
+                result_type: 'model_plot',
+              },
+            },
+            aggs: {
+              average_actual: {
+                avg: {
+                  field: 'actual',
+                },
+              },
+            },
+          },
+          filter_records: {
+            filter: {
+              term: {
+                result_type: 'record',
+              },
+            },
+            aggs: {
+              top_hits_record: {
+                top_hits: {
+                  _source: Object.keys(logRateMlRecordRT.props),
+                  size: 100,
+                  sort: [
+                    {
+                      timestamp: 'asc',
+                    },
+                  ],
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+  ignoreUnavailable: true,
+  index: `${ML_ANOMALY_INDEX_PREFIX}${logRateJobId}`,
+  size: 0,
+  trackScores: false,
+  trackTotalHits: false,
+});
+
+const logRateMlRecordRT = rt.type({
+  actual: rt.array(rt.number),
+  bucket_span: rt.number,
+  record_score: rt.number,
+  timestamp: rt.number,
+  typical: rt.array(rt.number),
+});
+
+const metricAggregationRT = rt.type({
+  value: rt.number,
+});
+
+const compositeTimestampDataSetKeyRT = rt.type({
+  data_set: rt.string,
+  timestamp: rt.number,
+});
+
+export type CompositeTimestampDataSetKey = rt.TypeOf<typeof compositeTimestampDataSetKeyRT>;
+
+export const logRateModelPlotBucketRT = rt.type({
+  key: compositeTimestampDataSetKeyRT,
+  filter_records: rt.type({
+    doc_count: rt.number,
+    top_hits_record: rt.type({
+      hits: rt.type({
+        hits: rt.array(
+          rt.type({
+            _source: logRateMlRecordRT,
+          })
+        ),
+      }),
+    }),
+  }),
+  filter_model_plot: rt.type({
+    doc_count: rt.number,
+    average_actual: metricAggregationRT,
+  }),
+});
+
+export type LogRateModelPlotBucket = rt.TypeOf<typeof logRateModelPlotBucketRT>;
+
+export const logRateModelPlotResponseRT = rt.type({
+  aggregations: rt.type({
+    timestamp_data_set_buckets: rt.intersection([
+      rt.type({
+        buckets: rt.array(logRateModelPlotBucketRT),
+      }),
+      rt.partial({
+        after_key: compositeTimestampDataSetKeyRT,
+      }),
+    ]),
+  }),
+});
diff --git a/x-pack/legacy/plugins/lens/index.ts b/x-pack/legacy/plugins/lens/index.ts
index 399a65041b6646..c64757de5fb0ad 100644
--- a/x-pack/legacy/plugins/lens/index.ts
+++ b/x-pack/legacy/plugins/lens/index.ts
@@ -65,17 +65,17 @@ export const lens: LegacyPluginInitializer = kibana => {
             api: [PLUGIN_ID],
             catalogue: [PLUGIN_ID],
             savedObject: {
-              all: [],
-              read: [],
+              all: ['search'],
+              read: ['index-pattern'],
             },
-            ui: ['save', 'show'],
+            ui: ['save', 'show', 'saveQuery'],
           },
           read: {
             api: [PLUGIN_ID],
             catalogue: [PLUGIN_ID],
             savedObject: {
               all: [],
-              read: [],
+              read: ['index-pattern'],
             },
             ui: ['show'],
           },
diff --git a/x-pack/legacy/plugins/lens/public/app_plugin/_app.scss b/x-pack/legacy/plugins/lens/public/app_plugin/_app.scss
index 382a3f5522daf1..ed3a178cdd5eaf 100644
--- a/x-pack/legacy/plugins/lens/public/app_plugin/_app.scss
+++ b/x-pack/legacy/plugins/lens/public/app_plugin/_app.scss
@@ -11,7 +11,6 @@
 }
 
 .lnsApp__header {
-  padding: $euiSize;
   border-bottom: $euiBorderThin;
 }
 
diff --git a/x-pack/legacy/plugins/lens/public/app_plugin/app.test.tsx b/x-pack/legacy/plugins/lens/public/app_plugin/app.test.tsx
index 1e5d9eb39c578f..103697ef9148a7 100644
--- a/x-pack/legacy/plugins/lens/public/app_plugin/app.test.tsx
+++ b/x-pack/legacy/plugins/lens/public/app_plugin/app.test.tsx
@@ -5,17 +5,23 @@
  */
 
 import React from 'react';
+import { ReactWrapper } from 'enzyme';
+import { act } from 'react-dom/test-utils';
+import { buildExistsFilter } from '@kbn/es-query';
 import { App } from './app';
 import { EditorFrameInstance } from '../types';
 import { Storage } from 'ui/storage';
 import { Document, SavedObjectStore } from '../persistence';
 import { mount } from 'enzyme';
-import { QueryBarTopRow } from '../../../../../../src/legacy/core_plugins/data/public/query/query_bar';
-import { SavedObjectsClientContract } from 'src/core/public';
+import {
+  TopNavMenu,
+  TopNavMenuData,
+} from '../../../../../../src/legacy/core_plugins/kibana_react/public';
+import { DataStart } from '../../../../../../src/legacy/core_plugins/data/public';
 import { coreMock } from 'src/core/public/mocks';
 
-jest.mock('../../../../../../src/legacy/core_plugins/data/public/query/query_bar', () => ({
-  QueryBarTopRow: jest.fn(() => null),
+jest.mock('../../../../../../src/legacy/core_plugins/kibana_react/public', () => ({
+  TopNavMenu: jest.fn(() => null),
 }));
 
 jest.mock('ui/new_platform');
@@ -31,6 +37,31 @@ function createMockFrame(): jest.Mocked<EditorFrameInstance> {
   };
 }
 
+function createMockFilterManager() {
+  const unsubscribe = jest.fn();
+
+  let subscriber: () => void;
+  let filters: unknown = [];
+
+  return {
+    getUpdates$: () => ({
+      subscribe: ({ next }: { next: () => void }) => {
+        subscriber = next;
+        return unsubscribe;
+      },
+    }),
+    setFilters: (newFilters: unknown[]) => {
+      filters = newFilters;
+      subscriber();
+    },
+    getFilters: () => filters,
+    removeAll: () => {
+      filters = [];
+      subscriber();
+    },
+  };
+}
+
 describe('Lens App', () => {
   let frame: jest.Mocked<EditorFrameInstance>;
   let core: ReturnType<typeof coreMock['createStart']>;
@@ -38,15 +69,37 @@ describe('Lens App', () => {
   function makeDefaultArgs(): jest.Mocked<{
     editorFrame: EditorFrameInstance;
     core: typeof core;
+    data: DataStart;
     store: Storage;
     docId?: string;
     docStorage: SavedObjectStore;
     redirectTo: (id?: string) => void;
-    savedObjectsClient: SavedObjectsClientContract;
   }> {
     return ({
       editorFrame: createMockFrame(),
-      core,
+      core: {
+        ...core,
+        application: {
+          ...core.application,
+          capabilities: {
+            ...core.application.capabilities,
+            lens: { save: true, saveQuery: true, show: true },
+          },
+        },
+      },
+      data: {
+        indexPatterns: {
+          indexPatterns: {
+            get: jest.fn(id => {
+              return new Promise(resolve => resolve({ id }));
+            }),
+          },
+        },
+        timefilter: { history: {} },
+        filter: {
+          filterManager: createMockFilterManager(),
+        },
+      },
       store: {
         get: jest.fn(),
       },
@@ -54,17 +107,15 @@ describe('Lens App', () => {
         load: jest.fn(),
         save: jest.fn(),
       },
-      QueryBarTopRow: jest.fn(() => <div />),
       redirectTo: jest.fn(id => {}),
-      savedObjectsClient: jest.fn(),
     } as unknown) as jest.Mocked<{
       editorFrame: EditorFrameInstance;
       core: typeof core;
+      data: DataStart;
       store: Storage;
       docId?: string;
       docStorage: SavedObjectStore;
       redirectTo: (id?: string) => void;
-      savedObjectsClient: SavedObjectsClientContract;
     }>;
   }
 
@@ -106,12 +157,14 @@ describe('Lens App', () => {
               "toDate": "now",
             },
             "doc": undefined,
+            "filters": Array [],
             "onChange": [Function],
             "onError": [Function],
             "query": Object {
               "language": "kuery",
               "query": "",
             },
+            "savedQuery": undefined,
           },
         ],
       ]
@@ -171,12 +224,11 @@ describe('Lens App', () => {
       await waitForPromises();
 
       expect(args.docStorage.load).toHaveBeenCalledWith('1234');
-      expect(QueryBarTopRow).toHaveBeenCalledWith(
+      expect(args.data.indexPatterns.indexPatterns.get).toHaveBeenCalledWith('1');
+      expect(TopNavMenu).toHaveBeenCalledWith(
         expect.objectContaining({
-          dateRangeFrom: 'now-7d',
-          dateRangeTo: 'now',
           query: 'fake query',
-          indexPatterns: ['saved'],
+          indexPatterns: [{ id: '1' }],
         }),
         {}
       );
@@ -230,30 +282,51 @@ describe('Lens App', () => {
     });
 
     describe('save button', () => {
-      it('shows a save button that is enabled when the frame has provided its state', () => {
+      function getButton(instance: ReactWrapper): TopNavMenuData {
+        return (instance
+          .find('[data-test-subj="lnsApp_topNav"]')
+          .prop('config') as TopNavMenuData[]).find(
+          button => button.testId === 'lnsApp_saveButton'
+        )!;
+      }
+
+      it('shows a disabled save button when the user does not have permissions', async () => {
+        const args = makeDefaultArgs();
+        args.core.application = {
+          ...args.core.application,
+          capabilities: {
+            ...args.core.application.capabilities,
+            lens: { save: false, saveQuery: false, show: true },
+          },
+        };
+        args.editorFrame = frame;
+
+        const instance = mount(<App {...args} />);
+
+        expect(getButton(instance).disableButton).toEqual(true);
+
+        const onChange = frame.mount.mock.calls[0][1].onChange;
+        onChange({ filterableIndexPatterns: [], doc: ('will save this' as unknown) as Document });
+
+        instance.update();
+
+        expect(getButton(instance).disableButton).toEqual(true);
+      });
+
+      it('shows a save button that is enabled when the frame has provided its state', async () => {
         const args = makeDefaultArgs();
         args.editorFrame = frame;
 
         const instance = mount(<App {...args} />);
 
-        expect(
-          instance
-            .find('[data-test-subj="lnsApp_saveButton"]')
-            .first()
-            .prop('disabled')
-        ).toEqual(true);
+        expect(getButton(instance).disableButton).toEqual(true);
 
         const onChange = frame.mount.mock.calls[0][1].onChange;
-        onChange({ indexPatternTitles: [], doc: ('will save this' as unknown) as Document });
+        onChange({ filterableIndexPatterns: [], doc: ('will save this' as unknown) as Document });
 
         instance.update();
 
-        expect(
-          instance
-            .find('[data-test-subj="lnsApp_saveButton"]')
-            .first()
-            .prop('disabled')
-        ).toEqual(false);
+        expect(getButton(instance).disableButton).toEqual(false);
       });
 
       it('saves the latest doc and then prevents more saving', async () => {
@@ -266,21 +339,15 @@ describe('Lens App', () => {
         expect(frame.mount).toHaveBeenCalledTimes(1);
 
         const onChange = frame.mount.mock.calls[0][1].onChange;
-        onChange({ indexPatternTitles: [], doc: ({ id: undefined } as unknown) as Document });
+        onChange({ filterableIndexPatterns: [], doc: ({ id: undefined } as unknown) as Document });
 
         instance.update();
 
-        expect(
-          instance
-            .find('[data-test-subj="lnsApp_saveButton"]')
-            .first()
-            .prop('disabled')
-        ).toEqual(false);
+        expect(getButton(instance).disableButton).toEqual(false);
 
-        instance
-          .find('[data-test-subj="lnsApp_saveButton"]')
-          .first()
-          .prop('onClick')!({} as React.MouseEvent);
+        act(() => {
+          getButton(instance).run(instance.getDOMNode());
+        });
 
         expect(args.docStorage.save).toHaveBeenCalledWith({ id: undefined });
 
@@ -292,12 +359,7 @@ describe('Lens App', () => {
 
         expect(args.docStorage.load).not.toHaveBeenCalled();
 
-        expect(
-          instance
-            .find('[data-test-subj="lnsApp_saveButton"]')
-            .first()
-            .prop('disabled')
-        ).toEqual(true);
+        expect(getButton(instance).disableButton).toEqual(true);
       });
 
       it('handles save failure by showing a warning, but still allows another save', async () => {
@@ -308,27 +370,22 @@ describe('Lens App', () => {
         const instance = mount(<App {...args} />);
 
         const onChange = frame.mount.mock.calls[0][1].onChange;
-        onChange({ indexPatternTitles: [], doc: ({ id: undefined } as unknown) as Document });
+        onChange({ filterableIndexPatterns: [], doc: ({ id: undefined } as unknown) as Document });
 
         instance.update();
 
-        instance
-          .find('[data-test-subj="lnsApp_saveButton"]')
-          .first()
-          .prop('onClick')!({} as React.MouseEvent);
+        act(() => {
+          getButton(instance).run(instance.getDOMNode());
+        });
 
+        await waitForPromises();
         await waitForPromises();
 
         expect(args.core.notifications.toasts.addDanger).toHaveBeenCalled();
         expect(args.redirectTo).not.toHaveBeenCalled();
         await waitForPromises();
 
-        expect(
-          instance
-            .find('[data-test-subj="lnsApp_saveButton"]')
-            .first()
-            .prop('disabled')
-        ).toEqual(false);
+        expect(getButton(instance).disableButton).toEqual(false);
       });
     });
   });
@@ -340,10 +397,8 @@ describe('Lens App', () => {
 
       mount(<App {...args} />);
 
-      expect(QueryBarTopRow).toHaveBeenCalledWith(
+      expect(TopNavMenu).toHaveBeenCalledWith(
         expect.objectContaining({
-          dateRangeFrom: 'now-7d',
-          dateRangeTo: 'now',
           query: { query: '', language: 'kuery' },
         }),
         {}
@@ -357,13 +412,13 @@ describe('Lens App', () => {
       );
     });
 
-    it('updates the index patterns when the editor frame is changed', () => {
+    it('updates the index patterns when the editor frame is changed', async () => {
       const args = makeDefaultArgs();
       args.editorFrame = frame;
 
       const instance = mount(<App {...args} />);
 
-      expect(QueryBarTopRow).toHaveBeenCalledWith(
+      expect(TopNavMenu).toHaveBeenCalledWith(
         expect.objectContaining({
           indexPatterns: [],
         }),
@@ -372,40 +427,52 @@ describe('Lens App', () => {
 
       const onChange = frame.mount.mock.calls[0][1].onChange;
       onChange({
-        indexPatternTitles: ['newIndex'],
+        filterableIndexPatterns: [{ id: '1', title: 'newIndex' }],
         doc: ({ id: undefined } as unknown) as Document,
       });
 
+      await waitForPromises();
       instance.update();
 
-      expect(QueryBarTopRow).toHaveBeenCalledWith(
+      expect(TopNavMenu).toHaveBeenCalledWith(
         expect.objectContaining({
-          indexPatterns: ['newIndex'],
+          indexPatterns: [{ id: '1' }],
+        }),
+        {}
+      );
+
+      // Do it again to verify that the dirty checking is done right
+      onChange({
+        filterableIndexPatterns: [{ id: '2', title: 'second index' }],
+        doc: ({ id: undefined } as unknown) as Document,
+      });
+
+      await waitForPromises();
+      instance.update();
+
+      expect(TopNavMenu).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          indexPatterns: [{ id: '2' }],
         }),
         {}
       );
     });
 
-    it('updates the editor frame when the user changes query or time', () => {
+    it('updates the editor frame when the user changes query or time in the search bar', () => {
       const args = makeDefaultArgs();
       args.editorFrame = frame;
 
       const instance = mount(<App {...args} />);
 
-      instance
-        .find('[data-test-subj="lnsApp_queryBar"]')
-        .first()
-        .prop('onSubmit')!(({
+      instance.find(TopNavMenu).prop('onQuerySubmit')!({
         dateRange: { from: 'now-14d', to: 'now-7d' },
         query: { query: 'new', language: 'lucene' },
-      } as unknown) as React.FormEvent);
+      });
 
       instance.update();
 
-      expect(QueryBarTopRow).toHaveBeenCalledWith(
+      expect(TopNavMenu).toHaveBeenCalledWith(
         expect.objectContaining({
-          dateRangeFrom: 'now-14d',
-          dateRangeTo: 'now-7d',
           query: { query: 'new', language: 'lucene' },
         }),
         {}
@@ -418,6 +485,159 @@ describe('Lens App', () => {
         })
       );
     });
+
+    it('updates the filters when the user changes them', () => {
+      const args = makeDefaultArgs();
+      args.editorFrame = frame;
+
+      const instance = mount(<App {...args} />);
+
+      args.data.filter.filterManager.setFilters([
+        buildExistsFilter({ name: 'myfield' }, { id: 'index1' }),
+      ]);
+
+      instance.update();
+
+      expect(frame.mount).toHaveBeenCalledWith(
+        expect.any(Element),
+        expect.objectContaining({
+          filters: [buildExistsFilter({ name: 'myfield' }, { id: 'index1' })],
+        })
+      );
+    });
+  });
+
+  describe('saved query handling', () => {
+    it('does not allow saving when the user is missing the saveQuery permission', () => {
+      const args = makeDefaultArgs();
+      args.core.application = {
+        ...args.core.application,
+        capabilities: {
+          ...args.core.application.capabilities,
+          lens: { save: false, saveQuery: false, show: true },
+        },
+      };
+
+      mount(<App {...args} />);
+
+      expect(TopNavMenu).toHaveBeenCalledWith(
+        expect.objectContaining({ showSaveQuery: false }),
+        {}
+      );
+    });
+
+    it('persists the saved query ID when the query is saved', () => {
+      const args = makeDefaultArgs();
+      args.editorFrame = frame;
+
+      const instance = mount(<App {...args} />);
+
+      expect(TopNavMenu).toHaveBeenCalledWith(
+        expect.objectContaining({
+          showSaveQuery: true,
+          savedQuery: undefined,
+          onSaved: expect.any(Function),
+          onSavedQueryUpdated: expect.any(Function),
+          onClearSavedQuery: expect.any(Function),
+        }),
+        {}
+      );
+
+      act(() => {
+        instance.find(TopNavMenu).prop('onSaved')!({
+          id: '1',
+          attributes: {
+            title: '',
+            description: '',
+            query: { query: '', language: 'lucene' },
+          },
+        });
+      });
+
+      expect(TopNavMenu).toHaveBeenCalledWith(
+        expect.objectContaining({
+          savedQuery: {
+            id: '1',
+            attributes: {
+              title: '',
+              description: '',
+              query: { query: '', language: 'lucene' },
+            },
+          },
+        }),
+        {}
+      );
+    });
+
+    it('changes the saved query ID when the query is updated', () => {
+      const args = makeDefaultArgs();
+      args.editorFrame = frame;
+
+      const instance = mount(<App {...args} />);
+
+      act(() => {
+        instance.find(TopNavMenu).prop('onSaved')!({
+          id: '1',
+          attributes: {
+            title: '',
+            description: '',
+            query: { query: '', language: 'lucene' },
+          },
+        });
+      });
+
+      act(() => {
+        instance.find(TopNavMenu).prop('onSavedQueryUpdated')!({
+          id: '2',
+          attributes: {
+            title: 'new title',
+            description: '',
+            query: { query: '', language: 'lucene' },
+          },
+        });
+      });
+
+      expect(TopNavMenu).toHaveBeenCalledWith(
+        expect.objectContaining({
+          savedQuery: {
+            id: '2',
+            attributes: {
+              title: 'new title',
+              description: '',
+              query: { query: '', language: 'lucene' },
+            },
+          },
+        }),
+        {}
+      );
+    });
+
+    it('clears all existing filters when the active saved query is cleared', () => {
+      const args = makeDefaultArgs();
+      args.editorFrame = frame;
+
+      const instance = mount(<App {...args} />);
+
+      instance.find(TopNavMenu).prop('onQuerySubmit')!({
+        dateRange: { from: 'now-14d', to: 'now-7d' },
+        query: { query: 'new', language: 'lucene' },
+      });
+
+      args.data.filter.filterManager.setFilters([
+        buildExistsFilter({ name: 'myfield' }, { id: 'index1' }),
+      ]);
+      instance.update();
+
+      instance.find(TopNavMenu).prop('onClearSavedQuery')!();
+      instance.update();
+
+      expect(frame.mount).toHaveBeenLastCalledWith(
+        expect.any(Element),
+        expect.objectContaining({
+          filters: [],
+        })
+      );
+    });
   });
 
   it('displays errors from the frame in a toast', () => {
diff --git a/x-pack/legacy/plugins/lens/public/app_plugin/app.tsx b/x-pack/legacy/plugins/lens/public/app_plugin/app.tsx
index 3e157fc394d309..3ee901d201aa5c 100644
--- a/x-pack/legacy/plugins/lens/public/app_plugin/app.tsx
+++ b/x-pack/legacy/plugins/lens/public/app_plugin/app.tsx
@@ -8,11 +8,17 @@ import _ from 'lodash';
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { I18nProvider } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
-import { EuiLink, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { Storage } from 'ui/storage';
-import { CoreStart } from 'src/core/public';
-import { Query } from '../../../../../../src/legacy/core_plugins/data/public';
-import { QueryBarTopRow } from '../../../../../../src/legacy/core_plugins/data/public/query/query_bar';
+import { CoreStart, NotificationsStart } from 'src/core/public';
+import {
+  DataStart,
+  IndexPattern as IndexPatternInstance,
+  IndexPatterns as IndexPatternsService,
+  SavedQuery,
+  Query,
+} from 'src/legacy/core_plugins/data/public';
+import { Filter } from '@kbn/es-query';
+import { TopNavMenu } from '../../../../../../src/legacy/core_plugins/kibana_react/public';
 import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public';
 import { Document, SavedObjectStore } from '../persistence';
 import { EditorFrameInstance } from '../types';
@@ -21,36 +27,22 @@ import { NativeRenderer } from '../native_renderer';
 interface State {
   isLoading: boolean;
   isDirty: boolean;
+  indexPatternsForTopNav: IndexPatternInstance[];
+  persistedDoc?: Document;
+
+  // Properties needed to interface with TopNav
   dateRange: {
     fromDate: string;
     toDate: string;
   };
   query: Query;
-  indexPatternTitles: string[];
-  persistedDoc?: Document;
-  localQueryBarState: {
-    query?: Query;
-    dateRange?: {
-      from: string;
-      to: string;
-    };
-  };
-}
-
-function isLocalStateDirty(
-  localState: State['localQueryBarState'],
-  query: Query,
-  dateRange: State['dateRange']
-) {
-  return Boolean(
-    (localState.query && query && localState.query.query !== query.query) ||
-      (localState.dateRange && dateRange.fromDate !== localState.dateRange.from) ||
-      (localState.dateRange && dateRange.toDate !== localState.dateRange.to)
-  );
+  filters: Filter[];
+  savedQuery?: SavedQuery;
 }
 
 export function App({
   editorFrame,
+  data,
   core,
   store,
   docId,
@@ -59,6 +51,7 @@ export function App({
 }: {
   editorFrame: EditorFrameInstance;
   core: CoreStart;
+  data: DataStart;
   store: Storage;
   docId?: string;
   docStorage: SavedObjectStore;
@@ -71,23 +64,29 @@ export function App({
   const [state, setState] = useState<State>({
     isLoading: !!docId,
     isDirty: false,
+    indexPatternsForTopNav: [],
+
     query: { query: '', language },
     dateRange: {
       fromDate: timeDefaults.from,
       toDate: timeDefaults.to,
     },
-    indexPatternTitles: [],
-    localQueryBarState: {
-      query: { query: '', language },
-      dateRange: {
-        from: timeDefaults.from,
-        to: timeDefaults.to,
-      },
-    },
+    filters: [],
   });
 
   const lastKnownDocRef = useRef<Document | undefined>(undefined);
 
+  useEffect(() => {
+    const subscription = data.filter.filterManager.getUpdates$().subscribe({
+      next: () => {
+        setState(s => ({ ...s, filters: data.filter.filterManager.getFilters() }));
+      },
+    });
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, []);
+
   // Sync Kibana breadcrumbs any time the saved document's title changes
   useEffect(() => {
     core.chrome.setBreadcrumbs([
@@ -107,26 +106,34 @@ export function App({
 
   useEffect(() => {
     if (docId && (!state.persistedDoc || state.persistedDoc.id !== docId)) {
-      setState({ ...state, isLoading: true });
+      setState(s => ({ ...s, isLoading: true }));
       docStorage
         .load(docId)
         .then(doc => {
-          setState({
-            ...state,
-            isLoading: false,
-            persistedDoc: doc,
-            query: doc.state.query,
-            localQueryBarState: {
-              ...state.localQueryBarState,
-              query: doc.state.query,
-            },
-            indexPatternTitles: doc.state.datasourceMetaData.filterableIndexPatterns.map(
-              ({ title }) => title
-            ),
-          });
+          getAllIndexPatterns(
+            doc.state.datasourceMetaData.filterableIndexPatterns,
+            data.indexPatterns.indexPatterns,
+            core.notifications
+          )
+            .then(indexPatterns => {
+              setState(s => ({
+                ...s,
+                isLoading: false,
+                persistedDoc: doc,
+                query: doc.state.query,
+                filters: doc.state.filters,
+                dateRange: doc.state.dateRange || s.dateRange,
+                indexPatternsForTopNav: indexPatterns,
+              }));
+            })
+            .catch(() => {
+              setState(s => ({ ...s, isLoading: false }));
+
+              redirectTo();
+            });
         })
         .catch(() => {
-          setState({ ...state, isLoading: false });
+          setState(s => ({ ...s, isLoading: false }));
 
           core.notifications.toasts.addDanger(
             i18n.translate('xpack.lens.editorFrame.docLoadingError', {
@@ -142,7 +149,7 @@ export function App({
   // Can save if the frame has told us what it has, and there is either:
   // a) No saved doc
   // b) A saved doc that differs from the frame state
-  const isSaveable = state.isDirty;
+  const isSaveable = state.isDirty && (core.application.capabilities.lens.save as boolean);
 
   const onError = useCallback(
     (e: { message: string }) =>
@@ -156,86 +163,102 @@ export function App({
     <I18nProvider>
       <KibanaContextProvider
         services={{
-          uiSettings: core.uiSettings,
-          savedObjects: core.savedObjects,
-          notifications: core.notifications,
-          http: core.http,
+          appName: 'lens',
+          store,
+          ...core,
         }}
       >
         <div className="lnsApp">
           <div className="lnsApp__header">
-            <nav>
-              <EuiFlexGroup>
-                <EuiFlexItem grow={false}>
-                  <EuiLink
-                    data-test-subj="lnsApp_saveButton"
-                    onClick={() => {
-                      if (isSaveable && lastKnownDocRef.current) {
-                        docStorage
-                          .save(lastKnownDocRef.current)
-                          .then(({ id }) => {
-                            // Prevents unnecessary network request and disables save button
-                            const newDoc = { ...lastKnownDocRef.current!, id };
-                            setState({
-                              ...state,
-                              isDirty: false,
-                              persistedDoc: newDoc,
-                            });
-                            if (docId !== id) {
-                              redirectTo(id);
-                            }
-                          })
-                          .catch(reason => {
-                            core.notifications.toasts.addDanger(
-                              i18n.translate('xpack.lens.editorFrame.docSavingError', {
-                                defaultMessage: 'Error saving document {reason}',
-                                values: { reason },
-                              })
-                            );
-                          });
-                      }
-                    }}
-                    color={isSaveable ? 'primary' : 'subdued'}
-                    disabled={!isSaveable}
-                  >
-                    {i18n.translate('xpack.lens.editorFrame.save', {
-                      defaultMessage: 'Save',
-                    })}
-                  </EuiLink>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </nav>
-            <QueryBarTopRow
-              data-test-subj="lnsApp_queryBar"
+            <TopNavMenu
+              config={[
+                {
+                  label: i18n.translate('xpack.lens.editorFrame.save', {
+                    defaultMessage: 'Save',
+                  }),
+                  run: () => {
+                    if (isSaveable && lastKnownDocRef.current) {
+                      docStorage
+                        .save(lastKnownDocRef.current)
+                        .then(({ id }) => {
+                          // Prevents unnecessary network request and disables save button
+                          const newDoc = { ...lastKnownDocRef.current!, id };
+                          setState(s => ({
+                            ...s,
+                            isDirty: false,
+                            persistedDoc: newDoc,
+                          }));
+                          if (docId !== id) {
+                            redirectTo(id);
+                          }
+                        })
+                        .catch(() => {
+                          core.notifications.toasts.addDanger(
+                            i18n.translate('xpack.lens.editorFrame.docSavingError', {
+                              defaultMessage: 'Error saving document',
+                            })
+                          );
+                        });
+                    }
+                  },
+                  testId: 'lnsApp_saveButton',
+                  disableButton: !isSaveable,
+                },
+              ]}
+              data-test-subj="lnsApp_topNav"
               screenTitle={'lens'}
-              onSubmit={payload => {
+              onQuerySubmit={payload => {
                 const { dateRange, query } = payload;
-                setState({
-                  ...state,
+                setState(s => ({
+                  ...s,
                   dateRange: {
                     fromDate: dateRange.from,
                     toDate: dateRange.to,
                   },
-                  query: query || state.query,
-                  localQueryBarState: payload,
-                });
-              }}
-              onChange={localQueryBarState => {
-                setState({ ...state, localQueryBarState });
+                  query: query || s.query,
+                }));
               }}
-              isDirty={isLocalStateDirty(state.localQueryBarState, state.query, state.dateRange)}
               appName={'lens'}
-              indexPatterns={state.indexPatternTitles}
-              store={store}
+              indexPatterns={state.indexPatternsForTopNav}
+              showSearchBar={true}
               showDatePicker={true}
-              showQueryInput={true}
-              query={state.localQueryBarState.query}
-              dateRangeFrom={
-                state.localQueryBarState.dateRange && state.localQueryBarState.dateRange.from
-              }
-              dateRangeTo={
-                state.localQueryBarState.dateRange && state.localQueryBarState.dateRange.to
-              }
+              showQueryBar={true}
+              showFilterBar={true}
+              showSaveQuery={core.application.capabilities.lens.saveQuery as boolean}
+              savedQuery={state.savedQuery}
+              onSaved={savedQuery => {
+                setState(s => ({ ...s, savedQuery }));
+              }}
+              onSavedQueryUpdated={savedQuery => {
+                data.filter.filterManager.setFilters(
+                  savedQuery.attributes.filters || state.filters
+                );
+                setState(s => ({
+                  ...s,
+                  savedQuery: { ...savedQuery }, // Shallow query for reference issues
+                  dateRange: savedQuery.attributes.timefilter
+                    ? {
+                        fromDate: savedQuery.attributes.timefilter.from,
+                        toDate: savedQuery.attributes.timefilter.to,
+                      }
+                    : s.dateRange,
+                }));
+              }}
+              onClearSavedQuery={() => {
+                data.filter.filterManager.removeAll();
+                setState(s => ({
+                  ...s,
+                  savedQuery: undefined,
+                  filters: [],
+                  query: {
+                    query: '',
+                    language:
+                      store.get('kibana.userQueryLanguage') ||
+                      core.uiSettings.get('search:queryLanguage'),
+                  },
+                }));
+              }}
+              query={state.query}
             />
           </div>
 
@@ -246,22 +269,35 @@ export function App({
               nativeProps={{
                 dateRange: state.dateRange,
                 query: state.query,
+                filters: state.filters,
+                savedQuery: state.savedQuery,
                 doc: state.persistedDoc,
                 onError,
-                onChange: ({ indexPatternTitles, doc }) => {
-                  const indexPatternChange = !_.isEqual(
-                    state.indexPatternTitles,
-                    indexPatternTitles
-                  );
-                  const docChange = !_.isEqual(state.persistedDoc, doc);
-                  if (indexPatternChange || docChange) {
-                    setState({
-                      ...state,
-                      indexPatternTitles,
-                      isDirty: docChange,
+                onChange: ({ filterableIndexPatterns, doc }) => {
+                  lastKnownDocRef.current = doc;
+
+                  if (!_.isEqual(state.persistedDoc, doc)) {
+                    setState(s => ({ ...s, isDirty: true }));
+                  }
+
+                  // Update the cached index patterns if the user made a change to any of them
+                  if (
+                    state.indexPatternsForTopNav.length !== filterableIndexPatterns.length ||
+                    filterableIndexPatterns.find(
+                      ({ id }) =>
+                        !state.indexPatternsForTopNav.find(indexPattern => indexPattern.id === id)
+                    )
+                  ) {
+                    getAllIndexPatterns(
+                      filterableIndexPatterns,
+                      data.indexPatterns.indexPatterns,
+                      core.notifications
+                    ).then(indexPatterns => {
+                      if (indexPatterns) {
+                        setState(s => ({ ...s, indexPatternsForTopNav: indexPatterns }));
+                      }
                     });
                   }
-                  lastKnownDocRef.current = doc;
                 },
               }}
             />
@@ -271,3 +307,21 @@ export function App({
     </I18nProvider>
   );
 }
+
+export async function getAllIndexPatterns(
+  ids: Array<{ id: string }>,
+  indexPatternsService: IndexPatternsService,
+  notifications: NotificationsStart
+): Promise<IndexPatternInstance[]> {
+  try {
+    return await Promise.all(ids.map(({ id }) => indexPatternsService.get(id)));
+  } catch (e) {
+    notifications.toasts.addDanger(
+      i18n.translate('xpack.lens.editorFrame.indexPatternLoadingError', {
+        defaultMessage: 'Error loading index patterns',
+      })
+    );
+
+    throw new Error(e);
+  }
+}
diff --git a/x-pack/legacy/plugins/lens/public/app_plugin/plugin.tsx b/x-pack/legacy/plugins/lens/public/app_plugin/plugin.tsx
index 9504e0b6e17522..3b3b12533d74bc 100644
--- a/x-pack/legacy/plugins/lens/public/app_plugin/plugin.tsx
+++ b/x-pack/legacy/plugins/lens/public/app_plugin/plugin.tsx
@@ -11,6 +11,8 @@ import chrome from 'ui/chrome';
 import { Storage } from 'ui/storage';
 import { CoreSetup, CoreStart } from 'src/core/public';
 import { npSetup, npStart } from 'ui/new_platform';
+import { DataStart } from '../../../../../../src/legacy/core_plugins/data/public';
+import { start as dataStart } from '../../../../../../src/legacy/core_plugins/data/public/legacy';
 import { editorFrameSetup, editorFrameStart, editorFrameStop } from '../editor_frame_plugin';
 import { indexPatternDatasourceSetup, indexPatternDatasourceStop } from '../indexpattern_plugin';
 import { SavedObjectIndexStore } from '../persistence';
@@ -23,13 +25,16 @@ import {
 import { App } from './app';
 import { EditorFrameInstance } from '../types';
 
+export interface LensPluginStartDependencies {
+  data: DataStart;
+}
 export class AppPlugin {
   private instance: EditorFrameInstance | null = null;
   private store: SavedObjectIndexStore | null = null;
 
   constructor() {}
 
-  setup(core: CoreSetup) {
+  setup(core: CoreSetup, plugins: {}) {
     // TODO: These plugins should not be called from the top level, but since this is the
     // entry point to the app we have no choice until the new platform is ready
     const indexPattern = indexPatternDatasourceSetup();
@@ -39,13 +44,13 @@ export class AppPlugin {
     const editorFrameSetupInterface = editorFrameSetup();
     this.store = new SavedObjectIndexStore(chrome!.getSavedObjectsClient());
 
-    editorFrameSetupInterface.registerDatasource('indexpattern', indexPattern);
     editorFrameSetupInterface.registerVisualization(xyVisualization);
     editorFrameSetupInterface.registerVisualization(datatableVisualization);
     editorFrameSetupInterface.registerVisualization(metricVisualization);
+    editorFrameSetupInterface.registerDatasource('indexpattern', indexPattern);
   }
 
-  start(core: CoreStart) {
+  start(core: CoreStart, { data }: LensPluginStartDependencies) {
     if (this.store === null) {
       throw new Error('Start lifecycle called before setup lifecycle');
     }
@@ -60,6 +65,7 @@ export class AppPlugin {
       return (
         <App
           core={core}
+          data={data}
           editorFrame={this.instance!}
           store={new Storage(localStorage)}
           docId={routeProps.match.params.id}
@@ -108,6 +114,6 @@ export class AppPlugin {
 
 const app = new AppPlugin();
 
-export const appSetup = () => app.setup(npSetup.core);
-export const appStart = () => app.start(npStart.core);
+export const appSetup = () => app.setup(npSetup.core, {});
+export const appStart = () => app.start(npStart.core, { data: dataStart });
 export const appStop = () => app.stop();
diff --git a/x-pack/legacy/plugins/lens/public/assets/chart_area.svg b/x-pack/legacy/plugins/lens/public/assets/chart_area.svg
new file mode 100644
index 00000000000000..78f27300f90d3a
--- /dev/null
+++ b/x-pack/legacy/plugins/lens/public/assets/chart_area.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" viewBox="0 0 36 24">
+	<g fill="none" fill-rule="evenodd">
+		<path fill="#00B3A4" fill-rule="nonzero" d="M33,7 L33,22 C33,22.5522847 32.5522847,23 32,23 L4,23 C3.44771525,23 3,22.5522847 3,22 L3,20 C4,20 6.5,16 9,16 C11.5,16 14,19 15,19 C16,19 18.2304686,12.0056015 20.8652343,12.0028008 C23.5,12 26,12 27,12 C28,12 30,7 33,7 Z" />
+		<path fill="#69707D" fill-rule="nonzero" d="M9,2 C12,2 14,8 15,8 C16,8 18.5,5 21,5 C22.6666667,5 23.9443333,7.333 24.833,11.999 L25.1415524,12.0001851 C24.1293204,12.0004181 22.8717636,12.0009441 21.5486098,12.0021318 L20.8652343,12.0028008 C18.2304686,12.0056015 16,19 15,19 C14,19 11.5,16 9,16 C6.5,16 4,20 3,20 L3,20 L3,8 C4,6.5 6,2 9,2 Z" />
+	</g>
+</svg>
diff --git a/x-pack/legacy/plugins/lens/public/assets/chart_area_stacked.svg b/x-pack/legacy/plugins/lens/public/assets/chart_area_stacked.svg
new file mode 100644
index 00000000000000..2da6f38eaebfdb
--- /dev/null
+++ b/x-pack/legacy/plugins/lens/public/assets/chart_area_stacked.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" viewBox="0 0 36 24">
+  <g fill="none" fill-rule="evenodd">
+    <path fill="#00B3A4" fill-rule="nonzero" d="M2.99988386,16.213 L3.48350681,16.3040885 L4.29647446,16.4500441 L5.05893763,16.5788635 C6.77926265,16.8594426 8.08887915,17 9,17 C9.98588087,17 10.7120234,16.7494439 12.1658521,16.034061 L12.4472136,15.8944272 C13.8017766,15.2171457 14.3808318,15 15,15 C15.5073017,15 15.9876756,15.1457694 16.8897238,15.5709561 L18.0984543,16.1628004 C19.379759,16.7797847 20.0757367,17 21,17 C22.0276746,17 22.7508134,16.6510411 24.1188138,15.6560123 L25.0094553,14.9970972 C26.0333232,14.2521968 26.5335058,14 27,14 C27.5813134,14 28.2313712,14.1853896 29.5976083,14.7184403 L30.6984731,15.1540241 L31.2658691,15.3712127 C31.9862357,15.6400999 32.5222061,15.8086684 33.0013768,15.9027957 L33,22 C33,22.5522847 32.5522847,23 32,23 L4,23 C3.44771525,23 2.99988386,22.5522847 2.99988386,22 L2.99988386,16.213 Z"/>
+    <path fill="#69707D" fill-rule="nonzero" d="M27,2 C28.3333333,2 30.3333333,3 33,5 L33.00068,13.8421016 L32.6757803,13.7445294 C32.3298316,13.6337324 31.9168942,13.4822979 31.4023917,13.2815597 L30.3015269,12.8459759 L29.7341309,12.6287873 L29.1977351,12.4356139 C28.276898,12.1184693 27.6761464,12 27,12 C25.9723254,12 25.2491866,12.3489589 23.8811862,13.3439877 L22.9905447,14.0029028 C21.9666768,14.7478032 21.4664942,15 21,15 C20.4926983,15 20.0123244,14.8542306 19.1102762,14.4290439 L17.9015457,13.8371996 C16.620241,13.2202153 15.9242633,13 15,13 C14.0141191,13 13.2879766,13.2505561 11.8341479,13.965939 L11.5527864,14.1055728 C10.1982234,14.7828543 9.61916824,15 9,15 L8.66631874,14.9932033 C7.48347119,14.9479299 5.58607425,14.6764419 3.00069957,14.1775737 L3,10 C5,10 7.66666667,11 9,11 C11,11 13,7 15,7 C17,7 19,8 21,8 C23,8 25,2 27,2 Z"/>
+  </g>
+</svg>
diff --git a/x-pack/legacy/plugins/lens/public/assets/chart_bar.svg b/x-pack/legacy/plugins/lens/public/assets/chart_bar.svg
new file mode 100644
index 00000000000000..a0dbc9dca9b57b
--- /dev/null
+++ b/x-pack/legacy/plugins/lens/public/assets/chart_bar.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" viewBox="0 0 36 24">
+  <g fill="none" fill-rule="evenodd">
+    <path fill="#69707D" fill-rule="nonzero" d="M8,8 C8.55228,8 9,8.44772 9,9 L9,22 C9,22.5523 8.55228,23 8,23 L4,23 C3.44772,23 3,22.5523 3,22 L3,9 C3,8.44772 3.44772,8 4,8 L8,8 Z M24,1 C24.5523,1 25,1.44772 25,2 L25,22 C25,22.5523 24.5523,23 24,23 L20,23 C19.4477,23 19,22.5523 19,22 L19,2 C19,1.44772 19.4477,1 20,1 L24,1 Z"/>
+    <path fill="#00B3A4" fill-rule="nonzero" d="M16,12 C16.5523,12 17,12.4477 17,13 L17,22 C17,22.5523 16.5523,23 16,23 L12,23 C11.4477,23 11,22.5523 11,22 L11,13 C11,12.4477 11.4477,12 12,12 L16,12 Z M32,5 C32.5523,5 33,5.44772 33,6 L33,22 C33,22.5523 32.5523,23 32,23 L28,23 C27.4477,23 27,22.5523 27,22 L27,6 C27,5.44772 27.4477,5 28,5 L32,5 Z"/>
+  </g>
+</svg>
diff --git a/x-pack/legacy/plugins/lens/public/assets/chart_bar_horizontal.svg b/x-pack/legacy/plugins/lens/public/assets/chart_bar_horizontal.svg
new file mode 100644
index 00000000000000..4b934c99740d70
--- /dev/null
+++ b/x-pack/legacy/plugins/lens/public/assets/chart_bar_horizontal.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" viewBox="0 0 36 24">
+  <g fill="none" fill-rule="evenodd">
+    <path fill="#69707D" fill-rule="nonzero" d="M31,17 C31.5523,17 32,17.4477 32,18 L32,22 C32,22.5523 31.5523,23 31,23 L5,23 C4.44771,23 4,22.5523 4,22 L4,18 C4,17.4477 4.44772,17 5,17 L31,17 Z M26,1 C26.5523,1 27,1.44772 27,2 L27,6 C27,6.55228 26.5523,7 26,7 L5,7 C4.44772,7 4,6.55228 4,6 L4,2 C4,1.44772 4.44772,1 5,1 L26,1 Z"/>
+    <path fill="#00B3A4" fill-rule="nonzero" d="M4,10 C4,9.44772 4.44772,9 5,9 L20,9 C20.5523,9 21,9.44772 21,10 L21,14 C21,14.5523 20.5523,15 20,15 L5,15 C4.44772,15 4,14.5523 4,14 L4,10 Z"/>
+  </g>
+</svg>
diff --git a/x-pack/legacy/plugins/lens/public/assets/chart_bar_horizontal_stacked.svg b/x-pack/legacy/plugins/lens/public/assets/chart_bar_horizontal_stacked.svg
new file mode 100644
index 00000000000000..3b60d22868bbc5
--- /dev/null
+++ b/x-pack/legacy/plugins/lens/public/assets/chart_bar_horizontal_stacked.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" viewBox="0 0 36 24">
+  <g fill="none" fill-rule="evenodd">
+    <path fill="#69707D" fill-rule="nonzero" d="M22,17 L22,23 L5,23 C4.44771,23 4,22.5523 4,22 L4,18 C4,17.4477 4.44772,17 5,17 L22,17 Z M19,9 L19,15 L5.22222222,15 C4.54721333,15 4,14.5523 4,14 L4,10 C4,9.44772 4.54721333,9 5.22222222,9 L19,9 Z M20,1 L20,7 L5.04166667,7 C4.466375,7 4,6.55228 4,6 L4,2 C4,1.44772 4.466375,1 5.04166667,1 L20,1 Z"/>
+    <path fill="#00B3A4" fill-rule="nonzero" d="M31,17 C31.5523,17 32,17.4477 32,18 L32,22 C32,22.5523 31.5523,23 31,23 L24,23 L24,17 L31,17 Z M23.7777778,9 C24.4528111,9 25,9.44772 25,10 L25,14 C25,14.5523 24.4528111,15 23.7777778,15 L21,15 L21,9 L23.7777778,9 Z M26.9583333,1 C27.5336458,1 28,1.44772 28,2 L28,6 C28,6.55228 27.5336458,7 26.9583333,7 L22,7 L22,1 L26.9583333,1 Z"/>
+  </g>
+</svg>
diff --git a/x-pack/legacy/plugins/lens/public/assets/chart_bar_stacked.svg b/x-pack/legacy/plugins/lens/public/assets/chart_bar_stacked.svg
new file mode 100644
index 00000000000000..8b875af8a12d3b
--- /dev/null
+++ b/x-pack/legacy/plugins/lens/public/assets/chart_bar_stacked.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" viewBox="0 0 36 24">
+  <g fill="none" fill-rule="evenodd">
+    <path fill="#69707D" fill-rule="nonzero" d="M9,14 L9,22 C9,22.5523 8.55228,23 8,23 L4,23 C3.44772,23 3,22.5523 3,22 L3,14 L9,14 Z M17,10 L17,22 C17,22.5523 16.5523,23 16,23 L12,23 C11.4477,23 11,22.5523 11,22 L11,10 L17,10 Z M25,14 L25,22 C25,22.5523 24.5523,23 24,23 L20,23 C19.4477,23 19,22.5523 19,22 L19,14 L25,14 Z M33,15 L33,22 C33,22.5523 32.5523,23 32,23 L28,23 C27.4477,23 27,22.5523 27,22 L27,15 L33,15 Z"/>
+    <path fill="#00B3A4" fill-rule="nonzero" d="M32,2 C32.5523,2 33,2.44772 33,3 L33,13 L27,13 L27,3 C27,2.44772 27.4477,2 28,2 L32,2 Z M8,8 C8.55228,8 9,8.44772 9,9 L9,12 L3,12 L3,9 C3,8.44772 3.44772,8 4,8 L8,8 Z M24,4 C24.5523,4 25,4.44772 25,5 L25,12 L19,12 L19,5 C19,4.44772 19.4477,4 20,4 L24,4 Z M16,1 C16.5523,1 17,1.44772 17,2 L17,8 L11,8 L11,2 C11,1.44772 11.4477,1 12,1 L16,1 Z"/>
+  </g>
+</svg>
diff --git a/x-pack/legacy/plugins/lens/public/assets/chart_datatable.svg b/x-pack/legacy/plugins/lens/public/assets/chart_datatable.svg
new file mode 100644
index 00000000000000..eb479dfbd0ea7c
--- /dev/null
+++ b/x-pack/legacy/plugins/lens/public/assets/chart_datatable.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" viewBox="0 0 36 24">
+  <g fill="none" fill-rule="evenodd">
+    <path fill="#69707D" fill-rule="nonzero" d="M14,19 C14.5523,19 15,19.4477 15,20 L15,22 C15,22.5523 14.5523,23 14,23 L4,23 C3.44772,23 3,22.5523 3,22 L3,20 C3,19.4477 3.44772,19 4,19 L14,19 Z M14,13 C14.5523,13 15,13.4477 15,14 L15,16 C15,16.5523 14.5523,17 14,17 L4,17 C3.44772,17 3,16.5523 3,16 L3,14 C3,13.4477 3.44772,13 4,13 L14,13 Z M14,7 C14.5523,7 15,7.44772 15,8 L15,10 C15,10.5523 14.5523,11 14,11 L4,11 C3.44772,11 3,10.5523 3,10 L3,8 C3,7.44772 3.44772,7 4,7 L14,7 Z M32,1 C32.5523,1 33,1.44772 33,2 L33,4 C33,4.55228 32.5523,5 32,5 L4,5 C3.44772,5 3,4.55228 3,4 L3,2 C3,1.44772 3.44772,1 4,1 L32,1 Z"/>
+    <path fill="#00B3A4" fill-rule="nonzero" d="M23,19 C23.5523,19 24,19.4477 24,20 L24,22 C24,22.51285 23.613973,22.9355092 23.1166239,22.9932725 L23,23 L18,23 C17.4477,23 17,22.5523 17,22 L17,20 C17,19.4477 17.4477,19 18,19 L23,19 Z M32,19 C32.5523,19 33,19.4477 33,20 L33,22 C33,22.5523 32.5523,23 32,23 L27,23 C26.4477,23 26,22.5523 26,22 L26,20 C26,19.4477 26.4477,19 27,19 L32,19 Z M23,13 C23.5523,13 24,13.4477 24,14 L24,16 C24,16.51285 23.613973,16.9355092 23.1166239,16.9932725 L23,17 L18,17 C17.4477,17 17,16.5523 17,16 L17,14 C17,13.4477 17.4477,13 18,13 L23,13 Z M32,13 C32.5523,13 33,13.4477 33,14 L33,16 C33,16.5523 32.5523,17 32,17 L27,17 C26.4477,17 26,16.5523 26,16 L26,14 C26,13.4477 26.4477,13 27,13 L32,13 Z M23,7 C23.5523,7 24,7.44772 24,8 L24,10 C24,10.51285 23.613973,10.9355092 23.1166239,10.9932725 L23,11 L18,11 C17.4477,11 17,10.5523 17,10 L17,8 C17,7.44772 17.4477,7 18,7 L23,7 Z M32,7 C32.5523,7 33,7.44772 33,8 L33,10 C33,10.5523 32.5523,11 32,11 L27,11 C26.4477,11 26,10.5523 26,10 L26,8 C26,7.44772 26.4477,7 27,7 L32,7 Z"/>
+  </g>
+</svg>
diff --git a/x-pack/legacy/plugins/lens/public/assets/chart_line.svg b/x-pack/legacy/plugins/lens/public/assets/chart_line.svg
new file mode 100644
index 00000000000000..177e9994962109
--- /dev/null
+++ b/x-pack/legacy/plugins/lens/public/assets/chart_line.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" viewBox="0 0 36 24">
+  <g fill="none" fill-rule="evenodd">
+    <path fill="#69707D" fill-rule="nonzero" d="M26.4344877,17.4565047 C26.645018,18.0091467 26.8398529,18.4376454 27.0139445,18.7331648 L27.0872705,18.8516486 C27.125032,18.9094709 27.159269,18.9566974 27.1883422,18.9930202 C27.7077421,18.9539174 28.2572038,18.7447839 29.3175699,18.2223667 L29.5527864,18.1055728 C31.1982234,17.2828543 31.9525016,17 33,17 L33,19 C32.4926983,19 32.0123244,19.1457694 31.1102762,19.5709561 L29.9015457,20.1628004 C28.620241,20.7797847 27.9242633,21 27,21 L26.8258382,20.9949604 C25.574689,20.9192339 25.0213871,19.9585786 23.8322417,16.0017929 L25.9297735,16.0009939 C26.1091193,16.564215 26.2653634,17.0125534 26.4344877,17.4565047 Z M9,2 C10.2687578,2 10.9659083,2.68913749 12.4918637,4.93898384 L13.265899,6.08501911 L13.5378436,6.47209062 L13.7986997,6.82959667 C14.4170887,7.6577293 14.7864833,8 15,8 C15.4664942,8 15.9666768,7.74780319 16.9905447,7.00290285 L17.8811862,6.34398766 L18.3387795,6.01914366 C19.4235519,5.27168078 20.0932283,5 21,5 C22.3766521,5 22.9249023,5.86257993 24.1679983,9.99900565 L22.0705386,10 C21.891062,9.43630516 21.7347347,8.98770414 21.5655123,8.54349533 C21.3249062,7.91190445 21.1048003,7.44245987 20.9127295,7.1483514 L20.8617638,7.07355628 L20.8165496,7.01313294 C20.3652655,7.07768487 19.8294645,7.38913892 18.810379,8.14322338 L18.1188138,8.65601234 L17.6612205,8.98085634 C16.5764481,9.72831922 15.9067717,10 15,10 C13.7312422,10 13.0340917,9.31086251 11.5081363,7.06101616 L10.734101,5.91498089 L10.4621564,5.52790938 L10.2013003,5.17040333 C9.58291131,4.3422707 9.2135167,4 9,4 C8.70552018,4 8.11453538,4.65105416 6.9827601,6.32986537 L6.49186371,7.06101616 L6.16583621,7.53564558 C4.85949038,9.40917568 4.17477576,10 3,10 L3,8 C3.29447982,8 3.88546462,7.34894584 5.0172399,5.67013463 L5.50813629,4.93898384 L5.83416379,4.46435442 C7.14050962,2.59082432 7.82522424,2 9,2 Z"/>
+    <path fill="#00B3A4" fill-rule="nonzero" d="M3,22 C4.12292953,22 4.85242764,21.5230595 6.29512871,20.1146533 L7.05279708,19.365471 L7.39778355,19.0352763 C8.20887781,18.2755754 8.64742016,18 9,18 C9.46649419,18 9.96667676,18.2521968 10.9905447,18.9970972 L11.8811862,19.6560123 L12.3387795,19.9808563 C13.4235519,20.7283192 14.0932283,21 15,21 C16.3246632,21 16.9957891,20.227811 18.5460212,17.5561347 L19.1387229,16.5278934 L19.5237801,15.8818271 C20.3284171,14.5614459 20.7963671,14 21,14 L27,14 C28.3328787,14 28.9781636,13.205228 30.4516519,10.3241353 L31.1438791,8.95355008 L31.5024143,8.26452693 C32.3332975,6.69934793 32.8305201,6 33,6 L33,4 C31.6671213,4 31.0218364,4.79477202 29.5483481,7.67586473 L28.8561209,9.04644992 L28.4975857,9.73547307 C27.6667025,11.3006521 27.1694799,12 27,12 L21,12 C19.6753368,12 19.0042109,12.772189 17.4539788,15.4438653 L16.8612771,16.4721066 L16.4762199,17.1181729 C15.6715829,18.4385541 15.2036329,19 15,19 C14.5335058,19 14.0333232,18.7478032 13.0094553,18.0029028 L12.1188138,17.3439877 L11.6612205,17.0191437 C10.5764481,16.2716808 9.90677174,16 9,16 C7.87707047,16 7.14757236,16.4769405 5.70487129,17.8853467 L4.94720292,18.634529 L4.60221645,18.9647237 C3.79112219,19.7244246 3.35257984,20 3,20 L3,22 Z"/>
+  </g>
+</svg>
diff --git a/x-pack/legacy/plugins/lens/public/assets/chart_metric.svg b/x-pack/legacy/plugins/lens/public/assets/chart_metric.svg
new file mode 100644
index 00000000000000..d48264868f734f
--- /dev/null
+++ b/x-pack/legacy/plugins/lens/public/assets/chart_metric.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" viewBox="0 0 36 24">
+	<path fill="#00B3A4" fill-rule="nonzero" d="M28,1 C28.5522847,1 29,1.44771525 29,2 L29,16 C29,16.5522847 28.5522847,17 28,17 L8,17 C7.44771525,17 7,16.5522847 7,16 L7,2 C7,1.44771525 7.44771525,1 8,1 L28,1 Z M18.121739,4 C16.2349057,4 14.8565724,5.10741667 14.861239,6.60931667 C14.8565724,7.66445 15.5314057,8.54848333 16.534239,8.76711667 L16.534239,8.76711667 L16.534239,8.83365 L16.3790783,8.86464202 C15.3051301,9.11664291 14.4956154,10.0961758 14.5000179,11.2576667 C14.4954057,12.8403333 15.997239,14 18.121739,14 C20.227239,14 21.7339057,12.8403333 21.738739,11.2576667 C21.7339057,10.0408667 20.8355724,9.02376667 19.7044057,8.83365 L19.7044057,8.83365 L19.7044057,8.76711667 L19.8655411,8.72460142 C20.7621964,8.44972932 21.3729983,7.60583148 21.3774057,6.60931667 C21.372739,5.11216667 19.9944057,4 18.121739,4 Z M18.121739,9.54183333 C19.1579057,9.54183333 19.9184057,10.2072167 19.9279057,11.134 C19.9184057,12.0323333 19.210239,12.6406667 18.121739,12.6406667 C17.0190724,12.6406667 16.306239,12.0323333 16.315739,11.134 C16.306239,10.2024667 17.0714057,9.54183333 18.121739,9.54183333 Z M18.121739,5.37833333 C19.0295724,5.37833333 19.652239,5.93916667 19.661739,6.77566667 C19.652239,7.62643333 19.0105724,8.20626667 18.121739,8.20626667 C17.218739,8.20626667 16.5724057,7.62166667 16.5819057,6.77566667 C16.5724057,5.93916667 17.199739,5.37833333 18.121739,5.37833333 Z" />
+	<path fill="#69707D" d="M4,19 L32,19 C32.5522847,19 33,19.4477153 33,20 L33,22 C33,22.5522847 32.5522847,23 32,23 L4,23 C3.44771525,23 3,22.5522847 3,22 L3,20 C3,19.4477153 3.44771525,19 4,19 Z" />
+</svg>
diff --git a/x-pack/legacy/plugins/lens/public/assets/chart_mixed_xy.svg b/x-pack/legacy/plugins/lens/public/assets/chart_mixed_xy.svg
new file mode 100644
index 00000000000000..f7c78f3eb2ba8a
--- /dev/null
+++ b/x-pack/legacy/plugins/lens/public/assets/chart_mixed_xy.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" viewBox="0 0 36 24">
+  <g fill="none" fill-rule="evenodd">
+    <path fill="#00B3A4" fill-rule="nonzero" d="M27,17 L27.186529,16.9974776 L27.186529,16.9974776 L27.5306489,16.9780319 L27.5306489,16.9780319 L27.7970813,16.9480498 L27.7970813,16.9480498 L28.1314132,16.8902959 L28.1314132,16.8902959 L28.3240687,16.8467882 L28.3240687,16.8467882 L28.5741436,16.7795968 L28.5741436,16.7795968 L28.7972534,16.7101669 L28.7972534,16.7101669 L29.0118952,16.6357956 L29.0118952,16.6357956 L29.2206832,16.5573466 L29.2206832,16.5573466 L29.5257429,16.4328291 L29.5257429,16.4328291 C29.6917615,16.3625772 29.8659214,16.2847405 30.0504789,16.1988116 L30.3353955,16.0637856 L31.5366424,15.4755067 C31.9652048,15.2735009 32.2651595,15.1500775 32.5027091,15.079784 C32.6490036,15.0364082 32.7720846,15.0132176 32.8871051,15.0043333 L33,15 L33,22 C33,22.5522847 32.5522847,23 32,23 L4,23 C3.44771525,23 3,22.5522847 3,22 L3,20 C4,20 6.5,16 9,16 C11.5,16 14,19 15,19 C16,19 18.2304686,11.0056015 20.8652343,11.0028008 L22.032,11.001 L22.5729797,12.2063372 L22.8453722,12.8006363 L23.1353155,13.4131932 C23.6517923,14.4818141 24.0899456,15.2554854 24.5264765,15.8043369 C24.6066449,15.9049139 24.6868272,15.9982178 24.7674282,16.0843602 C24.8620797,16.185372 24.9556984,16.2752259 25.0500608,16.355767 L25.1925522,16.4698309 C25.4114165,16.6341602 25.6390246,16.7544067 25.8838085,16.8384272 C26.0902723,16.9092634 26.3087339,16.954332 26.5445339,16.9783817 L26.6855542,16.9901593 L26.6855542,16.9901593 L26.8388203,16.9975385 L27,17 Z M33,5 L33,11 L32.813471,11.0025224 L32.813471,11.0025224 L32.4693511,11.0219681 L32.4693511,11.0219681 L32.2029187,11.0519502 L32.2029187,11.0519502 L31.8715657,11.1090897 L31.8715657,11.1090897 L31.6759313,11.1532118 L31.6759313,11.1532118 L31.4258564,11.2204032 L31.4258564,11.2204032 L31.1218141,11.3168815 L31.1218141,11.3168815 L30.9881048,11.3642044 C30.8638886,11.4090134 30.7354373,11.4588632 30.6017511,11.5137699 L30.4742571,11.5671709 C30.3082385,11.6374228 30.1340786,11.7152595 29.9495211,11.8011884 L29.6646045,11.9362144 L28.4012468,12.5538016 L28.4012468,12.5538016 L28.0492427,12.712509 L28.0492427,12.712509 L27.8622668,12.7905874 L27.6054984,12.886256 L27.6054984,12.886256 L27.4284236,12.9397598 C27.3194005,12.758065 27.1915885,12.5277585 27.0479541,12.2534345 L26.8876454,11.9420304 L26.655,11.472 L26.6387264,11 L27,11 C28,11 30,5 33,5 Z"/>
+    <path fill="#69707D" fill-rule="nonzero" d="M33,14 C32.4926983,14 32.0123244,14.1457694 31.1102762,14.5709561 L29.9015457,15.1628004 C28.620241,15.7797847 27.9242633,16 27,16 C25.6159171,16 24.996673,15.1346903 23.4839445,11.7938531 L22.8470575,10.3738187 L22.5009848,9.62538829 L22.2884925,9.18043954 C21.57063,7.69807401 21.1257654,7 21,7 C20.5335058,7 20.0333232,7.25219681 19.0094553,7.99709715 L18.1188138,8.65601234 L17.6612205,8.98085634 C16.5764481,9.72831922 15.9067717,10 15,10 C13.7312422,10 13.0340917,9.31086251 11.5081363,7.06101616 L10.734101,5.91498089 L10.4621564,5.52790938 L10.2013003,5.17040333 C9.58291131,4.3422707 9.2135167,4 9,4 C8.70552018,4 8.11453538,4.65105416 6.9827601,6.32986537 L6.49186371,7.06101616 L6.16583621,7.53564558 C4.85949038,9.40917568 4.17477576,10 3,10 L3,8 C3.29447982,8 3.88546462,7.34894584 5.0172399,5.67013463 L5.50813629,4.93898384 L5.83416379,4.46435442 C7.14050962,2.59082432 7.82522424,2 9,2 C10.2687578,2 10.9659083,2.68913749 12.4918637,4.93898384 L13.265899,6.08501911 L13.5378436,6.47209062 L13.7986997,6.82959667 C14.4170887,7.6577293 14.7864833,8 15,8 C15.4664942,8 15.9666768,7.74780319 16.9905447,7.00290285 L17.8811862,6.34398766 L18.3387795,6.01914366 C19.4235519,5.27168078 20.0932283,5 21,5 C22.3840829,5 23.003327,5.86530972 24.5160555,9.20614691 L25.1529425,10.6261813 L25.4990152,11.3746117 L25.7115075,11.8195605 C26.42937,13.301926 26.8742346,14 27,14 C27.5073017,14 27.9876756,13.8542306 28.8897238,13.4290439 L30.0984543,12.8371996 C31.379759,12.2202153 32.0757367,12 33,12 L33,14 Z"/>
+    <path fill="#69707D" fill-rule="nonzero" d="M9,14 L9,21.8888889 C9,22.5025556 8.55228,23 8,23 L4,23 C3.44772,23 3,22.5025556 3,21.8888889 L3,14 C3,13.4477153 3.44771525,13 4,13 L8,13 C8.55228475,13 9,13.4477153 9,14 Z M17,13 L17,22 C17,22.5522847 16.5522847,23 16,23 L12,23 C11.4477153,23 11,22.5522847 11,22 L11,13 C11,12.4477153 11.4477153,12 12,12 L16,12 C16.5522847,12 17,12.4477153 17,13 Z M25,18 L25,22 C25,22.5522847 24.5522847,23 24,23 L20,23 C19.4477153,23 19,22.5522847 19,22 L19,18 C19,17.4477153 19.4477153,17 20,17 L24,17 C24.5522847,17 25,17.4477153 25,18 Z M33,20 L33,22 C33,22.5522847 32.5522847,23 32,23 L28,23 C27.4477153,23 27,22.5522847 27,22 L27,20 C27,19.4477153 27.4477153,19 28,19 L32,19 C32.5522847,19 33,19.4477153 33,20 Z"/>
+  </g>
+</svg>
diff --git a/x-pack/legacy/plugins/lens/public/assets/lens_app_graphic_dark_2x.png b/x-pack/legacy/plugins/lens/public/assets/lens_app_graphic_dark_2x.png
new file mode 100644
index 00000000000000..2c2c71b82180a7
Binary files /dev/null and b/x-pack/legacy/plugins/lens/public/assets/lens_app_graphic_dark_2x.png differ
diff --git a/x-pack/legacy/plugins/lens/public/assets/lens_app_graphic_light_2x.png b/x-pack/legacy/plugins/lens/public/assets/lens_app_graphic_light_2x.png
new file mode 100644
index 00000000000000..91a936f0cb1dd5
Binary files /dev/null and b/x-pack/legacy/plugins/lens/public/assets/lens_app_graphic_light_2x.png differ
diff --git a/x-pack/legacy/plugins/lens/public/datatable_visualization_plugin/visualization.test.tsx b/x-pack/legacy/plugins/lens/public/datatable_visualization_plugin/visualization.test.tsx
index 177dfc95770281..f649564b2231a3 100644
--- a/x-pack/legacy/plugins/lens/public/datatable_visualization_plugin/visualization.test.tsx
+++ b/x-pack/legacy/plugins/lens/public/datatable_visualization_plugin/visualization.test.tsx
@@ -27,6 +27,7 @@ function mockFrame(): FramePublicAPI {
       fromDate: 'now-7d',
       toDate: 'now',
     },
+    filters: [],
   };
 }
 
diff --git a/x-pack/legacy/plugins/lens/public/datatable_visualization_plugin/visualization.tsx b/x-pack/legacy/plugins/lens/public/datatable_visualization_plugin/visualization.tsx
index 27f59de2908bed..18a6d112e14d6d 100644
--- a/x-pack/legacy/plugins/lens/public/datatable_visualization_plugin/visualization.tsx
+++ b/x-pack/legacy/plugins/lens/public/datatable_visualization_plugin/visualization.tsx
@@ -19,6 +19,7 @@ import {
 } from '../types';
 import { generateId } from '../id_generator';
 import { NativeRenderer } from '../native_renderer';
+import chartTableSVG from '../assets/chart_datatable.svg';
 
 export interface LayerState {
   layerId: string;
@@ -97,17 +98,18 @@ export const datatableVisualization: Visualization<
     {
       id: 'lnsDatatable',
       icon: 'visTable',
+      largeIcon: chartTableSVG,
       label: i18n.translate('xpack.lens.datatable.label', {
-        defaultMessage: 'Datatable',
+        defaultMessage: 'Data table',
       }),
     },
   ],
 
   getDescription(state) {
     return {
-      icon: 'visTable',
+      icon: chartTableSVG,
       label: i18n.translate('xpack.lens.datatable.label', {
-        defaultMessage: 'Datatable',
+        defaultMessage: 'Data table',
       }),
     };
   },
@@ -168,7 +170,7 @@ export const datatableVisualization: Visualization<
             },
           ],
         },
-        previewIcon: 'visTable',
+        previewIcon: chartTableSVG,
         // dont show suggestions for reduced versions or single-line tables
         hide: table.changeType === 'reduced' || !table.isMultiRow,
       },
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/_chart_switch.scss b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/_chart_switch.scss
index 008b65d8f04188..d7efab2405f3f5 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/_chart_switch.scss
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/_chart_switch.scss
@@ -7,7 +7,18 @@
   }
 }
 
+.lnsChartSwitch__triggerButton {
+  @include euiTitle('xs');
+  line-height: $euiSizeXXL;
+}
+
 .lnsChartSwitch__summaryIcon {
   margin-right: $euiSizeS;
   transform: translateY(-2px);
 }
+
+// Targeting img as this won't target normal EuiIcon's only the custom svgs's
+img.lnsChartSwitch__chartIcon { // sass-lint:disable-line no-qualifying-elements
+  // The large icons aren't square so max out the width to fill the height
+  width: 100%;
+}
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/_frame_layout.scss b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/_frame_layout.scss
index 7e7c402bbc7235..e3b91ee0674c83 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/_frame_layout.scss
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/_frame_layout.scss
@@ -20,8 +20,9 @@
   min-width: $lnsPanelMinWidth + $euiSizeXL;
   overflow: hidden;
   // Leave out bottom padding so the suggestions scrollbar stays flush to window edge
+  // Leave out left padding so the left sidebar's focus states are visible outside of content bounds
   // This also means needing to add same amount of margin to page content and suggestion items
-  padding: $euiSize $euiSize 0;
+  padding: $euiSize $euiSize 0 0;
 
   &:first-child {
     padding-left: $euiSize;
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/_suggestion_panel.scss b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/_suggestion_panel.scss
index a44fe7ee68dd09..0e89bbe2da9688 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/_suggestion_panel.scss
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/_suggestion_panel.scss
@@ -36,9 +36,15 @@
   align-items: center;
   justify-content: center;
   padding: $euiSizeS;
+
+  // Targeting img as this won't target normal EuiIcon's only the custom svgs's
+  > img {
+    @include size($euiSize * 4);
+  }
 }
 
 .lnsSuggestionPanel__chartWrapper {
+  display: flex;
   height: $lnsSuggestionHeight - $euiSize;
   pointer-events: none;
   margin: 0 $euiSizeS;
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/chart_switch.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/chart_switch.tsx
index f53687e76e8191..1c94460034019b 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/chart_switch.tsx
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/chart_switch.tsx
@@ -12,7 +12,6 @@ import {
   EuiKeyPadMenu,
   EuiKeyPadMenuItemButton,
   EuiButtonEmpty,
-  EuiTitle,
 } from '@elastic/eui';
 import { flatten } from 'lodash';
 import { i18n } from '@kbn/i18n';
@@ -64,7 +63,7 @@ function VisualizationSummary(props: Props) {
   return (
     <>
       {description.icon && (
-        <EuiIcon className="lnsChartSwitch__summaryIcon" type={description.icon} />
+        <EuiIcon size="xl" className="lnsChartSwitch__summaryIcon" type={description.icon} />
       )}
       {description.label}
     </>
@@ -157,6 +156,7 @@ export function ChartSwitch(props: Props) {
           v.visualizationTypes.map(t => ({
             visualizationId: v.id,
             ...t,
+            icon: t.largeIcon || t.icon,
           }))
         )
       ).map(visualizationType => ({
@@ -178,23 +178,24 @@ export function ChartSwitch(props: Props) {
       ownFocus
       initialFocus=".lnsChartSwitch__popoverPanel"
       panelClassName="lnsChartSwitch__popoverPanel"
+      anchorClassName="eui-textTruncate"
       panelPaddingSize="s"
       button={
         <EuiButtonEmpty
-          size="xs"
+          className="lnsChartSwitch__triggerButton"
           onClick={() => setFlyoutOpen(!flyoutOpen)}
           data-test-subj="lnsChartSwitchPopover"
+          flush="left"
+          iconSide="right"
+          iconType="arrowDown"
+          color="text"
         >
-          (
-          {i18n.translate('xpack.lens.configPanel.changeVisualization', {
-            defaultMessage: 'change',
-          })}
-          )
+          <VisualizationSummary {...props} />
         </EuiButtonEmpty>
       }
       isOpen={flyoutOpen}
       closePopover={() => setFlyoutOpen(false)}
-      anchorPosition="leftUp"
+      anchorPosition="downLeft"
     >
       <EuiPopoverTitle>
         {i18n.translate('xpack.lens.configPanel.chooseVisualization', {
@@ -225,22 +226,14 @@ export function ChartSwitch(props: Props) {
             }
             betaBadgeIconType={v.selection.dataLoss !== 'nothing' ? 'alert' : undefined}
           >
-            <EuiIcon type={v.icon || 'empty'} size="l" />
+            <EuiIcon className="lnsChartSwitch__chartIcon" type={v.icon || 'empty'} size="l" />
           </EuiKeyPadMenuItemButton>
         ))}
       </EuiKeyPadMenu>
     </EuiPopover>
   );
 
-  return (
-    <div className="lnsChartSwitch__header">
-      <EuiTitle size="xs">
-        <h3>
-          <VisualizationSummary {...props} /> {popover}
-        </h3>
-      </EuiTitle>
-    </div>
-  );
+  return <div className="lnsChartSwitch__header">{popover}</div>;
 }
 
 function getTopSuggestion(
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/data_panel_wrapper.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/data_panel_wrapper.tsx
index 6229e558d1dab6..115e8cbf002c3b 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/data_panel_wrapper.tsx
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/data_panel_wrapper.tsx
@@ -6,6 +6,7 @@
 
 import React, { useMemo, memo, useContext, useState } from 'react';
 import { i18n } from '@kbn/i18n';
+import { Filter } from '@kbn/es-query';
 import { EuiPopover, EuiButtonIcon, EuiContextMenuPanel, EuiContextMenuItem } from '@elastic/eui';
 import { Query } from 'src/plugins/data/common';
 import { DatasourceDataPanelProps, Datasource } from '../../../public';
@@ -23,6 +24,7 @@ interface DataPanelWrapperProps {
   core: DatasourceDataPanelProps['core'];
   query: Query;
   dateRange: FramePublicAPI['dateRange'];
+  filters: Filter[];
 }
 
 export const DataPanelWrapper = memo((props: DataPanelWrapperProps) => {
@@ -45,6 +47,7 @@ export const DataPanelWrapper = memo((props: DataPanelWrapperProps) => {
     core: props.core,
     query: props.query,
     dateRange: props.dateRange,
+    filters: props.filters,
   };
 
   const [showDatasourceSwitcher, setDatasourceSwitcher] = useState(false);
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/editor_frame.test.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/editor_frame.test.tsx
index 0b4d7ba2175326..22766b86a4b153 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/editor_frame.test.tsx
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/editor_frame.test.tsx
@@ -4,8 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { ReactWrapper } from 'enzyme';
+import { EuiPanel, EuiToolTip } from '@elastic/eui';
 import { mountWithIntl as mount } from 'test_utils/enzyme_helpers';
 import { EditorFrame } from './editor_frame';
 import { Visualization, DatasourcePublicAPI, DatasourceSuggestion } from '../../types';
@@ -19,7 +20,7 @@ import {
 } from '../mocks';
 import { ExpressionRenderer } from 'src/legacy/core_plugins/expressions/public';
 import { DragDrop } from '../../drag_drop';
-import { EuiPanel, EuiToolTip } from '@elastic/eui';
+import { FrameLayout } from './frame_layout';
 
 // calling this function will wait for all pending Promises from mock
 // datasources to be processed by its callers.
@@ -48,6 +49,7 @@ function getDefaultProps() {
     onChange: jest.fn(),
     dateRange: { fromDate: '', toDate: '' },
     query: { query: '', language: 'lucene' },
+    filters: [],
     core: coreMock.createSetup(),
   };
 }
@@ -256,6 +258,7 @@ describe('editor_frame', () => {
         addNewLayer: expect.any(Function),
         removeLayers: expect.any(Function),
         query: { query: '', language: 'lucene' },
+        filters: [],
         dateRange: { fromDate: 'now-7d', toDate: 'now' },
       });
     });
@@ -409,56 +412,58 @@ describe('editor_frame', () => {
       instance.update();
 
       expect(instance.find(expressionRendererMock).prop('expression')).toMatchInlineSnapshot(`
-                Object {
-                  "chain": Array [
-                    Object {
-                      "arguments": Object {},
-                      "function": "kibana",
-                      "type": "function",
-                    },
-                    Object {
-                      "arguments": Object {
-                        "filters": Array [],
-                        "query": Array [
-                          "{\\"query\\":\\"\\",\\"language\\":\\"lucene\\"}",
-                        ],
-                        "timeRange": Array [
-                          "{\\"from\\":\\"\\",\\"to\\":\\"\\"}",
-                        ],
-                      },
-                      "function": "kibana_context",
-                      "type": "function",
-                    },
-                    Object {
-                      "arguments": Object {
-                        "layerIds": Array [
-                          "first",
-                        ],
-                        "tables": Array [
-                          Object {
-                            "chain": Array [
-                              Object {
-                                "arguments": Object {},
-                                "function": "datasource",
-                                "type": "function",
-                              },
-                            ],
-                            "type": "expression",
-                          },
-                        ],
+        Object {
+          "chain": Array [
+            Object {
+              "arguments": Object {},
+              "function": "kibana",
+              "type": "function",
+            },
+            Object {
+              "arguments": Object {
+                "filters": Array [
+                  "[]",
+                ],
+                "query": Array [
+                  "{\\"query\\":\\"\\",\\"language\\":\\"lucene\\"}",
+                ],
+                "timeRange": Array [
+                  "{\\"from\\":\\"\\",\\"to\\":\\"\\"}",
+                ],
+              },
+              "function": "kibana_context",
+              "type": "function",
+            },
+            Object {
+              "arguments": Object {
+                "layerIds": Array [
+                  "first",
+                ],
+                "tables": Array [
+                  Object {
+                    "chain": Array [
+                      Object {
+                        "arguments": Object {},
+                        "function": "datasource",
+                        "type": "function",
                       },
-                      "function": "lens_merge_tables",
-                      "type": "function",
-                    },
-                    Object {
-                      "arguments": Object {},
-                      "function": "vis",
-                      "type": "function",
-                    },
-                  ],
-                  "type": "expression",
-                }
-            `);
+                    ],
+                    "type": "expression",
+                  },
+                ],
+              },
+              "function": "lens_merge_tables",
+              "type": "function",
+            },
+            Object {
+              "arguments": Object {},
+              "function": "vis",
+              "type": "function",
+            },
+          ],
+          "type": "expression",
+        }
+      `);
     });
 
     it('should render individual expression for each given layer', async () => {
@@ -525,7 +530,9 @@ describe('editor_frame', () => {
             },
             Object {
               "arguments": Object {
-                "filters": Array [],
+                "filters": Array [
+                  "[]",
+                ],
                 "query": Array [
                   "{\\"query\\":\\"\\",\\"language\\":\\"lucene\\"}",
                 ],
@@ -1491,7 +1498,7 @@ describe('editor_frame', () => {
 
       expect(onChange).toHaveBeenCalledTimes(2);
       expect(onChange).toHaveBeenNthCalledWith(1, {
-        indexPatternTitles: ['resolved'],
+        filterableIndexPatterns: [{ id: '1', title: 'resolved' }],
         doc: {
           expression: '',
           id: undefined,
@@ -1501,6 +1508,7 @@ describe('editor_frame', () => {
             datasourceStates: { testDatasource: undefined },
             query: { query: '', language: 'lucene' },
             filters: [],
+            dateRange: { fromDate: '', toDate: '' },
           },
           title: 'New visualization',
           type: 'lens',
@@ -1508,7 +1516,7 @@ describe('editor_frame', () => {
         },
       });
       expect(onChange).toHaveBeenLastCalledWith({
-        indexPatternTitles: ['resolved'],
+        filterableIndexPatterns: [{ id: '1', title: 'resolved' }],
         doc: {
           expression: '',
           id: undefined,
@@ -1520,6 +1528,7 @@ describe('editor_frame', () => {
             datasourceStates: { testDatasource: undefined },
             query: { query: '', language: 'lucene' },
             filters: [],
+            dateRange: { fromDate: '', toDate: '' },
           },
           title: 'New visualization',
           type: 'lens',
@@ -1567,7 +1576,7 @@ describe('editor_frame', () => {
       await waitForPromises();
       expect(onChange).toHaveBeenCalledTimes(3);
       expect(onChange).toHaveBeenNthCalledWith(3, {
-        indexPatternTitles: [],
+        filterableIndexPatterns: [],
         doc: {
           expression: expect.stringContaining('vis "expression"'),
           id: undefined,
@@ -1577,6 +1586,7 @@ describe('editor_frame', () => {
             visualization: { initialState: true },
             query: { query: 'new query', language: 'lucene' },
             filters: [],
+            dateRange: { fromDate: '', toDate: '' },
           },
           title: 'New visualization',
           type: 'lens',
@@ -1584,5 +1594,44 @@ describe('editor_frame', () => {
         },
       });
     });
+
+    it('should call onChange when the datasource makes an internal state change', async () => {
+      const onChange = jest.fn();
+
+      mockDatasource.initialize.mockResolvedValue({});
+      mockDatasource.getLayers.mockReturnValue(['first']);
+      mockDatasource.getMetaData.mockReturnValue({
+        filterableIndexPatterns: [{ id: '1', title: 'resolved' }],
+      });
+      mockVisualization.initialize.mockReturnValue({ initialState: true });
+
+      act(() => {
+        instance = mount(
+          <EditorFrame
+            {...getDefaultProps()}
+            visualizationMap={{ testVis: mockVisualization }}
+            datasourceMap={{ testDatasource: mockDatasource }}
+            initialDatasourceId="testDatasource"
+            initialVisualizationId="testVis"
+            ExpressionRenderer={expressionRendererMock}
+            onChange={onChange}
+          />
+        );
+      });
+
+      await waitForPromises();
+      expect(onChange).toHaveBeenCalledTimes(2);
+
+      (instance.find(FrameLayout).prop('dataPanel') as ReactElement)!.props.dispatch({
+        type: 'UPDATE_DATASOURCE_STATE',
+        updater: () => ({
+          newState: true,
+        }),
+        datasourceId: 'testDatasource',
+      });
+      await waitForPromises();
+
+      expect(onChange).toHaveBeenCalledTimes(3);
+    });
   });
 });
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/editor_frame.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/editor_frame.tsx
index c0a29900151387..5d623fa86cd869 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/editor_frame.tsx
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/editor_frame.tsx
@@ -6,9 +6,16 @@
 
 import React, { useEffect, useReducer } from 'react';
 import { CoreSetup, CoreStart } from 'src/core/public';
-import { Query } from '../../../../../../../src/legacy/core_plugins/data/public';
+import { Filter } from '@kbn/es-query';
+import { Query, SavedQuery } from '../../../../../../../src/legacy/core_plugins/data/public';
 import { ExpressionRenderer } from '../../../../../../../src/legacy/core_plugins/expressions/public';
-import { Datasource, DatasourcePublicAPI, FramePublicAPI, Visualization } from '../../types';
+import {
+  Datasource,
+  DatasourcePublicAPI,
+  FramePublicAPI,
+  Visualization,
+  DatasourceMetaData,
+} from '../../types';
 import { reducer, getInitialState } from './state_management';
 import { DataPanelWrapper } from './data_panel_wrapper';
 import { ConfigPanelWrapper } from './config_panel_wrapper';
@@ -34,7 +41,12 @@ export interface EditorFrameProps {
     toDate: string;
   };
   query: Query;
-  onChange: (arg: { indexPatternTitles: string[]; doc: Document }) => void;
+  filters: Filter[];
+  savedQuery?: SavedQuery;
+  onChange: (arg: {
+    filterableIndexPatterns: DatasourceMetaData['filterableIndexPatterns'];
+    doc: Document;
+  }) => void;
 }
 
 export function EditorFrame(props: EditorFrameProps) {
@@ -98,6 +110,7 @@ export function EditorFrame(props: EditorFrameProps) {
     datasourceLayers,
     dateRange: props.dateRange,
     query: props.query,
+    filters: props.filters,
 
     addNewLayer() {
       const newLayerId = generateId();
@@ -170,7 +183,7 @@ export function EditorFrame(props: EditorFrameProps) {
       return;
     }
 
-    const indexPatternTitles: string[] = [];
+    const indexPatterns: DatasourceMetaData['filterableIndexPatterns'] = [];
     Object.entries(props.datasourceMap)
       .filter(([id, datasource]) => {
         const stateWrapper = state.datasourceStates[id];
@@ -181,10 +194,8 @@ export function EditorFrame(props: EditorFrameProps) {
         );
       })
       .forEach(([id, datasource]) => {
-        indexPatternTitles.push(
-          ...datasource
-            .getMetaData(state.datasourceStates[id].state)
-            .filterableIndexPatterns.map(pattern => pattern.title)
+        indexPatterns.push(
+          ...datasource.getMetaData(state.datasourceStates[id].state).filterableIndexPatterns
         );
       });
 
@@ -201,8 +212,16 @@ export function EditorFrame(props: EditorFrameProps) {
       framePublicAPI,
     });
 
-    props.onChange({ indexPatternTitles, doc });
-  }, [state.datasourceStates, state.visualization, props.query, props.dateRange, state.title]);
+    props.onChange({ filterableIndexPatterns: indexPatterns, doc });
+  }, [
+    state.datasourceStates,
+    state.visualization,
+    props.query,
+    props.dateRange,
+    props.filters,
+    props.savedQuery,
+    state.title,
+  ]);
 
   return (
     <FrameLayout
@@ -222,6 +241,7 @@ export function EditorFrame(props: EditorFrameProps) {
           core={props.core}
           query={props.query}
           dateRange={props.dateRange}
+          filters={props.filters}
         />
       }
       configPanel={
@@ -250,6 +270,7 @@ export function EditorFrame(props: EditorFrameProps) {
               visualizationMap={props.visualizationMap}
               dispatch={dispatch}
               ExpressionRenderer={props.ExpressionRenderer}
+              core={props.core}
             />
           </WorkspacePanelWrapper>
         )
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/expression_helpers.ts b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/expression_helpers.ts
index da7ddee67453e1..1ddfc54cc187b1 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/expression_helpers.ts
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/expression_helpers.ts
@@ -86,7 +86,7 @@ export function prependKibanaContext(
         arguments: {
           timeRange: timeRange ? [JSON.stringify(timeRange)] : [],
           query: query ? [JSON.stringify(query)] : [],
-          filters: filters ? [JSON.stringify(filters)] : [],
+          filters: [JSON.stringify(filters || [])],
         },
       },
       ...parsedExpression.chain,
@@ -121,13 +121,14 @@ export function buildExpression({
   const visualizationExpression = visualization.toExpression(visualizationState, framePublicAPI);
 
   const expressionContext = removeDateRange
-    ? { query: framePublicAPI.query }
+    ? { query: framePublicAPI.query, filters: framePublicAPI.filters }
     : {
         query: framePublicAPI.query,
         timeRange: {
           from: framePublicAPI.dateRange.fromDate,
           to: framePublicAPI.dateRange.toDate,
         },
+        filters: framePublicAPI.filters,
       };
 
   const completeExpression = prependDatasourceExpression(
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/save.test.ts b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/save.test.ts
index 6bfe8f70d93c47..b898d33f7a7b11 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/save.test.ts
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/save.test.ts
@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { buildExistsFilter } from '@kbn/es-query';
 import { getSavedObjectFormat, Props } from './save';
 import { createMockDatasource, createMockVisualization } from '../mocks';
 
@@ -36,6 +37,7 @@ describe('save editor frame state', () => {
       },
       query: { query: '', language: 'lucene' },
       dateRange: { fromDate: 'now-7d', toDate: 'now' },
+      filters: [buildExistsFilter({ name: '@timestamp' }, { id: 'indexpattern' })],
     },
   };
 
@@ -83,7 +85,13 @@ describe('save editor frame state', () => {
         },
         visualization: { things: '4_vis_persisted' },
         query: { query: '', language: 'lucene' },
-        filters: [],
+        filters: [
+          {
+            meta: { index: 'indexpattern' },
+            exists: { field: '@timestamp' },
+          },
+        ],
+        dateRange: { fromDate: 'now-7d', toDate: 'now' },
       },
       title: 'bbb',
       type: 'lens',
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/save.ts b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/save.ts
index 6c414d9866033c..fc567f2d5dab8c 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/save.ts
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/save.ts
@@ -58,7 +58,8 @@ export function getSavedObjectFormat({
       },
       visualization: visualization.getPersistableState(state.visualization.state),
       query: framePublicAPI.query,
-      filters: [], // TODO: Support filters
+      filters: framePublicAPI.filters,
+      dateRange: framePublicAPI.dateRange,
     },
   };
 }
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/state_management.test.ts b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/state_management.test.ts
index aa6d7ded87ed94..5168059a332589 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/state_management.test.ts
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/state_management.test.ts
@@ -26,6 +26,7 @@ describe('editor_frame state management', () => {
         core: coreMock.createSetup(),
         dateRange: { fromDate: 'now-7d', toDate: 'now' },
         query: { query: '', language: 'lucene' },
+        filters: [],
       };
     });
 
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_helpers.ts b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_helpers.ts
index 29db5f37a6436a..d3e768a1932dcf 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_helpers.ts
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_helpers.ts
@@ -6,6 +6,7 @@
 
 import _ from 'lodash';
 import { Ast } from '@kbn/interpreter/common';
+import { IconType } from '@elastic/eui/src/components/icon/icon';
 import {
   Visualization,
   Datasource,
@@ -25,7 +26,7 @@ export interface Suggestion {
   title: string;
   visualizationState: unknown;
   previewExpression?: Ast | string;
-  previewIcon: string;
+  previewIcon: IconType;
   hide?: boolean;
   changeType: TableChangeType;
 }
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_panel.test.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_panel.test.tsx
index 93283534e11867..8840f7dfd3b785 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_panel.test.tsx
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_panel.test.tsx
@@ -19,6 +19,7 @@ import { ExpressionRenderer } from '../../../../../../../src/legacy/core_plugins
 import { SuggestionPanel, SuggestionPanelProps } from './suggestion_panel';
 import { getSuggestions, Suggestion } from './suggestion_helpers';
 import { EuiIcon, EuiPanel, EuiToolTip } from '@elastic/eui';
+import chartTableSVG from '../../..assets/chart_datatable.svg';
 
 jest.mock('./suggestion_helpers');
 
@@ -279,7 +280,7 @@ describe('suggestion_panel', () => {
 
     expect(passedExpression).toMatchInlineSnapshot(`
       "kibana
-      | kibana_context timeRange=\\"{\\\\\\"from\\\\\\":\\\\\\"now-7d\\\\\\",\\\\\\"to\\\\\\":\\\\\\"now\\\\\\"}\\" query=\\"{\\\\\\"query\\\\\\":\\\\\\"\\\\\\",\\\\\\"language\\\\\\":\\\\\\"lucene\\\\\\"}\\" 
+      | kibana_context timeRange=\\"{\\\\\\"from\\\\\\":\\\\\\"now-7d\\\\\\",\\\\\\"to\\\\\\":\\\\\\"now\\\\\\"}\\" query=\\"{\\\\\\"query\\\\\\":\\\\\\"\\\\\\",\\\\\\"language\\\\\\":\\\\\\"lucene\\\\\\"}\\" filters=\\"[]\\"
       | lens_merge_tables layerIds=\\"first\\" tables={datasource_expression}
       | test
       | expression"
@@ -291,7 +292,7 @@ describe('suggestion_panel', () => {
     getSuggestionsMock.mockReturnValue([
       {
         datasourceState: {},
-        previewIcon: 'visTable',
+        previewIcon: chartTableSVG,
         score: 0.5,
         visualizationState: suggestion1State,
         visualizationId: 'vis',
@@ -319,6 +320,6 @@ describe('suggestion_panel', () => {
     const wrapper = mount(<SuggestionPanel {...defaultProps} />);
 
     expect(wrapper.find(EuiIcon)).toHaveLength(1);
-    expect(wrapper.find(EuiIcon).prop('type')).toEqual('visTable');
+    expect(wrapper.find(EuiIcon).prop('type')).toEqual(chartTableSVG);
   });
 });
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_panel.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_panel.tsx
index 0b252729a99667..de25c2f7f638b8 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_panel.tsx
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_panel.tsx
@@ -17,6 +17,7 @@ import {
   EuiFlexItem,
   EuiButtonEmpty,
 } from '@elastic/eui';
+import { IconType } from '@elastic/eui/src/components/icon/icon';
 import { Ast, toExpression } from '@kbn/interpreter/common';
 import { i18n } from '@kbn/i18n';
 import classNames from 'classnames';
@@ -108,7 +109,7 @@ const SuggestionPreview = ({
   onSelect: () => void;
   preview: {
     expression?: Ast;
-    icon: string;
+    icon: IconType;
     title: string;
   };
   ExpressionRenderer: ExpressionRenderer;
@@ -266,7 +267,7 @@ export function SuggestionPanel({
               }}
             >
               {i18n.translate('xpack.lens.sugegstion.confirmSuggestionLabel', {
-                defaultMessage: 'Confirm and reload suggestions',
+                defaultMessage: 'Reload suggestions',
               })}
             </EuiButtonEmpty>
           </EuiFlexItem>
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/workspace_panel.test.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/workspace_panel.test.tsx
index 86a0e5c8a833ac..ddb82565e4b8b4 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/workspace_panel.test.tsx
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/workspace_panel.test.tsx
@@ -6,6 +6,7 @@
 
 import React from 'react';
 
+import { buildExistsFilter } from '@kbn/es-query';
 import { ExpressionRendererProps } from '../../../../../../../src/legacy/core_plugins/expressions/public';
 import { Visualization, FramePublicAPI, TableSuggestion } from '../../types';
 import {
@@ -20,6 +21,7 @@ import { mountWithIntl as mount } from 'test_utils/enzyme_helpers';
 import { ReactWrapper } from 'enzyme';
 import { DragDrop, ChildDragDropProvider } from '../../drag_drop';
 import { Ast } from '@kbn/interpreter/common';
+import { coreMock } from 'src/core/public/mocks';
 
 const waitForPromises = () => new Promise(resolve => setTimeout(resolve));
 
@@ -59,10 +61,11 @@ describe('workspace_panel', () => {
         visualizationState={{}}
         dispatch={() => {}}
         ExpressionRenderer={expressionRendererMock}
+        core={coreMock.createSetup()}
       />
     );
 
-    expect(instance.find('[data-test-subj="empty-workspace"]')).toHaveLength(1);
+    expect(instance.find('[data-test-subj="empty-workspace"]')).toHaveLength(2);
     expect(instance.find(expressionRendererMock)).toHaveLength(0);
   });
 
@@ -80,10 +83,11 @@ describe('workspace_panel', () => {
         visualizationState={{}}
         dispatch={() => {}}
         ExpressionRenderer={expressionRendererMock}
+        core={coreMock.createSetup()}
       />
     );
 
-    expect(instance.find('[data-test-subj="empty-workspace"]')).toHaveLength(1);
+    expect(instance.find('[data-test-subj="empty-workspace"]')).toHaveLength(2);
     expect(instance.find(expressionRendererMock)).toHaveLength(0);
   });
 
@@ -101,10 +105,11 @@ describe('workspace_panel', () => {
         visualizationState={{}}
         dispatch={() => {}}
         ExpressionRenderer={expressionRendererMock}
+        core={coreMock.createSetup()}
       />
     );
 
-    expect(instance.find('[data-test-subj="empty-workspace"]')).toHaveLength(1);
+    expect(instance.find('[data-test-subj="empty-workspace"]')).toHaveLength(2);
     expect(instance.find(expressionRendererMock)).toHaveLength(0);
   });
 
@@ -136,6 +141,7 @@ describe('workspace_panel', () => {
         visualizationState={{}}
         dispatch={() => {}}
         ExpressionRenderer={expressionRendererMock}
+        core={coreMock.createSetup()}
       />
     );
 
@@ -149,7 +155,9 @@ describe('workspace_panel', () => {
           },
           Object {
             "arguments": Object {
-              "filters": Array [],
+              "filters": Array [
+                "[]",
+              ],
               "query": Array [
                 "{\\"query\\":\\"\\",\\"language\\":\\"lucene\\"}",
               ],
@@ -230,6 +238,7 @@ describe('workspace_panel', () => {
         visualizationState={{}}
         dispatch={() => {}}
         ExpressionRenderer={expressionRendererMock}
+        core={coreMock.createSetup()}
       />
     );
 
@@ -239,39 +248,39 @@ describe('workspace_panel', () => {
     expect(
       (instance.find(expressionRendererMock).prop('expression') as Ast).chain[2].arguments.tables
     ).toMatchInlineSnapshot(`
-                  Array [
-                    Object {
-                      "chain": Array [
-                        Object {
-                          "arguments": Object {},
-                          "function": "datasource",
-                          "type": "function",
-                        },
-                      ],
-                      "type": "expression",
-                    },
-                    Object {
-                      "chain": Array [
-                        Object {
-                          "arguments": Object {},
-                          "function": "datasource2",
-                          "type": "function",
-                        },
-                      ],
-                      "type": "expression",
-                    },
-                    Object {
-                      "chain": Array [
-                        Object {
-                          "arguments": Object {},
-                          "function": "datasource2",
-                          "type": "function",
-                        },
-                      ],
-                      "type": "expression",
-                    },
-                  ]
-            `);
+                                    Array [
+                                      Object {
+                                        "chain": Array [
+                                          Object {
+                                            "arguments": Object {},
+                                            "function": "datasource",
+                                            "type": "function",
+                                          },
+                                        ],
+                                        "type": "expression",
+                                      },
+                                      Object {
+                                        "chain": Array [
+                                          Object {
+                                            "arguments": Object {},
+                                            "function": "datasource2",
+                                            "type": "function",
+                                          },
+                                        ],
+                                        "type": "expression",
+                                      },
+                                      Object {
+                                        "chain": Array [
+                                          Object {
+                                            "arguments": Object {},
+                                            "function": "datasource2",
+                                            "type": "function",
+                                          },
+                                        ],
+                                        "type": "expression",
+                                      },
+                                    ]
+                        `);
   });
 
   it('should run the expression again if the date range changes', async () => {
@@ -307,6 +316,7 @@ describe('workspace_panel', () => {
         visualizationState={{}}
         dispatch={() => {}}
         ExpressionRenderer={expressionRendererMock}
+        core={coreMock.createSetup()}
       />
     );
 
@@ -326,6 +336,62 @@ describe('workspace_panel', () => {
     expect(expressionRendererMock).toHaveBeenCalledTimes(2);
   });
 
+  it('should run the expression again if the filters change', async () => {
+    const framePublicAPI = createMockFramePublicAPI();
+    framePublicAPI.datasourceLayers = {
+      first: mockDatasource.publicAPIMock,
+    };
+    mockDatasource.getLayers.mockReturnValue(['first']);
+
+    mockDatasource.toExpression
+      .mockReturnValueOnce('datasource')
+      .mockReturnValueOnce('datasource second');
+
+    expressionRendererMock = jest.fn(_arg => <span />);
+
+    instance = mount(
+      <InnerWorkspacePanel
+        activeDatasourceId={'mock'}
+        datasourceStates={{
+          mock: {
+            state: {},
+            isLoading: false,
+          },
+        }}
+        datasourceMap={{
+          mock: mockDatasource,
+        }}
+        framePublicAPI={framePublicAPI}
+        activeVisualizationId="vis"
+        visualizationMap={{
+          vis: { ...mockVisualization, toExpression: () => 'vis' },
+        }}
+        visualizationState={{}}
+        dispatch={() => {}}
+        ExpressionRenderer={expressionRendererMock}
+        core={coreMock.createSetup()}
+      />
+    );
+
+    // "wait" for the expression to execute
+    await waitForPromises();
+    instance.update();
+
+    expect(expressionRendererMock).toHaveBeenCalledTimes(1);
+
+    instance.setProps({
+      framePublicAPI: {
+        ...framePublicAPI,
+        filters: [buildExistsFilter({ name: 'myfield' }, { id: 'index1' })],
+      },
+    });
+
+    await waitForPromises();
+    instance.update();
+
+    expect(expressionRendererMock).toHaveBeenCalledTimes(2);
+  });
+
   describe('expression failures', () => {
     it('should show an error message if the expression fails to parse', () => {
       mockDatasource.toExpression.mockReturnValue('|||');
@@ -355,6 +421,7 @@ describe('workspace_panel', () => {
           visualizationState={{}}
           dispatch={() => {}}
           ExpressionRenderer={expressionRendererMock}
+          core={coreMock.createSetup()}
         />
       );
 
@@ -394,6 +461,7 @@ describe('workspace_panel', () => {
           visualizationState={{}}
           dispatch={() => {}}
           ExpressionRenderer={expressionRendererMock}
+          core={coreMock.createSetup()}
         />
       );
 
@@ -438,6 +506,7 @@ describe('workspace_panel', () => {
           visualizationState={{}}
           dispatch={() => {}}
           ExpressionRenderer={expressionRendererMock}
+          core={coreMock.createSetup()}
         />
       );
 
@@ -485,6 +554,7 @@ describe('workspace_panel', () => {
           visualizationState={{}}
           dispatch={() => {}}
           ExpressionRenderer={expressionRendererMock}
+          core={coreMock.createSetup()}
         />
       );
 
@@ -542,6 +612,7 @@ describe('workspace_panel', () => {
             visualizationState={{}}
             dispatch={mockDispatch}
             ExpressionRenderer={expressionRendererMock}
+            core={coreMock.createSetup()}
           />
         </ChildDragDropProvider>
       );
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/workspace_panel.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/workspace_panel.tsx
index 314b10796435bc..66fac5d6cf7054 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/workspace_panel.tsx
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/workspace_panel.tsx
@@ -6,8 +6,9 @@
 
 import React, { useState, useEffect, useMemo, useContext } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiCodeBlock, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiCodeBlock, EuiFlexGroup, EuiFlexItem, EuiImage, EuiText } from '@elastic/eui';
 import { toExpression } from '@kbn/interpreter/common';
+import { CoreStart, CoreSetup } from 'src/core/public';
 import { ExpressionRenderer } from '../../../../../../../src/legacy/core_plugins/expressions/public';
 import { Action } from './state_management';
 import { Datasource, Visualization, FramePublicAPI } from '../../types';
@@ -32,6 +33,7 @@ export interface WorkspacePanelProps {
   framePublicAPI: FramePublicAPI;
   dispatch: (action: Action) => void;
   ExpressionRenderer: ExpressionRenderer;
+  core: CoreStart | CoreSetup;
 }
 
 export const WorkspacePanel = debouncedComponent(InnerWorkspacePanel);
@@ -46,8 +48,14 @@ export function InnerWorkspacePanel({
   datasourceStates,
   framePublicAPI,
   dispatch,
+  core,
   ExpressionRenderer: ExpressionRendererComponent,
 }: WorkspacePanelProps) {
+  const IS_DARK_THEME = core.uiSettings.get('theme:darkMode');
+  const emptyStateGraphicURL = IS_DARK_THEME
+    ? '/plugins/lens/assets/lens_app_graphic_dark_2x.png'
+    : '/plugins/lens/assets/lens_app_graphic_light_2x.png';
+
   const dragDropContext = useContext(DragContext);
 
   const suggestionForDraggedField = useMemo(() => {
@@ -87,12 +95,25 @@ export function InnerWorkspacePanel({
 
   function renderEmptyWorkspace() {
     return (
-      <p data-test-subj="empty-workspace">
-        <FormattedMessage
-          id="xpack.lens.editorFrame.emptyWorkspace"
-          defaultMessage="This is the workspace panel. Drop fields here"
+      <EuiText textAlign="center" grow={false} color="subdued" data-test-subj="empty-workspace">
+        <h3>
+          <FormattedMessage
+            id="xpack.lens.editorFrame.emptyWorkspaceHeading"
+            defaultMessage="Create a visualization"
+          />
+        </h3>
+        <EuiImage
+          style={{ width: 360 }}
+          url={core.http.basePath.prepend(emptyStateGraphicURL)}
+          alt=""
         />
-      </p>
+        <p>
+          <FormattedMessage
+            id="xpack.lens.editorFrame.emptyWorkspace"
+            defaultMessage="Drop some fields here."
+          />
+        </p>
+      </EuiText>
     );
   }
 
@@ -121,6 +142,7 @@ export function InnerWorkspacePanel({
       datasourceStates,
       framePublicAPI.dateRange,
       framePublicAPI.query,
+      framePublicAPI.filters,
     ]);
 
     useEffect(() => {
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/embeddable/embeddable_factory.ts b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/embeddable/embeddable_factory.ts
index c340342a31ff6d..d779dfa5c401f6 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/embeddable/embeddable_factory.ts
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/embeddable/embeddable_factory.ts
@@ -39,7 +39,7 @@ export class EmbeddableFactory extends AbstractEmbeddableFactory {
           defaultMessage: 'Lens Visualization',
         }),
         type: DOC_TYPE,
-        getIconForSavedObject: () => 'faceHappy',
+        getIconForSavedObject: () => 'lensApp',
       },
     });
     this.chrome = chrome;
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/mocks.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/mocks.tsx
index 97e1fe8393fc3e..f349585ce88a48 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/mocks.tsx
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/mocks.tsx
@@ -77,6 +77,7 @@ export function createMockFramePublicAPI(): FrameMock {
     removeLayers: jest.fn(),
     dateRange: { fromDate: 'now-7d', toDate: 'now' },
     query: { query: '', language: 'lucene' },
+    filters: [],
   };
 }
 
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/plugin.test.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/plugin.test.tsx
index 7b21ec0cac1c24..f48a8b467e728e 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/plugin.test.tsx
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/plugin.test.tsx
@@ -59,6 +59,7 @@ describe('editor_frame plugin', () => {
         onChange: jest.fn(),
         dateRange: { fromDate: '', toDate: '' },
         query: { query: '', language: 'lucene' },
+        filters: [],
       });
       instance.unmount();
     }).not.toThrowError();
@@ -73,6 +74,7 @@ describe('editor_frame plugin', () => {
       onChange: jest.fn(),
       dateRange: { fromDate: '', toDate: '' },
       query: { query: '', language: 'lucene' },
+      filters: [],
     });
     instance.unmount();
 
diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/plugin.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/plugin.tsx
index e27c2e54500cfb..cb81ec3d69985f 100644
--- a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/plugin.tsx
+++ b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/plugin.tsx
@@ -76,7 +76,7 @@ export class EditorFramePlugin {
     const createInstance = (): EditorFrameInstance => {
       let domElement: Element;
       return {
-        mount: (element, { doc, onError, dateRange, query, onChange }) => {
+        mount: (element, { doc, onError, dateRange, query, filters, savedQuery, onChange }) => {
           domElement = element;
           const firstDatasourceId = Object.keys(this.datasources)[0];
           const firstVisualizationId = Object.keys(this.visualizations)[0];
@@ -97,6 +97,8 @@ export class EditorFramePlugin {
                 doc={doc}
                 dateRange={dateRange}
                 query={query}
+                filters={filters}
+                savedQuery={savedQuery}
                 onChange={onChange}
               />
             </I18nProvider>,
diff --git a/x-pack/legacy/plugins/lens/public/index.scss b/x-pack/legacy/plugins/lens/public/index.scss
index 9864690cff0936..f646b1ed0a9ae7 100644
--- a/x-pack/legacy/plugins/lens/public/index.scss
+++ b/x-pack/legacy/plugins/lens/public/index.scss
@@ -12,3 +12,4 @@
 @import './editor_frame_plugin/index';
 @import './indexpattern_plugin/index';
 @import './xy_visualization_plugin/index';
+@import './metric_visualization_plugin/index';
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/_datapanel.scss b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/_datapanel.scss
index cd2c9bff6b165e..a496cccc42a581 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/_datapanel.scss
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/_datapanel.scss
@@ -1,7 +1,9 @@
+@import '@elastic/eui/src/components/form/form_control_layout/mixins';
+
 .lnsInnerIndexPatternDataPanel {
   width: 100%;
   height: 100%;
-  padding: $euiSize 0 0 $euiSize;
+  padding: $euiSize $euiSize 0;
 }
 
 .lnsInnerIndexPatternDataPanel__header {
@@ -9,22 +11,25 @@
   align-items: center;
   height: $euiSize * 3;
   margin-top: -$euiSizeS;
+}
 
-
-  & > .lnsInnerIndexPatternDataPanel__changeLink {
-    flex: 0 0 auto;
-    margin: 0 (-$euiSizeS) 0 $euiSizeXS;
-  }
+.lnsInnerIndexPatternDataPanel__triggerButton {
+  @include euiTitle('xs');
+  line-height: $euiSizeXXL;
 }
 
 .lnsInnerIndexPatternDataPanel__filterWrapper {
   flex-grow: 0;
 }
 
+/**
+ * 1. Don't cut off the shadow of the field items
+ */
+
 .lnsInnerIndexPatternDataPanel__listWrapper {
   @include euiOverflowShadow;
   @include euiScrollBar;
-  margin-top: 2px; // form control shadow
+  margin-left: -$euiSize; /* 1 */
   position: relative;
   flex-grow: 1;
   overflow: auto;
@@ -34,6 +39,19 @@
   padding-top: $euiSizeS;
   position: absolute;
   top: 0;
-  left: 0;
-  right: 0;
+  left: $euiSize; /* 1 */
+  right: $euiSizeXS; /* 1 */
+}
+
+.lnsInnerIndexPatternDataPanel__filterButton {
+  width: 100%;
+  color: $euiColorPrimary;
+  padding-left: $euiSizeS;
+  padding-right: $euiSizeS;
 }
+
+.lnsInnerIndexPatternDataPanel__textField {
+  @include euiFormControlLayoutPadding(1, 'right');
+  @include euiFormControlLayoutPadding(1, 'left');
+}
+
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/_field_item.scss b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/_field_item.scss
index 9eab50dd139d8a..54f9a3787466d3 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/_field_item.scss
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/_field_item.scss
@@ -1,27 +1,61 @@
 .lnsFieldItem {
   @include euiFontSizeS;
-  background: $euiColorEmptyShade;
+  background: lightOrDarkTheme($euiColorEmptyShade, $euiColorLightestShade);
   border-radius: $euiBorderRadius;
   margin-bottom: $euiSizeXS;
-  transition: box-shadow $euiAnimSpeedFast $euiAnimSlightResistance;
-
-  &:hover {
-    @include euiBottomShadowMedium;
-    z-index: 2;
-    cursor: grab;
-  }
 }
 
-.lnsFieldItem--missing {
-  background: $euiColorLightestShade;
+.lnsFieldItem__popoverAnchor:hover,
+.lnsFieldItem__popoverAnchor:focus,
+.lnsFieldItem__popoverAnchor:focus-within {
+  @include euiBottomShadowMedium;
+  border-radius: $euiBorderRadius;
+  z-index: 2;
 }
 
-.lnsFieldItem__name {
-  margin-left: $euiSizeXS;
+.lnsFieldItem--missing {
+  background: lightOrDarkTheme(transparentize($euiColorMediumShade, .9), $euiColorEmptyShade);
+  color: $euiColorDarkShade;
 }
 
 .lnsFieldItem__info {
+  border-radius: $euiBorderRadius - 1px;
   padding: $euiSizeS;
+  display: flex;
+  align-items: flex-start;
+  transition: box-shadow $euiAnimSpeedFast $euiAnimSlightResistance,
+              background-color $euiAnimSpeedFast $euiAnimSlightResistance; // sass-lint:disable-line indentation
+
+  .lnsFieldItem__name {
+    margin-left: $euiSizeXS;
+    flex-grow: 1;
+  }
+
+  .lnsFieldListPanel__fieldIcon,
+  .lnsFieldItem__infoIcon {
+    flex-shrink: 0;
+  }
+
+  .lnsFieldListPanel__fieldIcon {
+    margin-top: 2px;
+  }
+
+  .lnsFieldItem__infoIcon {
+    visibility: hidden;
+  }
+
+  &:hover,
+  &:focus {
+    cursor: grab;
+
+    .lnsFieldItem__infoIcon {
+      visibility: visible;
+    }
+  }
+}
+
+.lnsFieldItem__info-isOpen {
+  @include euiFocusRing;
 }
 
 .lnsFieldItem__topValue {
@@ -45,3 +79,8 @@
   min-width: 260px;
   max-width: 300px;
 }
+
+.lnsFieldItem__popoverButtonGroup {
+  // Enforce lowercase for buttons or else some browsers inherit all caps from popover title
+  text-transform: none;
+}
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/change_indexpattern.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/change_indexpattern.tsx
index 3da540e194dc3d..eb44da493b898b 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/change_indexpattern.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/change_indexpattern.tsx
@@ -20,6 +20,7 @@ import { isLayerTransferable } from './state_helpers';
 
 export interface ChangeIndexPatternTriggerProps extends EuiButtonEmptyProps {
   label: string;
+  title?: string;
 }
 
 export function ChangeIndexPattern({
@@ -48,12 +49,15 @@ export function ChangeIndexPattern({
   }));
 
   const createTrigger = function() {
-    const { label, ...rest } = trigger;
+    const { label, title, ...rest } = trigger;
     return (
       <EuiButtonEmpty
-        flush="left"
         className="eui-textTruncate"
-        size="xs"
+        flush="left"
+        color="text"
+        iconSide="right"
+        iconType="arrowDown"
+        title={title}
         onClick={() => setPopoverIsOpen(!isPopoverOpen)}
         {...rest}
       >
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/datapanel.test.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/datapanel.test.tsx
index 9e20db9276ae3c..891eb9415d3a42 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/datapanel.test.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/datapanel.test.tsx
@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { shallow, mount } from 'enzyme';
 import React, { ChangeEvent } from 'react';
 import { IndexPatternPrivateState, IndexPatternColumn } from './indexpattern';
 import { createMockedDragDropContext } from './mocks';
@@ -12,6 +11,7 @@ import { InnerIndexPatternDataPanel, IndexPatternDataPanel, MemoizedDataPanel }
 import { FieldItem } from './field_item';
 import { act } from 'react-dom/test-utils';
 import { coreMock } from 'src/core/public/mocks';
+import { mountWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
 import { ChangeIndexPattern } from './change_indexpattern';
 
 jest.mock('ui/new_platform');
@@ -220,6 +220,7 @@ describe('IndexPattern Data Panel', () => {
         toDate: 'now',
       },
       query: { query: '', language: 'lucene' },
+      filters: [],
       showEmptyFields: false,
       onToggleEmptyFields: jest.fn(),
     };
@@ -231,7 +232,7 @@ describe('IndexPattern Data Panel', () => {
       ...initialState,
       layers: { first: { indexPatternId: '1', columnOrder: [], columns: {} } },
     };
-    const wrapper = shallow(
+    const wrapper = shallowWithIntl(
       <IndexPatternDataPanel
         {...defaultProps}
         state={state}
@@ -258,7 +259,7 @@ describe('IndexPattern Data Panel', () => {
         second: { indexPatternId: '1', columnOrder: [], columns: {} },
       },
     };
-    const wrapper = shallow(
+    const wrapper = shallowWithIntl(
       <IndexPatternDataPanel
         {...defaultProps}
         state={state}
@@ -287,7 +288,7 @@ describe('IndexPattern Data Panel', () => {
         },
       },
     };
-    const wrapper = shallow(
+    const wrapper = shallowWithIntl(
       <IndexPatternDataPanel
         {...defaultProps}
         state={state}
@@ -305,14 +306,14 @@ describe('IndexPattern Data Panel', () => {
   });
 
   it('should render a warning if there are no index patterns', () => {
-    const wrapper = shallow(
+    const wrapper = shallowWithIntl(
       <InnerIndexPatternDataPanel {...defaultProps} currentIndexPatternId="" indexPatterns={{}} />
     );
     expect(wrapper.find('[data-test-subj="indexPattern-no-indexpatterns"]')).toHaveLength(1);
   });
 
   it('should call setState when the index pattern is switched', async () => {
-    const wrapper = shallow(<InnerIndexPatternDataPanel {...defaultProps} />);
+    const wrapper = shallowWithIntl(<InnerIndexPatternDataPanel {...defaultProps} />);
 
     wrapper.find(ChangeIndexPattern).prop('onChangeIndexPattern')('2');
 
@@ -333,7 +334,9 @@ describe('IndexPattern Data Panel', () => {
         },
       });
       const updateFields = jest.fn();
-      mount(<InnerIndexPatternDataPanel {...defaultProps} updateFieldsWithCounts={updateFields} />);
+      mountWithIntl(
+        <InnerIndexPatternDataPanel {...defaultProps} updateFieldsWithCounts={updateFields} />
+      );
 
       await waitForPromises();
 
@@ -400,7 +403,9 @@ describe('IndexPattern Data Panel', () => {
 
       const props = { ...defaultProps, indexPatterns: newIndexPatterns };
 
-      mount(<InnerIndexPatternDataPanel {...props} updateFieldsWithCounts={updateFields} />);
+      mountWithIntl(
+        <InnerIndexPatternDataPanel {...props} updateFieldsWithCounts={updateFields} />
+      );
 
       await waitForPromises();
 
@@ -410,7 +415,7 @@ describe('IndexPattern Data Panel', () => {
 
   describe('while showing empty fields', () => {
     it('should list all supported fields in the pattern sorted alphabetically', async () => {
-      const wrapper = shallow(
+      const wrapper = shallowWithIntl(
         <InnerIndexPatternDataPanel {...defaultProps} showEmptyFields={true} />
       );
 
@@ -424,7 +429,7 @@ describe('IndexPattern Data Panel', () => {
     });
 
     it('should filter down by name', () => {
-      const wrapper = shallow(
+      const wrapper = shallowWithIntl(
         <InnerIndexPatternDataPanel {...defaultProps} showEmptyFields={true} />
       );
 
@@ -440,7 +445,7 @@ describe('IndexPattern Data Panel', () => {
     });
 
     it('should filter down by type', () => {
-      const wrapper = mount(
+      const wrapper = mountWithIntl(
         <InnerIndexPatternDataPanel {...defaultProps} showEmptyFields={true} />
       );
 
@@ -461,7 +466,7 @@ describe('IndexPattern Data Panel', () => {
     });
 
     it('should toggle type if clicked again', () => {
-      const wrapper = mount(
+      const wrapper = mountWithIntl(
         <InnerIndexPatternDataPanel {...defaultProps} showEmptyFields={true} />
       );
 
@@ -489,7 +494,7 @@ describe('IndexPattern Data Panel', () => {
     });
 
     it('should filter down by type and by name', () => {
-      const wrapper = mount(
+      const wrapper = mountWithIntl(
         <InnerIndexPatternDataPanel {...defaultProps} showEmptyFields={true} />
       );
 
@@ -537,7 +542,7 @@ describe('IndexPattern Data Panel', () => {
     });
 
     it('should list all supported fields in the pattern sorted alphabetically', async () => {
-      const wrapper = shallow(<InnerIndexPatternDataPanel {...emptyFieldsTestProps} />);
+      const wrapper = shallowWithIntl(<InnerIndexPatternDataPanel {...emptyFieldsTestProps} />);
 
       expect(wrapper.find(FieldItem).map(fieldItem => fieldItem.prop('field').name)).toEqual([
         'bytes',
@@ -546,7 +551,7 @@ describe('IndexPattern Data Panel', () => {
     });
 
     it('should filter down by name', () => {
-      const wrapper = shallow(
+      const wrapper = shallowWithIntl(
         <InnerIndexPatternDataPanel {...emptyFieldsTestProps} showEmptyFields={true} />
       );
 
@@ -562,7 +567,7 @@ describe('IndexPattern Data Panel', () => {
     });
 
     it('should allow removing the filter for data', () => {
-      const wrapper = mount(<InnerIndexPatternDataPanel {...emptyFieldsTestProps} />);
+      const wrapper = mountWithIntl(<InnerIndexPatternDataPanel {...emptyFieldsTestProps} />);
 
       wrapper
         .find('[data-test-subj="lnsIndexPatternFiltersToggle"]')
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/datapanel.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/datapanel.tsx
index 12e6150a789b3a..03194f6f66c695 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/datapanel.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/datapanel.tsx
@@ -10,7 +10,6 @@ import {
   EuiLoadingSpinner,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiTitle,
   EuiContextMenuPanel,
   EuiContextMenuItem,
   EuiContextMenuPanelProps,
@@ -21,11 +20,11 @@ import {
   EuiText,
   EuiFormControlLayout,
   EuiSwitch,
-  EuiButtonIcon,
+  EuiFacetButton,
+  EuiIcon,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { Query } from 'src/plugins/data/common';
 import { DatasourceDataPanelProps, DataType } from '../types';
 import { IndexPatternPrivateState, IndexPatternField, IndexPattern } from './indexpattern';
 import { ChildDragDropProvider, DragContextState } from '../drag_drop';
@@ -65,6 +64,7 @@ export function IndexPatternDataPanel({
   dragDropContext,
   core,
   query,
+  filters,
   dateRange,
 }: DatasourceDataPanelProps<IndexPatternPrivateState>) {
   const { indexPatterns, currentIndexPatternId } = state;
@@ -113,6 +113,7 @@ export function IndexPatternDataPanel({
       indexPatterns={indexPatterns}
       query={query}
       dateRange={dateRange}
+      filters={filters}
       dragDropContext={dragDropContext}
       showEmptyFields={state.showEmptyFields}
       onToggleEmptyFields={onToggleEmptyFields}
@@ -145,18 +146,16 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
   indexPatterns,
   query,
   dateRange,
+  filters,
   dragDropContext,
   onChangeIndexPattern,
   updateFieldsWithCounts,
   showEmptyFields,
   onToggleEmptyFields,
   core,
-}: Partial<DatasourceDataPanelProps> & {
+}: Pick<DatasourceDataPanelProps, Exclude<keyof DatasourceDataPanelProps, 'state' | 'setState'>> & {
   currentIndexPatternId: string;
   indexPatterns: Record<string, IndexPattern>;
-  dateRange: DatasourceDataPanelProps['dateRange'];
-  query: Query;
-  core: DatasourceDataPanelProps['core'];
   dragDropContext: DragContextState;
   showEmptyFields: boolean;
   onToggleEmptyFields: () => void;
@@ -324,148 +323,138 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
       >
         <EuiFlexItem grow={null}>
           <div className="lnsInnerIndexPatternDataPanel__header">
-            <EuiTitle size="xxs" className="eui-textTruncate">
-              <h4 title={currentIndexPattern.title}>{currentIndexPattern.title} </h4>
-            </EuiTitle>
-            <div className="lnsInnerIndexPatternDataPanel__changeLink">
-              <ChangeIndexPattern
-                data-test-subj="indexPattern-switcher"
-                trigger={{
-                  label: i18n.translate('xpack.lens.indexPatterns.changePatternLabel', {
-                    defaultMessage: '(change)',
-                  }),
-                  'data-test-subj': 'indexPattern-switch-link',
-                }}
-                currentIndexPatternId={currentIndexPatternId}
-                indexPatterns={indexPatterns}
-                onChangeIndexPattern={(newId: string) => {
-                  onChangeIndexPattern(newId);
-
+            <ChangeIndexPattern
+              data-test-subj="indexPattern-switcher"
+              trigger={{
+                label: currentIndexPattern.title,
+                title: currentIndexPattern.title,
+                'data-test-subj': 'indexPattern-switch-link',
+                className: 'lnsInnerIndexPatternDataPanel__triggerButton',
+              }}
+              currentIndexPatternId={currentIndexPatternId}
+              indexPatterns={indexPatterns}
+              onChangeIndexPattern={(newId: string) => {
+                onChangeIndexPattern(newId);
+
+                setLocalState(s => ({
+                  ...s,
+                  nameFilter: '',
+                  typeFilter: [],
+                }));
+              }}
+            />
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <div className="lnsInnerIndexPatternDataPanel__filterWrapper">
+            <EuiFormControlLayout
+              icon="search"
+              fullWidth
+              clear={{
+                title: i18n.translate('xpack.lens.indexPatterns.clearFiltersLabel', {
+                  defaultMessage: 'Clear name and type filters',
+                }),
+                'aria-label': i18n.translate('xpack.lens.indexPatterns.clearFiltersLabel', {
+                  defaultMessage: 'Clear name and type filters',
+                }),
+                onClick: () => {
                   setLocalState(s => ({
                     ...s,
                     nameFilter: '',
                     typeFilter: [],
                   }));
+                },
+              }}
+            >
+              <input
+                className="euiFieldText euiFieldText--fullWidth lnsInnerIndexPatternDataPanel__textField"
+                data-test-subj="lnsIndexPatternFieldSearch"
+                placeholder={i18n.translate('xpack.lens.indexPatterns.filterByNameLabel', {
+                  defaultMessage: 'Search for fields',
+                  description:
+                    'Search the list of fields in the index pattern for the provided text',
+                })}
+                value={localState.nameFilter}
+                onChange={e => {
+                  setLocalState({ ...localState, nameFilter: e.target.value });
                 }}
+                aria-label={i18n.translate('xpack.lens.indexPatterns.filterByNameAriaLabel', {
+                  defaultMessage: 'Search fields',
+                })}
               />
-            </div>
+            </EuiFormControlLayout>
           </div>
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiFlexGroup
-            gutterSize="s"
-            className="lnsInnerIndexPatternDataPanel__filterWrapper"
-            responsive={false}
-          >
-            <EuiFlexItem grow={true}>
-              <EuiFormControlLayout
-                prepend={
-                  <EuiPopover
-                    id="dataPanelTypeFilter"
-                    panelClassName="euiFilterGroup__popoverPanel"
-                    panelPaddingSize="none"
-                    anchorPosition="downLeft"
-                    isOpen={localState.isTypeFilterOpen}
-                    closePopover={() =>
-                      setLocalState(s => ({ ...localState, isTypeFilterOpen: false }))
-                    }
-                    button={
-                      <EuiButtonIcon
-                        iconType="filter"
-                        onClick={() => {
-                          setLocalState(s => ({
-                            ...s,
-                            isTypeFilterOpen: !localState.isTypeFilterOpen,
-                          }));
-                        }}
-                        data-test-subj="lnsIndexPatternFiltersToggle"
-                        title={i18n.translate('xpack.lens.indexPatterns.toggleFiltersPopover', {
-                          defaultMessage: 'Filters for index pattern',
-                        })}
-                        aria-label={i18n.translate(
-                          'xpack.lens.indexPatterns.toggleFiltersPopover',
-                          {
-                            defaultMessage: 'Filters for index pattern',
-                          }
-                        )}
-                      />
-                    }
-                  >
-                    <EuiPopoverTitle>
-                      {i18n.translate('xpack.lens.indexPatterns.filterByTypeLabel', {
-                        defaultMessage: 'Filter by type',
-                      })}
-                    </EuiPopoverTitle>
-                    <FixedEuiContextMenuPanel
-                      watchedItemProps={['icon', 'disabled']}
-                      data-test-subj="lnsIndexPatternTypeFilterOptions"
-                      items={(availableFieldTypes as DataType[]).map(type => (
-                        <EuiContextMenuItem
-                          key={type}
-                          icon={localState.typeFilter.includes(type) ? 'check' : 'empty'}
-                          data-test-subj={`typeFilter-${type}`}
-                          onClick={() =>
-                            setLocalState(s => ({
-                              ...s,
-                              typeFilter: localState.typeFilter.includes(type)
-                                ? localState.typeFilter.filter(t => t !== type)
-                                : [...localState.typeFilter, type],
-                            }))
-                          }
-                        >
-                          <FieldIcon type={type} /> {fieldTypeNames[type]}
-                        </EuiContextMenuItem>
-                      ))}
-                    />
-                    <EuiPopoverFooter>
-                      <EuiSwitch
-                        checked={!showEmptyFields}
-                        onChange={() => {
-                          onToggleEmptyFields();
-                        }}
-                        label={i18n.translate('xpack.lens.indexPatterns.toggleEmptyFieldsSwitch', {
-                          defaultMessage: 'Only show fields with data',
-                        })}
-                        data-test-subj="lnsEmptyFilter"
-                      />
-                    </EuiPopoverFooter>
-                  </EuiPopover>
-                }
-                clear={{
-                  title: i18n.translate('xpack.lens.indexPatterns.clearFiltersLabel', {
-                    defaultMessage: 'Clear name and type filters',
-                  }),
-                  'aria-label': i18n.translate('xpack.lens.indexPatterns.clearFiltersLabel', {
-                    defaultMessage: 'Clear name and type filters',
-                  }),
-                  onClick: () => {
+          <div className="lnsInnerIndexPatternDataPanel__filtersWrapper">
+            <EuiPopover
+              id="dataPanelTypeFilter"
+              panelClassName="euiFilterGroup__popoverPanel"
+              panelPaddingSize="none"
+              anchorPosition="downLeft"
+              display="block"
+              isOpen={localState.isTypeFilterOpen}
+              closePopover={() => setLocalState(s => ({ ...localState, isTypeFilterOpen: false }))}
+              button={
+                <EuiFacetButton
+                  data-test-subj="lnsIndexPatternFiltersToggle"
+                  className="lnsInnerIndexPatternDataPanel__filterButton"
+                  quantity={localState.typeFilter.length}
+                  icon={<EuiIcon type="filter" />}
+                  isSelected={localState.typeFilter.length ? true : false}
+                  onClick={() => {
                     setLocalState(s => ({
                       ...s,
-                      nameFilter: '',
-                      typeFilter: [],
+                      isTypeFilterOpen: !localState.isTypeFilterOpen,
                     }));
-                  },
-                }}
-              >
-                <input
-                  className="euiFieldText euiFieldText--inGroup"
-                  data-test-subj="lnsIndexPatternFieldSearch"
-                  placeholder={i18n.translate('xpack.lens.indexPatterns.filterByNameLabel', {
-                    defaultMessage: 'Search fields',
-                    description:
-                      'Search the list of fields in the index pattern for the provided text',
-                  })}
-                  value={localState.nameFilter}
-                  onChange={e => {
-                    setLocalState({ ...localState, nameFilter: e.target.value });
                   }}
-                  aria-label={i18n.translate('xpack.lens.indexPatterns.filterByNameAriaLabel', {
-                    defaultMessage: 'Search fields',
+                >
+                  <FormattedMessage
+                    id="xpack.lens.indexPatterns.toggleFiltersPopover"
+                    defaultMessage="Fields filtered"
+                  />
+                </EuiFacetButton>
+              }
+            >
+              <EuiPopoverTitle>
+                {i18n.translate('xpack.lens.indexPatterns.filterByTypeLabel', {
+                  defaultMessage: 'Filter by type',
+                })}
+              </EuiPopoverTitle>
+              <FixedEuiContextMenuPanel
+                watchedItemProps={['icon', 'disabled']}
+                data-test-subj="lnsIndexPatternTypeFilterOptions"
+                items={(availableFieldTypes as DataType[]).map(type => (
+                  <EuiContextMenuItem
+                    key={type}
+                    icon={localState.typeFilter.includes(type) ? 'check' : 'empty'}
+                    data-test-subj={`typeFilter-${type}`}
+                    onClick={() =>
+                      setLocalState(s => ({
+                        ...s,
+                        typeFilter: localState.typeFilter.includes(type)
+                          ? localState.typeFilter.filter(t => t !== type)
+                          : [...localState.typeFilter, type],
+                      }))
+                    }
+                  >
+                    <FieldIcon type={type} /> {fieldTypeNames[type]}
+                  </EuiContextMenuItem>
+                ))}
+              />
+              <EuiPopoverFooter>
+                <EuiSwitch
+                  compressed
+                  checked={!showEmptyFields}
+                  onChange={() => {
+                    onToggleEmptyFields();
+                  }}
+                  label={i18n.translate('xpack.lens.indexPatterns.toggleEmptyFieldsSwitch', {
+                    defaultMessage: 'Only show fields with data',
                   })}
+                  data-test-subj="lnsEmptyFilter"
                 />
-              </EuiFormControlLayout>
-            </EuiFlexItem>
-          </EuiFlexGroup>
+              </EuiPopoverFooter>
+            </EuiPopover>
+          </div>
           <div
             className="lnsInnerIndexPatternDataPanel__listWrapper"
             ref={el => {
@@ -491,21 +480,26 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
                     exists={overallField ? !!overallField.exists : false}
                     dateRange={dateRange}
                     query={query}
+                    filters={filters}
                   />
                 );
               })}
 
               {!localState.isLoading && paginatedFields.length === 0 && (
-                <EuiText>
-                  {showEmptyFields
-                    ? i18n.translate('xpack.lens.indexPatterns.hiddenFieldsLabel', {
-                        defaultMessage:
-                          'No fields have data with the current filters. You can show fields without data using the filters above.',
-                      })
-                    : i18n.translate('xpack.lens.indexPatterns.noFieldsLabel', {
-                        defaultMessage: 'No fields can be visualized from {title}',
-                        values: { title: currentIndexPattern.title },
-                      })}
+                <EuiText size="s" color="subdued">
+                  <p>
+                    <strong>
+                      {showEmptyFields
+                        ? i18n.translate('xpack.lens.indexPatterns.hiddenFieldsLabel', {
+                            defaultMessage:
+                              'No fields have data with the current filters. You can show fields without data using the filters above.',
+                          })
+                        : i18n.translate('xpack.lens.indexPatterns.noFieldsLabel', {
+                            defaultMessage: 'No fields in {title} can be visualized.',
+                            values: { title: currentIndexPattern.title },
+                          })}
+                    </strong>
+                  </p>
                 </EuiText>
               )}
             </div>
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.test.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.test.tsx
index 33567b20f364db..fecf2792da1c7f 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.test.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.test.tsx
@@ -96,7 +96,7 @@ describe('IndexPatternDimensionPanel', () => {
           columnOrder: ['col1'],
           columns: {
             col1: {
-              label: 'Date Histogram of timestamp',
+              label: 'Date histogram of timestamp',
               dataType: 'date',
               isBucketed: true,
 
@@ -280,7 +280,7 @@ describe('IndexPatternDimensionPanel', () => {
       'Incompatible'
     );
 
-    expect(options.find(({ name }) => name === 'Date Histogram')!['data-test-subj']).toContain(
+    expect(options.find(({ name }) => name === 'Date histogram')!['data-test-subj']).toContain(
       'Incompatible'
     );
   });
@@ -822,7 +822,7 @@ describe('IndexPatternDimensionPanel', () => {
         .find(EuiSideNav)
         .prop('items')[0]
         .items.map(({ name }) => name)
-    ).toEqual(['Unique count', 'Average', 'Count', 'Filter Ratio', 'Maximum', 'Minimum', 'Sum']);
+    ).toEqual(['Unique count', 'Average', 'Count', 'Filter ratio', 'Maximum', 'Minimum', 'Sum']);
   });
 
   it('should add a column on selection of a field', () => {
@@ -973,7 +973,7 @@ describe('IndexPatternDimensionPanel', () => {
             columnOrder: ['col1'],
             columns: {
               col1: {
-                label: 'Date Histogram of timestamp',
+                label: 'Date histogram of timestamp',
                 dataType: 'date',
                 isBucketed: true,
 
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/popover_editor.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/popover_editor.tsx
index ec2c153931bd14..494a0ae9fb1e35 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/popover_editor.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/popover_editor.tsx
@@ -330,28 +330,21 @@ export function PopoverEditor(props: PopoverEditorProps) {
                   <EuiCallOut
                     data-test-subj="indexPattern-invalid-operation"
                     title={i18n.translate('xpack.lens.indexPattern.invalidOperationLabel', {
-                      defaultMessage: 'Operation not applicable to field',
+                      defaultMessage: 'To use this function, select a different field.',
                     })}
-                    color="danger"
-                    iconType="cross"
+                    color="warning"
                     size="s"
-                  >
-                    <p>
-                      <FormattedMessage
-                        id="xpack.lens.indexPattern.invalidOperationDescription"
-                        defaultMessage="Please choose another field"
-                      />
-                    </p>
-                  </EuiCallOut>
+                    iconType="sortUp"
+                  />
                 )}
                 {incompatibleSelectedOperationType && !selectedColumn && (
                   <EuiCallOut
                     size="s"
                     data-test-subj="indexPattern-fieldless-operation"
                     title={i18n.translate('xpack.lens.indexPattern.fieldlessOperationLabel', {
-                      defaultMessage: 'Choose a field the operation is applied to',
+                      defaultMessage: 'To use this function, select a field.',
                     })}
-                    iconType="alert"
+                    iconType="sortUp"
                   ></EuiCallOut>
                 )}
                 {!incompatibleSelectedOperationType && ParamEditor && (
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_icon.test.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_icon.test.tsx
index 8fd72a790b38e5..85c1deb0ea7e1a 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_icon.test.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_icon.test.tsx
@@ -48,7 +48,7 @@ describe('FieldIcon', () => {
       <EuiIcon
         className="lnsFieldListPanel__fieldIcon lnsFieldListPanel__fieldIcon--ip"
         color="#7B000B"
-        type="storage"
+        type="ip"
       />
     `);
   });
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_icon.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_icon.tsx
index d68ee0b82f28ec..f1e8db04860a7d 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_icon.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_icon.tsx
@@ -17,7 +17,7 @@ function getIconForDataType(dataType: string) {
   const icons: Partial<Record<string, UnwrapArray<typeof ICON_TYPES>>> = {
     boolean: 'invert',
     date: 'calendar',
-    ip: 'storage',
+    ip: 'ip',
   };
   return icons[dataType] || ICON_TYPES.find(t => t === dataType) || 'empty';
 }
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_item.test.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_item.test.tsx
new file mode 100644
index 00000000000000..9956c0ec330616
--- /dev/null
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_item.test.tsx
@@ -0,0 +1,215 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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 { act } from 'react-dom/test-utils';
+import { EuiLoadingSpinner, EuiPopover } from '@elastic/eui';
+import { FieldItem, FieldItemProps } from './field_item';
+import { coreMock } from 'src/core/public/mocks';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
+
+jest.mock('ui/new_platform');
+
+// Formatter must be mocked to return a string, or the rendering will fail
+jest.mock('../../../../../../src/legacy/ui/public/registry/field_formats', () => ({
+  fieldFormats: {
+    getDefaultInstance: jest.fn().mockReturnValue({
+      convert: jest.fn().mockReturnValue((s: unknown) => JSON.stringify(s)),
+    }),
+  },
+}));
+
+const waitForPromises = () => new Promise(resolve => setTimeout(resolve));
+
+const indexPattern = {
+  id: '1',
+  title: 'my-fake-index-pattern',
+  timeFieldName: 'timestamp',
+  fields: [
+    {
+      name: 'timestamp',
+      type: 'date',
+      aggregatable: true,
+      searchable: true,
+    },
+    {
+      name: 'bytes',
+      type: 'number',
+      aggregatable: true,
+      searchable: true,
+    },
+    {
+      name: 'memory',
+      type: 'number',
+      aggregatable: true,
+      searchable: true,
+    },
+    {
+      name: 'unsupported',
+      type: 'geo',
+      aggregatable: true,
+      searchable: true,
+    },
+    {
+      name: 'source',
+      type: 'string',
+      aggregatable: true,
+      searchable: true,
+    },
+  ],
+};
+
+describe('IndexPattern Field Item', () => {
+  let defaultProps: FieldItemProps;
+  let core: ReturnType<typeof coreMock['createSetup']>;
+
+  beforeEach(() => {
+    core = coreMock.createSetup();
+    core.http.post.mockClear();
+    defaultProps = {
+      indexPattern,
+      core,
+      highlight: '',
+      dateRange: {
+        fromDate: 'now-7d',
+        toDate: 'now',
+      },
+      query: { query: '', language: 'lucene' },
+      filters: [],
+      field: {
+        name: 'bytes',
+        type: 'number',
+        aggregatable: true,
+        searchable: true,
+      },
+      exists: true,
+    };
+  });
+
+  it('should request field stats every time the button is clicked', async () => {
+    let resolveFunction: (arg: unknown) => void;
+
+    core.http.post.mockImplementation(() => {
+      return new Promise(resolve => {
+        resolveFunction = resolve;
+      });
+    });
+
+    const wrapper = mountWithIntl(<FieldItem {...defaultProps} />);
+
+    wrapper.find('[data-test-subj="lnsFieldListPanelField-bytes"]').simulate('click');
+
+    expect(core.http.post).toHaveBeenCalledWith(
+      `/api/lens/index_stats/my-fake-index-pattern/field`,
+      {
+        body: JSON.stringify({
+          dslQuery: {
+            bool: {
+              must: [{ match_all: {} }],
+              filter: [],
+              should: [],
+              must_not: [],
+            },
+          },
+          fromDate: 'now-7d',
+          toDate: 'now',
+          timeFieldName: 'timestamp',
+          field: {
+            name: 'bytes',
+            type: 'number',
+            aggregatable: true,
+            searchable: true,
+          },
+        }),
+      }
+    );
+
+    expect(wrapper.find(EuiPopover).prop('isOpen')).toEqual(true);
+
+    expect(wrapper.find(EuiLoadingSpinner)).toHaveLength(1);
+
+    resolveFunction!({
+      totalDocuments: 4633,
+      sampledDocuments: 4633,
+      sampledValues: 4633,
+      histogram: {
+        buckets: [{ count: 705, key: 0 }],
+      },
+      topValues: {
+        buckets: [{ count: 147, key: 0 }],
+      },
+    });
+
+    await waitForPromises();
+    wrapper.update();
+
+    expect(wrapper.find(EuiLoadingSpinner)).toHaveLength(0);
+
+    wrapper.find('[data-test-subj="lnsFieldListPanelField-bytes"]').simulate('click');
+    expect(core.http.post).toHaveBeenCalledTimes(1);
+
+    act(() => {
+      const closePopover = wrapper.find(EuiPopover).prop('closePopover');
+
+      closePopover();
+    });
+
+    expect(wrapper.find(EuiPopover).prop('isOpen')).toEqual(false);
+
+    act(() => {
+      wrapper.setProps({
+        dateRange: {
+          fromDate: 'now-14d',
+          toDate: 'now-7d',
+        },
+        query: { query: 'geo.src : "US"', language: 'kuery' },
+        filters: [
+          {
+            match: { phrase: { 'geo.dest': 'US' } },
+          },
+        ],
+      });
+    });
+
+    wrapper.find('[data-test-subj="lnsFieldListPanelField-bytes"]').simulate('click');
+
+    expect(core.http.post).toHaveBeenCalledTimes(2);
+    expect(core.http.post).toHaveBeenLastCalledWith(
+      `/api/lens/index_stats/my-fake-index-pattern/field`,
+      {
+        body: JSON.stringify({
+          dslQuery: {
+            bool: {
+              must: [],
+              filter: [
+                {
+                  bool: {
+                    should: [{ match_phrase: { 'geo.src': 'US' } }],
+                    minimum_should_match: 1,
+                  },
+                },
+                {
+                  match: { phrase: { 'geo.dest': 'US' } },
+                },
+              ],
+              should: [],
+              must_not: [],
+            },
+          },
+          fromDate: 'now-14d',
+          toDate: 'now-7d',
+          timeFieldName: 'timestamp',
+          field: {
+            name: 'bytes',
+            type: 'number',
+            aggregatable: true,
+            searchable: true,
+          },
+        }),
+      }
+    );
+  });
+});
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_item.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_item.tsx
index 87ef874dece66b..af0612be8dc2f5 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_item.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_item.tsx
@@ -18,6 +18,7 @@ import {
   EuiButtonGroup,
   EuiPopoverFooter,
   EuiPopoverTitle,
+  EuiIconTip,
 } from '@elastic/eui';
 import {
   Chart,
@@ -33,7 +34,7 @@ import {
   niceTimeFormatter,
 } from '@elastic/charts';
 import { i18n } from '@kbn/i18n';
-import { toElasticsearchQuery } from '@kbn/es-query';
+import { Filter, buildEsQuery, getEsQueryConfig } from '@kbn/es-query';
 import { Query } from 'src/plugins/data/common';
 // @ts-ignore
 import { fieldFormats } from '../../../../../../src/legacy/ui/public/registry/field_formats';
@@ -51,6 +52,7 @@ export interface FieldItemProps {
   exists: boolean;
   query: Query;
   dateRange: DatasourceDataPanelProps['dateRange'];
+  filters: Filter[];
 }
 
 interface State {
@@ -70,7 +72,7 @@ function wrapOnDot(str?: string) {
 }
 
 export function FieldItem(props: FieldItemProps) {
-  const { core, field, indexPattern, highlight, exists, query, dateRange } = props;
+  const { core, field, indexPattern, highlight, exists, query, dateRange, filters } = props;
 
   const [infoIsOpen, setOpen] = useState(false);
 
@@ -111,7 +113,7 @@ export function FieldItem(props: FieldItemProps) {
     core.http
       .post(`/api/lens/index_stats/${indexPattern.title}/field`, {
         body: JSON.stringify({
-          query: toElasticsearchQuery(query, indexPattern),
+          dslQuery: buildEsQuery(indexPattern, query, filters, getEsQueryConfig(core.uiSettings)),
           fromDate: dateRange.fromDate,
           toDate: dateRange.toDate,
           timeFieldName: indexPattern.timeFieldName,
@@ -144,6 +146,7 @@ export function FieldItem(props: FieldItemProps) {
   return (
     <EuiPopover
       id="lnsFieldListPanel__field"
+      className="lnsFieldItem__popoverAnchor"
       display="block"
       container={document.querySelector<HTMLElement>('.application') || undefined}
       button={
@@ -157,7 +160,7 @@ export function FieldItem(props: FieldItemProps) {
         >
           <EuiKeyboardAccessible>
             <div
-              className="lnsFieldItem__info"
+              className={`lnsFieldItem__info ${infoIsOpen ? 'lnsFieldItem__info-isOpen' : ''}`}
               data-test-subj={`lnsFieldListPanelField-${field.name}`}
               onClick={() => {
                 togglePopover();
@@ -167,12 +170,9 @@ export function FieldItem(props: FieldItemProps) {
                   togglePopover();
                 }
               }}
-              title={i18n.translate('xpack.lens.indexPattern.fieldStatsButton', {
-                defaultMessage: 'Click or Enter for more information about {fieldName}',
-                values: { fieldName: field.name },
-              })}
-              aria-label={i18n.translate('xpack.lens.indexPattern.fieldStatsButton', {
-                defaultMessage: 'Click or Enter for more information about {fieldName}',
+              aria-label={i18n.translate('xpack.lens.indexPattern.fieldStatsButtonAriaLabel', {
+                defaultMessage:
+                  'Click or press Enter for information about {fieldName}. Or, drag field into visualization.',
                 values: { fieldName: field.name },
               })}
             >
@@ -181,6 +181,18 @@ export function FieldItem(props: FieldItemProps) {
               <span className="lnsFieldItem__name" title={field.name}>
                 {wrappableHighlightableFieldName}
               </span>
+
+              <EuiIconTip
+                anchorClassName="lnsFieldItem__infoIcon"
+                content={i18n.translate('xpack.lens.indexPattern.fieldStatsButton', {
+                  defaultMessage:
+                    'Click for information about {fieldName}. Or, drag field into visualization.',
+                  values: { fieldName: field.name },
+                })}
+                type="iInCircle"
+                color="subdued"
+                size="s"
+              />
             </div>
           </EuiKeyboardAccessible>
         </DragDrop>
@@ -260,7 +272,8 @@ function FieldItemPopoverContents(props: State & FieldItemProps) {
   if (histogram && histogram.buckets.length && topValues && topValues.buckets.length) {
     title = (
       <EuiButtonGroup
-        buttonSize="s"
+        className="lnsFieldItem__popoverButtonGroup"
+        buttonSize="compressed"
         isFullWidth
         legend={i18n.translate('xpack.lens.indexPattern.fieldStatsDisplayToggle', {
           defaultMessage: 'Toggle either the',
@@ -268,7 +281,7 @@ function FieldItemPopoverContents(props: State & FieldItemProps) {
         options={[
           {
             label: i18n.translate('xpack.lens.indexPattern.fieldTopValuesLabel', {
-              defaultMessage: 'Top Values',
+              defaultMessage: 'Top values',
             }),
             id: 'topValues',
           },
@@ -297,7 +310,7 @@ function FieldItemPopoverContents(props: State & FieldItemProps) {
     title = (
       <>
         {i18n.translate('xpack.lens.indexPattern.fieldTopValuesLabel', {
-          defaultMessage: 'Top Values',
+          defaultMessage: 'Top values',
         })}
       </>
     );
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/indexpattern.test.ts b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/indexpattern.test.ts
index 3576916e818687..98d6ed6f26869d 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/indexpattern.test.ts
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/indexpattern.test.ts
@@ -5,10 +5,7 @@
  */
 
 import chromeMock from 'ui/chrome';
-import { data as dataMock } from '../../../../../../src/legacy/core_plugins/data/public/setup';
 import { Storage } from 'ui/storage';
-import { functionsRegistry } from '../../../../../../src/legacy/core_plugins/interpreter/public/registries';
-import { SavedObjectsClientContract } from 'src/core/public';
 import {
   getIndexPatternDatasource,
   IndexPatternPersistedState,
@@ -25,7 +22,6 @@ jest.mock('../id_generator');
 jest.mock('ui/chrome');
 // Contains old and new platform data plugins, used for interpreter and filter ratio
 jest.mock('ui/new_platform');
-jest.mock('plugins/data/setup', () => ({ data: { query: { ui: {} } } }));
 
 const expectedIndexPatterns = {
   1: {
@@ -138,10 +134,7 @@ describe('IndexPattern Data Source', () => {
     indexPatternDatasource = getIndexPatternDatasource({
       chrome: chromeMock,
       storage: {} as Storage,
-      interpreter: { functionsRegistry },
-      core: coreMock.createSetup(),
-      data: dataMock,
-      savedObjectsClient: {} as SavedObjectsClientContract,
+      core: coreMock.createStart(),
     });
 
     persistedState = {
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/indexpattern.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/indexpattern.tsx
index afdbcf5b684c79..f285de4dcbf9db 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/indexpattern.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/indexpattern.tsx
@@ -8,7 +8,7 @@ import _ from 'lodash';
 import React from 'react';
 import { render } from 'react-dom';
 import { I18nProvider } from '@kbn/i18n/react';
-import { CoreSetup, SavedObjectsClientContract } from 'src/core/public';
+import { CoreStart } from 'src/core/public';
 import { Storage } from 'ui/storage';
 import { i18n } from '@kbn/i18n';
 import {
@@ -20,7 +20,7 @@ import {
 import { getIndexPatterns } from './loader';
 import { toExpression } from './to_expression';
 import { IndexPatternDimensionPanel } from './dimension_panel';
-import { IndexPatternDatasourcePluginPlugins } from './plugin';
+import { IndexPatternDatasourceSetupPlugins } from './plugin';
 import { IndexPatternDataPanel } from './datapanel';
 import {
   getDatasourceSuggestionsForField,
@@ -182,14 +182,14 @@ function removeProperty<T>(prop: string, object: Record<string, T>): Record<stri
 }
 
 export function getIndexPatternDatasource({
-  core,
   chrome,
+  core,
   storage,
-  savedObjectsClient,
-}: IndexPatternDatasourcePluginPlugins & {
-  core: CoreSetup;
+}: Pick<IndexPatternDatasourceSetupPlugins, 'chrome'> & {
+  // Core start is being required here because it contains the savedObject client
+  // In the new platform, this plugin wouldn't be initialized until after setup
+  core: CoreStart;
   storage: Storage;
-  savedObjectsClient: SavedObjectsClientContract;
 }) {
   const uiSettings = chrome.getUiSettingsClient();
   // Not stateful. State is persisted to the frame
@@ -307,7 +307,7 @@ export function getIndexPatternDatasource({
                 setState={setState}
                 uiSettings={uiSettings}
                 storage={storage}
-                savedObjectsClient={savedObjectsClient}
+                savedObjectsClient={core.savedObjects.client}
                 layerId={props.layerId}
                 http={core.http}
                 uniqueLabel={columnLabelMap[props.columnId]}
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/indexpattern_suggestions.test.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/indexpattern_suggestions.test.tsx
index 79847223631498..b7e23b36d55c3d 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/indexpattern_suggestions.test.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/indexpattern_suggestions.test.tsx
@@ -5,9 +5,6 @@
  */
 
 import chromeMock from 'ui/chrome';
-import { data as dataMock } from '../../../../../../src/legacy/core_plugins/data/public/setup';
-import { functionsRegistry } from '../../../../../../src/legacy/core_plugins/interpreter/public/registries';
-import { SavedObjectsClientContract } from 'src/core/public';
 import {
   getIndexPatternDatasource,
   IndexPatternPersistedState,
@@ -135,12 +132,9 @@ describe('IndexPattern Data Source suggestions', () => {
 
   beforeEach(() => {
     indexPatternDatasource = getIndexPatternDatasource({
-      core: coreMock.createSetup(),
+      core: coreMock.createStart(),
       chrome: chromeMock,
       storage: {} as Storage,
-      interpreter: { functionsRegistry },
-      data: dataMock,
-      savedObjectsClient: {} as SavedObjectsClientContract,
     });
 
     persistedState = {
@@ -1037,7 +1031,7 @@ describe('IndexPattern Data Source suggestions', () => {
               {
                 columnId: 'col2',
                 operation: {
-                  label: 'Date Histogram of timestamp',
+                  label: 'Date histogram of timestamp',
                   dataType: 'date',
                   isBucketed: true,
                   scale: 'interval',
@@ -1113,7 +1107,7 @@ describe('IndexPattern Data Source suggestions', () => {
               {
                 columnId: 'newCol',
                 operation: {
-                  label: 'Date Histogram of timestamp',
+                  label: 'Date histogram of timestamp',
                   dataType: 'date',
                   isBucketed: true,
                   scale: 'interval',
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/layerpanel.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/layerpanel.tsx
index 0fa2fb487b9c4d..e988df754d8f4a 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/layerpanel.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/layerpanel.tsx
@@ -23,7 +23,9 @@ export function LayerPanel({ state, setState, layerId }: IndexPatternLayerPanelP
         data-test-subj="indexPattern-switcher"
         trigger={{
           label: state.indexPatterns[state.layers[layerId].indexPatternId].title,
+          title: state.indexPatterns[state.layers[layerId].indexPatternId].title,
           'data-test-subj': 'lns_layerIndexPatternLabel',
+          size: 'xs',
         }}
         layer={state.layers[layerId]}
         indexPatterns={state.indexPatterns}
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/date_histogram.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/date_histogram.tsx
index 9558a141ad7a00..ba48a3c2f20325 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/date_histogram.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/date_histogram.tsx
@@ -31,7 +31,7 @@ const FixedEuiRange = (EuiRange as unknown) as React.ComponentType<
 
 function ofName(name: string) {
   return i18n.translate('xpack.lens.indexPattern.dateHistogramOf', {
-    defaultMessage: 'Date Histogram of {name}',
+    defaultMessage: 'Date histogram of {name}',
     values: { name },
   });
 }
@@ -51,7 +51,7 @@ export interface DateHistogramIndexPatternColumn extends FieldBasedIndexPatternC
 export const dateHistogramOperation: OperationDefinition<DateHistogramIndexPatternColumn> = {
   type: 'date_histogram',
   displayName: i18n.translate('xpack.lens.indexPattern.dateHistogram', {
-    defaultMessage: 'Date Histogram',
+    defaultMessage: 'Date histogram',
   }),
   getPossibleOperationForField: ({ aggregationRestrictions, aggregatable, type }) => {
     if (
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/filter_ratio.test.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/filter_ratio.test.tsx
index fb12910b7517d2..7c01a34fca2db4 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/filter_ratio.test.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/filter_ratio.test.tsx
@@ -44,7 +44,7 @@ describe('filter_ratio', () => {
           columnOrder: ['col1'],
           columns: {
             col1: {
-              label: 'Filter Ratio',
+              label: 'Filter ratio',
               dataType: 'number',
               isBucketed: false,
 
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/filter_ratio.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/filter_ratio.tsx
index 32da61a95beb8c..a6689210be858b 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/filter_ratio.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/filter_ratio.tsx
@@ -18,7 +18,7 @@ import { OperationDefinition } from '.';
 import { BaseIndexPatternColumn } from './column_types';
 
 const filterRatioLabel = i18n.translate('xpack.lens.indexPattern.filterRatio', {
-  defaultMessage: 'Filter Ratio',
+  defaultMessage: 'Filter ratio',
 });
 
 export interface FilterRatioIndexPatternColumn extends BaseIndexPatternColumn {
@@ -35,7 +35,7 @@ export const filterRatioOperation: OperationDefinition<FilterRatioIndexPatternCo
   type: 'filter_ratio',
   priority: 1,
   displayName: i18n.translate('xpack.lens.indexPattern.filterRatio', {
-    defaultMessage: 'Filter Ratio',
+    defaultMessage: 'Filter ratio',
   }),
   getPossibleOperationForDocument: () => {
     return {
@@ -80,16 +80,7 @@ export const filterRatioOperation: OperationDefinition<FilterRatioIndexPatternCo
     // TODO parse the KQL tree and check whether this would work out
     return false;
   },
-  paramEditor: ({
-    state,
-    setState,
-    currentColumn,
-    uiSettings,
-    storage,
-    layerId,
-    savedObjectsClient,
-    http,
-  }) => {
+  paramEditor: ({ state, setState, currentColumn, layerId }) => {
     const [hasDenominator, setDenominator] = useState(
       !isEqual(currentColumn.params.denominator, initialQuery)
     );
@@ -102,14 +93,8 @@ export const filterRatioOperation: OperationDefinition<FilterRatioIndexPatternCo
           })}
         >
           <QueryBarInput
-            appName={'lens'}
             indexPatterns={[state.indexPatterns[state.layers[layerId].indexPatternId].title]}
             query={currentColumn.params.numerator}
-            screenTitle={''}
-            store={storage}
-            uiSettings={uiSettings}
-            savedObjectsClient={savedObjectsClient}
-            http={http}
             onChange={(newQuery: Query) => {
               setState(
                 updateColumnParam({
@@ -168,14 +153,8 @@ export const filterRatioOperation: OperationDefinition<FilterRatioIndexPatternCo
         >
           {hasDenominator ? (
             <QueryBarInput
-              appName={'lens'}
               indexPatterns={[state.indexPatterns[state.layers[layerId].indexPatternId].title]}
               query={currentColumn.params.denominator}
-              screenTitle={''}
-              store={storage}
-              uiSettings={uiSettings}
-              savedObjectsClient={savedObjectsClient}
-              http={http}
               onChange={(newQuery: Query) => {
                 setState(
                   updateColumnParam({
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/terms.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/terms.tsx
index 31f70eb6fb3bba..b26608086bd690 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/terms.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/terms.tsx
@@ -51,7 +51,7 @@ export interface TermsIndexPatternColumn extends FieldBasedIndexPatternColumn {
 export const termsOperation: OperationDefinition<TermsIndexPatternColumn> = {
   type: 'terms',
   displayName: i18n.translate('xpack.lens.indexPattern.terms', {
-    defaultMessage: 'Top Values',
+    defaultMessage: 'Top values',
   }),
   getPossibleOperationForField: ({ aggregationRestrictions, aggregatable, type }) => {
     if (
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/operations.test.ts b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/operations.test.ts
index 736a6f712d3468..6307a8f0f68d16 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/operations.test.ts
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/operations.test.ts
@@ -154,7 +154,7 @@ describe('getOperationTypesForField', () => {
           columnOrder: ['col1'],
           columns: {
             col1: {
-              label: 'Date Histogram of timestamp',
+              label: 'Date histogram of timestamp',
               dataType: 'date',
               isBucketed: true,
 
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/plugin.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/plugin.tsx
index 581c08f832b67d..7e2956cf2bb4b6 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/plugin.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/plugin.tsx
@@ -9,22 +9,20 @@ import { CoreSetup } from 'src/core/public';
 // The following dependencies on ui/* and src/legacy/core_plugins must be mocked when testing
 import chrome, { Chrome } from 'ui/chrome';
 import { Storage } from 'ui/storage';
-import { npSetup } from 'ui/new_platform';
+import { npSetup, npStart } from 'ui/new_platform';
 import { ExpressionFunction } from '../../../../../../src/legacy/core_plugins/interpreter/public';
 import { functionsRegistry } from '../../../../../../src/legacy/core_plugins/interpreter/public/registries';
 import { getIndexPatternDatasource } from './indexpattern';
 import { renameColumns } from './rename_columns';
 import { calculateFilterRatio } from './filter_ratio';
-import { setup as dataSetup } from '../../../../../../src/legacy/core_plugins/data/public/legacy';
 
 // TODO these are intermediary types because interpreter is not typed yet
 // They can get replaced by references to the real interfaces as soon as they
 // are available
 
-export interface IndexPatternDatasourcePluginPlugins {
+export interface IndexPatternDatasourceSetupPlugins {
   chrome: Chrome;
   interpreter: InterpreterSetup;
-  data: typeof dataSetup;
 }
 
 export interface InterpreterSetup {
@@ -37,17 +35,9 @@ export interface InterpreterSetup {
 class IndexPatternDatasourcePlugin {
   constructor() {}
 
-  setup(core: CoreSetup, { interpreter, data }: IndexPatternDatasourcePluginPlugins) {
+  setup(core: CoreSetup, { interpreter }: IndexPatternDatasourceSetupPlugins) {
     interpreter.functionsRegistry.register(() => renameColumns);
     interpreter.functionsRegistry.register(() => calculateFilterRatio);
-    return getIndexPatternDatasource({
-      core,
-      chrome,
-      interpreter,
-      data,
-      storage: new Storage(localStorage),
-      savedObjectsClient: chrome.getSavedObjectsClient(),
-    });
   }
 
   stop() {}
@@ -55,12 +45,18 @@ class IndexPatternDatasourcePlugin {
 
 const plugin = new IndexPatternDatasourcePlugin();
 
-export const indexPatternDatasourceSetup = () =>
+export const indexPatternDatasourceSetup = () => {
   plugin.setup(npSetup.core, {
     chrome,
     interpreter: {
       functionsRegistry,
     },
-    data: dataSetup,
   });
+
+  return getIndexPatternDatasource({
+    core: npStart.core,
+    chrome,
+    storage: new Storage(localStorage),
+  });
+};
 export const indexPatternDatasourceStop = () => plugin.stop();
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/state_helpers.test.ts b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/state_helpers.test.ts
index 9023173ab95dfe..1b98fa2b300054 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/state_helpers.test.ts
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/state_helpers.test.ts
@@ -367,7 +367,7 @@ describe('state_helpers', () => {
       expect(
         getColumnOrder({
           col1: {
-            label: 'Top Values of category',
+            label: 'Top values of category',
             dataType: 'string',
             isBucketed: true,
 
@@ -392,7 +392,7 @@ describe('state_helpers', () => {
             sourceField: 'bytes',
           },
           col3: {
-            label: 'Date Histogram of timestamp',
+            label: 'Date histogram of timestamp',
             dataType: 'date',
             isBucketed: true,
 
@@ -411,7 +411,7 @@ describe('state_helpers', () => {
       expect(
         getColumnOrder({
           col1: {
-            label: 'Top Values of category',
+            label: 'Top values of category',
             dataType: 'string',
             isBucketed: true,
 
@@ -438,7 +438,7 @@ describe('state_helpers', () => {
             suggestedPriority: 0,
           },
           col3: {
-            label: 'Date Histogram of timestamp',
+            label: 'Date histogram of timestamp',
             dataType: 'date',
             isBucketed: true,
 
diff --git a/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/index.scss b/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/index.scss
new file mode 100644
index 00000000000000..23390315399971
--- /dev/null
+++ b/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/index.scss
@@ -0,0 +1,9 @@
+.lnsMetricExpression__container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
diff --git a/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_expression.test.tsx b/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_expression.test.tsx
index ccda4fb3484ad0..f82def178261b0 100644
--- a/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_expression.test.tsx
+++ b/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_expression.test.tsx
@@ -53,18 +53,8 @@ describe('metric_expression', () => {
       expect(shallow(<MetricChart data={data} args={args} formatFactory={x => x as FieldFormat} />))
         .toMatchInlineSnapshot(`
         <VisualizationContainer
+          className="lnsMetricExpression__container"
           reportTitle="My fanci metric chart"
-          style={
-            Object {
-              "alignItems": "center",
-              "display": "flex",
-              "flexDirection": "column",
-              "justifyContent": "center",
-              "maxHeight": "100%",
-              "maxWidth": "100%",
-              "textAlign": "center",
-            }
-          }
         >
           <AutoScale>
             <div
@@ -105,35 +95,25 @@ describe('metric_expression', () => {
           />
         )
       ).toMatchInlineSnapshot(`
-                <VisualizationContainer
-                  reportTitle="My fanci metric chart"
-                  style={
-                    Object {
-                      "alignItems": "center",
-                      "display": "flex",
-                      "flexDirection": "column",
-                      "justifyContent": "center",
-                      "maxHeight": "100%",
-                      "maxWidth": "100%",
-                      "textAlign": "center",
-                    }
-                  }
-                >
-                  <AutoScale>
-                    <div
-                      data-test-subj="lns_metric_value"
-                      style={
-                        Object {
-                          "fontSize": "60pt",
-                          "fontWeight": 600,
-                        }
-                      }
-                    >
-                      10110
-                    </div>
-                  </AutoScale>
-                </VisualizationContainer>
-            `);
+        <VisualizationContainer
+          className="lnsMetricExpression__container"
+          reportTitle="My fanci metric chart"
+        >
+          <AutoScale>
+            <div
+              data-test-subj="lns_metric_value"
+              style={
+                Object {
+                  "fontSize": "60pt",
+                  "fontWeight": 600,
+                }
+              }
+            >
+              10110
+            </div>
+          </AutoScale>
+        </VisualizationContainer>
+      `);
     });
   });
 });
diff --git a/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_expression.tsx b/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_expression.tsx
index 6abaf7d63d54dd..68de585771a798 100644
--- a/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_expression.tsx
+++ b/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_expression.tsx
@@ -106,18 +106,7 @@ export function MetricChart({
   }
 
   return (
-    <VisualizationContainer
-      reportTitle={title}
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        alignItems: 'center',
-        maxWidth: '100%',
-        maxHeight: '100%',
-        textAlign: 'center',
-      }}
-    >
+    <VisualizationContainer reportTitle={title} className="lnsMetricExpression__container">
       <AutoScale>
         <div data-test-subj="lns_metric_value" style={{ fontSize: '60pt', fontWeight: 600 }}>
           {value}
diff --git a/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_suggestions.test.ts b/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_suggestions.test.ts
index 066a148dc2f7db..770d8594172f1d 100644
--- a/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_suggestions.test.ts
+++ b/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_suggestions.test.ts
@@ -97,7 +97,7 @@ describe('metric_suggestions', () => {
     expect(rest).toHaveLength(0);
     expect(suggestion).toMatchInlineSnapshot(`
       Object {
-        "previewIcon": "visMetric",
+        "previewIcon": "test-file-stub",
         "score": 0.5,
         "state": Object {
           "accessor": "bytes",
diff --git a/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_suggestions.ts b/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_suggestions.ts
index 6d4ed21c0983bd..f2b655a288270e 100644
--- a/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_suggestions.ts
+++ b/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_suggestions.ts
@@ -6,6 +6,7 @@
 
 import { SuggestionRequest, VisualizationSuggestion, TableSuggestion } from '../types';
 import { State } from './types';
+import chartMetricSVG from '../assets/chart_metric.svg';
 
 /**
  * Generate suggestions for the metric chart.
@@ -40,7 +41,7 @@ function getSuggestion(table: TableSuggestion): VisualizationSuggestion<State> {
   return {
     title,
     score: 0.5,
-    previewIcon: 'visMetric',
+    previewIcon: chartMetricSVG,
     state: {
       layerId: table.layerId,
       accessor: col.columnId,
diff --git a/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_visualization.tsx b/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_visualization.tsx
index d17c77e64c21aa..00e945c0ce6e5b 100644
--- a/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_visualization.tsx
+++ b/x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_visualization.tsx
@@ -14,6 +14,7 @@ import { MetricConfigPanel } from './metric_config_panel';
 import { Visualization, FramePublicAPI } from '../types';
 import { State, PersistableState } from './types';
 import { generateId } from '../id_generator';
+import chartMetricSVG from '../assets/chart_metric.svg';
 
 const toExpression = (
   state: State,
@@ -46,6 +47,7 @@ export const metricVisualization: Visualization<State, PersistableState> = {
     {
       id: 'lnsMetric',
       icon: 'visMetric',
+      largeIcon: chartMetricSVG,
       label: i18n.translate('xpack.lens.metric.label', {
         defaultMessage: 'Metric',
       }),
@@ -54,7 +56,7 @@ export const metricVisualization: Visualization<State, PersistableState> = {
 
   getDescription() {
     return {
-      icon: 'visMetric',
+      icon: chartMetricSVG,
       label: i18n.translate('xpack.lens.metric.label', {
         defaultMessage: 'Metric',
       }),
diff --git a/x-pack/legacy/plugins/lens/public/persistence/saved_object_store.ts b/x-pack/legacy/plugins/lens/public/persistence/saved_object_store.ts
index 5fa7e3f0aca4ac..77155b2add87a7 100644
--- a/x-pack/legacy/plugins/lens/public/persistence/saved_object_store.ts
+++ b/x-pack/legacy/plugins/lens/public/persistence/saved_object_store.ts
@@ -8,6 +8,7 @@
 import { SavedObjectAttributes } from 'src/core/server';
 import { Filter } from '@kbn/es-query';
 import { Query } from 'src/plugins/data/common';
+import { FramePublicAPI } from '../types';
 
 export interface Document {
   id?: string;
@@ -23,6 +24,7 @@ export interface Document {
     visualization: unknown;
     query: Query;
     filters: Filter[];
+    dateRange?: FramePublicAPI['dateRange'];
   };
 }
 
diff --git a/x-pack/legacy/plugins/lens/public/register_vis_type_alias.ts b/x-pack/legacy/plugins/lens/public/register_vis_type_alias.ts
index 701c351b8b1492..06e62bed02d5cf 100644
--- a/x-pack/legacy/plugins/lens/public/register_vis_type_alias.ts
+++ b/x-pack/legacy/plugins/lens/public/register_vis_type_alias.ts
@@ -18,7 +18,7 @@ visualizations.types.registerAlias({
   description: i18n.translate('xpack.lens.visTypeAlias.description', {
     defaultMessage: `Lens is a simpler way to create basic visualizations`,
   }),
-  icon: 'faceHappy',
+  icon: 'lensApp',
   appExtensions: {
     visualizations: {
       docTypes: ['lens'],
@@ -30,7 +30,7 @@ visualizations.types.registerAlias({
           id,
           title,
           editUrl: getEditPath(id),
-          icon: 'faceHappy',
+          icon: 'lensApp',
           isExperimental: true,
           savedObjectType: type,
           typeTitle: i18n.translate('xpack.lens.visTypeAlias.type', { defaultMessage: 'Lens' }),
diff --git a/x-pack/legacy/plugins/lens/public/types.ts b/x-pack/legacy/plugins/lens/public/types.ts
index 217a694a1861cb..c15bcb89e517f6 100644
--- a/x-pack/legacy/plugins/lens/public/types.ts
+++ b/x-pack/legacy/plugins/lens/public/types.ts
@@ -5,9 +5,11 @@
  */
 
 import { Ast } from '@kbn/interpreter/common';
-import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { IconType } from '@elastic/eui/src/components/icon/icon';
+import { Filter } from '@kbn/es-query';
 import { CoreSetup } from 'src/core/public';
 import { Query } from 'src/plugins/data/common';
+import { SavedQuery } from 'src/legacy/core_plugins/data/public';
 import { KibanaDatatable } from '../../../../../src/legacy/core_plugins/interpreter/common';
 import { DragContextState } from './drag_drop';
 import { Document } from './persistence';
@@ -25,9 +27,14 @@ export interface EditorFrameProps {
     toDate: string;
   };
   query: Query;
+  filters: Filter[];
+  savedQuery?: SavedQuery;
 
   // Frame loader (app or embeddable) is expected to call this when it loads and updates
-  onChange: (newState: { indexPatternTitles: string[]; doc: Document }) => void;
+  onChange: (newState: {
+    filterableIndexPatterns: DatasourceMetaData['filterableIndexPatterns'];
+    doc: Document;
+  }) => void;
 }
 export interface EditorFrameInstance {
   mount: (element: Element, props: EditorFrameProps) => void;
@@ -165,6 +172,7 @@ export interface DatasourceDataPanelProps<T = unknown> {
   core: Pick<CoreSetup, 'http' | 'notifications' | 'uiSettings'>;
   query: Query;
   dateRange: FramePublicAPI['dateRange'];
+  filters: Filter[];
 }
 
 // The only way a visualization has to restrict the query building
@@ -273,16 +281,18 @@ export interface VisualizationSuggestion<T = unknown> {
   /**
    * An EUI icon type shown instead of the preview expression.
    */
-  previewIcon: string;
+  previewIcon: IconType;
 }
 
 export interface FramePublicAPI {
   datasourceLayers: Record<string, DatasourcePublicAPI>;
+
   dateRange: {
     fromDate: string;
     toDate: string;
   };
   query: Query;
+  filters: Filter[];
 
   // Adds a new layer. This has a side effect of updating the datasource state
   addNewLayer: () => string;
@@ -291,7 +301,8 @@ export interface FramePublicAPI {
 
 export interface VisualizationType {
   id: string;
-  icon?: EuiIconType | string;
+  icon?: IconType;
+  largeIcon?: IconType;
   label: string;
 }
 
@@ -303,7 +314,7 @@ export interface Visualization<T = unknown, P = unknown> {
   getDescription: (
     state: T
   ) => {
-    icon?: EuiIconType | string;
+    icon?: IconType;
     label: string;
   };
 
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/__snapshots__/xy_expression.test.tsx.snap b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/__snapshots__/xy_expression.test.tsx.snap
index 048cbb0811432d..f9a5a73eda2702 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/__snapshots__/xy_expression.test.tsx.snap
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/__snapshots__/xy_expression.test.tsx.snap
@@ -2,7 +2,6 @@
 
 exports[`xy_expression XYChart component it renders area 1`] = `
 <Chart
-  className="lnsXyExpression__chart"
   renderer="canvas"
 >
   <inject-SettingsComponent-with-chartStore
@@ -65,7 +64,6 @@ exports[`xy_expression XYChart component it renders area 1`] = `
 
 exports[`xy_expression XYChart component it renders bar 1`] = `
 <Chart
-  className="lnsXyExpression__chart"
   renderer="canvas"
 >
   <inject-SettingsComponent-with-chartStore
@@ -128,7 +126,6 @@ exports[`xy_expression XYChart component it renders bar 1`] = `
 
 exports[`xy_expression XYChart component it renders horizontal bar 1`] = `
 <Chart
-  className="lnsXyExpression__chart"
   renderer="canvas"
 >
   <inject-SettingsComponent-with-chartStore
@@ -191,7 +188,6 @@ exports[`xy_expression XYChart component it renders horizontal bar 1`] = `
 
 exports[`xy_expression XYChart component it renders line 1`] = `
 <Chart
-  className="lnsXyExpression__chart"
   renderer="canvas"
 >
   <inject-SettingsComponent-with-chartStore
@@ -254,7 +250,6 @@ exports[`xy_expression XYChart component it renders line 1`] = `
 
 exports[`xy_expression XYChart component it renders stacked area 1`] = `
 <Chart
-  className="lnsXyExpression__chart"
   renderer="canvas"
 >
   <inject-SettingsComponent-with-chartStore
@@ -321,7 +316,6 @@ exports[`xy_expression XYChart component it renders stacked area 1`] = `
 
 exports[`xy_expression XYChart component it renders stacked bar 1`] = `
 <Chart
-  className="lnsXyExpression__chart"
   renderer="canvas"
 >
   <inject-SettingsComponent-with-chartStore
@@ -388,7 +382,6 @@ exports[`xy_expression XYChart component it renders stacked bar 1`] = `
 
 exports[`xy_expression XYChart component it renders stacked horizontal bar 1`] = `
 <Chart
-  className="lnsXyExpression__chart"
   renderer="canvas"
 >
   <inject-SettingsComponent-with-chartStore
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/__snapshots__/xy_visualization.test.ts.snap b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/__snapshots__/xy_visualization.test.ts.snap
index 12902f548e45b7..76af8328673add 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/__snapshots__/xy_visualization.test.ts.snap
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/__snapshots__/xy_visualization.test.ts.snap
@@ -5,9 +5,6 @@ Object {
   "chain": Array [
     Object {
       "arguments": Object {
-        "isHorizontal": Array [
-          false,
-        ],
         "layers": Array [
           Object {
             "chain": Array [
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/_xy_expression.scss b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/_xy_expression.scss
index 20e696025becd1..579f66f99b9fbf 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/_xy_expression.scss
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/_xy_expression.scss
@@ -1,5 +1,6 @@
-.lnsXyExpression__chart {
+.lnsXyExpression__container {
   height: 100%;
+  width: 100%;
 }
 
 .lnsChart__empty {
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/state_helpers.ts b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/state_helpers.ts
new file mode 100644
index 00000000000000..eb7fd688bab5a4
--- /dev/null
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/state_helpers.ts
@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { SeriesType, visualizationTypes } from './types';
+
+export function isHorizontalSeries(seriesType: SeriesType) {
+  return seriesType === 'bar_horizontal' || seriesType === 'bar_horizontal_stacked';
+}
+
+export function isHorizontalChart(layers: Array<{ seriesType: SeriesType }>) {
+  return layers.every(l => isHorizontalSeries(l.seriesType));
+}
+
+export function getIconForSeries(type: SeriesType): EuiIconType {
+  const definition = visualizationTypes.find(t => t.id === type);
+
+  if (!definition) {
+    throw new Error(`Unknown series type ${type}`);
+  }
+
+  return (definition.icon as EuiIconType) || 'empty';
+}
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/to_expression.ts b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/to_expression.ts
index ff5f7eb08f2db0..f0e932d14f281b 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/to_expression.ts
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/to_expression.ts
@@ -131,7 +131,6 @@ export const buildExpression = (
       arguments: {
         xTitle: [xTitle],
         yTitle: [yTitle],
-        isHorizontal: [state.isHorizontal],
         legend: [
           {
             type: 'expression',
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/types.ts b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/types.ts
index 742cc36be4ea66..de81cc208070af 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/types.ts
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/types.ts
@@ -10,6 +10,15 @@ import {
   ExpressionFunction,
   ArgumentType,
 } from '../../../../../../src/legacy/core_plugins/interpreter/public';
+
+import chartAreaSVG from '../assets/chart_area.svg';
+import chartAreaStackedSVG from '../assets/chart_area_stacked.svg';
+import chartBarSVG from '../assets/chart_bar.svg';
+import chartBarStackedSVG from '../assets/chart_bar_stacked.svg';
+import chartBarHorizontalSVG from '../assets/chart_bar_horizontal.svg';
+import chartBarHorizontalStackedSVG from '../assets/chart_bar_horizontal_stacked.svg';
+import chartLineSVG from '../assets/chart_line.svg';
+
 import { VisualizationType } from '..';
 
 export interface LegendConfig {
@@ -175,7 +184,14 @@ export const layerConfig: ExpressionFunction<
   },
 };
 
-export type SeriesType = 'bar' | 'line' | 'area' | 'bar_stacked' | 'area_stacked';
+export type SeriesType =
+  | 'bar'
+  | 'bar_horizontal'
+  | 'line'
+  | 'area'
+  | 'bar_stacked'
+  | 'bar_horizontal_stacked'
+  | 'area_stacked';
 
 export interface LayerConfig {
   hide?: boolean;
@@ -199,7 +215,6 @@ export interface XYArgs {
   yTitle: string;
   legend: LegendConfig;
   layers: LayerArgs[];
-  isHorizontal: boolean;
 }
 
 // Persisted parts of the state
@@ -207,7 +222,6 @@ export interface XYState {
   preferredSeriesType: SeriesType;
   legend: LegendConfig;
   layers: LayerConfig[];
-  isHorizontal: boolean;
 }
 
 export type State = XYState;
@@ -217,20 +231,39 @@ export const visualizationTypes: VisualizationType[] = [
   {
     id: 'bar',
     icon: 'visBarVertical',
+    largeIcon: chartBarSVG,
     label: i18n.translate('xpack.lens.xyVisualization.barLabel', {
       defaultMessage: 'Bar',
     }),
   },
+  {
+    id: 'bar_horizontal',
+    icon: 'visBarHorizontal',
+    largeIcon: chartBarHorizontalSVG,
+    label: i18n.translate('xpack.lens.xyVisualization.barHorizontalLabel', {
+      defaultMessage: 'Horizontal Bar',
+    }),
+  },
   {
     id: 'bar_stacked',
-    icon: 'visBarVertical',
+    icon: 'visBarVerticalStacked',
+    largeIcon: chartBarStackedSVG,
     label: i18n.translate('xpack.lens.xyVisualization.stackedBarLabel', {
       defaultMessage: 'Stacked Bar',
     }),
   },
+  {
+    id: 'bar_horizontal_stacked',
+    icon: 'visBarHorizontalStacked',
+    largeIcon: chartBarHorizontalStackedSVG,
+    label: i18n.translate('xpack.lens.xyVisualization.stackedBarHorizontalLabel', {
+      defaultMessage: 'Stacked Horizontal Bar',
+    }),
+  },
   {
     id: 'line',
     icon: 'visLine',
+    largeIcon: chartLineSVG,
     label: i18n.translate('xpack.lens.xyVisualization.lineLabel', {
       defaultMessage: 'Line',
     }),
@@ -238,13 +271,15 @@ export const visualizationTypes: VisualizationType[] = [
   {
     id: 'area',
     icon: 'visArea',
+    largeIcon: chartAreaSVG,
     label: i18n.translate('xpack.lens.xyVisualization.areaLabel', {
       defaultMessage: 'Area',
     }),
   },
   {
     id: 'area_stacked',
-    icon: 'visArea',
+    icon: 'visAreaStacked',
+    largeIcon: chartAreaStackedSVG,
     label: i18n.translate('xpack.lens.xyVisualization.stackedAreaLabel', {
       defaultMessage: 'Stacked Area',
     }),
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_config_panel.test.tsx b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_config_panel.test.tsx
index ad08b8949f3b91..5cdf1031a22b04 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_config_panel.test.tsx
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_config_panel.test.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FormEvent } from 'react';
+import React from 'react';
 import { ReactWrapper } from 'enzyme';
 import { mountWithIntl as mount } from 'test_utils/enzyme_helpers';
 import { EuiButtonGroupProps } from '@elastic/eui';
@@ -15,7 +15,6 @@ import { Position } from '@elastic/charts';
 import { NativeRendererProps } from '../native_renderer';
 import { generateId } from '../id_generator';
 import { createMockFramePublicAPI, createMockDatasource } from '../editor_frame_plugin/mocks';
-import { act } from 'react-test-renderer';
 
 jest.mock('../id_generator');
 
@@ -28,7 +27,6 @@ describe('XYConfigPanel', () => {
     return {
       legend: { isVisible: true, position: Position.Right },
       preferredSeriesType: 'bar',
-      isHorizontal: false,
       layers: [
         {
           seriesType: 'bar',
@@ -64,50 +62,48 @@ describe('XYConfigPanel', () => {
     };
   });
 
-  test.skip('toggles axis position when going from horizontal bar to any other type', () => {});
   test.skip('allows toggling of legend visibility', () => {});
   test.skip('allows changing legend position', () => {});
   test.skip('allows toggling the y axis gridlines', () => {});
   test.skip('allows toggling the x axis gridlines', () => {});
 
-  test('puts the horizontal toggle in a popover', () => {
+  test('enables stacked chart types even when there is no split series', () => {
     const state = testState();
-    const setState = jest.fn();
     const component = mount(
       <XYConfigPanel
         dragDropContext={dragDropContext}
         frame={frame}
-        setState={setState}
-        state={state}
+        setState={jest.fn()}
+        state={{ ...state, layers: [{ ...state.layers[0], xAccessor: 'shazm' }] }}
       />
     );
 
-    component
-      .find(`[data-test-subj="lnsXY_chart_settings"]`)
+    openComponentPopover(component, 'first');
+
+    const options = component
+      .find('[data-test-subj="lnsXY_seriesType"]')
       .first()
-      .simulate('click');
+      .prop('options') as EuiButtonGroupProps['options'];
 
-    act(() => {
-      component
-        .find('[data-test-subj="lnsXY_chart_horizontal"]')
-        .first()
-        .prop('onChange')!({} as FormEvent);
-    });
+    expect(options!.map(({ id }) => id)).toEqual([
+      'bar',
+      'bar_stacked',
+      'line',
+      'area',
+      'area_stacked',
+    ]);
 
-    expect(setState).toHaveBeenCalledWith({
-      ...state,
-      isHorizontal: true,
-    });
+    expect(options!.filter(({ isDisabled }) => isDisabled).map(({ id }) => id)).toEqual([]);
   });
 
-  test('enables stacked chart types even when there is no split series', () => {
+  test('shows only horizontal bar options when in horizontal mode', () => {
     const state = testState();
     const component = mount(
       <XYConfigPanel
         dragDropContext={dragDropContext}
         frame={frame}
         setState={jest.fn()}
-        state={{ ...state, layers: [{ ...state.layers[0], xAccessor: 'shazm' }] }}
+        state={{ ...state, layers: [{ ...state.layers[0], seriesType: 'bar_horizontal' }] }}
       />
     );
 
@@ -118,14 +114,7 @@ describe('XYConfigPanel', () => {
       .first()
       .prop('options') as EuiButtonGroupProps['options'];
 
-    expect(options!.map(({ id }) => id)).toEqual([
-      'bar',
-      'bar_stacked',
-      'line',
-      'area',
-      'area_stacked',
-    ]);
-
+    expect(options!.map(({ id }) => id)).toEqual(['bar_horizontal', 'bar_horizontal_stacked']);
     expect(options!.filter(({ isDisabled }) => isDisabled).map(({ id }) => id)).toEqual([]);
   });
 
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_config_panel.tsx b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_config_panel.tsx
index 7170a41a168800..d6a014d9f80501 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_config_panel.tsx
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_config_panel.tsx
@@ -17,7 +17,6 @@ import {
   EuiPanel,
   EuiButtonIcon,
   EuiPopover,
-  EuiSwitch,
   EuiSpacer,
   EuiButtonEmpty,
   EuiPopoverFooter,
@@ -27,6 +26,7 @@ import { VisualizationProps, OperationMetadata } from '../types';
 import { NativeRenderer } from '../native_renderer';
 import { MultiColumnEditor } from '../multi_column_editor';
 import { generateId } from '../id_generator';
+import { isHorizontalChart, isHorizontalSeries } from './state_helpers';
 
 const isNumericMetric = (op: OperationMetadata) => !op.isBucketed && op.dataType === 'number';
 const isBucketed = (op: OperationMetadata) => op.isBucketed;
@@ -55,10 +55,12 @@ function newLayerState(seriesType: SeriesType, layerId: string): LayerConfig {
 
 function LayerSettings({
   layer,
+  horizontalOnly,
   setSeriesType,
   removeLayer,
 }: {
   layer: LayerConfig;
+  horizontalOnly: boolean;
   setSeriesType: (seriesType: SeriesType) => void;
   removeLayer: () => void;
 }) {
@@ -96,13 +98,16 @@ function LayerSettings({
           name="chartType"
           className="eui-displayInlineBlock"
           data-test-subj="lnsXY_seriesType"
-          options={visualizationTypes.map(t => ({
-            ...t,
-            iconType: t.icon || 'empty',
-          }))}
+          options={visualizationTypes
+            .filter(t => isHorizontalSeries(t.id as SeriesType) === horizontalOnly)
+            .map(t => ({
+              ...t,
+              iconType: t.icon || 'empty',
+            }))}
           idSelected={layer.seriesType}
           onChange={seriesType => setSeriesType(seriesType as SeriesType)}
           isIconOnly
+          buttonSize="compressed"
         />
       </EuiFormRow>
       <EuiPopoverFooter className="eui-textCenter">
@@ -113,8 +118,8 @@ function LayerSettings({
           data-test-subj="lnsXY_layer_remove"
           onClick={removeLayer}
         >
-          {i18n.translate('xpack.lens.xyChart.removeLayer', {
-            defaultMessage: 'Remove layer',
+          {i18n.translate('xpack.lens.xyChart.deleteLayer', {
+            defaultMessage: 'Delete layer',
           })}
         </EuiButtonEmpty>
       </EuiPopoverFooter>
@@ -124,44 +129,10 @@ function LayerSettings({
 
 export function XYConfigPanel(props: VisualizationProps<State>) {
   const { state, setState, frame } = props;
-  const [isChartOptionsOpen, setIsChartOptionsOpen] = useState(false);
+  const horizontalOnly = isHorizontalChart(state.layers);
 
   return (
     <EuiForm className="lnsConfigPanel">
-      <EuiPopover
-        id="lnsXY_chartConfig"
-        isOpen={isChartOptionsOpen}
-        closePopover={() => setIsChartOptionsOpen(false)}
-        button={
-          <EuiButtonIcon
-            iconType="gear"
-            size="s"
-            data-test-subj="lnsXY_chart_settings"
-            onClick={() => setIsChartOptionsOpen(!isChartOptionsOpen)}
-            aria-label={i18n.translate('xpack.lens.xyChart.chartSettings', {
-              defaultMessage: 'Chart Settings',
-            })}
-            title={i18n.translate('xpack.lens.xyChart.chartSettings', {
-              defaultMessage: 'Chart Settings',
-            })}
-          />
-        }
-      >
-        <EuiSwitch
-          label={i18n.translate('xpack.lens.xyChart.isHorizontalSwitch', {
-            defaultMessage: 'Rotate chart 90º',
-          })}
-          checked={state.isHorizontal}
-          onChange={() => {
-            setState({
-              ...state,
-              isHorizontal: !state.isHorizontal,
-            });
-          }}
-          data-test-subj="lnsXY_chart_horizontal"
-        />
-      </EuiPopover>
-
       {state.layers.map((layer, index) => (
         <EuiPanel
           className="lnsConfigPanel__panel"
@@ -173,6 +144,7 @@ export function XYConfigPanel(props: VisualizationProps<State>) {
             <EuiFlexItem grow={false}>
               <LayerSettings
                 layer={layer}
+                horizontalOnly={horizontalOnly}
                 setSeriesType={seriesType =>
                   setState(updateLayer(state, { ...layer, seriesType }, index))
                 }
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_expression.test.tsx b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_expression.test.tsx
index 0ac286c7bb83c7..8770ee5b5e1c9b 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_expression.test.tsx
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_expression.test.tsx
@@ -35,7 +35,6 @@ function sampleArgs() {
   const args: XYArgs = {
     xTitle: '',
     yTitle: '',
-    isHorizontal: false,
     legend: {
       isVisible: false,
       position: Position.Top,
@@ -161,7 +160,7 @@ describe('xy_expression', () => {
       const component = shallow(
         <XYChart
           data={data}
-          args={{ ...args, isHorizontal: true, layers: [{ ...args.layers[0], seriesType: 'bar' }] }}
+          args={{ ...args, layers: [{ ...args.layers[0], seriesType: 'bar_horizontal' }] }}
           formatFactory={getFormatSpy}
           timeZone="UTC"
         />
@@ -208,8 +207,7 @@ describe('xy_expression', () => {
           data={data}
           args={{
             ...args,
-            isHorizontal: true,
-            layers: [{ ...args.layers[0], seriesType: 'bar_stacked' }],
+            layers: [{ ...args.layers[0], seriesType: 'bar_horizontal_stacked' }],
           }}
           formatFactory={getFormatSpy}
           timeZone="UTC"
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_expression.tsx b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_expression.tsx
index 69ec1d646dcb52..43452ff4327677 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_expression.tsx
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_expression.tsx
@@ -27,6 +27,7 @@ import { IInterpreterRenderFunction } from '../../../../../../src/legacy/core_pl
 import { LensMultiTable } from '../types';
 import { XYArgs, SeriesType, visualizationTypes } from './types';
 import { VisualizationContainer } from '../visualization_container';
+import { isHorizontalChart } from './state_helpers';
 
 export interface XYChartProps {
   data: LensMultiTable;
@@ -75,10 +76,6 @@ export const xyChart: ExpressionFunction<'lens_xy_chart', LensMultiTable, XYArgs
       help: 'Layers of visual series',
       multi: true,
     },
-    isHorizontal: {
-      types: ['boolean'],
-      help: 'Render horizontally',
-    },
   },
   context: {
     types: ['lens_multitable'],
@@ -133,14 +130,14 @@ export function XYChartReportable(props: XYChartRenderProps) {
   }, []);
 
   return (
-    <VisualizationContainer isReady={isReady}>
+    <VisualizationContainer className="lnsXyExpression__container" isReady={isReady}>
       <MemoizedChart {...props} />
     </VisualizationContainer>
   );
 }
 
 export function XYChart({ data, args, formatFactory, timeZone }: XYChartRenderProps) {
-  const { legend, layers, isHorizontal } = args;
+  const { legend, layers } = args;
 
   if (Object.values(data.tables).every(table => table.rows.length === 0)) {
     const icon: IconType = layers.length > 0 ? getIconForSeriesType(layers[0].seriesType) : 'bar';
@@ -176,18 +173,20 @@ export function XYChart({ data, args, formatFactory, timeZone }: XYChartRenderPr
     }
   }
 
+  const shouldRotate = isHorizontalChart(layers);
+
   return (
-    <Chart className="lnsXyExpression__chart">
+    <Chart>
       <Settings
         showLegend={legend.isVisible}
         legendPosition={legend.position}
         showLegendDisplayValue={false}
-        rotation={isHorizontal ? 90 : 0}
+        rotation={shouldRotate ? 90 : 0}
       />
 
       <Axis
         id={getAxisId('x')}
-        position={isHorizontal ? Position.Left : Position.Bottom}
+        position={shouldRotate ? Position.Left : Position.Bottom}
         title={args.xTitle}
         showGridLines={false}
         hide={layers[0].hide}
@@ -196,7 +195,7 @@ export function XYChart({ data, args, formatFactory, timeZone }: XYChartRenderPr
 
       <Axis
         id={getAxisId('y')}
-        position={isHorizontal ? Position.Bottom : Position.Left}
+        position={shouldRotate ? Position.Bottom : Position.Left}
         title={args.yTitle}
         showGridLines={false}
         hide={layers[0].hide}
@@ -258,7 +257,10 @@ export function XYChart({ data, args, formatFactory, timeZone }: XYChartRenderPr
 
           return seriesType === 'line' ? (
             <LineSeries {...seriesProps} />
-          ) : seriesType === 'bar' || seriesType === 'bar_stacked' ? (
+          ) : seriesType === 'bar' ||
+            seriesType === 'bar_stacked' ||
+            seriesType === 'bar_horizontal' ||
+            seriesType === 'bar_horizontal_stacked' ? (
             <BarSeries {...seriesProps} />
           ) : (
             <AreaSeries {...seriesProps} />
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_suggestions.test.ts b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_suggestions.test.ts
index b015c930965141..a205fe433106aa 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_suggestions.test.ts
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_suggestions.test.ts
@@ -117,17 +117,17 @@ describe('xy_suggestions', () => {
 
     expect(rest).toHaveLength(0);
     expect(suggestionSubset(suggestion)).toMatchInlineSnapshot(`
-                  Array [
-                    Object {
-                      "seriesType": "area_stacked",
-                      "splitAccessor": "aaa",
-                      "x": "date",
-                      "y": Array [
-                        "bytes",
-                      ],
-                    },
-                  ]
-            `);
+      Array [
+        Object {
+          "seriesType": "bar_stacked",
+          "splitAccessor": "aaa",
+          "x": "date",
+          "y": Array [
+            "bytes",
+          ],
+        },
+      ]
+    `);
   });
 
   test('does not suggest multiple splits', () => {
@@ -161,18 +161,18 @@ describe('xy_suggestions', () => {
 
     expect(rest).toHaveLength(0);
     expect(suggestionSubset(suggestion)).toMatchInlineSnapshot(`
-                  Array [
-                    Object {
-                      "seriesType": "area_stacked",
-                      "splitAccessor": "product",
-                      "x": "date",
-                      "y": Array [
-                        "price",
-                        "quantity",
-                      ],
-                    },
-                  ]
-            `);
+      Array [
+        Object {
+          "seriesType": "bar_stacked",
+          "splitAccessor": "product",
+          "x": "date",
+          "y": Array [
+            "price",
+            "quantity",
+          ],
+        },
+      ]
+    `);
   });
 
   test('uses datasource provided title if available', () => {
@@ -199,7 +199,6 @@ describe('xy_suggestions', () => {
         changeType: 'reduced',
       },
       state: {
-        isHorizontal: false,
         legend: { isVisible: true, position: 'bottom' },
         preferredSeriesType: 'bar',
         layers: [
@@ -232,9 +231,43 @@ describe('xy_suggestions', () => {
     expect(suggestion.hide).toBeFalsy();
   });
 
-  test('suggests an area chart for unchanged table and existing bar chart on non-ordinal x axis', () => {
+  test('only makes a seriesType suggestion for unchanged table without split', () => {
+    (generateId as jest.Mock).mockReturnValueOnce('dummyCol');
+    const currentState: XYState = {
+      legend: { isVisible: true, position: 'bottom' },
+      preferredSeriesType: 'bar',
+      layers: [
+        {
+          accessors: ['price'],
+          layerId: 'first',
+          seriesType: 'bar',
+          splitAccessor: 'dummyCol',
+          xAccessor: 'date',
+        },
+      ],
+    };
+    const suggestions = getSuggestions({
+      table: {
+        isMultiRow: true,
+        columns: [numCol('price'), dateCol('date')],
+        layerId: 'first',
+        changeType: 'unchanged',
+      },
+      state: currentState,
+    });
+
+    expect(suggestions).toHaveLength(1);
+
+    expect(suggestions[0].state).toEqual({
+      ...currentState,
+      preferredSeriesType: 'line',
+      layers: [{ ...currentState.layers[0], seriesType: 'line' }],
+    });
+    expect(suggestions[0].title).toEqual('Line chart');
+  });
+
+  test('suggests seriesType and stacking when there is a split', () => {
     const currentState: XYState = {
-      isHorizontal: false,
       legend: { isVisible: true, position: 'bottom' },
       preferredSeriesType: 'bar',
       layers: [
@@ -247,7 +280,7 @@ describe('xy_suggestions', () => {
         },
       ],
     };
-    const [suggestion, ...rest] = getSuggestions({
+    const [seriesSuggestion, stackSuggestion, ...rest] = getSuggestions({
       table: {
         isMultiRow: true,
         columns: [numCol('price'), numCol('quantity'), dateCol('date'), strCol('product')],
@@ -257,20 +290,24 @@ describe('xy_suggestions', () => {
       state: currentState,
     });
 
-    expect(rest).toHaveLength(1);
-    expect(suggestion.state).toEqual({
+    expect(rest).toHaveLength(0);
+    expect(seriesSuggestion.state).toEqual({
       ...currentState,
-      preferredSeriesType: 'area',
-      layers: [{ ...currentState.layers[0], seriesType: 'area' }],
+      preferredSeriesType: 'line',
+      layers: [{ ...currentState.layers[0], seriesType: 'line' }],
     });
-    expect(suggestion.previewIcon).toEqual('visArea');
-    expect(suggestion.title).toEqual('Area chart');
+    expect(stackSuggestion.state).toEqual({
+      ...currentState,
+      preferredSeriesType: 'bar_stacked',
+      layers: [{ ...currentState.layers[0], seriesType: 'bar_stacked' }],
+    });
+    expect(seriesSuggestion.title).toEqual('Line chart');
+    expect(stackSuggestion.title).toEqual('Stacked');
   });
 
   test('suggests a flipped chart for unchanged table and existing bar chart on ordinal x axis', () => {
     (generateId as jest.Mock).mockReturnValueOnce('dummyCol');
     const currentState: XYState = {
-      isHorizontal: false,
       legend: { isVisible: true, position: 'bottom' },
       preferredSeriesType: 'bar',
       layers: [
@@ -293,58 +330,48 @@ describe('xy_suggestions', () => {
       state: currentState,
     });
 
-    expect(rest).toHaveLength(1);
-    expect(suggestion.state).toEqual({
-      ...currentState,
-      isHorizontal: true,
-    });
+    expect(rest).toHaveLength(0);
+    expect(suggestion.state.preferredSeriesType).toEqual('bar_horizontal');
+    expect(suggestion.state.layers.every(l => l.seriesType === 'bar_horizontal')).toBeTruthy();
     expect(suggestion.title).toEqual('Flip');
   });
 
-  test('suggests a stacked chart for unchanged table and unstacked chart', () => {
-    (generateId as jest.Mock).mockReturnValueOnce('dummyCol');
-    (generateId as jest.Mock).mockReturnValueOnce('dummyCol');
+  test('suggests stacking for unchanged table that has a split', () => {
     const currentState: XYState = {
-      isHorizontal: false,
       legend: { isVisible: true, position: 'bottom' },
       preferredSeriesType: 'bar',
       layers: [
         {
-          accessors: ['price', 'quantity'],
+          accessors: ['price'],
           layerId: 'first',
           seriesType: 'bar',
-          splitAccessor: 'dummyCol',
+          splitAccessor: 'date',
           xAccessor: 'product',
         },
       ],
     };
-    const suggestion = getSuggestions({
+    const suggestions = getSuggestions({
       table: {
         isMultiRow: true,
-        columns: [numCol('price'), numCol('quantity'), strCol('product')],
+        columns: [numCol('price'), dateCol('date'), strCol('product')],
         layerId: 'first',
         changeType: 'unchanged',
       },
       state: currentState,
-    })[1];
+    });
+
+    const suggestion = suggestions[suggestions.length - 1];
 
     expect(suggestion.state).toEqual({
       ...currentState,
       preferredSeriesType: 'bar_stacked',
-      layers: [
-        {
-          ...currentState.layers[0],
-          seriesType: 'bar_stacked',
-        },
-      ],
+      layers: [{ ...currentState.layers[0], seriesType: 'bar_stacked' }],
     });
     expect(suggestion.title).toEqual('Stacked');
   });
 
   test('keeps column to dimension mappings on extended tables', () => {
-    (generateId as jest.Mock).mockReturnValueOnce('dummyCol');
     const currentState: XYState = {
-      isHorizontal: false,
       legend: { isVisible: true, position: 'bottom' },
       preferredSeriesType: 'bar',
       layers: [
@@ -383,7 +410,6 @@ describe('xy_suggestions', () => {
   test('overwrites column to dimension mappings if a date dimension is added', () => {
     (generateId as jest.Mock).mockReturnValueOnce('dummyCol');
     const currentState: XYState = {
-      isHorizontal: false,
       legend: { isVisible: true, position: 'bottom' },
       preferredSeriesType: 'bar',
       layers: [
@@ -431,17 +457,17 @@ describe('xy_suggestions', () => {
     });
 
     expect(suggestionSubset(suggestion)).toMatchInlineSnapshot(`
-                  Array [
-                    Object {
-                      "seriesType": "bar_stacked",
-                      "splitAccessor": "ddd",
-                      "x": "quantity",
-                      "y": Array [
-                        "price",
-                      ],
-                    },
-                  ]
-            `);
+                        Array [
+                          Object {
+                            "seriesType": "bar_stacked",
+                            "splitAccessor": "ddd",
+                            "x": "quantity",
+                            "y": Array [
+                              "price",
+                            ],
+                          },
+                        ]
+                `);
   });
 
   test('handles ip', () => {
@@ -467,17 +493,17 @@ describe('xy_suggestions', () => {
     });
 
     expect(suggestionSubset(suggestion)).toMatchInlineSnapshot(`
-      Array [
-        Object {
-          "seriesType": "bar_stacked",
-          "splitAccessor": "ddd",
-          "x": "myip",
-          "y": Array [
-            "quantity",
-          ],
-        },
-      ]
-    `);
+            Array [
+              Object {
+                "seriesType": "bar_stacked",
+                "splitAccessor": "ddd",
+                "x": "myip",
+                "y": Array [
+                  "quantity",
+                ],
+              },
+            ]
+        `);
   });
 
   test('handles unbucketed suggestions', () => {
@@ -502,16 +528,16 @@ describe('xy_suggestions', () => {
     });
 
     expect(suggestionSubset(suggestion)).toMatchInlineSnapshot(`
-            Array [
-              Object {
-                "seriesType": "bar_stacked",
-                "splitAccessor": "eee",
-                "x": "mybool",
-                "y": Array [
-                  "num votes",
-                ],
-              },
-            ]
-        `);
+                  Array [
+                    Object {
+                      "seriesType": "bar_stacked",
+                      "splitAccessor": "eee",
+                      "x": "mybool",
+                      "y": Array [
+                        "num votes",
+                      ],
+                    },
+                  ]
+            `);
   });
 });
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_suggestions.ts b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_suggestions.ts
index 1f3bc9d701114e..7c7e9caddd31b7 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_suggestions.ts
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_suggestions.ts
@@ -7,7 +7,6 @@
 import { i18n } from '@kbn/i18n';
 import { partition } from 'lodash';
 import { Position } from '@elastic/charts';
-import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
 import {
   SuggestionRequest,
   VisualizationSuggestion,
@@ -17,6 +16,7 @@ import {
 } from '../types';
 import { State, SeriesType, XYState } from './types';
 import { generateId } from '../id_generator';
+import { getIconForSeries } from './state_helpers';
 
 const columnSortOrder = {
   date: 0,
@@ -26,21 +26,6 @@ const columnSortOrder = {
   number: 4,
 };
 
-function getIconForSeries(type: SeriesType): EuiIconType {
-  switch (type) {
-    case 'area':
-    case 'area_stacked':
-      return 'visArea';
-    case 'bar':
-    case 'bar_stacked':
-      return 'visBarVertical';
-    case 'line':
-      return 'visLine';
-    default:
-      throw new Error('unknown series type');
-  }
-}
-
 /**
  * Generate suggestions for the xy chart.
  *
@@ -163,10 +148,8 @@ function getSuggestionsForLayer(
 ): VisualizationSuggestion<State> | Array<VisualizationSuggestion<State>> {
   const title = getSuggestionTitle(yValues, xValue, tableLabel);
   const seriesType: SeriesType = getSeriesType(currentState, layerId, xValue, changeType);
-  const isHorizontal = currentState ? currentState.isHorizontal : false;
 
   const options = {
-    isHorizontal,
     currentState,
     seriesType,
     layerId,
@@ -186,48 +169,54 @@ function getSuggestionsForLayer(
   const sameStateSuggestions: Array<VisualizationSuggestion<State>> = [];
 
   // if current state is using the same data, suggest same chart with different presentational configuration
-
-  if (xValue.operation.scale === 'ordinal') {
+  if (seriesType !== 'line' && xValue.operation.scale === 'ordinal') {
     // flip between horizontal/vertical for ordinal scales
     sameStateSuggestions.push(
       buildSuggestion({
         ...options,
         title: i18n.translate('xpack.lens.xySuggestions.flipTitle', { defaultMessage: 'Flip' }),
-        isHorizontal: !options.isHorizontal,
+        seriesType:
+          seriesType === 'bar_horizontal'
+            ? 'bar'
+            : seriesType === 'bar_horizontal_stacked'
+            ? 'bar_stacked'
+            : 'bar_horizontal',
       })
     );
   } else {
     // change chart type for interval or ratio scales on x axis
-    const newSeriesType = flipSeriesType(seriesType);
+    const newSeriesType = altSeriesType(seriesType);
     sameStateSuggestions.push(
       buildSuggestion({
         ...options,
         seriesType: newSeriesType,
-        title: newSeriesType.startsWith('area')
-          ? i18n.translate('xpack.lens.xySuggestions.areaChartTitle', {
-              defaultMessage: 'Area chart',
-            })
-          : i18n.translate('xpack.lens.xySuggestions.barChartTitle', {
+        title: newSeriesType.startsWith('bar')
+          ? i18n.translate('xpack.lens.xySuggestions.barChartTitle', {
               defaultMessage: 'Bar chart',
+            })
+          : i18n.translate('xpack.lens.xySuggestions.lineChartTitle', {
+              defaultMessage: 'Line chart',
             }),
       })
     );
   }
 
-  // flip between stacked/unstacked
-  sameStateSuggestions.push(
-    buildSuggestion({
-      ...options,
-      seriesType: toggleStackSeriesType(seriesType),
-      title: seriesType.endsWith('stacked')
-        ? i18n.translate('xpack.lens.xySuggestions.unstackedChartTitle', {
-            defaultMessage: 'Unstacked',
-          })
-        : i18n.translate('xpack.lens.xySuggestions.stackedChartTitle', {
-            defaultMessage: 'Stacked',
-          }),
-    })
-  );
+  if (seriesType !== 'line' && splitBy) {
+    // flip between stacked/unstacked
+    sameStateSuggestions.push(
+      buildSuggestion({
+        ...options,
+        seriesType: toggleStackSeriesType(seriesType),
+        title: seriesType.endsWith('stacked')
+          ? i18n.translate('xpack.lens.xySuggestions.unstackedChartTitle', {
+              defaultMessage: 'Unstacked',
+            })
+          : i18n.translate('xpack.lens.xySuggestions.stackedChartTitle', {
+              defaultMessage: 'Stacked',
+            }),
+      })
+    );
+  }
 
   return sameStateSuggestions;
 }
@@ -247,18 +236,21 @@ function toggleStackSeriesType(oldSeriesType: SeriesType) {
   }
 }
 
-function flipSeriesType(oldSeriesType: SeriesType) {
+// Until the area chart rendering bug is fixed, avoid suggesting area charts
+// https://github.com/elastic/elastic-charts/issues/388
+function altSeriesType(oldSeriesType: SeriesType) {
   switch (oldSeriesType) {
     case 'area':
-      return 'bar';
+      return 'line';
     case 'area_stacked':
       return 'bar_stacked';
     case 'bar':
-      return 'area';
+      return 'line';
     case 'bar_stacked':
-      return 'area_stacked';
+      return 'line';
+    case 'line':
     default:
-      return 'bar';
+      return 'bar_stacked';
   }
 }
 
@@ -268,27 +260,25 @@ function getSeriesType(
   xValue: TableSuggestionColumn,
   changeType: TableChangeType
 ): SeriesType {
-  const defaultType = xValue.operation.dataType === 'date' ? 'area_stacked' : 'bar_stacked';
-  const preferredSeriesType = (currentState && currentState.preferredSeriesType) || defaultType;
-  const isDateCompatible =
-    preferredSeriesType === 'area' ||
-    preferredSeriesType === 'line' ||
-    preferredSeriesType === 'area_stacked';
-
-  if (changeType !== 'initial') {
-    const oldLayer = getExistingLayer(currentState, layerId);
-    return (
-      (oldLayer && oldLayer.seriesType) ||
-      (currentState && currentState.preferredSeriesType) ||
-      defaultType
-    );
+  const defaultType = 'bar_stacked';
+
+  const oldLayer = getExistingLayer(currentState, layerId);
+  const oldLayerSeriesType = oldLayer ? oldLayer.seriesType : false;
+
+  const closestSeriesType =
+    oldLayerSeriesType || (currentState && currentState.preferredSeriesType) || defaultType;
+
+  // Attempt to keep the seriesType consistent on initial add of a layer
+  // Ordinal scales should always use a bar because there is no interpolation between buckets
+  if (xValue.operation.scale && xValue.operation.scale === 'ordinal') {
+    return closestSeriesType.startsWith('bar') ? closestSeriesType : defaultType;
   }
 
-  if (xValue.operation.dataType === 'date') {
-    return isDateCompatible ? preferredSeriesType : defaultType;
+  if (changeType === 'initial') {
+    return defaultType;
   }
 
-  return isDateCompatible ? defaultType : preferredSeriesType;
+  return closestSeriesType !== defaultType ? closestSeriesType : defaultType;
 }
 
 function getSuggestionTitle(
@@ -325,7 +315,6 @@ function getSuggestionTitle(
 }
 
 function buildSuggestion({
-  isHorizontal,
   currentState,
   seriesType,
   layerId,
@@ -336,7 +325,6 @@ function buildSuggestion({
   xValue,
 }: {
   currentState: XYState | undefined;
-  isHorizontal: boolean;
   seriesType: SeriesType;
   title: string;
   yValues: TableSuggestionColumn[];
@@ -355,7 +343,6 @@ function buildSuggestion({
   };
 
   const state: State = {
-    isHorizontal,
     legend: currentState ? currentState.legend : { isVisible: true, position: Position.Right },
     preferredSeriesType: seriesType,
     layers: [
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_visualization.test.ts b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_visualization.test.ts
index 8d9092f63f59b3..5cd0791ae3da9e 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_visualization.test.ts
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_visualization.test.ts
@@ -7,7 +7,7 @@
 import { xyVisualization } from './xy_visualization';
 import { Position } from '@elastic/charts';
 import { Operation } from '../types';
-import { State } from './types';
+import { State, SeriesType } from './types';
 import { createMockDatasource, createMockFramePublicAPI } from '../editor_frame_plugin/mocks';
 import { generateId } from '../id_generator';
 import { Ast } from '@kbn/interpreter/target/common';
@@ -16,7 +16,6 @@ jest.mock('../id_generator');
 
 function exampleState(): State {
   return {
-    isHorizontal: false,
     legend: { position: Position.Bottom, isVisible: true },
     preferredSeriesType: 'bar',
     layers: [
@@ -32,6 +31,51 @@ function exampleState(): State {
 }
 
 describe('xy_visualization', () => {
+  describe('getDescription', () => {
+    function mixedState(...types: SeriesType[]) {
+      const state = exampleState();
+      return {
+        ...state,
+        layers: types.map((t, i) => ({
+          ...state.layers[0],
+          layerId: `layer_${i}`,
+          seriesType: t,
+        })),
+      };
+    }
+
+    it('should show mixed xy chart when multilple series types', () => {
+      const desc = xyVisualization.getDescription(mixedState('bar', 'line'));
+
+      expect(desc.label).toEqual('Mixed XY Chart');
+    });
+
+    it('should show mixed horizontal bar chart when multiple horizontal bar types', () => {
+      const desc = xyVisualization.getDescription(
+        mixedState('bar_horizontal', 'bar_horizontal_stacked')
+      );
+
+      expect(desc.label).toEqual('Mixed Horizontal Bar Chart');
+    });
+
+    it('should show bar chart when bar only', () => {
+      const desc = xyVisualization.getDescription(mixedState('bar_horizontal', 'bar_horizontal'));
+
+      expect(desc.label).toEqual('Horizontal Bar Chart');
+    });
+
+    it('should show the chart description if not mixed', () => {
+      expect(xyVisualization.getDescription(mixedState('area')).label).toEqual('Area Chart');
+      expect(xyVisualization.getDescription(mixedState('line')).label).toEqual('Line Chart');
+      expect(xyVisualization.getDescription(mixedState('area_stacked')).label).toEqual(
+        'Stacked Area Chart'
+      );
+      expect(xyVisualization.getDescription(mixedState('bar_horizontal_stacked')).label).toEqual(
+        'Stacked Horizontal Bar Chart'
+      );
+    });
+  });
+
   describe('#initialize', () => {
     it('loads default state', () => {
       (generateId as jest.Mock)
@@ -48,7 +92,6 @@ describe('xy_visualization', () => {
 
       expect(initialState).toMatchInlineSnapshot(`
         Object {
-          "isHorizontal": false,
           "layers": Array [
             Object {
               "accessors": Array [
@@ -56,7 +99,7 @@ describe('xy_visualization', () => {
               ],
               "layerId": "",
               "position": "top",
-              "seriesType": "bar",
+              "seriesType": "bar_stacked",
               "showGridlines": false,
               "splitAccessor": "test-id2",
               "xAccessor": "test-id3",
@@ -66,7 +109,7 @@ describe('xy_visualization', () => {
             "isVisible": true,
             "position": "right",
           },
-          "preferredSeriesType": "bar",
+          "preferredSeriesType": "bar_stacked",
           "title": "Empty XY Chart",
         }
       `);
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_visualization.tsx b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_visualization.tsx
index 14c35c21c73330..0c9cb3b6216bb7 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_visualization.tsx
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_visualization.tsx
@@ -16,16 +16,19 @@ import { Visualization } from '../types';
 import { State, PersistableState, SeriesType, visualizationTypes } from './types';
 import { toExpression, toPreviewExpression } from './to_expression';
 import { generateId } from '../id_generator';
+import chartBarStackedSVG from '../assets/chart_bar_stacked.svg';
+import chartMixedSVG from '../assets/chart_mixed_xy.svg';
+import { isHorizontalChart } from './state_helpers';
 
-const defaultIcon = 'visBarVertical';
-const defaultSeriesType = 'bar';
+const defaultIcon = chartBarStackedSVG;
+const defaultSeriesType = 'bar_stacked';
 
 function getDescription(state?: State) {
   if (!state) {
     return {
       icon: defaultIcon,
       label: i18n.translate('xpack.lens.xyVisualization.xyLabel', {
-        defaultMessage: 'XY Chart',
+        defaultMessage: 'XY',
       }),
     };
   }
@@ -38,12 +41,19 @@ function getDescription(state?: State) {
   const seriesTypes = _.unique(state.layers.map(l => l.seriesType));
 
   return {
-    icon: visualizationType.icon,
+    icon:
+      seriesTypes.length === 1
+        ? visualizationType.largeIcon || visualizationType.icon
+        : chartMixedSVG,
     label:
       seriesTypes.length === 1
         ? visualizationType.label
+        : isHorizontalChart(state.layers)
+        ? i18n.translate('xpack.lens.xyVisualization.mixedBarHorizontalLabel', {
+            defaultMessage: 'Mixed Horizontal Bar',
+          })
         : i18n.translate('xpack.lens.xyVisualization.mixedLabel', {
-            defaultMessage: 'Mixed XY Chart',
+            defaultMessage: 'Mixed XY',
           }),
   };
 }
@@ -55,9 +65,14 @@ export const xyVisualization: Visualization<State, PersistableState> = {
 
   getDescription(state) {
     const { icon, label } = getDescription(state);
+    const chartLabel = i18n.translate('xpack.lens.xyVisualization.chartLabel', {
+      defaultMessage: '{label} Chart',
+      values: { label },
+    });
+
     return {
       icon: icon || defaultIcon,
-      label,
+      label: chartLabel,
     };
   },
 
@@ -75,7 +90,6 @@ export const xyVisualization: Visualization<State, PersistableState> = {
     return (
       state || {
         title: 'Empty XY Chart',
-        isHorizontal: false,
         legend: { isVisible: true, position: Position.Right },
         preferredSeriesType: defaultSeriesType,
         layers: [
diff --git a/x-pack/legacy/plugins/lens/readme.md b/x-pack/legacy/plugins/lens/readme.md
index 0ea0778dd17ef9..60b4266edadb3d 100644
--- a/x-pack/legacy/plugins/lens/readme.md
+++ b/x-pack/legacy/plugins/lens/readme.md
@@ -7,7 +7,7 @@ Run all tests from the `x-pack` root directory
 - Unit tests: `node scripts/jest --watch lens`
 - Functional tests:
   - Run `node scripts/functional_tests_server`
-  - Run `node ../scripts/functional_test_runner.js --config ./test/functional/config.js`
+  - Run `node ../scripts/functional_test_runner.js --config ./test/functional/config.js --grep="lens app"`
   - You may want to comment out all imports except for Lens in the config file.
 - API Functional tests:
   - Run `node scripts/functional_tests_server`
diff --git a/x-pack/legacy/plugins/lens/server/routes/field_stats.ts b/x-pack/legacy/plugins/lens/server/routes/field_stats.ts
index a57811362c6cf3..b1b4cdccc35385 100644
--- a/x-pack/legacy/plugins/lens/server/routes/field_stats.ts
+++ b/x-pack/legacy/plugins/lens/server/routes/field_stats.ts
@@ -24,7 +24,7 @@ export async function initFieldsRoute(setup: CoreSetup) {
         }),
         body: schema.object(
           {
-            query: schema.object({}, { allowUnknowns: true }),
+            dslQuery: schema.object({}, { allowUnknowns: true }),
             fromDate: schema.string(),
             toDate: schema.string(),
             timeFieldName: schema.string(),
@@ -43,10 +43,10 @@ export async function initFieldsRoute(setup: CoreSetup) {
     },
     async (context, req, res) => {
       const requestClient = context.core.elasticsearch.dataClient;
-      const { fromDate, toDate, timeFieldName, field, query } = req.body;
+      const { fromDate, toDate, timeFieldName, field, dslQuery } = req.body;
 
       try {
-        const filters = {
+        const query = {
           bool: {
             filter: [
               {
@@ -57,7 +57,7 @@ export async function initFieldsRoute(setup: CoreSetup) {
                   },
                 },
               },
-              query,
+              dslQuery,
             ],
           },
         };
@@ -66,7 +66,7 @@ export async function initFieldsRoute(setup: CoreSetup) {
           requestClient.callAsCurrentUser('search', {
             index: req.params.indexPatternTitle,
             body: {
-              query: filters,
+              query,
               aggs,
             },
             // The hits total changed in 7.0 from number to object, unless this flag is set
diff --git a/x-pack/legacy/plugins/logstash/public/components/upgrade_failure/__snapshots__/upgrade_failure.test.js.snap b/x-pack/legacy/plugins/logstash/public/components/upgrade_failure/__snapshots__/upgrade_failure.test.js.snap
index b31bae263fa8f4..4d752888d3df4f 100644
--- a/x-pack/legacy/plugins/logstash/public/components/upgrade_failure/__snapshots__/upgrade_failure.test.js.snap
+++ b/x-pack/legacy/plugins/logstash/public/components/upgrade_failure/__snapshots__/upgrade_failure.test.js.snap
@@ -146,7 +146,6 @@ exports[`UpgradeFailure component passes expected text for new pipeline 1`] = `
                 Before you can add a pipeline, we need to upgrade your configuration.
               </p>
             }
-            iconColor="subdued"
             title={
               <UpgradeFailureTitle
                 titleText="Upgrade failed"
@@ -487,7 +486,6 @@ exports[`UpgradeFailure component passes expected text for not manual upgrade 1`
                 Before you can add a pipeline, we need to upgrade your configuration.
               </p>
             }
-            iconColor="subdued"
             title={
               <UpgradeFailureTitle
                 titleText="Time for an upgrade!"
@@ -828,7 +826,6 @@ exports[`UpgradeFailure component passes expected text for not new pipeline 1`]
                 Before you can edit this pipeline, we need to upgrade your configuration.
               </p>
             }
-            iconColor="subdued"
             title={
               <UpgradeFailureTitle
                 titleText="Upgrade failed"
@@ -1054,7 +1051,6 @@ exports[`UpgradeFailure component renders component as expected 1`] = `
           Before you can add a pipeline, we need to upgrade your configuration.
         </p>
       }
-      iconColor="subdued"
       title={
         <UpgradeFailureTitle
           titleText="Upgrade failed"
diff --git a/x-pack/legacy/plugins/logstash/public/services/monitoring/monitoring_service.js b/x-pack/legacy/plugins/logstash/public/services/monitoring/monitoring_service.js
index a160408bcaa023..6a948ad2e39edf 100755
--- a/x-pack/legacy/plugins/logstash/public/services/monitoring/monitoring_service.js
+++ b/x-pack/legacy/plugins/logstash/public/services/monitoring/monitoring_service.js
@@ -32,7 +32,7 @@ export class MonitoringService {
 
     return this.clusterService.loadCluster()
       .then(cluster => {
-        const url = `${this.basePath}/v1/clusters/${cluster.uuid}/logstash/pipelines`;
+        const url = `${this.basePath}/v1/clusters/${cluster.uuid}/logstash/pipeline_ids`;
         const now = moment.utc();
         const body = {
           timeRange: {
@@ -42,7 +42,7 @@ export class MonitoringService {
         };
         return this.$http.post(url, body);
       })
-      .then(response => response.data.pipelines.map(pipeline => PipelineListItem.fromUpstreamMonitoringJSON(pipeline)))
+      .then(response => response.data.map(pipeline => PipelineListItem.fromUpstreamMonitoringJSON(pipeline)))
       .catch(() => []);
   }
 }
diff --git a/x-pack/legacy/plugins/maps/public/angular/get_initial_layers.test.js b/x-pack/legacy/plugins/maps/public/angular/get_initial_layers.test.js
index 5dc08751347e41..b15b94a49cebc5 100644
--- a/x-pack/legacy/plugins/maps/public/angular/get_initial_layers.test.js
+++ b/x-pack/legacy/plugins/maps/public/angular/get_initial_layers.test.js
@@ -44,6 +44,7 @@ describe('kibana.yml configured with map.tilemap.url', () => {
     expect(layers).toEqual([{
       alpha: 1,
       __dataRequests: [],
+      __injectedData: null,
       id: layers[0].id,
       applyGlobalQuery: true,
       label: null,
@@ -86,6 +87,7 @@ describe('EMS is enabled', () => {
     expect(layers).toEqual([{
       alpha: 1,
       __dataRequests: [],
+      __injectedData: null,
       id: layers[0].id,
       applyGlobalQuery: true,
       label: null,
diff --git a/x-pack/legacy/plugins/maps/public/components/__snapshots__/geometry_filter_form.test.js.snap b/x-pack/legacy/plugins/maps/public/components/__snapshots__/geometry_filter_form.test.js.snap
index 5e9500f65d167f..053863c68775f6 100644
--- a/x-pack/legacy/plugins/maps/public/components/__snapshots__/geometry_filter_form.test.js.snap
+++ b/x-pack/legacy/plugins/maps/public/components/__snapshots__/geometry_filter_form.test.js.snap
@@ -2,9 +2,6 @@
 
 exports[`should not render relation select when geo field is geo_point 1`] = `
 <EuiForm>
-  <EuiSpacer
-    size="s"
-  />
   <EuiFormRow
     describedByIds={Array []}
     display="rowCompressed"
@@ -62,22 +59,26 @@ exports[`should not render relation select when geo field is geo_point 1`] = `
       valueOfSelected="My index/my geo field"
     />
   </EuiFormRow>
-  <EuiButton
-    fill={true}
-    isDisabled={false}
-    onClick={[Function]}
-    size="s"
+  <EuiSpacer
+    size="m"
+  />
+  <EuiTextAlign
+    textAlign="right"
   >
-    Create filter
-  </EuiButton>
+    <EuiButton
+      fill={true}
+      isDisabled={false}
+      onClick={[Function]}
+      size="s"
+    >
+      Create filter
+    </EuiButton>
+  </EuiTextAlign>
 </EuiForm>
 `;
 
 exports[`should not show "within" relation when filter geometry is not closed 1`] = `
 <EuiForm>
-  <EuiSpacer
-    size="s"
-  />
   <EuiFormRow
     describedByIds={Array []}
     display="rowCompressed"
@@ -164,22 +165,26 @@ exports[`should not show "within" relation when filter geometry is not closed 1`
       value="INTERSECTS"
     />
   </EuiFormRow>
-  <EuiButton
-    fill={true}
-    isDisabled={false}
-    onClick={[Function]}
-    size="s"
+  <EuiSpacer
+    size="m"
+  />
+  <EuiTextAlign
+    textAlign="right"
   >
-    Create filter
-  </EuiButton>
+    <EuiButton
+      fill={true}
+      isDisabled={false}
+      onClick={[Function]}
+      size="s"
+    >
+      Create filter
+    </EuiButton>
+  </EuiTextAlign>
 </EuiForm>
 `;
 
 exports[`should render relation select when geo field is geo_shape 1`] = `
 <EuiForm>
-  <EuiSpacer
-    size="s"
-  />
   <EuiFormRow
     describedByIds={Array []}
     display="rowCompressed"
@@ -270,13 +275,20 @@ exports[`should render relation select when geo field is geo_shape 1`] = `
       value="INTERSECTS"
     />
   </EuiFormRow>
-  <EuiButton
-    fill={true}
-    isDisabled={false}
-    onClick={[Function]}
-    size="s"
+  <EuiSpacer
+    size="m"
+  />
+  <EuiTextAlign
+    textAlign="right"
   >
-    Create filter
-  </EuiButton>
+    <EuiButton
+      fill={true}
+      isDisabled={false}
+      onClick={[Function]}
+      size="s"
+    >
+      Create filter
+    </EuiButton>
+  </EuiTextAlign>
 </EuiForm>
 `;
diff --git a/x-pack/legacy/plugins/maps/public/components/_index.scss b/x-pack/legacy/plugins/maps/public/components/_index.scss
index 3e13cd3755dd33..6f180b840b877c 100644
--- a/x-pack/legacy/plugins/maps/public/components/_index.scss
+++ b/x-pack/legacy/plugins/maps/public/components/_index.scss
@@ -2,6 +2,26 @@
   margin-bottom: $euiSizeS;
 }
 
+.mapMetricEditorPanel__metricEditor {
+  padding: $euiSizeM 0;
+  border-top:  $euiBorderThin;
+
+  &:first-child {
+    padding-top: 0;
+    border-top: none;
+  }
+
+  &:last-child {
+    margin-bottom: $euiSizeM;
+    border-bottom: 1px solid $euiColorLightShade;
+  }
+}
+
+.mapMetricEditorPanel__metricRemoveButton {
+  padding-top: $euiSizeM;
+  text-align: right;
+}
+
 .mapGeometryFilter__geoFieldSuperSelect {
   height: $euiSizeL * 2;
 }
diff --git a/x-pack/legacy/plugins/maps/public/components/geometry_filter_form.js b/x-pack/legacy/plugins/maps/public/components/geometry_filter_form.js
index 2c518a856f2390..767237ecdf38dc 100644
--- a/x-pack/legacy/plugins/maps/public/components/geometry_filter_form.js
+++ b/x-pack/legacy/plugins/maps/public/components/geometry_filter_form.js
@@ -16,6 +16,7 @@ import {
   EuiButton,
   EuiSelect,
   EuiSpacer,
+  EuiTextAlign,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { ES_GEO_FIELD_TYPE, ES_SPATIAL_RELATIONS } from '../../common/constants';
@@ -154,8 +155,6 @@ export class GeometryFilterForm extends Component {
     });
     return (
       <EuiForm className={this.props.className}>
-        <EuiSpacer size="s" />
-
         <EuiFormRow
           label={i18n.translate('xpack.maps.geometryFilterForm.geometryLabelLabel', {
             defaultMessage: 'Geometry label',
@@ -190,14 +189,19 @@ export class GeometryFilterForm extends Component {
 
         {this._renderRelationInput()}
 
-        <EuiButton
-          size="s"
-          fill
-          onClick={this._onSubmit}
-          isDisabled={!this.state.geometryLabel || !this.state.geoFieldTag}
-        >
-          {this.props.buttonLabel}
-        </EuiButton>
+        <EuiSpacer size="m" />
+
+        <EuiTextAlign textAlign="right">
+          <EuiButton
+            size="s"
+            fill
+            onClick={this._onSubmit}
+            isDisabled={!this.state.geometryLabel || !this.state.geoFieldTag}
+            isLoading={this.props.isLoading}
+          >
+            {this.props.buttonLabel}
+          </EuiButton>
+        </EuiTextAlign>
       </EuiForm>
     );
   }
diff --git a/x-pack/legacy/plugins/maps/public/components/metric_editor.js b/x-pack/legacy/plugins/maps/public/components/metric_editor.js
index f2f309d0512132..65f345925fd84d 100644
--- a/x-pack/legacy/plugins/maps/public/components/metric_editor.js
+++ b/x-pack/legacy/plugins/maps/public/components/metric_editor.js
@@ -43,7 +43,7 @@ export function MetricEditor({ fields, metricsFilter, metric, onChange, removeBu
         label={i18n.translate('xpack.maps.metricsEditor.selectFieldLabel', {
           defaultMessage: 'Field',
         })}
-        display="rowCompressed"
+        display="columnCompressed"
       >
         <SingleFieldSelect
           placeholder={i18n.translate('xpack.maps.metricsEditor.selectFieldPlaceholder', {
@@ -67,7 +67,7 @@ export function MetricEditor({ fields, metricsFilter, metric, onChange, removeBu
         label={i18n.translate('xpack.maps.metricsEditor.customLabel', {
           defaultMessage: 'Custom label',
         })}
-        display="rowCompressed"
+        display="columnCompressed"
       >
         <EuiFieldText
           onChange={onLabelChange}
@@ -84,8 +84,7 @@ export function MetricEditor({ fields, metricsFilter, metric, onChange, removeBu
         label={i18n.translate('xpack.maps.metricsEditor.aggregationLabel', {
           defaultMessage: 'Aggregation',
         })}
-        labelAppend={removeButton}
-        display="rowCompressed"
+        display="columnCompressed"
       >
         <MetricSelect
           onChange={onAggChange}
@@ -96,8 +95,8 @@ export function MetricEditor({ fields, metricsFilter, metric, onChange, removeBu
       </EuiFormRow>
 
       {fieldSelect}
-
       {labelInput}
+      {removeButton}
     </Fragment>
   );
 }
diff --git a/x-pack/legacy/plugins/maps/public/components/metrics_editor.js b/x-pack/legacy/plugins/maps/public/components/metrics_editor.js
index ebb3904a447991..53d078369cf89f 100644
--- a/x-pack/legacy/plugins/maps/public/components/metrics_editor.js
+++ b/x-pack/legacy/plugins/maps/public/components/metrics_editor.js
@@ -8,7 +8,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiButtonIcon, EuiButtonEmpty, EuiPanel, EuiSpacer, EuiTextAlign } from '@elastic/eui';
+import { EuiButtonEmpty, EuiSpacer, EuiTextAlign } from '@elastic/eui';
 import { MetricEditor } from './metric_editor';
 
 export function MetricsEditor({ fields, metrics, onChange, allowMultipleMetrics, metricsFilter }) {
@@ -25,23 +25,26 @@ export function MetricsEditor({ fields, metrics, onChange, allowMultipleMetrics,
       let removeButton;
       if (index > 0) {
         removeButton = (
-          <EuiButtonIcon
-            iconType="trash"
-            size="s"
-            iconSize="s"
-            color="danger"
-            aria-label={i18n.translate('xpack.maps.metricsEditor.deleteMetricAriaLabel', {
-              defaultMessage: 'Delete metric',
-            })}
-            title={i18n.translate('xpack.maps.metricsEditor.deleteMetricButtonLabel', {
-              defaultMessage: 'Delete metric',
-            })}
-            onClick={onRemove}
-          />
+          <div className="mapMetricEditorPanel__metricRemoveButton">
+            <EuiButtonEmpty
+              iconType="trash"
+              size="xs"
+              color="danger"
+              onClick={onRemove}
+              aria-label={i18n.translate('xpack.maps.metricsEditor.deleteMetricAriaLabel', {
+                defaultMessage: 'Delete metric',
+              })}
+            >
+              <FormattedMessage
+                id="xpack.maps.metricsEditor.deleteMetricButtonLabel"
+                defaultMessage="Delete metric"
+              />
+            </EuiButtonEmpty>
+          </div>
         );
       }
       return (
-        <EuiPanel key={index} className="mapMetricEditorPanel" paddingSize="s">
+        <div key={index} className="mapMetricEditorPanel__metricEditor">
           <MetricEditor
             onChange={onMetricChange}
             metric={metric}
@@ -49,7 +52,7 @@ export function MetricsEditor({ fields, metrics, onChange, allowMultipleMetrics,
             metricsFilter={metricsFilter}
             removeButton={removeButton}
           />
-        </EuiPanel>
+        </div>
       );
     });
   }
@@ -80,7 +83,7 @@ export function MetricsEditor({ fields, metrics, onChange, allowMultipleMetrics,
 
   return (
     <Fragment>
-      {renderMetrics()}
+      <div className="mapMapLayerPanel__metrics">{renderMetrics()}</div>
 
       {renderAddMetricButton()}
     </Fragment>
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/layer_addpanel/view.js b/x-pack/legacy/plugins/maps/public/connected_components/layer_addpanel/view.js
index dac695b9c3e263..0b820e832581b7 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/layer_addpanel/view.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/layer_addpanel/view.js
@@ -25,6 +25,14 @@ export class AddLayerPanel extends Component {
     layerImportAddReady: false,
   }
 
+  componentDidMount() {
+    this._isMounted = true;
+  }
+
+  componentWillUnmount() {
+    this._isMounted = false;
+  }
+
   componentDidUpdate() {
     if (!this.state.layerImportAddReady && this.props.isIndexingSuccess) {
       this.setState({ layerImportAddReady: true });
@@ -48,6 +56,9 @@ export class AddLayerPanel extends Component {
   }
 
   _viewLayer = async (source, options = {}) => {
+    if (!this._isMounted) {
+      return;
+    }
     if (!source) {
       this.setState({ layer: null });
       this.props.removeTransientLayer();
@@ -60,6 +71,9 @@ export class AddLayerPanel extends Component {
       style: style
     };
     const newLayer = source.createDefaultLayer(layerInitProps, this.props.mapColors);
+    if (!this._isMounted) {
+      return;
+    }
     this.setState(
       { layer: newLayer },
       () => this.props.viewLayer(this.state.layer)
@@ -67,6 +81,11 @@ export class AddLayerPanel extends Component {
   };
 
   _clearLayerData = ({ keepSourceType = false }) => {
+
+    if (!this._isMounted) {
+      return;
+    }
+
     this.setState({
       layer: null,
       ...(
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/__snapshots__/view.test.js.snap b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/__snapshots__/view.test.js.snap
index 49439fa9d64e62..4c9ef61478ab48 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/__snapshots__/view.test.js.snap
+++ b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/__snapshots__/view.test.js.snap
@@ -1,103 +1,119 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`LayerPanel is rendered 1`] = `
-<EuiFlexGroup
-  direction="column"
-  gutterSize="none"
+<Provider
+  services={
+    Object {
+      "appName": "maps",
+      "autocomplete": undefined,
+      "store": Storage {
+        "clear": [Function],
+        "get": [Function],
+        "remove": [Function],
+        "set": [Function],
+        "store": undefined,
+      },
+    }
+  }
 >
-  <EuiFlyoutHeader
-    className="mapLayerPanel__header"
-    hasBorder={true}
+  <EuiFlexGroup
+    direction="column"
+    gutterSize="none"
   >
-    <EuiFlexGroup
-      alignItems="center"
-      gutterSize="s"
-      responsive={false}
+    <EuiFlyoutHeader
+      className="mapLayerPanel__header"
+      hasBorder={true}
     >
-      <EuiFlexItem
-        grow={false}
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="s"
+        responsive={false}
       >
-        <EuiButtonIcon
-          aria-label="Fit to bounds"
-          iconType="vector"
-          onClick={[Function]}
+        <EuiFlexItem
+          grow={false}
         >
-          <FormattedMessage
-            defaultMessage="Fit"
-            id="xpack.maps.layerPanel.fitToBoundsButtonLabel"
-            values={Object {}}
-          />
-        </EuiButtonIcon>
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <EuiTitle
-          size="s"
+          <EuiButtonIcon
+            aria-label="Fit to bounds"
+            iconType="vector"
+            onClick={[Function]}
+          >
+            <FormattedMessage
+              defaultMessage="Fit"
+              id="xpack.maps.layerPanel.fitToBoundsButtonLabel"
+              values={Object {}}
+            />
+          </EuiButtonIcon>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiTitle
+            size="s"
+          >
+            <h2>
+              layer 1
+            </h2>
+          </EuiTitle>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="xs"
+      />
+      <div
+        className="mapLayerPanel__sourceDetails"
+      >
+        <EuiAccordion
+          buttonContent="Source details"
+          id="accordion1"
+          initialIsOpen={false}
+          paddingSize="none"
         >
-          <h2>
-            layer 1
-          </h2>
-        </EuiTitle>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-    <EuiSpacer
-      size="xs"
-    />
+          <EuiText
+            color="subdued"
+            size="s"
+          >
+            <EuiSpacer
+              size="xs"
+            />
+            <p
+              className="mapLayerPanel__sourceDetail"
+              key="source prop1"
+            >
+              <strong>
+                source prop1
+              </strong>
+               
+              <span>
+                you get one chance to set me
+              </span>
+            </p>
+          </EuiText>
+        </EuiAccordion>
+      </div>
+    </EuiFlyoutHeader>
     <div
-      className="mapLayerPanel__sourceDetails"
+      className="mapLayerPanel__body"
     >
-      <EuiAccordion
-        buttonContent="Source details"
-        id="accordion1"
-        initialIsOpen={false}
-        paddingSize="none"
+      <div
+        className="mapLayerPanel__bodyOverflow"
       >
-        <EuiText
-          color="subdued"
+        <LayerErrors />
+        <LayerSettings />
+        <SourceSettings />
+        <EuiPanel>
+          <JoinEditor />
+        </EuiPanel>
+        <EuiSpacer
           size="s"
-        >
-          <EuiSpacer
-            size="xs"
-          />
-          <p
-            className="mapLayerPanel__sourceDetail"
-            key="source prop1"
-          >
-            <strong>
-              source prop1
-            </strong>
-             
-            <span>
-              you get one chance to set me
-            </span>
-          </p>
-        </EuiText>
-      </EuiAccordion>
+        />
+        <StyleSettings />
+      </div>
     </div>
-  </EuiFlyoutHeader>
-  <div
-    className="mapLayerPanel__body"
-  >
-    <div
-      className="mapLayerPanel__bodyOverflow"
+    <EuiFlyoutFooter
+      className="mapLayerPanel__footer"
     >
-      <LayerErrors />
-      <LayerSettings />
-      <SourceSettings />
-      <EuiPanel>
-        <JoinEditor />
-      </EuiPanel>
-      <EuiSpacer
-        size="s"
-      />
-      <StyleSettings />
-    </div>
-  </div>
-  <EuiFlyoutFooter
-    className="mapLayerPanel__footer"
-  >
-    <FlyoutFooter />
-  </EuiFlyoutFooter>
-</EuiFlexGroup>
+      <FlyoutFooter />
+    </EuiFlyoutFooter>
+  </EuiFlexGroup>
+</Provider>
 `;
 
 exports[`LayerPanel should render empty panel when selectedLayer is null 1`] = `""`;
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/_index.scss b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/_index.scss
index 5412a05e7dd7b8..b219f59476ce9f 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/_index.scss
+++ b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/_index.scss
@@ -1,3 +1,3 @@
 @import './layer_panel';
 @import './filter_editor/filter_editor';
-@import './join_editor/resources/join';
+@import './join_editor/resources/join';
\ No newline at end of file
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/filter_editor/filter_editor.js b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/filter_editor/filter_editor.js
index c534583ddb58fe..f736f87dc46e16 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/filter_editor/filter_editor.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/filter_editor/filter_editor.js
@@ -21,13 +21,11 @@ import {
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import { indexPatternService } from '../../../kibana_services';
-import { Storage } from 'ui/storage';
 
-import { SearchBar } from 'plugins/data';
+import { start as data } from '../../../../../../../../src/legacy/core_plugins/data/public/legacy';
+const { SearchBar } = data.ui;
 
 import { npStart } from 'ui/new_platform';
-import { KibanaContextProvider } from '../../../../../../../../src/plugins/kibana_react/public';
-const localStorage = new Storage(window.localStorage);
 
 export class FilterEditor extends Component {
   state = {
@@ -93,35 +91,26 @@ export class FilterEditor extends Component {
         anchorPosition="leftCenter"
       >
         <div className="mapFilterEditor" data-test-subj="mapFilterEditor">
-          <KibanaContextProvider
-            services={{
-              uiSettings: uiSettings,
-              savedObjects: npStart.core.savedObjects,
-            }}
-          >
-            <SearchBar
-              showFilterBar={false}
-              showDatePicker={false}
-              showQueryInput={true}
-              query={
-                layerQuery
-                  ? layerQuery
-                  : { language: uiSettings.get('search:queryLanguage'), query: '' }
-              }
-              onQuerySubmit={this._onQueryChange}
-              appName="maps"
-              indexPatterns={this.state.indexPatterns}
-              store={localStorage}
-              customSubmitButton={
-                <EuiButton fill data-test-subj="mapFilterEditorSubmitButton">
-                  <FormattedMessage
-                    id="xpack.maps.layerPanel.filterEditor.queryBarSubmitButtonLabel"
-                    defaultMessage="Set filter"
-                  />
-                </EuiButton>
-              }
-            />
-          </KibanaContextProvider>
+          <SearchBar
+            showFilterBar={false}
+            showDatePicker={false}
+            showQueryInput={true}
+            query={
+              layerQuery
+                ? layerQuery
+                : { language: uiSettings.get('search:queryLanguage'), query: '' }
+            }
+            onQuerySubmit={this._onQueryChange}
+            indexPatterns={this.state.indexPatterns}
+            customSubmitButton={
+              <EuiButton fill data-test-subj="mapFilterEditorSubmitButton">
+                <FormattedMessage
+                  id="xpack.maps.layerPanel.filterEditor.queryBarSubmitButtonLabel"
+                  defaultMessage="Set filter"
+                />
+              </EuiButton>
+            }
+          />
         </div>
       </EuiPopover>
     );
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/join_editor/resources/where_expression.js b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/join_editor/resources/where_expression.js
index 74ec80c0765e84..fb09ed342b8d35 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/join_editor/resources/where_expression.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/join_editor/resources/where_expression.js
@@ -14,11 +14,7 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { SearchBar } from 'plugins/data';
-import { Storage } from 'ui/storage';
 import { npStart } from 'ui/new_platform';
-import { KibanaContextProvider } from '../../../../../../../../../src/plugins/kibana_react/public';
-
-const localStorage = new Storage(window.localStorage);
 
 export class WhereExpression extends Component {
 
@@ -80,35 +76,25 @@ export class WhereExpression extends Component {
               defaultMessage="Use a query to narrow right source."
             />
           </EuiFormHelpText>
-
-          <KibanaContextProvider
-            services={{
-              uiSettings: uiSettings,
-              savedObjects: npStart.core.savedObjects,
-            }}
-          >
-            <SearchBar
-              showFilterBar={false}
-              showDatePicker={false}
-              showQueryInput={true}
-              query={whereQuery ? whereQuery : { language: uiSettings.get('search:queryLanguage'), query: '' }}
-              onQuerySubmit={this._onQueryChange}
-              appName="maps"
-              indexPatterns={[indexPattern]}
-              store={localStorage}
-              customSubmitButton={
-                <EuiButton
-                  fill
-                  data-test-subj="mapWhereFilterEditorSubmitButton"
-                >
-                  <FormattedMessage
-                    id="xpack.maps.layerPanel.whereExpression.queryBarSubmitButtonLabel"
-                    defaultMessage="Set filter"
-                  />
-                </EuiButton>
-              }
-            />
-          </KibanaContextProvider>
+          <SearchBar
+            showFilterBar={false}
+            showDatePicker={false}
+            showQueryInput={true}
+            query={whereQuery ? whereQuery : { language: uiSettings.get('search:queryLanguage'), query: '' }}
+            onQuerySubmit={this._onQueryChange}
+            indexPatterns={[indexPattern]}
+            customSubmitButton={
+              <EuiButton
+                fill
+                data-test-subj="mapWhereFilterEditorSubmitButton"
+              >
+                <FormattedMessage
+                  id="xpack.maps.layerPanel.whereExpression.queryBarSubmitButtonLabel"
+                  defaultMessage="Set filter"
+                />
+              </EuiButton>
+            }
+          />
         </div>
       </EuiPopover>
     );
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js
index c0dbb1ec8fcbab..5be842f949871b 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js
@@ -36,7 +36,9 @@ export function LayerSettings(props) {
   };
 
   const onAlphaChange = alpha => {
-    props.updateAlpha(props.layerId, alpha);
+    const alphaDecimal = alpha / 100;
+
+    props.updateAlpha(props.layerId, alphaDecimal);
   };
 
   const onApplyGlobalQueryChange = event => {
@@ -47,18 +49,21 @@ export function LayerSettings(props) {
     return (
       <ValidatedDualRange
         label={i18n.translate('xpack.maps.layerPanel.settingsPanel.visibleZoomLabel', {
-          defaultMessage: 'Zoom range for layer visibility',
+          defaultMessage: 'Visibility',
         })}
-        formRowDisplay="rowCompressed"
+        formRowDisplay="columnCompressed"
         min={MIN_ZOOM}
         max={MAX_ZOOM}
         value={[props.minZoom, props.maxZoom]}
-        showInput
+        showInput="inputWithPopover"
         showRange
         showLabels
         onChange={onZoomChange}
         allowEmptyRange={false}
         compressed
+        prepend={i18n.translate('xpack.maps.layerPanel.settingsPanel.visibleZoom', {
+          defaultMessage: 'Zoom levels',
+        })}
       />
     );
   };
@@ -67,9 +72,9 @@ export function LayerSettings(props) {
     return (
       <EuiFormRow
         label={i18n.translate('xpack.maps.layerPanel.settingsPanel.layerNameLabel', {
-          defaultMessage: 'Layer name',
+          defaultMessage: 'Name',
         })}
-        display="rowCompressed"
+        display="columnCompressed"
       >
         <EuiFieldText value={props.label} onChange={onLabelChange} compressed />
       </EuiFormRow>
@@ -77,23 +82,28 @@ export function LayerSettings(props) {
   };
 
   const renderAlphaSlider = () => {
+    const alphaPercent = Math.round(props.alpha * 100);
+
     return (
       <EuiFormRow
         label={i18n.translate('xpack.maps.layerPanel.settingsPanel.layerTransparencyLabel', {
-          defaultMessage: 'Layer transparency',
+          defaultMessage: 'Opacity',
         })}
-        display="rowCompressed"
+        display="columnCompressed"
       >
         <ValidatedRange
-          min={0.0}
-          max={1.0}
-          step={0.05}
-          value={props.alpha}
+          min={0}
+          max={100}
+          step={1}
+          value={alphaPercent}
           onChange={onAlphaChange}
-          showLabels
           showInput
           showRange
           compressed
+          append={i18n.translate('xpack.maps.layerPanel.settingsPanel.percentageLabel', {
+            defaultMessage: '%',
+            description: 'Percentage',
+          })}
         />
       </EuiFormRow>
     );
@@ -103,15 +113,23 @@ export function LayerSettings(props) {
     const layerSupportsGlobalQuery = props.layer.getIndexPatternIds().length;
 
     const applyGlobalQueryCheckbox = (
-      <EuiSwitch
-        label={i18n.translate('xpack.maps.layerPanel.applyGlobalQueryCheckboxLabel', {
-          defaultMessage: `Apply global filter to layer`,
+      <EuiFormRow
+        label={i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGlobalFilterLabel', {
+          defaultMessage: 'Global filter',
         })}
-        checked={layerSupportsGlobalQuery ? props.applyGlobalQuery : false}
-        onChange={onApplyGlobalQueryChange}
-        disabled={!layerSupportsGlobalQuery}
-        data-test-subj="mapLayerPanelApplyGlobalQueryCheckbox"
-      />
+        display="columnCompressedSwitch"
+      >
+        <EuiSwitch
+          label={i18n.translate('xpack.maps.layerPanel.applyGlobalQueryCheckboxLabel', {
+            defaultMessage: `Apply to layer`,
+          })}
+          checked={layerSupportsGlobalQuery ? props.applyGlobalQuery : false}
+          onChange={onApplyGlobalQueryChange}
+          disabled={!layerSupportsGlobalQuery}
+          data-test-subj="mapLayerPanelApplyGlobalQueryCheckbox"
+          compressed
+        />
+      </EuiFormRow>
     );
 
     if (layerSupportsGlobalQuery) {
@@ -146,8 +164,6 @@ export function LayerSettings(props) {
         {renderLabel()}
         {renderZoomSliders()}
         {renderAlphaSlider()}
-
-        <EuiSpacer size="m" />
         {renderApplyGlobalQueryCheckbox()}
       </EuiPanel>
 
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/view.js b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/view.js
index f7e242a82b89d0..9efbfe45da29c0 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/view.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/view.js
@@ -29,6 +29,13 @@ import {
 
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { KibanaContextProvider } from '../../../../../../../src/plugins/kibana_react/public';
+
+import { Storage } from 'ui/storage';
+const localStorage = new Storage(window.localStorage);
+
+// This import will eventually become a dependency injected by the fully deangularized NP plugin.
+import { npStart } from 'ui/new_platform';
 
 export class LayerPanel extends React.Component {
 
@@ -144,75 +151,84 @@ export class LayerPanel extends React.Component {
     }
 
     return (
-      <EuiFlexGroup
-        direction="column"
-        gutterSize="none"
+      <KibanaContextProvider
+        services={{
+          appName: 'maps',
+          store: localStorage,
+          autocomplete: npStart.plugins.autocomplete,
+          ...npStart.core,
+        }}
       >
-        <EuiFlyoutHeader hasBorder className="mapLayerPanel__header">
-          <EuiFlexGroup responsive={false} alignItems="center" gutterSize="s">
-            <EuiFlexItem grow={false}>
-              <EuiButtonIcon
-                aria-label={
-                  i18n.translate('xpack.maps.layerPanel.fitToBoundsAriaLabel', {
-                    defaultMessage: 'Fit to bounds'
+        <EuiFlexGroup
+          direction="column"
+          gutterSize="none"
+        >
+          <EuiFlyoutHeader hasBorder className="mapLayerPanel__header">
+            <EuiFlexGroup responsive={false} alignItems="center" gutterSize="s">
+              <EuiFlexItem grow={false}>
+                <EuiButtonIcon
+                  aria-label={
+                    i18n.translate('xpack.maps.layerPanel.fitToBoundsAriaLabel', {
+                      defaultMessage: 'Fit to bounds'
+                    })
+                  }
+                  iconType={selectedLayer.getLayerTypeIconName()}
+                  onClick={this.props.fitToBounds}
+                >
+                  <FormattedMessage
+                    id="xpack.maps.layerPanel.fitToBoundsButtonLabel"
+                    defaultMessage="Fit"
+                  />
+
+                </EuiButtonIcon>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <EuiTitle size="s">
+                  <h2>{this.state.displayName}</h2>
+                </EuiTitle>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+            <EuiSpacer size="xs" />
+            <div className="mapLayerPanel__sourceDetails">
+              <EuiAccordion
+                id="accordion1"
+                buttonContent={
+                  i18n.translate('xpack.maps.layerPanel.sourceDetailsLabel', {
+                    defaultMessage: 'Source details'
                   })
                 }
-                iconType={selectedLayer.getLayerTypeIconName()}
-                onClick={this.props.fitToBounds}
               >
-                <FormattedMessage
-                  id="xpack.maps.layerPanel.fitToBoundsButtonLabel"
-                  defaultMessage="Fit"
-                />
-
-              </EuiButtonIcon>
-            </EuiFlexItem>
-            <EuiFlexItem>
-              <EuiTitle size="s">
-                <h2>{this.state.displayName}</h2>
-              </EuiTitle>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-          <EuiSpacer size="xs" />
-          <div className="mapLayerPanel__sourceDetails">
-            <EuiAccordion
-              id="accordion1"
-              buttonContent={
-                i18n.translate('xpack.maps.layerPanel.sourceDetailsLabel', {
-                  defaultMessage: 'Source details'
-                })
-              }
-            >
-              <EuiText color="subdued" size="s">
-                <EuiSpacer size="xs" />
-                {this._renderSourceProperties()}
-              </EuiText>
-            </EuiAccordion>
-          </div>
-        </EuiFlyoutHeader>
+                <EuiText color="subdued" size="s">
+                  <EuiSpacer size="xs" />
+                  {this._renderSourceProperties()}
+                </EuiText>
+              </EuiAccordion>
+            </div>
+          </EuiFlyoutHeader>
 
-        <div className="mapLayerPanel__body">
-          <div className="mapLayerPanel__bodyOverflow">
+          <div className="mapLayerPanel__body">
+            <div className="mapLayerPanel__bodyOverflow">
 
-            <LayerErrors/>
+              <LayerErrors/>
 
-            <LayerSettings/>
+              <LayerSettings/>
 
-            <SourceSettings/>
+              <SourceSettings/>
 
-            {this._renderFilterSection()}
+              {this._renderFilterSection()}
 
-            {this._renderJoinSection()}
+              {this._renderJoinSection()}
 
-            <StyleSettings/>
+              <StyleSettings/>
 
+            </div>
           </div>
-        </div>
 
-        <EuiFlyoutFooter className="mapLayerPanel__footer">
-          <FlyoutFooter />
-        </EuiFlyoutFooter>
-      </EuiFlexGroup>
+          <EuiFlyoutFooter className="mapLayerPanel__footer">
+            <FlyoutFooter />
+          </EuiFlyoutFooter>
+        </EuiFlexGroup>
+      </KibanaContextProvider>
     );
   }
 }
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map/feature_geometry_filter_form.js b/x-pack/legacy/plugins/maps/public/connected_components/map/feature_geometry_filter_form.js
index 16bf188c437759..10913bcdbb96d8 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/map/feature_geometry_filter_form.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/map/feature_geometry_filter_form.js
@@ -16,8 +16,46 @@ import { GeometryFilterForm } from '../../components/geometry_filter_form';
 
 export class FeatureGeometryFilterForm extends Component {
 
-  _createFilter = ({ geometryLabel, indexPatternId, geoFieldName, geoFieldType, relation }) => {
+  state = {
+    isLoading: false,
+  }
+
+  componentDidMount() {
+    this._isMounted = true;
+  }
+
+  componentWillUnmount() {
+    this._isMounted = false;
+  }
+
+  _loadPreIndexedShape = async () => {
+    this.setState({
+      isLoading: true,
+    });
+
+    let preIndexedShape;
+    try {
+      preIndexedShape = await this.props.loadPreIndexedShape();
+    } catch (err) {
+      // ignore error, just fall back to using geometry if preIndexedShape can not be fetched
+    }
+
+    if (this._isMounted) {
+      this.setState({ isLoading: false });
+    }
+
+    return preIndexedShape;
+  }
+
+  _createFilter = async ({ geometryLabel, indexPatternId, geoFieldName, geoFieldType, relation }) => {
+    const preIndexedShape = await this._loadPreIndexedShape();
+    if (!this._isMounted) {
+      // do not create filter if component is unmounted
+      return;
+    }
+
     const filter = createSpatialFilterWithGeometry({
+      preIndexedShape,
       geometry: this.props.geometry,
       geometryLabel,
       indexPatternId,
@@ -65,6 +103,7 @@ export class FeatureGeometryFilterForm extends Component {
         onSubmit={this._createFilter}
         isFilterGeometryClosed={this.props.geometry.type !== GEO_JSON_TYPE.LINE_STRING
           && this.props.geometry.type !== GEO_JSON_TYPE.MULTI_LINE_STRING}
+        isLoading={this.state.isLoading}
       />
     );
   }
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map/feature_tooltip.js b/x-pack/legacy/plugins/maps/public/connected_components/map/feature_tooltip.js
index 4075ae54a36956..6c68bd6be4c384 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/map/feature_tooltip.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/map/feature_tooltip.js
@@ -338,6 +338,15 @@ export class FeatureTooltip extends React.Component {
     );
   }
 
+  _loadCurrentFeaturePreIndexedShape = () => {
+    const filteredFeatures = this._filterFeatures();
+    const currentFeature = filteredFeatures[this.state.pageNumber];
+    return this.props.loadPreIndexedShape({
+      layerId: currentFeature.layerId,
+      featureId: currentFeature.id
+    });
+  }
+
   render() {
     const filteredFeatures = this._filterFeatures();
     const currentFeature = filteredFeatures[this.state.pageNumber];
@@ -355,6 +364,7 @@ export class FeatureTooltip extends React.Component {
           geometry={currentFeatureGeometry}
           geoFields={filteredGeoFields}
           addFilters={this.props.addFilters}
+          loadPreIndexedShape={this._loadCurrentFeaturePreIndexedShape}
         />
       );
     }
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map/mb/tooltip_control/__snapshots__/tool_control.test.js.snap b/x-pack/legacy/plugins/maps/public/connected_components/map/mb/tooltip_control/__snapshots__/tool_control.test.js.snap
index 1dfc4d681e569e..8c09b7a160ec8d 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/map/mb/tooltip_control/__snapshots__/tool_control.test.js.snap
+++ b/x-pack/legacy/plugins/maps/public/connected_components/map/mb/tooltip_control/__snapshots__/tool_control.test.js.snap
@@ -111,6 +111,7 @@ exports[`TooltipControl render tooltipState is provided should render tooltip po
       isLocked={false}
       loadFeatureGeometry={[Function]}
       loadFeatureProperties={[Function]}
+      loadPreIndexedShape={[Function]}
     />
   </EuiText>
 </EuiPopover>
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.js b/x-pack/legacy/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.js
index 165d73222a99a4..d788f93f915644 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.js
@@ -251,6 +251,7 @@ export class TooltipControl extends React.Component {
     if (!tooltipLayer) {
       return null;
     }
+
     const targetFeature = tooltipLayer.getFeatureById(featureId);
     if (!targetFeature) {
       return null;
@@ -264,6 +265,7 @@ export class TooltipControl extends React.Component {
     if (!tooltipLayer) {
       return [];
     }
+
     const targetFeature = tooltipLayer.getFeatureById(featureId);
     if (!targetFeature) {
       return [];
@@ -271,6 +273,20 @@ export class TooltipControl extends React.Component {
     return await tooltipLayer.getPropertiesForTooltip(targetFeature.properties);
   };
 
+  _loadPreIndexedShape = async ({ layerId, featureId }) => {
+    const tooltipLayer = this._findLayerById(layerId);
+    if (!tooltipLayer) {
+      return null;
+    }
+
+    const targetFeature = tooltipLayer.getFeatureById(featureId);
+    if (!targetFeature) {
+      return null;
+    }
+
+    return await tooltipLayer.getSource().getPreIndexedShape(targetFeature.properties);
+  };
+
   _findLayerById = (layerId) => {
     return this.props.layerList.find(layer => {
       return layer.getId() === layerId;
@@ -308,6 +324,7 @@ export class TooltipControl extends React.Component {
           anchorLocation={this.props.tooltipState.location}
           findLayerById={this._findLayerById}
           geoFields={this.props.geoFields}
+          loadPreIndexedShape={this._loadPreIndexedShape}
         />
       </EuiText>
     );
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/toolbar_overlay/set_view_control/set_view_control.js b/x-pack/legacy/plugins/maps/public/connected_components/toolbar_overlay/set_view_control/set_view_control.js
index f1d055d357b24f..05ec23d10795a4 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/toolbar_overlay/set_view_control/set_view_control.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/toolbar_overlay/set_view_control/set_view_control.js
@@ -13,6 +13,8 @@ import {
   EuiFieldNumber,
   EuiButtonIcon,
   EuiPopover,
+  EuiTextAlign,
+  EuiSpacer,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -72,7 +74,7 @@ export class SetViewControl extends Component {
     return {
       isInvalid,
       component: (
-        <EuiFormRow label={label} isInvalid={isInvalid} error={error} display="rowCompressed">
+        <EuiFormRow label={label} isInvalid={isInvalid} error={error} display="columnCompressed">
           <EuiFieldNumber
             compressed
             value={value}
@@ -125,22 +127,29 @@ export class SetViewControl extends Component {
     });
 
     return (
-      <EuiForm data-test-subj="mapSetViewForm">
+      <EuiForm data-test-subj="mapSetViewForm" style={{ width: 240 }}>
         {latFormRow}
 
         {lonFormRow}
 
         {zoomFormRow}
 
-        <EuiButton
-          size="s"
-          fill
-          disabled={isLatInvalid || isLonInvalid || isZoomInvalid}
-          onClick={this._onSubmit}
-          data-test-subj="submitViewButton"
-        >
-          <FormattedMessage id="xpack.maps.setViewControl.submitButtonLabel" defaultMessage="Go" />
-        </EuiButton>
+        <EuiSpacer size="s" />
+
+        <EuiTextAlign textAlign="right">
+          <EuiButton
+            size="s"
+            fill
+            disabled={isLatInvalid || isLonInvalid || isZoomInvalid}
+            onClick={this._onSubmit}
+            data-test-subj="submitViewButton"
+          >
+            <FormattedMessage
+              id="xpack.maps.setViewControl.submitButtonLabel"
+              defaultMessage="Go"
+            />
+          </EuiButton>
+        </EuiTextAlign>
       </EuiForm>
     );
   }
@@ -149,6 +158,7 @@ export class SetViewControl extends Component {
     return (
       <EuiPopover
         anchorPosition="leftUp"
+        panelPaddingSize="s"
         button={
           <EuiButtonIcon
             className="mapToolbarOverlay__button"
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/toolbar_overlay/tools_control/__snapshots__/tools_control.test.js.snap b/x-pack/legacy/plugins/maps/public/connected_components/toolbar_overlay/tools_control/__snapshots__/tools_control.test.js.snap
index a97e9f404a4878..681c3f0fbfd612 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/toolbar_overlay/tools_control/__snapshots__/tools_control.test.js.snap
+++ b/x-pack/legacy/plugins/maps/public/connected_components/toolbar_overlay/tools_control/__snapshots__/tools_control.test.js.snap
@@ -63,7 +63,7 @@ exports[`Should render cancel button when drawing 1`] = `
                 onSubmit={[Function]}
               />,
               "id": 1,
-              "title": "Draw shape to filter data",
+              "title": "Draw shape",
             },
             Object {
               "content": <GeometryFilterForm
@@ -84,7 +84,7 @@ exports[`Should render cancel button when drawing 1`] = `
                 onSubmit={[Function]}
               />,
               "id": 2,
-              "title": "Draw bounds to filter data",
+              "title": "Draw bounds",
             },
           ]
         }
@@ -166,7 +166,7 @@ exports[`renders 1`] = `
             onSubmit={[Function]}
           />,
           "id": 1,
-          "title": "Draw shape to filter data",
+          "title": "Draw shape",
         },
         Object {
           "content": <GeometryFilterForm
@@ -187,7 +187,7 @@ exports[`renders 1`] = `
             onSubmit={[Function]}
           />,
           "id": 2,
-          "title": "Draw bounds to filter data",
+          "title": "Draw bounds",
         },
       ]
     }
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/toolbar_overlay/tools_control/tools_control.js b/x-pack/legacy/plugins/maps/public/connected_components/toolbar_overlay/tools_control/tools_control.js
index 722c615ea43242..ea6ffe3ba14355 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/toolbar_overlay/tools_control/tools_control.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/toolbar_overlay/tools_control/tools_control.js
@@ -26,10 +26,17 @@ const DRAW_BOUNDS_LABEL = i18n.translate('xpack.maps.toolbarOverlay.drawBoundsLa
   defaultMessage: 'Draw bounds to filter data',
 });
 
-export class ToolsControl extends Component {
+const DRAW_SHAPE_LABEL_SHORT = i18n.translate('xpack.maps.toolbarOverlay.drawShapeLabelShort', {
+  defaultMessage: 'Draw shape',
+});
+
+const DRAW_BOUNDS_LABEL_SHORT = i18n.translate('xpack.maps.toolbarOverlay.drawBoundsLabelShort', {
+  defaultMessage: 'Draw bounds',
+});
 
+export class ToolsControl extends Component {
   state = {
-    isPopoverOpen: false
+    isPopoverOpen: false,
   };
 
   _togglePopover = () => {
@@ -42,18 +49,18 @@ export class ToolsControl extends Component {
     this.setState({ isPopoverOpen: false });
   };
 
-  _initiateShapeDraw = (options) => {
+  _initiateShapeDraw = options => {
     this.props.initiateDraw({
       drawType: DRAW_TYPE.POLYGON,
-      ...options
+      ...options,
     });
     this._closePopover();
-  }
+  };
 
-  _initiateBoundsDraw = (options) => {
+  _initiateBoundsDraw = options => {
     this.props.initiateDraw({
       drawType: DRAW_TYPE.BOUNDS,
-      ...options
+      ...options,
     });
     this._closePopover();
   };
@@ -68,48 +75,50 @@ export class ToolsControl extends Component {
         items: [
           {
             name: DRAW_SHAPE_LABEL,
-            panel: 1
+            panel: 1,
           },
           {
             name: DRAW_BOUNDS_LABEL,
-            panel: 2
-          }
-        ]
+            panel: 2,
+          },
+        ],
       },
       {
         id: 1,
-        title: DRAW_SHAPE_LABEL,
+        title: DRAW_SHAPE_LABEL_SHORT,
         content: (
           <GeometryFilterForm
             className="mapDrawControl__geometryFilterForm"
-            buttonLabel={i18n.translate('xpack.maps.toolbarOverlay.drawShape.onSubmitButtonLabel', {
-              defaultMessage: 'Draw shape',
-            })}
+            buttonLabel={DRAW_SHAPE_LABEL_SHORT}
             geoFields={this.props.geoFields}
-            intitialGeometryLabel={i18n.translate('xpack.maps.toolbarOverlay.drawShape.initialGeometryLabel', {
-              defaultMessage: 'shape',
-            })}
+            intitialGeometryLabel={i18n.translate(
+              'xpack.maps.toolbarOverlay.drawShape.initialGeometryLabel',
+              {
+                defaultMessage: 'shape',
+              }
+            )}
             onSubmit={this._initiateShapeDraw}
           />
-        )
+        ),
       },
       {
         id: 2,
-        title: DRAW_BOUNDS_LABEL,
+        title: DRAW_BOUNDS_LABEL_SHORT,
         content: (
           <GeometryFilterForm
             className="mapDrawControl__geometryFilterForm"
-            buttonLabel={i18n.translate('xpack.maps.toolbarOverlay.drawBounds.onSubmitButtonLabel', {
-              defaultMessage: 'Draw bounds',
-            })}
+            buttonLabel={DRAW_BOUNDS_LABEL_SHORT}
             geoFields={this.props.geoFields}
-            intitialGeometryLabel={i18n.translate('xpack.maps.toolbarOverlay.drawBounds.initialGeometryLabel', {
-              defaultMessage: 'bounds',
-            })}
+            intitialGeometryLabel={i18n.translate(
+              'xpack.maps.toolbarOverlay.drawBounds.initialGeometryLabel',
+              {
+                defaultMessage: 'bounds',
+              }
+            )}
             onSubmit={this._initiateBoundsDraw}
           />
-        )
-      }
+        ),
+      },
     ];
   }
 
@@ -141,10 +150,7 @@ export class ToolsControl extends Component {
         withTitle
         anchorPosition="leftUp"
       >
-        <EuiContextMenu
-          initialPanelId={0}
-          panels={this._getDrawPanels()}
-        />
+        <EuiContextMenu initialPanelId={0} panels={this._getDrawPanels()} />
       </EuiPopover>
     );
 
@@ -154,15 +160,9 @@ export class ToolsControl extends Component {
 
     return (
       <EuiFlexGroup gutterSize="s">
+        <EuiFlexItem>{toolsPopoverButton}</EuiFlexItem>
         <EuiFlexItem>
-          {toolsPopoverButton}
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiButton
-            size="s"
-            fill
-            onClick={this.props.cancelDraw}
-          >
+          <EuiButton size="s" fill onClick={this.props.cancelDraw}>
             <FormattedMessage
               id="xpack.maps.tooltip.toolsControl.cancelDrawButtonLabel"
               defaultMessage="Cancel"
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/__snapshots__/view.test.js.snap b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/__snapshots__/view.test.js.snap
index fb352e9c2d9e3c..eb30a5c33496ee 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/__snapshots__/view.test.js.snap
+++ b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/__snapshots__/view.test.js.snap
@@ -76,7 +76,7 @@ exports[`LayerControl is rendered 1`] = `
 </Fragment>
 `;
 
-exports[`LayerControl props Should not render LayerTOC when isLayerTOCOpen is false 1`] = `
+exports[`LayerControl isLayerTOCOpen Should render expand button 1`] = `
 <EuiToolTip
   content="Expand layers panel"
   delay="long"
@@ -92,7 +92,42 @@ exports[`LayerControl props Should not render LayerTOC when isLayerTOCOpen is fa
 </EuiToolTip>
 `;
 
-exports[`LayerControl props isReadOnly 1`] = `
+exports[`LayerControl isLayerTOCOpen Should render expand button with error icon when layer has error 1`] = `
+<EuiToolTip
+  content="Expand layers panel"
+  delay="long"
+  position="left"
+>
+  <EuiButtonIcon
+    aria-label="Expand layers panel"
+    className="mapLayerControl__openLayerTOCButton"
+    color="text"
+    iconType="alert"
+    onClick={[Function]}
+  />
+</EuiToolTip>
+`;
+
+exports[`LayerControl isLayerTOCOpen Should render expand button with loading icon when layer is loading 1`] = `
+<EuiToolTip
+  content="Expand layers panel"
+  delay="long"
+  position="left"
+>
+  <button
+    aria-label="Expand layers panel"
+    className="euiButtonIcon euiButtonIcon--text mapLayerControl__openLayerTOCButton"
+    onClick={[Function]}
+    type="button"
+  >
+    <EuiLoadingSpinner
+      size="m"
+    />
+  </button>
+</EuiToolTip>
+`;
+
+exports[`LayerControl isReadOnly 1`] = `
 <Fragment>
   <EuiPanel
     className="mapWidgetControl mapWidgetControl-hasShadow"
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/index.js b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/index.js
index ff8fcca31e2439..fc5a17e53a0165 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/index.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/index.js
@@ -9,11 +9,13 @@ import { LayerControl } from './view';
 import { FLYOUT_STATE } from '../../../reducers/ui';
 import { updateFlyout, setIsLayerTOCOpen } from '../../../actions/ui_actions';
 import { getIsReadOnly, getIsLayerTOCOpen } from '../../../selectors/ui_selectors';
+import { getLayerList } from '../../../selectors/map_selectors';
 
 function mapStateToProps(state = {}) {
   return {
     isReadOnly: getIsReadOnly(state),
     isLayerTOCOpen: getIsLayerTOCOpen(state),
+    layerList: getLayerList(state),
   };
 }
 
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.js b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.js
index 92594ee1000148..89c2d288f42d33 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.js
@@ -14,13 +14,51 @@ import {
   EuiSpacer,
   EuiButtonIcon,
   EuiToolTip,
+  EuiLoadingSpinner,
 } from '@elastic/eui';
 import { LayerTOC } from './layer_toc';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 
-export function LayerControl({ isReadOnly, isLayerTOCOpen, showAddLayerWizard, closeLayerTOC, openLayerTOC }) {
+function renderExpandButton({ hasErrors, isLoading, onClick }) {
+  const expandLabel = i18n.translate('xpack.maps.layerControl.openLayerTOCButtonAriaLabel', {
+    defaultMessage: 'Expand layers panel'
+  });
+
+  if (isLoading) {
+    // Can not use EuiButtonIcon with spinner because spinner is a class and not an icon
+    return (
+      <button
+        className="euiButtonIcon euiButtonIcon--text mapLayerControl__openLayerTOCButton"
+        type="button"
+        onClick={onClick}
+        aria-label={expandLabel}
+      >
+        <EuiLoadingSpinner size="m"/>
+      </button>
+    );
+  }
+
+  return (
+    <EuiButtonIcon
+      className="mapLayerControl__openLayerTOCButton"
+      color="text"
+      onClick={onClick}
+      iconType={hasErrors ? 'alert' : 'menuLeft'}
+      aria-label={expandLabel}
+    />
+  );
+}
+
+export function LayerControl({ isReadOnly, isLayerTOCOpen, showAddLayerWizard, closeLayerTOC, openLayerTOC, layerList }) {
   if (!isLayerTOCOpen) {
+    const hasErrors = layerList.some(layer => {
+      return layer.hasErrors();
+    });
+    const isLoading = layerList.some(layer => {
+      return layer.isLayerLoading();
+    });
+
     return (
       <EuiToolTip
         delay="long"
@@ -29,15 +67,7 @@ export function LayerControl({ isReadOnly, isLayerTOCOpen, showAddLayerWizard, c
         })}
         position="left"
       >
-        <EuiButtonIcon
-          className="mapLayerControl__openLayerTOCButton"
-          color="text"
-          onClick={openLayerTOC}
-          iconType="menuLeft"
-          aria-label={i18n.translate('xpack.maps.layerControl.openLayerTOCButtonAriaLabel', {
-            defaultMessage: 'Expand layers panel'
-          })}
-        />
+        {renderExpandButton({ hasErrors, isLoading, onClick: openLayerTOC })}
       </EuiToolTip>
     );
   }
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.test.js b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.test.js
index e4369140d8162e..e318606db46fc8 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.test.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/view.test.js
@@ -11,7 +11,7 @@ jest.mock('./layer_toc', () => ({
 }));
 
 import React from 'react';
-import { shallowWithIntl } from 'test_utils/enzyme_helpers';
+import { shallow } from 'enzyme';
 
 import { LayerControl } from './view';
 
@@ -20,43 +20,75 @@ const defaultProps = {
   closeLayerTOC: () => {},
   openLayerTOC: () => {},
   isLayerTOCOpen: true,
+  layerList: [],
 };
 
 describe('LayerControl', () => {
   test('is rendered', () => {
-    const component = shallowWithIntl(
+    const component = shallow(
       <LayerControl
         {...defaultProps}
       />
     );
 
-    expect(component)
-      .toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
-  describe('props', () => {
-    test('isReadOnly', () => {
-      const component = shallowWithIntl(
+  test('isReadOnly', () => {
+    const component = shallow(
+      <LayerControl
+        {...defaultProps}
+        isReadOnly={true}
+      />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  describe('isLayerTOCOpen', () => {
+
+    test('Should render expand button', () => {
+      const component = shallow(
+        <LayerControl
+          {...defaultProps}
+          isLayerTOCOpen={false}
+        />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+
+    test('Should render expand button with loading icon when layer is loading', () => {
+      const mockLayerThatIsLoading = {
+        hasErrors: () => { return false; },
+        isLayerLoading: () => { return true; }
+      };
+      const component = shallow(
         <LayerControl
           {...defaultProps}
-          isReadOnly={true}
+          isLayerTOCOpen={false}
+          layerList={[mockLayerThatIsLoading]}
         />
       );
 
-      expect(component)
-        .toMatchSnapshot();
+      expect(component).toMatchSnapshot();
     });
 
-    test('Should not render LayerTOC when isLayerTOCOpen is false', () => {
-      const component = shallowWithIntl(
+    test('Should render expand button with error icon when layer has error', () => {
+      const mockLayerThatHasError = {
+        hasErrors: () => { return true; },
+        isLayerLoading: () => { return false; }
+      };
+      const component = shallow(
         <LayerControl
           {...defaultProps}
           isLayerTOCOpen={false}
+          layerList={[mockLayerThatHasError]}
         />
       );
 
-      expect(component)
-        .toMatchSnapshot();
+      expect(component).toMatchSnapshot();
     });
   });
+
 });
diff --git a/x-pack/legacy/plugins/maps/public/elasticsearch_geo_utils.js b/x-pack/legacy/plugins/maps/public/elasticsearch_geo_utils.js
index 2ad8cc856838cf..bfb3f710116e06 100644
--- a/x-pack/legacy/plugins/maps/public/elasticsearch_geo_utils.js
+++ b/x-pack/legacy/plugins/maps/public/elasticsearch_geo_utils.js
@@ -297,6 +297,7 @@ export function createSpatialFilterWithGeometry(options) {
 }
 
 function createGeometryFilterWithMeta({
+  preIndexedShape,
   geometry,
   geometryLabel,
   indexPatternId,
@@ -320,14 +321,21 @@ function createGeometryFilterWithMeta({
   };
 
   if (geoFieldType === ES_GEO_FIELD_TYPE.GEO_SHAPE) {
+    const shapeQuery = {
+      relation
+    };
+
+    if (preIndexedShape) {
+      shapeQuery.indexed_shape = preIndexedShape;
+    } else {
+      shapeQuery.shape = geometry;
+    }
+
     return {
       meta,
       geo_shape: {
         ignore_unmapped: true,
-        [geoFieldName]: {
-          shape: geometry,
-          relation
-        }
+        [geoFieldName]: shapeQuery
       }
     };
   }
diff --git a/x-pack/legacy/plugins/maps/public/index.js b/x-pack/legacy/plugins/maps/public/index.js
index b6d9c44e17c5ae..5cd2288bf6a1ed 100644
--- a/x-pack/legacy/plugins/maps/public/index.js
+++ b/x-pack/legacy/plugins/maps/public/index.js
@@ -32,7 +32,7 @@ import './angular/map_controller';
 import listingTemplate from './angular/listing_ng_wrapper.html';
 import mapTemplate from './angular/map.html';
 import { MapListing } from './components/map_listing';
-import { recentlyAccessed } from 'ui/persisted_log';
+import { npStart } from 'ui/new_platform';
 
 const app = uiModules.get('app/maps', ['ngRoute', 'react']);
 
@@ -105,7 +105,7 @@ routes
         const id = $route.current.params.id;
         return gisMapSavedObjectLoader.get(id)
           .then((savedMap) => {
-            recentlyAccessed.add(savedMap.getFullPath(), savedMap.title, id);
+            npStart.core.chrome.recentlyAccessed.add(savedMap.getFullPath(), savedMap.title, id);
             docTitle.change(savedMap.title);
             return savedMap;
           })
diff --git a/x-pack/legacy/plugins/maps/public/layers/layer.js b/x-pack/legacy/plugins/maps/public/layers/layer.js
index ab1af73634c600..c1e45d9b7c7a82 100644
--- a/x-pack/legacy/plugins/maps/public/layers/layer.js
+++ b/x-pack/legacy/plugins/maps/public/layers/layer.js
@@ -9,7 +9,11 @@ import { EuiIcon, EuiLoadingSpinner } from '@elastic/eui';
 import turf from 'turf';
 import turfBooleanContains from '@turf/boolean-contains';
 import { DataRequest } from './util/data_request';
-import { MB_SOURCE_ID_LAYER_ID_PREFIX_DELIMITER, SOURCE_DATA_ID_ORIGIN } from '../../common/constants';
+import { InjectedData } from './util/injected_data';
+import {
+  MB_SOURCE_ID_LAYER_ID_PREFIX_DELIMITER,
+  SOURCE_DATA_ID_ORIGIN
+} from '../../common/constants';
 import uuid from 'uuid/v4';
 import { copyPersistentState } from '../reducers/util';
 import { i18n } from '@kbn/i18n';
@@ -28,6 +32,11 @@ export class AbstractLayer {
     } else {
       this._dataRequests = [];
     }
+    if (this._descriptor.__injectedData) {
+      this._injectedData = new InjectedData(this._descriptor.__injectedData);
+    } else {
+      this._injectedData = null;
+    }
   }
 
   static getBoundDataForSource(mbMap, sourceId) {
@@ -39,6 +48,7 @@ export class AbstractLayer {
     const layerDescriptor = { ...options };
 
     layerDescriptor.__dataRequests = _.get(options, '__dataRequests', []);
+    layerDescriptor.__injectedData = _.get(options, '__injectedData', null);
     layerDescriptor.id = _.get(options, 'id', uuid());
     layerDescriptor.label = options.label && options.label.length > 0 ? options.label : null;
     layerDescriptor.minZoom = _.get(options, 'minZoom', 0);
@@ -277,6 +287,10 @@ export class AbstractLayer {
     return this._dataRequests.find(dataRequest => dataRequest.getDataId() === id);
   }
 
+  getInjectedData() {
+    return this._injectedData ? this._injectedData.getData() : null;
+  }
+
   isLayerLoading() {
     return this._dataRequests.some(dataRequest => dataRequest.isLoading());
   }
diff --git a/x-pack/legacy/plugins/maps/public/layers/sources/client_file_source/geojson_file_source.js b/x-pack/legacy/plugins/maps/public/layers/sources/client_file_source/geojson_file_source.js
index db255074fa261f..ba5993f28b360f 100644
--- a/x-pack/legacy/plugins/maps/public/layers/sources/client_file_source/geojson_file_source.js
+++ b/x-pack/legacy/plugins/maps/public/layers/sources/client_file_source/geojson_file_source.js
@@ -36,18 +36,9 @@ export class GeojsonFileSource extends AbstractVectorSource {
     applyGlobalQuery: DEFAULT_APPLY_GLOBAL_QUERY
   }
 
-  static createDescriptor(geoJson, name) {
-    // Wrap feature as feature collection if needed
-    const featureCollection = (geoJson.type === 'Feature')
-      ? {
-        type: 'FeatureCollection',
-        features: [{ ...geoJson }]
-      }
-      : geoJson;
-
+  static createDescriptor(name) {
     return {
       type: GeojsonFileSource.type,
-      featureCollection,
       name
     };
   }
@@ -95,9 +86,16 @@ export class GeojsonFileSource extends AbstractVectorSource {
         onPreviewSource(null);
         return;
       }
-      const sourceDescriptor = GeojsonFileSource.createDescriptor(geojsonFile, name);
+      const sourceDescriptor = GeojsonFileSource.createDescriptor(name);
       const source = new GeojsonFileSource(sourceDescriptor, inspectorAdapters);
-      onPreviewSource(source);
+      const featureCollection = (geojsonFile.type === 'Feature')
+        ? {
+          type: 'FeatureCollection',
+          features: [{ ...geojsonFile }]
+        }
+        : geojsonFile;
+
+      onPreviewSource(source, { __injectedData: featureCollection });
     };
   };
 
@@ -128,22 +126,6 @@ export class GeojsonFileSource extends AbstractVectorSource {
     );
   }
 
-  async getGeoJsonWithMeta() {
-    const copiedPropsFeatures = this._descriptor.featureCollection.features
-      .map(feature => ({
-        type: 'Feature',
-        geometry: feature.geometry,
-        properties: feature.properties ? { ...feature.properties } : {}
-      }));
-    return {
-      data: {
-        type: 'FeatureCollection',
-        features: copiedPropsFeatures
-      },
-      meta: {}
-    };
-  }
-
   async getDisplayName() {
     return this._descriptor.name;
   }
@@ -156,4 +138,7 @@ export class GeojsonFileSource extends AbstractVectorSource {
     return GeojsonFileSource.isIndexingSource;
   }
 
+  isInjectedData() {
+    return true;
+  }
 }
diff --git a/x-pack/legacy/plugins/maps/public/layers/sources/es_geo_grid_source/update_source_editor.js b/x-pack/legacy/plugins/maps/public/layers/sources/es_geo_grid_source/update_source_editor.js
index 216875095a0432..bed8236da1be8c 100644
--- a/x-pack/legacy/plugins/maps/public/layers/sources/es_geo_grid_source/update_source_editor.js
+++ b/x-pack/legacy/plugins/maps/public/layers/sources/es_geo_grid_source/update_source_editor.js
@@ -93,7 +93,7 @@ export class UpdateSourceEditor extends Component {
     return (
       <Fragment>
         <ResolutionEditor resolution={this.props.resolution} onChange={this._onResolutionChange} />
-        <EuiSpacer />
+        <EuiSpacer size="m" />
         {this._renderMetricsEditor()}
       </Fragment>
     );
diff --git a/x-pack/legacy/plugins/maps/public/layers/sources/es_search_source/es_search_source.js b/x-pack/legacy/plugins/maps/public/layers/sources/es_search_source/es_search_source.js
index 6947333409515b..071e231bb6e2da 100644
--- a/x-pack/legacy/plugins/maps/public/layers/sources/es_search_source/es_search_source.js
+++ b/x-pack/legacy/plugins/maps/public/layers/sources/es_search_source/es_search_source.js
@@ -240,7 +240,7 @@ export class ESSearchSource extends AbstractESSource {
 
     const indexPattern = await this._getIndexPattern();
     const unusedMetaFields = indexPattern.metaFields.filter(metaField => {
-      return metaField !== '_id';
+      return !['_id', '_index'].includes(metaField);
     });
     const flattenHit = hit => {
       const properties = indexPattern.flattenHit(hit);
@@ -412,4 +412,14 @@ export class ESSearchSource extends AbstractESSource {
       topHitsSize: this._descriptor.topHitsSize,
     };
   }
+
+  async getPreIndexedShape(properties) {
+    const geoField = await this._getGeoField();
+
+    return {
+      index: properties._index, // Can not use index pattern title because it may reference many indices
+      id: properties._id,
+      path: geoField.name,
+    };
+  }
 }
diff --git a/x-pack/legacy/plugins/maps/public/layers/sources/source.js b/x-pack/legacy/plugins/maps/public/layers/sources/source.js
index a029ffe2d2ab59..a9df3592af2765 100644
--- a/x-pack/legacy/plugins/maps/public/layers/sources/source.js
+++ b/x-pack/legacy/plugins/maps/public/layers/sources/source.js
@@ -115,9 +115,18 @@ export class AbstractSource {
     return AbstractSource.isIndexingSource;
   }
 
+  isInjectedData() {
+    return false;
+  }
+
   supportsElasticsearchFilters() {
     return false;
   }
+
+  // Returns geo_shape indexed_shape context for spatial quering by pre-indexed shapes
+  async getPreIndexedShape(/* properties */) {
+    return null;
+  }
 }
 
 
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/__snapshots__/vector_style_symbol_editor.test.js.snap b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/__snapshots__/vector_style_symbol_editor.test.js.snap
index f83240e3f70d01..97706169d98bf7 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/__snapshots__/vector_style_symbol_editor.test.js.snap
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/__snapshots__/vector_style_symbol_editor.test.js.snap
@@ -1,34 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Should render icon select when symbolized as Icon 1`] = `
-<EuiFormRow
-  describedByIds={Array []}
-  display="rowCompressed"
-  fullWidth={false}
-  hasEmptyLabelSpace={false}
-  label="Symbol type"
-  labelType="label"
->
-  <EuiSelect
-    compressed={true}
+<Fragment>
+  <EuiFormRow
+    describedByIds={Array []}
+    display="columnCompressed"
     fullWidth={false}
-    hasNoInitialSelection={false}
-    isLoading={false}
-    onChange={[Function]}
-    options={
-      Array [
-        Object {
-          "text": "circle marker",
-          "value": "circle",
-        },
-        Object {
-          "text": "icon",
-          "value": "icon",
-        },
-      ]
-    }
-    value="icon"
-  />
+    hasEmptyLabelSpace={false}
+    label="Symbol type"
+    labelType="label"
+  >
+    <EuiButtonGroup
+      buttonSize="compressed"
+      idSelected="icon"
+      isFullWidth={true}
+      onChange={[Function]}
+      options={
+        Array [
+          Object {
+            "id": "circle",
+            "label": "circle marker",
+          },
+          Object {
+            "id": "icon",
+            "label": "icon",
+          },
+        ]
+      }
+    />
+  </EuiFormRow>
   <EuiSpacer
     size="s"
   />
@@ -60,37 +60,37 @@ exports[`Should render icon select when symbolized as Icon 1`] = `
     }
     singleSelection={true}
   />
-</EuiFormRow>
+</Fragment>
 `;
 
 exports[`Should render symbol select when symbolized as Circle 1`] = `
-<EuiFormRow
-  describedByIds={Array []}
-  display="rowCompressed"
-  fullWidth={false}
-  hasEmptyLabelSpace={false}
-  label="Symbol type"
-  labelType="label"
->
-  <EuiSelect
-    compressed={true}
+<Fragment>
+  <EuiFormRow
+    describedByIds={Array []}
+    display="columnCompressed"
     fullWidth={false}
-    hasNoInitialSelection={false}
-    isLoading={false}
-    onChange={[Function]}
-    options={
-      Array [
-        Object {
-          "text": "circle marker",
-          "value": "circle",
-        },
-        Object {
-          "text": "icon",
-          "value": "icon",
-        },
-      ]
-    }
-    value="circle"
-  />
-</EuiFormRow>
+    hasEmptyLabelSpace={false}
+    label="Symbol type"
+    labelType="label"
+  >
+    <EuiButtonGroup
+      buttonSize="compressed"
+      idSelected="circle"
+      isFullWidth={true}
+      onChange={[Function]}
+      options={
+        Array [
+          Object {
+            "id": "circle",
+            "label": "circle marker",
+          },
+          Object {
+            "id": "icon",
+            "label": "icon",
+          },
+        ]
+      }
+    />
+  </EuiFormRow>
+</Fragment>
 `;
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/color/_color_stops.scss b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/color/_color_stops.scss
index 7d6c6ede0d3307..eab7896650772b 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/color/_color_stops.scss
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/color/_color_stops.scss
@@ -1,6 +1,6 @@
 .mapColorStop {
   position: relative;
-  padding-right: $euiSizeXL + $euiSizeXS;
+  padding-right: $euiSizeXL + $euiSizeS;
 
   & + & {
     margin-top: $euiSizeS;
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/orientation/static_orientation_selection.js b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/orientation/static_orientation_selection.js
index 8a335822038876..b5529c69874598 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/orientation/static_orientation_selection.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/orientation/static_orientation_selection.js
@@ -23,6 +23,7 @@ export function StaticOrientationSelection({ onChange, styleOptions }) {
       showInput
       showLabels
       compressed
+      append="°"
     />
   );
 }
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/size/size_range_selector.js b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/size/size_range_selector.js
index fd1ce0ffe89a88..31b9b4f5ad6498 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/size/size_range_selector.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/size/size_range_selector.js
@@ -8,6 +8,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ValidatedDualRange } from 'ui/validated_range';
 import { DEFAULT_MIN_SIZE, DEFAULT_MAX_SIZE } from '../../../vector_style_defaults';
+import { i18n } from '@kbn/i18n';
 
 export function SizeRangeSelector({ minSize, maxSize, onChange, ...rest }) {
   const onSizeChange = ([min, max]) => {
@@ -23,10 +24,14 @@ export function SizeRangeSelector({ minSize, maxSize, onChange, ...rest }) {
       max={DEFAULT_MAX_SIZE}
       step={1}
       value={[minSize, maxSize]}
-      showInput
+      showInput="inputWithPopover"
       showRange
       onChange={onSizeChange}
       allowEmptyRange={false}
+      append={i18n.translate('xpack.maps.vector.dualSize.unitLabel', {
+        defaultMessage: 'px',
+        description: 'Shorthand for pixel',
+      })}
       {...rest}
     />
   );
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/size/static_size_selection.js b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/size/static_size_selection.js
index 507f81ade93092..38f8fe53d17488 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/size/static_size_selection.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/size/static_size_selection.js
@@ -8,6 +8,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { staticSizeShape } from '../style_option_shapes';
 import { ValidatedRange } from '../../../../../components/validated_range';
+import { i18n } from '@kbn/i18n';
 
 export function StaticSizeSelection({ onChange, styleOptions }) {
   const onSizeChange = size => {
@@ -23,6 +24,10 @@ export function StaticSizeSelection({ onChange, styleOptions }) {
       showInput
       showLabels
       compressed
+      append={i18n.translate('xpack.maps.vector.size.unitLabel', {
+        defaultMessage: 'px',
+        description: 'Shorthand for pixel',
+      })}
     />
   );
 }
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_symbol_editor.js b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_symbol_editor.js
index 0fcbe7653c3deb..268b1f39255b94 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_symbol_editor.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_symbol_editor.js
@@ -10,7 +10,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiFormRow,
-  EuiSelect,
+  EuiButtonGroup,
   EuiSpacer,
   EuiComboBox,
 } from '@elastic/eui';
@@ -21,14 +21,14 @@ import { SymbolIcon } from './legend/symbol_icon';
 
 const SYMBOLIZE_AS_OPTIONS = [
   {
-    value: SYMBOLIZE_AS_CIRCLE,
-    text: i18n.translate('xpack.maps.vector.symbolAs.circleLabel', {
+    id: SYMBOLIZE_AS_CIRCLE,
+    label: i18n.translate('xpack.maps.vector.symbolAs.circleLabel', {
       defaultMessage: 'circle marker',
     }),
   },
   {
-    value: SYMBOLIZE_AS_ICON,
-    text: i18n.translate('xpack.maps.vector.symbolAs.IconLabel', {
+    id: SYMBOLIZE_AS_ICON,
+    label: i18n.translate('xpack.maps.vector.symbolAs.IconLabel', {
       defaultMessage: 'icon',
     }),
   },
@@ -41,26 +41,27 @@ export function VectorStyleSymbolEditor({
   isDarkMode,
 }) {
   const renderSymbolizeAsSelect = () => {
-    const selectedOption = SYMBOLIZE_AS_OPTIONS.find(({ value }) => {
-      return value === styleOptions.symbolizeAs;
+    const selectedOption = SYMBOLIZE_AS_OPTIONS.find(({ id }) => {
+      return id === styleOptions.symbolizeAs;
     });
 
-    const onSymbolizeAsChange = e => {
+    const onSymbolizeAsChange = optionId => {
       const styleDescriptor = {
         options: {
           ...styleOptions,
-          symbolizeAs: e.target.value,
+          symbolizeAs: optionId,
         },
       };
       handlePropertyChange('symbol', styleDescriptor);
     };
 
     return (
-      <EuiSelect
+      <EuiButtonGroup
+        buttonSize="compressed"
         options={SYMBOLIZE_AS_OPTIONS}
-        value={selectedOption ? selectedOption.value : undefined}
+        idSelected={selectedOption ? selectedOption.id : undefined}
         onChange={onSymbolizeAsChange}
-        compressed
+        isFullWidth
       />
     );
   };
@@ -113,28 +114,23 @@ export function VectorStyleSymbolEditor({
     );
   };
 
-  const renderFormRowContent = () => {
-    if (styleOptions.symbolizeAs === SYMBOLIZE_AS_CIRCLE) {
-      return renderSymbolizeAsSelect();
-    }
-
-    return (
-      <Fragment>
+  return (
+    <Fragment>
+      <EuiFormRow
+        label={i18n.translate('xpack.maps.vector.symbolLabel', {
+          defaultMessage: 'Symbol type',
+        })}
+        display="columnCompressed"
+      >
         {renderSymbolizeAsSelect()}
-        <EuiSpacer size="s" />
-        {renderSymbolSelect()}
-      </Fragment>
-    );
-  };
+      </EuiFormRow>
 
-  return (
-    <EuiFormRow
-      label={i18n.translate('xpack.maps.vector.symbolLabel', {
-        defaultMessage: 'Symbol type',
-      })}
-      display="rowCompressed"
-    >
-      {renderFormRowContent()}
-    </EuiFormRow>
+      {styleOptions.symbolizeAs !== SYMBOLIZE_AS_CIRCLE && (
+        <Fragment>
+          <EuiSpacer size="s" />
+          {renderSymbolSelect()}
+        </Fragment>
+      )}
+    </Fragment>
   );
 }
diff --git a/x-pack/legacy/plugins/maps/public/layers/util/injected_data.js b/x-pack/legacy/plugins/maps/public/layers/util/injected_data.js
new file mode 100644
index 00000000000000..8c18819e9f8b57
--- /dev/null
+++ b/x-pack/legacy/plugins/maps/public/layers/util/injected_data.js
@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+export class InjectedData {
+
+  constructor(data) {
+    this._descriptor = { data };
+  }
+
+  getData() {
+    return this._descriptor.data;
+  }
+
+  hasData() {
+    return !!this._descriptor.data;
+  }
+
+}
+
diff --git a/x-pack/legacy/plugins/maps/public/layers/vector_layer.js b/x-pack/legacy/plugins/maps/public/layers/vector_layer.js
index 7f7875d7fb995c..829078d98996e9 100644
--- a/x-pack/legacy/plugins/maps/public/layers/vector_layer.js
+++ b/x-pack/legacy/plugins/maps/public/layers/vector_layer.js
@@ -131,9 +131,20 @@ export class VectorLayer extends AbstractLayer {
     return true;
   }
 
+  getInjectedData() {
+    const featureCollection = super.getInjectedData();
+    if (!featureCollection) {
+      return null;
+    }
+    // Set default visible property on data
+    featureCollection.features.forEach(
+      feature => _.set(feature, `properties.${FEATURE_VISIBLE_PROPERTY_NAME}`, true)
+    );
+    return featureCollection;
+  }
+
   getCustomIconAndTooltipContent() {
-    const sourceDataRequest = this.getSourceDataRequest();
-    const featureCollection = sourceDataRequest ? sourceDataRequest.getData() : null;
+    const featureCollection = this._getSourceFeatureCollection();
 
     const noResultsIcon = (
       <EuiIcon
@@ -145,9 +156,10 @@ export class VectorLayer extends AbstractLayer {
     if (!featureCollection || featureCollection.features.length === 0) {
       return {
         icon: noResultsIcon,
-        tooltipContent: i18n.translate('xpack.maps.vectorLayer.noResultsFoundTooltip', {
-          defaultMessage: `No results found.`
-        })
+        tooltipContent: i18n.translate(
+          'xpack.maps.vectorLayer.noResultsFoundTooltip', {
+            defaultMessage: `No results found.`
+          })
       };
     }
 
@@ -162,7 +174,7 @@ export class VectorLayer extends AbstractLayer {
       };
     }
 
-
+    const sourceDataRequest = this.getSourceDataRequest();
     const { tooltipContent, areResultsTrimmed } = this._source.getSourceTooltipContent(sourceDataRequest);
     return {
       icon: this._style.getIcon(),
@@ -464,7 +476,17 @@ export class VectorLayer extends AbstractLayer {
     }
   }
 
-  async _syncSource({ startLoading, stopLoading, onLoadError, registerCancelCallback, dataFilters }) {
+  async _syncSource({
+    startLoading, stopLoading, onLoadError, registerCancelCallback, dataFilters
+  }) {
+
+    if (this._source.isInjectedData()) {
+      const featureCollection = this.getInjectedData();
+      return {
+        refreshed: false,
+        featureCollection
+      };
+    }
 
     const requestToken = Symbol(`layer-source-refresh:${ this.getId()} - source`);
 
@@ -481,10 +503,10 @@ export class VectorLayer extends AbstractLayer {
     try {
       startLoading(SOURCE_DATA_ID_ORIGIN, requestToken, searchFilters);
       const layerName = await this.getDisplayName();
-      const {
-        data: featureCollection,
-        meta
-      } = await this._source.getGeoJsonWithMeta(layerName, searchFilters, registerCancelCallback.bind(null, requestToken));
+      const { data: featureCollection, meta } =
+        await this._source.getGeoJsonWithMeta(layerName, searchFilters,
+          registerCancelCallback.bind(null, requestToken)
+        );
       this._assignIdsToFeatures(featureCollection);
       stopLoading(SOURCE_DATA_ID_ORIGIN, requestToken, featureCollection, meta);
       return {
@@ -544,8 +566,12 @@ export class VectorLayer extends AbstractLayer {
   }
 
   _getSourceFeatureCollection() {
-    const sourceDataRequest = this.getSourceDataRequest();
-    return sourceDataRequest ? sourceDataRequest.getData() : null;
+    if (this._source.isInjectedData()) {
+      return this.getInjectedData();
+    } else {
+      const sourceDataRequest = this.getSourceDataRequest();
+      return sourceDataRequest ? sourceDataRequest.getData() : null;
+    }
   }
 
   _syncFeatureCollectionWithMb(mbMap) {
diff --git a/x-pack/legacy/plugins/maps/public/register_vis_type_alias.js b/x-pack/legacy/plugins/maps/public/register_vis_type_alias.js
index 3708957159f612..d82261b7cf84ca 100644
--- a/x-pack/legacy/plugins/maps/public/register_vis_type_alias.js
+++ b/x-pack/legacy/plugins/maps/public/register_vis_type_alias.js
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { setup as visualizationsSetup } from '../../../../../src/legacy/core_plugins/visualizations/public/legacy';
+import { setup as visualizationsSetup } from '../../../../../src/legacy/core_plugins/visualizations/public/np_ready/public/legacy';
 import { i18n } from '@kbn/i18n';
 import { APP_ID, APP_ICON, MAP_BASE_URL } from '../common/constants';
 
diff --git a/x-pack/legacy/plugins/ml/public/_hacks.scss b/x-pack/legacy/plugins/ml/public/_hacks.scss
index b0a8a43d23096d..39740360d8a840 100644
--- a/x-pack/legacy/plugins/ml/public/_hacks.scss
+++ b/x-pack/legacy/plugins/ml/public/_hacks.scss
@@ -1,21 +1,10 @@
 .tab-datavisualizer_index_select,
 .tab-timeseriesexplorer,
-.tab-explorer,
-.tab-jobs {
+.tab-explorer, {
   // Make all page background white until More of the pages use EuiPage to wrap in panel-like components
   background-color: $euiColorEmptyShade;
 }
 
-.tab-jobs {
-  label {
-    display: inline-block;
-  }
-
-   .validation-error {
-    margin-top: $euiSizeXS;
-  }
-}
-
 // ML specific bootstrap hacks
 .button-wrapper {
   display: inline;
diff --git a/x-pack/legacy/plugins/ml/public/app.js b/x-pack/legacy/plugins/ml/public/app.js
index 6cff4b925c9574..6f96a756f0b67a 100644
--- a/x-pack/legacy/plugins/ml/public/app.js
+++ b/x-pack/legacy/plugins/ml/public/app.js
@@ -11,9 +11,7 @@ import 'uiExports/savedObjectTypes';
 
 import 'ui/courier';
 import 'ui/angular-bootstrap';
-import 'ui/persisted_log';
 import 'ui/autoload/all';
-import 'ui/kbn_top_nav';
 
 import 'plugins/ml/components/transition/transition';
 import 'plugins/ml/components/modal/modal';
diff --git a/x-pack/legacy/plugins/ml/public/breadcrumbs.js b/x-pack/legacy/plugins/ml/public/breadcrumbs.ts
similarity index 76%
rename from x-pack/legacy/plugins/ml/public/breadcrumbs.js
rename to x-pack/legacy/plugins/ml/public/breadcrumbs.ts
index bdde734be7c1a3..ba4703d4818ff5 100644
--- a/x-pack/legacy/plugins/ml/public/breadcrumbs.js
+++ b/x-pack/legacy/plugins/ml/public/breadcrumbs.ts
@@ -8,28 +8,28 @@ import { i18n } from '@kbn/i18n';
 
 export const ML_BREADCRUMB = Object.freeze({
   text: i18n.translate('xpack.ml.machineLearningBreadcrumbLabel', {
-    defaultMessage: 'Machine Learning'
+    defaultMessage: 'Machine Learning',
   }),
-  href: '#/'
+  href: '#/',
 });
 
 export const SETTINGS = Object.freeze({
   text: i18n.translate('xpack.ml.settingsBreadcrumbLabel', {
-    defaultMessage: 'Settings'
+    defaultMessage: 'Settings',
   }),
-  href: '#/settings?'
+  href: '#/settings?',
 });
 
 export const ANOMALY_DETECTION_BREADCRUMB = Object.freeze({
   text: i18n.translate('xpack.ml.anomalyDetectionBreadcrumbLabel', {
-    defaultMessage: 'Anomaly Detection'
+    defaultMessage: 'Anomaly Detection',
   }),
-  href: '#/jobs?'
+  href: '#/jobs?',
 });
 
 export const DATA_VISUALIZER_BREADCRUMB = Object.freeze({
   text: i18n.translate('xpack.ml.datavisualizerBreadcrumbLabel', {
-    defaultMessage: 'Data Visualizer'
+    defaultMessage: 'Data Visualizer',
   }),
-  href: '#/datavisualizer?'
+  href: '#/datavisualizer?',
 });
diff --git a/x-pack/legacy/plugins/ml/public/components/create_job_link_card/create_job_link_card.tsx b/x-pack/legacy/plugins/ml/public/components/create_job_link_card/create_job_link_card.tsx
index 6549df35ba381c..07a924caae7724 100644
--- a/x-pack/legacy/plugins/ml/public/components/create_job_link_card/create_job_link_card.tsx
+++ b/x-pack/legacy/plugins/ml/public/components/create_job_link_card/create_job_link_card.tsx
@@ -4,25 +4,77 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FC } from 'react';
+import React, { FC, ReactElement } from 'react';
 
-import { EuiCard, EuiIcon, IconType } from '@elastic/eui';
+import {
+  EuiIcon,
+  IconType,
+  EuiText,
+  EuiTitle,
+  EuiFlexItem,
+  EuiFlexGroup,
+  EuiPanel,
+  EuiLink,
+} from '@elastic/eui';
 
 interface Props {
-  iconType: IconType;
-  title: string;
-  description: string;
-  onClick(): void;
+  icon: IconType | ReactElement;
+  iconAreaLabel?: string;
+  title: any;
+  description: any;
+  href?: string;
+  onClick?: () => void;
+  isDisabled?: boolean;
+  'data-test-subj'?: string;
 }
 
 // Component for rendering a card which links to the Create Job page, displaying an
 // icon, card title, description and link.
-export const CreateJobLinkCard: FC<Props> = ({ iconType, title, description, onClick }) => (
-  <EuiCard
-    layout="horizontal"
-    icon={<EuiIcon size="xl" type={iconType} />}
-    title={title}
-    description={description}
-    onClick={onClick}
-  />
-);
+export const CreateJobLinkCard: FC<Props> = ({
+  icon,
+  iconAreaLabel,
+  title,
+  description,
+  onClick,
+  href,
+  isDisabled,
+  'data-test-subj': dateTestSubj,
+}) => {
+  const linkHrefAndOnClickProps = {
+    ...(href ? { href } : {}),
+    ...(onClick ? { onClick } : {}),
+  };
+  return (
+    <EuiPanel style={{ cursor: isDisabled ? 'not-allowed' : undefined }}>
+      <EuiLink
+        style={{
+          display: 'block',
+          pointerEvents: isDisabled ? 'none' : undefined,
+          background: 'transparent',
+          outline: 'none',
+        }}
+        data-test-subj={dateTestSubj}
+        color="subdued"
+        {...linkHrefAndOnClickProps}
+      >
+        <EuiFlexGroup gutterSize="l" responsive={true}>
+          <EuiFlexItem grow={false} style={{ paddingTop: '8px' }}>
+            {typeof icon === 'string' ? (
+              <EuiIcon size="xl" type={icon} aria-label={iconAreaLabel} />
+            ) : (
+              icon
+            )}
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiTitle size="s">
+              <h4>{title}</h4>
+            </EuiTitle>
+            <EuiText color="subdued">
+              <p>{description}</p>
+            </EuiText>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiLink>
+    </EuiPanel>
+  );
+};
diff --git a/x-pack/legacy/plugins/ml/public/components/data_recognizer/_data_recognizer.scss b/x-pack/legacy/plugins/ml/public/components/data_recognizer/_data_recognizer.scss
deleted file mode 100644
index b915be2ab84536..00000000000000
--- a/x-pack/legacy/plugins/ml/public/components/data_recognizer/_data_recognizer.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-ml-data-recognizer {
-  .ml-data-recognizer-logo {
-    width: $euiSizeXL;
-  }
-}
-
-// Moved here from /home since it's no longer being used there
-.synopsis {
-  display: flex;
-  flex-grow: 1;
-  cursor: pointer;
-
-  &:hover,
-  &:focus {
-    text-decoration: none;
-
-    .synopsisTitle {
-      text-decoration: underline;
-    }
-  }
-}
-
-.synopsisTitle {
-  font-size: $euiSize;
-  font-weight: normal;
-  color: $euiColorPrimary;
-}
-
-.synopsisIcon {
-  padding-top: $euiSizeS;
-}
diff --git a/x-pack/legacy/plugins/ml/public/components/data_recognizer/_index.scss b/x-pack/legacy/plugins/ml/public/components/data_recognizer/_index.scss
deleted file mode 100644
index 67cc4372ea6225..00000000000000
--- a/x-pack/legacy/plugins/ml/public/components/data_recognizer/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'data_recognizer';
\ No newline at end of file
diff --git a/x-pack/legacy/plugins/ml/public/components/data_recognizer/data_recognizer.d.ts b/x-pack/legacy/plugins/ml/public/components/data_recognizer/data_recognizer.d.ts
index c8a7bba2d189f5..e7d191a31e034e 100644
--- a/x-pack/legacy/plugins/ml/public/components/data_recognizer/data_recognizer.d.ts
+++ b/x-pack/legacy/plugins/ml/public/components/data_recognizer/data_recognizer.d.ts
@@ -7,9 +7,14 @@
 import { FC } from 'react';
 
 import { IndexPattern } from 'ui/index_patterns';
+import { SavedSearch } from 'src/legacy/core_plugins/kibana/public/discover/types';
 
 declare const DataRecognizer: FC<{
   indexPattern: IndexPattern;
-  results: any;
-  className: string;
+  savedSearch?: SavedSearch;
+  results: {
+    count: number;
+    onChange?: Function;
+  };
+  className?: string;
 }>;
diff --git a/x-pack/legacy/plugins/ml/public/components/data_recognizer/data_recognizer.js b/x-pack/legacy/plugins/ml/public/components/data_recognizer/data_recognizer.js
index fd754ee5191046..b303ed9b7f008b 100644
--- a/x-pack/legacy/plugins/ml/public/components/data_recognizer/data_recognizer.js
+++ b/x-pack/legacy/plugins/ml/public/components/data_recognizer/data_recognizer.js
@@ -57,9 +57,9 @@ export class DataRecognizer extends Component {
 
   render() {
     return (
-      <div className={this.className}>
+      <>
         {this.state.results}
-      </div>
+      </>
     );
   }
 }
diff --git a/x-pack/legacy/plugins/ml/public/components/data_recognizer/recognized_result.js b/x-pack/legacy/plugins/ml/public/components/data_recognizer/recognized_result.js
index 60dc38f2291f89..6f511abf89e310 100644
--- a/x-pack/legacy/plugins/ml/public/components/data_recognizer/recognized_result.js
+++ b/x-pack/legacy/plugins/ml/public/components/data_recognizer/recognized_result.js
@@ -11,7 +11,9 @@ import PropTypes from 'prop-types';
 
 import {
   EuiIcon,
+  EuiFlexItem
 } from '@elastic/eui';
+import { CreateJobLinkCard } from '../create_job_link_card';
 
 export const RecognizedResult = ({
   config,
@@ -28,35 +30,23 @@ export const RecognizedResult = ({
   // if a logo is available, use that, otherwise display the id
   // the logo should be a base64 encoded image or an eui icon
   if(config.logo && config.logo.icon) {
-    logo = <div className="synopsisIcon"><EuiIcon type={config.logo.icon} size="xl" /></div>;
+    logo = <EuiIcon type={config.logo.icon} size="xl" />;
   } else if (config.logo && config.logo.src) {
-    logo = <div><img className="synopsisIcon" alt="" src={config.logo.src}/></div>;
+    logo = <img alt="" src={config.logo.src}/>;
   } else {
     logo = <h3 className="euiTitle euiTitle--small">{config.id}</h3>;
   }
 
   return (
-    <div className="euiFlexItem">
-      <a href={href} className="euiLink synopsis">
-        <div className="euiPanel euiPanel--paddingMedium synopsisPanel">
-          <div className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive">
-            <div className="euiFlexItem euiFlexItem--flexGrowZero ml-data-recognizer-logo">
-              {logo}
-            </div>
-            <div className="euiFlexItem synopsisContent">
-              <h4 className="euiTitle euiTitle--small synopsisTitle">{config.title}</h4>
-              <div className="euiText synopsisBody">
-                <p>
-                  <span className="euiTextColor euiTextColor--subdued">
-                    {config.description}
-                  </span>
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </a>
-    </div>
+    <EuiFlexItem>
+      <CreateJobLinkCard
+        data-test-subj={id}
+        href={href}
+        title={config.title}
+        description={config.description}
+        icon={logo}
+      />
+    </EuiFlexItem>
   );
 };
 
diff --git a/x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/route.ts b/x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/route.ts
index c3d6b63c4dca20..acb7a47ba8fcb7 100644
--- a/x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/route.ts
+++ b/x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/route.ts
@@ -13,9 +13,7 @@ import {
   loadCurrentIndexPattern,
   loadCurrentSavedSearch,
   loadIndexPatterns,
-  // @ts-ignore
 } from '../../../util/index_utils';
-import indexOrSearchTemplate from '../../../jobs/new_job/wizard/steps/index_or_search/index_or_search.html';
 
 import {
   getDataFrameCreateBreadcrumbs,
@@ -40,7 +38,7 @@ uiRoutes.when('/data_frames/new_transform', {
 });
 
 uiRoutes.when('/data_frames/new_transform/step/index_or_search', {
-  template: indexOrSearchTemplate,
+  template: '<ml-index-or-search />',
   k7Breadcrumbs: getDataFrameIndexOrSearchBreadcrumbs,
   resolve: {
     CheckLicense: checkBasicLicense,
diff --git a/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/__snapshots__/transform_list.test.tsx.snap b/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/__snapshots__/transform_list.test.tsx.snap
index 25e332f71404a6..0d830d30cbe92b 100644
--- a/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/__snapshots__/transform_list.test.tsx.snap
+++ b/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/components/transform_list/__snapshots__/transform_list.test.tsx.snap
@@ -17,7 +17,6 @@ exports[`Data Frame: Transform List <DataFrameTransformList /> Minimal initializ
       ]
     }
     data-test-subj="mlNoDataFrameTransformsFound"
-    iconColor="subdued"
     title={
       <h2>
         No data frame transforms found
diff --git a/x-pack/legacy/plugins/ml/public/datavisualizer/index_based/components/actions_panel/actions_panel.tsx b/x-pack/legacy/plugins/ml/public/datavisualizer/index_based/components/actions_panel/actions_panel.tsx
index 9a291cabf558f9..c8295a1e3d8db3 100644
--- a/x-pack/legacy/plugins/ml/public/datavisualizer/index_based/components/actions_panel/actions_panel.tsx
+++ b/x-pack/legacy/plugins/ml/public/datavisualizer/index_based/components/actions_panel/actions_panel.tsx
@@ -11,7 +11,7 @@ import { i18n } from '@kbn/i18n';
 
 import { IndexPattern } from 'ui/index_patterns';
 
-import { EuiPanel, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
+import { EuiPanel, EuiSpacer, EuiText, EuiTitle, EuiFlexGroup } from '@elastic/eui';
 
 import { useUiChromeContext } from '../../../../contexts/ui/use_ui_chrome_context';
 import { CreateJobLinkCard } from '../../../../components/create_job_link_card';
@@ -63,11 +63,9 @@ export const ActionsPanel: FC<Props> = ({ indexPattern }) => {
           </p>
         </EuiText>
         <EuiSpacer size="m" />
-        <DataRecognizer
-          indexPattern={indexPattern}
-          results={recognizerResults}
-          className="euiFlexGroup euiFlexGrid--gutterLarge euiFlexGroup--responsive euiFlexGroup--wrap"
-        ></DataRecognizer>
+        <EuiFlexGroup gutterSize="l" responsive={true} wrap={true}>
+          <DataRecognizer indexPattern={indexPattern} results={recognizerResults}></DataRecognizer>
+        </EuiFlexGroup>
         <EuiSpacer size="l" />
       </div>
       <EuiText>
@@ -80,7 +78,7 @@ export const ActionsPanel: FC<Props> = ({ indexPattern }) => {
       </EuiText>
       <EuiSpacer size="m" />
       <CreateJobLinkCard
-        iconType="createAdvancedJob"
+        icon="createAdvancedJob"
         title={i18n.translate('xpack.ml.datavisualizer.actionsPanel.advancedTitle', {
           defaultMessage: 'Advanced',
         })}
@@ -89,6 +87,7 @@ export const ActionsPanel: FC<Props> = ({ indexPattern }) => {
             'Use the full range of options to create a job for more advanced use cases',
         })}
         onClick={openAdvancedJobWizard}
+        href={`${basePath}/app/ml#/jobs/new_job/advanced?index=${indexPattern}`}
       />
     </EuiPanel>
   );
diff --git a/x-pack/legacy/plugins/ml/public/datavisualizer/index_based/components/field_data_card/content_types/number_content.tsx b/x-pack/legacy/plugins/ml/public/datavisualizer/index_based/components/field_data_card/content_types/number_content.tsx
index f141b734468aa2..b756818c775a44 100644
--- a/x-pack/legacy/plugins/ml/public/datavisualizer/index_based/components/field_data_card/content_types/number_content.tsx
+++ b/x-pack/legacy/plugins/ml/public/datavisualizer/index_based/components/field_data_card/content_types/number_content.tsx
@@ -10,12 +10,10 @@ import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiSelect, EuiSpacer, EuiText } fro
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 
-// @ts-ignore
-import { ordinalSuffix } from 'ui/utils/ordinal_suffix';
-
 import { FieldDataCardProps } from '../field_data_card';
 import { DisplayValue } from '../../../../../components/display_value';
 import { kibanaFieldFormat } from '../../../../../formatters/kibana_field_format';
+import { numberAsOrdinal } from '../../../../../formatters/number_as_ordinal';
 // @ts-ignore
 import { roundToDecimalPlace } from '../../../../../formatters/round_to_decimal_place';
 import {
@@ -162,8 +160,8 @@ export const NumberContent: FC<FieldDataCardProps> = ({ config }) => {
                   id="xpack.ml.fieldDataCard.cardNumber.displayingPercentilesLabel"
                   defaultMessage="Displaying {minPercent} - {maxPercent} percentiles"
                   values={{
-                    minPercent: ordinalSuffix(distribution.minPercentile),
-                    maxPercent: ordinalSuffix(distribution.maxPercentile),
+                    minPercent: numberAsOrdinal(distribution.minPercentile),
+                    maxPercent: numberAsOrdinal(distribution.maxPercentile),
                   }}
                 />
               </EuiText>
diff --git a/x-pack/legacy/plugins/ml/public/explorer/components/explorer_no_influencers_found/__snapshots__/explorer_no_influencers_found.test.js.snap b/x-pack/legacy/plugins/ml/public/explorer/components/explorer_no_influencers_found/__snapshots__/explorer_no_influencers_found.test.js.snap
index f6e083e31984ac..77821663783cfa 100644
--- a/x-pack/legacy/plugins/ml/public/explorer/components/explorer_no_influencers_found/__snapshots__/explorer_no_influencers_found.test.js.snap
+++ b/x-pack/legacy/plugins/ml/public/explorer/components/explorer_no_influencers_found/__snapshots__/explorer_no_influencers_found.test.js.snap
@@ -2,7 +2,6 @@
 
 exports[`ExplorerNoInfluencersFound snapshot 1`] = `
 <EuiEmptyPrompt
-  iconColor="subdued"
   title={
     <h2>
       <FormattedMessage
diff --git a/x-pack/legacy/plugins/ml/public/explorer/components/explorer_no_jobs_found/__snapshots__/explorer_no_jobs_found.test.js.snap b/x-pack/legacy/plugins/ml/public/explorer/components/explorer_no_jobs_found/__snapshots__/explorer_no_jobs_found.test.js.snap
index 3d143bda7140e3..8aec3c8336da93 100644
--- a/x-pack/legacy/plugins/ml/public/explorer/components/explorer_no_jobs_found/__snapshots__/explorer_no_jobs_found.test.js.snap
+++ b/x-pack/legacy/plugins/ml/public/explorer/components/explorer_no_jobs_found/__snapshots__/explorer_no_jobs_found.test.js.snap
@@ -16,7 +16,6 @@ exports[`ExplorerNoInfluencersFound snapshot 1`] = `
     </EuiButton>
   }
   data-test-subj="mlNoJobsFound"
-  iconColor="subdued"
   iconType="alert"
   title={
     <h2>
diff --git a/x-pack/legacy/plugins/ml/public/explorer/components/explorer_no_results_found/__snapshots__/explorer_no_results_found.test.js.snap b/x-pack/legacy/plugins/ml/public/explorer/components/explorer_no_results_found/__snapshots__/explorer_no_results_found.test.js.snap
index a7eb6d8db8a59a..dc7e567380fdf9 100644
--- a/x-pack/legacy/plugins/ml/public/explorer/components/explorer_no_results_found/__snapshots__/explorer_no_results_found.test.js.snap
+++ b/x-pack/legacy/plugins/ml/public/explorer/components/explorer_no_results_found/__snapshots__/explorer_no_results_found.test.js.snap
@@ -13,7 +13,6 @@ exports[`ExplorerNoInfluencersFound snapshot 1`] = `
       </p>
     </React.Fragment>
   }
-  iconColor="subdued"
   iconType="iInCircle"
   title={
     <h2>
diff --git a/x-pack/legacy/plugins/ml/public/explorer/explorer_charts/explorer_chart_config_builder.js b/x-pack/legacy/plugins/ml/public/explorer/explorer_charts/explorer_chart_config_builder.js
index e9c8a5e105948f..e62707d60a2a12 100644
--- a/x-pack/legacy/plugins/ml/public/explorer/explorer_charts/explorer_chart_config_builder.js
+++ b/x-pack/legacy/plugins/ml/public/explorer/explorer_charts/explorer_chart_config_builder.js
@@ -13,7 +13,7 @@
 
 import _ from 'lodash';
 
-import { parseInterval } from 'ui/utils/parse_interval';
+import { parseInterval } from '../../../common/util/parse_interval';
 import { getEntityFieldList } from '../../../common/util/anomaly_utils';
 import { buildConfigFromDetector } from '../../util/chart_config_builder';
 import { mlJobService } from '../../services/job_service';
diff --git a/x-pack/legacy/plugins/ml/public/explorer/explorer_utils.js b/x-pack/legacy/plugins/ml/public/explorer/explorer_utils.js
index eee0f349dcd333..2f8b259b594bb1 100644
--- a/x-pack/legacy/plugins/ml/public/explorer/explorer_utils.js
+++ b/x-pack/legacy/plugins/ml/public/explorer/explorer_utils.js
@@ -9,10 +9,10 @@
  */
 
 import { chain, each, get, union, uniq } from 'lodash';
-import { parseInterval } from 'ui/utils/parse_interval';
 
 import { getEntityFieldList } from '../../common/util/anomaly_utils';
 import { isSourceDataChartableForDetector, isModelPlotEnabled } from '../../common/util/job_utils';
+import { parseInterval } from '../../common/util/parse_interval';
 import { ml } from '../services/ml_api_service';
 import { mlJobService } from '../services/job_service';
 import { mlResultsService } from 'plugins/ml/services/results_service';
diff --git a/x-pack/legacy/plugins/ml/public/formatters/number_as_ordinal.test.ts b/x-pack/legacy/plugins/ml/public/formatters/number_as_ordinal.test.ts
new file mode 100644
index 00000000000000..5b378934ed5e89
--- /dev/null
+++ b/x-pack/legacy/plugins/ml/public/formatters/number_as_ordinal.test.ts
@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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 { numberAsOrdinal } from './number_as_ordinal';
+
+describe('ML - numberAsOrdinal formatter', () => {
+  const tests = [
+    { number: 0, asOrdinal: '0th' },
+    { number: 1, asOrdinal: '1st' },
+    { number: 2.2, asOrdinal: '2nd' },
+    { number: 3, asOrdinal: '3rd' },
+    { number: 5, asOrdinal: '5th' },
+    { number: 10, asOrdinal: '10th' },
+    { number: 11, asOrdinal: '11th' },
+    { number: 22, asOrdinal: '22nd' },
+    { number: 33, asOrdinal: '33rd' },
+    { number: 44.4, asOrdinal: '44th' },
+    { number: 100, asOrdinal: '100th' },
+  ];
+  test('returns the expected numeral format', () => {
+    tests.forEach(test => {
+      expect(numberAsOrdinal(test.number)).toBe(test.asOrdinal);
+    });
+  });
+});
diff --git a/x-pack/legacy/plugins/ml/public/formatters/number_as_ordinal.ts b/x-pack/legacy/plugins/ml/public/formatters/number_as_ordinal.ts
new file mode 100644
index 00000000000000..992357a82efaa6
--- /dev/null
+++ b/x-pack/legacy/plugins/ml/public/formatters/number_as_ordinal.ts
@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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 numeral from '@elastic/numeral';
+
+/**
+ * Formats the supplied number as ordinal e.g. 15 as 15th.
+ * Formatting first converts the supplied number to an integer by flooring.
+ * @param {number} value to format as an ordinal
+ * @return {string} number formatted as an ordinal e.g. 15th
+ */
+export function numberAsOrdinal(num: number) {
+  const int = Math.floor(num);
+  return `${numeral(int).format('0o')}`;
+}
diff --git a/x-pack/legacy/plugins/ml/public/index.scss b/x-pack/legacy/plugins/ml/public/index.scss
index 4cab633d5fa569..a3fefb7b1fac86 100644
--- a/x-pack/legacy/plugins/ml/public/index.scss
+++ b/x-pack/legacy/plugins/ml/public/index.scss
@@ -36,7 +36,6 @@
   @import 'components/chart_tooltip/index';
   @import 'components/confirm_modal/index';
   @import 'components/controls/index';
-  @import 'components/data_recognizer/index';
   @import 'components/documentation_help_link/index';
   @import 'components/entity_cell/index';
   @import 'components/field_title_bar/index';
diff --git a/x-pack/legacy/plugins/ml/public/jobs/breadcrumbs.js b/x-pack/legacy/plugins/ml/public/jobs/breadcrumbs.ts
similarity index 55%
rename from x-pack/legacy/plugins/ml/public/jobs/breadcrumbs.js
rename to x-pack/legacy/plugins/ml/public/jobs/breadcrumbs.ts
index d066a524d70aab..35e9c3326a4ccf 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/breadcrumbs.js
+++ b/x-pack/legacy/plugins/ml/public/jobs/breadcrumbs.ts
@@ -4,12 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-
-import { ML_BREADCRUMB, DATA_VISUALIZER_BREADCRUMB, ANOMALY_DETECTION_BREADCRUMB } from '../breadcrumbs';
 import { i18n } from '@kbn/i18n';
+import { Breadcrumb } from 'ui/chrome';
+import {
+  ANOMALY_DETECTION_BREADCRUMB,
+  DATA_VISUALIZER_BREADCRUMB,
+  ML_BREADCRUMB,
+} from '../breadcrumbs';
 
-
-export function getJobManagementBreadcrumbs() {
+export function getJobManagementBreadcrumbs(): Breadcrumb[] {
   // Whilst top level nav menu with tabs remains,
   // use root ML breadcrumb.
   return [
@@ -17,93 +20,93 @@ export function getJobManagementBreadcrumbs() {
     ANOMALY_DETECTION_BREADCRUMB,
     {
       text: i18n.translate('xpack.ml.anomalyDetection.jobManagementLabel', {
-        defaultMessage: 'Job Management'
+        defaultMessage: 'Job Management',
       }),
-      href: ''
-    }
+      href: '',
+    },
   ];
 }
 
-export function getCreateJobBreadcrumbs() {
+export function getCreateJobBreadcrumbs(): Breadcrumb[] {
   return [
     ML_BREADCRUMB,
     ANOMALY_DETECTION_BREADCRUMB,
     {
       text: i18n.translate('xpack.ml.jobsBreadcrumbs.createJobLabel', {
-        defaultMessage: 'Create job'
+        defaultMessage: 'Create job',
       }),
-      href: '#/jobs/new_job'
-    }
+      href: '#/jobs/new_job',
+    },
   ];
 }
 
-export function getCreateSingleMetricJobBreadcrumbs() {
+export function getCreateSingleMetricJobBreadcrumbs(): Breadcrumb[] {
   return [
     ...getCreateJobBreadcrumbs(),
     {
       text: i18n.translate('xpack.ml.jobsBreadcrumbs.singleMetricLabel', {
-        defaultMessage: 'Single metric'
+        defaultMessage: 'Single metric',
       }),
-      href: ''
-    }
+      href: '',
+    },
   ];
 }
 
-export function getCreateMultiMetricJobBreadcrumbs() {
+export function getCreateMultiMetricJobBreadcrumbs(): Breadcrumb[] {
   return [
     ...getCreateJobBreadcrumbs(),
     {
       text: i18n.translate('xpack.ml.jobsBreadcrumbs.multiMetricLabel', {
-        defaultMessage: 'Multi metric'
+        defaultMessage: 'Multi metric',
       }),
-      href: ''
-    }
+      href: '',
+    },
   ];
 }
 
-export function getCreatePopulationJobBreadcrumbs() {
+export function getCreatePopulationJobBreadcrumbs(): Breadcrumb[] {
   return [
     ...getCreateJobBreadcrumbs(),
     {
       text: i18n.translate('xpack.ml.jobsBreadcrumbs.populationLabel', {
-        defaultMessage: 'Population'
+        defaultMessage: 'Population',
       }),
-      href: ''
-    }
+      href: '',
+    },
   ];
 }
 
-export function getAdvancedJobConfigurationBreadcrumbs() {
+export function getAdvancedJobConfigurationBreadcrumbs(): Breadcrumb[] {
   return [
     ...getCreateJobBreadcrumbs(),
     {
       text: i18n.translate('xpack.ml.jobsBreadcrumbs.advancedConfigurationLabel', {
-        defaultMessage: 'Advanced configuration'
+        defaultMessage: 'Advanced configuration',
       }),
-      href: ''
-    }
+      href: '',
+    },
   ];
 }
 
-export function getCreateRecognizerJobBreadcrumbs($routeParams) {
+export function getCreateRecognizerJobBreadcrumbs($routeParams: any): Breadcrumb[] {
   return [
     ...getCreateJobBreadcrumbs(),
     {
       text: $routeParams.id,
-      href: ''
-    }
+      href: '',
+    },
   ];
 }
 
-export function getDataVisualizerIndexOrSearchBreadcrumbs() {
+export function getDataVisualizerIndexOrSearchBreadcrumbs(): Breadcrumb[] {
   return [
     ML_BREADCRUMB,
     DATA_VISUALIZER_BREADCRUMB,
     {
       text: i18n.translate('xpack.ml.jobsBreadcrumbs.selectIndexOrSearchLabel', {
-        defaultMessage: 'Select index or search'
+        defaultMessage: 'Select index or search',
       }),
-      href: ''
-    }
+      href: '',
+    },
   ];
 }
diff --git a/x-pack/legacy/plugins/ml/public/jobs/index.js b/x-pack/legacy/plugins/ml/public/jobs/index.js
index 9b0246240da68a..2baf5c102f4efc 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/index.js
+++ b/x-pack/legacy/plugins/ml/public/jobs/index.js
@@ -12,6 +12,5 @@ import './new_job/simple/single_metric';
 import './new_job/simple/multi_metric';
 import './new_job/simple/population';
 import './new_job/simple/recognize';
-import './new_job/wizard';
 import 'plugins/ml/components/validate_job';
 import './new_job_new';
diff --git a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/job_actions/management.js b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/job_actions/management.js
index ba13b06821a1f2..7d97c8589e7d10 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/job_actions/management.js
+++ b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/job_actions/management.js
@@ -40,7 +40,8 @@ export function actionsMenuContent(showEditJobFlyout, showDeleteJobModal, showSt
       onClick: (item) => {
         showStartDatafeedModal([item]);
         closeMenu();
-      }
+      },
+      'data-test-subj': 'mlActionButtonStartDatafeed'
     }, {
       name: i18n.translate('xpack.ml.jobsList.managementActions.stopDatafeedLabel', {
         defaultMessage: 'Stop datafeed'
@@ -54,7 +55,8 @@ export function actionsMenuContent(showEditJobFlyout, showDeleteJobModal, showSt
       onClick: (item) => {
         stopDatafeeds([item], refreshJobs);
         closeMenu(true);
-      }
+      },
+      'data-test-subj': 'mlActionButtonStopDatafeed'
     }, {
       name: i18n.translate('xpack.ml.jobsList.managementActions.closeJobLabel', {
         defaultMessage: 'Close job'
@@ -68,7 +70,8 @@ export function actionsMenuContent(showEditJobFlyout, showDeleteJobModal, showSt
       onClick: (item) => {
         closeJobs([item], refreshJobs);
         closeMenu(true);
-      }
+      },
+      'data-test-subj': 'mlActionButtonCloseJob'
     }, {
       name: i18n.translate('xpack.ml.jobsList.managementActions.cloneJobLabel', {
         defaultMessage: 'Clone job'
@@ -92,7 +95,8 @@ export function actionsMenuContent(showEditJobFlyout, showDeleteJobModal, showSt
       onClick: (item) => {
         cloneJob(item.id);
         closeMenu(true);
-      }
+      },
+      'data-test-subj': 'mlActionButtonCloneJob'
     }, {
       name: i18n.translate('xpack.ml.jobsList.managementActions.editJobLabel', {
         defaultMessage: 'Edit job'
@@ -105,7 +109,8 @@ export function actionsMenuContent(showEditJobFlyout, showDeleteJobModal, showSt
       onClick: (item) => {
         showEditJobFlyout(item);
         closeMenu();
-      }
+      },
+      'data-test-subj': 'mlActionButtonEditJob'
     }, {
       name: i18n.translate('xpack.ml.jobsList.managementActions.deleteJobLabel', {
         defaultMessage: 'Delete job'
@@ -119,7 +124,8 @@ export function actionsMenuContent(showEditJobFlyout, showDeleteJobModal, showSt
       onClick: (item) => {
         showDeleteJobModal([item]);
         closeMenu();
-      }
+      },
+      'data-test-subj': 'mlActionButtonDeleteJob'
     }
   ];
 }
diff --git a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/job_details/job_details.js b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/job_details/job_details.js
index 97e7c1b72e5651..192310937c0e93 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/job_details/job_details.js
+++ b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/job_details/job_details.js
@@ -51,7 +51,7 @@ class JobDetailsUI extends Component {
     const { job } = this.state;
     if (job === undefined) {
       return (
-        <div className="job-loading-spinner" data-test-subj="jobDetails loading">
+        <div className="job-loading-spinner" data-test-subj="mlJobDetails loading">
           <EuiLoadingSpinner size="l"/>
         </div>
       );
@@ -77,35 +77,35 @@ class JobDetailsUI extends Component {
 
       const tabs = [{
         id: 'job-settings',
-        'data-test-subj': 'tab-job-settings',
+        'data-test-subj': 'mlJobListTab-job-settings',
         name: intl.formatMessage({
           id: 'xpack.ml.jobsList.jobDetails.tabs.jobSettingsLabel',
           defaultMessage: 'Job settings'
         }),
-        content: <JobDetailsPane data-test-subj="details-job-settings" sections={[general, customUrl, node, calendars]} />,
+        content: <JobDetailsPane data-test-subj="mlJobDetails-job-settings" sections={[general, customUrl, node, calendars]} />,
         time: job.open_time
       }, {
         id: 'job-config',
-        'data-test-subj': 'tab-job-config',
+        'data-test-subj': 'mlJobListTab-job-config',
         name: intl.formatMessage({
           id: 'xpack.ml.jobsList.jobDetails.tabs.jobConfigLabel',
           defaultMessage: 'Job config'
         }),
         content: <JobDetailsPane
-          data-test-subj="details-job-config"
+          data-test-subj="mlJobDetails-job-config"
           sections={[detectors, influencers, analysisConfig, analysisLimits, dataDescription]}
         />,
       }, {
         id: 'counts',
-        'data-test-subj': 'tab-counts',
+        'data-test-subj': 'mlJobListTab-counts',
         name: intl.formatMessage({
           id: 'xpack.ml.jobsList.jobDetails.tabs.countsLabel',
           defaultMessage: 'Counts'
         }),
-        content: <JobDetailsPane data-test-subj="details-counts" sections={[counts, modelSizeStats]} />,
+        content: <JobDetailsPane data-test-subj="mlJobDetails-counts" sections={[counts, modelSizeStats]} />,
       }, {
         id: 'json',
-        'data-test-subj': 'tab-json',
+        'data-test-subj': 'mlJobListTab-json',
         name: intl.formatMessage({
           id: 'xpack.ml.jobsList.jobDetails.tabs.jsonLabel',
           defaultMessage: 'JSON'
@@ -113,7 +113,7 @@ class JobDetailsUI extends Component {
         content: <JsonPane  job={job} />,
       }, {
         id: 'job-messages',
-        'data-test-subj': 'tab-job-messages',
+        'data-test-subj': 'mlJobListTab-job-messages',
         name: intl.formatMessage({
           id: 'xpack.ml.jobsList.jobDetails.tabs.jobMessagesLabel',
           defaultMessage: 'Job messages'
@@ -126,17 +126,17 @@ class JobDetailsUI extends Component {
         // Datafeed should be at index 2 in tabs array for full details
         tabs.splice(2, 0,  {
           id: 'datafeed',
-          'data-test-subj': 'tab-datafeed',
+          'data-test-subj': 'mlJobListTab-datafeed',
           name: intl.formatMessage({
             id: 'xpack.ml.jobsList.jobDetails.tabs.datafeedLabel',
             defaultMessage: 'Datafeed'
           }),
-          content: <JobDetailsPane data-test-subj="details-datafeed" sections={[datafeed, datafeedTimingStats]} />,
+          content: <JobDetailsPane data-test-subj="mlJobDetails-datafeed" sections={[datafeed, datafeedTimingStats]} />,
         });
 
         tabs.push({
           id: 'datafeed-preview',
-          'data-test-subj': 'tab-datafeed-preview',
+          'data-test-subj': 'mlJobListTab-datafeed-preview',
           name: intl.formatMessage({
             id: 'xpack.ml.jobsList.jobDetails.tabs.datafeedPreviewLabel',
             defaultMessage: 'Datafeed preview'
@@ -144,7 +144,7 @@ class JobDetailsUI extends Component {
           content: <DatafeedPreviewPane job={job} />,
         }, {
           id: 'forecasts',
-          'data-test-subj': 'tab-forecasts',
+          'data-test-subj': 'mlJobListTab-forecasts',
           name: intl.formatMessage({
             id: 'xpack.ml.jobsList.jobDetails.tabs.forecastsLabel',
             defaultMessage: 'Forecasts'
@@ -156,7 +156,7 @@ class JobDetailsUI extends Component {
       if (mlAnnotationsEnabled && showFullDetails) {
         tabs.push({
           id: 'annotations',
-          'data-test-subj': 'tab-annotations',
+          'data-test-subj': 'mlJobListTab-annotations',
           name: intl.formatMessage({
             id: 'xpack.ml.jobsList.jobDetails.tabs.annotationsLabel',
             defaultMessage: 'Annotations'
@@ -171,7 +171,7 @@ class JobDetailsUI extends Component {
       }
 
       return (
-        <div className="tab-contents"  data-test-subj={`details details-${job.job_id}`}>
+        <div className="tab-contents"  data-test-subj={`mlJobListRowDetails details-${job.job_id}`}>
           <EuiTabbedContent
             tabs={tabs}
             initialSelectedTab={tabs[0]}
diff --git a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/job_details/job_details_pane.js b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/job_details/job_details_pane.js
index 93eae8eef2fc28..8a65bd101d6ebf 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/job_details/job_details_pane.js
+++ b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/job_details/job_details_pane.js
@@ -47,7 +47,7 @@ function Section({ section }) {
   return (
     <React.Fragment>
       <EuiTitle size="xs"><h4>{section.title}</h4></EuiTitle>
-      <div className="job-section"  data-test-subj={section.id}>
+      <div className="job-section"  data-test-subj={`mlJobRowDetailsSection-${section.id}`}>
         <EuiTable compressed={true}>
           <EuiTableBody>
             { section.items.map((item, i) => (<SectionItem item={item} key={i} />)) }
diff --git a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/job_group/job_group.js b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/job_group/job_group.js
index 9ba7aba9dc8765..b0e10a975b8633 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/job_group/job_group.js
+++ b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/job_group/job_group.js
@@ -16,7 +16,7 @@ export function JobGroup({ name }) {
   return (
     <div
       className="inline-group"
-      data-test-subj="jobGroup"
+      data-test-subj="mlJobGroup"
       style={{
         backgroundColor: tabColor(name),
         display: 'inline-block',
diff --git a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/jobs_list/jobs_list.js b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/jobs_list/jobs_list.js
index 78d3fbc69ed422..2d4238d543b129 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/jobs_list/jobs_list.js
+++ b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/jobs_list/jobs_list.js
@@ -167,13 +167,13 @@ class JobsListUI extends Component {
               { itemId: item.id }
               )}
             data-row-id={item.id}
-            data-test-subj="detailsToggle"
+            data-test-subj="mlJobListRowDetailsToggle"
           />
         ),
         width: '3%'
       }, {
         field: 'id',
-        'data-test-subj': 'id',
+        'data-test-subj': 'mlJobListColumnId',
         name: intl.formatMessage({
           id: 'xpack.ml.jobsList.idLabel',
           defaultMessage: 'ID'
@@ -195,7 +195,7 @@ class JobsListUI extends Component {
         }),
         sortable: true,
         field: 'description',
-        'data-test-subj': 'description',
+        'data-test-subj': 'mlJobListColumnDescription',
         render: (description, item) => (
           <JobDescription job={item} />
         ),
@@ -203,7 +203,7 @@ class JobsListUI extends Component {
         width: '20%'
       }, {
         field: 'processed_record_count',
-        'data-test-subj': 'recordCount',
+        'data-test-subj': 'mlJobListColumnRecordCount',
         name: intl.formatMessage({
           id: 'xpack.ml.jobsList.processedRecordsLabel',
           defaultMessage: 'Processed records'
@@ -215,7 +215,7 @@ class JobsListUI extends Component {
         width: '10%'
       }, {
         field: 'memory_status',
-        'data-test-subj': 'memoryStatus',
+        'data-test-subj': 'mlJobListColumnMemoryStatus',
         name: intl.formatMessage({
           id: 'xpack.ml.jobsList.memoryStatusLabel',
           defaultMessage: 'Memory status'
@@ -225,7 +225,7 @@ class JobsListUI extends Component {
         width: '5%'
       }, {
         field: 'jobState',
-        'data-test-subj': 'jobState',
+        'data-test-subj': 'mlJobListColumnJobState',
         name: intl.formatMessage({
           id: 'xpack.ml.jobsList.jobStateLabel',
           defaultMessage: 'Job state'
@@ -235,7 +235,7 @@ class JobsListUI extends Component {
         width: '8%'
       }, {
         field: 'datafeedState',
-        'data-test-subj': 'datafeedState',
+        'data-test-subj': 'mlJobListColumnDatafeedState',
         name: intl.formatMessage({
           id: 'xpack.ml.jobsList.datafeedStateLabel',
           defaultMessage: 'Datafeed state'
@@ -278,7 +278,7 @@ class JobsListUI extends Component {
         }),
         truncateText: false,
         field: 'latestTimestampSortValue',
-        'data-test-subj': 'latestTimestamp',
+        'data-test-subj': 'mlJobListColumnLatestTimestamp',
         sortable: true,
         render: (time, item) => (
           <span className="euiTableCellContent__text">
@@ -355,7 +355,7 @@ class JobsListUI extends Component {
         sorting={sorting}
         hasActions={true}
         rowProps={item => ({
-          'data-test-subj': `row row-${item.id}`
+          'data-test-subj': `mlJobListRow row-${item.id}`
         })}
       />
     );
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job/_index.scss b/x-pack/legacy/plugins/ml/public/jobs/new_job/_index.scss
index d56d10f0cb6a9b..00505e7f342d11 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job/_index.scss
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job/_index.scss
@@ -1,3 +1,2 @@
 @import 'advanced/index';
 @import 'simple/index';
-@import 'wizard/index';
\ No newline at end of file
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job/advanced/new_job_controller.js b/x-pack/legacy/plugins/ml/public/jobs/new_job/advanced/new_job_controller.js
index 1083d96998be7f..1421f0fde98915 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job/advanced/new_job_controller.js
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job/advanced/new_job_controller.js
@@ -13,10 +13,10 @@ import 'ace';
 import 'ui/angular_ui_select';
 import 'ui/directives/input_focus';
 
-import { parseInterval } from 'ui/utils/parse_interval';
 import { timefilter } from 'ui/timefilter';
-
 import uiRoutes from 'ui/routes';
+
+import { parseInterval } from '../../../../common/util/parse_interval';
 import { checkFullLicense } from 'plugins/ml/license/check_license';
 import { checkCreateJobsPrivilege } from 'plugins/ml/privilege/check_privilege';
 import template from './new_job.html';
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job/simple/components/watcher/create_watch_directive.js b/x-pack/legacy/plugins/ml/public/jobs/new_job/simple/components/watcher/create_watch_directive.js
index 49da7efe9276a7..f463f50cbccb08 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job/simple/components/watcher/create_watch_directive.js
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job/simple/components/watcher/create_watch_directive.js
@@ -7,7 +7,7 @@
 
 
 import _ from 'lodash';
-import { parseInterval } from 'ui/utils/parse_interval';
+import { parseInterval } from '../../../../../../common/util/parse_interval';
 import { mlCreateWatchService } from 'plugins/ml/jobs/new_job/simple/components/watcher/create_watch_service';
 
 import template from './create_watch.html';
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job/simple/components/watcher/create_watch_view.js b/x-pack/legacy/plugins/ml/public/jobs/new_job/simple/components/watcher/create_watch_view.js
index 1237feed46da5d..bcd6bd733e1186 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job/simple/components/watcher/create_watch_view.js
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job/simple/components/watcher/create_watch_view.js
@@ -25,9 +25,9 @@ import {
 
 import { has } from 'lodash';
 
-import { parseInterval } from 'ui/utils/parse_interval';
 import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 
+import { parseInterval } from '../../../../../../common/util/parse_interval';
 import { ml } from '../../../../../services/ml_api_service';
 import { SelectSeverity } from '../../../../../components/controls/select_severity/select_severity';
 import { mlCreateWatchService } from './create_watch_service';
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/create_job_service.js b/x-pack/legacy/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/create_job_service.js
index 457fad65e2a328..62f29c745b3977 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/create_job_service.js
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/create_job_service.js
@@ -8,8 +8,7 @@
 
 import _ from 'lodash';
 
-import { parseInterval } from 'ui/utils/parse_interval';
-
+import { parseInterval } from '../../../../../../common/util/parse_interval';
 import { ML_MEDIAN_PERCENTS } from 'plugins/ml/../common/util/job_utils';
 import { WIZARD_TYPE } from 'plugins/ml/jobs/new_job/simple/components/constants/general';
 import { calculateTextWidth } from 'plugins/ml/util/string_utils';
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/_index.scss b/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/_index.scss
deleted file mode 100644
index ae17bd2da34797..00000000000000
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'wizard';
\ No newline at end of file
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/_wizard.scss b/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/_wizard.scss
deleted file mode 100644
index 7eadb9a8ce77a0..00000000000000
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/_wizard.scss
+++ /dev/null
@@ -1,91 +0,0 @@
-.job-type-gallery {
-  width: 100%;
-  padding-right: $euiSizeS;
-  padding-left: $euiSizeS;
-  background-color: $euiColorLightestShade;
-  flex: 1 0 auto;
-
-  .job-types-content {
-    max-width: 1200px; // SASSTODO: Proper calc
-    margin-right: auto;
-    margin-left: auto;
-  }
-
-  .synopsis {
-    display: flex;
-    flex-grow: 1;
-
-    .synopsisTitle {
-      font-size: $euiFontSize;
-      font-weight: normal;
-      color: $euiColorPrimary;
-    }
-
-    .synopsisIcon {
-      padding-top: $euiSizeS;
-    }
-  }
-
-  .synopsis:hover {
-    text-decoration: none;
-
-    .synopsisTitle {
-      text-decoration: underline;
-    }
-  }
-
-  .euiFlexItem.disabled {
-    cursor: not-allowed;
-  }
-
-  .synopsis.disabled {
-    pointer-events: none;
-
-    .synopsisTitle {
-      color: $euiColorDarkShade;
-    }
-  }
-
-  .index-warning {
-    border: $euiBorderThin;
-  }
-}
-
-.index-or-saved-search-selection {
-  .kuiBarSection .kuiButtonGroup {
-    display: none;
-  }
-
-  @include euiBreakpoint('xl') {
-    .visWizard {
-      display: flex;
-    }
-
-    .visWizard__column {
-      display: flex;
-      flex-direction: column;
-      padding: 0px $euiSizeXS;
-    }
-
-    .visWizard__row {
-      flex: 1;
-      background-color: $euiColorEmptyShade;
-    }
-
-    .visWizard__column--small {
-      flex: 2;
-    }
-
-    .visWizard__column--large {
-      flex: 3;
-    }
-  }
-
-  /**
-   * 1. Hack in some padding for these panels.
-   */
-  .visWizard__list--paginated--selectable,
-  .visWizard__savedObjectFinder {
-    padding: $euiSizeS; /* 1 */
-  }
-}
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/index_or_search/__tests__/index_or_search_controller.js b/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/index_or_search/__tests__/index_or_search_controller.js
deleted file mode 100644
index 6e277d24908f9f..00000000000000
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/index_or_search/__tests__/index_or_search_controller.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-
-
-import ngMock from 'ng_mock';
-import expect from '@kbn/expect';
-
-describe('ML - Index Or Search Controller', () => {
-  beforeEach(() => {
-    ngMock.module('kibana');
-  });
-
-  it('Initialize Index Or Search Controller', (done) => {
-    ngMock.inject(function ($rootScope, $controller) {
-      const scope = $rootScope.$new();
-
-      expect(() => {
-        $controller('MlNewJobStepIndexOrSearch', {
-          $route: {
-            current: {
-              locals: {}
-            }
-          },
-          $scope: scope
-        });
-      }).to.not.throwError();
-
-      expect(scope.indexPatterns).to.eql([]);
-      done();
-    });
-  });
-});
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/index_or_search/index_or_search.html b/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/index_or_search/index_or_search.html
deleted file mode 100644
index 45c2cb03975940..00000000000000
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/index_or_search/index_or_search.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<ml-nav-menu name="new_job" />
-<ml-new-job class="index-or-saved-search-selection">
-  <ml-message-bar></ml-message-bar>
-  <div class='kuiViewContent kuiViewContent--constrainedWidth kuiViewContentItem' >
-    <div ng-controller="MlNewJobStepIndexOrSearch" class="visWizard" data-test-subj="mlPageSourceSelection">
-      <div class="visWizard__column visWizard__column--small">
-        <h3
-          class="kuiTitle kuiVerticalRhythm"
-          i18n-id="xpack.ml.newJob.wizard.createFromNewSearchTitle"
-          i18n-default-message="From a New Search, Select Index"
-        ></h3>
-        <paginated-selectable-list
-          per-page="20"
-          list="indexPatterns"
-          list-property="attributes.title"
-          user-make-url="withIndexPatternUrl"
-          class="visWizard__row visWizard__list--paginated--selectable kuiVerticalRhythm"
-          disable-auto-focus="true"
-        ></paginated-selectable-list>
-      </div>
-      <div class="visWizard__column visWizard__column--large">
-
-        <h3
-          class="kuiTitle kuiVerticalRhythm"
-          i18n-id="xpack.ml.newJob.wizard.createFromSavedSearchTitle"
-          i18n-default-message="Or, From a Saved Search"
-        ></h3>
-        <saved-object-finder
-          title="{{ ::'xpack.ml.newJob.wizard.savedSearchesTooltip' | i18n: {defaultMessage: 'Saved Searches'} }}"
-          type="searches"
-          class="visWizard__row visWizard__savedObjectFinder kuiVerticalRhythm"
-          make-url="withSavedSearchUrl"
-          disable-auto-focus="true"
-        ></saved-object-finder>
-       </div>
-    </div>
-    </div>
-</ml-new-job>
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/index_or_search/index_or_search_controller.js b/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/index_or_search/index_or_search_controller.js
deleted file mode 100644
index 27117c2235eb5a..00000000000000
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/index_or_search/index_or_search_controller.js
+++ /dev/null
@@ -1,87 +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.
- */
-
-
-
-/*
- * Controller for the first step in the Create Job wizard, allowing the user to
- * select the Kibana index pattern or saved search to use for creating a job.
- */
-
-import uiRoutes from 'ui/routes';
-import { checkLicenseExpired, checkBasicLicense } from 'plugins/ml/license/check_license';
-import { getCreateJobBreadcrumbs, getDataVisualizerIndexOrSearchBreadcrumbs } from 'plugins/ml/jobs/breadcrumbs';
-import { preConfiguredJobRedirect } from 'plugins/ml/jobs/new_job/wizard/preconfigured_job_redirect';
-import {
-  checkCreateJobsPrivilege,
-  checkFindFileStructurePrivilege,
-} from 'plugins/ml/privilege/check_privilege';
-import { loadIndexPatterns, getIndexPatterns } from 'plugins/ml/util/index_utils';
-import { checkMlNodesAvailable } from 'plugins/ml/ml_nodes_check/check_ml_nodes';
-import template from './index_or_search.html';
-import { timefilter } from 'ui/timefilter';
-import './paginated_selectable_list';
-import 'ui/directives/saved_object_finder';
-
-uiRoutes
-  .when('/jobs/new_job', {
-    redirectTo: '/jobs/new_job/step/index_or_search'
-  });
-
-uiRoutes
-  .when('/jobs/new_job/step/index_or_search', {
-    template,
-    k7Breadcrumbs: getCreateJobBreadcrumbs,
-    resolve: {
-      CheckLicense: checkLicenseExpired,
-      privileges: checkCreateJobsPrivilege,
-      indexPatterns: loadIndexPatterns,
-      preConfiguredJobRedirect,
-      checkMlNodesAvailable,
-      nextStepPath: () => '#/jobs/new_job/step/job_type',
-    }
-  });
-
-uiRoutes
-  .when('/datavisualizer_index_select', {
-    template,
-    k7Breadcrumbs: getDataVisualizerIndexOrSearchBreadcrumbs,
-    resolve: {
-      CheckLicense: checkBasicLicense,
-      privileges: checkFindFileStructurePrivilege,
-      indexPatterns: loadIndexPatterns,
-      nextStepPath: () => '#jobs/new_job/datavisualizer',
-    }
-  });
-
-import { uiModules } from 'ui/modules';
-const module = uiModules.get('apps/ml');
-
-module.controller('MlNewJobStepIndexOrSearch',
-  function ($scope, $route) {
-
-    timefilter.disableTimeRangeSelector(); // remove time picker from top of page
-    timefilter.disableAutoRefreshSelector(); // remove time picker from top of page
-
-    $scope.indexPatterns = getIndexPatterns().filter(indexPattern => indexPattern.type !== 'rollup');
-
-    const path = $route.current.locals.nextStepPath;
-
-    $scope.withIndexPatternUrl = function (pattern) {
-      if (!pattern) {
-        return;
-      }
-      return `${path}?index=${encodeURIComponent(pattern.id)}`;
-    };
-
-    $scope.withSavedSearchUrl = function (savedSearch) {
-      if (!savedSearch) {
-        return;
-      }
-      return `${path}?savedSearchId=${encodeURIComponent(savedSearch.id)}`;
-    };
-  });
-
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/index_or_search/paginated_selectable_list/__tests__/paginated_selectable_list.js b/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/index_or_search/paginated_selectable_list/__tests__/paginated_selectable_list.js
deleted file mode 100644
index 387bf970835613..00000000000000
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/index_or_search/paginated_selectable_list/__tests__/paginated_selectable_list.js
+++ /dev/null
@@ -1,189 +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 angular from 'angular';
-import expect from '@kbn/expect';
-import ngMock from 'ng_mock';
-import _ from 'lodash';
-
-const objectList = [
-  { title: 'apple' },
-  { title: 'orange' },
-  { title: 'coconut' },
-  { title: 'banana' },
-  { title: 'grapes' }
-];
-
-const stringList = [
-  'apple',
-  'orange',
-  'coconut',
-  'banana',
-  'grapes'
-];
-
-const lists = [objectList, stringList, []];
-
-let $scope;
-let $element;
-let $isolatedScope;
-
-lists.forEach(function (list) {
-  const isArrayOfObjects = list.every((item) => {
-    return _.isPlainObject(item);
-  });
-
-  const init = function (arr, willFail) {
-    // Load the application
-    ngMock.module('kibana');
-
-    // Create the scope
-    ngMock.inject(function ($rootScope, $compile) {
-      $scope = $rootScope.$new();
-      $scope.perPage = 5;
-      $scope.list = list;
-      $scope.listProperty = isArrayOfObjects ? 'title' : undefined;
-      $scope.test = function (val) { return val; };
-
-      // Create the element
-      if (willFail) {
-        $element = angular.element('<paginated-selectable-list per-page="perPage" list="list"' +
-           'list-property="listProperty" user-make-url="test" user-on-select="test"></paginated-selectable-list>');
-      } else {
-        $element = angular.element('<paginated-selectable-list per-page="perPage" list="list"' +
-           'list-property="listProperty" user-make-url="test"></paginated-selectable-list>');
-      }
-
-      // And compile it
-      $compile($element)($scope);
-
-      // Fire a digest cycle
-      $element.scope().$digest();
-
-      // Grab the isolate scope so we can test it
-      $isolatedScope = $element.isolateScope();
-    });
-  };
-
-  describe('paginatedSelectableList', function () {
-    it('should throw an error when there is no makeUrl and onSelect attribute', ngMock.inject(function ($compile, $rootScope) {
-      function errorWrapper() {
-        $compile(angular.element('<paginated-selectable-list></paginated-selectable-list>'))($rootScope.new());
-      }
-      expect(errorWrapper).to.throwError();
-    }));
-
-    it('should throw an error with both makeUrl and onSelect attributes', function () {
-      function errorWrapper() {
-        init(list, true);
-      }
-      expect(errorWrapper).to.throwError();
-    });
-
-    describe('$scope.hits', function () {
-      beforeEach(function () {
-        init(list);
-      });
-
-      it('should initially sort an array of objects in ascending order', function () {
-        const property = $isolatedScope.listProperty;
-        const sortedList = property ? _.sortBy(list, property) : _.sortBy(list);
-
-        expect($isolatedScope.hits).to.be.an('array');
-
-        $isolatedScope.hits.forEach(function (hit, index) {
-          if (property) {
-            expect(hit[property]).to.equal(sortedList[index][property]);
-          } else {
-            expect(hit).to.equal(sortedList[index]);
-          }
-        });
-      });
-    });
-
-    describe('$scope.sortHits', function () {
-      beforeEach(function () {
-        init(list);
-      });
-
-      it('should sort an array of objects in ascending order', function () {
-        const property = $isolatedScope.listProperty;
-        const sortedList = property ? _.sortBy(list, property) : _.sortBy(list);
-
-        $isolatedScope.isAscending = false;
-        $isolatedScope.sortHits(list);
-
-        expect($isolatedScope.isAscending).to.be(true);
-
-        $isolatedScope.hits.forEach(function (hit, index) {
-          if (property) {
-            expect(hit[property]).to.equal(sortedList[index][property]);
-          } else {
-            expect(hit).to.equal(sortedList[index]);
-          }
-        });
-      });
-
-      it('should sort an array of objects in descending order', function () {
-        const property = $isolatedScope.listProperty;
-        const reversedList = property ? _.sortBy(list, property).reverse() : _.sortBy(list).reverse();
-
-        $isolatedScope.isAscending = true;
-        $isolatedScope.sortHits(list);
-
-        expect($isolatedScope.isAscending).to.be(false);
-
-        $isolatedScope.hits.forEach(function (hit, index) {
-          if (property) {
-            expect(hit[property]).to.equal(reversedList[index][property]);
-          } else {
-            expect(hit).to.equal(reversedList[index]);
-          }
-        });
-      });
-    });
-
-    describe('$scope.makeUrl', function () {
-      beforeEach(function () {
-        init(list);
-      });
-
-      it('should return the result of the function its passed', function () {
-        const property = $isolatedScope.listProperty;
-        const sortedList = property ? _.sortBy(list, property) : _.sortBy(list);
-
-        $isolatedScope.hits.forEach(function (hit, index) {
-          if (property) {
-            expect($isolatedScope.makeUrl(hit)[property]).to.equal(sortedList[index][property]);
-          } else {
-            expect($isolatedScope.makeUrl(hit)).to.equal(sortedList[index]);
-          }
-        });
-      });
-    });
-
-    describe('$scope.onSelect', function () {
-      beforeEach(function () {
-        init(list);
-      });
-
-      it('should return the result of the function its passed', function () {
-        const property = $isolatedScope.listProperty;
-        const sortedList = property ? _.sortBy(list, property) : _.sortBy(list);
-
-        $isolatedScope.userOnSelect = function (val) { return val; };
-
-        $isolatedScope.hits.forEach(function (hit, index) {
-          if (property) {
-            expect($isolatedScope.onSelect(hit)[property]).to.equal(sortedList[index][property]);
-          } else {
-            expect($isolatedScope.onSelect(hit)).to.equal(sortedList[index]);
-          }
-        });
-      });
-    });
-  });
-});
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/index_or_search/paginated_selectable_list/paginated_selectable_list.html b/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/index_or_search/paginated_selectable_list/paginated_selectable_list.html
deleted file mode 100644
index 5e71df462dfd2d..00000000000000
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/index_or_search/paginated_selectable_list/paginated_selectable_list.html
+++ /dev/null
@@ -1,88 +0,0 @@
-<form
-  role="form"
-  class="kuiVerticalRhythm"
->
-  <div class="kuiBar">
-    <div class="kuiBarSection">
-      <div class="kuiSearchInput fullWidth">
-        <div class="kuiSearchInput__icon kuiIcon fa-search"></div>
-        <input
-          class="kuiSearchInput__input"
-          input-focus
-          disable-input-focus="disableAutoFocus"
-          ng-model="query"
-          placeholder="{{ ::'xpack.ml.paginateSelectableList.searchPlaceholder' | i18n: {defaultMessage: 'Filter…'} }}"
-          class="form-control"
-          name="query"
-          type="text"
-          autocomplete="off"
-        >
-      </div>
-    </div>
-
-    <div class="kuiBarSection">
-      <p
-        class="kuiText kuiSubduedText"
-        i18n-id="xpack.ml.paginateSelectableList.ofTotalHitCount"
-        i18n-default-message="{matchingHits} of {hitCount}"
-        i18n-values="{ hitCount, matchingHits: hitsByQuery.length }"
-      ></p>
-    </div>
-  </div>
-</form>
-
-<paginate
-  list="hitsByQuery"
-  per-page="{{ perPage }}"
-  class="kuiVerticalRhythm"
->
-  <button
-    class="paginate-heading list-group-item list-sort-button"
-    ng-click="sortHits(hits)"
-    aria-live="assertive"
-  >
-    <span class="euiScreenReaderOnly"
-      i18n-id="xpack.ml.paginateSelectableList.sortByButtonLabelScreenReaderOnly"
-      i18n-default-message="Sort by"
-    ></span>
-    <span
-      i18n-id="xpack.ml.paginateSelectableList.sortByButtonLabel"
-      i18n-default-message="Name"
-    ></span>
-    <span
-      class="fa"
-      ng-class="isAscending ? 'fa-caret-up' : 'fa-caret-down'"
-    >
-      <span class="euiScreenReaderOnly"
-        ng-if="isAscending"
-        i18n-id="xpack.ml.paginateSelectableList.sortByButtonLabeAscendingScreenReaderOnly"
-        i18n-default-message="ascending"
-      ></span>
-      <span class="euiScreenReaderOnly"
-        ng-if="!isAscending"
-        i18n-id="xpack.ml.paginateSelectableList.sortByButtonLabeDescendingScreenReaderOnly"
-        i18n-default-message="descending"
-      ></span>
-    </span>
-  </button>
-  <ul class="li-striped list-group list-group-menu">
-    <li class="list-group-item list-group-menu-item" ng-repeat="hit in page">
-      <a
-        data-test-subj="paginatedListItem-{{accessor(hit)}}"
-        ng-show="userMakeUrl"
-        kbn-href="{{ makeUrl(hit) }}">
-        <span>{{ accessor(hit) }}</span>
-      </a>
-
-      <div ng-show="userOnSelect" ng-click="onSelect(hit, $event)">
-        <span>{{ accessor(hit) }}</span>
-      </div>
-    </li>
-
-    <li class="list-group-item list-group-no-results" ng-if="hitsByQuery.length === 0">
-      <p i18n-id="xpack.ml.paginateSelectableList.noMatchesFoundDescription"
-        i18n-default-message="No matches found."
-      ></p>
-    </li>
-  </ul>
-</paginate>
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/index_or_search/paginated_selectable_list/paginated_selectable_list.js b/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/index_or_search/paginated_selectable_list/paginated_selectable_list.js
deleted file mode 100644
index 784bf84322dd37..00000000000000
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/index_or_search/paginated_selectable_list/paginated_selectable_list.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-
-import _ from 'lodash';
-import { uiModules } from 'ui/modules';
-import 'ui/directives/paginate';
-import 'ui/directives/kbn_href';
-import paginatedSelectableListTemplate from './paginated_selectable_list.html';
-
-const module = uiModules.get('kibana');
-
-function throwError(message) {
-  throw new Error(message);
-}
-
-module.directive('paginatedSelectableList', function () {
-
-  return {
-    restrict: 'E',
-    scope: {
-      perPage: '=?',
-      list: '=',
-      listProperty: '@',
-      userMakeUrl: '=?',
-      userOnSelect: '=?',
-      disableAutoFocus: '='
-    },
-    template: paginatedSelectableListTemplate,
-    controller: function ($scope, $filter) {
-      function calculateHitsByQuery() {
-        $scope.hitsByQuery = $filter('filter')($scope.hits, $scope.query);
-      }
-
-      // Should specify either user-make-url or user-on-select
-      if (!$scope.userMakeUrl && !$scope.userOnSelect) {
-        throwError('paginatedSelectableList directive expects a makeUrl or onSelect function');
-      }
-
-      // Should specify either user-make-url or user-on-select, but not both.
-      if ($scope.userMakeUrl && $scope.userOnSelect) {
-        throwError('paginatedSelectableList directive expects a makeUrl or onSelect attribute but not both');
-      }
-
-      $scope.perPage = $scope.perPage || 10;
-      $scope.hits = $scope.list = _.sortBy($scope.list, $scope.accessor);
-      $scope.$watchGroup(['hits', 'query'], calculateHitsByQuery);
-      calculateHitsByQuery();
-      $scope.hitCount = $scope.hits.length;
-
-      /**
-       * Boolean that keeps track of whether hits are sorted ascending (true)
-       * or descending (false)
-       * * @type {Boolean}
-       */
-      $scope.isAscending = true;
-
-      /**
-       * Sorts saved object finder hits either ascending or descending
-       * @param  {Array} hits Array of saved finder object hits
-       * @return {Array} Array sorted either ascending or descending
-       */
-      $scope.sortHits = function (hits) {
-        const sortedList = _.sortBy(hits, $scope.accessor);
-
-        $scope.isAscending = !$scope.isAscending;
-        $scope.hits = $scope.isAscending ? sortedList : sortedList.reverse();
-      };
-
-      $scope.makeUrl = function (hit) {
-        return $scope.userMakeUrl(hit);
-      };
-
-      $scope.onSelect = function (hit, $event) {
-        return $scope.userOnSelect(hit, $event);
-      };
-
-      $scope.accessor = function (val) {
-        const prop = $scope.listProperty;
-        return prop ? _.get(val, prop) : val;
-      };
-    }
-  };
-});
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/job_type/__tests__/job_type_controller.js b/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/job_type/__tests__/job_type_controller.js
deleted file mode 100644
index f8fd13b2ae36e1..00000000000000
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/job_type/__tests__/job_type_controller.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-
-
-import ngMock from 'ng_mock';
-import expect from '@kbn/expect';
-import sinon from 'sinon';
-
-// Import this way to be able to stub/mock functions later on in the tests using sinon.
-import * as indexUtils from 'plugins/ml/util/index_utils';
-
-describe('ML - Job Type Controller', () => {
-  beforeEach(() => {
-    ngMock.module('kibana');
-  });
-
-  it('Initialize Job Type Controller', (done) => {
-    const stub = sinon.stub(indexUtils, 'timeBasedIndexCheck').callsFake(() => false);
-    ngMock.inject(function ($rootScope, $controller, $route) {
-      // Set up the $route current props required for the tests.
-      $route.current = {
-        locals: {
-          indexPattern: {
-            id: 'test_id',
-            title: 'test_pattern'
-          },
-          savedSearch: {}
-        }
-      };
-
-      const scope = $rootScope.$new();
-
-      expect(() => {
-        $controller('MlNewJobStepJobType', { $scope: scope });
-      }).to.not.throwError();
-
-      expect(scope.indexWarningTitle).to.eql('Index pattern test_pattern is not time based');
-      stub.restore();
-      done();
-    });
-  });
-});
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/job_type/job_type.html b/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/job_type/job_type.html
deleted file mode 100644
index 1dc3aea215d93a..00000000000000
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/job_type/job_type.html
+++ /dev/null
@@ -1,274 +0,0 @@
-<ml-nav-menu name="new_job" />
-<ml-new-job class="job-type-gallery">
-  <ml-message-bar></ml-message-bar>
-  <div ng-controller="MlNewJobStepJobType" data-test-subj="mlPageJobTypeSelection">
-    <!-- Presents the various options for creating a job -->
-    <div class="job-types-content">
-      <h1
-        class="euiTitle euiTitle--large"
-        i18n-id="xpack.ml.newJob.wizard.jobType.createJobFromTitle"
-        i18n-default-message="Create a job from the {pageTitleLabel}"
-        i18n-values="{ pageTitleLabel }"
-      ></h1>
-      <div class="euiSpacer euiSpacer--l"></div>
-
-      <div ng-if="isTimeBasedIndex===false">
-        <div class="index-warning">
-          <div class="euiCallOut euiCallOut--warning">
-            <div class="euiCallOutHeader">
-              <svg class="euiIcon euiCallOutHeader__icon euiIcon--medium" xmlns="http://www.w3.org/2000/svg"
-              width="16" height="16" viewBox="0 0 16 16">
-                <g fill-rule="evenodd">
-                  <path d="M7.5 2.236L1.618 14h11.764L7.5 2.236zm.894-.447l5.882 11.764A1 1 0 0 1 13.382 15H1.618a1 1 0 0 1-.894-1.447L6.606 1.789a1 1 0 0 1 1.788 0z"
-                  />
-                  <path d="M7 6h1v5H7zM7 12h1v1H7z" />
-                </g>
-              </svg>
-              <span class="euiCallOutHeader__title">{{indexWarningTitle}}</span>
-            </div>
-            <div class="euiText euiText--small">
-              <p>
-                <span
-                  i18n-id="xpack.ml.newJob.wizard.jobType.howToRunAnomalyDetectionDescription"
-                  i18n-default-message="Anomaly detection can only be run over indices which are time based."
-                ></span>
-                <br/>
-                <a
-                  class="euiLink euiLink--primary"
-                  href="#jobs/new_job\"
-                  i18n-id="xpack.ml.newJob.wizard.jobType.selectDifferentIndexLinkText"
-                  i18n-default-message="Select a different index"
-                ></a>
-              </p>
-            </div>
-          </div>
-        </div>
-        <div class="euiSpacer euiSpacer--xxl"></div>
-      </div>
-
-      <div ng-show="recognizerResults.count!==0" class="recognizer-section">
-        <div class="euiText">
-          <h3
-            class="euiTitle euiTitle--small"
-            i18n-id="xpack.ml.newJob.wizard.jobType.useSuppliedConfigurationTitle"
-            i18n-default-message="Use a supplied configuration"
-            >
-          </h3>
-          <p
-            i18n-id="xpack.ml.newJob.wizard.jobType.useSuppliedConfigurationDescription"
-            i18n-default-message="The fields in your data have been recognized as matching known configurations.
-            Select to create a set of machine learning jobs and associated dashboards."
-          ></p>
-        </div>
-        <div class="euiSpacer euiSpacer--m"></div>
-        <ml-data-recognizer
-          class-name='"euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--fourths"'
-          item-class-name='""'
-          index-pattern='indexPattern'
-          saved-search='savedSearch'
-          results=recognizerResults/>
-        <div class="euiSpacer euiSpacer--xxl"></div>
-      </div>
-
-      <div class="euiText">
-        <h3
-          class="euiTitle euiTitle--small"
-          i18n-id="xpack.ml.newJob.wizard.jobType.useWizardTitle"
-          i18n-default-message="Use a wizard"
-        ></h3>
-        <p
-          i18n-id="xpack.ml.newJob.wizard.jobType.useWizardDescription"
-          i18n-default-message="Use one of the wizards to create a machine learning job to find anomalies in your data."
-        ></p>
-      </div>
-
-      <div class="euiSpacer euiSpacer--m"></div>
-
-      <div class="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--fourths">
-        <div class="euiFlexItem" ng-class='{disabled: isTimeBasedIndex===false}'>
-          <a ng-href="{{getUrl('#jobs/new_job/single_metric')}}" ng-class='{disabled: isTimeBasedIndex===false}' class="euiLink synopsis" data-test-subj="mlJobTypeLinkSingleMetricJob">
-            <div class="euiPanel euiPanel--paddingMedium synopsisPanel">
-              <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive">
-                <div class="euiFlexItem euiFlexItem--flexGrowZero">
-                  <icon
-                    type="'createSingleMetricJob'"
-                    size="'xl'"
-                    aria-label="{{ ::'xpack.ml.newJob.wizard.jobType.singleMetricAriaLabel' | i18n: {defaultMessage: 'Single metric job'} }}"
-                    class="synopsisIcon"
-                  />
-                </div>
-                <div class="euiFlexItem synopsisContent">
-                  <h4
-                    class="euiTitle euiTitle--small synopsisTitle"
-                    i18n-id="xpack.ml.newJob.wizard.jobType.singleMetricTitle"
-                    i18n-default-message="Single metric"
-                  ></h4>
-                  <div class="euiText synopsisBody">
-                    <p>
-                      <span
-                        class="euiTextColor euiTextColor--subdued"
-                        i18n-id="xpack.ml.newJob.wizard.jobType.singleMetricDescription"
-                        i18n-default-message="Detect anomalies in a single time series."
-                      ></span>
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </a>
-        </div>
-        <div class="euiFlexItem" ng-class='{disabled: isTimeBasedIndex===false}'>
-          <a ng-href="{{getUrl('#jobs/new_job/multi_metric')}}" ng-class='{disabled: isTimeBasedIndex===false}' class="euiLink synopsis" data-test-subj="mlJobTypeLinkMultiMetricJob">
-            <div class="euiPanel euiPanel--paddingMedium synopsisPanel">
-              <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive">
-                <div class="euiFlexItem euiFlexItem--flexGrowZero">
-                  <icon
-                    type="'createMultiMetricJob'"
-                    size="'xl'"
-                    aria-label="{{ ::'xpack.ml.newJob.wizard.jobType.multiMetricAriaLabel' | i18n: {defaultMessage: 'Multi metric job'} }}"
-                    class="synopsisIcon"
-                  />
-                </div>
-                <div class="euiFlexItem synopsisContent">
-                  <h4
-                    class="euiTitle euiTitle--small synopsisTitle"
-                    i18n-id="xpack.ml.newJob.wizard.jobType.multiMetricTitle"
-                    i18n-default-message="Multi metric"
-                  ></h4>
-                  <div class="euiText synopsisBody">
-                    <p>
-                      <span
-                        class="euiTextColor euiTextColor--subdued"
-                        i18n-id="xpack.ml.newJob.wizard.jobType.multiMetricDescription"
-                        i18n-default-message="Detect anomalies in multiple metrics by splitting a time series by a categorical field."
-                      ></span>
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </a>
-        </div>
-        <div class="euiFlexItem" ng-class='{disabled: isTimeBasedIndex===false}'>
-          <a ng-href="{{getUrl('#jobs/new_job/population')}}" ng-class='{disabled: isTimeBasedIndex===false}' class="euiLink synopsis" data-test-subj="mlJobTypeLinkPopulationJob">
-            <div class="euiPanel euiPanel--paddingMedium synopsisPanel">
-              <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive">
-                <div class="euiFlexItem euiFlexItem--flexGrowZero">
-                  <icon
-                    type="'createPopulationJob'"
-                    size="'xl'"
-                    aria-label="{{ ::'xpack.ml.newJob.wizard.jobType.populationAriaLabel' | i18n: {defaultMessage: 'Population job'} }}"
-                    class="synopsisIcon"
-                  />
-                </div>
-                <div class="euiFlexItem synopsisContent">
-                  <h4
-                    class="euiTitle euiTitle--small synopsisTitle"
-                    i18n-id="xpack.ml.newJob.wizard.jobType.populationTitle"
-                    i18n-default-message="Population"
-                  ></h4>
-                  <div class="euiText synopsisBody">
-                    <p>
-                      <span
-                        class="euiTextColor euiTextColor--subdued"
-                        i18n-id="xpack.ml.newJob.wizard.jobType.populationDescription"
-                        i18n-default-message="Detect activity that is unusual compared to the behavior of the population."
-                      ></span>
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </a>
-        </div>
-        <div class="euiFlexItem" ng-class='{disabled: isTimeBasedIndex===false}'>
-          <a ng-href="{{getUrl('#jobs/new_job/advanced')}}" ng-class='{disabled: isTimeBasedIndex===false}' class="euiLink synopsis">
-            <div class="euiPanel euiPanel--paddingMedium synopsisPanel">
-              <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive">
-                <div class="euiFlexItem euiFlexItem--flexGrowZero">
-                  <icon
-                    type="'createAdvancedJob'"
-                    size="'xl'"
-                    aria-label="{{ ::'xpack.ml.newJob.wizard.jobType.advancedAriaLabel' | i18n: {defaultMessage: 'Advanced job'} }}"
-                    class="synopsisIcon"
-                  />
-                </div>
-                <div class="euiFlexItem synopsisContent">
-                  <h4
-                    class="euiTitle euiTitle--small synopsisTitle"
-                    i18n-id="xpack.ml.newJob.wizard.jobType.advancedTitle"
-                    i18n-default-message="Advanced"
-                  ></h4>
-                  <div class="euiText synopsisBody">
-                    <p>
-                      <span
-                        class="euiTextColor euiTextColor--subdued"
-                        i18n-id="xpack.ml.newJob.wizard.jobType.advancedDescription"
-                        i18n-default-message="Use the full range of options to create a job for more advanced use cases."
-                      ></span>
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </a>
-        </div>
-      </div>
-
-      <div class="euiSpacer euiSpacer--xxl"></div>
-
-      <div class="euiText">
-        <h3
-          class="euiTitle euiTitle--small"
-          i18n-id="xpack.ml.newJob.wizard.jobType.learnMoreAboutDataTitle"
-          i18n-default-message="Learn more about your data"
-        ></h3>
-        <p
-          i18n-id="xpack.ml.newJob.wizard.jobType.learnMoreAboutDataDescription"
-          i18n-default-message="If you're not sure what type of job to create, first explore the fields and metrics in your data."
-        ></p>
-      </div>
-      <div class="euiSpacer euiSpacer--m"></div>
-
-      <div class="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--fourths">
-        <div class="euiFlexItem">
-          <a
-            ng-href="{{getUrl('#jobs/new_job/datavisualizer')}}"
-            ng-click="addSelectionToRecentlyAccessed()"
-            class="euiLink synopsis">
-            <div class="euiPanel euiPanel--paddingMedium synopsisPanel">
-              <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive">
-                <div class="euiFlexItem euiFlexItem--flexGrowZero">
-                  <icon
-                    type="'dataVisualizer'"
-                    size="'xl'"
-                    aria-label="{{ ::'xpack.ml.newJob.wizard.jobType.dataVisualizerAriaLabel' | i18n: {defaultMessage: 'Data Visualizer'} }}"
-                    class="synopsisIcon"
-                  />
-                </div>
-                <div class="euiFlexItem synopsisContent">
-                  <h4
-                    class="euiTitle euiTitle--small synopsisTitle"
-                    i18n-id="xpack.ml.newJob.wizard.jobType.dataVisualizerTitle"
-                    i18n-default-message="Data Visualizer"
-                  ></h4>
-                  <div class="euiText synopsisBody">
-                    <p>
-                      <span
-                        class="euiTextColor euiTextColor--subdued"
-                        i18n-id="xpack.ml.newJob.wizard.jobType.dataVisualizerDescription"
-                        i18n-default-message="Learn more about the characteristics of your data and identify the fields for analysis with machine learning."
-                      ></span>
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </a>
-        </div>
-      </div>
-
-    </div>
-
-  </div>
-</ml-new-job>
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/job_type/job_type_controller.js b/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/job_type/job_type_controller.js
deleted file mode 100644
index df7768ee9f0c84..00000000000000
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/job_type/job_type_controller.js
+++ /dev/null
@@ -1,103 +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.
- */
-
-
-
-/*
- * Controller for the second step in the Create Job wizard, allowing
- * the user to select the type of job they wish to create.
- */
-
-import uiRoutes from 'ui/routes';
-import { i18n } from '@kbn/i18n';
-import { checkLicenseExpired } from 'plugins/ml/license/check_license';
-import { checkCreateJobsPrivilege } from 'plugins/ml/privilege/check_privilege';
-import { getCreateJobBreadcrumbs } from 'plugins/ml/jobs/breadcrumbs';
-import { SearchItemsProvider } from 'plugins/ml/jobs/new_job/utils/new_job_utils';
-import { loadCurrentIndexPattern, loadCurrentSavedSearch, timeBasedIndexCheck } from 'plugins/ml/util/index_utils';
-import { addItemToRecentlyAccessed } from 'plugins/ml/util/recently_accessed';
-import { checkMlNodesAvailable } from 'plugins/ml/ml_nodes_check/check_ml_nodes';
-import template from './job_type.html';
-import { timefilter } from 'ui/timefilter';
-
-uiRoutes
-  .when('/jobs/new_job/step/job_type', {
-    template,
-    k7Breadcrumbs: getCreateJobBreadcrumbs,
-    resolve: {
-      CheckLicense: checkLicenseExpired,
-      privileges: checkCreateJobsPrivilege,
-      indexPattern: loadCurrentIndexPattern,
-      savedSearch: loadCurrentSavedSearch,
-      checkMlNodesAvailable,
-    }
-  });
-
-
-import { uiModules } from 'ui/modules';
-const module = uiModules.get('apps/ml');
-
-module.controller('MlNewJobStepJobType',
-  function ($scope, Private) {
-
-    timefilter.disableTimeRangeSelector(); // remove time picker from top of page
-    timefilter.disableAutoRefreshSelector(); // remove time picker from top of page
-
-    const createSearchItems = Private(SearchItemsProvider);
-    const {
-      indexPattern,
-      savedSearch } = createSearchItems();
-
-    // check to see that the index pattern is time based.
-    // if it isn't, display a warning and disable all links
-    $scope.indexWarningTitle = '';
-    $scope.isTimeBasedIndex = timeBasedIndexCheck(indexPattern);
-    if ($scope.isTimeBasedIndex === false) {
-      $scope.indexWarningTitle = (savedSearch.id === undefined) ?
-        i18n.translate('xpack.ml.newJob.wizard.jobType.indexPatternNotTimeBasedMessage', {
-          defaultMessage: 'Index pattern {indexPatternTitle} is not time based',
-          values: { indexPatternTitle: indexPattern.title }
-        })
-        : i18n.translate('xpack.ml.newJob.wizard.jobType.indexPatternFromSavedSearchNotTimeBasedMessage', {
-          defaultMessage: '{savedSearchTitle} uses index pattern {indexPatternTitle} which is not time based',
-          values: {
-            savedSearchTitle: savedSearch.title,
-            indexPatternTitle: indexPattern.title
-          }
-        });
-    }
-
-    $scope.indexPattern = indexPattern;
-    $scope.savedSearch = savedSearch;
-    $scope.recognizerResults = {
-      count: 0,
-      onChange() {
-        $scope.$applyAsync();
-      }
-    };
-
-    $scope.pageTitleLabel = (savedSearch.id !== undefined) ?
-      i18n.translate('xpack.ml.newJob.wizard.jobType.savedSearchPageTitleLabel', {
-        defaultMessage: 'saved search {savedSearchTitle}',
-        values: { savedSearchTitle: savedSearch.title }
-      })
-      : i18n.translate('xpack.ml.newJob.wizard.jobType.indexPatternPageTitleLabel', {
-        defaultMessage: 'index pattern {indexPatternTitle}',
-        values: { indexPatternTitle: indexPattern.title }
-      });
-
-    $scope.getUrl = function (basePath) {
-      return (savedSearch.id === undefined) ? `${basePath}?index=${indexPattern.id}` :
-        `${basePath}?savedSearchId=${savedSearch.id}`;
-    };
-
-    $scope.addSelectionToRecentlyAccessed = function () {
-      const title = (savedSearch.id === undefined) ? indexPattern.title : savedSearch.title;
-      const url = $scope.getUrl('');
-      addItemToRecentlyAccessed('jobs/new_job/datavisualizer', title, url);
-    };
-
-  });
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/common/results_loader/results_loader.ts b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/common/results_loader/results_loader.ts
index 8f593ce411b450..c9f78c9e8c096c 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/common/results_loader/results_loader.ts
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/common/results_loader/results_loader.ts
@@ -5,11 +5,11 @@
  */
 
 import { BehaviorSubject } from 'rxjs';
-import { parseInterval } from 'ui/utils/parse_interval';
 import { JobCreatorType, isMultiMetricJobCreator } from '../job_creator';
 import { mlResultsService, ModelPlotOutputResults } from '../../../../services/results_service';
 import { TimeBuckets } from '../../../../util/time_buckets';
 import { getSeverityType } from '../../../../../common/util/anomaly_utils';
+import { parseInterval } from '../../../../../common/util/parse_interval';
 import { ANOMALY_SEVERITY } from '../../../../../common/constants/anomalies';
 import { getScoresByRecord } from './searches';
 import { JOB_TYPE } from '../job_creator/util/constants';
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/index.ts b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/index.ts
index d3feaf087524c8..f0061b1b9847eb 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/index.ts
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/index.ts
@@ -6,3 +6,7 @@
 
 import './pages/new_job/route';
 import './pages/new_job/directive';
+import './pages/job_type/route';
+import './pages/job_type/directive';
+import './pages/index_or_search/route';
+import './pages/index_or_search/directive';
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/charts/event_rate_chart/event_rate_chart.tsx b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/charts/event_rate_chart/event_rate_chart.tsx
index 030d622bed61bc..7130a24cffb7d4 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/charts/event_rate_chart/event_rate_chart.tsx
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/charts/event_rate_chart/event_rate_chart.tsx
@@ -30,7 +30,10 @@ export const EventRateChart: FC<Props> = ({
   loading = false,
 }) => {
   return (
-    <div style={{ width, height }} data-test-subj="mlEventRateChart">
+    <div
+      style={{ width, height }}
+      data-test-subj={`mlEventRateChart ${eventRateChartData.length ? 'withData' : 'empty'}`}
+    >
       <LoadingWrapper height={height} hasData={eventRateChartData.length > 0} loading={loading}>
         <Chart>
           {showAxis === true && <Axes />}
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/detector_title/detector_title.tsx b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/detector_title/detector_title.tsx
index 040d980cefab71..feac3b30dfa3bd 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/detector_title/detector_title.tsx
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/detector_title/detector_title.tsx
@@ -33,7 +33,7 @@ export const DetectorTitle: FC<DetectorTitleProps> = ({
   return (
     <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween">
       <EuiFlexItem>
-        <span style={{ fontSize: 'small' }} data-test-subj="detectorTitle">
+        <span style={{ fontSize: 'small' }} data-test-subj="mlDetectorTitle">
           {getTitle(agg, field, splitField)}
         </span>
       </EuiFlexItem>
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/influencers/influencers_select.tsx b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/influencers/influencers_select.tsx
index 63f1936dd5f3e8..f03565fd3a0330 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/influencers/influencers_select.tsx
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/influencers/influencers_select.tsx
@@ -35,7 +35,7 @@ export const InfluencersSelect: FC<Props> = ({ fields, changeHandler, selectedIn
       selectedOptions={selection}
       onChange={onChange}
       isClearable={false}
-      data-test-subj="influencerSelect"
+      data-test-subj="mlInfluencerSelect"
     />
   );
 };
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/multi_metric_view/chart_grid.tsx b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/multi_metric_view/chart_grid.tsx
index cb2ca459da4fe7..e4dd46b159a6c4 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/multi_metric_view/chart_grid.tsx
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/multi_metric_view/chart_grid.tsx
@@ -54,7 +54,7 @@ export const ChartGrid: FC<ChartGridProps> = ({
     >
       <EuiFlexGrid columns={chartSettings.cols}>
         {aggFieldPairList.map((af, i) => (
-          <EuiFlexItem key={i} data-test-subj={`detector ${i}`}>
+          <EuiFlexItem key={i} data-test-subj={`mlDetector ${i}`}>
             <Fragment>
               <DetectorTitle
                 index={i}
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/population_view/chart_grid.tsx b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/population_view/chart_grid.tsx
index c809ebd1155664..e3374be22485cd 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/population_view/chart_grid.tsx
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/population_view/chart_grid.tsx
@@ -49,7 +49,7 @@ export const ChartGrid: FC<ChartGridProps> = ({
   return (
     <EuiFlexGrid columns={chartSettings.cols}>
       {aggFieldPairList.map((af, i) => (
-        <EuiFlexItem key={i} data-test-subj={`detector ${i}`}>
+        <EuiFlexItem key={i} data-test-subj={`mlDetector ${i}`}>
           <Fragment>
             <EuiFlexGroup>
               <EuiFlexItem>
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/split_cards/split_cards.tsx b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/split_cards/split_cards.tsx
index a3c13fce53a9b6..1b3eac2626e471 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/split_cards/split_cards.tsx
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/split_cards/split_cards.tsx
@@ -70,10 +70,14 @@ export const SplitCards: FC<Props> = memo(
         };
         return (
           <div key={fieldName} ref={ref => storePanels(ref, marginBottom)} style={style}>
-            <EuiPanel paddingSize="m" style={{ paddingTop: '4px' }} data-test-subj="splitCard back">
+            <EuiPanel
+              paddingSize="m"
+              style={{ paddingTop: '4px' }}
+              data-test-subj="mlSplitCard back"
+            >
               <div
                 style={{ fontWeight: 'bold', fontSize: 'small' }}
-                data-test-subj="splitCardTitle"
+                data-test-subj="mlSplitCardTitle"
               >
                 {fieldName}
               </div>
@@ -85,7 +89,7 @@ export const SplitCards: FC<Props> = memo(
 
     return (
       <EuiFlexGroup>
-        <EuiFlexItem data-test-subj="dataSplit">
+        <EuiFlexItem data-test-subj="mlDataSplit">
           {(fieldValues.length === 0 || numberOfDetectors === 0) && <Fragment>{children}</Fragment>}
           {fieldValues.length > 0 && numberOfDetectors > 0 && splitField !== null && (
             <Fragment>
@@ -93,7 +97,7 @@ export const SplitCards: FC<Props> = memo(
                 <Fragment>
                   <div
                     style={{ fontSize: 'small' }}
-                    data-test-subj={`dataSplitTitle ${splitField.name}`}
+                    data-test-subj={`mlDataSplitTitle ${splitField.name}`}
                   >
                     <FormattedMessage
                       id="xpack.ml.newJob.wizard.pickFieldsStep.splitCards.dataSplitBy"
@@ -109,11 +113,11 @@ export const SplitCards: FC<Props> = memo(
               <EuiPanel
                 paddingSize="m"
                 style={{ paddingTop: '4px' }}
-                data-test-subj="splitCard front"
+                data-test-subj="mlSplitCard front"
               >
                 <div
                   style={{ fontWeight: 'bold', fontSize: 'small' }}
-                  data-test-subj="splitCardTitle"
+                  data-test-subj="mlSplitCardTitle"
                 >
                   {fieldValues[0]}
                 </div>
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/split_field/by_field.tsx b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/split_field/by_field.tsx
index 0acabe60b00497..63576bb23f2422 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/split_field/by_field.tsx
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/split_field/by_field.tsx
@@ -58,7 +58,7 @@ export const ByFieldSelector: FC<Props> = ({ detectorIndex }) => {
       changeHandler={setByField}
       selectedField={byField}
       isClearable={true}
-      testSubject="byFieldSelect"
+      testSubject="mlByFieldSelect"
       placeholder={i18n.translate(
         'xpack.ml.newJob.wizard.pickFieldsStep.populationField.placeholder',
         {
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/split_field/split_field.tsx b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/split_field/split_field.tsx
index 229072c314cc5d..37ffa25e0eabfe 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/split_field/split_field.tsx
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/split_field/split_field.tsx
@@ -50,9 +50,9 @@ export const SplitFieldSelector: FC = () => {
         isClearable={canClearSelection}
         testSubject={
           isMultiMetricJobCreator(jc)
-            ? 'multiMetricSplitFieldSelect'
+            ? 'mlMultiMetricSplitFieldSelect'
             : isPopulationJobCreator(jc)
-            ? 'populationSplitFieldSelect'
+            ? 'mlPopulationSplitFieldSelect'
             : undefined
         }
       />
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/summary_step/components/post_save_options/post_save_options.tsx b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/summary_step/components/post_save_options/post_save_options.tsx
index 5a2c5fd42bc644..a6ef18d4931b97 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/summary_step/components/post_save_options/post_save_options.tsx
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/summary_step/components/post_save_options/post_save_options.tsx
@@ -79,7 +79,7 @@ export const PostSaveOptions: FC<Props> = ({ jobRunner }) => {
             datafeedState === DATAFEED_STATE.STARTING || datafeedState === DATAFEED_STATE.STARTED
           }
           onClick={startJobInRealTime}
-          data-test-subj="mlButtonUseFullData3"
+          data-test-subj="mlJobWizardButtonRunInRealTime"
         >
           <FormattedMessage
             id="xpack.ml.newJob.wizard.summaryStep.postSaveOptions.startJobInRealTime"
@@ -95,7 +95,7 @@ export const PostSaveOptions: FC<Props> = ({ jobRunner }) => {
             watchCreated === true
           }
           onClick={() => setWatchFlyoutVisible(true)}
-          data-test-subj="mlButtonUseFullData"
+          data-test-subj="mlJobWizardButtonCreateWatch"
         >
           <FormattedMessage
             id="xpack.ml.newJob.wizard.summaryStep.postSaveOptions.createWatch"
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/time_range_step/time_range_picker.tsx b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/time_range_step/time_range_picker.tsx
index 6f2fa534e9aaeb..26140b9557e908 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/time_range_step/time_range_picker.tsx
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/time_range_step/time_range_picker.tsx
@@ -56,7 +56,7 @@ export const TimeRangePicker: FC<Props> = ({ setTimeRange, timeRange }) => {
 
   return (
     <Fragment>
-      <div style={{ minWidth: WIDTH }}>
+      <div style={{ minWidth: WIDTH }} data-test-subj={`mlJobWizardDateRange`}>
         <EuiDatePickerRange
           fullWidth={true}
           startDateControl={
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/index_or_search/__test__/directive.js b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/index_or_search/__test__/directive.js
new file mode 100644
index 00000000000000..bd63a16abfacda
--- /dev/null
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/index_or_search/__test__/directive.js
@@ -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 ngMock from 'ng_mock';
+import expect from '@kbn/expect';
+import sinon from 'sinon';
+
+// Import this way to be able to stub/mock functions later on in the tests using sinon.
+import * as indexUtils from 'plugins/ml/util/index_utils';
+
+describe('ML - Index or Saved Search selection directive', () => {
+  let $scope;
+  let $compile;
+  let $element;
+
+  beforeEach(ngMock.module('kibana'));
+  beforeEach(() => {
+    ngMock.inject(function ($injector) {
+      $compile = $injector.get('$compile');
+      const $rootScope = $injector.get('$rootScope');
+      $scope = $rootScope.$new();
+    });
+  });
+
+  afterEach(() => {
+    $scope.$destroy();
+  });
+
+  it('Initialize Index or Saved Search selection directive', done => {
+    sinon.stub(indexUtils, 'timeBasedIndexCheck').callsFake(() => false);
+    ngMock.inject(function () {
+      expect(() => {
+        $element = $compile('<ml-index-or-search />')($scope);
+      }).to.not.throwError();
+
+      // directive has scope: false
+      const scope = $element.isolateScope();
+      expect(scope).to.eql(undefined);
+      done();
+    });
+  });
+});
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/index_or_search/directive.tsx b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/index_or_search/directive.tsx
new file mode 100644
index 00000000000000..7f3edf0896840e
--- /dev/null
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/index_or_search/directive.tsx
@@ -0,0 +1,42 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+// @ts-ignore
+import { uiModules } from 'ui/modules';
+const module = uiModules.get('apps/ml', ['react']);
+import { timefilter } from 'ui/timefilter';
+
+import { I18nContext } from 'ui/i18n';
+import { InjectorService } from '../../../../../common/types/angular';
+import { Page } from './page';
+
+module.directive('mlIndexOrSearch', ($injector: InjectorService) => {
+  return {
+    scope: {},
+    restrict: 'E',
+    link: async (scope: ng.IScope, element: ng.IAugmentedJQuery) => {
+      // remove time picker from top of page
+      timefilter.disableTimeRangeSelector();
+      timefilter.disableAutoRefreshSelector();
+
+      const $route = $injector.get<any>('$route');
+      const { nextStepPath } = $route.current.locals;
+
+      ReactDOM.render(
+        <I18nContext>{React.createElement(Page, { nextStepPath })}</I18nContext>,
+        element[0]
+      );
+
+      element.on('$destroy', () => {
+        ReactDOM.unmountComponentAtNode(element[0]);
+        scope.$destroy();
+      });
+    },
+  };
+});
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/index_or_search/page.tsx b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/index_or_search/page.tsx
new file mode 100644
index 00000000000000..68013bd243a91f
--- /dev/null
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/index_or_search/page.tsx
@@ -0,0 +1,84 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FC } from 'react';
+import {
+  EuiPage,
+  EuiPageBody,
+  EuiTitle,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiPageContent,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { SavedObjectFinder } from 'ui/saved_objects/components/saved_object_finder';
+
+export interface PageProps {
+  nextStepPath: string;
+}
+
+export const Page: FC<PageProps> = ({ nextStepPath }) => {
+  const RESULTS_PER_PAGE = 20;
+
+  const onObjectSelection = (id: string, type: string) => {
+    window.location.href = `${nextStepPath}?${
+      type === 'index-pattern' ? 'index' : 'savedSearchId'
+    }=${encodeURIComponent(id)}`;
+  };
+
+  return (
+    <EuiPage data-test-subj="mlPageSourceSelection">
+      <EuiPageBody restrictWidth={1200}>
+        <EuiPageHeader>
+          <EuiPageHeaderSection>
+            <EuiTitle size="m">
+              <h1>
+                <FormattedMessage
+                  id="xpack.ml.newJob.wizard.selectIndexPatternOrSavedSearch"
+                  defaultMessage="Select index pattern or saved search"
+                />
+              </h1>
+            </EuiTitle>
+          </EuiPageHeaderSection>
+        </EuiPageHeader>
+        <EuiPageContent>
+          <SavedObjectFinder
+            key="searchSavedObjectFinder"
+            onChoose={onObjectSelection}
+            showFilter
+            noItemsMessage={i18n.translate('xpack.ml.newJob.wizard.searchSelection.notFoundLabel', {
+              defaultMessage: 'No matching indices or saved searches found.',
+            })}
+            savedObjectMetaData={[
+              {
+                type: 'search',
+                getIconForSavedObject: () => 'search',
+                name: i18n.translate(
+                  'xpack.ml.newJob.wizard.searchSelection.savedObjectType.search',
+                  {
+                    defaultMessage: 'Saved search',
+                  }
+                ),
+              },
+              {
+                type: 'index-pattern',
+                getIconForSavedObject: () => 'indexPatternApp',
+                name: i18n.translate(
+                  'xpack.ml.newJob.wizard.searchSelection.savedObjectType.indexPattern',
+                  {
+                    defaultMessage: 'Index pattern',
+                  }
+                ),
+              },
+            ]}
+            fixedPageSize={RESULTS_PER_PAGE}
+          />
+        </EuiPageContent>
+      </EuiPageBody>
+    </EuiPage>
+  );
+};
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/index_or_search/route.ts b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/index_or_search/route.ts
new file mode 100644
index 00000000000000..1ed12577960c3d
--- /dev/null
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/index_or_search/route.ts
@@ -0,0 +1,50 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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 { checkMlNodesAvailable } from 'plugins/ml/ml_nodes_check/check_ml_nodes';
+// @ts-ignore
+import { preConfiguredJobRedirect } from 'plugins/ml/jobs/new_job/wizard/preconfigured_job_redirect';
+import uiRoutes from 'ui/routes';
+// @ts-ignore
+import { checkLicenseExpired, checkBasicLicense } from '../../../../license/check_license';
+import { loadIndexPatterns } from '../../../../util/index_utils';
+import {
+  checkCreateJobsPrivilege,
+  checkFindFileStructurePrivilege,
+} from '../../../../privilege/check_privilege';
+import {
+  getCreateJobBreadcrumbs,
+  getDataVisualizerIndexOrSearchBreadcrumbs,
+} from '../../../breadcrumbs';
+
+uiRoutes.when('/jobs/new_job', {
+  redirectTo: '/jobs/new_job/step/index_or_search',
+});
+
+uiRoutes.when('/jobs/new_job/step/index_or_search', {
+  template: '<ml-index-or-search />',
+  k7Breadcrumbs: getCreateJobBreadcrumbs,
+  resolve: {
+    CheckLicense: checkLicenseExpired,
+    privileges: checkCreateJobsPrivilege,
+    indexPatterns: loadIndexPatterns,
+    preConfiguredJobRedirect,
+    checkMlNodesAvailable,
+    nextStepPath: () => '#/jobs/new_job/step/job_type',
+  },
+});
+
+uiRoutes.when('/datavisualizer_index_select', {
+  template: '<ml-index-or-search />',
+  k7Breadcrumbs: getDataVisualizerIndexOrSearchBreadcrumbs,
+  resolve: {
+    CheckLicense: checkBasicLicense,
+    privileges: checkFindFileStructurePrivilege,
+    indexPatterns: loadIndexPatterns,
+    nextStepPath: () => '#jobs/new_job/datavisualizer',
+  },
+});
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/job_type/__test__/directive.js b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/job_type/__test__/directive.js
new file mode 100644
index 00000000000000..5be526f2eb2c02
--- /dev/null
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/job_type/__test__/directive.js
@@ -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 ngMock from 'ng_mock';
+import expect from '@kbn/expect';
+import sinon from 'sinon';
+
+// Import this way to be able to stub/mock functions later on in the tests using sinon.
+import * as indexUtils from 'plugins/ml/util/index_utils';
+
+describe('ML - Job Type Directive', () => {
+  let $scope;
+  let $compile;
+  let $element;
+
+  beforeEach(ngMock.module('kibana'));
+  beforeEach(() => {
+    ngMock.inject(function ($injector) {
+      $compile = $injector.get('$compile');
+      const $rootScope = $injector.get('$rootScope');
+      $scope = $rootScope.$new();
+    });
+  });
+
+  afterEach(() => {
+    $scope.$destroy();
+  });
+
+  it('Initialize Job Type Directive', done => {
+    sinon.stub(indexUtils, 'timeBasedIndexCheck').callsFake(() => false);
+    ngMock.inject(function () {
+      expect(() => {
+        $element = $compile('<ml-job-type-page />')($scope);
+      }).to.not.throwError();
+
+      // directive has scope: false
+      const scope = $element.isolateScope();
+      expect(scope).to.eql(undefined);
+      done();
+    });
+  });
+});
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/job_type/directive.tsx b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/job_type/directive.tsx
new file mode 100644
index 00000000000000..4ad689a943160c
--- /dev/null
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/job_type/directive.tsx
@@ -0,0 +1,65 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+// @ts-ignore
+import { uiModules } from 'ui/modules';
+const module = uiModules.get('apps/ml', ['react']);
+import { timefilter } from 'ui/timefilter';
+import { IndexPatterns } from 'ui/index_patterns';
+
+import { I18nContext } from 'ui/i18n';
+import { IPrivate } from 'ui/private';
+import { InjectorService } from '../../../../../common/types/angular';
+
+import { SearchItemsProvider } from '../../../new_job/utils/new_job_utils';
+import { Page } from './page';
+
+import { KibanaContext, KibanaConfigTypeFix } from '../../../../contexts/kibana';
+
+module.directive('mlJobTypePage', ($injector: InjectorService) => {
+  return {
+    scope: {},
+    restrict: 'E',
+    link: async (scope: ng.IScope, element: ng.IAugmentedJQuery) => {
+      // remove time picker from top of page
+      timefilter.disableTimeRangeSelector();
+      timefilter.disableAutoRefreshSelector();
+
+      const indexPatterns = $injector.get<IndexPatterns>('indexPatterns');
+      const kbnBaseUrl = $injector.get<string>('kbnBaseUrl');
+      const kibanaConfig = $injector.get<KibanaConfigTypeFix>('config');
+      const Private = $injector.get<IPrivate>('Private');
+
+      const createSearchItems = Private(SearchItemsProvider);
+      const { indexPattern, savedSearch, combinedQuery } = createSearchItems();
+      const kibanaContext = {
+        combinedQuery,
+        currentIndexPattern: indexPattern,
+        currentSavedSearch: savedSearch,
+        indexPatterns,
+        kbnBaseUrl,
+        kibanaConfig,
+      };
+
+      ReactDOM.render(
+        <I18nContext>
+          <KibanaContext.Provider value={kibanaContext}>
+            {React.createElement(Page)}
+          </KibanaContext.Provider>
+        </I18nContext>,
+        element[0]
+      );
+
+      element.on('$destroy', () => {
+        ReactDOM.unmountComponentAtNode(element[0]);
+        scope.$destroy();
+      });
+    },
+  };
+});
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/job_type/page.tsx b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/job_type/page.tsx
new file mode 100644
index 00000000000000..4991039ffa2886
--- /dev/null
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/job_type/page.tsx
@@ -0,0 +1,308 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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, useState } from 'react';
+import { i18n } from '@kbn/i18n';
+import {
+  EuiPage,
+  EuiPageBody,
+  EuiTitle,
+  EuiSpacer,
+  EuiCallOut,
+  EuiText,
+  EuiFlexGrid,
+  EuiFlexItem,
+  EuiLink,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { useKibanaContext } from '../../../../contexts/kibana';
+import { DataRecognizer } from '../../../../components/data_recognizer';
+import { addItemToRecentlyAccessed } from '../../../../util/recently_accessed';
+import { timeBasedIndexCheck } from '../../../../util/index_utils';
+import { CreateJobLinkCard } from '../../../../components/create_job_link_card';
+
+export const Page: FC = () => {
+  const kibanaContext = useKibanaContext();
+  const [recognizerResultsCount, setRecognizerResultsCount] = useState(0);
+
+  const { currentSavedSearch, currentIndexPattern } = kibanaContext;
+
+  const isTimeBasedIndex = timeBasedIndexCheck(currentIndexPattern);
+  const indexWarningTitle =
+    !isTimeBasedIndex && currentSavedSearch.id === undefined
+      ? i18n.translate('xpack.ml.newJob.wizard.jobType.indexPatternNotTimeBasedMessage', {
+          defaultMessage: 'Index pattern {indexPatternTitle} is not time based',
+          values: { indexPatternTitle: currentIndexPattern.title },
+        })
+      : i18n.translate(
+          'xpack.ml.newJob.wizard.jobType.indexPatternFromSavedSearchNotTimeBasedMessage',
+          {
+            defaultMessage:
+              '{savedSearchTitle} uses index pattern {indexPatternTitle} which is not time based',
+            values: {
+              savedSearchTitle: currentSavedSearch.title,
+              indexPatternTitle: currentIndexPattern.title,
+            },
+          }
+        );
+  const pageTitleLabel =
+    currentSavedSearch.id !== undefined
+      ? i18n.translate('xpack.ml.newJob.wizard.jobType.savedSearchPageTitleLabel', {
+          defaultMessage: 'saved search {savedSearchTitle}',
+          values: { savedSearchTitle: currentSavedSearch.title },
+        })
+      : i18n.translate('xpack.ml.newJob.wizard.jobType.indexPatternPageTitleLabel', {
+          defaultMessage: 'index pattern {indexPatternTitle}',
+          values: { indexPatternTitle: currentIndexPattern.title },
+        });
+
+  const recognizerResults = {
+    count: 0,
+    onChange() {
+      setRecognizerResultsCount(recognizerResults.count);
+    },
+  };
+
+  const getUrl = (basePath: string) => {
+    return currentSavedSearch.id === undefined
+      ? `${basePath}?index=${currentIndexPattern.id}`
+      : `${basePath}?savedSearchId=${currentSavedSearch.id}`;
+  };
+
+  const addSelectionToRecentlyAccessed = () => {
+    const title =
+      currentSavedSearch.id === undefined ? currentIndexPattern.title : currentSavedSearch.title;
+    const url = getUrl('');
+    addItemToRecentlyAccessed('jobs/new_job/datavisualizer', title, url);
+
+    window.location.href = getUrl('#jobs/new_job/datavisualizer');
+  };
+
+  const jobTypes = [
+    {
+      href: getUrl('#jobs/new_job/single_metric'),
+      icon: {
+        type: 'createSingleMetricJob',
+        ariaLabel: i18n.translate('xpack.ml.newJob.wizard.jobType.singleMetricAriaLabel', {
+          defaultMessage: 'Single metric job',
+        }),
+      },
+      title: i18n.translate('xpack.ml.newJob.wizard.jobType.singleMetricTitle', {
+        defaultMessage: 'Single metric',
+      }),
+      description: i18n.translate('xpack.ml.newJob.wizard.jobType.singleMetricDescription', {
+        defaultMessage: 'Detect anomalies in a single time series.',
+      }),
+      id: 'mlJobTypeLinkSingleMetricJob',
+    },
+    {
+      href: getUrl('#jobs/new_job/multi_metric'),
+      icon: {
+        type: 'createMultiMetricJob',
+        ariaLabel: i18n.translate('xpack.ml.newJob.wizard.jobType.multiMetricAriaLabel', {
+          defaultMessage: 'Multi metric job',
+        }),
+      },
+      title: i18n.translate('xpack.ml.newJob.wizard.jobType.multiMetricTitle', {
+        defaultMessage: 'Multi metric',
+      }),
+      description: i18n.translate('xpack.ml.newJob.wizard.jobType.multiMetricDescription', {
+        defaultMessage:
+          'Detect anomalies in multiple metrics by splitting a time series by a categorical field.',
+      }),
+      id: 'mlJobTypeLinkMultiMetricJob',
+    },
+    {
+      href: getUrl('#jobs/new_job/population'),
+      icon: {
+        type: 'createPopulationJob',
+        ariaLabel: i18n.translate('xpack.ml.newJob.wizard.jobType.populationAriaLabel', {
+          defaultMessage: 'Population job',
+        }),
+      },
+      title: i18n.translate('xpack.ml.newJob.wizard.jobType.populationTitle', {
+        defaultMessage: 'Population',
+      }),
+      description: i18n.translate('xpack.ml.newJob.wizard.jobType.populationDescription', {
+        defaultMessage:
+          'Detect activity that is unusual compared to the behavior of the population.',
+      }),
+      id: 'mlJobTypeLinkPopulationJob',
+    },
+    {
+      href: getUrl('#jobs/new_job/advanced'),
+      icon: {
+        type: 'createAdvancedJob',
+        ariaLabel: i18n.translate('xpack.ml.newJob.wizard.jobType.advancedAriaLabel', {
+          defaultMessage: 'Advanced job',
+        }),
+      },
+      title: i18n.translate('xpack.ml.newJob.wizard.jobType.advancedTitle', {
+        defaultMessage: 'Advanced',
+      }),
+      description: i18n.translate('xpack.ml.newJob.wizard.jobType.advancedDescription', {
+        defaultMessage:
+          'Use the full range of options to create a job for more advanced use cases.',
+      }),
+      id: 'mlJobTypeLinkAdvancedJob',
+    },
+  ];
+
+  return (
+    <EuiPage data-test-subj="mlPageJobTypeSelection">
+      <EuiPageBody restrictWidth={1200}>
+        <EuiTitle size="l">
+          <h2>
+            <FormattedMessage
+              id="xpack.ml.newJob.wizard.jobType.createJobFromTitle"
+              defaultMessage="Create a job from the {pageTitleLabel}"
+              values={{ pageTitleLabel }}
+            />
+          </h2>
+        </EuiTitle>
+        <EuiSpacer />
+
+        {isTimeBasedIndex === false && (
+          <>
+            <EuiCallOut title={indexWarningTitle} color="warning" iconType="alert">
+              <FormattedMessage
+                id="xpack.ml.newJob.wizard.jobType.howToRunAnomalyDetectionDescription"
+                defaultMessage="Anomaly detection can only be run over indices which are time based."
+              />
+              <br />
+              <EuiLink href="#jobs/new_job">
+                <FormattedMessage
+                  id="xpack.ml.newJob.wizard.jobType.selectDifferentIndexLinkText"
+                  defaultMessage="Select a different index"
+                />
+              </EuiLink>
+            </EuiCallOut>
+            <EuiSpacer size="xxl" />
+          </>
+        )}
+
+        <div hidden={recognizerResultsCount === 0}>
+          <EuiText>
+            <EuiTitle size="s">
+              <h3>
+                <FormattedMessage
+                  id="xpack.ml.newJob.wizard.jobType.useSuppliedConfigurationTitle"
+                  defaultMessage="Use a supplied configuration"
+                />
+              </h3>
+            </EuiTitle>
+
+            <p>
+              <FormattedMessage
+                id="xpack.ml.newJob.wizard.jobType.useSuppliedConfigurationDescription"
+                defaultMessage="The fields in your data have been recognized as matching known configurations.
+                Select to create a set of machine learning jobs and associated dashboards."
+              />
+            </p>
+          </EuiText>
+
+          <EuiSpacer size="m" />
+
+          <EuiFlexGrid gutterSize="l" columns={4}>
+            <DataRecognizer
+              indexPattern={currentIndexPattern}
+              savedSearch={currentSavedSearch}
+              results={recognizerResults}
+            />
+          </EuiFlexGrid>
+
+          <EuiSpacer size="xxl" />
+        </div>
+
+        <EuiText>
+          <EuiTitle size="s">
+            <h3>
+              <FormattedMessage
+                id="xpack.ml.newJob.wizard.jobType.useWizardTitle"
+                defaultMessage="Use a wizard"
+              />
+            </h3>
+          </EuiTitle>
+
+          <p>
+            <FormattedMessage
+              id="xpack.ml.newJob.wizard.jobType.useWizardDescription"
+              defaultMessage="Use one of the wizards to create a machine learning job to find anomalies in your data."
+            />
+          </p>
+        </EuiText>
+
+        <EuiSpacer size="m" />
+
+        <EuiFlexGrid gutterSize="l" columns={4}>
+          {jobTypes.map(({ href, icon, title, description, id }) => (
+            <EuiFlexItem key={id}>
+              <CreateJobLinkCard
+                data-test-subj={id}
+                href={href}
+                icon={icon.type}
+                iconAreaLabel={icon.ariaLabel}
+                title={title}
+                description={description}
+                isDisabled={!isTimeBasedIndex}
+              />
+            </EuiFlexItem>
+          ))}
+        </EuiFlexGrid>
+
+        <EuiSpacer size="xxl" />
+
+        <EuiText>
+          <EuiTitle size="s">
+            <h3>
+              <FormattedMessage
+                id="xpack.ml.newJob.wizard.jobType.learnMoreAboutDataTitle"
+                defaultMessage="Learn more about your data"
+              />
+            </h3>
+          </EuiTitle>
+
+          <p>
+            <FormattedMessage
+              id="xpack.ml.newJob.wizard.jobType.learnMoreAboutDataDescription"
+              defaultMessage="If you're not sure what type of job to create, first explore the fields and metrics in your data."
+            />
+          </p>
+        </EuiText>
+
+        <EuiSpacer size="m" />
+
+        <EuiFlexGrid gutterSize="l" columns={4}>
+          <EuiFlexItem>
+            <CreateJobLinkCard
+              icon="dataVisualizer"
+              iconAreaLabel={i18n.translate(
+                'xpack.ml.newJob.wizard.jobType.dataVisualizerAriaLabel',
+                {
+                  defaultMessage: 'Data Visualizer',
+                }
+              )}
+              title={
+                <FormattedMessage
+                  id="xpack.ml.newJob.wizard.jobType.dataVisualizerTitle"
+                  defaultMessage="Data Visualizer"
+                />
+              }
+              description={
+                <FormattedMessage
+                  id="xpack.ml.newJob.wizard.jobType.dataVisualizerDescription"
+                  defaultMessage="Learn more about the characteristics of your data and identify the fields for analysis with machine learning."
+                />
+              }
+              onClick={addSelectionToRecentlyAccessed}
+              href={getUrl('#jobs/new_job/datavisualizer')}
+            />
+          </EuiFlexItem>
+        </EuiFlexGrid>
+      </EuiPageBody>
+    </EuiPage>
+  );
+};
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/job_type/route.ts b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/job_type/route.ts
new file mode 100644
index 00000000000000..b61424998705d6
--- /dev/null
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/job_type/route.ts
@@ -0,0 +1,27 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import uiRoutes from 'ui/routes';
+
+// @ts-ignore
+import { checkMlNodesAvailable } from 'plugins/ml/ml_nodes_check/check_ml_nodes';
+// @ts-ignore
+import { checkLicenseExpired } from '../../../../license/check_license';
+import { checkCreateJobsPrivilege } from '../../../../privilege/check_privilege';
+import { loadCurrentIndexPattern, loadCurrentSavedSearch } from '../../../../util/index_utils';
+import { getCreateJobBreadcrumbs } from '../../../breadcrumbs';
+
+uiRoutes.when('/jobs/new_job/step/job_type', {
+  template: '<ml-job-type-page />',
+  k7Breadcrumbs: getCreateJobBreadcrumbs,
+  resolve: {
+    CheckLicense: checkLicenseExpired,
+    privileges: checkCreateJobsPrivilege,
+    indexPattern: loadCurrentIndexPattern,
+    savedSearch: loadCurrentSavedSearch,
+    checkMlNodesAvailable,
+  },
+});
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/new_job/page.tsx b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/new_job/page.tsx
index c5aa3c42693145..15844229006a3f 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/new_job/page.tsx
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/new_job/page.tsx
@@ -123,7 +123,7 @@ export const Page: FC<PageProps> = ({ existingJobsAndGroups, jobType }) => {
 
   return (
     <Fragment>
-      <EuiPage style={{ backgroundColor: 'inherit' }} data-test-subj="mlPageJobWizard">
+      <EuiPage style={{ backgroundColor: 'inherit' }} data-test-subj={`mlPageJobWizard ${jobType}`}>
         <EuiPageBody>
           <EuiPageContentBody>
             <Wizard
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/new_job/route.ts b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/new_job/route.ts
index cdca3a810fcdd8..08f05e6884bb35 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/new_job/route.ts
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/new_job/route.ts
@@ -9,14 +9,12 @@ import uiRoutes from 'ui/routes';
 // @ts-ignore
 import { checkFullLicense } from '../../../../license/check_license';
 import { checkGetJobsPrivilege } from '../../../../privilege/check_privilege';
-// @ts-ignore
 import { loadCurrentIndexPattern, loadCurrentSavedSearch } from '../../../../util/index_utils';
 
 import {
   getCreateSingleMetricJobBreadcrumbs,
   getCreateMultiMetricJobBreadcrumbs,
   getCreatePopulationJobBreadcrumbs,
-  // @ts-ignore
 } from '../../../breadcrumbs';
 
 import { Route } from '../../../../../common/types/kibana';
diff --git a/x-pack/legacy/plugins/ml/public/services/job_service.js b/x-pack/legacy/plugins/ml/public/services/job_service.js
index f7b01e983fe06d..845481d41da773 100644
--- a/x-pack/legacy/plugins/ml/public/services/job_service.js
+++ b/x-pack/legacy/plugins/ml/public/services/job_service.js
@@ -11,12 +11,12 @@ import angular from 'angular';
 import moment from 'moment';
 import { i18n } from '@kbn/i18n';
 
-import { parseInterval } from 'ui/utils/parse_interval';
 import { ml } from './ml_api_service';
 
 import { mlMessageBarService } from '../components/messagebar/messagebar_service';
-import { isWebUrl } from '../util/string_utils';
+import { isWebUrl } from '../util/url_utils';
 import { ML_DATA_PREVIEW_COUNT } from '../../common/util/job_utils';
+import { parseInterval } from '../../common/util/parse_interval';
 
 const msgs = mlMessageBarService;
 let jobs = [];
diff --git a/x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer.js b/x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer.js
index caef7be64d6e0a..d852329692ba5f 100644
--- a/x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer.js
+++ b/x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer.js
@@ -29,11 +29,11 @@ import {
 } from '@elastic/eui';
 
 import chrome from 'ui/chrome';
-import { parseInterval } from 'ui/utils/parse_interval';
 import { toastNotifications } from 'ui/notify';
 import { ResizeChecker } from 'ui/resize_checker';
 
 import { ANOMALIES_TABLE_DEFAULT_QUERY_SIZE } from '../../common/constants/search';
+import { parseInterval } from '../../common/util/parse_interval';
 import {
   isModelPlotEnabled,
   isSourceDataChartableForDetector,
diff --git a/x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer_utils.js b/x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer_utils.js
index ac5d829ded3a9f..fb741702841ed1 100644
--- a/x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer_utils.js
+++ b/x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer_utils.js
@@ -15,8 +15,6 @@
 import _ from 'lodash';
 import moment from 'moment-timezone';
 
-import { parseInterval } from 'ui/utils/parse_interval';
-
 import {
   ANNOTATIONS_TABLE_DEFAULT_QUERY_SIZE,
   ANOMALIES_TABLE_DEFAULT_QUERY_SIZE
@@ -25,6 +23,7 @@ import {
   isTimeSeriesViewJob,
   mlFunctionToESAggregation,
 } from '../../common/util/job_utils';
+import { parseInterval } from '../../common/util/parse_interval';
 
 import { ml } from '../services/ml_api_service';
 import { mlForecastService } from '../services/forecast_service';
diff --git a/x-pack/legacy/plugins/ml/public/util/__tests__/string_utils.js b/x-pack/legacy/plugins/ml/public/util/__tests__/string_utils.js
index bdf467a9399a4b..74139babc89177 100644
--- a/x-pack/legacy/plugins/ml/public/util/__tests__/string_utils.js
+++ b/x-pack/legacy/plugins/ml/public/util/__tests__/string_utils.js
@@ -15,7 +15,6 @@ import {
   toLocaleString,
   mlEscape,
   escapeForElasticsearchQuery,
-  isWebUrl
 } from '../string_utils';
 
 
@@ -232,32 +231,4 @@ describe('ML - string utils', () => {
     });
   });
 
-  describe('isWebUrl', () => {
-    it('returns true for http URLs', () => {
-      expect(isWebUrl('http://airlinecodes.info/airline-code-$airline$')).to.be(true);
-      expect(isWebUrl('http://www.google.co.uk/search?q=airline+code+$airline$')).to.be(true);
-      expect(isWebUrl('http://showcase.server.com:5601/')).to.be(true);
-      expect(isWebUrl('http://10.1.2.3/myapp/query=test')).to.be(true);
-    });
-
-    it('returns true for https URLs', () => {
-      expect(isWebUrl('https://www.google.co.uk/search?q=airline+code+$airline$')).to.be(true);
-    });
-
-    it('returns true for relative web URLs', () => {
-      expect(isWebUrl('kibana#/discover?_g=(time:(from:\'$earliest$\',mode:absolute,to:\'$latest$\'))' +
-        '&_a=(index:\'38288750-1884-11e8-b207-d9cfd2566581\',query:(language:lucene,query:\'airline:$airline$\'))')).to.be(true);
-      expect(isWebUrl('kibana#/dashboard/cc295990-1d19-11e8-b271-015e33f55cb6?' +
-        '_g=(time:(from:\'$earliest$\',mode:absolute,to:\'$latest$\'))' +
-        '&_a=(filters:!(),query:(language:lucene,query:\'instance:$instance$ AND region:$region$\'))')).to.be(true);
-
-    });
-
-    it('returns false for non web URLs', () => {
-      expect(isWebUrl('javascript:console.log(window)')).to.be(false);  // eslint-disable-line no-script-url
-      expect(isWebUrl('ftp://admin@10.1.2.3/')).to.be(false);
-      expect(isWebUrl('mailto:someone@example.com?Subject=Hello%20again')).to.be(false);
-    });
-  });
-
 });
diff --git a/x-pack/legacy/plugins/ml/public/util/index_utils.js b/x-pack/legacy/plugins/ml/public/util/index_utils.js
deleted file mode 100644
index dfc6a7735616a6..00000000000000
--- a/x-pack/legacy/plugins/ml/public/util/index_utils.js
+++ /dev/null
@@ -1,108 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-
-
-import { toastNotifications } from 'ui/notify';
-import { SavedObjectsClientProvider } from 'ui/saved_objects';
-import { i18n } from '@kbn/i18n';
-
-let indexPatternCache = [];
-let fullIndexPatterns = [];
-let currentIndexPattern = null;
-let currentSavedSearch = null;
-
-export let refreshIndexPatterns = null;
-
-export function loadIndexPatterns(Private, indexPatterns) {
-  fullIndexPatterns = indexPatterns;
-  const savedObjectsClient = Private(SavedObjectsClientProvider);
-  return savedObjectsClient.find({
-    type: 'index-pattern',
-    fields: ['id', 'title', 'type', 'fields'],
-    perPage: 10000
-  }).then((response) => {
-    indexPatternCache = response.savedObjects;
-
-    if (refreshIndexPatterns === null) {
-      refreshIndexPatterns = () => {
-        return new Promise((resolve, reject) => {
-          loadIndexPatterns(Private, indexPatterns)
-          	.then((resp) => {
-              resolve(resp);
-            })
-            .catch((error) => {
-              reject(error);
-            });
-        });
-      };
-    }
-
-    return indexPatternCache;
-  });
-}
-
-export function getIndexPatterns() {
-  return indexPatternCache;
-}
-
-export function getIndexPatternNames() {
-  return indexPatternCache.map(i => (i.attributes && i.attributes.title));
-}
-
-export function getIndexPatternIdFromName(name) {
-  for (let j = 0; j < indexPatternCache.length; j++) {
-    if (indexPatternCache[j].get('title') === name) {
-      return indexPatternCache[j].id;
-    }
-  }
-  return name;
-}
-
-export function loadCurrentIndexPattern(indexPatterns, $route) {
-  fullIndexPatterns = indexPatterns;
-  currentIndexPattern = fullIndexPatterns.get($route.current.params.index);
-  return currentIndexPattern;
-}
-
-export function getIndexPatternById(id) {
-  return fullIndexPatterns.get(id);
-}
-
-export function loadCurrentSavedSearch(savedSearches, $route) {
-  currentSavedSearch = savedSearches.get($route.current.params.savedSearchId);
-  return currentSavedSearch;
-}
-
-export function getCurrentIndexPattern() {
-  return currentIndexPattern;
-}
-
-export function getCurrentSavedSearch() {
-  return currentSavedSearch;
-}
-
-// returns true if the index passed in is time based
-// an optional flag will trigger the display a notification at the top of the page
-// warning that the index is not time based
-export function timeBasedIndexCheck(indexPattern, showNotification = false) {
-  if (indexPattern.isTimeBased() === false) {
-    if (showNotification) {
-      toastNotifications.addWarning({
-        title: i18n.translate('xpack.ml.indexPatternNotBasedOnTimeSeriesNotificationTitle', {
-          defaultMessage: 'The index pattern {indexPatternTitle} is not based on a time series',
-          values: { indexPatternTitle: indexPattern.title }
-        }),
-        text: i18n.translate('xpack.ml.indexPatternNotBasedOnTimeSeriesNotificationDescription', {
-          defaultMessage: 'Anomaly detection only runs over time-based indices'
-        }),
-      });
-    }
-    return false;
-  } else {
-    return true;
-  }
-}
diff --git a/x-pack/legacy/plugins/ml/public/util/index_utils.ts b/x-pack/legacy/plugins/ml/public/util/index_utils.ts
new file mode 100644
index 00000000000000..41dd13555726c4
--- /dev/null
+++ b/x-pack/legacy/plugins/ml/public/util/index_utils.ts
@@ -0,0 +1,110 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { toastNotifications } from 'ui/notify';
+import { i18n } from '@kbn/i18n';
+import { IndexPattern, IndexPatterns } from 'ui/index_patterns';
+import { SavedObjectAttributes, SimpleSavedObject } from 'kibana/public';
+import chrome from 'ui/chrome';
+import { SavedSearchLoader } from '../../../../../../src/legacy/core_plugins/kibana/public/discover/types';
+import { setup as data } from '../../../../../../src/legacy/core_plugins/data/public/legacy';
+
+type IndexPatternSavedObject = SimpleSavedObject<SavedObjectAttributes>;
+
+let indexPatternCache: IndexPatternSavedObject[] = [];
+let fullIndexPatterns: IndexPatterns | null = null;
+
+export let refreshIndexPatterns: (() => Promise<IndexPatternSavedObject[]>) | null = null;
+
+export function loadIndexPatterns() {
+  fullIndexPatterns = data.indexPatterns.indexPatterns;
+  const savedObjectsClient = chrome.getSavedObjectsClient();
+  return savedObjectsClient
+    .find({
+      type: 'index-pattern',
+      fields: ['id', 'title', 'type', 'fields'],
+      perPage: 10000,
+    })
+    .then(response => {
+      indexPatternCache = response.savedObjects;
+      if (refreshIndexPatterns === null) {
+        refreshIndexPatterns = () => {
+          return new Promise((resolve, reject) => {
+            loadIndexPatterns()
+              .then(resp => {
+                resolve(resp);
+              })
+              .catch(error => {
+                reject(error);
+              });
+          });
+        };
+      }
+
+      return indexPatternCache;
+    });
+}
+
+export function getIndexPatterns() {
+  return indexPatternCache;
+}
+
+export function getIndexPatternNames() {
+  return indexPatternCache.map(i => i.attributes && i.attributes.title);
+}
+
+export function getIndexPatternIdFromName(name: string) {
+  for (let j = 0; j < indexPatternCache.length; j++) {
+    if (indexPatternCache[j].get('title') === name) {
+      return indexPatternCache[j].id;
+    }
+  }
+  return name;
+}
+
+export function loadCurrentIndexPattern(indexPatterns: IndexPatterns, $route: Record<string, any>) {
+  fullIndexPatterns = indexPatterns;
+  return fullIndexPatterns.get($route.current.params.index);
+}
+
+export function getIndexPatternById(id: string): IndexPattern {
+  if (fullIndexPatterns !== null) {
+    return fullIndexPatterns.get(id);
+  } else {
+    throw new Error('Index patterns are not initialized!');
+  }
+}
+
+export function loadCurrentSavedSearch(
+  savedSearches: SavedSearchLoader,
+  $route: Record<string, any>
+) {
+  return savedSearches.get($route.current.params.savedSearchId);
+}
+
+/**
+ * Returns true if the index passed in is time based
+ * an optional flag will trigger the display a notification at the top of the page
+ * warning that the index is not time based
+ */
+export function timeBasedIndexCheck(indexPattern: IndexPattern, showNotification = false) {
+  if (!indexPattern.isTimeBased()) {
+    if (showNotification) {
+      toastNotifications.addWarning({
+        title: i18n.translate('xpack.ml.indexPatternNotBasedOnTimeSeriesNotificationTitle', {
+          defaultMessage: 'The index pattern {indexPatternTitle} is not based on a time series',
+          values: { indexPatternTitle: indexPattern.title },
+        }),
+        text: i18n.translate('xpack.ml.indexPatternNotBasedOnTimeSeriesNotificationDescription', {
+          defaultMessage: 'Anomaly detection only runs over time-based indices',
+        }),
+      });
+    }
+    return false;
+  } else {
+    return true;
+  }
+}
diff --git a/x-pack/legacy/plugins/ml/public/util/recently_accessed.js b/x-pack/legacy/plugins/ml/public/util/recently_accessed.ts
similarity index 71%
rename from x-pack/legacy/plugins/ml/public/util/recently_accessed.js
rename to x-pack/legacy/plugins/ml/public/util/recently_accessed.ts
index b642be7d1226a1..196d24bfff830f 100644
--- a/x-pack/legacy/plugins/ml/public/util/recently_accessed.js
+++ b/x-pack/legacy/plugins/ml/public/util/recently_accessed.ts
@@ -4,41 +4,39 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-
-
 // utility functions for managing which links get added to kibana's recently accessed list
 
-import { recentlyAccessed } from 'ui/persisted_log';
+import { npStart } from 'ui/new_platform';
 import { i18n } from '@kbn/i18n';
 
-export function addItemToRecentlyAccessed(page, itemId, url) {
+export function addItemToRecentlyAccessed(page: string, itemId: string, url: string) {
   let pageLabel = '';
   let id = `ml-job-${itemId}`;
 
   switch (page) {
     case 'explorer':
       pageLabel = i18n.translate('xpack.ml.anomalyExplorerPageLabel', {
-        defaultMessage: 'Anomaly Explorer'
+        defaultMessage: 'Anomaly Explorer',
       });
       break;
     case 'timeseriesexplorer':
       pageLabel = i18n.translate('xpack.ml.singleMetricViewerPageLabel', {
-        defaultMessage: 'Single Metric Viewer'
+        defaultMessage: 'Single Metric Viewer',
       });
       break;
     case 'jobs/new_job/datavisualizer':
       pageLabel = i18n.translate('xpack.ml.dataVisualizerPageLabel', {
-        defaultMessage: 'Data Visualizer'
+        defaultMessage: 'Data Visualizer',
       });
       id = `ml-datavisualizer-${itemId}`;
       break;
     default:
+      // eslint-disable-next-line no-console
       console.error('addItemToRecentlyAccessed - No page specified');
       return;
-      break;
   }
 
   url = `ml#/${page}/${url}`;
 
-  recentlyAccessed.add(url, `ML - ${itemId} - ${pageLabel}`, id);
+  npStart.core.chrome.recentlyAccessed.add(url, `ML - ${itemId} - ${pageLabel}`, id);
 }
diff --git a/x-pack/legacy/plugins/ml/public/util/string_utils.js b/x-pack/legacy/plugins/ml/public/util/string_utils.js
index 73ab5548677241..7d97f0b1d3167f 100644
--- a/x-pack/legacy/plugins/ml/public/util/string_utils.js
+++ b/x-pack/legacy/plugins/ml/public/util/string_utils.js
@@ -12,8 +12,6 @@
 import _ from 'lodash';
 import d3 from 'd3';
 
-import { relativeToAbsolute } from 'ui/url/relative_to_absolute';
-
 // Replaces all instances of dollar delimited tokens in the specified String
 // with corresponding values from the supplied object, optionally
 // encoding the replacement for a URI component.
@@ -338,13 +336,6 @@ export function escapeForElasticsearchQuery(str) {
   return String(str).replace(/[-[\]{}()+!<>=?:\/\\^"~*&|\s]/g, '\\$&');
 }
 
-// returns whether the supplied String represents a web URL
-// i.e. whether it starts with http:// or https://
-export function isWebUrl(str) {
-  const absoluteUrl = relativeToAbsolute(str);
-  return absoluteUrl.startsWith('http://') || absoluteUrl.startsWith('https://');
-}
-
 export function calculateTextWidth(txt, isNumber, elementSelection) {
   txt = (isNumber) ? d3.format(',')(txt) : txt;
   let svg = elementSelection;
diff --git a/x-pack/legacy/plugins/ml/public/util/time_buckets.js b/x-pack/legacy/plugins/ml/public/util/time_buckets.js
index 2a4c7023dbb023..6933ee6935e807 100644
--- a/x-pack/legacy/plugins/ml/public/util/time_buckets.js
+++ b/x-pack/legacy/plugins/ml/public/util/time_buckets.js
@@ -149,12 +149,11 @@ TimeBuckets.prototype.getDuration = function () {
  * generated.
  *
  * Input can be one of the following:
- *  - Any object from src/legacy/ui/agg_types/buckets/_interval_options.js
  *  - "auto"
- *  - Pass a valid moment unit
+ *  - an interval String, such as 7d, 1h or 30m which can be parsed to a moment duration using ml/common/util/parse_interval
  *  - a moment.duration object.
  *
- * @param {object|string|moment.duration} input - see desc
+ * @param {string|moment.duration} input - see desc
  */
 TimeBuckets.prototype.setInterval = function (input) {
   // Preserve the original units because they're lost when the interval is converted to a
@@ -163,11 +162,6 @@ TimeBuckets.prototype.setInterval = function (input) {
 
   let interval = input;
 
-  // selection object -> val
-  if (_.isObject(input)) {
-    interval = input.val;
-  }
-
   if (!interval || interval === 'auto') {
     this._i = 'auto';
     return;
diff --git a/x-pack/legacy/plugins/ml/public/util/url_utils.test.ts b/x-pack/legacy/plugins/ml/public/util/url_utils.test.ts
new file mode 100644
index 00000000000000..b7c9e9daefd7d5
--- /dev/null
+++ b/x-pack/legacy/plugins/ml/public/util/url_utils.test.ts
@@ -0,0 +1,54 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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 { isWebUrl, relativeToAbsolute } from './url_utils';
+
+describe('ML - URL utils', () => {
+  const TEST_DISCOVER_URL =
+    "kibana#/discover?_g=(time:(from:'$earliest$',mode:absolute,to:'$latest$'))" +
+    "&_a=(index:'38288750-1884-11e8-b207-d9cfd2566581',query:(language:lucene,query:'airline:$airline$'))";
+
+  const TEST_DASHBOARD_URL =
+    'kibana#/dashboard/cc295990-1d19-11e8-b271-015e33f55cb6?' +
+    "_g=(time:(from:'$earliest$',mode:absolute,to:'$latest$'))" +
+    "&_a=(filters:!(),query:(language:lucene,query:'instance:$instance$ AND region:$region$'))";
+  describe('isWebUrl', () => {
+    test('returns true for http URLs', () => {
+      expect(isWebUrl('http://airlinecodes.info/airline-code-$airline$')).toBe(true);
+      expect(isWebUrl('http://www.google.co.uk/search?q=airline+code+$airline$')).toBe(true);
+      expect(isWebUrl('http://showcase.server.com:5601/')).toBe(true);
+      expect(isWebUrl('http://10.1.2.3/myapp/query=test')).toBe(true);
+    });
+
+    test('returns true for https URLs', () => {
+      expect(isWebUrl('https://www.google.co.uk/search?q=airline+code+$airline$')).toBe(true);
+    });
+
+    test('returns true for relative web URLs', () => {
+      expect(isWebUrl(TEST_DISCOVER_URL)).toBe(true);
+      expect(isWebUrl(TEST_DASHBOARD_URL)).toBe(true);
+    });
+
+    test('returns false for non web URLs', () => {
+      expect(isWebUrl('javascript:console.log(window)')).toBe(false); // eslint-disable-line no-script-url
+      expect(isWebUrl('ftp://admin@10.1.2.3/')).toBe(false);
+      expect(isWebUrl('mailto:someone@example.com?Subject=Hello%20again')).toBe(false);
+    });
+  });
+
+  describe('relativeToAbsolute', () => {
+    test('leaves absolute URLs unchanged', () => {
+      expect(relativeToAbsolute('http://elastic.co/')).toBe('http://elastic.co/');
+      expect(relativeToAbsolute('https://www.google.co.uk/search?q=elastic')).toBe(
+        'https://www.google.co.uk/search?q=elastic'
+      );
+    });
+
+    test('converts relative URLs to absolute URLs', () => {
+      expect(relativeToAbsolute(TEST_DASHBOARD_URL)).toMatch(/^(https?:\/\/)/);
+    });
+  });
+});
diff --git a/x-pack/legacy/plugins/ml/public/util/url_utils.ts b/x-pack/legacy/plugins/ml/public/util/url_utils.ts
new file mode 100644
index 00000000000000..7e34ca16e7dd7c
--- /dev/null
+++ b/x-pack/legacy/plugins/ml/public/util/url_utils.ts
@@ -0,0 +1,36 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+/*
+ * Contains utility functions for performing operations on URLs.
+ */
+
+/**
+ * Converts a relative URL to an absolute URL.
+ * @param url - a relative or root relative url.  If a relative path is given then the
+ * absolute url returned will depend on the current page where this function is called from. For example
+ * if you are on page "http://www.mysite.com/shopping/kids" and you pass this function "adults", you would get
+ * back "http://www.mysite.com/shopping/adults".  If you passed this function a root relative path, or one that
+ * starts with a "/", for example "/account/cart", you would get back "http://www.mysite.com/account/cart".
+ * @returns the relative url transformed into an absolute url
+ */
+export function relativeToAbsolute(url: string) {
+  // convert all link urls to absolute urls
+  const a = document.createElement('a');
+  a.setAttribute('href', url);
+  return a.href;
+}
+
+/**
+ * Returns whether the supplied String represents a web URL
+ * i.e. whether it starts with http:// or https://
+ * @param url URL to test
+ * @returns true if it starts with http:// or https://, false otherwise
+ */
+export function isWebUrl(url: string): boolean {
+  const absoluteUrl = relativeToAbsolute(url);
+  return /^https?:\/\//.test(absoluteUrl);
+}
diff --git a/x-pack/legacy/plugins/ml/server/client/elasticsearch_ml.js b/x-pack/legacy/plugins/ml/server/client/elasticsearch_ml.js
index ae38eeada3124e..2a186988a750d6 100644
--- a/x-pack/legacy/plugins/ml/server/client/elasticsearch_ml.js
+++ b/x-pack/legacy/plugins/ml/server/client/elasticsearch_ml.js
@@ -287,14 +287,11 @@ export const elasticsearchJsPlugin = (Client, config, components) => {
   ml.startDataFrameTransform = ca({
     urls: [
       {
-        fmt: '/_data_frame/transforms/<%=transformId%>/_start?&force=<%=force%>',
+        fmt: '/_data_frame/transforms/<%=transformId%>/_start',
         req: {
           transformId: {
             type: 'string'
           },
-          force: {
-            type: 'boolean'
-          }
         }
       }
     ],
diff --git a/x-pack/legacy/plugins/ml/server/lib/ml_telemetry/ml_telemetry.ts b/x-pack/legacy/plugins/ml/server/lib/ml_telemetry/ml_telemetry.ts
index 442cef6e3bd944..1bac3f17806449 100644
--- a/x-pack/legacy/plugins/ml/server/lib/ml_telemetry/ml_telemetry.ts
+++ b/x-pack/legacy/plugins/ml/server/lib/ml_telemetry/ml_telemetry.ts
@@ -5,7 +5,7 @@
  */
 
 import { ElasticsearchPlugin } from 'src/legacy/core_plugins/elasticsearch';
-import { SavedObjectsService } from 'src/legacy/server/kbn_server';
+import { SavedObjectsLegacyService } from 'src/legacy/server/kbn_server';
 import { callWithInternalUserFactory } from '../../client/call_with_internal_user_factory';
 
 export interface MlTelemetry {
@@ -30,7 +30,7 @@ export function createMlTelemetry(count: number = 0): MlTelemetry {
 // savedObjects
 export function storeMlTelemetry(
   elasticsearchPlugin: ElasticsearchPlugin,
-  savedObjects: SavedObjectsService,
+  savedObjects: SavedObjectsLegacyService,
   mlTelemetry: MlTelemetry
 ): void {
   const savedObjectsClient = getSavedObjectsClient(elasticsearchPlugin, savedObjects);
@@ -42,7 +42,7 @@ export function storeMlTelemetry(
 // needs savedObjects and elasticsearchPlugin
 export function getSavedObjectsClient(
   elasticsearchPlugin: ElasticsearchPlugin,
-  savedObjects: SavedObjectsService
+  savedObjects: SavedObjectsLegacyService
 ): any {
   const { SavedObjectsClient, getSavedObjectsRepository } = savedObjects;
   const callWithInternalUser = callWithInternalUserFactory(elasticsearchPlugin);
@@ -52,7 +52,7 @@ export function getSavedObjectsClient(
 
 export async function incrementFileDataVisualizerIndexCreationCount(
   elasticsearchPlugin: ElasticsearchPlugin,
-  savedObjects: SavedObjectsService
+  savedObjects: SavedObjectsLegacyService
 ): Promise<void> {
   const savedObjectsClient = getSavedObjectsClient(elasticsearchPlugin, savedObjects);
 
diff --git a/x-pack/legacy/plugins/ml/server/models/data_frame/transforms.ts b/x-pack/legacy/plugins/ml/server/models/data_frame/transforms.ts
index 392fb4191eba04..f5bce55763498e 100644
--- a/x-pack/legacy/plugins/ml/server/models/data_frame/transforms.ts
+++ b/x-pack/legacy/plugins/ml/server/models/data_frame/transforms.ts
@@ -19,9 +19,13 @@ enum TRANSFORM_ACTIONS {
   DELETE = 'delete',
 }
 
-interface StartStopOptions {
+interface StartTransformOptions {
   transformId: DataFrameTransformId;
-  force: boolean;
+}
+
+interface StopTransformOptions {
+  transformId: DataFrameTransformId;
+  force?: boolean;
   waitForCompletion?: boolean;
 }
 
@@ -30,11 +34,11 @@ export function transformServiceProvider(callWithRequest: callWithRequestType) {
     return callWithRequest('ml.deleteDataFrameTransform', { transformId });
   }
 
-  async function stopTransform(options: StartStopOptions) {
+  async function stopTransform(options: StopTransformOptions) {
     return callWithRequest('ml.stopDataFrameTransform', options);
   }
 
-  async function startTransform(options: StartStopOptions) {
+  async function startTransform(options: StartTransformOptions) {
     return callWithRequest('ml.startDataFrameTransform', options);
   }
 
@@ -86,13 +90,7 @@ export function transformServiceProvider(callWithRequest: callWithRequestType) {
     for (const transformInfo of transformsInfo) {
       const transformId = transformInfo.id;
       try {
-        await startTransform({
-          transformId,
-          force:
-            transformInfo.state !== undefined
-              ? transformInfo.state === DATA_FRAME_TRANSFORM_STATE.FAILED
-              : false,
-        });
+        await startTransform({ transformId });
         results[transformId] = { success: true };
       } catch (e) {
         if (isRequestTimeout(e)) {
diff --git a/x-pack/legacy/plugins/ml/server/models/data_recognizer/__tests__/data_recognizer.js b/x-pack/legacy/plugins/ml/server/models/data_recognizer/__tests__/data_recognizer.js
index 59bfd564f7ca27..f17eb5c5e46de4 100644
--- a/x-pack/legacy/plugins/ml/server/models/data_recognizer/__tests__/data_recognizer.js
+++ b/x-pack/legacy/plugins/ml/server/models/data_recognizer/__tests__/data_recognizer.js
@@ -27,18 +27,16 @@ describe('ML - data recognizer', () => {
   ];
 
   // check all module IDs are the same as the list above
-  it('listModules - check all module IDs', async (done) => {
+  it('listModules - check all module IDs', async () => {
     const modules = await dr.listModules();
     const ids = modules.map(m => m.id);
     expect(ids.join()).to.equal(moduleIds.join());
-    done();
   });
 
 
-  it('getModule - load a single module', async (done) => {
+  it('getModule - load a single module', async () => {
     const module = await dr.getModule(moduleIds[0]);
     expect(module.id).to.equal(moduleIds[0]);
-    done();
   });
 
 });
diff --git a/x-pack/legacy/plugins/ml/server/models/data_recognizer/modules/logs_ui_analysis/ml/log_entry_rate.json b/x-pack/legacy/plugins/ml/server/models/data_recognizer/modules/logs_ui_analysis/ml/log_entry_rate.json
index b59042ce2053fd..5279b18fb03b32 100644
--- a/x-pack/legacy/plugins/ml/server/models/data_recognizer/modules/logs_ui_analysis/ml/log_entry_rate.json
+++ b/x-pack/legacy/plugins/ml/server/models/data_recognizer/modules/logs_ui_analysis/ml/log_entry_rate.json
@@ -8,10 +8,11 @@
       {
         "detector_description": "count",
         "function": "count",
-        "detector_index": 0
+        "partition_field_name": "event.dataset",
+        "use_null": true
       }
     ],
-    "influencers": []
+    "influencers": ["event.dataset"]
   },
   "analysis_limits": {
     "model_memory_limit": "10mb"
@@ -25,6 +26,6 @@
   },
   "custom_settings": {
     "created_by": "ml-module-logs-ui-analysis",
-    "job_revision": 1
+    "job_revision": 2
   }
 }
diff --git a/x-pack/legacy/plugins/ml/server/new_platform/plugin.ts b/x-pack/legacy/plugins/ml/server/new_platform/plugin.ts
index 47d9f5328ef67d..5cca26a290acae 100644
--- a/x-pack/legacy/plugins/ml/server/new_platform/plugin.ts
+++ b/x-pack/legacy/plugins/ml/server/new_platform/plugin.ts
@@ -7,7 +7,7 @@
 import Boom from 'boom';
 import { i18n } from '@kbn/i18n';
 import { ServerRoute } from 'hapi';
-import { KibanaConfig, SavedObjectsService } from 'src/legacy/server/kbn_server';
+import { KibanaConfig, SavedObjectsLegacyService } from 'src/legacy/server/kbn_server';
 import { HttpServiceSetup, Logger, PluginInitializerContext } from 'src/core/server';
 import { ElasticsearchPlugin } from 'src/legacy/core_plugins/elasticsearch';
 import { XPackMainPlugin } from '../../../xpack_main/xpack_main';
@@ -73,7 +73,7 @@ export interface MlCoreSetup {
   addAppLinksToSampleDataset: () => any;
   injectUiAppVars: (id: string, callback: () => {}) => any;
   http: MlHttpServiceSetup;
-  savedObjects: SavedObjectsService;
+  savedObjects: SavedObjectsLegacyService;
   usage: {
     collectorSet: {
       makeUsageCollector: any;
@@ -99,7 +99,7 @@ export interface RouteInitialization {
   elasticsearchPlugin: ElasticsearchPlugin;
   route(route: ServerRoute | ServerRoute[]): void;
   xpackMainPlugin?: MlXpackMainPlugin;
-  savedObjects?: SavedObjectsService;
+  savedObjects?: SavedObjectsLegacyService;
   spacesPlugin: any;
 }
 export interface UsageInitialization {
@@ -110,7 +110,7 @@ export interface UsageInitialization {
       register: (collector: any) => void;
     };
   };
-  savedObjects: SavedObjectsService;
+  savedObjects: SavedObjectsLegacyService;
 }
 
 export class Plugin {
diff --git a/x-pack/legacy/plugins/monitoring/common/constants.js b/x-pack/legacy/plugins/monitoring/common/constants.js
index 98246141130942..f953741cd2e02d 100644
--- a/x-pack/legacy/plugins/monitoring/common/constants.js
+++ b/x-pack/legacy/plugins/monitoring/common/constants.js
@@ -154,8 +154,11 @@ export const INDEX_PATTERN_FILEBEAT = 'filebeat-*';
 export const METRICBEAT_INDEX_NAME_UNIQUE_TOKEN = '-mb-';
 
 // We use this for metricbeat migration to identify specific products that we do not have constants for
-export const ELASTICSEARCH_CUSTOM_ID = 'elasticsearch';
-export const APM_CUSTOM_ID = 'apm';
+export const ELASTICSEARCH_SYSTEM_ID = 'elasticsearch';
+export const KIBANA_SYSTEM_ID = 'kibana';
+export const BEATS_SYSTEM_ID = 'beats';
+export const APM_SYSTEM_ID = 'apm';
+export const LOGSTASH_SYSTEM_ID = 'logstash';
 /**
  * The id of the infra source owned by the monitoring plugin.
  */
diff --git a/x-pack/legacy/plugins/monitoring/common/formatting.js b/x-pack/legacy/plugins/monitoring/common/formatting.js
index e94ed44efff050..a3b3ce07c8c760 100644
--- a/x-pack/legacy/plugins/monitoring/common/formatting.js
+++ b/x-pack/legacy/plugins/monitoring/common/formatting.js
@@ -17,8 +17,10 @@ export const LARGE_ABBREVIATED = '0,0.[0]a';
  * @param date Either a numeric Unix timestamp or a {@code Date} object
  * @returns The date formatted using 'LL LTS'
  */
-export function formatDateTimeLocal(date) {
-  return moment.tz(date, moment.tz.guess()).format('LL LTS');
+export function formatDateTimeLocal(date, useUTC = false) {
+  return useUTC
+    ? moment.utc(date).format('LL LTS')
+    : moment.tz(date, moment.tz.guess()).format('LL LTS');
 }
 
 /**
diff --git a/x-pack/legacy/plugins/monitoring/public/components/apm/instances/instances.js b/x-pack/legacy/plugins/monitoring/public/components/apm/instances/instances.js
index 04b6652c6ce0ab..1a660934053634 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/apm/instances/instances.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/apm/instances/instances.js
@@ -8,80 +8,111 @@ import React, { Fragment } from 'react';
 import moment from 'moment';
 import { uniq, get } from 'lodash';
 import { EuiMonitoringTable } from '../../table';
-import { EuiLink, EuiPage, EuiPageBody, EuiPageContent, EuiSpacer, EuiCallOut } from '@elastic/eui';
+import { EuiLink, EuiPage, EuiPageBody, EuiPageContent, EuiSpacer } from '@elastic/eui';
 import { Status } from './status';
 import { formatMetric } from '../../../lib/format_number';
 import { formatTimestampToDuration } from '../../../../common';
 import { i18n } from '@kbn/i18n';
+import { APM_SYSTEM_ID } from '../../../../common/constants';
+import { ListingCallOut } from '../../setup_mode/listing_callout';
+import { SetupModeBadge } from '../../setup_mode/badge';
 
-const columns = [
-  {
-    name: i18n.translate('xpack.monitoring.apm.instances.nameTitle', {
-      defaultMessage: 'Name'
-    }),
-    field: 'name',
-    render: (name, instance) => (
-      <EuiLink
-        href={`#/apm/instances/${instance.uuid}`}
-        data-test-subj={`apmLink-${name}`}
-      >
-        {name}
-      </EuiLink>
-    )
-  },
-  {
-    name: i18n.translate('xpack.monitoring.apm.instances.outputEnabledTitle', {
-      defaultMessage: 'Output Enabled'
-    }),
-    field: 'output'
-  },
-  {
-    name: i18n.translate('xpack.monitoring.apm.instances.totalEventsRateTitle', {
-      defaultMessage: 'Total Events Rate'
-    }),
-    field: 'total_events_rate',
-    render: value => formatMetric(value, '', '/s')
-  },
-  {
-    name: i18n.translate('xpack.monitoring.apm.instances.bytesSentRateTitle', {
-      defaultMessage: 'Bytes Sent Rate'
-    }),
-    field: 'bytes_sent_rate',
-    render: value => formatMetric(value, 'byte', '/s')
-  },
-  {
-    name: i18n.translate('xpack.monitoring.apm.instances.outputErrorsTitle', {
-      defaultMessage: 'Output Errors'
-    }),
-    field: 'errors',
-    render: value => formatMetric(value, '0')
-  },
-  {
-    name: i18n.translate('xpack.monitoring.apm.instances.lastEventTitle', {
-      defaultMessage: 'Last Event'
-    }),
-    field: 'time_of_last_event',
-    render: value => i18n.translate('xpack.monitoring.apm.instances.lastEventValue', {
-      defaultMessage: '{timeOfLastEvent} ago',
-      values: {
-        timeOfLastEvent: formatTimestampToDuration(+moment(value), 'since')
+function getColumns(setupMode) {
+  return [
+    {
+      name: i18n.translate('xpack.monitoring.apm.instances.nameTitle', {
+        defaultMessage: 'Name'
+      }),
+      field: 'name',
+      render: (name, apm) => {
+        let setupModeStatus = null;
+        if (setupMode && setupMode.enabled) {
+          const list = get(setupMode, 'data.byUuid', {});
+          const status = list[apm.uuid] || {};
+          const instance = {
+            uuid: apm.uuid,
+            name: apm.name
+          };
+
+          setupModeStatus = (
+            <div className="monTableCell__setupModeStatus">
+              <SetupModeBadge
+                setupMode={setupMode}
+                status={status}
+                instance={instance}
+                productName={APM_SYSTEM_ID}
+              />
+            </div>
+          );
+        }
+
+        return (
+          <Fragment>
+            <EuiLink
+              href={`#/apm/instances/${apm.uuid}`}
+              data-test-subj={`apmLink-${name}`}
+            >
+              {name}
+            </EuiLink>
+            {setupModeStatus}
+          </Fragment>
+        );
       }
-    })
-  },
-  {
-    name: i18n.translate('xpack.monitoring.apm.instances.allocatedMemoryTitle', {
-      defaultMessage: 'Allocated Memory'
-    }),
-    field: 'memory',
-    render: value => formatMetric(value, 'byte')
-  },
-  {
-    name: i18n.translate('xpack.monitoring.apm.instances.versionTitle', {
-      defaultMessage: 'Version'
-    }),
-    field: 'version'
-  },
-];
+    },
+    {
+      name: i18n.translate('xpack.monitoring.apm.instances.outputEnabledTitle', {
+        defaultMessage: 'Output Enabled'
+      }),
+      field: 'output'
+    },
+    {
+      name: i18n.translate('xpack.monitoring.apm.instances.totalEventsRateTitle', {
+        defaultMessage: 'Total Events Rate'
+      }),
+      field: 'total_events_rate',
+      render: value => formatMetric(value, '', '/s')
+    },
+    {
+      name: i18n.translate('xpack.monitoring.apm.instances.bytesSentRateTitle', {
+        defaultMessage: 'Bytes Sent Rate'
+      }),
+      field: 'bytes_sent_rate',
+      render: value => formatMetric(value, 'byte', '/s')
+    },
+    {
+      name: i18n.translate('xpack.monitoring.apm.instances.outputErrorsTitle', {
+        defaultMessage: 'Output Errors'
+      }),
+      field: 'errors',
+      render: value => formatMetric(value, '0')
+    },
+    {
+      name: i18n.translate('xpack.monitoring.apm.instances.lastEventTitle', {
+        defaultMessage: 'Last Event'
+      }),
+      field: 'time_of_last_event',
+      render: value => i18n.translate('xpack.monitoring.apm.instances.lastEventValue', {
+        defaultMessage: '{timeOfLastEvent} ago',
+        values: {
+          timeOfLastEvent: formatTimestampToDuration(+moment(value), 'since')
+        }
+      })
+    },
+    {
+      name: i18n.translate('xpack.monitoring.apm.instances.allocatedMemoryTitle', {
+        defaultMessage: 'Allocated Memory'
+      }),
+      field: 'memory',
+      render: value => formatMetric(value, 'byte')
+    },
+    {
+      name: i18n.translate('xpack.monitoring.apm.instances.versionTitle', {
+        defaultMessage: 'Version'
+      }),
+      field: 'version'
+    },
+  ];
+}
 
 export function ApmServerInstances({ apms, setupMode }) {
   const {
@@ -91,26 +122,14 @@ export function ApmServerInstances({ apms, setupMode }) {
     data,
   } = apms;
 
-  let detectedInstanceMessage = null;
-  if (setupMode.enabled && setupMode.data && get(setupMode.data, 'detected.mightExist')) {
-    detectedInstanceMessage = (
-      <Fragment>
-        <EuiCallOut
-          title={i18n.translate('xpack.monitoring.apm.instances.metricbeatMigration.detectedInstanceTitle', {
-            defaultMessage: 'APM server detected',
-          })}
-          color="warning"
-          iconType="help"
-        >
-          <p>
-            {i18n.translate('xpack.monitoring.apm.instances.metricbeatMigration.detectedInstanceDescription', {
-              defaultMessage: `Based on your indices, we think you might have an APM server. Click the 'Setup monitoring'
-              button below to start monitoring this APM server.`
-            })}
-          </p>
-        </EuiCallOut>
-        <EuiSpacer size="m"/>
-      </Fragment>
+  let setupModeCallout = null;
+  if (setupMode.enabled && setupMode.data) {
+    setupModeCallout = (
+      <ListingCallOut
+        setupModeData={setupMode.data}
+        useNodeIdentifier={false}
+        productName={APM_SYSTEM_ID}
+      />
     );
   }
 
@@ -124,19 +143,15 @@ export function ApmServerInstances({ apms, setupMode }) {
         <EuiPageContent>
           <Status stats={data.stats} />
           <EuiSpacer size="m"/>
-          {detectedInstanceMessage}
+          {setupModeCallout}
           <EuiMonitoringTable
             className="apmInstancesTable"
             rows={data.apms}
-            columns={columns}
+            columns={getColumns(setupMode)}
             sorting={sorting}
             pagination={pagination}
             setupMode={setupMode}
-            uuidField="uuid"
-            nameField="name"
-            setupNewButtonLabel={i18n.translate('xpack.monitoring.apm.metricbeatMigration.setupNewButtonLabel', {
-              defaultMessage: 'Setup monitoring for new APM server'
-            })}
+            productName={APM_SYSTEM_ID}
             search={{
               box: {
                 incremental: true,
diff --git a/x-pack/legacy/plugins/monitoring/public/components/beats/listing/listing.js b/x-pack/legacy/plugins/monitoring/public/components/beats/listing/listing.js
index d11797dc090eb1..fce9dadeee9ce5 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/beats/listing/listing.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/beats/listing/listing.js
@@ -4,34 +4,64 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { PureComponent, Fragment } from 'react';
+import React, { PureComponent } from 'react';
 import { uniq, get } from 'lodash';
-import { EuiPage, EuiPageBody, EuiPageContent, EuiSpacer, EuiLink, EuiCallOut } from '@elastic/eui';
+import { EuiPage, EuiPageBody, EuiPageContent, EuiSpacer, EuiLink } from '@elastic/eui';
 import { Stats } from 'plugins/monitoring/components/beats';
 import { formatMetric } from 'plugins/monitoring/lib/format_number';
 import { EuiMonitoringTable } from 'plugins/monitoring/components/table';
 import { i18n } from '@kbn/i18n';
+import { BEATS_SYSTEM_ID } from '../../../../common/constants';
+import { ListingCallOut } from '../../setup_mode/listing_callout';
+import { SetupModeBadge } from '../../setup_mode/badge';
 
 export class Listing extends PureComponent {
   getColumns() {
     const { kbnUrl, scope } = this.props.angular;
+    const setupMode = this.props.setupMode;
 
     return [
       {
         name: i18n.translate('xpack.monitoring.beats.instances.nameTitle', { defaultMessage: 'Name' }),
         field: 'name',
-        render: (name, beat) => (
-          <EuiLink
-            onClick={() => {
-              scope.$evalAsync(() => {
-                kbnUrl.changePath(`/beats/beat/${beat.uuid}`);
-              });
-            }}
-            data-test-subj={`beatLink-${name}`}
-          >
-            {name}
-          </EuiLink>
-        )
+        render: (name, beat) => {
+          let setupModeStatus = null;
+          if (setupMode && setupMode.enabled) {
+            const list = get(setupMode, 'data.byUuid', {});
+            const status = list[beat.uuid] || {};
+            const instance = {
+              uuid: beat.uuid,
+              name: beat.name
+            };
+
+            setupModeStatus = (
+              <div className="monTableCell__setupModeStatus">
+                <SetupModeBadge
+                  setupMode={setupMode}
+                  status={status}
+                  instance={instance}
+                  productName={BEATS_SYSTEM_ID}
+                />
+              </div>
+            );
+          }
+
+          return (
+            <div>
+              <EuiLink
+                onClick={() => {
+                  scope.$evalAsync(() => {
+                    kbnUrl.changePath(`/beats/beat/${beat.uuid}`);
+                  });
+                }}
+                data-test-subj={`beatLink-${name}`}
+              >
+                {name}
+              </EuiLink>
+              {setupModeStatus}
+            </div>
+          );
+        }
       },
       {
         name: i18n.translate('xpack.monitoring.beats.instances.typeTitle', { defaultMessage: 'Type' }),
@@ -78,26 +108,14 @@ export class Listing extends PureComponent {
       setupMode
     } = this.props;
 
-    let detectedInstanceMessage = null;
-    if (setupMode.enabled && setupMode.data && get(setupMode.data, 'detected.mightExist')) {
-      detectedInstanceMessage = (
-        <Fragment>
-          <EuiCallOut
-            title={i18n.translate('xpack.monitoring.beats.instances.metricbeatMigration.detectedInstanceTitle', {
-              defaultMessage: 'Beats instance detected',
-            })}
-            color="warning"
-            iconType="help"
-          >
-            <p>
-              {i18n.translate('xpack.monitoring.beats.instances.metricbeatMigration.detectedInstanceDescription', {
-                defaultMessage: `Based on your indices, we think you might have a beats instance. Click the 'Setup monitoring'
-                button below to start monitoring this instance.`
-              })}
-            </p>
-          </EuiCallOut>
-          <EuiSpacer size="m"/>
-        </Fragment>
+    let setupModeCallOut = null;
+    if (setupMode.enabled && setupMode.data) {
+      setupModeCallOut = (
+        <ListingCallOut
+          setupModeData={setupMode.data}
+          useNodeIdentifier={false}
+          productName={BEATS_SYSTEM_ID}
+        />
       );
     }
 
@@ -115,16 +133,12 @@ export class Listing extends PureComponent {
           <EuiPageContent>
             <Stats stats={stats} />
             <EuiSpacer size="m"/>
-            {detectedInstanceMessage}
+            {setupModeCallOut}
             <EuiMonitoringTable
               className="beatsTable"
               rows={data}
               setupMode={setupMode}
-              uuidField="uuid"
-              nameField="name"
-              setupNewButtonLabel={i18n.translate('xpack.monitoring.beats.metricbeatMigration.setupNewButtonLabel', {
-                defaultMessage: 'Setup monitoring for new Beats instance'
-              })}
+              productName={BEATS_SYSTEM_ID}
               columns={this.getColumns()}
               sorting={sorting}
               pagination={pagination}
diff --git a/x-pack/legacy/plugins/monitoring/public/components/chart/chart_target.js b/x-pack/legacy/plugins/monitoring/public/components/chart/chart_target.js
index 9f425a81d86673..9d5ebd274ea9ec 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/chart/chart_target.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/chart/chart_target.js
@@ -76,8 +76,8 @@ export class ChartTarget extends React.Component {
       .value();
   }
 
-  getOptions() {
-    const opts = getChartOptions({
+  async getOptions() {
+    const opts = await getChartOptions({
       yaxis: { tickFormatter: this.props.tickFormatter },
       xaxis: this.props.timeRange
     });
@@ -88,12 +88,12 @@ export class ChartTarget extends React.Component {
     };
   }
 
-  renderChart() {
+  async renderChart() {
     const { target } = this.refs;
     const { series } = this.props;
     const data = this.filterData(series, this.props.seriesToShow);
 
-    this.plot = $.plot(target, data, this.getOptions());
+    this.plot = $.plot(target, data, await this.getOptions());
 
     this._handleResize = () => {
       if (!this.plot) { return; }
diff --git a/x-pack/legacy/plugins/monitoring/public/components/chart/get_chart_options.js b/x-pack/legacy/plugins/monitoring/public/components/chart/get_chart_options.js
index cd81aff14701aa..7f54b7ec0d2a76 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/chart/get_chart_options.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/chart/get_chart_options.js
@@ -4,17 +4,20 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import chrome from 'ui/chrome';
 import { merge } from 'lodash';
 import { CHART_LINE_COLOR, CHART_TEXT_COLOR } from '../../../common/constants';
 
-export function getChartOptions(axisOptions) {
+export async function getChartOptions(axisOptions) {
+  const $injector = await chrome.dangerouslyGetActiveInjector();
+  const timezone = $injector.get('config').get('dateFormat:tz');
   const opts = {
     legend: {
       show: false
     },
     xaxis: {
       color: CHART_LINE_COLOR,
-      timezone: 'browser',
+      timezone: timezone === 'Browser' ? 'browser' : 'utc',
       mode: 'time', // requires `time` flot plugin
       font: {
         color: CHART_TEXT_COLOR
diff --git a/x-pack/legacy/plugins/monitoring/public/components/cluster/overview/apm_panel.js b/x-pack/legacy/plugins/monitoring/public/components/cluster/overview/apm_panel.js
index 9032378966b262..aa53ecd21e6b49 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/cluster/overview/apm_panel.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/cluster/overview/apm_panel.js
@@ -22,11 +22,10 @@ import {
   EuiDescriptionListDescription,
   EuiHorizontalRule,
   EuiFlexGroup,
-  EuiToolTip,
-  EuiIcon
 } from '@elastic/eui';
 import { formatTimestampToDuration } from '../../../../common';
-import { CALCULATE_DURATION_SINCE } from '../../../../common/constants';
+import { CALCULATE_DURATION_SINCE, APM_SYSTEM_ID } from '../../../../common/constants';
+import { SetupModeTooltip } from '../../setup_mode/tooltip';
 
 export function ApmPanel(props) {
   const { setupMode } = props;
@@ -39,48 +38,16 @@ export function ApmPanel(props) {
   const goToApm = () => props.changeUrl('apm');
   const goToInstances = () => props.changeUrl('apm/instances');
 
-  const setupModeAPMData = get(setupMode.data, 'apm');
-  let setupModeInstancesData = null;
-  if (setupMode.enabled && setupMode.data) {
-    const {
-      totalUniqueInstanceCount,
-      totalUniqueFullyMigratedCount,
-      totalUniquePartiallyMigratedCount
-    } = setupModeAPMData;
-    const hasInstances = totalUniqueInstanceCount > 0 || get(setupModeAPMData, 'detected.mightExist', false);
-    const allMonitoredByMetricbeat = totalUniqueInstanceCount > 0 &&
-      (totalUniqueFullyMigratedCount === totalUniqueInstanceCount || totalUniquePartiallyMigratedCount === totalUniqueInstanceCount);
-    const internalCollectionOn = totalUniquePartiallyMigratedCount > 0;
-    if (hasInstances && (!allMonitoredByMetricbeat || internalCollectionOn)) {
-      let tooltipText = null;
-
-      if (!allMonitoredByMetricbeat) {
-        tooltipText = i18n.translate('xpack.monitoring.cluster.overview.apmPanel.setupModeNodesTooltip.oneInternal', {
-          defaultMessage: `There's at least one server that isn't being monitored using Metricbeat. Click the flag
-          icon to visit the servers listing page and find out more information about the status of each server.`
-        });
-      }
-      else if (internalCollectionOn) {
-        tooltipText = i18n.translate('xpack.monitoring.cluster.overview.apmPanel.setupModeNodesTooltip.disableInternal', {
-          defaultMessage: `All servers are being monitored using Metricbeat but internal collection still needs to be turned
-          off. Click the flag icon to visit the servers listing page and disable internal collection.`
-        });
-      }
-
-      setupModeInstancesData = (
-        <EuiFlexItem grow={false}>
-          <EuiToolTip
-            position="top"
-            content={tooltipText}
-          >
-            <EuiLink onClick={goToInstances}>
-              <EuiIcon type="flag" color="warning"/>
-            </EuiLink>
-          </EuiToolTip>
-        </EuiFlexItem>
-      );
-    }
-  }
+  const setupModeData = get(setupMode.data, 'apm');
+  const setupModeTooltip = setupMode && setupMode.enabled
+    ? (
+      <SetupModeTooltip
+        setupModeData={setupModeData}
+        badgeClickAction={goToInstances}
+        productName={APM_SYSTEM_ID}
+      />
+    )
+    : null;
 
   return (
     <ClusterItemContainer
@@ -97,7 +64,7 @@ export function ApmPanel(props) {
               <h3>
                 <DisabledIfNoDataAndInSetupModeLink
                   setupModeEnabled={setupMode.enabled}
-                  setupModeData={setupModeAPMData}
+                  setupModeData={setupModeData}
                   onClick={goToApm}
                   aria-label={i18n.translate('xpack.monitoring.cluster.overview.apmPanel.overviewLinkAriaLabel', {
                     defaultMessage: 'APM Overview'
@@ -164,7 +131,7 @@ export function ApmPanel(props) {
                   </h3>
                 </EuiTitle>
               </EuiFlexItem>
-              {setupModeInstancesData}
+              {setupModeTooltip}
             </EuiFlexGroup>
             <EuiHorizontalRule margin="m" />
             <EuiDescriptionList type="column">
diff --git a/x-pack/legacy/plugins/monitoring/public/components/cluster/overview/beats_panel.js b/x-pack/legacy/plugins/monitoring/public/components/cluster/overview/beats_panel.js
index 8ea987d0a67623..935ee1f9cc1001 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/cluster/overview/beats_panel.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/cluster/overview/beats_panel.js
@@ -18,12 +18,12 @@ import {
   EuiDescriptionListDescription,
   EuiHorizontalRule,
   EuiFlexGroup,
-  EuiToolTip,
-  EuiIcon
 } from '@elastic/eui';
 import { ClusterItemContainer, DisabledIfNoDataAndInSetupModeLink } from './helpers';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
+import { SetupModeTooltip } from '../../setup_mode/tooltip';
+import { BEATS_SYSTEM_ID } from '../../../../common/constants';
 
 export function BeatsPanel(props) {
   const { setupMode } = props;
@@ -36,48 +36,16 @@ export function BeatsPanel(props) {
   const goToBeats = () => props.changeUrl('beats');
   const goToInstances = () => props.changeUrl('beats/beats');
 
-  const setupModeBeatsData = get(setupMode.data, 'beats');
-  let setupModeInstancesData = null;
-  if (setupMode.enabled && setupMode.data) {
-    const {
-      totalUniqueInstanceCount,
-      totalUniqueFullyMigratedCount,
-      totalUniquePartiallyMigratedCount
-    } = setupModeBeatsData;
-    const hasInstances = totalUniqueInstanceCount > 0 || get(setupModeBeatsData, 'detected.mightExist', false);
-    const allMonitoredByMetricbeat = totalUniqueInstanceCount > 0 &&
-      (totalUniqueFullyMigratedCount === totalUniqueInstanceCount || totalUniquePartiallyMigratedCount === totalUniqueInstanceCount);
-    const internalCollectionOn = totalUniquePartiallyMigratedCount > 0;
-    if (hasInstances && (!allMonitoredByMetricbeat || internalCollectionOn)) {
-      let tooltipText = null;
-
-      if (!allMonitoredByMetricbeat) {
-        tooltipText = i18n.translate('xpack.monitoring.cluster.overview.beatsPanel.setupModeNodesTooltip.oneInternal', {
-          defaultMessage: `There's at least one instance that isn't being monitored using Metricbeat. Click the flag
-          icon to visit the instances listing page and find out more information about the status of each instance.`
-        });
-      }
-      else if (internalCollectionOn) {
-        tooltipText = i18n.translate('xpack.monitoring.cluster.overview.beatsPanel.setupModeNodesTooltip.disableInternal', {
-          defaultMessage: `All instances are being monitored using Metricbeat but internal collection still needs to be turned
-          off. Click the flag icon to visit the instances listing page and disable internal collection.`
-        });
-      }
-
-      setupModeInstancesData = (
-        <EuiFlexItem grow={false}>
-          <EuiToolTip
-            position="top"
-            content={tooltipText}
-          >
-            <EuiLink onClick={goToInstances}>
-              <EuiIcon type="flag" color="warning"/>
-            </EuiLink>
-          </EuiToolTip>
-        </EuiFlexItem>
-      );
-    }
-  }
+  const setupModeData = get(setupMode.data, 'beats');
+  const setupModeTooltip = setupMode && setupMode.enabled
+    ? (
+      <SetupModeTooltip
+        setupModeData={setupModeData}
+        productName={BEATS_SYSTEM_ID}
+        badgeClickAction={goToInstances}
+      />
+    )
+    : null;
 
   const beatTypes = props.beats.types.map((beat, index) => {
     return [
@@ -111,7 +79,7 @@ export function BeatsPanel(props) {
               <h3>
                 <DisabledIfNoDataAndInSetupModeLink
                   setupModeEnabled={setupMode.enabled}
-                  setupModeData={setupModeBeatsData}
+                  setupModeData={setupModeData}
                   onClick={goToBeats}
                   aria-label={i18n.translate('xpack.monitoring.cluster.overview.beatsPanel.overviewLinkAriaLabel', {
                     defaultMessage: 'Beats Overview'
@@ -174,7 +142,7 @@ export function BeatsPanel(props) {
                   </h3>
                 </EuiTitle>
               </EuiFlexItem>
-              {setupModeInstancesData}
+              {setupModeTooltip}
             </EuiFlexGroup>
             <EuiHorizontalRule margin="m" />
             <EuiDescriptionList type="column">
diff --git a/x-pack/legacy/plugins/monitoring/public/components/cluster/overview/elasticsearch_panel.js b/x-pack/legacy/plugins/monitoring/public/components/cluster/overview/elasticsearch_panel.js
index 3f45d6e07297ca..9bf18adf50069f 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/cluster/overview/elasticsearch_panel.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/cluster/overview/elasticsearch_panel.js
@@ -27,12 +27,13 @@ import {
   EuiBadge,
   EuiToolTip,
   EuiFlexGroup,
-  EuiIcon
 } from '@elastic/eui';
 import { LicenseText } from './license_text';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { Reason } from '../../logs/reason';
+import { SetupModeTooltip } from '../../setup_mode/tooltip';
+import { ELASTICSEARCH_SYSTEM_ID } from '../../../../common/constants';
 
 const calculateShards = shards => {
   const total = get(shards, 'total', 0);
@@ -160,47 +161,16 @@ export function ElasticsearchPanel(props) {
 
   const licenseText = <LicenseText license={props.license} showLicenseExpiration={props.showLicenseExpiration} />;
 
-  const setupModeElasticsearchData = get(setupMode.data, 'elasticsearch');
-  let setupModeNodesData = null;
-  if (setupMode.enabled && setupModeElasticsearchData) {
-    const {
-      totalUniqueInstanceCount,
-      totalUniqueFullyMigratedCount,
-      totalUniquePartiallyMigratedCount
-    } = setupModeElasticsearchData;
-    const allMonitoredByMetricbeat = totalUniqueInstanceCount > 0 &&
-      (totalUniqueFullyMigratedCount === totalUniqueInstanceCount || totalUniquePartiallyMigratedCount === totalUniqueInstanceCount);
-    const internalCollectionOn = totalUniquePartiallyMigratedCount > 0;
-    if (!allMonitoredByMetricbeat || internalCollectionOn) {
-      let tooltipText = null;
-
-      if (!allMonitoredByMetricbeat) {
-        tooltipText = i18n.translate('xpack.monitoring.cluster.overview.elasticsearchPanel.setupModeNodesTooltip.oneInternal', {
-          defaultMessage: `There's at least one node that isn't being monitored using Metricbeat. Click the flag icon to visit the nodes
-          listing page and find out more information about the status of each node.`
-        });
-      }
-      else if (internalCollectionOn) {
-        tooltipText = i18n.translate('xpack.monitoring.cluster.overview.elasticsearchPanel.setupModeNodesTooltip.disableInternal', {
-          defaultMessage: `All nodes are being monitored using Metricbeat but internal collection still needs to be turned off. Click the
-          flag icon to visit the nodes listing page and disable internal collection.`
-        });
-      }
-
-      setupModeNodesData = (
-        <EuiFlexItem grow={false}>
-          <EuiToolTip
-            position="top"
-            content={tooltipText}
-          >
-            <EuiLink onClick={goToNodes}>
-              <EuiIcon type="flag" color="warning"/>
-            </EuiLink>
-          </EuiToolTip>
-        </EuiFlexItem>
-      );
-    }
-  }
+  const setupModeData = get(setupMode.data, 'elasticsearch');
+  const setupModeTooltip = setupMode && setupMode.enabled
+    ? (
+      <SetupModeTooltip
+        setupModeData={setupModeData}
+        productName={ELASTICSEARCH_SYSTEM_ID}
+        badgeClickAction={goToNodes}
+      />
+    )
+    : null;
 
   const showMlJobs = () => {
     // if license doesn't support ML, then `ml === null`
@@ -211,7 +181,7 @@ export function ElasticsearchPanel(props) {
           <EuiDescriptionListTitle>
             <DisabledIfNoDataAndInSetupModeLink
               setupModeEnabled={setupMode.enabled}
-              setupModeData={setupModeElasticsearchData}
+              setupModeData={setupModeData}
               href={gotoURL}
             >
               <FormattedMessage
@@ -223,7 +193,7 @@ export function ElasticsearchPanel(props) {
           <EuiDescriptionListDescription data-test-subj="esMlJobs">
             <DisabledIfNoDataAndInSetupModeLink
               setupModeEnabled={setupMode.enabled}
-              setupModeData={setupModeElasticsearchData}
+              setupModeData={setupModeData}
               href={gotoURL}
             >
               {props.ml.jobs}
@@ -251,7 +221,7 @@ export function ElasticsearchPanel(props) {
               <h3>
                 <DisabledIfNoDataAndInSetupModeLink
                   setupModeEnabled={setupMode.enabled}
-                  setupModeData={setupModeElasticsearchData}
+                  setupModeData={setupModeData}
                   onClick={goToElasticsearch}
                   aria-label={i18n.translate('xpack.monitoring.cluster.overview.esPanel.overviewLinkAriaLabel', {
                     defaultMessage: 'Elasticsearch Overview'
@@ -314,7 +284,7 @@ export function ElasticsearchPanel(props) {
                   </h3>
                 </EuiTitle>
               </EuiFlexItem>
-              {setupModeNodesData}
+              {setupModeTooltip}
             </EuiFlexGroup>
             <EuiHorizontalRule margin="m" />
             <EuiDescriptionList type="column">
@@ -353,7 +323,7 @@ export function ElasticsearchPanel(props) {
               <h3>
                 <DisabledIfNoDataAndInSetupModeLink
                   setupModeEnabled={setupMode.enabled}
-                  setupModeData={setupModeElasticsearchData}
+                  setupModeData={setupModeData}
                   onClick={goToIndices}
                   data-test-subj="esNumberOfIndices"
                   aria-label={i18n.translate('xpack.monitoring.cluster.overview.esPanel.indicesCountLinkAriaLabel', {
@@ -420,7 +390,7 @@ export function ElasticsearchPanel(props) {
               <h3>
                 <DisabledIfNoDataAndInSetupModeLink
                   setupModeEnabled={setupMode.enabled}
-                  setupModeData={setupModeElasticsearchData}
+                  setupModeData={setupModeData}
                   onClick={goToElasticsearch}
                   aria-label={i18n.translate('xpack.monitoring.cluster.overview.esPanel.logsLinkAriaLabel', {
                     defaultMessage: 'Elasticsearch Logs'
diff --git a/x-pack/legacy/plugins/monitoring/public/components/cluster/overview/kibana_panel.js b/x-pack/legacy/plugins/monitoring/public/components/cluster/overview/kibana_panel.js
index 77dfa35072c26f..91ec34087817cc 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/cluster/overview/kibana_panel.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/cluster/overview/kibana_panel.js
@@ -19,11 +19,11 @@ import {
   EuiDescriptionListTitle,
   EuiDescriptionListDescription,
   EuiHorizontalRule,
-  EuiIcon,
-  EuiToolTip
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
+import { SetupModeTooltip } from '../../setup_mode/tooltip';
+import { KIBANA_SYSTEM_ID } from '../../../../common/constants';
 
 export function KibanaPanel(props) {
   const setupMode = props.setupMode;
@@ -39,47 +39,16 @@ export function KibanaPanel(props) {
   const goToKibana = () => props.changeUrl('kibana');
   const goToInstances = () => props.changeUrl('kibana/instances');
 
-  const setupModeKibanaData = get(setupMode.data, 'kibana');
-  let setupModeInstancesData = null;
-  if (setupMode.enabled && setupMode.data) {
-    const {
-      totalUniqueInstanceCount,
-      totalUniqueFullyMigratedCount,
-      totalUniquePartiallyMigratedCount
-    } = setupModeKibanaData;
-    const allMonitoredByMetricbeat = totalUniqueInstanceCount > 0 &&
-      (totalUniqueFullyMigratedCount === totalUniqueInstanceCount || totalUniquePartiallyMigratedCount === totalUniqueInstanceCount);
-    const internalCollectionOn = totalUniquePartiallyMigratedCount > 0;
-    if (!allMonitoredByMetricbeat || internalCollectionOn) {
-      let tooltipText = null;
-
-      if (!allMonitoredByMetricbeat) {
-        tooltipText = i18n.translate('xpack.monitoring.cluster.overview.kibanaPanel.setupModeNodesTooltip.oneInternal', {
-          defaultMessage: `There's at least one instance that isn't being monitored using Metricbeat. Click the flag
-          icon to visit the instances listing page and find out more information about the status of each instance.`
-        });
-      }
-      else if (internalCollectionOn) {
-        tooltipText = i18n.translate('xpack.monitoring.cluster.overview.kibanaPanel.setupModeNodesTooltip.disableInternal', {
-          defaultMessage: `All instances are being monitored using Metricbeat but internal collection still needs to be turned
-          off. Click the flag icon to visit the instances listing page and disable internal collection.`
-        });
-      }
-
-      setupModeInstancesData = (
-        <EuiFlexItem grow={false}>
-          <EuiToolTip
-            position="top"
-            content={tooltipText}
-          >
-            <EuiLink onClick={goToInstances}>
-              <EuiIcon type="flag" color="warning"/>
-            </EuiLink>
-          </EuiToolTip>
-        </EuiFlexItem>
-      );
-    }
-  }
+  const setupModeData = get(setupMode.data, 'kibana');
+  const setupModeTooltip = setupMode && setupMode.enabled
+    ? (
+      <SetupModeTooltip
+        setupModeData={setupModeData}
+        productName={KIBANA_SYSTEM_ID}
+        badgeClickAction={goToInstances}
+      />
+    )
+    : null;
 
   return (
     <ClusterItemContainer
@@ -97,7 +66,7 @@ export function KibanaPanel(props) {
               <h3>
                 <DisabledIfNoDataAndInSetupModeLink
                   setupModeEnabled={setupMode.enabled}
-                  setupModeData={setupModeKibanaData}
+                  setupModeData={setupModeData}
                   onClick={goToKibana}
                   aria-label={i18n.translate('xpack.monitoring.cluster.overview.kibanaPanel.overviewLinkAriaLabel', {
                     defaultMessage: 'Kibana Overview'
@@ -164,7 +133,7 @@ export function KibanaPanel(props) {
                   </h3>
                 </EuiTitle>
               </EuiFlexItem>
-              {setupModeInstancesData}
+              {setupModeTooltip}
             </EuiFlexGroup>
             <EuiHorizontalRule margin="m" />
             <EuiDescriptionList type="column">
diff --git a/x-pack/legacy/plugins/monitoring/public/components/cluster/overview/logstash_panel.js b/x-pack/legacy/plugins/monitoring/public/components/cluster/overview/logstash_panel.js
index ff647c1c219aa4..1033f178b7010c 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/cluster/overview/logstash_panel.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/cluster/overview/logstash_panel.js
@@ -7,7 +7,7 @@
 import React from 'react';
 import { formatNumber } from 'plugins/monitoring/lib/format_number';
 import { ClusterItemContainer, BytesPercentageUsage, DisabledIfNoDataAndInSetupModeLink } from './helpers';
-import { LOGSTASH } from '../../../../common/constants';
+import { LOGSTASH, LOGSTASH_SYSTEM_ID } from '../../../../common/constants';
 
 import {
   EuiFlexGrid,
@@ -21,12 +21,11 @@ import {
   EuiDescriptionListDescription,
   EuiHorizontalRule,
   EuiIconTip,
-  EuiToolTip,
-  EuiIcon
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import { get } from 'lodash';
+import { SetupModeTooltip } from '../../setup_mode/tooltip';
 
 export function LogstashPanel(props) {
   const { setupMode } = props;
@@ -42,48 +41,16 @@ export function LogstashPanel(props) {
   const goToNodes = () => props.changeUrl('logstash/nodes');
   const goToPipelines = () => props.changeUrl('logstash/pipelines');
 
-  const setupModeLogstashData = get(setupMode.data, 'logstash');
-  let setupModeInstancesData = null;
-  if (setupMode.enabled && setupMode.data) {
-    const {
-      totalUniqueInstanceCount,
-      totalUniqueFullyMigratedCount,
-      totalUniquePartiallyMigratedCount
-    } = setupModeLogstashData;
-    const hasInstances = totalUniqueInstanceCount > 0 || get(setupModeLogstashData, 'detected.mightExist', false);
-    const allMonitoredByMetricbeat = totalUniqueInstanceCount > 0 &&
-      (totalUniqueFullyMigratedCount === totalUniqueInstanceCount || totalUniquePartiallyMigratedCount === totalUniqueInstanceCount);
-    const internalCollectionOn = totalUniquePartiallyMigratedCount > 0;
-    if (hasInstances && (!allMonitoredByMetricbeat || internalCollectionOn)) {
-      let tooltipText = null;
-
-      if (!allMonitoredByMetricbeat) {
-        tooltipText = i18n.translate('xpack.monitoring.cluster.overview.logstashPanel.setupModeNodesTooltip.oneInternal', {
-          defaultMessage: `There's at least one node that isn't being monitored using Metricbeat. Click the flag
-          icon to visit the nodes listing page and find out more information about the status of each node.`
-        });
-      }
-      else if (internalCollectionOn) {
-        tooltipText = i18n.translate('xpack.monitoring.cluster.overview.logstashPanel.setupModeNodesTooltip.disableInternal', {
-          defaultMessage: `All nodes are being monitored using Metricbeat but internal collection still needs to be turned
-          off. Click the flag icon to visit the nodes listing page and disable internal collection.`
-        });
-      }
-
-      setupModeInstancesData = (
-        <EuiFlexItem grow={false}>
-          <EuiToolTip
-            position="top"
-            content={tooltipText}
-          >
-            <EuiLink onClick={goToNodes}>
-              <EuiIcon type="flag" color="warning"/>
-            </EuiLink>
-          </EuiToolTip>
-        </EuiFlexItem>
-      );
-    }
-  }
+  const setupModeData = get(setupMode.data, 'logstash');
+  const setupModeTooltip = setupMode && setupMode.enabled
+    ? (
+      <SetupModeTooltip
+        setupModeData={setupModeData}
+        productName={LOGSTASH_SYSTEM_ID}
+        badgeClickAction={goToNodes}
+      />
+    )
+    : null;
 
   return (
     <ClusterItemContainer
@@ -100,7 +67,7 @@ export function LogstashPanel(props) {
               <h3>
                 <DisabledIfNoDataAndInSetupModeLink
                   setupModeEnabled={setupMode.enabled}
-                  setupModeData={setupModeLogstashData}
+                  setupModeData={setupModeData}
                   onClick={goToLogstash}
                   aria-label={i18n.translate('xpack.monitoring.cluster.overview.logstashPanel.overviewLinkAriaLabel', {
                     defaultMessage: 'Logstash Overview'
@@ -163,7 +130,7 @@ export function LogstashPanel(props) {
                   </h3>
                 </EuiTitle>
               </EuiFlexItem>
-              {setupModeInstancesData}
+              {setupModeTooltip}
             </EuiFlexGroup>
             <EuiHorizontalRule margin="m" />
             <EuiDescriptionList type="column">
@@ -198,7 +165,7 @@ export function LogstashPanel(props) {
                   <h3>
                     <DisabledIfNoDataAndInSetupModeLink
                       setupModeEnabled={setupMode.enabled}
-                      setupModeData={setupModeLogstashData}
+                      setupModeData={setupModeData}
                       onClick={goToPipelines}
                       data-test-subj="lsPipelines"
                       aria-label={i18n.translate(
diff --git a/x-pack/legacy/plugins/monitoring/public/components/elasticsearch/cluster_status/index.js b/x-pack/legacy/plugins/monitoring/public/components/elasticsearch/cluster_status/index.js
index 6c5562e22debbc..b9fb2c0b9f9629 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/elasticsearch/cluster_status/index.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/elasticsearch/cluster_status/index.js
@@ -47,14 +47,14 @@ export function ClusterStatus({ stats }) {
     },
     {
       label: i18n.translate('xpack.monitoring.elasticsearch.clusterStatus.totalShardsLabel', {
-        defaultMessage: 'Total Shards'
+        defaultMessage: 'Total shards'
       }),
       value: totalShards,
       'data-test-subj': 'totalShards'
     },
     {
       label: i18n.translate('xpack.monitoring.elasticsearch.clusterStatus.unassignedShardsLabel', {
-        defaultMessage: 'Unassigned Shards'
+        defaultMessage: 'Unassigned shards'
       }),
       value: unassignedShards,
       'data-test-subj': 'unassignedShards'
diff --git a/x-pack/legacy/plugins/monitoring/public/components/elasticsearch/index_detail_status/index.js b/x-pack/legacy/plugins/monitoring/public/components/elasticsearch/index_detail_status/index.js
index ecdf4eb7f9455a..7867bc869c894a 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/elasticsearch/index_detail_status/index.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/elasticsearch/index_detail_status/index.js
@@ -44,7 +44,7 @@ export function IndexDetailStatus({ stats }) {
     },
     {
       label: i18n.translate('xpack.monitoring.elasticsearch.indexDetailStatus.totalShardsTitle', {
-        defaultMessage: 'Total Shards'
+        defaultMessage: 'Total shards'
       }),
       value: formatMetric(totalShards, 'int_commas'),
       'data-test-subj': 'totalShards'
@@ -53,7 +53,7 @@ export function IndexDetailStatus({ stats }) {
       label: i18n.translate(
         'xpack.monitoring.elasticsearch.indexDetailStatus.unassignedShardsTitle',
         {
-          defaultMessage: 'Unassigned Shards'
+          defaultMessage: 'Unassigned shards'
         }
       ),
       value: formatMetric(unassignedShards, 'int_commas'),
diff --git a/x-pack/legacy/plugins/monitoring/public/components/elasticsearch/nodes/nodes.js b/x-pack/legacy/plugins/monitoring/public/components/elasticsearch/nodes/nodes.js
index 1f5d2712418acd..69b2add3c21f45 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/elasticsearch/nodes/nodes.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/elasticsearch/nodes/nodes.js
@@ -10,6 +10,7 @@ import { extractIp } from '../../../lib/extract_ip'; // TODO this is only used f
 import { ClusterStatus } from '../cluster_status';
 import { EuiMonitoringTable } from '../../table';
 import { MetricCell, OfflineCell } from './cells';
+import { SetupModeBadge } from '../../setup_mode/badge';
 import {
   EuiLink,
   EuiToolTip,
@@ -24,9 +25,11 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import _ from 'lodash';
+import { ELASTICSEARCH_SYSTEM_ID } from '../../../../common/constants';
+import { ListingCallOut } from '../../setup_mode/listing_callout';
 
 const getSortHandler = (type) => (item) => _.get(item, [type, 'summary', 'lastVal']);
-const getColumns = (showCgroupMetricsElasticsearch, setupMode) => {
+const getColumns = (showCgroupMetricsElasticsearch, setupMode, clusterUuid) => {
   const cols = [];
 
   const cpuUsageColumnTitle = i18n.translate('xpack.monitoring.elasticsearch.nodes.cpuUsageColumnTitle', {
@@ -50,9 +53,26 @@ const getColumns = (showCgroupMetricsElasticsearch, setupMode) => {
         </EuiLink>
       );
 
+      let setupModeStatus = null;
       if (setupMode && setupMode.enabled) {
         const list = _.get(setupMode, 'data.byUuid', {});
         const status = list[node.resolver] || {};
+        const instance = {
+          uuid: node.resolver,
+          name: node.name
+        };
+
+        setupModeStatus = (
+          <div className="monTableCell__setupModeStatus">
+            <SetupModeBadge
+              setupMode={setupMode}
+              status={status}
+              instance={instance}
+              productName={ELASTICSEARCH_SYSTEM_ID}
+              clusterUuid={clusterUuid}
+            />
+          </div>
+        );
         if (status.isNetNewUser) {
           nameLink = value;
         }
@@ -77,6 +97,7 @@ const getColumns = (showCgroupMetricsElasticsearch, setupMode) => {
           <div className="monTableCell__transportAddress">
             {extractIp(node.transport_address)}
           </div>
+          {setupModeStatus}
         </div>
       );
     }
@@ -223,7 +244,7 @@ const getColumns = (showCgroupMetricsElasticsearch, setupMode) => {
 
 export function ElasticsearchNodes({ clusterStatus, showCgroupMetricsElasticsearch, ...props }) {
   const { sorting, pagination, onTableChange, clusterUuid, setupMode } = props;
-  const columns = getColumns(showCgroupMetricsElasticsearch, setupMode);
+  const columns = getColumns(showCgroupMetricsElasticsearch, setupMode, clusterUuid);
 
   // Merge the nodes data with the setup data if enabled
   const nodes = props.nodes || [];
@@ -238,70 +259,89 @@ export function ElasticsearchNodes({ clusterStatus, showCgroupMetricsElasticsear
 
     nodes.push(...Object.entries(setupMode.data.byUuid)
       .reduce((nodes, [nodeUuid, instance]) => {
-        if (!nodesByUuid[nodeUuid]) {
+        if (!nodesByUuid[nodeUuid] && instance.node) {
           nodes.push(instance.node);
         }
         return nodes;
       }, []));
   }
 
-  let netNewUserMessage = null;
-  let disableInternalCollectionForMigrationMessage = null;
-  if (setupMode.data) {
-    // Think net new user scenario
-    const hasInstances = setupMode.data.totalUniqueInstanceCount > 0;
-    if (hasInstances && setupMode.data.totalUniquePartiallyMigratedCount === setupMode.data.totalUniqueInstanceCount) {
-      const finishMigrationAction = _.get(setupMode.meta, 'liveClusterUuid') === clusterUuid
-        ? setupMode.shortcutToFinishMigration
-        : setupMode.openFlyout;
+  let setupModeCallout = null;
+  if (setupMode.enabled && setupMode.data) {
+    setupModeCallout = (
+      <ListingCallOut
+        setupModeData={setupMode.data}
+        useNodeIdentifier
+        productName={ELASTICSEARCH_SYSTEM_ID}
+        customRenderer={() => {
+          const customRenderResponse = {
+            shouldRender: false,
+            componentToRender: null
+          };
 
-      disableInternalCollectionForMigrationMessage = (
-        <Fragment>
-          <EuiCallOut
-            title={i18n.translate('xpack.monitoring.elasticsearch.nodes.metribeatMigration.disableInternalCollectionTitle', {
-              defaultMessage: 'Disable internal collection to finish the migration',
-            })}
-            color="warning"
-            iconType="help"
-          >
-            <p>
-              {i18n.translate('xpack.monitoring.elasticsearch.nodes.metribeatMigration.disableInternalCollectionDescription', {
-                defaultMessage: `All of your Elasticsearch servers are monitored using Metricbeat,
-                but you need to disable internal collection to finish the migration.`
-              })}
-            </p>
-            <EuiButton onClick={finishMigrationAction} size="s" color="warning" fill>
-              {i18n.translate('xpack.monitoring.elasticsearch.nodes.metribeatMigration.disableInternalCollectionMigrationButtonLabel', {
-                defaultMessage: 'Disable and finish migration'
-              })}
-            </EuiButton>
-          </EuiCallOut>
-          <EuiSpacer size="m"/>
-        </Fragment>
-      );
-    }
-    else if (!hasInstances) {
-      netNewUserMessage = (
-        <Fragment>
-          <EuiCallOut
-            title={i18n.translate('xpack.monitoring.elasticsearch.nodes.metribeatMigration.netNewUserTitle', {
-              defaultMessage: 'No monitoring data detected',
-            })}
-            color="danger"
-            iconType="cross"
-          >
-            <p>
-              {i18n.translate('xpack.monitoring.elasticsearch.nodes.metribeatMigration.netNewUserDescription', {
-                defaultMessage: `We did not detect any monitoring data, but we did detect the following Elasticsearch nodes.
-                Each detected node is listed below along with a Setup button. Clicking this button will guide you through
-                the process of enabling monitoring for each node.`
-              })}
-            </p>
-          </EuiCallOut>
-          <EuiSpacer size="m"/>
-        </Fragment>
-      );
-    }
+          const isNetNewUser = setupMode.data.totalUniqueInstanceCount === 0;
+          const hasNoInstances = setupMode.data.totalUniqueInternallyCollectedCount === 0
+            && setupMode.data.totalUniqueFullyMigratedCount === 0
+            && setupMode.data.totalUniquePartiallyMigratedCount === 0;
+
+          if (isNetNewUser || hasNoInstances) {
+            customRenderResponse.shouldRender = true;
+            customRenderResponse.componentToRender = (
+              <Fragment>
+                <EuiCallOut
+                  title={i18n.translate('xpack.monitoring.elasticsearch.nodes.metricbeatMigration.detectedNodeTitle', {
+                    defaultMessage: 'Elasticsearch node detected',
+                  })}
+                  color={setupMode.data.totalUniqueInstanceCount > 0 ? 'danger' : 'warning'}
+                  iconType="flag"
+                >
+                  <p>
+                    {i18n.translate('xpack.monitoring.elasticsearch.nodes.metricbeatMigration.detectedNodeDescription', {
+                      defaultMessage: `The following nodes are not monitored. Click 'Monitor with Metricbeat' below to start monitoring.`,
+                    })}
+                  </p>
+                </EuiCallOut>
+                <EuiSpacer size="m"/>
+              </Fragment>
+            );
+          }
+          else if (setupMode.data.totalUniquePartiallyMigratedCount === setupMode.data.totalUniqueInstanceCount) {
+            const finishMigrationAction = _.get(setupMode.meta, 'liveClusterUuid') === clusterUuid
+              ? setupMode.shortcutToFinishMigration
+              : setupMode.openFlyout;
+
+            customRenderResponse.shouldRender = true;
+            customRenderResponse.componentToRender = (
+              <Fragment>
+                <EuiCallOut
+                  title={i18n.translate('xpack.monitoring.elasticsearch.nodes.metricbeatMigration.disableInternalCollectionTitle', {
+                    defaultMessage: 'Metricbeat is now monitoring your Elasticsearch nodes',
+                  })}
+                  color="warning"
+                  iconType="flag"
+                >
+                  <p>
+                    {i18n.translate('xpack.monitoring.elasticsearch.nodes.metricbeatMigration.disableInternalCollectionDescription', {
+                      defaultMessage: `Disable self monitoring to finish the migration.`
+                    })}
+                  </p>
+                  <EuiButton onClick={finishMigrationAction} size="s" color="warning" fill>
+                    {i18n.translate(
+                      'xpack.monitoring.elasticsearch.nodes.metricbeatMigration.disableInternalCollectionMigrationButtonLabel', {
+                        defaultMessage: 'Disable self monitoring'
+                      }
+                    )}
+                  </EuiButton>
+                </EuiCallOut>
+                <EuiSpacer size="m"/>
+              </Fragment>
+            );
+          }
+
+          return customRenderResponse;
+        }}
+      />
+    );
   }
 
   function renderClusterStatus() {
@@ -322,8 +362,7 @@ export function ElasticsearchNodes({ clusterStatus, showCgroupMetricsElasticsear
     <EuiPage>
       <EuiPageBody>
         {renderClusterStatus()}
-        {disableInternalCollectionForMigrationMessage}
-        {netNewUserMessage}
+        {setupModeCallout}
         <EuiPageContent>
           <EuiMonitoringTable
             className="elasticsearchNodesTable"
@@ -332,11 +371,7 @@ export function ElasticsearchNodes({ clusterStatus, showCgroupMetricsElasticsear
             sorting={sorting}
             pagination={pagination}
             setupMode={setupMode}
-            uuidField="resolver"
-            nameField="name"
-            setupNewButtonLabel={i18n.translate('xpack.monitoring.elasticsearch.metricbeatMigration.setupNewButtonLabel', {
-              defaultMessage: 'Setup monitoring for new Elasticsearch node'
-            })}
+            productName={ELASTICSEARCH_SYSTEM_ID}
             search={{
               box: {
                 incremental: true,
diff --git a/x-pack/legacy/plugins/monitoring/public/components/kibana/instances/instances.js b/x-pack/legacy/plugins/monitoring/public/components/kibana/instances/instances.js
index 3fbc9287e7ba33..9e2134baee3685 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/kibana/instances/instances.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/kibana/instances/instances.js
@@ -12,7 +12,7 @@ import {
   EuiPanel,
   EuiSpacer,
   EuiLink,
-  EuiCallOut,
+  EuiCallOut
 } from '@elastic/eui';
 import { capitalize, get } from 'lodash';
 import { ClusterStatus } from '../cluster_status';
@@ -22,6 +22,9 @@ import { StatusIcon } from 'plugins/monitoring/components/status_icon';
 import { formatMetric, formatNumber } from '../../../lib/format_number';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { SetupModeBadge } from '../../setup_mode/badge';
+import { KIBANA_SYSTEM_ID } from '../../../../common/constants';
+import { ListingCallOut } from '../../setup_mode/listing_callout';
 
 const getColumns = (kbnUrl, scope, setupMode) => {
   const columns = [
@@ -31,25 +34,50 @@ const getColumns = (kbnUrl, scope, setupMode) => {
       }),
       field: 'name',
       render: (name, kibana) => {
+        let setupModeStatus = null;
         if (setupMode && setupMode.enabled) {
           const list = get(setupMode, 'data.byUuid', {});
-          const status = list[get(kibana, 'kibana.uuid')] || {};
+          const uuid = get(kibana, 'kibana.uuid');
+          const status = list[uuid] || {};
+          const instance = {
+            uuid,
+            name: kibana.name
+          };
+
+          setupModeStatus = (
+            <div className="monTableCell__setupModeStatus">
+              <SetupModeBadge
+                setupMode={setupMode}
+                status={status}
+                instance={instance}
+                productName={KIBANA_SYSTEM_ID}
+              />
+            </div>
+          );
           if (status.isNetNewUser) {
-            return name;
+            return (
+              <div>
+                {name}
+                {setupModeStatus}
+              </div>
+            );
           }
         }
 
         return (
-          <EuiLink
-            onClick={() => {
-              scope.$evalAsync(() => {
-                kbnUrl.changePath(`/kibana/instances/${kibana.kibana.uuid}`);
-              });
-            }}
-            data-test-subj={`kibanaLink-${name}`}
-          >
-            { name }
-          </EuiLink>
+          <div>
+            <EuiLink
+              onClick={() => {
+                scope.$evalAsync(() => {
+                  kbnUrl.changePath(`/kibana/instances/${kibana.kibana.uuid}`);
+                });
+              }}
+              data-test-subj={`kibanaLink-${name}`}
+            >
+              { name }
+            </EuiLink>
+            {setupModeStatus}
+          </div>
         );
       }
     },
@@ -152,7 +180,7 @@ export class KibanaInstances extends PureComponent {
       onTableChange
     } = this.props;
 
-    let netNewUserMessage = null;
+    let setupModeCallOut = null;
     // Merge the instances data with the setup data if enabled
     const instances = this.props.instances || [];
     if (setupMode.enabled && setupMode.data) {
@@ -177,29 +205,45 @@ export class KibanaInstances extends PureComponent {
           return instances;
         }, []));
 
-      const hasInstances = setupMode.data.totalUniqueInstanceCount > 0;
-      if (!hasInstances) {
-        netNewUserMessage = (
-          <Fragment>
-            <EuiCallOut
-              title={i18n.translate('xpack.monitoring.kibana.nodes.metribeatMigration.netNewUserTitle', {
-                defaultMessage: 'No monitoring data detected',
-              })}
-              color="danger"
-              iconType="cross"
-            >
-              <p>
-                {i18n.translate('xpack.monitoring.kibana.nodes.metribeatMigration.netNewUserDescription', {
-                  defaultMessage: `We did not detect any monitoring data, but we did detect the following Kibana instance.
-                  This detected instance is listed below along with a Setup button. Clicking this button will guide you through
-                  the process of enabling monitoring for this instance.`
-                })}
-              </p>
-            </EuiCallOut>
-            <EuiSpacer size="m"/>
-          </Fragment>
-        );
-      }
+      setupModeCallOut = (
+        <ListingCallOut
+          setupModeData={setupMode.data}
+          useNodeIdentifier={false}
+          productName={KIBANA_SYSTEM_ID}
+          customRenderer={() => {
+            const customRenderResponse = {
+              shouldRender: false,
+              componentToRender: null
+            };
+
+            const hasInstances = setupMode.data.totalUniqueInstanceCount > 0;
+            if (!hasInstances) {
+              customRenderResponse.shouldRender = true;
+              customRenderResponse.componentToRender = (
+                <Fragment>
+                  <EuiCallOut
+                    title={i18n.translate('xpack.monitoring.kibana.instances.metricbeatMigration.detectedNodeTitle', {
+                      defaultMessage: 'Kibana instance detected',
+                    })}
+                    color="warning"
+                    iconType="flag"
+                  >
+                    <p>
+                      {i18n.translate('xpack.monitoring.kibana.instances.metricbeatMigration.detectedNodeDescription', {
+                        defaultMessage: `The following instances are not monitored.
+                        Click 'Monitor with Metricbeat' below to start monitoring.`,
+                      })}
+                    </p>
+                  </EuiCallOut>
+                  <EuiSpacer size="m"/>
+                </Fragment>
+              );
+            }
+
+            return customRenderResponse;
+          }}
+        />
+      );
     }
 
     const dataFlattened = instances.map(item => ({
@@ -216,7 +260,7 @@ export class KibanaInstances extends PureComponent {
             <ClusterStatus stats={clusterStatus} />
           </EuiPanel>
           <EuiSpacer size="m" />
-          {netNewUserMessage}
+          {setupModeCallOut}
           <EuiPageContent>
             <EuiMonitoringTable
               className="kibanaInstancesTable"
@@ -225,11 +269,7 @@ export class KibanaInstances extends PureComponent {
               sorting={sorting}
               pagination={pagination}
               setupMode={setupMode}
-              uuidField="kibana.uuid"
-              nameField="name"
-              setupNewButtonLabel={i18n.translate('xpack.monitoring.kibana.metricbeatMigration.setupNewButtonLabel', {
-                defaultMessage: 'Setup monitoring for new Kibana instance'
-              })}
+              productName={KIBANA_SYSTEM_ID}
               search={{
                 box: {
                   incremental: true,
diff --git a/x-pack/legacy/plugins/monitoring/public/components/logs/logs.js b/x-pack/legacy/plugins/monitoring/public/components/logs/logs.js
index 8a5e067a8a93ec..c59a3d595b14fc 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/logs/logs.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/logs/logs.js
@@ -50,7 +50,7 @@ const columns = [
     field: 'timestamp',
     name: columnTimestampTitle,
     width: '12%',
-    render: timestamp => formatDateTimeLocal(timestamp),
+    render: timestamp => formatDateTimeLocal(timestamp, true),
   },
   {
     field: 'level',
@@ -80,7 +80,7 @@ const clusterColumns = [
     field: 'timestamp',
     name: columnTimestampTitle,
     width: '12%',
-    render: timestamp => formatDateTimeLocal(timestamp),
+    render: timestamp => formatDateTimeLocal(timestamp, true),
   },
   {
     field: 'level',
diff --git a/x-pack/legacy/plugins/monitoring/public/components/logstash/listing/__snapshots__/listing.test.js.snap b/x-pack/legacy/plugins/monitoring/public/components/logstash/listing/__snapshots__/listing.test.js.snap
index 987505dda09bb0..edb7d139bb9352 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/logstash/listing/__snapshots__/listing.test.js.snap
+++ b/x-pack/legacy/plugins/monitoring/public/components/logstash/listing/__snapshots__/listing.test.js.snap
@@ -55,7 +55,7 @@ exports[`Listing should render with certain data pieces missing 1`] = `
       ],
     }
   }
-  nameField="name"
+  productName="logstash"
   rows={
     Array [
       Object {
@@ -82,7 +82,6 @@ exports[`Listing should render with certain data pieces missing 1`] = `
     }
   }
   setupMode={Object {}}
-  setupNewButtonLabel="Setup monitoring for new Logstash node"
   sorting={
     Object {
       "sort": Object {
@@ -93,7 +92,6 @@ exports[`Listing should render with certain data pieces missing 1`] = `
       },
     }
   }
-  uuidField="logstash.uuid"
 />
 `;
 
@@ -152,7 +150,7 @@ exports[`Listing should render with expected props 1`] = `
       ],
     }
   }
-  nameField="name"
+  productName="logstash"
   rows={
     Array [
       Object {
@@ -211,7 +209,6 @@ exports[`Listing should render with expected props 1`] = `
     }
   }
   setupMode={Object {}}
-  setupNewButtonLabel="Setup monitoring for new Logstash node"
   sorting={
     Object {
       "sort": Object {
@@ -222,6 +219,5 @@ exports[`Listing should render with expected props 1`] = `
       },
     }
   }
-  uuidField="logstash.uuid"
 />
 `;
diff --git a/x-pack/legacy/plugins/monitoring/public/components/logstash/listing/listing.js b/x-pack/legacy/plugins/monitoring/public/components/logstash/listing/listing.js
index bc51d6278c1421..94f83e4046c618 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/logstash/listing/listing.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/logstash/listing/listing.js
@@ -4,18 +4,22 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { PureComponent, Fragment } from 'react';
+import React, { PureComponent } from 'react';
 import { get } from 'lodash';
-import { EuiPage, EuiLink, EuiPageBody, EuiPageContent, EuiPanel, EuiSpacer, EuiCallOut } from '@elastic/eui';
+import { EuiPage, EuiLink, EuiPageBody, EuiPageContent, EuiPanel, EuiSpacer } from '@elastic/eui';
 import { formatPercentageUsage, formatNumber } from '../../../lib/format_number';
 import { ClusterStatus } from '..//cluster_status';
 import { EuiMonitoringTable } from '../../table';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
+import { LOGSTASH_SYSTEM_ID } from '../../../../common/constants';
+import { SetupModeBadge } from '../../setup_mode/badge';
+import { ListingCallOut } from '../../setup_mode/listing_callout';
 
 export class Listing extends PureComponent {
   getColumns() {
     const { kbnUrl, scope } = this.props.angular;
+    const setupMode = this.props.setupMode;
 
     return [
       {
@@ -24,24 +28,49 @@ export class Listing extends PureComponent {
         }),
         field: 'name',
         sortable: true,
-        render: (name, node) => (
-          <div>
-            <div>
-              <EuiLink
-                onClick={() => {
-                  scope.$evalAsync(() => {
-                    kbnUrl.changePath(`/logstash/node/${node.logstash.uuid}`);
-                  });
-                }}
-              >
-                {name}
-              </EuiLink>
-            </div>
+        render: (name, node) => {
+          let setupModeStatus = null;
+          if (setupMode && setupMode.enabled) {
+            const list = get(setupMode, 'data.byUuid', {});
+            const uuid = get(node, 'logstash.uuid');
+            const status = list[uuid] || {};
+            const instance = {
+              uuid,
+              name: node.name
+            };
+
+            setupModeStatus = (
+              <div className="monTableCell__setupModeStatus">
+                <SetupModeBadge
+                  setupMode={setupMode}
+                  status={status}
+                  instance={instance}
+                  productName={LOGSTASH_SYSTEM_ID}
+                />
+              </div>
+            );
+          }
+
+          return (
             <div>
-              {node.logstash.http_address}
+              <div>
+                <EuiLink
+                  onClick={() => {
+                    scope.$evalAsync(() => {
+                      kbnUrl.changePath(`/logstash/node/${node.logstash.uuid}`);
+                    });
+                  }}
+                >
+                  {name}
+                </EuiLink>
+              </div>
+              <div>
+                {node.logstash.http_address}
+              </div>
+              {setupModeStatus}
             </div>
-          </div>
-        )
+          );
+        }
       },
       {
         name: i18n.translate('xpack.monitoring.logstash.nodes.cpuUsageTitle', {
@@ -124,26 +153,14 @@ export class Listing extends PureComponent {
       version: get(item, 'logstash.version', 'N/A'),
     }));
 
-    let netNewUserMessage = null;
-    if (setupMode.enabled && setupMode.data && get(setupMode.data, 'detected.mightExist')) {
-      netNewUserMessage = (
-        <Fragment>
-          <EuiCallOut
-            title={i18n.translate('xpack.monitoring.logstash.nodes.metribeatMigration.netNewUserTitle', {
-              defaultMessage: 'No monitoring data detected',
-            })}
-            color="warning"
-            iconType="help"
-          >
-            <p>
-              {i18n.translate('xpack.monitoring.logstash.nodes.metribeatMigration.netNewUserDescription', {
-                defaultMessage: `Based on your indices, we think you might have a Logstash node. Click the 'Setup monitoring'
-                button below to start monitoring this node.`
-              })}
-            </p>
-          </EuiCallOut>
-          <EuiSpacer size="m"/>
-        </Fragment>
+    let setupModeCallOut = null;
+    if (setupMode.enabled && setupMode.data) {
+      setupModeCallOut = (
+        <ListingCallOut
+          setupModeData={setupMode.data}
+          useNodeIdentifier
+          productName={LOGSTASH_SYSTEM_ID}
+        />
       );
     }
 
@@ -154,17 +171,13 @@ export class Listing extends PureComponent {
             <ClusterStatus stats={stats} />
           </EuiPanel>
           <EuiSpacer size="m" />
-          {netNewUserMessage}
+          {setupModeCallOut}
           <EuiPageContent>
             <EuiMonitoringTable
               className="logstashNodesTable"
               rows={flattenedData}
               setupMode={setupMode}
-              uuidField="logstash.uuid"
-              nameField="name"
-              setupNewButtonLabel={i18n.translate('xpack.monitoring.logstash.metricbeatMigration.setupNewButtonLabel', {
-                defaultMessage: 'Setup monitoring for new Logstash node'
-              })}
+              productName={LOGSTASH_SYSTEM_ID}
               columns={columns}
               sorting={{
                 ...sorting,
diff --git a/x-pack/legacy/plugins/monitoring/public/components/logstash/pipeline_listing/pipeline_listing.js b/x-pack/legacy/plugins/monitoring/public/components/logstash/pipeline_listing/pipeline_listing.js
index 9dc336f24a40b4..ef306a9a2f06cd 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/logstash/pipeline_listing/pipeline_listing.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/logstash/pipeline_listing/pipeline_listing.js
@@ -11,7 +11,7 @@ import { EuiPage, EuiLink, EuiPageBody, EuiPageContent, EuiPanel, EuiSpacer, Eui
 import { formatMetric } from '../../../lib/format_number';
 import { ClusterStatus } from '../cluster_status';
 import { Sparkline } from 'plugins/monitoring/components/sparkline';
-import { EuiMonitoringTable } from '../../table';
+import { EuiMonitoringSSPTable } from '../../table';
 import { i18n } from '@kbn/i18n';
 
 export class PipelineListing extends Component {
@@ -137,6 +137,7 @@ export class PipelineListing extends Component {
       sorting,
       pagination,
       onTableChange,
+      fetchMoreData,
       upgradeMessage,
       className
     } = this.props;
@@ -151,31 +152,22 @@ export class PipelineListing extends Component {
           </EuiPanel>
           <EuiSpacer size="m" />
           <EuiPageContent>
-            <EuiMonitoringTable
+            <EuiMonitoringSSPTable
               className={className || 'logstashNodesTable'}
               rows={data}
               columns={columns}
-              sorting={{
-                ...sorting,
-                sort: {
-                  ...sorting.sort,
-                  field: 'id'
-                }
-              }}
+              sorting={sorting}
               message={upgradeMessage}
               pagination={pagination}
+              fetchMoreData={fetchMoreData}
               search={{
                 box: {
-                  incremental: true,
                   placeholder: i18n.translate('xpack.monitoring.logstash.filterPipelinesPlaceholder', {
                     defaultMessage: 'Filter Pipelines…'
                   })
                 },
               }}
               onTableChange={onTableChange}
-              executeQueryOptions={{
-                defaultFields: ['id']
-              }}
             />
           </EuiPageContent>
         </EuiPageBody>
diff --git a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/flyout/__snapshots__/flyout.test.js.snap b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/flyout/__snapshots__/flyout.test.js.snap
new file mode 100644
index 00000000000000..eec24b23c6e23d
--- /dev/null
+++ b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/flyout/__snapshots__/flyout.test.js.snap
@@ -0,0 +1,2217 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Flyout apm part one should render normally 1`] = `
+<EuiFlyout
+  aria-labelledby="flyoutTitle"
+  closeButtonAriaLabel="Closes this dialog"
+  hideCloseButton={false}
+  maxWidth={false}
+  onClose={[Function]}
+  ownFocus={false}
+  size="m"
+>
+  <EuiFlyoutHeader
+    hasBorder={true}
+  >
+    <EuiTitle
+      size="m"
+    >
+      <h2
+        id="flyoutTitle"
+      >
+        Monitor \`APM\` server with Metricbeat
+      </h2>
+    </EuiTitle>
+  </EuiFlyoutHeader>
+  <EuiFlyoutBody>
+    <EuiForm>
+      <EuiFormRow
+        describedByIds={Array []}
+        display="row"
+        fullWidth={true}
+        hasEmptyLabelSpace={false}
+        helpText="Typically a single URL. If multiple URLs, separate with a comma.
+                The running Metricbeat instance must be able to communicate with these Elasticsearch servers."
+        label="URL of monitoring cluster"
+        labelType="label"
+      >
+        <EuiFieldText
+          compressed={false}
+          fullWidth={true}
+          isLoading={false}
+          onChange={[Function]}
+          value="http://localhost:9200"
+        />
+      </EuiFormRow>
+    </EuiForm>
+  </EuiFlyoutBody>
+  <EuiFlyoutFooter
+    style={
+      Object {
+        "marginBottom": "64px",
+      }
+    }
+  >
+    <EuiFlexGroup
+      justifyContent="spaceBetween"
+    >
+      <EuiFlexItem
+        grow={false}
+      >
+        <EuiButtonEmpty
+          flush="left"
+          iconType="cross"
+          onClick={[Function]}
+        >
+          Close
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+      <EuiFlexItem
+        grow={false}
+      >
+        <EuiButton
+          fill={true}
+          iconSide="right"
+          iconType="sortRight"
+          isDisabled={false}
+          onClick={[Function]}
+          type="submit"
+        >
+          Next
+        </EuiButton>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </EuiFlyoutFooter>
+</EuiFlyout>
+`;
+
+exports[`Flyout apm part two should show instructions to disable internal collection 1`] = `
+<EuiFlyoutBody>
+  <EuiSteps
+    steps={
+      Array [
+        Object {
+          "children": <React.Fragment>
+            <EuiText>
+              <p>
+                <FormattedMessage
+                  defaultMessage="Add the following setting in the APM server's configuration file ({file}):"
+                  id="xpack.monitoring.metricbeatMigration.apmInstructions.disableInternalCollection.description"
+                  values={
+                    Object {
+                      "file": <Monospace>
+                        apm-server.yml
+                      </Monospace>,
+                    }
+                  }
+                />
+              </p>
+            </EuiText>
+            <EuiSpacer
+              size="s"
+            />
+            <EuiCodeBlock
+              isCopyable={true}
+              language="bash"
+            >
+              monitoring.enabled: false
+            </EuiCodeBlock>
+            <EuiSpacer
+              size="s"
+            />
+            <EuiText>
+              <p>
+                <FormattedMessage
+                  defaultMessage="You'll need to restart the APM server after making this change."
+                  id="xpack.monitoring.metricbeatMigration.apmInstructions.disableInternalCollection.note"
+                  values={Object {}}
+                />
+              </p>
+            </EuiText>
+          </React.Fragment>,
+          "title": "Disable self monitoring of the APM server's monitoring metrics",
+        },
+        Object {
+          "children": <EuiCallOut
+            color="warning"
+            size="s"
+            title="Data is still coming from self monitoring"
+          >
+            <p>
+              It can take up to 30 seconds to detect data.
+            </p>
+            <p>
+              Last self monitoring was 0 seconds ago.
+            </p>
+          </EuiCallOut>,
+          "status": "incomplete",
+          "title": "Migration status",
+        },
+      ]
+    }
+  />
+</EuiFlyoutBody>
+`;
+
+exports[`Flyout apm part two should show instructions to migrate to metricbeat 1`] = `
+<EuiFlyoutBody>
+  <EuiSteps
+    steps={
+      Array [
+        Object {
+          "children": <EuiText>
+            <p>
+              <EuiLink
+                color="primary"
+                href="https://www.elastic.co/guide/en/apm/metricbeat/current/metricbeat-installation.html"
+                target="_blank"
+                type="button"
+              >
+                <FormattedMessage
+                  defaultMessage="Follow the instructions here."
+                  id="xpack.monitoring.metricbeatMigration.apmInstructions.installMetricbeatLinkText"
+                  values={Object {}}
+                />
+              </EuiLink>
+            </p>
+          </EuiText>,
+          "title": "Install Metricbeat on the same server as the APM server",
+        },
+        Object {
+          "children": <React.Fragment>
+            <EuiCodeBlock
+              isCopyable={true}
+              language="bash"
+            >
+              metricbeat modules enable beat-xpack
+            </EuiCodeBlock>
+            <EuiSpacer
+              size="s"
+            />
+            <EuiText>
+              <p>
+                <FormattedMessage
+                  defaultMessage="By default the module will collect APM server monitoring metrics from http://localhost:5066. If the local APM server has a different address, you must specify it via the {hosts} setting in the {file} file."
+                  id="xpack.monitoring.metricbeatMigration.apmInstructions.enableMetricbeatModuleDescription"
+                  values={
+                    Object {
+                      "file": <Monospace>
+                        modules.d/beat-xpack.yml
+                      </Monospace>,
+                      "hosts": <Monospace>
+                        hosts
+                      </Monospace>,
+                    }
+                  }
+                />
+              </p>
+            </EuiText>
+            <React.Fragment>
+              <EuiSpacer
+                size="m"
+              />
+              <EuiCallOut
+                color="warning"
+                iconType="help"
+                title={
+                  <EuiText>
+                    <FormattedMessage
+                      defaultMessage="If security is enabled, {link} might be required."
+                      id="xpack.monitoring.metricbeatMigration.securitySetup"
+                      values={
+                        Object {
+                          "link": <React.Fragment>
+                             
+                            <EuiLink
+                              color="primary"
+                              href="https://www.elastic.co/guide/en/apm/reference/current/configuring-metricbeat.html"
+                              target="_blank"
+                              type="button"
+                            >
+                              <FormattedMessage
+                                defaultMessage="additional setup"
+                                id="xpack.monitoring.metricbeatMigration.securitySetupLinkText"
+                                values={Object {}}
+                              />
+                            </EuiLink>
+                          </React.Fragment>,
+                        }
+                      }
+                    />
+                  </EuiText>
+                }
+              />
+            </React.Fragment>
+          </React.Fragment>,
+          "title": "Enable and configure the Beat x-pack module in Metricbeat",
+        },
+        Object {
+          "children": <React.Fragment>
+            <EuiText>
+              <FormattedMessage
+                defaultMessage="Make these changes in your {file}."
+                id="xpack.monitoring.metricbeatMigration.apmInstructions.configureMetricbeatDescription"
+                values={
+                  Object {
+                    "file": <Monospace>
+                      metricbeat.yml
+                    </Monospace>,
+                  }
+                }
+              />
+            </EuiText>
+            <EuiSpacer
+              size="s"
+            />
+            <EuiCodeBlock
+              isCopyable={true}
+            >
+              output.elasticsearch:
+  hosts: ["http://localhost:9200"] ## Monitoring cluster
+
+  # Optional protocol and basic auth credentials.
+  #protocol: "https"
+  #username: "elastic"
+  #password: "changeme"
+
+            </EuiCodeBlock>
+            <React.Fragment>
+              <EuiSpacer
+                size="m"
+              />
+              <EuiCallOut
+                color="warning"
+                iconType="help"
+                title={
+                  <EuiText>
+                    <FormattedMessage
+                      defaultMessage="If security is enabled, {link} might be required."
+                      id="xpack.monitoring.metricbeatMigration.securitySetup"
+                      values={
+                        Object {
+                          "link": <React.Fragment>
+                             
+                            <EuiLink
+                              color="primary"
+                              href="https://www.elastic.co/guide/en/apm/reference/current/configuring-metricbeat.html"
+                              target="_blank"
+                              type="button"
+                            >
+                              <FormattedMessage
+                                defaultMessage="additional setup"
+                                id="xpack.monitoring.metricbeatMigration.securitySetupLinkText"
+                                values={Object {}}
+                              />
+                            </EuiLink>
+                          </React.Fragment>,
+                        }
+                      }
+                    />
+                  </EuiText>
+                }
+              />
+            </React.Fragment>
+          </React.Fragment>,
+          "title": "Configure Metricbeat to send to the monitoring cluster",
+        },
+        Object {
+          "children": <EuiText>
+            <p>
+              <EuiLink
+                color="primary"
+                href="https://www.elastic.co/guide/en/apm/metricbeat/current/metricbeat-starting.html"
+                target="_blank"
+                type="button"
+              >
+                <FormattedMessage
+                  defaultMessage="Follow the instructions here."
+                  id="xpack.monitoring.metricbeatMigration.apmInstructions.startMetricbeatLinkText"
+                  values={Object {}}
+                />
+              </EuiLink>
+            </p>
+          </EuiText>,
+          "title": "Start Metricbeat",
+        },
+        Object {
+          "children": <EuiCallOut
+            color="warning"
+            size="s"
+            title="No monitoring data detected, but we’ll continue checking."
+          />,
+          "status": "incomplete",
+          "title": "Migration status",
+        },
+      ]
+    }
+  />
+</EuiFlyoutBody>
+`;
+
+exports[`Flyout beats part one should render normally 1`] = `
+<EuiFlyout
+  aria-labelledby="flyoutTitle"
+  closeButtonAriaLabel="Closes this dialog"
+  hideCloseButton={false}
+  maxWidth={false}
+  onClose={[Function]}
+  ownFocus={false}
+  size="m"
+>
+  <EuiFlyoutHeader
+    hasBorder={true}
+  >
+    <EuiTitle
+      size="m"
+    >
+      <h2
+        id="flyoutTitle"
+      >
+        Monitor \`Beats\` instance with Metricbeat
+      </h2>
+    </EuiTitle>
+  </EuiFlyoutHeader>
+  <EuiFlyoutBody>
+    <EuiForm>
+      <EuiFormRow
+        describedByIds={Array []}
+        display="row"
+        fullWidth={true}
+        hasEmptyLabelSpace={false}
+        helpText="Typically a single URL. If multiple URLs, separate with a comma.
+                The running Metricbeat instance must be able to communicate with these Elasticsearch servers."
+        label="URL of monitoring cluster"
+        labelType="label"
+      >
+        <EuiFieldText
+          compressed={false}
+          fullWidth={true}
+          isLoading={false}
+          onChange={[Function]}
+          value="http://localhost:9200"
+        />
+      </EuiFormRow>
+    </EuiForm>
+  </EuiFlyoutBody>
+  <EuiFlyoutFooter
+    style={
+      Object {
+        "marginBottom": "64px",
+      }
+    }
+  >
+    <EuiFlexGroup
+      justifyContent="spaceBetween"
+    >
+      <EuiFlexItem
+        grow={false}
+      >
+        <EuiButtonEmpty
+          flush="left"
+          iconType="cross"
+          onClick={[Function]}
+        >
+          Close
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+      <EuiFlexItem
+        grow={false}
+      >
+        <EuiButton
+          fill={true}
+          iconSide="right"
+          iconType="sortRight"
+          isDisabled={false}
+          onClick={[Function]}
+          type="submit"
+        >
+          Next
+        </EuiButton>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </EuiFlyoutFooter>
+</EuiFlyout>
+`;
+
+exports[`Flyout beats part two should show instructions to disable internal collection 1`] = `
+<EuiFlyoutBody>
+  <EuiSteps
+    steps={
+      Array [
+        Object {
+          "children": <React.Fragment>
+            <EuiText>
+              <p>
+                <FormattedMessage
+                  defaultMessage="Add the following setting in {beatType}'s configuration file ({file}):"
+                  id="xpack.monitoring.metricbeatMigration.beatsInstructions.disableInternalCollection.description"
+                  values={
+                    Object {
+                      "beatType": "beat",
+                      "file": <Monospace>
+                        .yml
+                      </Monospace>,
+                    }
+                  }
+                />
+              </p>
+            </EuiText>
+            <EuiSpacer
+              size="s"
+            />
+            <EuiCodeBlock
+              isCopyable={true}
+              language="bash"
+            >
+              monitoring.enabled: false
+            </EuiCodeBlock>
+            <EuiSpacer
+              size="s"
+            />
+            <EuiText>
+              <p>
+                <FormattedMessage
+                  defaultMessage="You'll need to restart {beatType} after making this change."
+                  id="xpack.monitoring.metricbeatMigration.beatsInstructions.disableInternalCollection.note"
+                  values={
+                    Object {
+                      "beatType": "beat",
+                    }
+                  }
+                />
+              </p>
+            </EuiText>
+          </React.Fragment>,
+          "title": "Disable self monitoring of beat's monitoring metrics",
+        },
+        Object {
+          "children": <EuiCallOut
+            color="warning"
+            size="s"
+            title="Data is still coming from self monitoring"
+          >
+            <p>
+              It can take up to 30 seconds to detect data.
+            </p>
+            <p>
+              Last self monitoring was 0 seconds ago.
+            </p>
+          </EuiCallOut>,
+          "status": "incomplete",
+          "title": "Migration status",
+        },
+      ]
+    }
+  />
+</EuiFlyoutBody>
+`;
+
+exports[`Flyout beats part two should show instructions to migrate to metricbeat 1`] = `
+<EuiFlyoutBody>
+  <EuiSteps
+    steps={
+      Array [
+        Object {
+          "children": <EuiText>
+            <p>
+              <EuiLink
+                color="primary"
+                href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-installation.html"
+                target="_blank"
+                type="button"
+              >
+                <FormattedMessage
+                  defaultMessage="Follow the instructions here."
+                  id="xpack.monitoring.metricbeatMigration.beatsInstructions.installMetricbeatLinkText"
+                  values={Object {}}
+                />
+              </EuiLink>
+            </p>
+          </EuiText>,
+          "title": "Install Metricbeat on the same server as this beat",
+        },
+        Object {
+          "children": <React.Fragment>
+            <EuiCodeBlock
+              isCopyable={true}
+              language="bash"
+            >
+              metricbeat modules enable beat-xpack
+            </EuiCodeBlock>
+            <EuiSpacer
+              size="s"
+            />
+            <EuiText>
+              <p>
+                <FormattedMessage
+                  defaultMessage="By default the module will collect {beatType} monitoring metrics from http://localhost:5066. If the {beatType} instance being monitored has a different address, you must specify it via the {hosts} setting in the {file} file."
+                  id="xpack.monitoring.metricbeatMigration.beatsInstructions.enableMetricbeatModuleDescription"
+                  values={
+                    Object {
+                      "beatType": "beat",
+                      "file": <Monospace>
+                        modules.d/beat-xpack.yml
+                      </Monospace>,
+                      "hosts": <Monospace>
+                        hosts
+                      </Monospace>,
+                    }
+                  }
+                />
+              </p>
+            </EuiText>
+            <EuiSpacer
+              size="m"
+            />
+            <EuiCallOut
+              color="warning"
+              iconType="help"
+              title={
+                <EuiText>
+                  <p>
+                    <FormattedMessage
+                      defaultMessage="In order for Metricbeat to collect metrics from the running {beatType}, you need to {link}."
+                      id="xpack.monitoring.metricbeatMigration.beatsInstructions.enableMetricbeatModuleHttpEnabledDirections"
+                      values={
+                        Object {
+                          "beatType": "beat",
+                          "link": <EuiLink
+                            color="primary"
+                            href="https://www.elastic.co/guide/en/beats/metricbeat/current/http-endpoint.html"
+                            target="_blank"
+                            type="button"
+                          >
+                            <FormattedMessage
+                              defaultMessage="enable an HTTP endpoint for the {beatType} instance being monitored"
+                              id="xpack.monitoring.metricbeatMigration.beatsInstructions.enableMetricbeatModuleHttpEnabledDirectionsLinkText"
+                              values={
+                                Object {
+                                  "beatType": undefined,
+                                }
+                              }
+                            />
+                          </EuiLink>,
+                        }
+                      }
+                    />
+                  </p>
+                </EuiText>
+              }
+            />
+            <React.Fragment>
+              <EuiSpacer
+                size="m"
+              />
+              <EuiCallOut
+                color="warning"
+                iconType="help"
+                title={
+                  <EuiText>
+                    <FormattedMessage
+                      defaultMessage="If security is enabled, {link} might be required."
+                      id="xpack.monitoring.metricbeatMigration.securitySetup"
+                      values={
+                        Object {
+                          "link": <React.Fragment>
+                             
+                            <EuiLink
+                              color="primary"
+                              href="https://www.elastic.co/guide/en/beats/reference/current/configuring-metricbeat.html"
+                              target="_blank"
+                              type="button"
+                            >
+                              <FormattedMessage
+                                defaultMessage="additional setup"
+                                id="xpack.monitoring.metricbeatMigration.securitySetupLinkText"
+                                values={Object {}}
+                              />
+                            </EuiLink>
+                          </React.Fragment>,
+                        }
+                      }
+                    />
+                  </EuiText>
+                }
+              />
+            </React.Fragment>
+          </React.Fragment>,
+          "title": "Enable and configure the Beat x-pack module in Metricbeat",
+        },
+        Object {
+          "children": <React.Fragment>
+            <EuiText>
+              <FormattedMessage
+                defaultMessage="Make these changes in your {file}."
+                id="xpack.monitoring.metricbeatMigration.beatsInstructions.configureMetricbeatDescription"
+                values={
+                  Object {
+                    "file": <Monospace>
+                      metricbeat.yml
+                    </Monospace>,
+                  }
+                }
+              />
+            </EuiText>
+            <EuiSpacer
+              size="s"
+            />
+            <EuiCodeBlock
+              isCopyable={true}
+            >
+              output.elasticsearch:
+  hosts: ["http://localhost:9200"] ## Monitoring cluster
+
+  # Optional protocol and basic auth credentials.
+  #protocol: "https"
+  #username: "elastic"
+  #password: "changeme"
+
+            </EuiCodeBlock>
+            <React.Fragment>
+              <EuiSpacer
+                size="m"
+              />
+              <EuiCallOut
+                color="warning"
+                iconType="help"
+                title={
+                  <EuiText>
+                    <FormattedMessage
+                      defaultMessage="If security is enabled, {link} might be required."
+                      id="xpack.monitoring.metricbeatMigration.securitySetup"
+                      values={
+                        Object {
+                          "link": <React.Fragment>
+                             
+                            <EuiLink
+                              color="primary"
+                              href="https://www.elastic.co/guide/en/beats/reference/current/configuring-metricbeat.html"
+                              target="_blank"
+                              type="button"
+                            >
+                              <FormattedMessage
+                                defaultMessage="additional setup"
+                                id="xpack.monitoring.metricbeatMigration.securitySetupLinkText"
+                                values={Object {}}
+                              />
+                            </EuiLink>
+                          </React.Fragment>,
+                        }
+                      }
+                    />
+                  </EuiText>
+                }
+              />
+            </React.Fragment>
+          </React.Fragment>,
+          "title": "Configure Metricbeat to send to the monitoring cluster",
+        },
+        Object {
+          "children": <EuiText>
+            <p>
+              <EuiLink
+                color="primary"
+                href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-starting.html"
+                target="_blank"
+                type="button"
+              >
+                <FormattedMessage
+                  defaultMessage="Follow the instructions here."
+                  id="xpack.monitoring.metricbeatMigration.beatsInstructions.startMetricbeatLinkText"
+                  values={Object {}}
+                />
+              </EuiLink>
+            </p>
+          </EuiText>,
+          "title": "Start Metricbeat",
+        },
+        Object {
+          "children": <EuiCallOut
+            color="warning"
+            size="s"
+            title="No monitoring data detected, but we’ll continue checking."
+          />,
+          "status": "incomplete",
+          "title": "Migration status",
+        },
+      ]
+    }
+  />
+</EuiFlyoutBody>
+`;
+
+exports[`Flyout elasticsearch part one should render normally 1`] = `
+<EuiFlyout
+  aria-labelledby="flyoutTitle"
+  closeButtonAriaLabel="Closes this dialog"
+  hideCloseButton={false}
+  maxWidth={false}
+  onClose={[Function]}
+  ownFocus={false}
+  size="m"
+>
+  <EuiFlyoutHeader
+    hasBorder={true}
+  >
+    <EuiTitle
+      size="m"
+    >
+      <h2
+        id="flyoutTitle"
+      >
+        Monitor \`Elasticsearch\` node with Metricbeat
+      </h2>
+    </EuiTitle>
+  </EuiFlyoutHeader>
+  <EuiFlyoutBody>
+    <EuiForm>
+      <EuiFormRow
+        describedByIds={Array []}
+        display="row"
+        fullWidth={true}
+        hasEmptyLabelSpace={false}
+        helpText="Typically a single URL. If multiple URLs, separate with a comma.
+                The running Metricbeat instance must be able to communicate with these Elasticsearch servers."
+        label="URL of monitoring cluster"
+        labelType="label"
+      >
+        <EuiFieldText
+          compressed={false}
+          fullWidth={true}
+          isLoading={false}
+          onChange={[Function]}
+          value="http://localhost:9200"
+        />
+      </EuiFormRow>
+    </EuiForm>
+  </EuiFlyoutBody>
+  <EuiFlyoutFooter
+    style={
+      Object {
+        "marginBottom": "64px",
+      }
+    }
+  >
+    <EuiFlexGroup
+      justifyContent="spaceBetween"
+    >
+      <EuiFlexItem
+        grow={false}
+      >
+        <EuiButtonEmpty
+          flush="left"
+          iconType="cross"
+          onClick={[Function]}
+        >
+          Close
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+      <EuiFlexItem
+        grow={false}
+      >
+        <EuiButton
+          fill={true}
+          iconSide="right"
+          iconType="sortRight"
+          isDisabled={false}
+          onClick={[Function]}
+          type="submit"
+        >
+          Next
+        </EuiButton>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </EuiFlyoutFooter>
+</EuiFlyout>
+`;
+
+exports[`Flyout elasticsearch part two should show instructions to disable internal collection 1`] = `
+<EuiFlyoutBody>
+  <EuiSteps
+    steps={
+      Array [
+        Object {
+          "children": <React.Fragment>
+            <EuiText>
+              <p>
+                <FormattedMessage
+                  defaultMessage="Disable self monitoring of Elasticsearch monitoring metrics. Set {monospace} to false on each server in the production cluster."
+                  id="xpack.monitoring.metricbeatMigration.elasticsearchInstructions.disableInternalCollectionDescription"
+                  values={
+                    Object {
+                      "monospace": <Monospace>
+                        xpack.monitoring.elasticsearch.collection.enabled
+                      </Monospace>,
+                    }
+                  }
+                />
+              </p>
+            </EuiText>
+            <EuiSpacer
+              size="s"
+            />
+            <EuiCodeBlock
+              isCopyable={true}
+              language="curl"
+            >
+              PUT _cluster/settings
+{
+  "persistent": {
+    "xpack.monitoring.elasticsearch.collection.enabled": false
+  }
+}
+          
+            </EuiCodeBlock>
+          </React.Fragment>,
+          "title": "Disable self monitoring of Elasticsearch monitoring metrics",
+        },
+        Object {
+          "children": <EuiCallOut
+            color="warning"
+            size="s"
+            title="Data is still coming from self monitoring"
+          >
+            <p>
+              It can take up to 30 seconds to detect data.
+            </p>
+            <p>
+              Last self monitoring was 0 seconds ago.
+            </p>
+          </EuiCallOut>,
+          "status": "incomplete",
+          "title": "Migration status",
+        },
+      ]
+    }
+  />
+</EuiFlyoutBody>
+`;
+
+exports[`Flyout elasticsearch part two should show instructions to migrate to metricbeat 1`] = `
+<EuiFlyoutBody>
+  <EuiSteps
+    steps={
+      Array [
+        Object {
+          "children": <EuiText>
+            <p>
+              <EuiLink
+                color="primary"
+                href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-installation.html"
+                target="_blank"
+                type="button"
+              >
+                <FormattedMessage
+                  defaultMessage="Follow these instructions."
+                  id="xpack.monitoring.metricbeatMigration.elasticsearchInstructions.installMetricbeatLinkText"
+                  values={Object {}}
+                />
+              </EuiLink>
+            </p>
+          </EuiText>,
+          "title": "Install Metricbeat on the same server as Elasticsearch",
+        },
+        Object {
+          "children": <React.Fragment>
+            <EuiText>
+              <p>
+                From the installation directory, run:
+              </p>
+            </EuiText>
+            <EuiSpacer
+              size="s"
+            />
+            <EuiCodeBlock
+              isCopyable={true}
+              language="bash"
+            >
+              metricbeat modules enable elasticsearch-xpack
+            </EuiCodeBlock>
+            <EuiSpacer
+              size="s"
+            />
+            <EuiText>
+              <p>
+                <FormattedMessage
+                  defaultMessage="By default the module collects Elasticsearch metrics from {url}. If the local server has a different address, add it to the hosts setting in {module}."
+                  id="xpack.monitoring.metricbeatMigration.elasticsearchInstructions.enableMetricbeatModuleDescription"
+                  values={
+                    Object {
+                      "module": <Monospace>
+                        modules.d/elasticsearch-xpack.yml
+                      </Monospace>,
+                      "url": <Monospace>
+                        http://localhost:9200
+                      </Monospace>,
+                    }
+                  }
+                />
+              </p>
+            </EuiText>
+            <React.Fragment>
+              <EuiSpacer
+                size="m"
+              />
+              <EuiCallOut
+                color="warning"
+                iconType="help"
+                title={
+                  <EuiText>
+                    <FormattedMessage
+                      defaultMessage="If security is enabled, {link} might be required."
+                      id="xpack.monitoring.metricbeatMigration.securitySetup"
+                      values={
+                        Object {
+                          "link": <React.Fragment>
+                             
+                            <EuiLink
+                              color="primary"
+                              href="https://www.elastic.co/guide/en/elasticsearch/reference/current/configuring-metricbeat.html"
+                              target="_blank"
+                              type="button"
+                            >
+                              <FormattedMessage
+                                defaultMessage="additional setup"
+                                id="xpack.monitoring.metricbeatMigration.securitySetupLinkText"
+                                values={Object {}}
+                              />
+                            </EuiLink>
+                          </React.Fragment>,
+                        }
+                      }
+                    />
+                  </EuiText>
+                }
+              />
+            </React.Fragment>
+          </React.Fragment>,
+          "title": "Enable and configure the Elasticsearch x-pack module in Metricbeat",
+        },
+        Object {
+          "children": <React.Fragment>
+            <EuiText>
+              <FormattedMessage
+                defaultMessage="Modify {file} to set the connection information."
+                id="xpack.monitoring.metricbeatMigration.elasticsearchInstructions.configureMetricbeatDescription"
+                values={
+                  Object {
+                    "file": <Monospace>
+                      metricbeat.yml
+                    </Monospace>,
+                  }
+                }
+              />
+            </EuiText>
+            <EuiSpacer
+              size="s"
+            />
+            <EuiCodeBlock
+              isCopyable={true}
+            >
+              output.elasticsearch:
+  hosts: ["http://localhost:9200"] ## Monitoring cluster
+
+  # Optional protocol and basic auth credentials.
+  #protocol: "https"
+  #username: "elastic"
+  #password: "changeme"
+
+            </EuiCodeBlock>
+            <React.Fragment>
+              <EuiSpacer
+                size="m"
+              />
+              <EuiCallOut
+                color="warning"
+                iconType="help"
+                title={
+                  <EuiText>
+                    <FormattedMessage
+                      defaultMessage="If security is enabled, {link} might be required."
+                      id="xpack.monitoring.metricbeatMigration.securitySetup"
+                      values={
+                        Object {
+                          "link": <React.Fragment>
+                             
+                            <EuiLink
+                              color="primary"
+                              href="https://www.elastic.co/guide/en/elasticsearch/reference/current/configuring-metricbeat.html"
+                              target="_blank"
+                              type="button"
+                            >
+                              <FormattedMessage
+                                defaultMessage="additional setup"
+                                id="xpack.monitoring.metricbeatMigration.securitySetupLinkText"
+                                values={Object {}}
+                              />
+                            </EuiLink>
+                          </React.Fragment>,
+                        }
+                      }
+                    />
+                  </EuiText>
+                }
+              />
+            </React.Fragment>
+          </React.Fragment>,
+          "title": "Configure Metricbeat to send data to the monitoring cluster",
+        },
+        Object {
+          "children": <EuiText>
+            <p>
+              <EuiLink
+                color="primary"
+                href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-starting.html"
+                target="_blank"
+                type="button"
+              >
+                <FormattedMessage
+                  defaultMessage="Follow these instructions."
+                  id="xpack.monitoring.metricbeatMigration.elasticsearchInstructions.startMetricbeatLinkText"
+                  values={Object {}}
+                />
+              </EuiLink>
+            </p>
+          </EuiText>,
+          "title": "Start Metricbeat",
+        },
+        Object {
+          "children": <EuiCallOut
+            color="warning"
+            size="s"
+            title="No monitoring data detected, but we’ll continue checking."
+          />,
+          "status": "incomplete",
+          "title": "Migration status",
+        },
+      ]
+    }
+  />
+</EuiFlyoutBody>
+`;
+
+exports[`Flyout kibana part one should render normally 1`] = `
+<EuiFlyout
+  aria-labelledby="flyoutTitle"
+  closeButtonAriaLabel="Closes this dialog"
+  hideCloseButton={false}
+  maxWidth={false}
+  onClose={[Function]}
+  ownFocus={false}
+  size="m"
+>
+  <EuiFlyoutHeader
+    hasBorder={true}
+  >
+    <EuiTitle
+      size="m"
+    >
+      <h2
+        id="flyoutTitle"
+      >
+        Monitor \`Kibana\` instance with Metricbeat
+      </h2>
+    </EuiTitle>
+  </EuiFlyoutHeader>
+  <EuiFlyoutBody>
+    <EuiForm>
+      <EuiFormRow
+        describedByIds={Array []}
+        display="row"
+        fullWidth={true}
+        hasEmptyLabelSpace={false}
+        helpText="Typically a single URL. If multiple URLs, separate with a comma.
+                The running Metricbeat instance must be able to communicate with these Elasticsearch servers."
+        label="URL of monitoring cluster"
+        labelType="label"
+      >
+        <EuiFieldText
+          compressed={false}
+          fullWidth={true}
+          isLoading={false}
+          onChange={[Function]}
+          value="http://localhost:9200"
+        />
+      </EuiFormRow>
+    </EuiForm>
+  </EuiFlyoutBody>
+  <EuiFlyoutFooter
+    style={
+      Object {
+        "marginBottom": "64px",
+      }
+    }
+  >
+    <EuiFlexGroup
+      justifyContent="spaceBetween"
+    >
+      <EuiFlexItem
+        grow={false}
+      >
+        <EuiButtonEmpty
+          flush="left"
+          iconType="cross"
+          onClick={[Function]}
+        >
+          Close
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+      <EuiFlexItem
+        grow={false}
+      >
+        <EuiButton
+          fill={true}
+          iconSide="right"
+          iconType="sortRight"
+          isDisabled={false}
+          onClick={[Function]}
+          type="submit"
+        >
+          Next
+        </EuiButton>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </EuiFlyoutFooter>
+</EuiFlyout>
+`;
+
+exports[`Flyout kibana part two should show instructions to disable internal collection 1`] = `
+<EuiFlyoutBody>
+  <EuiSteps
+    steps={
+      Array [
+        Object {
+          "children": <React.Fragment>
+            <EuiText>
+              <p>
+                <FormattedMessage
+                  defaultMessage="Add this setting to {file}."
+                  id="xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.description"
+                  values={
+                    Object {
+                      "file": <Monospace>
+                        kibana.yml
+                      </Monospace>,
+                    }
+                  }
+                />
+              </p>
+            </EuiText>
+            <EuiSpacer
+              size="s"
+            />
+            <EuiCodeBlock
+              isCopyable={true}
+              language="bash"
+            >
+              xpack.monitoring.kibana.collection.enabled: false
+            </EuiCodeBlock>
+            <EuiSpacer
+              size="s"
+            />
+            <EuiText>
+              <p>
+                <FormattedMessage
+                  defaultMessage="For {config}, leave the default value of ({defaultValue})."
+                  id="xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.note"
+                  values={
+                    Object {
+                      "config": <Monospace>
+                        xpack.monitoring.enabled
+                      </Monospace>,
+                      "defaultValue": <Monospace>
+                        true
+                      </Monospace>,
+                    }
+                  }
+                />
+              </p>
+            </EuiText>
+          </React.Fragment>,
+          "title": "Disable self monitoring of Kibana monitoring metrics",
+        },
+        Object {
+          "children": <EuiCallOut
+            color="warning"
+            size="s"
+            title="Data is still coming from self monitoring"
+          >
+            <p>
+              It can take up to 30 seconds to detect data.
+            </p>
+            <p>
+              Last self monitoring was 0 seconds ago.
+            </p>
+          </EuiCallOut>,
+          "status": "incomplete",
+          "title": "Migration status",
+        },
+      ]
+    }
+  />
+</EuiFlyoutBody>
+`;
+
+exports[`Flyout kibana part two should show instructions to migrate to metricbeat 1`] = `
+<EuiFlyoutBody>
+  <EuiSteps
+    steps={
+      Array [
+        Object {
+          "children": <EuiText>
+            <p>
+              <EuiLink
+                color="primary"
+                href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-installation.html"
+                target="_blank"
+                type="button"
+              >
+                <FormattedMessage
+                  defaultMessage="Follow the instructions here."
+                  id="xpack.monitoring.metricbeatMigration.kibanaInstructions.installMetricbeatLinkText"
+                  values={Object {}}
+                />
+              </EuiLink>
+            </p>
+          </EuiText>,
+          "title": "Install Metricbeat on the same server as Kibana",
+        },
+        Object {
+          "children": <React.Fragment>
+            <EuiCodeBlock
+              isCopyable={true}
+              language="bash"
+            >
+              metricbeat modules enable kibana-xpack
+            </EuiCodeBlock>
+            <EuiSpacer
+              size="s"
+            />
+            <EuiText>
+              <p>
+                <FormattedMessage
+                  defaultMessage="By default the module will collect Kibana monitoring metrics from http://localhost:5601. If the local Kibana instance has a different address, you must specify it via the {hosts} setting in the {file} file."
+                  id="xpack.monitoring.metricbeatMigration.kibanaInstructions.enableMetricbeatModuleDescription"
+                  values={
+                    Object {
+                      "file": <Monospace>
+                        modules.d/kibana-xpack.yml
+                      </Monospace>,
+                      "hosts": <Monospace>
+                        hosts
+                      </Monospace>,
+                    }
+                  }
+                />
+              </p>
+            </EuiText>
+            <React.Fragment>
+              <EuiSpacer
+                size="m"
+              />
+              <EuiCallOut
+                color="warning"
+                iconType="help"
+                title={
+                  <EuiText>
+                    <FormattedMessage
+                      defaultMessage="If security is enabled, {link} might be required."
+                      id="xpack.monitoring.metricbeatMigration.securitySetup"
+                      values={
+                        Object {
+                          "link": <React.Fragment>
+                             
+                            <EuiLink
+                              color="primary"
+                              href="https://www.elastic.co/guide/en/kibana/reference/current/configuring-metricbeat.html"
+                              target="_blank"
+                              type="button"
+                            >
+                              <FormattedMessage
+                                defaultMessage="additional setup"
+                                id="xpack.monitoring.metricbeatMigration.securitySetupLinkText"
+                                values={Object {}}
+                              />
+                            </EuiLink>
+                          </React.Fragment>,
+                        }
+                      }
+                    />
+                  </EuiText>
+                }
+              />
+            </React.Fragment>
+          </React.Fragment>,
+          "title": "Enable and configure the Kibana x-pack module in Metricbeat",
+        },
+        Object {
+          "children": <React.Fragment>
+            <EuiText>
+              <FormattedMessage
+                defaultMessage="Make these changes in your {file}."
+                id="xpack.monitoring.metricbeatMigration.kibanaInstructions.configureMetricbeatDescription"
+                values={
+                  Object {
+                    "file": <Monospace>
+                      metricbeat.yml
+                    </Monospace>,
+                  }
+                }
+              />
+            </EuiText>
+            <EuiSpacer
+              size="s"
+            />
+            <EuiCodeBlock
+              isCopyable={true}
+            >
+              output.elasticsearch:
+  hosts: ["http://localhost:9200"] ## Monitoring cluster
+
+  # Optional protocol and basic auth credentials.
+  #protocol: "https"
+  #username: "elastic"
+  #password: "changeme"
+
+            </EuiCodeBlock>
+            <React.Fragment>
+              <EuiSpacer
+                size="m"
+              />
+              <EuiCallOut
+                color="warning"
+                iconType="help"
+                title={
+                  <EuiText>
+                    <FormattedMessage
+                      defaultMessage="If security is enabled, {link} might be required."
+                      id="xpack.monitoring.metricbeatMigration.securitySetup"
+                      values={
+                        Object {
+                          "link": <React.Fragment>
+                             
+                            <EuiLink
+                              color="primary"
+                              href="https://www.elastic.co/guide/en/kibana/reference/current/configuring-metricbeat.html"
+                              target="_blank"
+                              type="button"
+                            >
+                              <FormattedMessage
+                                defaultMessage="additional setup"
+                                id="xpack.monitoring.metricbeatMigration.securitySetupLinkText"
+                                values={Object {}}
+                              />
+                            </EuiLink>
+                          </React.Fragment>,
+                        }
+                      }
+                    />
+                  </EuiText>
+                }
+              />
+            </React.Fragment>
+          </React.Fragment>,
+          "title": "Configure Metricbeat to send to the monitoring cluster",
+        },
+        Object {
+          "children": <EuiText>
+            <p>
+              <EuiLink
+                color="primary"
+                href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-starting.html"
+                target="_blank"
+                type="button"
+              >
+                <FormattedMessage
+                  defaultMessage="Follow the instructions here."
+                  id="xpack.monitoring.metricbeatMigration.kibanaInstructions.startMetricbeatLinkText"
+                  values={Object {}}
+                />
+              </EuiLink>
+            </p>
+          </EuiText>,
+          "title": "Start Metricbeat",
+        },
+        Object {
+          "children": <EuiCallOut
+            color="warning"
+            size="s"
+            title="No monitoring data detected, but we’ll continue checking."
+          />,
+          "status": "incomplete",
+          "title": "Migration status",
+        },
+      ]
+    }
+  />
+</EuiFlyoutBody>
+`;
+
+exports[`Flyout logstash part one should render normally 1`] = `
+<EuiFlyout
+  aria-labelledby="flyoutTitle"
+  closeButtonAriaLabel="Closes this dialog"
+  hideCloseButton={false}
+  maxWidth={false}
+  onClose={[Function]}
+  ownFocus={false}
+  size="m"
+>
+  <EuiFlyoutHeader
+    hasBorder={true}
+  >
+    <EuiTitle
+      size="m"
+    >
+      <h2
+        id="flyoutTitle"
+      >
+        Monitor \`Logstash\` node with Metricbeat
+      </h2>
+    </EuiTitle>
+  </EuiFlyoutHeader>
+  <EuiFlyoutBody>
+    <EuiForm>
+      <EuiFormRow
+        describedByIds={Array []}
+        display="row"
+        fullWidth={true}
+        hasEmptyLabelSpace={false}
+        helpText="Typically a single URL. If multiple URLs, separate with a comma.
+                The running Metricbeat instance must be able to communicate with these Elasticsearch servers."
+        label="URL of monitoring cluster"
+        labelType="label"
+      >
+        <EuiFieldText
+          compressed={false}
+          fullWidth={true}
+          isLoading={false}
+          onChange={[Function]}
+          value="http://localhost:9200"
+        />
+      </EuiFormRow>
+    </EuiForm>
+  </EuiFlyoutBody>
+  <EuiFlyoutFooter
+    style={
+      Object {
+        "marginBottom": "64px",
+      }
+    }
+  >
+    <EuiFlexGroup
+      justifyContent="spaceBetween"
+    >
+      <EuiFlexItem
+        grow={false}
+      >
+        <EuiButtonEmpty
+          flush="left"
+          iconType="cross"
+          onClick={[Function]}
+        >
+          Close
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+      <EuiFlexItem
+        grow={false}
+      >
+        <EuiButton
+          fill={true}
+          iconSide="right"
+          iconType="sortRight"
+          isDisabled={false}
+          onClick={[Function]}
+          type="submit"
+        >
+          Next
+        </EuiButton>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </EuiFlyoutFooter>
+</EuiFlyout>
+`;
+
+exports[`Flyout logstash part two should show instructions to disable internal collection 1`] = `
+<EuiFlyoutBody>
+  <EuiSteps
+    steps={
+      Array [
+        Object {
+          "children": <React.Fragment>
+            <EuiText>
+              <p>
+                <FormattedMessage
+                  defaultMessage="Add the following setting in the Logstash configuration file ({file}):"
+                  id="xpack.monitoring.metricbeatMigration.logstashInstructions.disableInternalCollection.description"
+                  values={
+                    Object {
+                      "file": <Monospace>
+                        logstash.yml
+                      </Monospace>,
+                    }
+                  }
+                />
+              </p>
+            </EuiText>
+            <EuiSpacer
+              size="s"
+            />
+            <EuiCodeBlock
+              isCopyable={true}
+              language="bash"
+            >
+              xpack.monitoring.enabled: false
+            </EuiCodeBlock>
+            <EuiSpacer
+              size="s"
+            />
+            <EuiText>
+              <p>
+                <FormattedMessage
+                  defaultMessage="You'll need to restart Logstash after making this change."
+                  id="xpack.monitoring.metricbeatMigration.logstashInstructions.disableInternalCollection.note"
+                  values={Object {}}
+                />
+              </p>
+            </EuiText>
+          </React.Fragment>,
+          "title": "Disable self monitoring of Logstash monitoring metrics",
+        },
+        Object {
+          "children": <EuiCallOut
+            color="warning"
+            size="s"
+            title="Data is still coming from self monitoring"
+          >
+            <p>
+              It can take up to 30 seconds to detect data.
+            </p>
+            <p>
+              Last self monitoring was 0 seconds ago.
+            </p>
+          </EuiCallOut>,
+          "status": "incomplete",
+          "title": "Migration status",
+        },
+      ]
+    }
+  />
+</EuiFlyoutBody>
+`;
+
+exports[`Flyout logstash part two should show instructions to migrate to metricbeat 1`] = `
+<EuiFlyoutBody>
+  <EuiSteps
+    steps={
+      Array [
+        Object {
+          "children": <EuiText>
+            <p>
+              <EuiLink
+                color="primary"
+                href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-installation.html"
+                target="_blank"
+                type="button"
+              >
+                <FormattedMessage
+                  defaultMessage="Follow the instructions here."
+                  id="xpack.monitoring.metricbeatMigration.logstashInstructions.installMetricbeatLinkText"
+                  values={Object {}}
+                />
+              </EuiLink>
+            </p>
+          </EuiText>,
+          "title": "Install Metricbeat on the same server as Logstash",
+        },
+        Object {
+          "children": <React.Fragment>
+            <EuiCodeBlock
+              isCopyable={true}
+              language="bash"
+            >
+              metricbeat modules enable logstash-xpack
+            </EuiCodeBlock>
+            <EuiSpacer
+              size="s"
+            />
+            <EuiText>
+              <p>
+                <FormattedMessage
+                  defaultMessage="By default the module will collect Logstash monitoring metrics from http://localhost:9600. If the local Logstash instance has a different address, you must specify it via the {hosts} setting in the {file} file."
+                  id="xpack.monitoring.metricbeatMigration.logstashInstructions.enableMetricbeatModuleDescription"
+                  values={
+                    Object {
+                      "file": <Monospace>
+                        modules.d/logstash-xpack.yml
+                      </Monospace>,
+                      "hosts": <Monospace>
+                        hosts
+                      </Monospace>,
+                    }
+                  }
+                />
+              </p>
+            </EuiText>
+            <React.Fragment>
+              <EuiSpacer
+                size="m"
+              />
+              <EuiCallOut
+                color="warning"
+                iconType="help"
+                title={
+                  <EuiText>
+                    <FormattedMessage
+                      defaultMessage="If security is enabled, {link} might be required."
+                      id="xpack.monitoring.metricbeatMigration.securitySetup"
+                      values={
+                        Object {
+                          "link": <React.Fragment>
+                             
+                            <EuiLink
+                              color="primary"
+                              href="https://www.elastic.co/guide/en/logstash/reference/current/configuring-metricbeat.html"
+                              target="_blank"
+                              type="button"
+                            >
+                              <FormattedMessage
+                                defaultMessage="additional setup"
+                                id="xpack.monitoring.metricbeatMigration.securitySetupLinkText"
+                                values={Object {}}
+                              />
+                            </EuiLink>
+                          </React.Fragment>,
+                        }
+                      }
+                    />
+                  </EuiText>
+                }
+              />
+            </React.Fragment>
+          </React.Fragment>,
+          "title": "Enable and configure the Logstash x-pack module in Metricbeat",
+        },
+        Object {
+          "children": <React.Fragment>
+            <EuiText>
+              <FormattedMessage
+                defaultMessage="Make these changes in your {file}."
+                id="xpack.monitoring.metricbeatMigration.logstashInstructions.configureMetricbeatDescription"
+                values={
+                  Object {
+                    "file": <Monospace>
+                      metricbeat.yml
+                    </Monospace>,
+                  }
+                }
+              />
+            </EuiText>
+            <EuiSpacer
+              size="s"
+            />
+            <EuiCodeBlock
+              isCopyable={true}
+            >
+              output.elasticsearch:
+  hosts: ["http://localhost:9200"] ## Monitoring cluster
+
+  # Optional protocol and basic auth credentials.
+  #protocol: "https"
+  #username: "elastic"
+  #password: "changeme"
+
+            </EuiCodeBlock>
+            <React.Fragment>
+              <EuiSpacer
+                size="m"
+              />
+              <EuiCallOut
+                color="warning"
+                iconType="help"
+                title={
+                  <EuiText>
+                    <FormattedMessage
+                      defaultMessage="If security is enabled, {link} might be required."
+                      id="xpack.monitoring.metricbeatMigration.securitySetup"
+                      values={
+                        Object {
+                          "link": <React.Fragment>
+                             
+                            <EuiLink
+                              color="primary"
+                              href="https://www.elastic.co/guide/en/logstash/reference/current/configuring-metricbeat.html"
+                              target="_blank"
+                              type="button"
+                            >
+                              <FormattedMessage
+                                defaultMessage="additional setup"
+                                id="xpack.monitoring.metricbeatMigration.securitySetupLinkText"
+                                values={Object {}}
+                              />
+                            </EuiLink>
+                          </React.Fragment>,
+                        }
+                      }
+                    />
+                  </EuiText>
+                }
+              />
+            </React.Fragment>
+          </React.Fragment>,
+          "title": "Configure Metricbeat to send to the monitoring cluster",
+        },
+        Object {
+          "children": <EuiText>
+            <p>
+              <EuiLink
+                color="primary"
+                href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-starting.html"
+                target="_blank"
+                type="button"
+              >
+                <FormattedMessage
+                  defaultMessage="Follow the instructions here."
+                  id="xpack.monitoring.metricbeatMigration.logstashInstructions.startMetricbeatLinkText"
+                  values={Object {}}
+                />
+              </EuiLink>
+            </p>
+          </EuiText>,
+          "title": "Start Metricbeat",
+        },
+        Object {
+          "children": <EuiCallOut
+            color="warning"
+            size="s"
+            title="No monitoring data detected, but we’ll continue checking."
+          />,
+          "status": "incomplete",
+          "title": "Migration status",
+        },
+      ]
+    }
+  />
+</EuiFlyoutBody>
+`;
+
+exports[`Flyout should render a consistent completion state for all products 1`] = `
+Object {
+  "children": <EuiCallOut
+    color="success"
+    size="s"
+    title="Congratulations!"
+  >
+    <p>
+      Metricbeat is shipping monitoring data.
+    </p>
+  </EuiCallOut>,
+  "status": "complete",
+  "title": "Migration status",
+}
+`;
+
+exports[`Flyout should render the beat type for beats for the disabling internal collection step 1`] = `
+<EuiFlyoutBody>
+  <EuiSteps
+    steps={
+      Array [
+        Object {
+          "children": <React.Fragment>
+            <EuiText>
+              <p>
+                <FormattedMessage
+                  defaultMessage="Add the following setting in {beatType}'s configuration file ({file}):"
+                  id="xpack.monitoring.metricbeatMigration.beatsInstructions.disableInternalCollection.description"
+                  values={
+                    Object {
+                      "beatType": "filebeat",
+                      "file": <Monospace>
+                        filebeat
+                        .yml
+                      </Monospace>,
+                    }
+                  }
+                />
+              </p>
+            </EuiText>
+            <EuiSpacer
+              size="s"
+            />
+            <EuiCodeBlock
+              isCopyable={true}
+              language="bash"
+            >
+              monitoring.enabled: false
+            </EuiCodeBlock>
+            <EuiSpacer
+              size="s"
+            />
+            <EuiText>
+              <p>
+                <FormattedMessage
+                  defaultMessage="You'll need to restart {beatType} after making this change."
+                  id="xpack.monitoring.metricbeatMigration.beatsInstructions.disableInternalCollection.note"
+                  values={
+                    Object {
+                      "beatType": "filebeat",
+                    }
+                  }
+                />
+              </p>
+            </EuiText>
+          </React.Fragment>,
+          "title": "Disable self monitoring of filebeat's monitoring metrics",
+        },
+        Object {
+          "children": <EuiCallOut
+            color="warning"
+            size="s"
+            title="Data is still coming from self monitoring"
+          >
+            <p>
+              It can take up to 30 seconds to detect data.
+            </p>
+            <p>
+              Last self monitoring was 0 seconds ago.
+            </p>
+          </EuiCallOut>,
+          "status": "incomplete",
+          "title": "Migration status",
+        },
+      ]
+    }
+  />
+</EuiFlyoutBody>
+`;
+
+exports[`Flyout should render the beat type for beats for the enabling metricbeat step 1`] = `
+<EuiFlyoutBody>
+  <EuiSteps
+    steps={
+      Array [
+        Object {
+          "children": <EuiText>
+            <p>
+              <EuiLink
+                color="primary"
+                href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-installation.html"
+                target="_blank"
+                type="button"
+              >
+                <FormattedMessage
+                  defaultMessage="Follow the instructions here."
+                  id="xpack.monitoring.metricbeatMigration.beatsInstructions.installMetricbeatLinkText"
+                  values={Object {}}
+                />
+              </EuiLink>
+            </p>
+          </EuiText>,
+          "title": "Install Metricbeat on the same server as this filebeat",
+        },
+        Object {
+          "children": <React.Fragment>
+            <EuiCodeBlock
+              isCopyable={true}
+              language="bash"
+            >
+              metricbeat modules enable beat-xpack
+            </EuiCodeBlock>
+            <EuiSpacer
+              size="s"
+            />
+            <EuiText>
+              <p>
+                <FormattedMessage
+                  defaultMessage="By default the module will collect {beatType} monitoring metrics from http://localhost:5066. If the {beatType} instance being monitored has a different address, you must specify it via the {hosts} setting in the {file} file."
+                  id="xpack.monitoring.metricbeatMigration.beatsInstructions.enableMetricbeatModuleDescription"
+                  values={
+                    Object {
+                      "beatType": "filebeat",
+                      "file": <Monospace>
+                        modules.d/beat-xpack.yml
+                      </Monospace>,
+                      "hosts": <Monospace>
+                        hosts
+                      </Monospace>,
+                    }
+                  }
+                />
+              </p>
+            </EuiText>
+            <EuiSpacer
+              size="m"
+            />
+            <EuiCallOut
+              color="warning"
+              iconType="help"
+              title={
+                <EuiText>
+                  <p>
+                    <FormattedMessage
+                      defaultMessage="In order for Metricbeat to collect metrics from the running {beatType}, you need to {link}."
+                      id="xpack.monitoring.metricbeatMigration.beatsInstructions.enableMetricbeatModuleHttpEnabledDirections"
+                      values={
+                        Object {
+                          "beatType": "filebeat",
+                          "link": <EuiLink
+                            color="primary"
+                            href="https://www.elastic.co/guide/en/beats/filebeat/current/http-endpoint.html"
+                            target="_blank"
+                            type="button"
+                          >
+                            <FormattedMessage
+                              defaultMessage="enable an HTTP endpoint for the {beatType} instance being monitored"
+                              id="xpack.monitoring.metricbeatMigration.beatsInstructions.enableMetricbeatModuleHttpEnabledDirectionsLinkText"
+                              values={
+                                Object {
+                                  "beatType": "filebeat",
+                                }
+                              }
+                            />
+                          </EuiLink>,
+                        }
+                      }
+                    />
+                  </p>
+                </EuiText>
+              }
+            />
+            <React.Fragment>
+              <EuiSpacer
+                size="m"
+              />
+              <EuiCallOut
+                color="warning"
+                iconType="help"
+                title={
+                  <EuiText>
+                    <FormattedMessage
+                      defaultMessage="If security is enabled, {link} might be required."
+                      id="xpack.monitoring.metricbeatMigration.securitySetup"
+                      values={
+                        Object {
+                          "link": <React.Fragment>
+                             
+                            <EuiLink
+                              color="primary"
+                              href="https://www.elastic.co/guide/en/beats/reference/current/configuring-metricbeat.html"
+                              target="_blank"
+                              type="button"
+                            >
+                              <FormattedMessage
+                                defaultMessage="additional setup"
+                                id="xpack.monitoring.metricbeatMigration.securitySetupLinkText"
+                                values={Object {}}
+                              />
+                            </EuiLink>
+                          </React.Fragment>,
+                        }
+                      }
+                    />
+                  </EuiText>
+                }
+              />
+            </React.Fragment>
+          </React.Fragment>,
+          "title": "Enable and configure the Beat x-pack module in Metricbeat",
+        },
+        Object {
+          "children": <React.Fragment>
+            <EuiText>
+              <FormattedMessage
+                defaultMessage="Make these changes in your {file}."
+                id="xpack.monitoring.metricbeatMigration.beatsInstructions.configureMetricbeatDescription"
+                values={
+                  Object {
+                    "file": <Monospace>
+                      metricbeat.yml
+                    </Monospace>,
+                  }
+                }
+              />
+            </EuiText>
+            <EuiSpacer
+              size="s"
+            />
+            <EuiCodeBlock
+              isCopyable={true}
+            >
+              output.elasticsearch:
+  hosts: ["http://localhost:9200"] ## Monitoring cluster
+
+  # Optional protocol and basic auth credentials.
+  #protocol: "https"
+  #username: "elastic"
+  #password: "changeme"
+
+            </EuiCodeBlock>
+            <React.Fragment>
+              <EuiSpacer
+                size="m"
+              />
+              <EuiCallOut
+                color="warning"
+                iconType="help"
+                title={
+                  <EuiText>
+                    <FormattedMessage
+                      defaultMessage="If security is enabled, {link} might be required."
+                      id="xpack.monitoring.metricbeatMigration.securitySetup"
+                      values={
+                        Object {
+                          "link": <React.Fragment>
+                             
+                            <EuiLink
+                              color="primary"
+                              href="https://www.elastic.co/guide/en/beats/reference/current/configuring-metricbeat.html"
+                              target="_blank"
+                              type="button"
+                            >
+                              <FormattedMessage
+                                defaultMessage="additional setup"
+                                id="xpack.monitoring.metricbeatMigration.securitySetupLinkText"
+                                values={Object {}}
+                              />
+                            </EuiLink>
+                          </React.Fragment>,
+                        }
+                      }
+                    />
+                  </EuiText>
+                }
+              />
+            </React.Fragment>
+          </React.Fragment>,
+          "title": "Configure Metricbeat to send to the monitoring cluster",
+        },
+        Object {
+          "children": <EuiText>
+            <p>
+              <EuiLink
+                color="primary"
+                href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-starting.html"
+                target="_blank"
+                type="button"
+              >
+                <FormattedMessage
+                  defaultMessage="Follow the instructions here."
+                  id="xpack.monitoring.metricbeatMigration.beatsInstructions.startMetricbeatLinkText"
+                  values={Object {}}
+                />
+              </EuiLink>
+            </p>
+          </EuiText>,
+          "title": "Start Metricbeat",
+        },
+        Object {
+          "children": <EuiCallOut
+            color="warning"
+            size="s"
+            title="No monitoring data detected, but we’ll continue checking."
+          />,
+          "status": "incomplete",
+          "title": "Migration status",
+        },
+      ]
+    }
+  />
+</EuiFlyoutBody>
+`;
+
+exports[`Flyout should show a restart warning for restarting the primary Kibana 1`] = `
+<EuiFlyoutBody>
+  <EuiSteps
+    steps={
+      Array [
+        Object {
+          "children": <React.Fragment>
+            <EuiText>
+              <p>
+                <FormattedMessage
+                  defaultMessage="Add this setting to {file}."
+                  id="xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.description"
+                  values={
+                    Object {
+                      "file": <Monospace>
+                        kibana.yml
+                      </Monospace>,
+                    }
+                  }
+                />
+              </p>
+            </EuiText>
+            <EuiSpacer
+              size="s"
+            />
+            <EuiCodeBlock
+              isCopyable={true}
+              language="bash"
+            >
+              xpack.monitoring.kibana.collection.enabled: false
+            </EuiCodeBlock>
+            <EuiSpacer
+              size="s"
+            />
+            <EuiText>
+              <p>
+                <FormattedMessage
+                  defaultMessage="For {config}, leave the default value of ({defaultValue})."
+                  id="xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.note"
+                  values={
+                    Object {
+                      "config": <Monospace>
+                        xpack.monitoring.enabled
+                      </Monospace>,
+                      "defaultValue": <Monospace>
+                        true
+                      </Monospace>,
+                    }
+                  }
+                />
+              </p>
+            </EuiText>
+            <React.Fragment>
+              <EuiSpacer
+                size="s"
+              />
+              <EuiCallOut
+                color="warning"
+                iconType="help"
+                title="This step requires you to restart the Kibana server"
+              >
+                <EuiText>
+                  <p>
+                    <FormattedMessage
+                      defaultMessage="Expect errors until the server is running again."
+                      id="xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.restartNote"
+                      values={Object {}}
+                    />
+                  </p>
+                </EuiText>
+              </EuiCallOut>
+            </React.Fragment>
+          </React.Fragment>,
+          "title": "Disable self monitoring of Kibana monitoring metrics",
+        },
+        Object {
+          "children": <EuiCallOut
+            color="warning"
+            size="s"
+            title="Data is still coming from self monitoring"
+          >
+            <p>
+              It can take up to 30 seconds to detect data.
+            </p>
+            <p>
+              Last self monitoring was 0 seconds ago.
+            </p>
+          </EuiCallOut>,
+          "status": "incomplete",
+          "title": "Migration status",
+        },
+      ]
+    }
+  />
+</EuiFlyoutBody>
+`;
diff --git a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/flyout/flyout.js b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/flyout/flyout.js
index f8f13866f09384..34c4d14bdf21b0 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/flyout/flyout.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/flyout/flyout.js
@@ -26,7 +26,7 @@ import {
 } from '@elastic/eui';
 import { getInstructionSteps } from '../instruction_steps';
 import { Storage } from 'ui/storage';
-import { STORAGE_KEY, ELASTICSEARCH_CUSTOM_ID } from '../../../../common/constants';
+import { STORAGE_KEY, ELASTICSEARCH_SYSTEM_ID, KIBANA_SYSTEM_ID } from '../../../../common/constants';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
@@ -34,8 +34,8 @@ import {
   INSTRUCTION_STEP_ENABLE_METRICBEAT,
   INSTRUCTION_STEP_DISABLE_INTERNAL
 } from '../constants';
-import { KIBANA_SYSTEM_ID, BEATS_SYSTEM_ID } from '../../../../../telemetry/common/constants';
 import { ELASTIC_WEBSITE_URL, DOC_LINK_VERSION } from 'ui/documentation_links';
+import { getIdentifier, formatProductName } from '../../setup_mode/formatting';
 
 const storage = new Storage(window.localStorage);
 const ES_MONITORING_URL_KEY = `${STORAGE_KEY}.mb_migration.esMonitoringUrl`;
@@ -93,11 +93,11 @@ export class Flyout extends Component {
             <EuiFormRow
               fullWidth
               label={i18n.translate('xpack.monitoring.metricbeatMigration.flyout.step1.monitoringUrlLabel', {
-                defaultMessage: 'Monitoring cluster URL'
+                defaultMessage: 'URL of monitoring cluster'
               })}
               helpText={i18n.translate('xpack.monitoring.metricbeatMigration.flyout.step1.monitoringUrlHelpText', {
-                defaultMessage: `This is typically a single instance, but if you have multiple, enter all of instance urls comma-separated.
-                Keep in mind that the running metricbeat instance will need to be able to communicate with these Elasticsearch servers.`
+                defaultMessage: `Typically a single URL. If multiple URLs, separate with a comma.
+                The running Metricbeat instance must be able to communicate with these Elasticsearch servers.`
               })}
             >
               <EuiFieldText
@@ -110,9 +110,10 @@ export class Flyout extends Component {
         );
       case INSTRUCTION_STEP_ENABLE_METRICBEAT:
       case INSTRUCTION_STEP_DISABLE_INTERNAL:
+        const esMonitoringUrls = esMonitoringUrl.split(',').map(url => `"${url}"`);
         const instructionSteps = getInstructionSteps(productName, product, activeStep, meta, {
           doneWithMigration: onClose,
-          esMonitoringUrl,
+          esMonitoringUrl: esMonitoringUrls,
           hasCheckedStatus: checkedStatusByStep[activeStep],
         });
 
@@ -142,7 +143,7 @@ export class Flyout extends Component {
     let willShowNextButton = activeStep !== INSTRUCTION_STEP_DISABLE_INTERNAL;
 
     if (activeStep === INSTRUCTION_STEP_ENABLE_METRICBEAT) {
-      if (productName === ELASTICSEARCH_CUSTOM_ID) {
+      if (productName === ELASTICSEARCH_SYSTEM_ID) {
         willShowNextButton = false;
         // ES can be fully migrated for net new users
         willDisableDoneButton = !product.isPartiallyMigrated && !product.isFullyMigrated;
@@ -222,7 +223,7 @@ export class Flyout extends Component {
     if (productName === KIBANA_SYSTEM_ID) {
       documentationUrl = `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/monitoring-metricbeat.html`;
     }
-    else if (productName === ELASTICSEARCH_CUSTOM_ID) {
+    else if (productName === ELASTICSEARCH_SYSTEM_ID) {
       documentationUrl = `${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/reference/${DOC_LINK_VERSION}/configuring-metricbeat.html`;
     }
 
@@ -233,7 +234,9 @@ export class Flyout extends Component {
     return (
       <EuiText size="s">
         <EuiLink href={documentationUrl} target="_blank">
-          Read more about this migration.
+          {i18n.translate('xpack.monitoring.metricbeatMigration.flyout.learnMore', {
+            defaultMessage: 'Learn about why.'
+          })}
         </EuiLink>
       </EuiText>
     );
@@ -242,59 +245,29 @@ export class Flyout extends Component {
   render() {
     const { onClose, instance, productName, product } = this.props;
 
-    let instanceType = null;
-    let instanceName = instance ? instance.name : null;
-
-    if (productName === KIBANA_SYSTEM_ID) {
-      instanceType = i18n.translate('xpack.monitoring.metricbeatMigration.flyout.kibanaInstance', {
-        defaultMessage: 'instance',
-      });
-    }
-    else if (productName === ELASTICSEARCH_CUSTOM_ID) {
-      if (instance) {
-        instanceType = i18n.translate('xpack.monitoring.metricbeatMigration.flyout.elasticsearchNode', {
-          defaultMessage: 'node',
-        });
-      }
-      else {
-        instanceName = i18n.translate('xpack.monitoring.metricbeatMigration.flyout.elasticsearchNodesTitle', {
-          defaultMessage: 'Elasticsearch nodes',
-        });
-      }
-    }
+    const instanceIdentifier = getIdentifier(productName);
+    const instanceName = (instance && instance.name) || formatProductName(productName);
 
     let title = i18n.translate('xpack.monitoring.metricbeatMigration.flyout.flyoutTitle', {
-      defaultMessage: 'Migrate {instanceName} {instanceType} to Metricbeat',
+      defaultMessage: 'Monitor `{instanceName}` {instanceIdentifier} with Metricbeat',
       values: {
         instanceName,
-        instanceType
+        instanceIdentifier
       }
     });
 
     if (product.isNetNewUser) {
       title = i18n.translate('xpack.monitoring.metricbeatMigration.flyout.flyoutTitleNewUser', {
-        defaultMessage: 'Monitor {instanceName} {instanceType} with Metricbeat',
+        defaultMessage: 'Monitor {instanceName} {instanceIdentifier} with Metricbeat',
         values: {
-          instanceName,
-          instanceType
+          instanceIdentifier,
+          instanceName
         }
       });
     }
 
     let noClusterUuidPrompt = null;
     if (product.isFullyMigrated && product.clusterUuid === null) {
-      const nodeText = i18n.translate('xpack.monitoring.metricbeatMigration.flyout.node', {
-        defaultMessage: 'node'
-      });
-      const instanceText = i18n.translate('xpack.monitoring.metricbeatMigration.flyout.instance', {
-        defaultMessage: 'instance'
-      });
-
-      let typeText = nodeText;
-      if (productName === BEATS_SYSTEM_ID) {
-        typeText = instanceText;
-      }
-
       noClusterUuidPrompt = (
         <Fragment>
           <EuiCallOut
@@ -310,11 +283,11 @@ export class Flyout extends Component {
             <p>
               <FormattedMessage
                 id="xpack.monitoring.metricbeatMigration.flyout.noClusterUuidDescription"
-                defaultMessage="This {productName} {typeText} is not connected to an Elasticsearch cluster so once fully migrated,
-                this {productName} {typeText} will appear in the Standalone cluster instead of this one. {link}"
+                defaultMessage="This {productName} {instanceIdentifier} is not connected to an Elasticsearch cluster so once fully migrated,
+                this {productName} {instanceIdentifier} will appear in the Standalone cluster instead of this one. {link}"
                 values={{
                   productName,
-                  typeText,
+                  instanceIdentifier,
                   link: (
                     <EuiLink href={`#/overview?_g=(cluster_uuid:__standalone_cluster__)`} target="_blank">
                       Click here to view the Standalone cluster.
@@ -330,10 +303,10 @@ export class Flyout extends Component {
                 'xpack.monitoring.metricbeatMigration.flyout.noClusterUuidCheckboxLabel',
                 {
                   defaultMessage: `Yes, I understand that I will need to look in the Standalone cluster for
-                  this {productName} {typeText}.`,
+                  this {productName} {instanceIdentifier}.`,
                   values: {
                     productName,
-                    typeText
+                    instanceIdentifier
                   }
                 }
               )}
@@ -357,13 +330,14 @@ export class Flyout extends Component {
               {title}
             </h2>
           </EuiTitle>
-          {this.getDocumentationTitle()}
+          {/* Remove until we have a why article: https://github.com/elastic/kibana/pull/45799#issuecomment-536778656 */}
+          {/* {this.getDocumentationTitle()} */}
         </EuiFlyoutHeader>
         <EuiFlyoutBody>
           {this.renderActiveStep()}
           {noClusterUuidPrompt}
         </EuiFlyoutBody>
-        <EuiFlyoutFooter>
+        <EuiFlyoutFooter style={{ marginBottom: '64px' }}>
           <EuiFlexGroup justifyContent="spaceBetween">
             <EuiFlexItem grow={false}>
               <EuiButtonEmpty
diff --git a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/flyout/flyout.test.js b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/flyout/flyout.test.js
new file mode 100644
index 00000000000000..9b4ac21548bb85
--- /dev/null
+++ b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/flyout/flyout.test.js
@@ -0,0 +1,183 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Flyout } from './flyout';
+import { INSTRUCTION_STEP_ENABLE_METRICBEAT } from '../constants';
+import {
+  ELASTICSEARCH_SYSTEM_ID,
+  KIBANA_SYSTEM_ID,
+  BEATS_SYSTEM_ID,
+  APM_SYSTEM_ID,
+  LOGSTASH_SYSTEM_ID
+} from '../../../../common/constants';
+
+jest.mock('ui/documentation_links', () => ({
+  ELASTIC_WEBSITE_URL: 'https://www.elastic.co/',
+  DOC_LINK_VERSION: 'current'
+}));
+
+jest.mock('../../../../common', () => ({
+  formatTimestampToDuration: () => `0 seconds`,
+}));
+
+const PRODUCTS = [
+  {
+    name: ELASTICSEARCH_SYSTEM_ID
+  },
+  {
+    name: KIBANA_SYSTEM_ID
+  },
+  {
+    name: LOGSTASH_SYSTEM_ID
+  },
+  {
+    name: BEATS_SYSTEM_ID
+  },
+  {
+    name: APM_SYSTEM_ID
+  }
+];
+
+describe('Flyout', () => {
+  for (const { name } of PRODUCTS) {
+    describe(`${name}`, () => {
+      describe('part one', () => {
+        it('should render normally', () => {
+          const component = shallow(
+            <Flyout
+              onClose={() => {}}
+              product={{}}
+              productName={name}
+            />
+          );
+          expect(component).toMatchSnapshot();
+        });
+      });
+
+      describe('part two', () => {
+        it('should show instructions to migrate to metricbeat', () => {
+          const component = shallow(
+            <Flyout
+              onClose={() => {}}
+              product={{
+                isInternalCollector: true
+              }}
+              productName={name}
+            />
+          );
+          component.find('EuiButton').simulate('click');
+          component.update();
+          expect(component.find('EuiFlyoutBody')).toMatchSnapshot();
+        });
+
+        it('should show instructions to disable internal collection', () => {
+          const component = shallow(
+            <Flyout
+              onClose={() => {}}
+              product={{
+                isPartiallyMigrated: true,
+                lastInternallyCollectedTimestamp: 0,
+              }}
+              meta={{
+                secondsAgo: 30
+              }}
+              productName={name}
+            />
+          );
+          component.find('EuiButton').simulate('click');
+          component.update();
+          expect(component.find('EuiFlyoutBody')).toMatchSnapshot();
+        });
+      });
+    });
+  }
+
+  it('should render a consistent completion state for all products', () => {
+    let template = null;
+    for (const { name } of PRODUCTS) {
+      const component = shallow(
+        <Flyout
+          onClose={() => {}}
+          product={{
+            isPartiallyMigrated: true
+          }}
+          meta={{
+            secondsAgo: 10
+          }}
+          productName={name}
+        />
+      );
+      component.setState({
+        activeStep: INSTRUCTION_STEP_ENABLE_METRICBEAT,
+      });
+      component.update();
+      const steps = component.find('EuiSteps').prop('steps');
+      const step = steps[steps.length - 1];
+      if (!template) {
+        template = step;
+        expect(template).toMatchSnapshot();
+      } else {
+        expect(template).toEqual(step);
+      }
+    }
+  });
+
+  it('should render the beat type for beats for the enabling metricbeat step', () => {
+    const component = shallow(
+      <Flyout
+        onClose={() => {}}
+        product={{
+          isInternalCollector: true,
+          beatType: 'filebeat'
+        }}
+        productName={BEATS_SYSTEM_ID}
+      />
+    );
+    component.find('EuiButton').simulate('click');
+    component.update();
+    expect(component.find('EuiFlyoutBody')).toMatchSnapshot();
+  });
+
+  it('should render the beat type for beats for the disabling internal collection step', () => {
+    const component = shallow(
+      <Flyout
+        onClose={() => {}}
+        product={{
+          isPartiallyMigrated: true,
+          beatType: 'filebeat'
+        }}
+        meta={{
+          secondsAgo: 30
+        }}
+        productName={BEATS_SYSTEM_ID}
+      />
+    );
+    component.find('EuiButton').simulate('click');
+    component.update();
+    expect(component.find('EuiFlyoutBody')).toMatchSnapshot();
+  });
+
+  it('should show a restart warning for restarting the primary Kibana', () => {
+    const component = shallow(
+      <Flyout
+        onClose={() => {}}
+        product={{
+          isPartiallyMigrated: true,
+          isPrimary: true
+        }}
+        meta={{
+          secondsAgo: 30
+        }}
+        productName={KIBANA_SYSTEM_ID}
+      />
+    );
+    component.find('EuiButton').simulate('click');
+    component.update();
+    expect(component.find('EuiFlyoutBody')).toMatchSnapshot();
+  });
+});
diff --git a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/apm/common_apm_instructions.js b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/apm/common_apm_instructions.js
deleted file mode 100644
index 643f299bca3444..00000000000000
--- a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/apm/common_apm_instructions.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-import { i18n } from '@kbn/i18n';
-
-export const statusTitle = i18n.translate('xpack.monitoring.metricbeatMigration.apmInstructions.statusTitle', {
-  defaultMessage: `Migration status`
-});
diff --git a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/apm/disable_internal_collection_instructions.js b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/apm/disable_internal_collection_instructions.js
index 827e535a572626..1a0926cc5ea275 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/apm/disable_internal_collection_instructions.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/apm/disable_internal_collection_instructions.js
@@ -8,27 +8,16 @@ import React, { Fragment } from 'react';
 import {
   EuiSpacer,
   EuiCodeBlock,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiButton,
-  EuiCallOut,
   EuiText
 } from '@elastic/eui';
-import { formatTimestampToDuration } from '../../../../../common';
-import { CALCULATE_DURATION_SINCE } from '../../../../../common/constants';
 import { Monospace } from '../components/monospace';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { statusTitle } from './common_apm_instructions';
+import { getDisableStatusStep } from '../common_instructions';
 
-export function getApmInstructionsForDisablingInternalCollection(product, meta, {
-  checkForMigrationStatus,
-  checkingMigrationStatus,
-  hasCheckedStatus,
-  autoCheckIntervalInMs,
-}) {
+export function getApmInstructionsForDisablingInternalCollection(product, meta) {
   const disableInternalCollectionStep = {
     title: i18n.translate('xpack.monitoring.metricbeatMigration.apmInstructions.disableInternalCollection.title', {
-      defaultMessage: 'Disable internal collection of the APM server\'s monitoring metrics'
+      defaultMessage: 'Disable self monitoring of the APM server\'s monitoring metrics'
     }),
     children: (
       <Fragment>
@@ -65,130 +54,7 @@ export function getApmInstructionsForDisablingInternalCollection(product, meta,
     )
   };
 
-  let migrationStatusStep = null;
-  if (!product || !product.isFullyMigrated) {
-    let status = null;
-    if (hasCheckedStatus) {
-      let lastInternallyCollectedMessage = '';
-      // It is possible that, during the migration steps, products are not reporting
-      // monitoring data for a period of time outside the window of our server-side check
-      // and this is most likely temporary so we want to be defensive and not error out
-      // and hopefully wait for the next check and this state will be self-corrected.
-      if (product) {
-        const lastInternallyCollectedTimestamp = product.lastInternallyCollectedTimestamp || product.lastTimestamp;
-        const secondsSinceLastInternalCollectionLabel =
-          formatTimestampToDuration(lastInternallyCollectedTimestamp, CALCULATE_DURATION_SINCE);
-        lastInternallyCollectedMessage = (<FormattedMessage
-          id="xpack.monitoring.metricbeatMigration.apmInstructions.disableInternalCollection.partiallyMigratedStatusDescription"
-          defaultMessage="Last internal collection occurred {secondsSinceLastInternalCollectionLabel} ago."
-          values={{
-            secondsSinceLastInternalCollectionLabel,
-          }}
-        />);
-      }
-
-      status = (
-        <Fragment>
-          <EuiSpacer size="m"/>
-          <EuiCallOut
-            size="s"
-            color="warning"
-            title={i18n.translate('xpack.monitoring.metricbeatMigration.apmInstructions.partiallyMigratedStatusTitle',
-              {
-                defaultMessage: `We still see data coming from internal collection of this APM server.`
-              }
-            )}
-          >
-            <p>
-              <FormattedMessage
-                id="xpack.monitoring.metricbeatMigration.apmInstructions.partiallyMigratedStatusDescription"
-                defaultMessage="Note that it can take up to {secondsAgo} seconds to detect, but
-                we will continuously check every {timePeriod} seconds in the background."
-                values={{
-                  secondsAgo: meta.secondsAgo,
-                  timePeriod: autoCheckIntervalInMs / 1000,
-                }}
-              />
-            </p>
-            <p>
-              {lastInternallyCollectedMessage}
-            </p>
-          </EuiCallOut>
-        </Fragment>
-      );
-    }
-
-    let buttonLabel;
-    if (checkingMigrationStatus) {
-      buttonLabel = i18n.translate(
-        'xpack.monitoring.metricbeatMigration.apmInstructions.disableInternalCollection.checkingStatusButtonLabel',
-        {
-          defaultMessage: 'Checking...'
-        }
-      );
-    } else {
-      buttonLabel = i18n.translate(
-        'xpack.monitoring.metricbeatMigration.apmInstructions.disableInternalCollection.checkStatusButtonLabel',
-        {
-          defaultMessage: 'Check'
-        }
-      );
-    }
-
-    migrationStatusStep = {
-      title: statusTitle,
-      status: 'incomplete',
-      children: (
-        <Fragment>
-          <EuiFlexGroup alignItems="center">
-            <EuiFlexItem>
-              <EuiText>
-                <p>
-                  {i18n.translate(
-                    'xpack.monitoring.metricbeatMigration.apmInstructions.disableInternalCollection.statusDescription',
-                    {
-                      defaultMessage: 'Check that no documents are coming from internal collection.'
-                    }
-                  )}
-                </p>
-              </EuiText>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButton onClick={checkForMigrationStatus} isDisabled={checkingMigrationStatus}>
-                {buttonLabel}
-              </EuiButton>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-          {status}
-        </Fragment>
-      )
-    };
-  }
-  else {
-    migrationStatusStep = {
-      title: statusTitle,
-      status: 'complete',
-      children: (
-        <EuiCallOut
-          size="s"
-          color="success"
-          title={i18n.translate(
-            'xpack.monitoring.metricbeatMigration.apmInstructions.disableInternalCollection.fullyMigratedStatusTitle',
-            {
-              defaultMessage: 'Congratulations!'
-            }
-          )}
-        >
-          <p>
-            <FormattedMessage
-              id="xpack.monitoring.metricbeatMigration.apmInstructions.disableInternalCollection.fullyMigratedStatusDescription"
-              defaultMessage="We are not seeing any documents from internal collection. Migration complete!"
-            />
-          </p>
-        </EuiCallOut>
-      )
-    };
-  }
+  const migrationStatusStep = getDisableStatusStep(product, meta);
 
   return [
     disableInternalCollectionStep,
diff --git a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/apm/enable_metricbeat_instructions.js b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/apm/enable_metricbeat_instructions.js
index 3f27cdd35ace0d..eaf7066c92e65a 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/apm/enable_metricbeat_instructions.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/apm/enable_metricbeat_instructions.js
@@ -9,50 +9,20 @@ import {
   EuiSpacer,
   EuiCodeBlock,
   EuiLink,
-  EuiCallOut,
   EuiText
 } from '@elastic/eui';
 import { Monospace } from '../components/monospace';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { statusTitle } from './common_apm_instructions';
 import { ELASTIC_WEBSITE_URL, DOC_LINK_VERSION } from 'ui/documentation_links';
+import { getMigrationStatusStep, getSecurityStep } from '../common_instructions';
 
 export function getApmInstructionsForEnablingMetricbeat(product, _meta, {
   esMonitoringUrl,
 }) {
-  const securitySetup = (
-    <Fragment>
-      <EuiSpacer size="m"/>
-      <EuiCallOut
-        color="warning"
-        iconType="help"
-        title={(
-          <EuiText>
-            <FormattedMessage
-              id="xpack.monitoring.metricbeatMigration.apmInstructions.metricbeatSecuritySetup"
-              defaultMessage="If security features are enabled, there may be more setup required.{link}"
-              values={{
-                link: (
-                  <Fragment>
-                    {` `}
-                    <EuiLink
-                      href={`${ELASTIC_WEBSITE_URL}guide/en/apm/reference/${DOC_LINK_VERSION}/configuring-metricbeat.html`}
-                      target="_blank"
-                    >
-                      <FormattedMessage
-                        id="xpack.monitoring.metricbeatMigration.apmInstructions.metricbeatSecuritySetupLinkText"
-                        defaultMessage="View more information."
-                      />
-                    </EuiLink>
-                  </Fragment>
-                )
-              }}
-            />
-          </EuiText>
-        )}
-      />
-    </Fragment>
+  const securitySetup = getSecurityStep(
+    `${ELASTIC_WEBSITE_URL}guide/en/apm/reference/${DOC_LINK_VERSION}/configuring-metricbeat.html`
   );
+
   const installMetricbeatStep = {
     title: i18n.translate('xpack.monitoring.metricbeatMigration.apmInstructions.installMetricbeatTitle', {
       defaultMessage: 'Install Metricbeat on the same server as the APM server'
@@ -66,7 +36,7 @@ export function getApmInstructionsForEnablingMetricbeat(product, _meta, {
           >
             <FormattedMessage
               id="xpack.monitoring.metricbeatMigration.apmInstructions.installMetricbeatLinkText"
-              defaultMessage="Follow the instructions here"
+              defaultMessage="Follow the instructions here."
             />
           </EuiLink>
         </p>
@@ -130,7 +100,7 @@ export function getApmInstructionsForEnablingMetricbeat(product, _meta, {
           isCopyable
         >
           {`output.elasticsearch:
-  hosts: ["${esMonitoringUrl}"] ## Monitoring cluster
+  hosts: [${esMonitoringUrl}] ## Monitoring cluster
 
   # Optional protocol and basic auth credentials.
   #protocol: "https"
@@ -157,7 +127,7 @@ export function getApmInstructionsForEnablingMetricbeat(product, _meta, {
           >
             <FormattedMessage
               id="xpack.monitoring.metricbeatMigration.apmInstructions.startMetricbeatLinkText"
-              defaultMessage="Follow the instructions here"
+              defaultMessage="Follow the instructions here."
             />
           </EuiLink>
         </p>
@@ -165,48 +135,7 @@ export function getApmInstructionsForEnablingMetricbeat(product, _meta, {
     )
   };
 
-  let migrationStatusStep = null;
-  if (product.isInternalCollector || product.isNetNewUser) {
-    migrationStatusStep = {
-      title: statusTitle,
-      status: 'incomplete',
-      children: (
-        <EuiCallOut
-          size="s"
-          color="warning"
-          title={i18n.translate('xpack.monitoring.metricbeatMigration.apmInstructions.isInternalCollectorStatusTitle', {
-            defaultMessage: `We have not detected any monitoring data coming from Metricbeat for this APM server.
-            We will continuously check in the background.`,
-          })}
-        />
-      )
-    };
-  }
-  else if (product.isPartiallyMigrated || product.isFullyMigrated) {
-    migrationStatusStep = {
-      title: statusTitle,
-      status: 'complete',
-      children: (
-        <EuiCallOut
-          size="s"
-          color="success"
-          title={i18n.translate(
-            'xpack.monitoring.metricbeatMigration.apmInstructions.fullyMigratedStatusTitle',
-            {
-              defaultMessage: 'Congratulations!'
-            }
-          )}
-        >
-          <p>
-            <FormattedMessage
-              id="xpack.monitoring.metricbeatMigration.apmInstructions.fullyMigratedStatusDescription"
-              defaultMessage="We are now seeing monitoring data shipping from Metricbeat!"
-            />
-          </p>
-        </EuiCallOut>
-      )
-    };
-  }
+  const migrationStatusStep = getMigrationStatusStep(product);
 
   return [
     installMetricbeatStep,
diff --git a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/beats/common_beats_instructions.js b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/beats/common_beats_instructions.js
index 0ada632f9779e0..8953b8a858d43e 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/beats/common_beats_instructions.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/beats/common_beats_instructions.js
@@ -3,11 +3,6 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { i18n } from '@kbn/i18n';
-
-export const statusTitle = i18n.translate('xpack.monitoring.metricbeatMigration.beatsInstructions.statusTitle', {
-  defaultMessage: `Migration status`
-});
 
 export const UNDETECTED_BEAT_TYPE = 'beat';
 export const DEFAULT_BEAT_FOR_URLS = 'metricbeat';
diff --git a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/beats/disable_internal_collection_instructions.js b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/beats/disable_internal_collection_instructions.js
index 4a843ff286598a..b7400f2a798cad 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/beats/disable_internal_collection_instructions.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/beats/disable_internal_collection_instructions.js
@@ -8,28 +8,18 @@ import React, { Fragment } from 'react';
 import {
   EuiSpacer,
   EuiCodeBlock,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiButton,
-  EuiCallOut,
   EuiText
 } from '@elastic/eui';
-import { formatTimestampToDuration } from '../../../../../common';
-import { CALCULATE_DURATION_SINCE } from '../../../../../common/constants';
 import { Monospace } from '../components/monospace';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { statusTitle, UNDETECTED_BEAT_TYPE } from './common_beats_instructions';
+import { UNDETECTED_BEAT_TYPE } from './common_beats_instructions';
+import { getDisableStatusStep } from '../common_instructions';
 
-export function getBeatsInstructionsForDisablingInternalCollection(product, meta, {
-  checkForMigrationStatus,
-  checkingMigrationStatus,
-  hasCheckedStatus,
-  autoCheckIntervalInMs,
-}) {
+export function getBeatsInstructionsForDisablingInternalCollection(product, meta) {
   const beatType = product.beatType;
   const disableInternalCollectionStep = {
     title: i18n.translate('xpack.monitoring.metricbeatMigration.beatsInstructions.disableInternalCollection.title', {
-      defaultMessage: 'Disable internal collection of {beatType}\'s monitoring metrics',
+      defaultMessage: 'Disable self monitoring of {beatType}\'s monitoring metrics',
       values: {
         beatType: beatType || UNDETECTED_BEAT_TYPE
       }
@@ -73,130 +63,7 @@ export function getBeatsInstructionsForDisablingInternalCollection(product, meta
     )
   };
 
-  let migrationStatusStep = null;
-  if (!product || !product.isFullyMigrated) {
-    let status = null;
-    if (hasCheckedStatus) {
-      let lastInternallyCollectedMessage = '';
-      // It is possible that, during the migration steps, products are not reporting
-      // monitoring data for a period of time outside the window of our server-side check
-      // and this is most likely temporary so we want to be defensive and not error out
-      // and hopefully wait for the next check and this state will be self-corrected.
-      if (product) {
-        const lastInternallyCollectedTimestamp = product.lastInternallyCollectedTimestamp || product.lastTimestamp;
-        const secondsSinceLastInternalCollectionLabel =
-          formatTimestampToDuration(lastInternallyCollectedTimestamp, CALCULATE_DURATION_SINCE);
-        lastInternallyCollectedMessage = (<FormattedMessage
-          id="xpack.monitoring.metricbeatMigration.beatsInstructions.disableInternalCollection.partiallyMigratedStatusDescription"
-          defaultMessage="Last internal collection occurred {secondsSinceLastInternalCollectionLabel} ago."
-          values={{
-            secondsSinceLastInternalCollectionLabel,
-          }}
-        />);
-      }
-
-      status = (
-        <Fragment>
-          <EuiSpacer size="m"/>
-          <EuiCallOut
-            size="s"
-            color="warning"
-            title={i18n.translate('xpack.monitoring.metricbeatMigration.beatsInstructions.partiallyMigratedStatusTitle',
-              {
-                defaultMessage: `We still see data coming from internal collection of this beat.`
-              }
-            )}
-          >
-            <p>
-              <FormattedMessage
-                id="xpack.monitoring.metricbeatMigration.beatsInstructions.partiallyMigratedStatusDescription"
-                defaultMessage="Note that it can take up to {secondsAgo} seconds to detect, but
-                we will continuously check every {timePeriod} seconds in the background."
-                values={{
-                  secondsAgo: meta.secondsAgo,
-                  timePeriod: autoCheckIntervalInMs / 1000,
-                }}
-              />
-            </p>
-            <p>
-              {lastInternallyCollectedMessage}
-            </p>
-          </EuiCallOut>
-        </Fragment>
-      );
-    }
-
-    let buttonLabel;
-    if (checkingMigrationStatus) {
-      buttonLabel = i18n.translate(
-        'xpack.monitoring.metricbeatMigration.beatsInstructions.disableInternalCollection.checkingStatusButtonLabel',
-        {
-          defaultMessage: 'Checking...'
-        }
-      );
-    } else {
-      buttonLabel = i18n.translate(
-        'xpack.monitoring.metricbeatMigration.beatsInstructions.disableInternalCollection.checkStatusButtonLabel',
-        {
-          defaultMessage: 'Check'
-        }
-      );
-    }
-
-    migrationStatusStep = {
-      title: statusTitle,
-      status: 'incomplete',
-      children: (
-        <Fragment>
-          <EuiFlexGroup alignItems="center">
-            <EuiFlexItem>
-              <EuiText>
-                <p>
-                  {i18n.translate(
-                    'xpack.monitoring.metricbeatMigration.beatsInstructions.disableInternalCollection.statusDescription',
-                    {
-                      defaultMessage: 'Check that no documents are coming from internal collection.'
-                    }
-                  )}
-                </p>
-              </EuiText>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButton onClick={checkForMigrationStatus} isDisabled={checkingMigrationStatus}>
-                {buttonLabel}
-              </EuiButton>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-          {status}
-        </Fragment>
-      )
-    };
-  }
-  else {
-    migrationStatusStep = {
-      title: statusTitle,
-      status: 'complete',
-      children: (
-        <EuiCallOut
-          size="s"
-          color="success"
-          title={i18n.translate(
-            'xpack.monitoring.metricbeatMigration.beatsInstructions.disableInternalCollection.fullyMigratedStatusTitle',
-            {
-              defaultMessage: 'Congratulations!'
-            }
-          )}
-        >
-          <p>
-            <FormattedMessage
-              id="xpack.monitoring.metricbeatMigration.beatsInstructions.disableInternalCollection.fullyMigratedStatusDescription"
-              defaultMessage="We are not seeing any documents from internal collection. Migration complete!"
-            />
-          </p>
-        </EuiCallOut>
-      )
-    };
-  }
+  const migrationStatusStep = getDisableStatusStep(product, meta);
 
   return [
     disableInternalCollectionStep,
diff --git a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/beats/enable_metricbeat_instructions.js b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/beats/enable_metricbeat_instructions.js
index 8d167379615d5c..f36fb49521a1ea 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/beats/enable_metricbeat_instructions.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/beats/enable_metricbeat_instructions.js
@@ -14,46 +14,18 @@ import {
 } from '@elastic/eui';
 import { Monospace } from '../components/monospace';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { statusTitle, UNDETECTED_BEAT_TYPE, DEFAULT_BEAT_FOR_URLS } from './common_beats_instructions';
+import { UNDETECTED_BEAT_TYPE, DEFAULT_BEAT_FOR_URLS } from './common_beats_instructions';
 import { ELASTIC_WEBSITE_URL, DOC_LINK_VERSION } from 'ui/documentation_links';
+import { getMigrationStatusStep, getSecurityStep } from '../common_instructions';
 
 export function getBeatsInstructionsForEnablingMetricbeat(product, _meta, {
   esMonitoringUrl,
 }) {
   const beatType = product.beatType;
-  const securitySetup = (
-    <Fragment>
-      <EuiSpacer size="m"/>
-      <EuiCallOut
-        color="warning"
-        iconType="help"
-        title={(
-          <EuiText>
-            <FormattedMessage
-              id="xpack.monitoring.metricbeatMigration.beatsInstructions.metricbeatSecuritySetup"
-              defaultMessage="If security features are enabled, there may be more setup required.{link}"
-              values={{
-                link: (
-                  <Fragment>
-                    {` `}
-                    <EuiLink
-                      href={`${ELASTIC_WEBSITE_URL}guide/en/beats/reference/${DOC_LINK_VERSION}/configuring-metricbeat.html`}
-                      target="_blank"
-                    >
-                      <FormattedMessage
-                        id="xpack.monitoring.metricbeatMigration.beatsInstructions.metricbeatSecuritySetupLinkText"
-                        defaultMessage="View more information."
-                      />
-                    </EuiLink>
-                  </Fragment>
-                )
-              }}
-            />
-          </EuiText>
-        )}
-      />
-    </Fragment>
+  const securitySetup = getSecurityStep(
+    `${ELASTIC_WEBSITE_URL}guide/en/beats/reference/${DOC_LINK_VERSION}/configuring-metricbeat.html`
   );
+
   const installMetricbeatStep = {
     title: i18n.translate('xpack.monitoring.metricbeatMigration.beatsInstructions.installMetricbeatTitle', {
       defaultMessage: 'Install Metricbeat on the same server as this {beatType}',
@@ -70,7 +42,7 @@ export function getBeatsInstructionsForEnablingMetricbeat(product, _meta, {
           >
             <FormattedMessage
               id="xpack.monitoring.metricbeatMigration.beatsInstructions.installMetricbeatLinkText"
-              defaultMessage="Follow the instructions here"
+              defaultMessage="Follow the instructions here."
             />
           </EuiLink>
         </p>
@@ -170,7 +142,7 @@ export function getBeatsInstructionsForEnablingMetricbeat(product, _meta, {
           isCopyable
         >
           {`output.elasticsearch:
-  hosts: ["${esMonitoringUrl}"] ## Monitoring cluster
+  hosts: [${esMonitoringUrl}] ## Monitoring cluster
 
   # Optional protocol and basic auth credentials.
   #protocol: "https"
@@ -197,7 +169,7 @@ export function getBeatsInstructionsForEnablingMetricbeat(product, _meta, {
           >
             <FormattedMessage
               id="xpack.monitoring.metricbeatMigration.beatsInstructions.startMetricbeatLinkText"
-              defaultMessage="Follow the instructions here"
+              defaultMessage="Follow the instructions here."
             />
           </EuiLink>
         </p>
@@ -205,48 +177,7 @@ export function getBeatsInstructionsForEnablingMetricbeat(product, _meta, {
     )
   };
 
-  let migrationStatusStep = null;
-  if (product.isInternalCollector || product.isNetNewUser) {
-    migrationStatusStep = {
-      title: statusTitle,
-      status: 'incomplete',
-      children: (
-        <EuiCallOut
-          size="s"
-          color="warning"
-          title={i18n.translate('xpack.monitoring.metricbeatMigration.beatsInstructions.isInternalCollectorStatusTitle', {
-            defaultMessage: `We have not detected any monitoring data coming from Metricbeat for this Beat.
-            We will continuously check in the background.`,
-          })}
-        />
-      )
-    };
-  }
-  else if (product.isPartiallyMigrated || product.isFullyMigrated) {
-    migrationStatusStep = {
-      title: statusTitle,
-      status: 'complete',
-      children: (
-        <EuiCallOut
-          size="s"
-          color="success"
-          title={i18n.translate(
-            'xpack.monitoring.metricbeatMigration.beatsInstructions.fullyMigratedStatusTitle',
-            {
-              defaultMessage: 'Congratulations!'
-            }
-          )}
-        >
-          <p>
-            <FormattedMessage
-              id="xpack.monitoring.metricbeatMigration.beatsInstructions.fullyMigratedStatusDescription"
-              defaultMessage="We are now seeing monitoring data shipping from Metricbeat!"
-            />
-          </p>
-        </EuiCallOut>
-      )
-    };
-  }
+  const migrationStatusStep = getMigrationStatusStep(product);
 
   return [
     installMetricbeatStep,
diff --git a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/common_instructions.js b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/common_instructions.js
new file mode 100644
index 00000000000000..f263837b80cc3c
--- /dev/null
+++ b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/common_instructions.js
@@ -0,0 +1,176 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React, { Fragment } from 'react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import {
+  EuiCallOut,
+  EuiSpacer,
+  EuiText,
+  EuiLink
+} from '@elastic/eui';
+import { CALCULATE_DURATION_SINCE } from '../../../../common/constants';
+import { formatTimestampToDuration } from '../../../../common';
+
+export const MIGRATION_STATUS_LABEL = i18n.translate('xpack.monitoring.metricbeatMigration.migrationStatus', {
+  defaultMessage: `Migration status`
+});
+
+export const MONITORING_STATUS_LABEL = i18n.translate('xpack.monitoring.metricbeatMigration.monitoringStatus', {
+  defaultMessage: `Monitoring status`
+});
+
+export function getSecurityStep(url) {
+  return (
+    <Fragment>
+      <EuiSpacer size="m"/>
+      <EuiCallOut
+        color="warning"
+        iconType="help"
+        title={(
+          <EuiText>
+            <FormattedMessage
+              id="xpack.monitoring.metricbeatMigration.securitySetup"
+              defaultMessage="If security is enabled, {link} might be required."
+              values={{
+                link: (
+                  <Fragment>
+                    {` `}
+                    <EuiLink
+                      href={url}
+                      target="_blank"
+                    >
+                      <FormattedMessage
+                        id="xpack.monitoring.metricbeatMigration.securitySetupLinkText"
+                        defaultMessage="additional setup"
+                      />
+                    </EuiLink>
+                  </Fragment>
+                )
+              }}
+            />
+          </EuiText>
+        )}
+      />
+    </Fragment>
+  );
+}
+
+export function getMigrationStatusStep(product) {
+  if (product.isInternalCollector || product.isNetNewUser) {
+    return {
+      title: product.isNetNewUser ? MONITORING_STATUS_LABEL : MIGRATION_STATUS_LABEL,
+      status: 'incomplete',
+      children: (
+        <EuiCallOut
+          size="s"
+          color="warning"
+          title={i18n.translate('xpack.monitoring.metricbeatMigration.isInternalCollectorStatusTitle', {
+            defaultMessage: `No monitoring data detected, but we’ll continue checking.`,
+          })}
+        />
+      )
+    };
+  }
+  else if (product.isPartiallyMigrated || product.isFullyMigrated) {
+    return {
+      title: MIGRATION_STATUS_LABEL,
+      status: 'complete',
+      children: (
+        <EuiCallOut
+          size="s"
+          color="success"
+          title={i18n.translate('xpack.monitoring.metricbeatMigration.fullyMigratedStatusTitle', {
+            defaultMessage: 'Congratulations!'
+          })}
+        >
+          <p>
+            {i18n.translate('xpack.monitoring.metricbeatMigration.fullyMigratedStatusDescription', {
+              defaultMessage: 'Metricbeat is shipping monitoring data.'
+            })}
+          </p>
+        </EuiCallOut>
+      )
+    };
+  }
+
+  return null;
+}
+
+export function getDisableStatusStep(product, meta) {
+  if (!product || !product.isFullyMigrated) {
+    let lastInternallyCollectedMessage = '';
+    // It is possible that, during the migration steps, products are not reporting
+    // monitoring data for a period of time outside the window of our server-side check
+    // and this is most likely temporary so we want to be defensive and not error out
+    // and hopefully wait for the next check and this state will be self-corrected.
+    if (product) {
+      const lastInternallyCollectedTimestamp = product.lastInternallyCollectedTimestamp || product.lastTimestamp;
+      const secondsSinceLastInternalCollectionLabel =
+        formatTimestampToDuration(lastInternallyCollectedTimestamp, CALCULATE_DURATION_SINCE);
+      lastInternallyCollectedMessage = i18n.translate(
+        'xpack.monitoring.metricbeatMigration.disableInternalCollection.partiallyMigratedStatusDescription',
+        {
+          defaultMessage: 'Last self monitoring was {secondsSinceLastInternalCollectionLabel} ago.',
+          values: {
+            secondsSinceLastInternalCollectionLabel
+          }
+        }
+      );
+    }
+
+    return {
+      title: MIGRATION_STATUS_LABEL,
+      status: 'incomplete',
+      children: (
+        <EuiCallOut
+          size="s"
+          color="warning"
+          title={i18n.translate('xpack.monitoring.metricbeatMigration.partiallyMigratedStatusTitle',
+            {
+              defaultMessage: `Data is still coming from self monitoring`
+            }
+          )}
+        >
+          <p>
+            {i18n.translate('xpack.monitoring.metricbeatMigration.partiallyMigratedStatusDescription', {
+              defaultMessage: `It can take up to {secondsAgo} seconds to detect data.`,
+              values: {
+                secondsAgo: meta.secondsAgo
+              }
+            })}
+          </p>
+          <p>
+            {lastInternallyCollectedMessage}
+          </p>
+        </EuiCallOut>
+      )
+    };
+  }
+
+  return {
+    title: MIGRATION_STATUS_LABEL,
+    status: 'complete',
+    children: (
+      <EuiCallOut
+        size="s"
+        color="success"
+        title={i18n.translate(
+          'xpack.monitoring.metricbeatMigration.disableInternalCollection.fullyMigratedStatusTitle',
+          {
+            defaultMessage: 'Congratulations!'
+          }
+        )}
+      >
+        <p>
+          {i18n.translate('xpack.monitoring.metricbeatMigration.disableInternalCollection.fullyMigratedStatusDescription', {
+            defaultMessage: 'We are not seeing any documents from self monitoring. Migration complete!'
+          })}
+        </p>
+      </EuiCallOut>
+    )
+  };
+}
diff --git a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/elasticsearch/common_elasticsearch_instructions.js b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/elasticsearch/common_elasticsearch_instructions.js
deleted file mode 100644
index 3c55fef3ab7f3f..00000000000000
--- a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/elasticsearch/common_elasticsearch_instructions.js
+++ /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 { i18n } from '@kbn/i18n';
-
-export const statusTitle = i18n.translate('xpack.monitoring.metricbeatMigration.elasticsearchInstructions.statusTitle', {
-  defaultMessage: `Migration status`
-});
-
-export const statusTitleNewUser = i18n.translate('xpack.monitoring.metricbeatMigration.elasticsearchInstructions.statusTitleNewUser', {
-  defaultMessage: `Monitoring status`
-});
diff --git a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/elasticsearch/disable_internal_collection_instructions.js b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/elasticsearch/disable_internal_collection_instructions.js
index d09f134b1d2991..361b1262f4481f 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/elasticsearch/disable_internal_collection_instructions.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/elasticsearch/disable_internal_collection_instructions.js
@@ -8,19 +8,16 @@ import React, { Fragment } from 'react';
 import {
   EuiSpacer,
   EuiCodeBlock,
-  EuiCallOut,
   EuiText
 } from '@elastic/eui';
-import { formatTimestampToDuration } from '../../../../../common';
-import { CALCULATE_DURATION_SINCE } from '../../../../../common/constants';
 import { Monospace } from '../components/monospace';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { statusTitle } from './common_elasticsearch_instructions';
+import { getDisableStatusStep } from '../common_instructions';
 
 export function getElasticsearchInstructionsForDisablingInternalCollection(product, meta) {
   const disableInternalCollectionStep = {
     title: i18n.translate('xpack.monitoring.metricbeatMigration.elasticsearchInstructions.disableInternalCollectionTitle', {
-      defaultMessage: 'Disable internal collection of Elasticsearch monitoring metrics'
+      defaultMessage: 'Disable self monitoring of Elasticsearch monitoring metrics'
     }),
     children: (
       <Fragment>
@@ -28,7 +25,7 @@ export function getElasticsearchInstructionsForDisablingInternalCollection(produ
           <p>
             <FormattedMessage
               id="xpack.monitoring.metricbeatMigration.elasticsearchInstructions.disableInternalCollectionDescription"
-              defaultMessage="Disable internal collection of Elasticsearch monitoring metrics.
+              defaultMessage="Disable self monitoring of Elasticsearch monitoring metrics.
             Set {monospace} to false on each server in the production cluster."
               values={{
                 monospace: (
@@ -55,81 +52,7 @@ export function getElasticsearchInstructionsForDisablingInternalCollection(produ
     )
   };
 
-  let migrationStatusStep = null;
-  if (!product || !product.isFullyMigrated) {
-    let lastInternallyCollectedMessage = '';
-    // It is possible that, during the migration steps, products are not reporting
-    // monitoring data for a period of time outside the window of our server-side check
-    // and this is most likely temporary so we want to be defensive and not error out
-    // and hopefully wait for the next check and this state will be self-corrected.
-    if (product) {
-      const lastInternallyCollectedTimestamp = product.lastInternallyCollectedTimestamp || product.lastTimestamp;
-      const secondsSinceLastInternalCollectionLabel =
-        formatTimestampToDuration(lastInternallyCollectedTimestamp, CALCULATE_DURATION_SINCE);
-      lastInternallyCollectedMessage = (<FormattedMessage
-        id="xpack.monitoring.metricbeatMigration.elasticsearchInstructions.disableInternalCollection.partiallyMigratedStatusDescription"
-        defaultMessage="Last internal collection occurred {secondsSinceLastInternalCollectionLabel} ago."
-        values={{
-          secondsSinceLastInternalCollectionLabel,
-        }}
-      />);
-    }
-
-    migrationStatusStep = {
-      title: statusTitle,
-      status: 'incomplete',
-      children: (
-        <EuiCallOut
-          size="s"
-          color="warning"
-          title={i18n.translate('xpack.monitoring.metricbeatMigration.elasticsearchInstructions.partiallyMigratedStatusTitle',
-            {
-              defaultMessage: `We still see data coming from internal collection of Elasticsearch.`
-            }
-          )}
-        >
-          <p>
-            <FormattedMessage
-              id="xpack.monitoring.metricbeatMigration.elasticsearchInstructions.partiallyMigratedStatusDescription"
-              defaultMessage="Note that it can take up to {secondsAgo} seconds to detect, but
-              we will continuously check in the background."
-              values={{
-                secondsAgo: meta.secondsAgo,
-              }}
-            />
-          </p>
-          <p>
-            {lastInternallyCollectedMessage}
-          </p>
-        </EuiCallOut>
-      )
-    };
-  }
-  else {
-    migrationStatusStep = {
-      title: statusTitle,
-      status: 'complete',
-      children: (
-        <EuiCallOut
-          size="s"
-          color="success"
-          title={i18n.translate(
-            'xpack.monitoring.metricbeatMigration.elasticsearchInstructions.disableInternalCollection.fullyMigratedStatusTitle',
-            {
-              defaultMessage: 'Congratulations!'
-            }
-          )}
-        >
-          <p>
-            <FormattedMessage
-              id="xpack.monitoring.metricbeatMigration.elasticsearchInstructions.disableInternalCollection.fullyMigratedStatusDescription"
-              defaultMessage="We are not seeing any documents from internal collection. Migration complete!"
-            />
-          </p>
-        </EuiCallOut>
-      )
-    };
-  }
+  const migrationStatusStep = getDisableStatusStep(product, meta);
 
   return [
     disableInternalCollectionStep,
diff --git a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/elasticsearch/enable_metricbeat_instructions.js b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/elasticsearch/enable_metricbeat_instructions.js
index 2de84fa883e6ef..eea188461b088d 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/elasticsearch/enable_metricbeat_instructions.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/elasticsearch/enable_metricbeat_instructions.js
@@ -9,49 +9,18 @@ import {
   EuiSpacer,
   EuiCodeBlock,
   EuiLink,
-  EuiCallOut,
   EuiText
 } from '@elastic/eui';
 import { Monospace } from '../components/monospace';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { statusTitle, statusTitleNewUser } from './common_elasticsearch_instructions';
 import { ELASTIC_WEBSITE_URL, DOC_LINK_VERSION } from 'ui/documentation_links';
+import { getSecurityStep, getMigrationStatusStep } from '../common_instructions';
 
 export function getElasticsearchInstructionsForEnablingMetricbeat(product, _meta, {
   esMonitoringUrl,
 }) {
-  const securitySetup = (
-    <Fragment>
-      <EuiSpacer size="m"/>
-      <EuiCallOut
-        color="warning"
-        iconType="help"
-        title={(
-          <EuiText>
-            <FormattedMessage
-              id="xpack.monitoring.metricbeatMigration.elasticsearchInstructions.metricbeatSecuritySetup"
-              defaultMessage="If security features are enabled, there may be more setup required.{link}"
-              values={{
-                link: (
-                  <Fragment>
-                    {` `}
-                    <EuiLink
-                      href={`${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/reference/${DOC_LINK_VERSION}/configuring-metricbeat.html`}
-                      target="_blank"
-                    >
-                      <FormattedMessage
-                        id="xpack.monitoring.metricbeatMigration.elasticsearchInstructions.metricbeatSecuritySetupLinkText"
-                        defaultMessage="View more information."
-                      />
-                    </EuiLink>
-                  </Fragment>
-                )
-              }}
-            />
-          </EuiText>
-        )}
-      />
-    </Fragment>
+  const securitySetup = getSecurityStep(
+    `${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/reference/${DOC_LINK_VERSION}/configuring-metricbeat.html`
   );
 
   const installMetricbeatStep = {
@@ -67,7 +36,7 @@ export function getElasticsearchInstructionsForEnablingMetricbeat(product, _meta
           >
             <FormattedMessage
               id="xpack.monitoring.metricbeatMigration.elasticsearchInstructions.installMetricbeatLinkText"
-              defaultMessage="Follow the instructions here"
+              defaultMessage="Follow these instructions."
             />
           </EuiLink>
         </p>
@@ -82,6 +51,14 @@ export function getElasticsearchInstructionsForEnablingMetricbeat(product, _meta
     }),
     children: (
       <Fragment>
+        <EuiText>
+          <p>
+            {i18n.translate('xpack.monitoring.metricbeatMigration.elasticsearchInstructions.enableMetricbeatModuleInstallDirectory', {
+              defaultMessage: 'From the installation directory, run:'
+            })}
+          </p>
+        </EuiText>
+        <EuiSpacer size="s"/>
         <EuiCodeBlock
           isCopyable
           language="bash"
@@ -93,9 +70,8 @@ export function getElasticsearchInstructionsForEnablingMetricbeat(product, _meta
           <p>
             <FormattedMessage
               id="xpack.monitoring.metricbeatMigration.elasticsearchInstructions.enableMetricbeatModuleDescription"
-              defaultMessage="By default the module will collect Elasticsearch monitoring metrics from {url}.
-              If the local Elasticsearch server has a different address,
-              you must specify it via the hosts setting in the {module} file."
+              defaultMessage="By default the module collects Elasticsearch metrics from {url}.
+              If the local server has a different address, add it to the hosts setting in {module}."
               values={{
                 module: (
                   <Monospace>modules.d/elasticsearch-xpack.yml</Monospace>
@@ -114,14 +90,14 @@ export function getElasticsearchInstructionsForEnablingMetricbeat(product, _meta
 
   const configureMetricbeatStep = {
     title: i18n.translate('xpack.monitoring.metricbeatMigration.elasticsearchInstructions.configureMetricbeatTitle', {
-      defaultMessage: 'Configure Metricbeat to send to the monitoring cluster'
+      defaultMessage: 'Configure Metricbeat to send data to the monitoring cluster'
     }),
     children: (
       <Fragment>
         <EuiText>
           <FormattedMessage
             id="xpack.monitoring.metricbeatMigration.elasticsearchInstructions.configureMetricbeatDescription"
-            defaultMessage="Make these changes in your {file}."
+            defaultMessage="Modify {file} to set the connection information."
             values={{
               file: (
                 <Monospace>metricbeat.yml</Monospace>
@@ -134,7 +110,7 @@ export function getElasticsearchInstructionsForEnablingMetricbeat(product, _meta
           isCopyable
         >
           {`output.elasticsearch:
-  hosts: ["${esMonitoringUrl}"] ## Monitoring cluster
+  hosts: [${esMonitoringUrl}] ## Monitoring cluster
 
   # Optional protocol and basic auth credentials.
   #protocol: "https"
@@ -161,7 +137,7 @@ export function getElasticsearchInstructionsForEnablingMetricbeat(product, _meta
           >
             <FormattedMessage
               id="xpack.monitoring.metricbeatMigration.elasticsearchInstructions.startMetricbeatLinkText"
-              defaultMessage="Follow the instructions here"
+              defaultMessage="Follow these instructions."
             />
           </EuiLink>
         </p>
@@ -169,48 +145,7 @@ export function getElasticsearchInstructionsForEnablingMetricbeat(product, _meta
     )
   };
 
-  let migrationStatusStep = null;
-  if (product.isInternalCollector || product.isNetNewUser) {
-    migrationStatusStep = {
-      title: product.isNetNewUser ? statusTitleNewUser : statusTitle,
-      status: 'incomplete',
-      children: (
-        <EuiCallOut
-          size="s"
-          color="warning"
-          title={i18n.translate('xpack.monitoring.metricbeatMigration.elasticsearchInstructions.isInternalCollectorStatusTitle', {
-            defaultMessage: `We have not detected any monitoring data coming from Metricbeat for this Elasticsearch node.
-            We will continuously check in the background.`,
-          })}
-        />
-      )
-    };
-  }
-  else if (product.isPartiallyMigrated || product.isFullyMigrated) {
-    migrationStatusStep = {
-      title: statusTitle,
-      status: 'complete',
-      children: (
-        <EuiCallOut
-          size="s"
-          color="success"
-          title={i18n.translate(
-            'xpack.monitoring.metricbeatMigration.elasticsearchInstructions.fullyMigratedStatusTitle',
-            {
-              defaultMessage: 'Congratulations!'
-            }
-          )}
-        >
-          <p>
-            <FormattedMessage
-              id="xpack.monitoring.metricbeatMigration.elasticsearchInstructions.fullyMigratedStatusDescription"
-              defaultMessage="We are now seeing monitoring data shipping from Metricbeat!"
-            />
-          </p>
-        </EuiCallOut>
-      )
-    };
-  }
+  const migrationStatusStep = getMigrationStatusStep(product);
 
   return [
     installMetricbeatStep,
diff --git a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/get_instruction_steps.js b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/get_instruction_steps.js
index 7075be3def9bbf..933e95a6c2e7a4 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/get_instruction_steps.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/get_instruction_steps.js
@@ -21,15 +21,20 @@ import {
   getBeatsInstructionsForDisablingInternalCollection,
 } from './beats';
 import {
-  getApmInstructionsForEnablingMetricbeat,
   getApmInstructionsForDisablingInternalCollection,
+  getApmInstructionsForEnablingMetricbeat,
 } from './apm';
 import {
   INSTRUCTION_STEP_ENABLE_METRICBEAT,
   INSTRUCTION_STEP_DISABLE_INTERNAL
 } from '../constants';
-import { ELASTICSEARCH_CUSTOM_ID, APM_CUSTOM_ID } from '../../../../common/constants';
-import { KIBANA_SYSTEM_ID, LOGSTASH_SYSTEM_ID, BEATS_SYSTEM_ID } from '../../../../../telemetry/common/constants';
+import {
+  ELASTICSEARCH_SYSTEM_ID,
+  APM_SYSTEM_ID,
+  KIBANA_SYSTEM_ID,
+  LOGSTASH_SYSTEM_ID,
+  BEATS_SYSTEM_ID
+} from '../../../../common/constants';
 
 export function getInstructionSteps(productName, product, step, meta, opts) {
   switch (productName) {
@@ -40,7 +45,7 @@ export function getInstructionSteps(productName, product, step, meta, opts) {
       if (step === INSTRUCTION_STEP_DISABLE_INTERNAL) {
         return getKibanaInstructionsForDisablingInternalCollection(product, meta, opts);
       }
-    case ELASTICSEARCH_CUSTOM_ID:
+    case ELASTICSEARCH_SYSTEM_ID:
       if (step === INSTRUCTION_STEP_ENABLE_METRICBEAT) {
         return getElasticsearchInstructionsForEnablingMetricbeat(product, meta, opts);
       }
@@ -61,7 +66,7 @@ export function getInstructionSteps(productName, product, step, meta, opts) {
       if (step === INSTRUCTION_STEP_DISABLE_INTERNAL) {
         return getBeatsInstructionsForDisablingInternalCollection(product, meta, opts);
       }
-    case APM_CUSTOM_ID:
+    case APM_SYSTEM_ID:
       if (step === INSTRUCTION_STEP_ENABLE_METRICBEAT) {
         return getApmInstructionsForEnablingMetricbeat(product, meta, opts);
       }
diff --git a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/kibana/common_kibana_instructions.js b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/kibana/common_kibana_instructions.js
deleted file mode 100644
index 25b869e32b9b76..00000000000000
--- a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/kibana/common_kibana_instructions.js
+++ /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 { i18n } from '@kbn/i18n';
-
-export const statusTitle = i18n.translate('xpack.monitoring.metricbeatMigration.kibanaInstructions.statusTitle', {
-  defaultMessage: `Migration status`
-});
-
-export const statusTitleNewUser = i18n.translate('xpack.monitoring.metricbeatMigration.kibanaInstructions.statusTitleNewUser', {
-  defaultMessage: `Monitoring status`
-});
diff --git a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/kibana/disable_internal_collection_instructions.js b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/kibana/disable_internal_collection_instructions.js
index e4219fe47c3c26..02bade281940bc 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/kibana/disable_internal_collection_instructions.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/kibana/disable_internal_collection_instructions.js
@@ -8,24 +8,14 @@ import React, { Fragment } from 'react';
 import {
   EuiSpacer,
   EuiCodeBlock,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiButton,
   EuiCallOut,
   EuiText
 } from '@elastic/eui';
-import { formatTimestampToDuration } from '../../../../../common';
-import { CALCULATE_DURATION_SINCE } from '../../../../../common/constants';
 import { Monospace } from '../components/monospace';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { statusTitle } from './common_kibana_instructions';
+import { getDisableStatusStep } from '../common_instructions';
 
-export function getKibanaInstructionsForDisablingInternalCollection(product, meta, {
-  checkForMigrationStatus,
-  checkingMigrationStatus,
-  hasCheckedStatus,
-  autoCheckIntervalInMs,
-}) {
+export function getKibanaInstructionsForDisablingInternalCollection(product, meta) {
   let restartWarning = null;
   if (product.isPrimary) {
     restartWarning = (
@@ -35,7 +25,7 @@ export function getKibanaInstructionsForDisablingInternalCollection(product, met
           title={i18n.translate(
             'xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.restartWarningTitle',
             {
-              defaultMessage: 'Warning'
+              defaultMessage: 'This step requires you to restart the Kibana server'
             }
           )}
           color="warning"
@@ -45,8 +35,7 @@ export function getKibanaInstructionsForDisablingInternalCollection(product, met
             <p>
               <FormattedMessage
                 id="xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.restartNote"
-                defaultMessage="This step requires you to restart the Kibana server.
-                Expect to see errors until the server is running again."
+                defaultMessage="Expect errors until the server is running again."
               />
             </p>
           </EuiText>
@@ -57,7 +46,7 @@ export function getKibanaInstructionsForDisablingInternalCollection(product, met
 
   const disableInternalCollectionStep = {
     title: i18n.translate('xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.title', {
-      defaultMessage: 'Disable internal collection of Kibana monitoring metrics'
+      defaultMessage: 'Disable self monitoring of Kibana monitoring metrics'
     }),
     children: (
       <Fragment>
@@ -65,7 +54,7 @@ export function getKibanaInstructionsForDisablingInternalCollection(product, met
           <p>
             <FormattedMessage
               id="xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.description"
-              defaultMessage="Add the following setting in the Kibana configuration file ({file}):"
+              defaultMessage="Add this setting to {file}."
               values={{
                 file: (
                   <Monospace>kibana.yml</Monospace>
@@ -86,7 +75,7 @@ export function getKibanaInstructionsForDisablingInternalCollection(product, met
           <p>
             <FormattedMessage
               id="xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.note"
-              defaultMessage="Leave the {config} set to its default value ({defaultValue})."
+              defaultMessage="For {config}, leave the default value of ({defaultValue})."
               values={{
                 config: (
                   <Monospace>xpack.monitoring.enabled</Monospace>
@@ -103,130 +92,7 @@ export function getKibanaInstructionsForDisablingInternalCollection(product, met
     )
   };
 
-  let migrationStatusStep = null;
-  if (!product || !product.isFullyMigrated) {
-    let status = null;
-    if (hasCheckedStatus) {
-      let lastInternallyCollectedMessage = '';
-      // It is possible that, during the migration steps, products are not reporting
-      // monitoring data for a period of time outside the window of our server-side check
-      // and this is most likely temporary so we want to be defensive and not error out
-      // and hopefully wait for the next check and this state will be self-corrected.
-      if (product) {
-        const lastInternallyCollectedTimestamp = product.lastInternallyCollectedTimestamp || product.lastTimestamp;
-        const secondsSinceLastInternalCollectionLabel =
-          formatTimestampToDuration(lastInternallyCollectedTimestamp, CALCULATE_DURATION_SINCE);
-        lastInternallyCollectedMessage = (<FormattedMessage
-          id="xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.partiallyMigratedStatusDescription"
-          defaultMessage="Last internal collection occurred {secondsSinceLastInternalCollectionLabel} ago."
-          values={{
-            secondsSinceLastInternalCollectionLabel,
-          }}
-        />);
-      }
-
-      status = (
-        <Fragment>
-          <EuiSpacer size="m"/>
-          <EuiCallOut
-            size="s"
-            color="warning"
-            title={i18n.translate('xpack.monitoring.metricbeatMigration.kibanaInstructions.partiallyMigratedStatusTitle',
-              {
-                defaultMessage: `We still see data coming from internal collection of Kibana.`
-              }
-            )}
-          >
-            <p>
-              <FormattedMessage
-                id="xpack.monitoring.metricbeatMigration.kibanaInstructions.partiallyMigratedStatusDescription"
-                defaultMessage="Note that it can take up to {secondsAgo} seconds to detect, but
-                we will continuously check every {timePeriod} seconds in the background."
-                values={{
-                  secondsAgo: meta.secondsAgo,
-                  timePeriod: autoCheckIntervalInMs / 1000,
-                }}
-              />
-            </p>
-            <p>
-              {lastInternallyCollectedMessage}
-            </p>
-          </EuiCallOut>
-        </Fragment>
-      );
-    }
-
-    let buttonLabel;
-    if (checkingMigrationStatus) {
-      buttonLabel = i18n.translate(
-        'xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.checkingStatusButtonLabel',
-        {
-          defaultMessage: 'Checking...'
-        }
-      );
-    } else {
-      buttonLabel = i18n.translate(
-        'xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.checkStatusButtonLabel',
-        {
-          defaultMessage: 'Check'
-        }
-      );
-    }
-
-    migrationStatusStep = {
-      title: statusTitle,
-      status: 'incomplete',
-      children: (
-        <Fragment>
-          <EuiFlexGroup alignItems="center">
-            <EuiFlexItem>
-              <EuiText>
-                <p>
-                  {i18n.translate(
-                    'xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.statusDescription',
-                    {
-                      defaultMessage: 'Check that no documents are coming from internal collection.'
-                    }
-                  )}
-                </p>
-              </EuiText>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButton onClick={checkForMigrationStatus} isDisabled={checkingMigrationStatus}>
-                {buttonLabel}
-              </EuiButton>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-          {status}
-        </Fragment>
-      )
-    };
-  }
-  else {
-    migrationStatusStep = {
-      title: statusTitle,
-      status: 'complete',
-      children: (
-        <EuiCallOut
-          size="s"
-          color="success"
-          title={i18n.translate(
-            'xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.fullyMigratedStatusTitle',
-            {
-              defaultMessage: 'Congratulations!'
-            }
-          )}
-        >
-          <p>
-            <FormattedMessage
-              id="xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.fullyMigratedStatusDescription"
-              defaultMessage="We are not seeing any documents from internal collection. Migration complete!"
-            />
-          </p>
-        </EuiCallOut>
-      )
-    };
-  }
+  const migrationStatusStep = getDisableStatusStep(product, meta);
 
   return [
     disableInternalCollectionStep,
diff --git a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/kibana/enable_metricbeat_instructions.js b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/kibana/enable_metricbeat_instructions.js
index 1cd8fdea25151e..be4bdf9f2ac1d7 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/kibana/enable_metricbeat_instructions.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/kibana/enable_metricbeat_instructions.js
@@ -9,50 +9,20 @@ import {
   EuiSpacer,
   EuiCodeBlock,
   EuiLink,
-  EuiCallOut,
   EuiText
 } from '@elastic/eui';
 import { Monospace } from '../components/monospace';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { statusTitle, statusTitleNewUser } from './common_kibana_instructions';
 import { ELASTIC_WEBSITE_URL, DOC_LINK_VERSION } from 'ui/documentation_links';
+import { getMigrationStatusStep, getSecurityStep } from '../common_instructions';
 
 export function getKibanaInstructionsForEnablingMetricbeat(product, _meta, {
   esMonitoringUrl,
 }) {
-  const securitySetup = (
-    <Fragment>
-      <EuiSpacer size="m"/>
-      <EuiCallOut
-        color="warning"
-        iconType="help"
-        title={(
-          <EuiText>
-            <FormattedMessage
-              id="xpack.monitoring.metricbeatMigration.kibanaInstructions.metricbeatSecuritySetup"
-              defaultMessage="If security features are enabled, there may be more setup required.{link}"
-              values={{
-                link: (
-                  <Fragment>
-                    {` `}
-                    <EuiLink
-                      href={`${ELASTIC_WEBSITE_URL}guide/en/kibana/reference/${DOC_LINK_VERSION}/configuring-metricbeat.html`}
-                      target="_blank"
-                    >
-                      <FormattedMessage
-                        id="xpack.monitoring.metricbeatMigration.kibanaInstructions.metricbeatSecuritySetupLinkText"
-                        defaultMessage="View more information."
-                      />
-                    </EuiLink>
-                  </Fragment>
-                )
-              }}
-            />
-          </EuiText>
-        )}
-      />
-    </Fragment>
+  const securitySetup = getSecurityStep(
+    `${ELASTIC_WEBSITE_URL}guide/en/kibana/reference/${DOC_LINK_VERSION}/configuring-metricbeat.html`
   );
+
   const installMetricbeatStep = {
     title: i18n.translate('xpack.monitoring.metricbeatMigration.kibanaInstructions.installMetricbeatTitle', {
       defaultMessage: 'Install Metricbeat on the same server as Kibana'
@@ -66,7 +36,7 @@ export function getKibanaInstructionsForEnablingMetricbeat(product, _meta, {
           >
             <FormattedMessage
               id="xpack.monitoring.metricbeatMigration.kibanaInstructions.installMetricbeatLinkText"
-              defaultMessage="Follow the instructions here"
+              defaultMessage="Follow the instructions here."
             />
           </EuiLink>
         </p>
@@ -130,7 +100,7 @@ export function getKibanaInstructionsForEnablingMetricbeat(product, _meta, {
           isCopyable
         >
           {`output.elasticsearch:
-  hosts: ["${esMonitoringUrl}"] ## Monitoring cluster
+  hosts: [${esMonitoringUrl}] ## Monitoring cluster
 
   # Optional protocol and basic auth credentials.
   #protocol: "https"
@@ -157,7 +127,7 @@ export function getKibanaInstructionsForEnablingMetricbeat(product, _meta, {
           >
             <FormattedMessage
               id="xpack.monitoring.metricbeatMigration.kibanaInstructions.startMetricbeatLinkText"
-              defaultMessage="Follow the instructions here"
+              defaultMessage="Follow the instructions here."
             />
           </EuiLink>
         </p>
@@ -165,48 +135,7 @@ export function getKibanaInstructionsForEnablingMetricbeat(product, _meta, {
     )
   };
 
-  let migrationStatusStep = null;
-  if (product.isInternalCollector || product.isNetNewUser) {
-    migrationStatusStep = {
-      title: product.isNetNewUser ? statusTitleNewUser : statusTitle,
-      status: 'incomplete',
-      children: (
-        <EuiCallOut
-          size="s"
-          color="warning"
-          title={i18n.translate('xpack.monitoring.metricbeatMigration.kibanaInstructions.isInternalCollectorStatusTitle', {
-            defaultMessage: `We have not detected any monitoring data coming from Metricbeat for this Kibana instance.
-            We will continuously check in the background.`,
-          })}
-        />
-      )
-    };
-  }
-  else if (product.isPartiallyMigrated || product.isFullyMigrated) {
-    migrationStatusStep = {
-      title: statusTitle,
-      status: 'complete',
-      children: (
-        <EuiCallOut
-          size="s"
-          color="success"
-          title={i18n.translate(
-            'xpack.monitoring.metricbeatMigration.kibanaInstructions.fullyMigratedStatusTitle',
-            {
-              defaultMessage: 'Congratulations!'
-            }
-          )}
-        >
-          <p>
-            <FormattedMessage
-              id="xpack.monitoring.metricbeatMigration.kibanaInstructions.fullyMigratedStatusDescription"
-              defaultMessage="We are now seeing monitoring data shipping from Metricbeat!"
-            />
-          </p>
-        </EuiCallOut>
-      )
-    };
-  }
+  const migrationStatusStep = getMigrationStatusStep(product);
 
   return [
     installMetricbeatStep,
diff --git a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/logstash/common_logstash_instructions.js b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/logstash/common_logstash_instructions.js
deleted file mode 100644
index 642add4d43fc4c..00000000000000
--- a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/logstash/common_logstash_instructions.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-import { i18n } from '@kbn/i18n';
-
-export const statusTitle = i18n.translate('xpack.monitoring.metricbeatMigration.logstashInstructions.statusTitle', {
-  defaultMessage: `Migration status`
-});
diff --git a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/logstash/disable_internal_collection_instructions.js b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/logstash/disable_internal_collection_instructions.js
index 9efc5a26ef8223..350a50b973b29a 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/logstash/disable_internal_collection_instructions.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/logstash/disable_internal_collection_instructions.js
@@ -8,27 +8,16 @@ import React, { Fragment } from 'react';
 import {
   EuiSpacer,
   EuiCodeBlock,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiButton,
-  EuiCallOut,
   EuiText
 } from '@elastic/eui';
-import { formatTimestampToDuration } from '../../../../../common';
-import { CALCULATE_DURATION_SINCE } from '../../../../../common/constants';
 import { Monospace } from '../components/monospace';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { statusTitle } from './common_logstash_instructions';
+import { getDisableStatusStep } from '../common_instructions';
 
-export function getLogstashInstructionsForDisablingInternalCollection(product, meta, {
-  checkForMigrationStatus,
-  checkingMigrationStatus,
-  hasCheckedStatus,
-  autoCheckIntervalInMs,
-}) {
+export function getLogstashInstructionsForDisablingInternalCollection(product, meta) {
   const disableInternalCollectionStep = {
     title: i18n.translate('xpack.monitoring.metricbeatMigration.logstashInstructions.disableInternalCollection.title', {
-      defaultMessage: 'Disable internal collection of Logstash monitoring metrics'
+      defaultMessage: 'Disable self monitoring of Logstash monitoring metrics'
     }),
     children: (
       <Fragment>
@@ -65,130 +54,7 @@ export function getLogstashInstructionsForDisablingInternalCollection(product, m
     )
   };
 
-  let migrationStatusStep = null;
-  if (!product || !product.isFullyMigrated) {
-    let status = null;
-    if (hasCheckedStatus) {
-      let lastInternallyCollectedMessage = '';
-      // It is possible that, during the migration steps, products are not reporting
-      // monitoring data for a period of time outside the window of our server-side check
-      // and this is most likely temporary so we want to be defensive and not error out
-      // and hopefully wait for the next check and this state will be self-corrected.
-      if (product) {
-        const lastInternallyCollectedTimestamp = product.lastInternallyCollectedTimestamp || product.lastTimestamp;
-        const secondsSinceLastInternalCollectionLabel =
-          formatTimestampToDuration(lastInternallyCollectedTimestamp, CALCULATE_DURATION_SINCE);
-        lastInternallyCollectedMessage = (<FormattedMessage
-          id="xpack.monitoring.metricbeatMigration.logstashInstructions.disableInternalCollection.partiallyMigratedStatusDescription"
-          defaultMessage="Last internal collection occurred {secondsSinceLastInternalCollectionLabel} ago."
-          values={{
-            secondsSinceLastInternalCollectionLabel,
-          }}
-        />);
-      }
-
-      status = (
-        <Fragment>
-          <EuiSpacer size="m"/>
-          <EuiCallOut
-            size="s"
-            color="warning"
-            title={i18n.translate('xpack.monitoring.metricbeatMigration.logstashInstructions.partiallyMigratedStatusTitle',
-              {
-                defaultMessage: `We still see data coming from internal collection of Logstash.`
-              }
-            )}
-          >
-            <p>
-              <FormattedMessage
-                id="xpack.monitoring.metricbeatMigration.logstashInstructions.partiallyMigratedStatusDescription"
-                defaultMessage="Note that it can take up to {secondsAgo} seconds to detect, but
-                we will continuously check every {timePeriod} seconds in the background."
-                values={{
-                  secondsAgo: meta.secondsAgo,
-                  timePeriod: autoCheckIntervalInMs / 1000,
-                }}
-              />
-            </p>
-            <p>
-              {lastInternallyCollectedMessage}
-            </p>
-          </EuiCallOut>
-        </Fragment>
-      );
-    }
-
-    let buttonLabel;
-    if (checkingMigrationStatus) {
-      buttonLabel = i18n.translate(
-        'xpack.monitoring.metricbeatMigration.logstashInstructions.disableInternalCollection.checkingStatusButtonLabel',
-        {
-          defaultMessage: 'Checking...'
-        }
-      );
-    } else {
-      buttonLabel = i18n.translate(
-        'xpack.monitoring.metricbeatMigration.logstashInstructions.disableInternalCollection.checkStatusButtonLabel',
-        {
-          defaultMessage: 'Check'
-        }
-      );
-    }
-
-    migrationStatusStep = {
-      title: statusTitle,
-      status: 'incomplete',
-      children: (
-        <Fragment>
-          <EuiFlexGroup alignItems="center">
-            <EuiFlexItem>
-              <EuiText>
-                <p>
-                  {i18n.translate(
-                    'xpack.monitoring.metricbeatMigration.logstashInstructions.disableInternalCollection.statusDescription',
-                    {
-                      defaultMessage: 'Check that no documents are coming from internal collection.'
-                    }
-                  )}
-                </p>
-              </EuiText>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButton onClick={checkForMigrationStatus} isDisabled={checkingMigrationStatus}>
-                {buttonLabel}
-              </EuiButton>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-          {status}
-        </Fragment>
-      )
-    };
-  }
-  else {
-    migrationStatusStep = {
-      title: statusTitle,
-      status: 'complete',
-      children: (
-        <EuiCallOut
-          size="s"
-          color="success"
-          title={i18n.translate(
-            'xpack.monitoring.metricbeatMigration.logstashInstructions.disableInternalCollection.fullyMigratedStatusTitle',
-            {
-              defaultMessage: 'Congratulations!'
-            }
-          )}
-        >
-          <p>
-            <FormattedMessage
-              id="xpack.monitoring.metricbeatMigration.logstashInstructions.disableInternalCollection.fullyMigratedStatusDescription"
-              defaultMessage="We are not seeing any documents from internal collection. Migration complete!"
-            />
-          </p>
-        </EuiCallOut>
-      )
-    };
-  }
+  const migrationStatusStep = getDisableStatusStep(product, meta);
 
   return [
     disableInternalCollectionStep,
diff --git a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/logstash/enable_metricbeat_instructions.js b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/logstash/enable_metricbeat_instructions.js
index 71300163ce6d2a..875ab89c99454b 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/logstash/enable_metricbeat_instructions.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/logstash/enable_metricbeat_instructions.js
@@ -9,50 +9,20 @@ import {
   EuiSpacer,
   EuiCodeBlock,
   EuiLink,
-  EuiCallOut,
   EuiText
 } from '@elastic/eui';
 import { Monospace } from '../components/monospace';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { statusTitle } from './common_logstash_instructions';
 import { ELASTIC_WEBSITE_URL, DOC_LINK_VERSION } from 'ui/documentation_links';
+import { getMigrationStatusStep, getSecurityStep } from '../common_instructions';
 
 export function getLogstashInstructionsForEnablingMetricbeat(product, _meta, {
   esMonitoringUrl,
 }) {
-  const securitySetup = (
-    <Fragment>
-      <EuiSpacer size="m"/>
-      <EuiCallOut
-        color="warning"
-        iconType="help"
-        title={(
-          <EuiText>
-            <FormattedMessage
-              id="xpack.monitoring.metricbeatMigration.logstashInstructions.metricbeatSecuritySetup"
-              defaultMessage="If security features are enabled, there may be more setup required.{link}"
-              values={{
-                link: (
-                  <Fragment>
-                    {` `}
-                    <EuiLink
-                      href={`${ELASTIC_WEBSITE_URL}guide/en/logstash/reference/${DOC_LINK_VERSION}/configuring-metricbeat.html`}
-                      target="_blank"
-                    >
-                      <FormattedMessage
-                        id="xpack.monitoring.metricbeatMigration.logstashInstructions.metricbeatSecuritySetupLinkText"
-                        defaultMessage="View more information."
-                      />
-                    </EuiLink>
-                  </Fragment>
-                )
-              }}
-            />
-          </EuiText>
-        )}
-      />
-    </Fragment>
+  const securitySetup = getSecurityStep(
+    `${ELASTIC_WEBSITE_URL}guide/en/logstash/reference/${DOC_LINK_VERSION}/configuring-metricbeat.html`
   );
+
   const installMetricbeatStep = {
     title: i18n.translate('xpack.monitoring.metricbeatMigration.logstashInstructions.installMetricbeatTitle', {
       defaultMessage: 'Install Metricbeat on the same server as Logstash'
@@ -66,7 +36,7 @@ export function getLogstashInstructionsForEnablingMetricbeat(product, _meta, {
           >
             <FormattedMessage
               id="xpack.monitoring.metricbeatMigration.logstashInstructions.installMetricbeatLinkText"
-              defaultMessage="Follow the instructions here"
+              defaultMessage="Follow the instructions here."
             />
           </EuiLink>
         </p>
@@ -130,7 +100,7 @@ export function getLogstashInstructionsForEnablingMetricbeat(product, _meta, {
           isCopyable
         >
           {`output.elasticsearch:
-  hosts: ["${esMonitoringUrl}"] ## Monitoring cluster
+  hosts: [${esMonitoringUrl}] ## Monitoring cluster
 
   # Optional protocol and basic auth credentials.
   #protocol: "https"
@@ -157,7 +127,7 @@ export function getLogstashInstructionsForEnablingMetricbeat(product, _meta, {
           >
             <FormattedMessage
               id="xpack.monitoring.metricbeatMigration.logstashInstructions.startMetricbeatLinkText"
-              defaultMessage="Follow the instructions here"
+              defaultMessage="Follow the instructions here."
             />
           </EuiLink>
         </p>
@@ -165,48 +135,7 @@ export function getLogstashInstructionsForEnablingMetricbeat(product, _meta, {
     )
   };
 
-  let migrationStatusStep = null;
-  if (product.isInternalCollector || product.isNetNewUser) {
-    migrationStatusStep = {
-      title: statusTitle,
-      status: 'incomplete',
-      children: (
-        <EuiCallOut
-          size="s"
-          color="warning"
-          title={i18n.translate('xpack.monitoring.metricbeatMigration.logstashInstructions.isInternalCollectorStatusTitle', {
-            defaultMessage: `We have not detected any monitoring data coming from Metricbeat for this Logstash node.
-            We will continuously check n the background.`,
-          })}
-        />
-      )
-    };
-  }
-  else if (product.isPartiallyMigrated || product.isFullyMigrated) {
-    migrationStatusStep = {
-      title: statusTitle,
-      status: 'complete',
-      children: (
-        <EuiCallOut
-          size="s"
-          color="success"
-          title={i18n.translate(
-            'xpack.monitoring.metricbeatMigration.logstashInstructions.fullyMigratedStatusTitle',
-            {
-              defaultMessage: 'Congratulations!'
-            }
-          )}
-        >
-          <p>
-            <FormattedMessage
-              id="xpack.monitoring.metricbeatMigration.logstashInstructions.fullyMigratedStatusDescription"
-              defaultMessage="We are now seeing monitoring data shipping from Metricbeat!"
-            />
-          </p>
-        </EuiCallOut>
-      )
-    };
-  }
+  const migrationStatusStep = getMigrationStatusStep(product);
 
   return [
     installMetricbeatStep,
diff --git a/x-pack/legacy/plugins/monitoring/public/components/no_data/__tests__/__snapshots__/no_data.test.js.snap b/x-pack/legacy/plugins/monitoring/public/components/no_data/__tests__/__snapshots__/no_data.test.js.snap
index 7c663a26bc9df1..1d0f58b6235952 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/no_data/__tests__/__snapshots__/no_data.test.js.snap
+++ b/x-pack/legacy/plugins/monitoring/public/components/no_data/__tests__/__snapshots__/no_data.test.js.snap
@@ -22,43 +22,69 @@ exports[`NoData should show a default message if reason is unknown 1`] = `
       <div
         class="euiSpacer euiSpacer--m"
       />
+      <h2
+        class="euiTitle euiTitle--large"
+      >
+        No monitoring data found
+      </h2>
+      <hr
+        class="euiHorizontalRule euiHorizontalRule--half euiHorizontalRule--marginLarge"
+      />
       <div
         class="euiText euiText--medium"
       >
         <p>
-          There is a 
-          <span
-            class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-          >
-            <code
-              class="euiCodeBlock__code"
-            >
-              food
-            </code>
-          </span>
-           setting that has 
-          <span
-            class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+          Have you set up monitoring yet? If so, make sure that the selected time period in the upper right includes monitoring data.
+        </p>
+      </div>
+      <div
+        class="euiSpacer euiSpacer--l"
+      />
+      <div
+        class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceAround euiFlexGroup--directionRow euiFlexGroup--responsive"
+      >
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero"
+        >
+          <button
+            class="euiButton euiButton--primary euiButton--fill"
+            data-test-subj="enableCollectionInterval"
+            type="button"
           >
-            <code
-              class="euiCodeBlock__code"
+            <span
+              class="euiButton__content"
             >
-              xpack.monitoring.foo.bar
-            </code>
-          </span>
-           set to 
+              <span
+                class="euiButton__text"
+              >
+                Set up monitoring with Metricbeat
+              </span>
+            </span>
+          </button>
+        </div>
+      </div>
+      <hr
+        class="euiHorizontalRule euiHorizontalRule--half euiHorizontalRule--marginLarge"
+      />
+      <button
+        class="euiButtonEmpty euiButtonEmpty--primary"
+        data-test-subj="useInternalCollection"
+        type="button"
+      >
+        <span
+          class="euiButtonEmpty__content"
+        >
           <span
-            class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+            class="euiButtonEmpty__text"
           >
-            <code
-              class="euiCodeBlock__code"
+            <span
+              class="euiTextColor euiTextColor--subdued"
             >
-              taco
-            </code>
+              Or, set up with self monitoring
+            </span>
           </span>
-          .
-        </p>
-      </div>
+        </span>
+      </button>
     </div>
   </div>
 </div>
@@ -89,38 +115,66 @@ exports[`NoData should show text next to the spinner while checking a setting 1`
       <h2
         class="euiTitle euiTitle--large"
       >
-        We're looking for your monitoring data
+        No monitoring data found
       </h2>
-      <span
-        class="euiTextColor euiTextColor--subdued"
-      >
-        <div
-          class="euiText euiText--medium"
-        >
-          <p>
-            Monitoring provides insight to your hardware performance and load.
-          </p>
-        </div>
-      </span>
       <hr
         class="euiHorizontalRule euiHorizontalRule--half euiHorizontalRule--marginLarge"
       />
       <div
-        class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+        class="euiText euiText--medium"
+      >
+        <p>
+          Have you set up monitoring yet? If so, make sure that the selected time period in the upper right includes monitoring data.
+        </p>
+      </div>
+      <div
+        class="euiSpacer euiSpacer--l"
+      />
+      <div
+        class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceAround euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
         <div
           class="euiFlexItem euiFlexItem--flexGrowZero"
         >
-          <span
-            class="euiLoadingSpinner euiLoadingSpinner--medium"
-          />
-        </div>
-        <div
-          class="euiFlexItem euiFlexItem--flexGrowZero"
-        >
-          checking something to test...
+          <button
+            class="euiButton euiButton--primary euiButton--fill"
+            data-test-subj="enableCollectionInterval"
+            type="button"
+          >
+            <span
+              class="euiButton__content"
+            >
+              <span
+                class="euiButton__text"
+              >
+                Set up monitoring with Metricbeat
+              </span>
+            </span>
+          </button>
         </div>
       </div>
+      <hr
+        class="euiHorizontalRule euiHorizontalRule--half euiHorizontalRule--marginLarge"
+      />
+      <button
+        class="euiButtonEmpty euiButtonEmpty--primary"
+        data-test-subj="useInternalCollection"
+        type="button"
+      >
+        <span
+          class="euiButtonEmpty__content"
+        >
+          <span
+            class="euiButtonEmpty__text"
+          >
+            <span
+              class="euiTextColor euiTextColor--subdued"
+            >
+              Or, set up with self monitoring
+            </span>
+          </span>
+        </span>
+      </button>
     </div>
   </div>
 </div>
diff --git a/x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/collection_enabled/collection_enabled.js b/x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/collection_enabled/collection_enabled.js
index 48883e43e0ebf9..50b67cbda6f3de 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/collection_enabled/collection_enabled.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/collection_enabled/collection_enabled.js
@@ -39,10 +39,10 @@ export class ExplainCollectionEnabled extends React.Component {
     const { enabler } = this.props;
     enabler.enableCollectionEnabled();
 
-    // wait 19 seconds, show link to reload
+    // wait 22 seconds, show link to reload
     this.waitedTooLongTimer = setTimeout(() => {
       this.setState({ waitedTooLong: true });
-    }, 19 * 1000);
+    }, 22 * 1000);
   }
 
   render() {
diff --git a/x-pack/legacy/plugins/monitoring/public/components/no_data/no_data.js b/x-pack/legacy/plugins/monitoring/public/components/no_data/no_data.js
index 286727449eb755..e50e49eec9f6eb 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/no_data/no_data.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/no_data/no_data.js
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import {
   EuiSpacer,
@@ -12,7 +12,17 @@ import {
   EuiPage,
   EuiPageBody,
   EuiPageContent,
+  EuiHorizontalRule,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButton,
+  EuiText,
+  EuiTitle,
+  EuiTextColor,
+  EuiButtonEmpty
 } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { toggleSetupMode } from '../../lib/setup_mode';
 import { CheckingSettings } from './checking_settings';
 import { ReasonFound, WeTried } from './reasons';
 import { CheckerErrors } from './checker_errors';
@@ -32,6 +42,42 @@ function NoDataMessage(props) {
 }
 
 export function NoData(props) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [useInternalCollection, setUseInternalCollection] = useState(false);
+
+  async function startSetup() {
+    setIsLoading(true);
+    await toggleSetupMode(true);
+    props.changePath('/elasticsearch/nodes');
+  }
+
+  if (useInternalCollection) {
+    return (
+      <EuiPage>
+        <EuiPageBody restrictWidth={600}>
+          <EuiPageContent
+            verticalPosition="center"
+            horizontalPosition="center"
+            className="eui-textCenter"
+          >
+            <EuiIcon type="monitoringApp" size="xxl" />
+            <EuiSpacer size="m" />
+            <NoDataMessage {...props} />
+            <CheckerErrors errors={props.errors} />
+            <EuiHorizontalRule size="half" />
+            <EuiButtonEmpty isDisabled={props.isCollectionEnabledUpdated} onClick={() => setUseInternalCollection(false)}>
+              <EuiTextColor color="default">
+                <FormattedMessage
+                  id="xpack.monitoring.noData.setupMetricbeatInstead"
+                  defaultMessage="Or, set up with Metricbeat (recommended)"
+                />
+              </EuiTextColor>
+            </EuiButtonEmpty>
+          </EuiPageContent>
+        </EuiPageBody>
+      </EuiPage>
+    );
+  }
 
   return (
     <EuiPage>
@@ -43,8 +89,54 @@ export function NoData(props) {
         >
           <EuiIcon type="monitoringApp" size="xxl" />
           <EuiSpacer size="m" />
-          <NoDataMessage {...props} />
-          <CheckerErrors errors={props.errors} />
+          <EuiTitle size="l">
+            <h2>
+              <FormattedMessage
+                id="xpack.monitoring.noData.noMonitoringDetected"
+                defaultMessage="No monitoring data found"
+              />
+            </h2>
+          </EuiTitle>
+          <EuiHorizontalRule size="half" />
+          <EuiText>
+            <p>
+              <FormattedMessage
+                id="xpack.monitoring.noData.noMonitoringDataFound"
+                defaultMessage="Have you set up monitoring yet? If so, make sure that the selected time period in
+                the upper right includes monitoring data."
+              />
+            </p>
+          </EuiText>
+          <EuiSpacer />
+          <EuiFlexGroup
+            alignItems="center"
+            justifyContent="spaceAround"
+            gutterSize="s"
+          >
+            <EuiFlexItem grow={false}>
+              <EuiButton
+                fill={true}
+                onClick={startSetup}
+                type="button"
+                data-test-subj="enableCollectionInterval"
+                isLoading={isLoading}
+              >
+                <FormattedMessage
+                  id="xpack.monitoring.noData.collectionInterval.turnOnMonitoringButtonLabel"
+                  defaultMessage="Set up monitoring with Metricbeat"
+                />
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiHorizontalRule size="half" />
+          <EuiButtonEmpty onClick={() => setUseInternalCollection(true)} data-test-subj="useInternalCollection">
+            <EuiTextColor color="subdued">
+              <FormattedMessage
+                id="xpack.monitoring.noData.setupInternalInstead"
+                defaultMessage="Or, set up with self monitoring"
+              />
+            </EuiTextColor>
+          </EuiButtonEmpty>
         </EuiPageContent>
       </EuiPageBody>
     </EuiPage>
@@ -52,6 +144,7 @@ export function NoData(props) {
 }
 
 NoData.propTypes = {
+  changePath: PropTypes.func,
   isLoading: PropTypes.bool.isRequired,
   reason: PropTypes.object,
   checkMessage: PropTypes.string
diff --git a/x-pack/legacy/plugins/monitoring/public/components/renderers/__snapshots__/setup_mode.test.js.snap b/x-pack/legacy/plugins/monitoring/public/components/renderers/__snapshots__/setup_mode.test.js.snap
new file mode 100644
index 00000000000000..12b82be3337038
--- /dev/null
+++ b/x-pack/legacy/plugins/monitoring/public/components/renderers/__snapshots__/setup_mode.test.js.snap
@@ -0,0 +1,187 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SetupModeRenderer should render the flyout open 1`] = `
+<Fragment>
+  <Flyout
+    instance={null}
+    isSettingUpNew={false}
+    meta={Object {}}
+    onClose={[Function]}
+    product={
+      Object {
+        "isNetNewUser": true,
+      }
+    }
+    productName="elasticsearch"
+    updateProduct={[Function]}
+  />
+  <ChildComponent
+    setupMode={
+      Object {
+        "closeFlyout": [Function],
+        "data": Object {
+          "byUuid": Object {},
+        },
+        "enabled": true,
+        "meta": Object {},
+        "openFlyout": [Function],
+        "productName": "elasticsearch",
+        "shortcutToFinishMigration": [Function],
+        "updateSetupModeData": [Function],
+      }
+    }
+  />
+  <EuiSpacer
+    size="xxl"
+  />
+  <EuiBottomBar>
+    <EuiFlexGroup
+      alignItems="center"
+      justifyContent="spaceBetween"
+    >
+      <EuiFlexItem
+        grow={false}
+      >
+        <EuiFlexGroup
+          gutterSize="s"
+        >
+          <EuiFlexItem
+            grow={false}
+          >
+            <EuiTextColor
+              color="ghost"
+            >
+              <FormattedMessage
+                defaultMessage="You are in setup mode. The ({flagIcon}) icon indicates configuration options."
+                id="xpack.monitoring.setupMode.description"
+                values={
+                  Object {
+                    "flagIcon": <EuiIcon
+                      type="flag"
+                    />,
+                  }
+                }
+              />
+            </EuiTextColor>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+      <EuiFlexItem
+        grow={false}
+      >
+        <EuiFlexGroup
+          gutterSize="s"
+        >
+          <EuiFlexItem
+            grow={false}
+          >
+            <EuiButton
+              color="danger"
+              fill={true}
+              onClick={[Function]}
+              size="s"
+            >
+              Exit setup mode
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </EuiBottomBar>
+</Fragment>
+`;
+
+exports[`SetupModeRenderer should render with setup mode disabled 1`] = `
+<Fragment>
+  <ChildComponent
+    setupMode={
+      Object {
+        "closeFlyout": [Function],
+        "data": null,
+        "enabled": false,
+        "meta": null,
+        "openFlyout": [Function],
+        "productName": "elasticsearch",
+        "shortcutToFinishMigration": [Function],
+        "updateSetupModeData": [Function],
+      }
+    }
+  />
+</Fragment>
+`;
+
+exports[`SetupModeRenderer should render with setup mode enabled 1`] = `
+<Fragment>
+  <ChildComponent
+    setupMode={
+      Object {
+        "closeFlyout": [Function],
+        "data": Object {},
+        "enabled": true,
+        "meta": Object {},
+        "openFlyout": [Function],
+        "productName": "elasticsearch",
+        "shortcutToFinishMigration": [Function],
+        "updateSetupModeData": [Function],
+      }
+    }
+  />
+  <EuiSpacer
+    size="xxl"
+  />
+  <EuiBottomBar>
+    <EuiFlexGroup
+      alignItems="center"
+      justifyContent="spaceBetween"
+    >
+      <EuiFlexItem
+        grow={false}
+      >
+        <EuiFlexGroup
+          gutterSize="s"
+        >
+          <EuiFlexItem
+            grow={false}
+          >
+            <EuiTextColor
+              color="ghost"
+            >
+              <FormattedMessage
+                defaultMessage="You are in setup mode. The ({flagIcon}) icon indicates configuration options."
+                id="xpack.monitoring.setupMode.description"
+                values={
+                  Object {
+                    "flagIcon": <EuiIcon
+                      type="flag"
+                    />,
+                  }
+                }
+              />
+            </EuiTextColor>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+      <EuiFlexItem
+        grow={false}
+      >
+        <EuiFlexGroup
+          gutterSize="s"
+        >
+          <EuiFlexItem
+            grow={false}
+          >
+            <EuiButton
+              color="danger"
+              fill={true}
+              onClick={[Function]}
+              size="s"
+            >
+              Exit setup mode
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </EuiBottomBar>
+</Fragment>
+`;
diff --git a/x-pack/legacy/plugins/monitoring/public/components/renderers/setup_mode.js b/x-pack/legacy/plugins/monitoring/public/components/renderers/setup_mode.js
index f1bfebe7851ca9..a07a26f64acff4 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/renderers/setup_mode.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/renderers/setup_mode.js
@@ -3,10 +3,28 @@
  * 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 { getSetupModeState, initSetupModeState, updateSetupModeData, disableElasticsearchInternalCollection } from '../../lib/setup_mode';
+import React, { Fragment } from 'react';
+import {
+  getSetupModeState,
+  initSetupModeState,
+  updateSetupModeData,
+  disableElasticsearchInternalCollection,
+  toggleSetupMode,
+  setSetupModeMenuItem
+} from '../../lib/setup_mode';
 import { Flyout } from '../metricbeat_migration/flyout';
+import {
+  EuiBottomBar,
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiTextColor,
+  EuiIcon,
+  EuiSpacer
+} from '@elastic/eui';
 import { findNewUuid } from './lib/find_new_uuid';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 export class SetupModeRenderer extends React.Component {
   state = {
@@ -44,6 +62,7 @@ export class SetupModeRenderer extends React.Component {
 
       this.setState(newState);
     });
+    setSetupModeMenuItem();
   }
 
   reset() {
@@ -97,6 +116,50 @@ export class SetupModeRenderer extends React.Component {
     );
   }
 
+  getBottomBar(setupModeState) {
+    if (!setupModeState.enabled) {
+      return null;
+    }
+
+    return (
+      <Fragment>
+        <EuiSpacer size="xxl"/>
+        <EuiBottomBar>
+          <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+            <EuiFlexItem grow={false}>
+              <EuiFlexGroup gutterSize="s">
+                <EuiFlexItem grow={false}>
+                  <EuiTextColor color="ghost">
+                    <FormattedMessage
+                      id="xpack.monitoring.setupMode.description"
+                      defaultMessage="You are in setup mode. The ({flagIcon}) icon indicates configuration options."
+                      values={{
+                        flagIcon: (
+                          <EuiIcon type="flag"/>
+                        )
+                      }}
+                    />
+                  </EuiTextColor>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiFlexGroup gutterSize="s">
+                <EuiFlexItem grow={false}>
+                  <EuiButton color="danger" fill size="s" onClick={() => toggleSetupMode(false)}>
+                    {i18n.translate('xpack.monitoring.setupMode.exit', {
+                      defaultMessage: `Exit setup mode`
+                    })}
+                  </EuiButton>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiBottomBar>
+      </Fragment>
+    );
+  }
+
   async shortcutToFinishMigration() {
     await disableElasticsearchInternalCollection();
     await updateSetupModeData();
@@ -130,6 +193,7 @@ export class SetupModeRenderer extends React.Component {
         closeFlyout: () => this.setState({ isFlyoutOpen: false }),
       },
       flyoutComponent: this.getFlyout(data, meta),
+      bottomBarComponent: this.getBottomBar(setupModeState)
     });
   }
 }
diff --git a/x-pack/legacy/plugins/monitoring/public/components/renderers/setup_mode.test.js b/x-pack/legacy/plugins/monitoring/public/components/renderers/setup_mode.test.js
new file mode 100644
index 00000000000000..fbcf8db3826143
--- /dev/null
+++ b/x-pack/legacy/plugins/monitoring/public/components/renderers/setup_mode.test.js
@@ -0,0 +1,277 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { Fragment } from 'react';
+import { shallow } from 'enzyme';
+import { ELASTICSEARCH_SYSTEM_ID } from '../../../common/constants';
+
+describe('SetupModeRenderer', () => {
+  beforeEach(() => jest.resetModules());
+
+  it('should render with setup mode disabled', () => {
+    jest.doMock('../../lib/setup_mode', () => ({
+      getSetupModeState: () => ({
+        enabled: false
+      }),
+      initSetupModeState: () => {},
+      updateSetupModeData: () => {},
+      setSetupModeMenuItem: () => {}
+    }));
+    const SetupModeRenderer = require('./setup_mode').SetupModeRenderer;
+
+    const ChildComponent = () => <h1>Hi</h1>;
+    const scope = {};
+    const injector = {};
+    const component = shallow(
+      <SetupModeRenderer
+        scope={scope}
+        injector={injector}
+        productName={ELASTICSEARCH_SYSTEM_ID}
+        render={({ setupMode, flyoutComponent, bottomBarComponent }) => (
+          <Fragment>
+            {flyoutComponent}
+            <ChildComponent setupMode={setupMode}/>
+            {bottomBarComponent}
+          </Fragment>
+        )}
+      />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  it('should render with setup mode enabled', () => {
+    jest.doMock('../../lib/setup_mode', () => ({
+      getSetupModeState: () => ({
+        enabled: true,
+        data: {
+          elasticsearch: {},
+          _meta: {}
+        }
+      }),
+      initSetupModeState: () => {},
+      updateSetupModeData: () => {},
+      setSetupModeMenuItem: () => {}
+    }));
+    const SetupModeRenderer = require('./setup_mode').SetupModeRenderer;
+
+    const ChildComponent = () => <h1>Hi</h1>;
+    const scope = {};
+    const injector = {};
+    const component = shallow(
+      <SetupModeRenderer
+        scope={scope}
+        injector={injector}
+        productName={ELASTICSEARCH_SYSTEM_ID}
+        render={({ setupMode, flyoutComponent, bottomBarComponent }) => (
+          <Fragment>
+            {flyoutComponent}
+            <ChildComponent setupMode={setupMode}/>
+            {bottomBarComponent}
+          </Fragment>
+        )}
+      />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  it('should render the flyout open', () => {
+    jest.doMock('../../lib/setup_mode', () => ({
+      getSetupModeState: () => ({
+        enabled: true,
+        data: {
+          elasticsearch: {
+            byUuid: {
+
+            }
+          },
+          _meta: {}
+        }
+      }),
+      initSetupModeState: () => {},
+      updateSetupModeData: () => {},
+      setSetupModeMenuItem: () => {}
+    }));
+    const SetupModeRenderer = require('./setup_mode').SetupModeRenderer;
+
+    const ChildComponent = () => <h1>Hi</h1>;
+    const scope = {};
+    const injector = {};
+    const component = shallow(
+      <SetupModeRenderer
+        scope={scope}
+        injector={injector}
+        productName={ELASTICSEARCH_SYSTEM_ID}
+        render={({ setupMode, flyoutComponent, bottomBarComponent }) => (
+          <Fragment>
+            {flyoutComponent}
+            <ChildComponent setupMode={setupMode}/>
+            {bottomBarComponent}
+          </Fragment>
+        )}
+      />
+    );
+
+    component.setState({ isFlyoutOpen: true });
+    component.update();
+    expect(component).toMatchSnapshot();
+  });
+
+  it('should handle a new node/instance scenario', () => {
+    jest.doMock('../../lib/setup_mode', () => ({
+      getSetupModeState: () => ({
+        enabled: true,
+        data: {
+          elasticsearch: {
+            byUuid: {}
+          },
+          _meta: {}
+        }
+      }),
+      initSetupModeState: () => {},
+      updateSetupModeData: () => {},
+      setSetupModeMenuItem: () => {}
+    }));
+    const SetupModeRenderer = require('./setup_mode').SetupModeRenderer;
+
+    const ChildComponent = () => <h1>Hi</h1>;
+    const scope = {};
+    const injector = {};
+    const component = shallow(
+      <SetupModeRenderer
+        scope={scope}
+        injector={injector}
+        productName={ELASTICSEARCH_SYSTEM_ID}
+        render={({ setupMode, flyoutComponent, bottomBarComponent }) => (
+          <Fragment>
+            {flyoutComponent}
+            <ChildComponent setupMode={setupMode}/>
+            {bottomBarComponent}
+          </Fragment>
+        )}
+      />
+    );
+
+    component.setState({ isFlyoutOpen: true, instance: null, isSettingUpNew: true });
+    component.update();
+    expect(component.find('Flyout').prop('product')).toEqual({ isNetNewUser: true });
+  });
+
+  it('should use a new product found in the api response', () => {
+    const newProduct = { id: 1 };
+
+    jest.useFakeTimers();
+    jest.doMock('../../lib/setup_mode', () => ({
+      getSetupModeState: () => ({
+        enabled: true,
+        data: {
+          elasticsearch: {
+            byUuid: {
+              2: newProduct
+            }
+          },
+          _meta: {}
+        }
+      }),
+      initSetupModeState: (_scope, _injectir, cb) => {
+        setTimeout(() => {
+          cb({
+            elasticsearch: {
+              byUuid: {
+                1: {}
+              }
+            }
+          });
+        }, 500);
+      },
+      updateSetupModeData: () => {},
+      setSetupModeMenuItem: () => {}
+    }));
+    const SetupModeRenderer = require('./setup_mode').SetupModeRenderer;
+
+    const ChildComponent = () => <h1>Hi</h1>;
+    const scope = {};
+    const injector = {};
+    const component = shallow(
+      <SetupModeRenderer
+        scope={scope}
+        injector={injector}
+        productName={ELASTICSEARCH_SYSTEM_ID}
+        render={({ setupMode, flyoutComponent, bottomBarComponent }) => (
+          <Fragment>
+            {flyoutComponent}
+            <ChildComponent setupMode={setupMode}/>
+            {bottomBarComponent}
+          </Fragment>
+        )}
+      />
+    );
+
+    component.setState({ isFlyoutOpen: true });
+    component.update();
+
+    jest.advanceTimersByTime(1000);
+    expect(component.state('renderState')).toBe(true);
+    expect(component.state('newProduct')).toBe(newProduct);
+    expect(component.find('Flyout').prop('product')).toBe(newProduct);
+  });
+
+  it('should set the top menu items', () => {
+    const newProduct = { id: 1 };
+
+    const setSetupModeMenuItem = jest.fn();
+    jest.doMock('../../lib/setup_mode', () => ({
+      getSetupModeState: () => ({
+        enabled: true,
+        data: {
+          elasticsearch: {
+            byUuid: {
+              2: newProduct
+            }
+          },
+          _meta: {}
+        }
+      }),
+      initSetupModeState: (_scope, _injectir, cb) => {
+        setTimeout(() => {
+          cb({
+            elasticsearch: {
+              byUuid: {
+                1: {}
+              }
+            }
+          });
+        }, 500);
+      },
+      updateSetupModeData: () => {},
+      setSetupModeMenuItem,
+    }));
+    const SetupModeRenderer = require('./setup_mode').SetupModeRenderer;
+
+    const ChildComponent = () => <h1>Hi</h1>;
+    const scope = {};
+    const injector = {};
+    const component = shallow(
+      <SetupModeRenderer
+        scope={scope}
+        injector={injector}
+        productName={ELASTICSEARCH_SYSTEM_ID}
+        render={({ setupMode, flyoutComponent, bottomBarComponent }) => (
+          <Fragment>
+            {flyoutComponent}
+            <ChildComponent setupMode={setupMode}/>
+            {bottomBarComponent}
+          </Fragment>
+        )}
+      />
+    );
+
+    component.setState({ isFlyoutOpen: true });
+    component.update();
+    expect(setSetupModeMenuItem).toHaveBeenCalled();
+  });
+});
diff --git a/x-pack/legacy/plugins/monitoring/public/components/setup_mode/__snapshots__/badge.test.js.snap b/x-pack/legacy/plugins/monitoring/public/components/setup_mode/__snapshots__/badge.test.js.snap
new file mode 100644
index 00000000000000..8aba968f8384d6
--- /dev/null
+++ b/x-pack/legacy/plugins/monitoring/public/components/setup_mode/__snapshots__/badge.test.js.snap
@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`setupMode SetupModeBadge internal collection should render each product consistently 1`] = `
+<EuiBadge
+  color="danger"
+  iconType="flag"
+  onClick={[Function]}
+  onClickAriaLabel="Monitor with Metricbeat"
+>
+  Monitor with Metricbeat
+</EuiBadge>
+`;
+
+exports[`setupMode SetupModeBadge metricbeat collection should render each product consistently 1`] = `
+<EuiBadge
+  color="primary"
+  iconType="flag"
+>
+  Monitored with Metricbeat
+</EuiBadge>
+`;
+
+exports[`setupMode SetupModeBadge net new user should render each product consistently 1`] = `
+<EuiBadge
+  color="danger"
+  iconType="flag"
+  onClick={[Function]}
+  onClickAriaLabel="Monitor with Metricbeat"
+>
+  Monitor with Metricbeat
+</EuiBadge>
+`;
+
+exports[`setupMode SetupModeBadge partially migrated should render each product consistently 1`] = `
+<EuiBadge
+  color="warning"
+  iconType="flag"
+  onClick={[Function]}
+  onClickAriaLabel="Disable self monitoring"
+>
+  Disable self monitoring
+</EuiBadge>
+`;
+
+exports[`setupMode SetupModeBadge should use a text status if internal collection cannot be disabled yet for elasticsearch 1`] = `
+<Fragment>
+  <EuiIcon
+    type="flag"
+  />
+   
+  <EuiTextColor
+    color="warning"
+    size="xs"
+  >
+    Some nodes use only self monitoring
+  </EuiTextColor>
+</Fragment>
+`;
+
+exports[`setupMode SetupModeBadge unknown should render each product consistently 1`] = `
+<EuiBadge
+  color="danger"
+  iconType="flag"
+>
+  N/A
+</EuiBadge>
+`;
diff --git a/x-pack/legacy/plugins/monitoring/public/components/setup_mode/__snapshots__/formatting.test.js.snap b/x-pack/legacy/plugins/monitoring/public/components/setup_mode/__snapshots__/formatting.test.js.snap
new file mode 100644
index 00000000000000..6ec8575a2ab391
--- /dev/null
+++ b/x-pack/legacy/plugins/monitoring/public/components/setup_mode/__snapshots__/formatting.test.js.snap
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`setupMode formatting formatProductName should format the product name for apm 1`] = `"APM"`;
+
+exports[`setupMode formatting formatProductName should format the product name for beats 1`] = `"Beats"`;
+
+exports[`setupMode formatting formatProductName should format the product name for elasticsearch 1`] = `"Elasticsearch"`;
+
+exports[`setupMode formatting formatProductName should format the product name for kibana 1`] = `"Kibana"`;
+
+exports[`setupMode formatting formatProductName should format the product name for logstash 1`] = `"Logstash"`;
+
+exports[`setupMode formatting getIdentifier should get the plural identifier for apm 1`] = `"servers"`;
+
+exports[`setupMode formatting getIdentifier should get the plural identifier for beats 1`] = `"instances"`;
+
+exports[`setupMode formatting getIdentifier should get the plural identifier for elasticsearch 1`] = `"nodes"`;
+
+exports[`setupMode formatting getIdentifier should get the plural identifier for kibana 1`] = `"instances"`;
+
+exports[`setupMode formatting getIdentifier should get the plural identifier for logstash 1`] = `"nodes"`;
+
+exports[`setupMode formatting getIdentifier should get the singular identifier for apm 1`] = `"server"`;
+
+exports[`setupMode formatting getIdentifier should get the singular identifier for beats 1`] = `"instance"`;
+
+exports[`setupMode formatting getIdentifier should get the singular identifier for elasticsearch 1`] = `"node"`;
+
+exports[`setupMode formatting getIdentifier should get the singular identifier for kibana 1`] = `"instance"`;
+
+exports[`setupMode formatting getIdentifier should get the singular identifier for logstash 1`] = `"node"`;
diff --git a/x-pack/legacy/plugins/monitoring/public/components/setup_mode/__snapshots__/listing_callout.test.js.snap b/x-pack/legacy/plugins/monitoring/public/components/setup_mode/__snapshots__/listing_callout.test.js.snap
new file mode 100644
index 00000000000000..6f6861a53bf3f0
--- /dev/null
+++ b/x-pack/legacy/plugins/monitoring/public/components/setup_mode/__snapshots__/listing_callout.test.js.snap
@@ -0,0 +1,406 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`setupMode ListingCallOut all internally collected should render for apm 1`] = `
+<Fragment>
+  <EuiCallOut
+    color="danger"
+    iconType="flag"
+    title="Monitor with Metricbeat"
+  >
+    <p>
+      These APM servers are self monitored.
+                Click 'Monitor with Metricbeat' to migrate.
+    </p>
+  </EuiCallOut>
+  <EuiSpacer
+    size="m"
+  />
+</Fragment>
+`;
+
+exports[`setupMode ListingCallOut all internally collected should render for beats 1`] = `
+<Fragment>
+  <EuiCallOut
+    color="danger"
+    iconType="flag"
+    title="Monitor with Metricbeat"
+  >
+    <p>
+      These Beats instances are self monitored.
+                Click 'Monitor with Metricbeat' to migrate.
+    </p>
+  </EuiCallOut>
+  <EuiSpacer
+    size="m"
+  />
+</Fragment>
+`;
+
+exports[`setupMode ListingCallOut all internally collected should render for elasticsearch 1`] = `
+<Fragment>
+  <EuiCallOut
+    color="danger"
+    iconType="flag"
+    title="Monitor with Metricbeat"
+  >
+    <p>
+      These Elasticsearch nodes are self monitored.
+                Click 'Monitor with Metricbeat' to migrate.
+    </p>
+  </EuiCallOut>
+  <EuiSpacer
+    size="m"
+  />
+</Fragment>
+`;
+
+exports[`setupMode ListingCallOut all internally collected should render for kibana 1`] = `
+<Fragment>
+  <EuiCallOut
+    color="danger"
+    iconType="flag"
+    title="Monitor with Metricbeat"
+  >
+    <p>
+      These Kibana instances are self monitored.
+                Click 'Monitor with Metricbeat' to migrate.
+    </p>
+  </EuiCallOut>
+  <EuiSpacer
+    size="m"
+  />
+</Fragment>
+`;
+
+exports[`setupMode ListingCallOut all internally collected should render for logstash 1`] = `
+<Fragment>
+  <EuiCallOut
+    color="danger"
+    iconType="flag"
+    title="Monitor with Metricbeat"
+  >
+    <p>
+      These Logstash nodes are self monitored.
+                Click 'Monitor with Metricbeat' to migrate.
+    </p>
+  </EuiCallOut>
+  <EuiSpacer
+    size="m"
+  />
+</Fragment>
+`;
+
+exports[`setupMode ListingCallOut all migrated should render for apm 1`] = `
+<Fragment>
+  <EuiCallOut
+    color="success"
+    iconType="flag"
+    title="Metricbeat is monitoring all servers."
+  />
+  <EuiSpacer
+    size="m"
+  />
+</Fragment>
+`;
+
+exports[`setupMode ListingCallOut all migrated should render for beats 1`] = `
+<Fragment>
+  <EuiCallOut
+    color="success"
+    iconType="flag"
+    title="Metricbeat is monitoring all instances."
+  />
+  <EuiSpacer
+    size="m"
+  />
+</Fragment>
+`;
+
+exports[`setupMode ListingCallOut all migrated should render for elasticsearch 1`] = `
+<Fragment>
+  <EuiCallOut
+    color="success"
+    iconType="flag"
+    title="Metricbeat is monitoring all nodes."
+  />
+  <EuiSpacer
+    size="m"
+  />
+</Fragment>
+`;
+
+exports[`setupMode ListingCallOut all migrated should render for kibana 1`] = `
+<Fragment>
+  <EuiCallOut
+    color="success"
+    iconType="flag"
+    title="Metricbeat is monitoring all instances."
+  />
+  <EuiSpacer
+    size="m"
+  />
+</Fragment>
+`;
+
+exports[`setupMode ListingCallOut all migrated should render for logstash 1`] = `
+<Fragment>
+  <EuiCallOut
+    color="success"
+    iconType="flag"
+    title="Metricbeat is monitoring all nodes."
+  />
+  <EuiSpacer
+    size="m"
+  />
+</Fragment>
+`;
+
+exports[`setupMode ListingCallOut all partially migrated should render for apm 1`] = `
+<Fragment>
+  <EuiCallOut
+    color="warning"
+    iconType="flag"
+    title="Disable self monitoring"
+  >
+    <p>
+      Metricbeat is now monitoring your APM servers. Disable self monitoring to finish the migration.
+    </p>
+  </EuiCallOut>
+  <EuiSpacer
+    size="m"
+  />
+</Fragment>
+`;
+
+exports[`setupMode ListingCallOut all partially migrated should render for beats 1`] = `
+<Fragment>
+  <EuiCallOut
+    color="warning"
+    iconType="flag"
+    title="Disable self monitoring"
+  >
+    <p>
+      Metricbeat is now monitoring your Beats instances. Disable self monitoring to finish the migration.
+    </p>
+  </EuiCallOut>
+  <EuiSpacer
+    size="m"
+  />
+</Fragment>
+`;
+
+exports[`setupMode ListingCallOut all partially migrated should render for elasticsearch 1`] = `
+<Fragment>
+  <EuiCallOut
+    color="warning"
+    iconType="flag"
+    title="Disable self monitoring"
+  >
+    <p>
+      Metricbeat is now monitoring your Elasticsearch nodes. Disable self monitoring to finish the migration.
+    </p>
+  </EuiCallOut>
+  <EuiSpacer
+    size="m"
+  />
+</Fragment>
+`;
+
+exports[`setupMode ListingCallOut all partially migrated should render for kibana 1`] = `
+<Fragment>
+  <EuiCallOut
+    color="warning"
+    iconType="flag"
+    title="Disable self monitoring"
+  >
+    <p>
+      Metricbeat is now monitoring your Kibana instances. Disable self monitoring to finish the migration.
+    </p>
+  </EuiCallOut>
+  <EuiSpacer
+    size="m"
+  />
+</Fragment>
+`;
+
+exports[`setupMode ListingCallOut all partially migrated should render for logstash 1`] = `
+<Fragment>
+  <EuiCallOut
+    color="warning"
+    iconType="flag"
+    title="Disable self monitoring"
+  >
+    <p>
+      Metricbeat is now monitoring your Logstash nodes. Disable self monitoring to finish the migration.
+    </p>
+  </EuiCallOut>
+  <EuiSpacer
+    size="m"
+  />
+</Fragment>
+`;
+
+exports[`setupMode ListingCallOut no detectable instances should render for apm 1`] = `
+<Fragment>
+  <EuiCallOut
+    iconType="flag"
+    title="No APM servers detected"
+  >
+    <p>
+      Click 'Set up monitoring' to start monitoring with Metricbeat.
+    </p>
+  </EuiCallOut>
+  <EuiSpacer
+    size="m"
+  />
+</Fragment>
+`;
+
+exports[`setupMode ListingCallOut no detectable instances should render for beats 1`] = `
+<Fragment>
+  <EuiCallOut
+    iconType="flag"
+    title="No Beats instances detected"
+  >
+    <p>
+      Click 'Set up monitoring' to start monitoring with Metricbeat.
+    </p>
+  </EuiCallOut>
+  <EuiSpacer
+    size="m"
+  />
+</Fragment>
+`;
+
+exports[`setupMode ListingCallOut no detectable instances should render for elasticsearch 1`] = `
+<Fragment>
+  <EuiCallOut
+    iconType="flag"
+    title="No Elasticsearch nodes detected"
+  >
+    <p>
+      Click 'Set up monitoring' to start monitoring with Metricbeat.
+    </p>
+  </EuiCallOut>
+  <EuiSpacer
+    size="m"
+  />
+</Fragment>
+`;
+
+exports[`setupMode ListingCallOut no detectable instances should render for kibana 1`] = `
+<Fragment>
+  <EuiCallOut
+    iconType="flag"
+    title="No Kibana instances detected"
+  >
+    <p>
+      Click 'Set up monitoring' to start monitoring with Metricbeat.
+    </p>
+  </EuiCallOut>
+  <EuiSpacer
+    size="m"
+  />
+</Fragment>
+`;
+
+exports[`setupMode ListingCallOut no detectable instances should render for logstash 1`] = `
+<Fragment>
+  <EuiCallOut
+    iconType="flag"
+    title="No Logstash nodes detected"
+  >
+    <p>
+      Click 'Set up monitoring' to start monitoring with Metricbeat.
+    </p>
+  </EuiCallOut>
+  <EuiSpacer
+    size="m"
+  />
+</Fragment>
+`;
+
+exports[`setupMode ListingCallOut only detectable instances should render for apm 1`] = `
+<Fragment>
+  <EuiCallOut
+    color="warning"
+    iconType="flag"
+    title="APM server detected"
+  >
+    <p>
+      Click 'Set up monitoring' below to start monitoring this server.
+    </p>
+  </EuiCallOut>
+  <EuiSpacer
+    size="m"
+  />
+</Fragment>
+`;
+
+exports[`setupMode ListingCallOut only detectable instances should render for beats 1`] = `
+<Fragment>
+  <EuiCallOut
+    color="warning"
+    iconType="flag"
+    title="Beats instance detected"
+  >
+    <p>
+      Click 'Set up monitoring' below to start monitoring this instance.
+    </p>
+  </EuiCallOut>
+  <EuiSpacer
+    size="m"
+  />
+</Fragment>
+`;
+
+exports[`setupMode ListingCallOut only detectable instances should render for elasticsearch 1`] = `
+<Fragment>
+  <EuiCallOut
+    color="warning"
+    iconType="flag"
+    title="Elasticsearch node detected"
+  >
+    <p>
+      Click 'Set up monitoring' below to start monitoring this node.
+    </p>
+  </EuiCallOut>
+  <EuiSpacer
+    size="m"
+  />
+</Fragment>
+`;
+
+exports[`setupMode ListingCallOut only detectable instances should render for kibana 1`] = `
+<Fragment>
+  <EuiCallOut
+    color="warning"
+    iconType="flag"
+    title="Kibana instance detected"
+  >
+    <p>
+      Click 'Set up monitoring' below to start monitoring this instance.
+    </p>
+  </EuiCallOut>
+  <EuiSpacer
+    size="m"
+  />
+</Fragment>
+`;
+
+exports[`setupMode ListingCallOut only detectable instances should render for logstash 1`] = `
+<Fragment>
+  <EuiCallOut
+    color="warning"
+    iconType="flag"
+    title="Logstash node detected"
+  >
+    <p>
+      Click 'Set up monitoring' below to start monitoring this node.
+    </p>
+  </EuiCallOut>
+  <EuiSpacer
+    size="m"
+  />
+</Fragment>
+`;
diff --git a/x-pack/legacy/plugins/monitoring/public/components/setup_mode/__snapshots__/tooltip.test.js.snap b/x-pack/legacy/plugins/monitoring/public/components/setup_mode/__snapshots__/tooltip.test.js.snap
new file mode 100644
index 00000000000000..49ce0e84fdaccc
--- /dev/null
+++ b/x-pack/legacy/plugins/monitoring/public/components/setup_mode/__snapshots__/tooltip.test.js.snap
@@ -0,0 +1,526 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`setupMode SetupModeTooltip allInternalCollection should render for apm 1`] = `
+<EuiFlexItem
+  grow={false}
+>
+  <EuiToolTip
+    content="At least one server isn’t monitored using Metricbeat. Click to view status."
+    delay="regular"
+    position="top"
+  >
+    <EuiBadge
+      color="danger"
+      iconType="flag"
+      onClick={[Function]}
+      onClickAriaLabel="Self monitoring"
+    >
+      Self monitoring
+    </EuiBadge>
+  </EuiToolTip>
+</EuiFlexItem>
+`;
+
+exports[`setupMode SetupModeTooltip allInternalCollection should render for beats 1`] = `
+<EuiFlexItem
+  grow={false}
+>
+  <EuiToolTip
+    content="At least one instance isn’t monitored using Metricbeat. Click to view status."
+    delay="regular"
+    position="top"
+  >
+    <EuiBadge
+      color="danger"
+      iconType="flag"
+      onClick={[Function]}
+      onClickAriaLabel="Self monitoring"
+    >
+      Self monitoring
+    </EuiBadge>
+  </EuiToolTip>
+</EuiFlexItem>
+`;
+
+exports[`setupMode SetupModeTooltip allInternalCollection should render for elasticsearch 1`] = `
+<EuiFlexItem
+  grow={false}
+>
+  <EuiToolTip
+    content="At least one node isn’t monitored using Metricbeat. Click to view status."
+    delay="regular"
+    position="top"
+  >
+    <EuiBadge
+      color="danger"
+      iconType="flag"
+      onClick={[Function]}
+      onClickAriaLabel="Self monitoring"
+    >
+      Self monitoring
+    </EuiBadge>
+  </EuiToolTip>
+</EuiFlexItem>
+`;
+
+exports[`setupMode SetupModeTooltip allInternalCollection should render for kibana 1`] = `
+<EuiFlexItem
+  grow={false}
+>
+  <EuiToolTip
+    content="At least one instance isn’t monitored using Metricbeat. Click to view status."
+    delay="regular"
+    position="top"
+  >
+    <EuiBadge
+      color="danger"
+      iconType="flag"
+      onClick={[Function]}
+      onClickAriaLabel="Self monitoring"
+    >
+      Self monitoring
+    </EuiBadge>
+  </EuiToolTip>
+</EuiFlexItem>
+`;
+
+exports[`setupMode SetupModeTooltip allInternalCollection should render for logstash 1`] = `
+<EuiFlexItem
+  grow={false}
+>
+  <EuiToolTip
+    content="At least one node isn’t monitored using Metricbeat. Click to view status."
+    delay="regular"
+    position="top"
+  >
+    <EuiBadge
+      color="danger"
+      iconType="flag"
+      onClick={[Function]}
+      onClickAriaLabel="Self monitoring"
+    >
+      Self monitoring
+    </EuiBadge>
+  </EuiToolTip>
+</EuiFlexItem>
+`;
+
+exports[`setupMode SetupModeTooltip allMonitoredByMetricbeat should render for apm 1`] = `
+<EuiFlexItem
+  grow={false}
+>
+  <EuiToolTip
+    content="Metricbeat is monitoring all servers."
+    delay="regular"
+    position="top"
+  >
+    <EuiBadge
+      color="secondary"
+      iconType="flag"
+      onClick={[Function]}
+      onClickAriaLabel="Metricbeat monitoring"
+    >
+      Metricbeat monitoring
+    </EuiBadge>
+  </EuiToolTip>
+</EuiFlexItem>
+`;
+
+exports[`setupMode SetupModeTooltip allMonitoredByMetricbeat should render for beats 1`] = `
+<EuiFlexItem
+  grow={false}
+>
+  <EuiToolTip
+    content="Metricbeat is monitoring all instances."
+    delay="regular"
+    position="top"
+  >
+    <EuiBadge
+      color="secondary"
+      iconType="flag"
+      onClick={[Function]}
+      onClickAriaLabel="Metricbeat monitoring"
+    >
+      Metricbeat monitoring
+    </EuiBadge>
+  </EuiToolTip>
+</EuiFlexItem>
+`;
+
+exports[`setupMode SetupModeTooltip allMonitoredByMetricbeat should render for elasticsearch 1`] = `
+<EuiFlexItem
+  grow={false}
+>
+  <EuiToolTip
+    content="Metricbeat is monitoring all nodes."
+    delay="regular"
+    position="top"
+  >
+    <EuiBadge
+      color="secondary"
+      iconType="flag"
+      onClick={[Function]}
+      onClickAriaLabel="Metricbeat monitoring"
+    >
+      Metricbeat monitoring
+    </EuiBadge>
+  </EuiToolTip>
+</EuiFlexItem>
+`;
+
+exports[`setupMode SetupModeTooltip allMonitoredByMetricbeat should render for kibana 1`] = `
+<EuiFlexItem
+  grow={false}
+>
+  <EuiToolTip
+    content="Metricbeat is monitoring all instances."
+    delay="regular"
+    position="top"
+  >
+    <EuiBadge
+      color="secondary"
+      iconType="flag"
+      onClick={[Function]}
+      onClickAriaLabel="Metricbeat monitoring"
+    >
+      Metricbeat monitoring
+    </EuiBadge>
+  </EuiToolTip>
+</EuiFlexItem>
+`;
+
+exports[`setupMode SetupModeTooltip allMonitoredByMetricbeat should render for logstash 1`] = `
+<EuiFlexItem
+  grow={false}
+>
+  <EuiToolTip
+    content="Metricbeat is monitoring all nodes."
+    delay="regular"
+    position="top"
+  >
+    <EuiBadge
+      color="secondary"
+      iconType="flag"
+      onClick={[Function]}
+      onClickAriaLabel="Metricbeat monitoring"
+    >
+      Metricbeat monitoring
+    </EuiBadge>
+  </EuiToolTip>
+</EuiFlexItem>
+`;
+
+exports[`setupMode SetupModeTooltip internalCollectionOn should render for apm 1`] = `
+<EuiFlexItem
+  grow={false}
+>
+  <EuiToolTip
+    content="Metricbeat is monitoring all servers. Click to view servers and disable self monitoring."
+    delay="regular"
+    position="top"
+  >
+    <EuiBadge
+      color="warning"
+      iconType="flag"
+      onClick={[Function]}
+      onClickAriaLabel="Self monitoring is on"
+    >
+      Self monitoring is on
+    </EuiBadge>
+  </EuiToolTip>
+</EuiFlexItem>
+`;
+
+exports[`setupMode SetupModeTooltip internalCollectionOn should render for beats 1`] = `
+<EuiFlexItem
+  grow={false}
+>
+  <EuiToolTip
+    content="Metricbeat is monitoring all instances. Click to view instances and disable self monitoring."
+    delay="regular"
+    position="top"
+  >
+    <EuiBadge
+      color="warning"
+      iconType="flag"
+      onClick={[Function]}
+      onClickAriaLabel="Self monitoring is on"
+    >
+      Self monitoring is on
+    </EuiBadge>
+  </EuiToolTip>
+</EuiFlexItem>
+`;
+
+exports[`setupMode SetupModeTooltip internalCollectionOn should render for elasticsearch 1`] = `
+<EuiFlexItem
+  grow={false}
+>
+  <EuiToolTip
+    content="Metricbeat is monitoring all nodes. Click to view nodes and disable self monitoring."
+    delay="regular"
+    position="top"
+  >
+    <EuiBadge
+      color="warning"
+      iconType="flag"
+      onClick={[Function]}
+      onClickAriaLabel="Self monitoring is on"
+    >
+      Self monitoring is on
+    </EuiBadge>
+  </EuiToolTip>
+</EuiFlexItem>
+`;
+
+exports[`setupMode SetupModeTooltip internalCollectionOn should render for kibana 1`] = `
+<EuiFlexItem
+  grow={false}
+>
+  <EuiToolTip
+    content="Metricbeat is monitoring all instances. Click to view instances and disable self monitoring."
+    delay="regular"
+    position="top"
+  >
+    <EuiBadge
+      color="warning"
+      iconType="flag"
+      onClick={[Function]}
+      onClickAriaLabel="Self monitoring is on"
+    >
+      Self monitoring is on
+    </EuiBadge>
+  </EuiToolTip>
+</EuiFlexItem>
+`;
+
+exports[`setupMode SetupModeTooltip internalCollectionOn should render for logstash 1`] = `
+<EuiFlexItem
+  grow={false}
+>
+  <EuiToolTip
+    content="Metricbeat is monitoring all nodes. Click to view nodes and disable self monitoring."
+    delay="regular"
+    position="top"
+  >
+    <EuiBadge
+      color="warning"
+      iconType="flag"
+      onClick={[Function]}
+      onClickAriaLabel="Self monitoring is on"
+    >
+      Self monitoring is on
+    </EuiBadge>
+  </EuiToolTip>
+</EuiFlexItem>
+`;
+
+exports[`setupMode SetupModeTooltip no detectable instances should render for apm 1`] = `
+<EuiFlexItem
+  grow={false}
+>
+  <EuiToolTip
+    content="We did not detect any usage. Click to view servers."
+    delay="regular"
+    position="top"
+  >
+    <EuiBadge
+      color="hollow"
+      iconType="flag"
+      onClick={[Function]}
+      onClickAriaLabel="No usage"
+    >
+      No usage
+    </EuiBadge>
+  </EuiToolTip>
+</EuiFlexItem>
+`;
+
+exports[`setupMode SetupModeTooltip no detectable instances should render for beats 1`] = `
+<EuiFlexItem
+  grow={false}
+>
+  <EuiToolTip
+    content="We did not detect any usage. Click to view instances."
+    delay="regular"
+    position="top"
+  >
+    <EuiBadge
+      color="hollow"
+      iconType="flag"
+      onClick={[Function]}
+      onClickAriaLabel="No usage"
+    >
+      No usage
+    </EuiBadge>
+  </EuiToolTip>
+</EuiFlexItem>
+`;
+
+exports[`setupMode SetupModeTooltip no detectable instances should render for elasticsearch 1`] = `
+<EuiFlexItem
+  grow={false}
+>
+  <EuiToolTip
+    content="We did not detect any usage. Click to view nodes."
+    delay="regular"
+    position="top"
+  >
+    <EuiBadge
+      color="hollow"
+      iconType="flag"
+      onClick={[Function]}
+      onClickAriaLabel="No usage"
+    >
+      No usage
+    </EuiBadge>
+  </EuiToolTip>
+</EuiFlexItem>
+`;
+
+exports[`setupMode SetupModeTooltip no detectable instances should render for kibana 1`] = `
+<EuiFlexItem
+  grow={false}
+>
+  <EuiToolTip
+    content="We did not detect any usage. Click to view instances."
+    delay="regular"
+    position="top"
+  >
+    <EuiBadge
+      color="hollow"
+      iconType="flag"
+      onClick={[Function]}
+      onClickAriaLabel="No usage"
+    >
+      No usage
+    </EuiBadge>
+  </EuiToolTip>
+</EuiFlexItem>
+`;
+
+exports[`setupMode SetupModeTooltip no detectable instances should render for logstash 1`] = `
+<EuiFlexItem
+  grow={false}
+>
+  <EuiToolTip
+    content="We did not detect any usage. Click to view nodes."
+    delay="regular"
+    position="top"
+  >
+    <EuiBadge
+      color="hollow"
+      iconType="flag"
+      onClick={[Function]}
+      onClickAriaLabel="No usage"
+    >
+      No usage
+    </EuiBadge>
+  </EuiToolTip>
+</EuiFlexItem>
+`;
+
+exports[`setupMode SetupModeTooltip only detectable instances should render for apm 1`] = `
+<EuiFlexItem
+  grow={false}
+>
+  <EuiToolTip
+    content="We detected usage of this product. Click to start monitoring."
+    delay="regular"
+    position="top"
+  >
+    <EuiBadge
+      color="warning"
+      iconType="flag"
+      onClick={[Function]}
+      onClickAriaLabel="No monitoring"
+    >
+      No monitoring
+    </EuiBadge>
+  </EuiToolTip>
+</EuiFlexItem>
+`;
+
+exports[`setupMode SetupModeTooltip only detectable instances should render for beats 1`] = `
+<EuiFlexItem
+  grow={false}
+>
+  <EuiToolTip
+    content="We detected usage of this product. Click to start monitoring."
+    delay="regular"
+    position="top"
+  >
+    <EuiBadge
+      color="warning"
+      iconType="flag"
+      onClick={[Function]}
+      onClickAriaLabel="No monitoring"
+    >
+      No monitoring
+    </EuiBadge>
+  </EuiToolTip>
+</EuiFlexItem>
+`;
+
+exports[`setupMode SetupModeTooltip only detectable instances should render for elasticsearch 1`] = `
+<EuiFlexItem
+  grow={false}
+>
+  <EuiToolTip
+    content="We detected usage of this product. Click to start monitoring."
+    delay="regular"
+    position="top"
+  >
+    <EuiBadge
+      color="warning"
+      iconType="flag"
+      onClick={[Function]}
+      onClickAriaLabel="No monitoring"
+    >
+      No monitoring
+    </EuiBadge>
+  </EuiToolTip>
+</EuiFlexItem>
+`;
+
+exports[`setupMode SetupModeTooltip only detectable instances should render for kibana 1`] = `
+<EuiFlexItem
+  grow={false}
+>
+  <EuiToolTip
+    content="We detected usage of this product. Click to start monitoring."
+    delay="regular"
+    position="top"
+  >
+    <EuiBadge
+      color="warning"
+      iconType="flag"
+      onClick={[Function]}
+      onClickAriaLabel="No monitoring"
+    >
+      No monitoring
+    </EuiBadge>
+  </EuiToolTip>
+</EuiFlexItem>
+`;
+
+exports[`setupMode SetupModeTooltip only detectable instances should render for logstash 1`] = `
+<EuiFlexItem
+  grow={false}
+>
+  <EuiToolTip
+    content="We detected usage of this product. Click to start monitoring."
+    delay="regular"
+    position="top"
+  >
+    <EuiBadge
+      color="warning"
+      iconType="flag"
+      onClick={[Function]}
+      onClickAriaLabel="No monitoring"
+    >
+      No monitoring
+    </EuiBadge>
+  </EuiToolTip>
+</EuiFlexItem>
+`;
diff --git a/x-pack/legacy/plugins/monitoring/public/components/setup_mode/badge.js b/x-pack/legacy/plugins/monitoring/public/components/setup_mode/badge.js
new file mode 100644
index 00000000000000..d4dcd2df1fec2c
--- /dev/null
+++ b/x-pack/legacy/plugins/monitoring/public/components/setup_mode/badge.js
@@ -0,0 +1,124 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { Fragment } from 'react';
+import {
+  EuiTextColor,
+  EuiIcon,
+  EuiBadge
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { ELASTICSEARCH_SYSTEM_ID } from '../../../common/constants';
+
+const clickToMonitorWithMetricbeat = i18n.translate('xpack.monitoring.setupMode.clickToMonitorWithMetricbeat', {
+  defaultMessage: 'Monitor with Metricbeat'
+});
+
+const clickToDisableInternalCollection = i18n.translate('xpack.monitoring.setupMode.clickToDisableInternalCollection', {
+  defaultMessage: 'Disable self monitoring'
+});
+
+const monitoredWithMetricbeat = i18n.translate('xpack.monitoring.setupMode.usingMetricbeatCollection', {
+  defaultMessage: 'Monitored with Metricbeat'
+});
+
+const unknown = i18n.translate('xpack.monitoring.setupMode.unknown', {
+  defaultMessage: 'N/A'
+});
+
+export function SetupModeBadge({ setupMode, productName, status, instance, clusterUuid }) {
+  let customAction = null;
+  let customText = null;
+
+  const setupModeData = setupMode.data || {};
+  const setupModeMeta = setupMode.meta || {};
+
+  // Migrating from partially to fully for Elasticsearch involves changing a cluster
+  // setting which impacts all nodes in the cluster so the action text needs to reflect that
+  const allPartiallyMigrated = setupModeData.totalUniquePartiallyMigratedCount === setupModeData.totalUniqueInstanceCount;
+
+  if (status.isPartiallyMigrated && productName === ELASTICSEARCH_SYSTEM_ID) {
+    if (allPartiallyMigrated) {
+      customText = clickToDisableInternalCollection;
+      if (setupModeMeta.liveClusterUuid === clusterUuid) {
+        customAction = setupMode.shortcutToFinishMigration;
+      }
+    }
+    else {
+      return (
+        <Fragment>
+          <EuiIcon type="flag"/>
+          &nbsp;
+          <EuiTextColor color="warning" size="xs">
+            {i18n.translate('xpack.monitoring.setupMode.monitorAllNodes', {
+              defaultMessage: 'Some nodes use only self monitoring'
+            })}
+          </EuiTextColor>
+        </Fragment>
+      );
+    }
+  }
+
+  const badgeProps = {};
+  if (status.isInternalCollector || status.isPartiallyMigrated || status.isNetNewUser) {
+    badgeProps.onClick = customAction ? customAction : () => setupMode.openFlyout(instance);
+  }
+
+
+  let statusText = null;
+  if (status.isInternalCollector) {
+    if (badgeProps.onClick) {
+      badgeProps.onClickAriaLabel = customText || clickToMonitorWithMetricbeat;
+    }
+    statusText = (
+      <EuiBadge color="danger" iconType="flag" {...badgeProps}>
+        {customText || clickToMonitorWithMetricbeat}
+      </EuiBadge>
+    );
+  }
+  else if (status.isPartiallyMigrated) {
+    if (badgeProps.onClick) {
+      badgeProps.onClickAriaLabel = customText || clickToDisableInternalCollection;
+    }
+    statusText = (
+      <EuiBadge color="warning" iconType="flag" {...badgeProps}>
+        {customText || clickToDisableInternalCollection}
+      </EuiBadge>
+    );
+  }
+  else if (status.isFullyMigrated) {
+    if (badgeProps.onClick) {
+      badgeProps.onClickAriaLabel = customText || monitoredWithMetricbeat;
+    }
+    statusText = (
+      <EuiBadge color="primary" iconType="flag" {...badgeProps}>
+        {customText || monitoredWithMetricbeat}
+      </EuiBadge>
+    );
+  }
+  else if (status.isNetNewUser) {
+    if (badgeProps.onClick) {
+      badgeProps.onClickAriaLabel = customText || clickToMonitorWithMetricbeat;
+    }
+    statusText = (
+      <EuiBadge color="danger" iconType="flag" {...badgeProps}>
+        {customText || clickToMonitorWithMetricbeat}
+      </EuiBadge>
+    );
+  }
+  else {
+    if (badgeProps.onClick) {
+      badgeProps.onClickAriaLabel = customText || unknown;
+    }
+    statusText = (
+      <EuiBadge color="danger" iconType="flag" {...badgeProps}>
+        {customText || unknown}
+      </EuiBadge>
+    );
+  }
+
+  return statusText;
+}
diff --git a/x-pack/legacy/plugins/monitoring/public/components/setup_mode/badge.test.js b/x-pack/legacy/plugins/monitoring/public/components/setup_mode/badge.test.js
new file mode 100644
index 00000000000000..55cc9eebb9531a
--- /dev/null
+++ b/x-pack/legacy/plugins/monitoring/public/components/setup_mode/badge.test.js
@@ -0,0 +1,168 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { SetupModeBadge } from './badge';
+import {
+  ELASTICSEARCH_SYSTEM_ID,
+  KIBANA_SYSTEM_ID,
+  BEATS_SYSTEM_ID,
+  APM_SYSTEM_ID,
+  LOGSTASH_SYSTEM_ID
+} from '../../../common/constants';
+
+const STATUSES = [
+  {
+    name: 'internal collection',
+    status: {
+      isInternalCollector: true
+    }
+  },
+  {
+    name: 'partially migrated',
+    status: {
+      isPartiallyMigrated: true
+    }
+  },
+  {
+    name: 'metricbeat collection',
+    status: {
+      isFullyMigrated: true
+    }
+  },
+  {
+    name: 'net new user',
+    status: {
+      isNetNewUser: true
+    }
+  },
+  {
+    name: 'unknown',
+    status: {}
+  }
+];
+
+const PRODUCTS = [
+  {
+    name: ELASTICSEARCH_SYSTEM_ID
+  },
+  {
+    name: KIBANA_SYSTEM_ID
+  },
+  {
+    name: LOGSTASH_SYSTEM_ID
+  },
+  {
+    name: BEATS_SYSTEM_ID
+  },
+  {
+    name: APM_SYSTEM_ID
+  }
+];
+
+describe('setupMode SetupModeBadge', () => {
+  for (const status of STATUSES) {
+    describe(`${status.name}`, () => {
+      it('should render each product consistently', () => {
+        let template = null;
+        for (const { name } of PRODUCTS) {
+          const component = shallow(
+            <SetupModeBadge
+              setupMode={{
+                data: {},
+                meta: {}
+              }}
+              status={status.status}
+              productName={name}
+              instance={null}
+            />
+          );
+          if (!template) {
+            template = component;
+            expect(component).toMatchSnapshot();
+          } else {
+            expect(template.debug()).toEqual(component.debug());
+          }
+        }
+      });
+    });
+  }
+
+  it('should call openFlyout when clicked', () => {
+    const openFlyout = jest.fn();
+    const instance = {
+      id: 1
+    };
+    const component = shallow(
+      <SetupModeBadge
+        setupMode={{
+          openFlyout,
+          data: {},
+          meta: {}
+        }}
+        status={{
+          isPartiallyMigrated: true
+        }}
+        productName={ELASTICSEARCH_SYSTEM_ID}
+        instance={instance}
+      />
+    );
+
+    component.find('EuiBadge').simulate('click');
+    expect(openFlyout).toHaveBeenCalledWith(instance);
+  });
+
+  it('should use a custom action for the live elasticsearch cluster', () => {
+    const shortcutToFinishMigration = jest.fn();
+    const component = shallow(
+      <SetupModeBadge
+        setupMode={{
+          shortcutToFinishMigration,
+          data: {
+            totalUniquePartiallyMigratedCount: 1,
+            totalUniqueInstanceCount: 1
+          },
+          meta: {
+            liveClusterUuid: 1
+          }
+        }}
+        clusterUuid={1}
+        status={{
+          isPartiallyMigrated: true
+        }}
+        productName={ELASTICSEARCH_SYSTEM_ID}
+        instance={null}
+      />
+    );
+    component.find('EuiBadge').simulate('click');
+    expect(shortcutToFinishMigration).toHaveBeenCalled();
+  });
+
+  it('should use a text status if internal collection cannot be disabled yet for elasticsearch', () => {
+    const component = shallow(
+      <SetupModeBadge
+        setupMode={{
+          data: {
+            totalUniquePartiallyMigratedCount: 1,
+            totalUniqueInstanceCount: 2
+          },
+          meta: {
+            liveClusterUuid: 1
+          }
+        }}
+        clusterUuid={1}
+        status={{
+          isPartiallyMigrated: true
+        }}
+        productName={ELASTICSEARCH_SYSTEM_ID}
+        instance={null}
+      />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+});
diff --git a/x-pack/legacy/plugins/monitoring/public/components/setup_mode/formatting.js b/x-pack/legacy/plugins/monitoring/public/components/setup_mode/formatting.js
new file mode 100644
index 00000000000000..d88608bbb1afe3
--- /dev/null
+++ b/x-pack/legacy/plugins/monitoring/public/components/setup_mode/formatting.js
@@ -0,0 +1,56 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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 { capitalize } from 'lodash';
+import { i18n } from '@kbn/i18n';
+import {
+  APM_SYSTEM_ID,
+  LOGSTASH_SYSTEM_ID,
+  ELASTICSEARCH_SYSTEM_ID,
+  KIBANA_SYSTEM_ID,
+  BEATS_SYSTEM_ID
+} from '../../../common/constants';
+
+const NODE_IDENTIFIER_SINGULAR = i18n.translate('xpack.monitoring.setupMode.node', {
+  defaultMessage: `node`,
+});
+const NODE_IDENTIFIER_PLURAL = i18n.translate('xpack.monitoring.setupMode.nodes', {
+  defaultMessage: `nodes`,
+});
+const INSTANCE_IDENTIFIER_SINGULAR = i18n.translate('xpack.monitoring.setupMode.instance', {
+  defaultMessage: `instance`,
+});
+const INSTANCE_IDENTIFIER_PLURAL = i18n.translate('xpack.monitoring.setupMode.instances', {
+  defaultMessage: `instances`,
+});
+const SERVER_IDENTIFIER_SINGULAR = i18n.translate('xpack.monitoring.setupMode.server', {
+  defaultMessage: `server`,
+});
+const SERVER_IDENTIFIER_PLURAL = i18n.translate('xpack.monitoring.setupMode.servers', {
+  defaultMessage: `servers`,
+});
+
+
+export function formatProductName(productName) {
+  if (productName === APM_SYSTEM_ID) {
+    return productName.toUpperCase();
+  }
+  return capitalize(productName);
+}
+
+const PRODUCTS_THAT_USE_NODES = [LOGSTASH_SYSTEM_ID, ELASTICSEARCH_SYSTEM_ID];
+const PRODUCTS_THAT_USE_INSTANCES = [KIBANA_SYSTEM_ID, BEATS_SYSTEM_ID];
+export function getIdentifier(productName, usePlural = false) {
+  if (PRODUCTS_THAT_USE_INSTANCES.includes(productName)) {
+    return usePlural ? INSTANCE_IDENTIFIER_PLURAL : INSTANCE_IDENTIFIER_SINGULAR;
+  }
+  if (PRODUCTS_THAT_USE_NODES.includes(productName)) {
+    return usePlural ? NODE_IDENTIFIER_PLURAL : NODE_IDENTIFIER_SINGULAR;
+  }
+  if (productName === APM_SYSTEM_ID) {
+    return usePlural ? SERVER_IDENTIFIER_PLURAL : SERVER_IDENTIFIER_SINGULAR;
+  }
+  return productName;
+}
diff --git a/x-pack/legacy/plugins/monitoring/public/components/setup_mode/formatting.test.js b/x-pack/legacy/plugins/monitoring/public/components/setup_mode/formatting.test.js
new file mode 100644
index 00000000000000..06d72bdb0665e9
--- /dev/null
+++ b/x-pack/legacy/plugins/monitoring/public/components/setup_mode/formatting.test.js
@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { formatProductName, getIdentifier } from './formatting';
+import {
+  ELASTICSEARCH_SYSTEM_ID,
+  KIBANA_SYSTEM_ID,
+  BEATS_SYSTEM_ID,
+  APM_SYSTEM_ID,
+  LOGSTASH_SYSTEM_ID
+} from '../../../common/constants';
+
+const PRODUCTS = [
+  {
+    name: ELASTICSEARCH_SYSTEM_ID
+  },
+  {
+    name: KIBANA_SYSTEM_ID
+  },
+  {
+    name: LOGSTASH_SYSTEM_ID
+  },
+  {
+    name: BEATS_SYSTEM_ID
+  },
+  {
+    name: APM_SYSTEM_ID
+  }
+];
+
+describe('setupMode formatting', () => {
+  describe('formatProductName', () => {
+    for (const { name } of PRODUCTS) {
+      it(`should format the product name for ${name}`, () => {
+        expect(formatProductName(name)).toMatchSnapshot();
+      });
+    }
+  });
+  describe('getIdentifier', () => {
+    for (const { name } of PRODUCTS) {
+      it(`should get the singular identifier for ${name}`, () => {
+        expect(getIdentifier(name)).toMatchSnapshot();
+      });
+      it(`should get the plural identifier for ${name}`, () => {
+        expect(getIdentifier(name, true)).toMatchSnapshot();
+      });
+    }
+  });
+});
diff --git a/x-pack/legacy/plugins/monitoring/public/components/setup_mode/listing_callout.js b/x-pack/legacy/plugins/monitoring/public/components/setup_mode/listing_callout.js
new file mode 100644
index 00000000000000..69f2d07c2d2da8
--- /dev/null
+++ b/x-pack/legacy/plugins/monitoring/public/components/setup_mode/listing_callout.js
@@ -0,0 +1,173 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { Fragment } from 'react';
+import { get } from 'lodash';
+import {
+  EuiCallOut,
+  EuiSpacer,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { formatProductName, getIdentifier } from './formatting';
+
+const MIGRATE_TO_MB_LABEL = i18n.translate('xpack.monitoring.setupMode.migrateToMetricbeat', {
+  defaultMessage: 'Monitor with Metricbeat',
+});
+
+export function ListingCallOut({ setupModeData, productName, customRenderer = null }) {
+  if (customRenderer) {
+    const { shouldRender, componentToRender } = customRenderer();
+    if (shouldRender) {
+      return componentToRender;
+    }
+  }
+
+  const mightExist = get(setupModeData, 'detected.mightExist');
+
+  const hasInstances = setupModeData.totalUniqueInstanceCount > 0;
+  if (!hasInstances) {
+    if (mightExist) {
+      return (
+        <Fragment>
+          <EuiCallOut
+            title={i18n.translate('xpack.monitoring.setupMode.detectedNodeTitle', {
+              defaultMessage: '{product} {identifier} detected',
+              values: {
+                product: formatProductName(productName),
+                identifier: getIdentifier(productName)
+              }
+            })}
+            color="warning"
+            iconType="flag"
+          >
+            <p>
+              {i18n.translate('xpack.monitoring.setupMode.detectedNodeDescription', {
+                defaultMessage: `Click 'Set up monitoring' below to start monitoring this {identifier}.`,
+                values: {
+                  identifier: getIdentifier(productName)
+                }
+              })}
+            </p>
+          </EuiCallOut>
+          <EuiSpacer size="m"/>
+        </Fragment>
+      );
+    }
+    return (
+      <Fragment>
+        <EuiCallOut
+          title={i18n.translate('xpack.monitoring.setupMode.noMonitoringDataFound', {
+            defaultMessage: 'No {product} {identifier} detected',
+            values: {
+              product: formatProductName(productName),
+              identifier: getIdentifier(productName, true)
+            }
+          })}
+          iconType="flag"
+        >
+          <p>
+            {i18n.translate('xpack.monitoring.setupMode.netNewUserDescription', {
+              defaultMessage: `Click 'Set up monitoring' to start monitoring with Metricbeat.`,
+            })}
+          </p>
+        </EuiCallOut>
+        <EuiSpacer size="m"/>
+      </Fragment>
+    );
+  }
+
+  if (setupModeData.totalUniqueFullyMigratedCount === setupModeData.totalUniqueInstanceCount) {
+    return (
+      <Fragment>
+        <EuiCallOut
+          title={i18n.translate('xpack.monitoring.setupMode.metricbeatAllNodes', {
+            defaultMessage: 'Metricbeat is monitoring all {identifier}.',
+            values: {
+              identifier: getIdentifier(productName, true)
+            }
+          })}
+          color="success"
+          iconType="flag"
+        />
+        <EuiSpacer size="m"/>
+      </Fragment>
+    );
+  }
+
+  if (setupModeData.totalUniquePartiallyMigratedCount === setupModeData.totalUniqueInstanceCount) {
+    return (
+      <Fragment>
+        <EuiCallOut
+          title={i18n.translate('xpack.monitoring.setupMode.disableInternalCollectionTitle', {
+            defaultMessage: 'Disable self monitoring',
+          })}
+          color="warning"
+          iconType="flag"
+        >
+          <p>
+            {i18n.translate('xpack.monitoring.setupMode.disableInternalCollectionDescription', {
+              defaultMessage: `Metricbeat is now monitoring your {product} {identifier}. Disable self monitoring to finish the migration.`,
+              values: {
+                product: formatProductName(productName),
+                identifier: getIdentifier(productName, true)
+              }
+            })}
+          </p>
+        </EuiCallOut>
+        <EuiSpacer size="m"/>
+      </Fragment>
+    );
+  }
+
+  if (setupModeData.totalUniqueInstanceCount > 0) {
+    if (setupModeData.totalUniqueFullyMigratedCount === 0 && setupModeData.totalUniquePartiallyMigratedCount === 0) {
+      return (
+        <Fragment>
+          <EuiCallOut
+            title={MIGRATE_TO_MB_LABEL}
+            color="danger"
+            iconType="flag"
+          >
+            <p>
+              {i18n.translate('xpack.monitoring.setupMode.migrateToMetricbeatDescription', {
+                defaultMessage: `These {product} {identifier} are self monitored.
+                Click 'Monitor with Metricbeat' to migrate.`,
+                values: {
+                  product: formatProductName(productName),
+                  identifier: getIdentifier(productName, true)
+                }
+              })}
+            </p>
+          </EuiCallOut>
+          <EuiSpacer size="m"/>
+        </Fragment>
+      );
+    }
+
+    return (
+      <Fragment>
+        <EuiCallOut
+          title={MIGRATE_TO_MB_LABEL}
+          color="danger"
+          iconType="flag"
+        >
+          <p>
+            {i18n.translate('xpack.monitoring.setupMode.migrateSomeToMetricbeatDescription', {
+              defaultMessage: `Some {product} {identifier} are monitored through self monitoring. Migrate to monitor with Metricbeat.`,
+              values: {
+                product: formatProductName(productName),
+                identifier: getIdentifier(productName, true)
+              }
+            })}
+          </p>
+        </EuiCallOut>
+        <EuiSpacer size="m"/>
+      </Fragment>
+    );
+  }
+
+  return null;
+}
diff --git a/x-pack/legacy/plugins/monitoring/public/components/setup_mode/listing_callout.test.js b/x-pack/legacy/plugins/monitoring/public/components/setup_mode/listing_callout.test.js
new file mode 100644
index 00000000000000..5eb223a0719655
--- /dev/null
+++ b/x-pack/legacy/plugins/monitoring/public/components/setup_mode/listing_callout.test.js
@@ -0,0 +1,110 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { ListingCallOut } from './listing_callout';
+import {
+  ELASTICSEARCH_SYSTEM_ID,
+  KIBANA_SYSTEM_ID,
+  BEATS_SYSTEM_ID,
+  APM_SYSTEM_ID,
+  LOGSTASH_SYSTEM_ID
+} from '../../../common/constants';
+
+const SCENARIOS = [
+  {
+    name: 'no detectable instances',
+    data: {
+      totalUniqueInstanceCount: 0,
+      detected: {
+        mightExist: false
+      }
+    }
+  },
+  {
+    name: 'only detectable instances',
+    data: {
+      totalUniqueInstanceCount: 0,
+      detected: {
+        mightExist: true
+      }
+    }
+  },
+  {
+    name: 'all migrated',
+    data: {
+      totalUniqueInstanceCount: 1,
+      totalUniqueFullyMigratedCount: 1
+    }
+  },
+  {
+    name: 'all partially migrated',
+    data: {
+      totalUniqueInstanceCount: 1,
+      totalUniquePartiallyMigratedCount: 1
+    }
+  },
+  {
+    name: 'all internally collected',
+    data: {
+      totalUniqueInstanceCount: 1,
+      totalUniquePartiallyMigratedCount: 0,
+      totalUniqueFullyMigratedCount: 0
+    }
+  },
+];
+
+const PRODUCTS = [
+  {
+    name: ELASTICSEARCH_SYSTEM_ID
+  },
+  {
+    name: KIBANA_SYSTEM_ID
+  },
+  {
+    name: LOGSTASH_SYSTEM_ID
+  },
+  {
+    name: BEATS_SYSTEM_ID
+  },
+  {
+    name: APM_SYSTEM_ID
+  }
+];
+
+describe('setupMode ListingCallOut', () => {
+  for (const scenario of SCENARIOS) {
+    describe(`${scenario.name}`, () => {
+      for (const { name } of PRODUCTS) {
+        it(`should render for ${name}`, () => {
+          const component = shallow(
+            <ListingCallOut
+              setupModeData={scenario.data}
+              productName={name}
+            />
+          );
+          expect(component).toMatchSnapshot();
+        });
+      }
+    });
+  }
+
+  it('should render a custom renderer', () => {
+    const MyComponent = <h1>Hi</h1>;
+    const component = shallow(
+      <ListingCallOut
+        setupModeData={null}
+        productName={ELASTICSEARCH_SYSTEM_ID}
+        customRenderer={() => ({
+          shouldRender: true,
+          componentToRender: MyComponent
+        })}
+      />
+    );
+    expect(component.equals(MyComponent)).toBe(true);
+  });
+});
diff --git a/x-pack/legacy/plugins/monitoring/public/components/setup_mode/tooltip.js b/x-pack/legacy/plugins/monitoring/public/components/setup_mode/tooltip.js
new file mode 100644
index 00000000000000..cc73a4d29536c9
--- /dev/null
+++ b/x-pack/legacy/plugins/monitoring/public/components/setup_mode/tooltip.js
@@ -0,0 +1,141 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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 { get } from 'lodash';
+import {
+  EuiBadge,
+  EuiFlexItem,
+  EuiToolTip,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { getIdentifier } from './formatting';
+
+export function SetupModeTooltip({ setupModeData, badgeClickAction, productName }) {
+  if (!setupModeData) {
+    return null;
+  }
+
+  const {
+    totalUniqueInstanceCount,
+    totalUniqueFullyMigratedCount,
+    totalUniquePartiallyMigratedCount
+  } = setupModeData;
+  const allMonitoredByMetricbeat = totalUniqueInstanceCount > 0 &&
+    (totalUniqueFullyMigratedCount === totalUniqueInstanceCount || totalUniquePartiallyMigratedCount === totalUniqueInstanceCount);
+  const internalCollectionOn = totalUniquePartiallyMigratedCount > 0;
+  const mightExist = get(setupModeData, 'detected.mightExist') || get(setupModeData, 'detected.doesExist');
+
+  let tooltip = null;
+
+  if (totalUniqueInstanceCount === 0) {
+    if (mightExist) {
+      const detectedText = i18n.translate('xpack.monitoring.setupMode.tooltip.detected', {
+        defaultMessage: 'No monitoring'
+      });
+      tooltip = (
+        <EuiToolTip
+          position="top"
+          content={i18n.translate('xpack.monitoring.setupMode.tooltip.mightExist', {
+            defaultMessage: `We detected usage of this product. Click to start monitoring.`,
+          })}
+        >
+          <EuiBadge color="warning" iconType="flag" onClick={badgeClickAction} onClickAriaLabel={detectedText}>
+            {detectedText}
+          </EuiBadge>
+        </EuiToolTip>
+      );
+    }
+    else {
+      const noMonitoringText = i18n.translate('xpack.monitoring.setupMode.tooltip.noUsage', {
+        defaultMessage: 'No usage'
+      });
+
+      tooltip = (
+        <EuiToolTip
+          position="top"
+          content={i18n.translate('xpack.monitoring.setupMode.tooltip.noUsageDetected', {
+            defaultMessage: `We did not detect any usage. Click to view {identifier}.`,
+            values: {
+              identifier: getIdentifier(productName, true)
+            }
+          })}
+        >
+          <EuiBadge color="hollow" iconType="flag" onClick={badgeClickAction} onClickAriaLabel={noMonitoringText}>
+            {noMonitoringText}
+          </EuiBadge>
+        </EuiToolTip>
+      );
+    }
+  }
+
+  else if (!allMonitoredByMetricbeat) {
+    const internalCollection = i18n.translate('xpack.monitoring.euiTable.isInternalCollectorLabel', {
+      defaultMessage: 'Self monitoring'
+    });
+    tooltip = (
+      <EuiToolTip
+        position="top"
+        content={i18n.translate('xpack.monitoring.setupMode.tooltip.oneInternal', {
+          defaultMessage: `At least one {identifier} isn’t monitored using Metricbeat. Click to view status.`,
+          values: {
+            identifier: getIdentifier(productName)
+          }
+        })}
+      >
+        <EuiBadge color="danger" iconType="flag" onClick={badgeClickAction} onClickAriaLabel={internalCollection}>
+          {internalCollection}
+        </EuiBadge>
+      </EuiToolTip>
+    );
+  }
+  else if (internalCollectionOn) {
+    const internalAndMB = i18n.translate('xpack.monitoring.euiTable.isPartiallyMigratedLabel', {
+      defaultMessage: 'Self monitoring is on'
+    });
+    tooltip = (
+      <EuiToolTip
+        position="top"
+        content={i18n.translate('xpack.monitoring.setupMode.tooltip.disableInternal', {
+          defaultMessage: `Metricbeat is monitoring all {identifierPlural}. Click to view {identifierPlural} and disable self monitoring.`,
+          values: {
+            identifierPlural: getIdentifier(productName, true)
+          }
+        })}
+      >
+        <EuiBadge color="warning" iconType="flag" onClick={badgeClickAction} onClickAriaLabel={internalAndMB}>
+          {internalAndMB}
+        </EuiBadge>
+      </EuiToolTip>
+    );
+  }
+  else {
+    const metricbeatCollection = i18n.translate('xpack.monitoring.euiTable.isFullyMigratedLabel', {
+      defaultMessage: 'Metricbeat monitoring'
+    });
+    tooltip = (
+      <EuiToolTip
+        position="top"
+        content={i18n.translate('xpack.monitoring.setupMode.tooltip.allSet', {
+          defaultMessage: `Metricbeat is monitoring all {identifierPlural}.`,
+          values: {
+            identifierPlural: getIdentifier(productName, true)
+          }
+        })}
+      >
+        <EuiBadge color="secondary" iconType="flag" onClick={badgeClickAction} onClickAriaLabel={metricbeatCollection}>
+          {metricbeatCollection}
+        </EuiBadge>
+      </EuiToolTip>
+    );
+  }
+
+  return (
+    <EuiFlexItem grow={false}>
+      {tooltip}
+    </EuiFlexItem>
+  );
+}
diff --git a/x-pack/legacy/plugins/monitoring/public/components/setup_mode/tooltip.test.js b/x-pack/legacy/plugins/monitoring/public/components/setup_mode/tooltip.test.js
new file mode 100644
index 00000000000000..9c72773ef0d7c0
--- /dev/null
+++ b/x-pack/legacy/plugins/monitoring/public/components/setup_mode/tooltip.test.js
@@ -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 React from 'react';
+import { shallow } from 'enzyme';
+import { SetupModeTooltip } from './tooltip';
+import {
+  ELASTICSEARCH_SYSTEM_ID,
+  KIBANA_SYSTEM_ID,
+  BEATS_SYSTEM_ID,
+  APM_SYSTEM_ID,
+  LOGSTASH_SYSTEM_ID
+} from '../../../common/constants';
+
+const SCENARIOS = [
+  {
+    name: 'no detectable instances',
+    data: {
+      totalUniqueInstanceCount: 0,
+      detected: {
+        mightExist: false
+      }
+    }
+  },
+  {
+    name: 'only detectable instances',
+    data: {
+      totalUniqueInstanceCount: 0,
+      detected: {
+        mightExist: true
+      }
+    }
+  },
+  {
+    name: 'allMonitoredByMetricbeat',
+    data: {
+      totalUniqueInstanceCount: 1,
+      totalUniqueFullyMigratedCount: 1,
+    }
+  },
+  {
+    name: 'internalCollectionOn',
+    data: {
+      totalUniqueInstanceCount: 1,
+      totalUniquePartiallyMigratedCount: 1
+    }
+  },
+  {
+    name: 'allInternalCollection',
+    data: {
+      totalUniqueInstanceCount: 1,
+      totalUniqueFullyMigratedCount: 0,
+      totalUniquePartiallyMigratedCount: 0,
+    }
+  }
+];
+
+const PRODUCTS = [
+  {
+    name: ELASTICSEARCH_SYSTEM_ID
+  },
+  {
+    name: KIBANA_SYSTEM_ID
+  },
+  {
+    name: LOGSTASH_SYSTEM_ID
+  },
+  {
+    name: BEATS_SYSTEM_ID
+  },
+  {
+    name: APM_SYSTEM_ID
+  }
+];
+
+describe('setupMode SetupModeTooltip', () => {
+  for (const scenario of SCENARIOS) {
+    describe(`${scenario.name}`, () => {
+      for (const { name } of PRODUCTS) {
+        it(`should render for ${name}`, () => {
+          const component = shallow(
+            <SetupModeTooltip
+              setupModeData={scenario.data}
+              productName={name}
+              badgeClickAction={() => {}}
+            />
+          );
+          expect(component).toMatchSnapshot();
+        });
+      }
+    });
+  }
+});
diff --git a/x-pack/legacy/plugins/monitoring/public/components/table/eui_table.js b/x-pack/legacy/plugins/monitoring/public/components/table/eui_table.js
index 9bd04e89c85121..862e609cd2fcb4 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/table/eui_table.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/table/eui_table.js
@@ -5,17 +5,13 @@
  */
 
 import React, { Fragment } from 'react';
-import { get } from 'lodash';
 import {
   EuiInMemoryTable,
-  EuiBadge,
-  EuiButtonEmpty,
-  EuiHealth,
   EuiButton,
   EuiSpacer
 } from '@elastic/eui';
-import { ELASTICSEARCH_CUSTOM_ID } from '../../../common/constants';
 import { i18n } from '@kbn/i18n';
+import { getIdentifier } from '../setup_mode/formatting';
 
 export class EuiMonitoringTable extends React.PureComponent {
   render() {
@@ -24,9 +20,7 @@ export class EuiMonitoringTable extends React.PureComponent {
       search = {},
       columns: _columns,
       setupMode,
-      uuidField,
-      nameField,
-      setupNewButtonLabel,
+      productName,
       ...props
     } = this.props;
 
@@ -51,150 +45,16 @@ export class EuiMonitoringTable extends React.PureComponent {
 
     let footerContent = null;
     if (setupMode && setupMode.enabled) {
-      columns.push({
-        name: i18n.translate('xpack.monitoring.euiTable.setupStatusTitle', {
-          defaultMessage: 'Setup Status'
-        }),
-        sortable: product => {
-          const list = get(setupMode, 'data.byUuid', {});
-          const status = list[get(product, uuidField)] || {};
-
-          if (status.isInternalCollector) {
-            return 4;
-          }
-
-          if (status.isPartiallyMigrated) {
-            return 3;
-          }
-
-          if (status.isFullyMigrated) {
-            return 2;
-          }
-
-          if (status.isNetNewUser) {
-            return 1;
-          }
-
-          return 0;
-        },
-        render: (product) => {
-          const list = get(setupMode, 'data.byUuid', {});
-          const status = list[get(product, uuidField)] || {};
-
-          let statusBadge = null;
-          if (status.isInternalCollector) {
-            statusBadge = (
-              <EuiHealth color="danger">
-                {i18n.translate('xpack.monitoring.euiTable.isInternalCollectorLabel', {
-                  defaultMessage: 'Internal collection'
-                })}
-              </EuiHealth>
-            );
-          }
-          else if (status.isPartiallyMigrated) {
-            statusBadge = (
-              <EuiHealth color="warning">
-                {i18n.translate('xpack.monitoring.euiTable.isPartiallyMigratedLabel', {
-                  defaultMessage: 'Internal collection and Metricbeat collection'
-                })}
-              </EuiHealth>
-            );
-          }
-          else if (status.isFullyMigrated) {
-            statusBadge = (
-              <EuiBadge color="primary">
-                {i18n.translate('xpack.monitoring.euiTable.isFullyMigratedLabel', {
-                  defaultMessage: 'Metricbeat collection'
-                })}
-              </EuiBadge>
-            );
-          }
-          else if (status.isNetNewUser) {
-            statusBadge = (
-              <EuiHealth color="danger">
-                {i18n.translate('xpack.monitoring.euiTable.isNetNewUserLabel', {
-                  defaultMessage: 'No monitoring detected'
-                })}
-              </EuiHealth>
-            );
-          }
-          else {
-            statusBadge = i18n.translate('xpack.monitoring.euiTable.migrationStatusUnknown', {
-              defaultMessage: 'N/A'
-            });
-          }
-
-          return statusBadge;
-        }
-      });
-
-      columns.push({
-        name: i18n.translate('xpack.monitoring.euiTable.setupActionTitle', {
-          defaultMessage: 'Setup Action'
-        }),
-        sortable: product => {
-          const list = get(setupMode, 'data.byUuid', {});
-          const status = list[get(product, uuidField)] || {};
-
-          if (status.isInternalCollector || status.isNetNewUser) {
-            return 1;
-          }
-
-          if (status.isPartiallyMigrated) {
-            if (setupMode.productName === ELASTICSEARCH_CUSTOM_ID) {
-              // See comment for same conditional in render function
-              return 0;
-            }
-            return 1;
-          }
-
-          return 0;
-        },
-        render: (product) => {
-          const uuid = get(product, uuidField);
-          const list = get(setupMode, 'data.byUuid', {});
-          const status = list[uuid] || {};
-          const instance = {
-            uuid: get(product, uuidField),
-            name: get(product, nameField),
-          };
-
-          // Migrating from partially to fully for Elasticsearch involves changing a cluster
-          // setting which impacts all nodes in the cluster, which we have a separate callout
-          // for. Since it does not make sense to do this on a per node basis, show nothing here
-          if (status.isPartiallyMigrated && setupMode.productName === ELASTICSEARCH_CUSTOM_ID) {
-            return null;
-          }
-
-          if (status.isInternalCollector || status.isPartiallyMigrated) {
-            return (
-              <EuiButtonEmpty flush="left" size="s" color="primary" onClick={() => setupMode.openFlyout(instance)}>
-                {i18n.translate('xpack.monitoring.euiTable.migrateButtonLabel', {
-                  defaultMessage: 'Migrate'
-                })}
-              </EuiButtonEmpty>
-            );
-          }
-
-          if (status.isNetNewUser) {
-            return (
-              <EuiButtonEmpty flush="left" size="s" color="primary" onClick={() => setupMode.openFlyout(instance)}>
-                {i18n.translate('xpack.monitoring.euiTable.setupButtonLabel', {
-                  defaultMessage: 'Setup'
-                })}
-              </EuiButtonEmpty>
-            );
-          }
-
-          return null;
-        }
-      });
-
       footerContent = (
         <Fragment>
           <EuiSpacer size="m"/>
-          <EuiButton onClick={() => setupMode.openFlyout({}, true)}>
-            {setupNewButtonLabel}
+          <EuiButton iconType="flag" onClick={() => setupMode.openFlyout({}, true)}>
+            {i18n.translate('xpack.monitoring.euiTable.setupNewButtonLabel', {
+              defaultMessage: 'Monitor another {identifier} with Metricbeat',
+              values: {
+                identifier: getIdentifier(productName)
+              }
+            })}
           </EuiButton>
         </Fragment>
       );
diff --git a/x-pack/legacy/plugins/monitoring/public/components/table/eui_table_ssp.js b/x-pack/legacy/plugins/monitoring/public/components/table/eui_table_ssp.js
new file mode 100644
index 00000000000000..868464e8703bee
--- /dev/null
+++ b/x-pack/legacy/plugins/monitoring/public/components/table/eui_table_ssp.js
@@ -0,0 +1,79 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import {
+  EuiBasicTable,
+  EuiSpacer,
+  EuiSearchBar
+} from '@elastic/eui';
+
+export function EuiMonitoringSSPTable({
+  rows: items,
+  search = {},
+  pagination,
+  columns: _columns,
+  onTableChange,
+  fetchMoreData,
+  ...props
+}) {
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [queryText, setQueryText] = React.useState('');
+  const [page, setPage] = React.useState({
+    index: pagination.pageIndex,
+    size: pagination.pageSize
+  });
+  const [sort, setSort] = React.useState(props.sorting);
+
+  if (search.box && !search.box['data-test-subj']) {
+    search.box['data-test-subj'] = 'monitoringTableToolBar';
+  }
+
+  const columns = _columns.map(column => {
+    if (!column['data-test-subj']) {
+      column['data-test-subj'] = 'monitoringTableHasData';
+    }
+
+    if (!('sortable' in column)) {
+      column.sortable = true;
+    }
+
+    return column;
+  });
+
+  const onChange = async ({ page, sort }) => {
+    setPage(page);
+    setSort({ sort });
+    setIsLoading(true);
+    await fetchMoreData({ page, sort: { sort }, queryText });
+    setIsLoading(false);
+    onTableChange({ page, sort });
+  };
+
+  const onQueryChange = async ({ queryText }) => {
+    const newPage = { ...page, index: 0 };
+    setPage(newPage);
+    setQueryText(queryText);
+    setIsLoading(true);
+    await fetchMoreData({ page: newPage, sort, queryText });
+    setIsLoading(false);
+  };
+
+  return (
+    <div data-test-subj={`${props.className}Container`}>
+      <EuiSearchBar {...search} onChange={onQueryChange}/>
+      <EuiSpacer size="l"/>
+      <EuiBasicTable
+        {...props}
+        items={items}
+        pagination={pagination}
+        onChange={onChange}
+        loading={isLoading}
+        columns={columns}
+      />
+    </div>
+  );
+}
diff --git a/x-pack/legacy/plugins/monitoring/public/components/table/index.js b/x-pack/legacy/plugins/monitoring/public/components/table/index.js
index d807352ff14c8d..66bdb46904dba7 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/table/index.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/table/index.js
@@ -5,4 +5,5 @@
  */
 
 export { EuiMonitoringTable } from './eui_table';
+export { EuiMonitoringSSPTable } from './eui_table_ssp';
 export { tableStorageGetter, tableStorageSetter, euiTableStorageGetter, euiTableStorageSetter } from './storage';
diff --git a/x-pack/legacy/plugins/monitoring/public/directives/main/index.js b/x-pack/legacy/plugins/monitoring/public/directives/main/index.js
index 9f7debb73de9ba..a7aee9ae780588 100644
--- a/x-pack/legacy/plugins/monitoring/public/directives/main/index.js
+++ b/x-pack/legacy/plugins/monitoring/public/directives/main/index.js
@@ -18,7 +18,7 @@ import template from './index.html';
 import { timefilter } from 'ui/timefilter';
 import { shortenPipelineHash } from '../../../common/formatting';
 import 'ui/directives/kbn_href';
-import { getSetupModeState } from '../../lib/setup_mode';
+import { getSetupModeState, initSetupModeState } from '../../lib/setup_mode';
 
 const setOptions = (controller) => {
   if (!controller.pipelineVersions || !controller.pipelineVersions.length || !controller.pipelineDropdownElement) {
@@ -56,6 +56,7 @@ const setOptions = (controller) => {
     , controller.pipelineDropdownElement);
 };
 
+
 /*
  * Manage data and provide helper methods for the "main" directive's template
  */
@@ -97,7 +98,7 @@ export class MonitoringMainController {
     } else {
       this.inOverview = this.name === 'overview';
       this.inAlerts = this.name === 'alerts';
-      this.inListing = this.name === 'listing' || this.name === 'no-data';
+      this.inListing = this.name === 'listing';// || this.name === 'no-data';
     }
 
     if (!this.inListing) {
@@ -155,6 +156,10 @@ export class MonitoringMainController {
     if (data.totalUniqueInstanceCount === 0) {
       return true;
     }
+    if (data.totalUniqueInternallyCollectedCount === 0
+      && data.totalUniqueFullyMigratedCount === 0 && data.totalUniquePartiallyMigratedCount === 0) {
+      return true;
+    }
     return false;
   }
 }
@@ -169,6 +174,9 @@ uiModule.directive('monitoringMain', (breadcrumbs, license, kbnUrl, $injector) =
     controllerAs: 'monitoringMain',
     bindToController: true,
     link(scope, _element, attributes, controller) {
+      initSetupModeState(scope, $injector, () => {
+        controller.setup(getSetupObj());
+      });
       if (!scope.cluster) {
         const $route = $injector.get('$route');
         const globalState = $injector.get('globalState');
diff --git a/x-pack/legacy/plugins/monitoring/public/lib/elasticsearch_settings/enabler.js b/x-pack/legacy/plugins/monitoring/public/lib/elasticsearch_settings/enabler.js
index 8c25a79f12fb8d..f6679611441235 100644
--- a/x-pack/legacy/plugins/monitoring/public/lib/elasticsearch_settings/enabler.js
+++ b/x-pack/legacy/plugins/monitoring/public/lib/elasticsearch_settings/enabler.js
@@ -35,7 +35,7 @@ export class Enabler {
 
   async enableCollectionEnabled() {
     try {
-      this.updateModel({ isCollectionEnabledUpdating: true, isCollectionEnabledUpdated: false });
+      this.updateModel({ isCollectionEnabledUpdating: true });
       await this.$http.put('../api/monitoring/v1/elasticsearch_settings/set/collection_enabled');
       this.updateModel({
         isCollectionEnabledUpdated: true,
diff --git a/x-pack/legacy/plugins/monitoring/public/lib/route_init.js b/x-pack/legacy/plugins/monitoring/public/lib/route_init.js
index 2f1eef85be7257..1cd8e688854ebc 100644
--- a/x-pack/legacy/plugins/monitoring/public/lib/route_init.js
+++ b/x-pack/legacy/plugins/monitoring/public/lib/route_init.js
@@ -6,7 +6,7 @@
 
 import _ from 'lodash';
 import { ajaxErrorHandlersProvider } from 'plugins/monitoring/lib/ajax_error_handler';
-import { getSetupModeState } from './setup_mode';
+import { isInSetupMode } from './setup_mode';
 import { getClusterFromClusters } from './get_cluster_from_clusters';
 
 export function routeInitProvider(Private, monitoringClusters, globalState, license, kbnUrl) {
@@ -26,8 +26,8 @@ export function routeInitProvider(Private, monitoringClusters, globalState, lice
     const clusterUuid = fetchAllClusters ? null : globalState.cluster_uuid;
     return monitoringClusters(clusterUuid, undefined, codePaths)
     // Set the clusters collection and current cluster in globalState
-      .then((clusters) => {
-        const inSetupMode = getSetupModeState().enabled;
+      .then(async (clusters) => {
+        const inSetupMode = await isInSetupMode();
         const cluster = getClusterFromClusters(clusters, globalState);
         if (!cluster && !inSetupMode) {
           return kbnUrl.redirect('/no-data');
diff --git a/x-pack/legacy/plugins/monitoring/public/lib/setup_mode.js b/x-pack/legacy/plugins/monitoring/public/lib/setup_mode.js
index dbfbdb324f7aaf..3e7d182f1514c5 100644
--- a/x-pack/legacy/plugins/monitoring/public/lib/setup_mode.js
+++ b/x-pack/legacy/plugins/monitoring/public/lib/setup_mode.js
@@ -5,7 +5,12 @@
  */
 
 import { ajaxErrorHandlersProvider } from './ajax_error_handler';
-import { get } from 'lodash';
+import { get, contains } from 'lodash';
+import chrome from 'ui/chrome';
+
+function isOnPage(hash) {
+  return contains(window.location.hash, hash);
+}
 
 const angularState = {
   injector: null,
@@ -111,70 +116,63 @@ export const disableElasticsearchInternalCollection = async () => {
 };
 
 export const toggleSetupMode = inSetupMode => {
-  return new Promise(async (resolve, reject) => {
-    try {
-      checkAngularState();
-    } catch (err) {
-      return reject(err);
-    }
+  checkAngularState();
 
-    const globalState = angularState.injector.get('globalState');
-    setupModeState.enabled = inSetupMode;
-    globalState.inSetupMode = inSetupMode;
-    globalState.save();
-    setSetupModeMenuItem(); // eslint-disable-line  no-use-before-define
-    notifySetupModeDataChange();
+  const globalState = angularState.injector.get('globalState');
+  setupModeState.enabled = inSetupMode;
+  globalState.inSetupMode = inSetupMode;
+  globalState.save();
+  setSetupModeMenuItem(); // eslint-disable-line  no-use-before-define
+  notifySetupModeDataChange();
+
+  if (inSetupMode) {
+    // Intentionally do not await this so we don't block UI operations
+    updateSetupModeData();
+  }
+};
 
-    if (inSetupMode) {
-      await updateSetupModeData();
-    }
+export const setSetupModeMenuItem = () => {
+  checkAngularState();
 
-    resolve();
-  });
-};
+  if (isOnPage('no-data')) {
+    return;
+  }
 
-const setSetupModeMenuItem = () => {
-  // Disabling this for this initial release. This will be added back in
-  // in a subsequent PR
-  // checkAngularState();
-
-  // const globalState = angularState.injector.get('globalState');
-  // const navItems = globalState.inSetupMode
-  //   ? [
-  //     {
-  //       key: 'exit',
-  //       label: 'Exit Setup Mode',
-  //       description: 'Exit setup mode',
-  //       run: () => toggleSetupMode(false),
-  //       testId: 'exitSetupMode'
-  //     },
-  //     {
-  //       key: 'refresh',
-  //       label: 'Refresh Setup Data',
-  //       description: 'Refresh data used for setup mode',
-  //       run: () => updateSetupModeData(),
-  //       testId: 'refreshSetupModeData'
-  //     }
-  //   ]
-  //   : [{
-  //     key: 'enter',
-  //     label: 'Enter Setup Mode',
-  //     description: 'Enter setup mode',
-  //     run: () => toggleSetupMode(true),
-  //     testId: 'enterSetupMode'
-  //   }];
-
-  // angularState.scope.topNavMenu = [...navItems];
+  const globalState = angularState.injector.get('globalState');
+  const navItems = globalState.inSetupMode
+    ? []
+    : [{
+      id: 'enter',
+      label: 'Enter Setup Mode',
+      description: 'Enter setup',
+      run: () => toggleSetupMode(true),
+      testId: 'enterSetupMode'
+    }];
+
+  angularState.scope.topNavMenu = [...navItems];
+  // LOL angular
+  if (!angularState.scope.$$phase) {
+    angularState.scope.$apply();
+  }
 };
 
-export const initSetupModeState = ($scope, $injector, callback) => {
+export const initSetupModeState = async ($scope, $injector, callback) => {
   angularState.scope = $scope;
   angularState.injector = $injector;
-  setSetupModeMenuItem();
   callback && setupModeState.callbacks.push(callback);
 
-  const globalState = angularState.injector.get('globalState');
+  const globalState = $injector.get('globalState');
   if (globalState.inSetupMode) {
-    toggleSetupMode(true);
+    await toggleSetupMode(true);
   }
 };
+
+export const isInSetupMode = async () => {
+  if (setupModeState.enabled) {
+    return true;
+  }
+
+  const $injector = angularState.injector || await chrome.dangerouslyGetActiveInjector();
+  const globalState = $injector.get('globalState');
+  return globalState.inSetupMode;
+};
diff --git a/x-pack/legacy/plugins/monitoring/public/lib/setup_mode.test.js b/x-pack/legacy/plugins/monitoring/public/lib/setup_mode.test.js
new file mode 100644
index 00000000000000..b5878c7ec51818
--- /dev/null
+++ b/x-pack/legacy/plugins/monitoring/public/lib/setup_mode.test.js
@@ -0,0 +1,196 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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 {
+  toggleSetupMode,
+  initSetupModeState,
+  getSetupModeState,
+  updateSetupModeData,
+  setSetupModeMenuItem
+} from './setup_mode';
+
+jest.mock('./ajax_error_handler', () => ({
+  ajaxErrorHandlersProvider: err => {
+    throw err;
+  }
+}));
+
+let data = {};
+
+const injectorModulesMock = {
+  globalState: {
+    save: jest.fn()
+  },
+  Private: module => module,
+  $http: {
+    post: jest.fn().mockImplementation(() => {
+      return { data };
+    })
+  },
+  $executor: {
+    run: jest.fn()
+  }
+};
+
+const angularStateMock = {
+  injector: {
+    get: module => {
+      return injectorModulesMock[module] || {};
+    }
+  },
+  scope: {
+    $apply: fn => fn && fn()
+  }
+};
+
+// We are no longer waiting for setup mode data to be fetched when enabling
+// so we need to wait for the next tick for the async action to finish
+function waitForSetupModeData(action) {
+  process.nextTick(action);
+}
+
+describe('setup_mode', () => {
+  describe('setup', () => {
+    afterEach(async () => {
+      try {
+        toggleSetupMode(false);
+      } catch (err) {
+        // Do nothing...
+      }
+    });
+
+    it('should require angular state', async () => {
+      let error;
+      try {
+        toggleSetupMode(true);
+      }
+      catch (err) {
+        error = err;
+      }
+      expect(error).toEqual('Unable to interact with setup '
+      + 'mode because the angular injector was not previously set. This needs to be '
+      + 'set by calling `initSetupModeState`.');
+    });
+
+    it('should enable toggle mode', async () => {
+      initSetupModeState(angularStateMock.scope, angularStateMock.injector);
+      await toggleSetupMode(true);
+      expect(injectorModulesMock.globalState.inSetupMode).toBe(true);
+    });
+
+    it('should disable toggle mode', async () => {
+      initSetupModeState(angularStateMock.scope, angularStateMock.injector);
+      await toggleSetupMode(false);
+      expect(injectorModulesMock.globalState.inSetupMode).toBe(false);
+    });
+
+    it('should set top nav config', async () => {
+      initSetupModeState(angularStateMock.scope, angularStateMock.injector);
+      setSetupModeMenuItem();
+      expect(angularStateMock.scope.topNavMenu.length).toBe(1);
+      await toggleSetupMode(true);
+      expect(angularStateMock.scope.topNavMenu.length).toBe(0);
+    });
+  });
+
+  describe('in setup mode', () => {
+    afterEach(async () => {
+      data = {};
+      toggleSetupMode(false);
+    });
+
+    it('should enable it through clicking top nav item', async () => {
+      initSetupModeState(angularStateMock.scope, angularStateMock.injector);
+      await angularStateMock.scope.topNavMenu[0].run();
+      expect(injectorModulesMock.globalState.inSetupMode).toBe(true);
+    });
+
+    it('should not fetch data if on cloud', async (done) => {
+      data = {
+        _meta: {
+          isOnCloud: true
+        }
+      };
+      initSetupModeState(angularStateMock.scope, angularStateMock.injector);
+      await toggleSetupMode(true);
+      waitForSetupModeData(() => {
+        const state = getSetupModeState();
+        expect(state.enabled).toBe(false);
+        done();
+      });
+    });
+
+    it('should set the newly discovered cluster uuid', async (done) => {
+      const clusterUuid = '1ajy';
+      data = {
+        _meta: {
+          liveClusterUuid: clusterUuid
+        },
+        elasticsearch: {
+          byUuid: {
+            123: {
+              isPartiallyMigrated: true
+            }
+          }
+        }
+      };
+      initSetupModeState(angularStateMock.scope, angularStateMock.injector);
+      await toggleSetupMode(true);
+      waitForSetupModeData(() => {
+        expect(injectorModulesMock.globalState.cluster_uuid).toBe(clusterUuid);
+        done();
+      });
+    });
+
+    it('should fetch data for a given cluster', async (done) => {
+      const clusterUuid = '1ajy';
+      data = {
+        _meta: {
+          liveClusterUuid: clusterUuid
+        },
+        elasticsearch: {
+          byUuid: {
+            123: {
+              isPartiallyMigrated: true
+            }
+          }
+        }
+      };
+
+      initSetupModeState(angularStateMock.scope, angularStateMock.injector);
+      await toggleSetupMode(true);
+      waitForSetupModeData(() => {
+        expect(injectorModulesMock.$http.post).toHaveBeenCalledWith(
+          `../api/monitoring/v1/setup/collection/cluster/${clusterUuid}`,
+          { ccs: undefined }
+        );
+        done();
+      });
+    });
+
+    it('should fetch data for a single node', async () => {
+      initSetupModeState(angularStateMock.scope, angularStateMock.injector);
+      await toggleSetupMode(true);
+      injectorModulesMock.$http.post.mockClear();
+      await updateSetupModeData('45asd');
+      expect(injectorModulesMock.$http.post).toHaveBeenCalledWith(
+        '../api/monitoring/v1/setup/collection/node/45asd',
+        { ccs: undefined }
+      );
+    });
+
+    it('should fetch data without a cluster uuid', async () => {
+      initSetupModeState(angularStateMock.scope, angularStateMock.injector);
+      await toggleSetupMode(true);
+      injectorModulesMock.$http.post.mockClear();
+      await updateSetupModeData(undefined, true);
+      expect(injectorModulesMock.$http.post).toHaveBeenCalledWith(
+        '../api/monitoring/v1/setup/collection/cluster',
+        { ccs: undefined }
+      );
+    });
+  });
+});
diff --git a/x-pack/legacy/plugins/monitoring/public/services/breadcrumbs_provider.js b/x-pack/legacy/plugins/monitoring/public/services/breadcrumbs_provider.js
index 4bc7d31b0a92ce..aa91d0ff6e6edd 100644
--- a/x-pack/legacy/plugins/monitoring/public/services/breadcrumbs_provider.js
+++ b/x-pack/legacy/plugins/monitoring/public/services/breadcrumbs_provider.js
@@ -120,12 +120,11 @@ function getApmBreadcrumbs(mainInstance) {
 
 export function breadcrumbsProvider() {
   return function createBreadcrumbs(clusterName, mainInstance) {
-    let breadcrumbs = [ createCrumb('#/home',
-      i18n.translate(
-        'xpack.monitoring.breadcrumbs.clustersLabel', { defaultMessage: 'Clusters' }
-      ),
-      'breadcrumbClusters')
-    ];
+    const homeCrumb = i18n.translate(
+      'xpack.monitoring.breadcrumbs.clustersLabel', { defaultMessage: 'Clusters' }
+    );
+
+    let breadcrumbs = [ createCrumb('#/home', homeCrumb, 'breadcrumbClusters')];
 
     if (!mainInstance.inOverview && clusterName) {
       breadcrumbs.push(createCrumb('#/overview', clusterName));
diff --git a/x-pack/legacy/plugins/monitoring/public/views/alerts/index.js b/x-pack/legacy/plugins/monitoring/public/views/alerts/index.js
index 5f278d661db1db..8ffb30cee96235 100644
--- a/x-pack/legacy/plugins/monitoring/public/views/alerts/index.js
+++ b/x-pack/legacy/plugins/monitoring/public/views/alerts/index.js
@@ -66,6 +66,7 @@ uiRoutes.when('/alerts', {
         getPageData,
         $scope,
         $injector,
+        storageKey: 'alertsTable',
         reactNodeId: 'monitoringAlertsApp'
       });
 
diff --git a/x-pack/legacy/plugins/monitoring/public/views/apm/instances/index.js b/x-pack/legacy/plugins/monitoring/public/views/apm/instances/index.js
index 367c9f78a44d8f..35116924f5d5c1 100644
--- a/x-pack/legacy/plugins/monitoring/public/views/apm/instances/index.js
+++ b/x-pack/legacy/plugins/monitoring/public/views/apm/instances/index.js
@@ -14,7 +14,7 @@ import { ApmServerInstances } from '../../../components/apm/instances';
 import { MonitoringViewBaseEuiTableController } from '../..';
 import { I18nContext } from 'ui/i18n';
 import { SetupModeRenderer } from '../../../components/renderers';
-import { APM_CUSTOM_ID, CODE_PATH_APM } from '../../../../common/constants';
+import { APM_SYSTEM_ID, CODE_PATH_APM } from '../../../../common/constants';
 
 uiRoutes.when('/apm/instances', {
   template,
@@ -67,8 +67,8 @@ uiRoutes.when('/apm/instances', {
           <SetupModeRenderer
             scope={this.scope}
             injector={this.injector}
-            productName={APM_CUSTOM_ID}
-            render={({ setupMode, flyoutComponent }) => (
+            productName={APM_SYSTEM_ID}
+            render={({ setupMode, flyoutComponent, bottomBarComponent }) => (
               <Fragment>
                 {flyoutComponent}
                 <ApmServerInstances
@@ -80,6 +80,7 @@ uiRoutes.when('/apm/instances', {
                     data,
                   }}
                 />
+                {bottomBarComponent}
               </Fragment>
             )}
           />
diff --git a/x-pack/legacy/plugins/monitoring/public/views/base_controller.js b/x-pack/legacy/plugins/monitoring/public/views/base_controller.js
index 15abe5ed3e949b..600e229b031bff 100644
--- a/x-pack/legacy/plugins/monitoring/public/views/base_controller.js
+++ b/x-pack/legacy/plugins/monitoring/public/views/base_controller.js
@@ -70,7 +70,8 @@ export class MonitoringViewBaseController {
     reactNodeId = null, // WIP: https://github.com/elastic/x-pack-kibana/issues/5198
     $scope,
     $injector,
-    options = {}
+    options = {},
+    fetchDataImmediately = true
   }) {
     const titleService = $injector.get('title');
     const $executor = $injector.get('$executor');
@@ -119,7 +120,7 @@ export class MonitoringViewBaseController {
         this.updateDataPromise = null;
       }
       const _api = apiUrlFn ? apiUrlFn() : api;
-      const promises = [_getPageData($injector, _api)];
+      const promises = [_getPageData($injector, _api, this.getPaginationRouteOptions())];
       const setupMode = getSetupModeState();
       if (setupMode.enabled) {
         promises.push(updateSetupModeData());
@@ -132,7 +133,7 @@ export class MonitoringViewBaseController {
         });
       });
     };
-    this.updateData();
+    fetchDataImmediately && this.updateData();
 
     $executor.register({
       execute: () => this.updateData()
@@ -175,4 +176,8 @@ export class MonitoringViewBaseController {
       render(component, document.getElementById(this.reactNodeId));
     }
   }
+
+  getPaginationRouteOptions() {
+    return {};
+  }
 }
diff --git a/x-pack/legacy/plugins/monitoring/public/views/base_eui_table_controller.js b/x-pack/legacy/plugins/monitoring/public/views/base_eui_table_controller.js
index dfc548aeb97f20..fb712fa3e7c6c4 100644
--- a/x-pack/legacy/plugins/monitoring/public/views/base_eui_table_controller.js
+++ b/x-pack/legacy/plugins/monitoring/public/views/base_eui_table_controller.js
@@ -8,6 +8,8 @@ import { MonitoringViewBaseController } from './';
 import { euiTableStorageGetter, euiTableStorageSetter } from 'plugins/monitoring/components/table';
 import { EUI_SORT_ASCENDING } from '../../common/constants';
 
+const PAGE_SIZE_OPTIONS = [5, 10, 20, 50];
+
 /**
  * Class to manage common instantiation behaviors in a view controller
  * And add persistent state to a table:
@@ -42,17 +44,22 @@ export class MonitoringViewBaseEuiTableController extends MonitoringViewBaseCont
     const setLocalStorageData = euiTableStorageSetter(storageKey);
     const { page, sort } = getLocalStorageData(storage);
 
-    this.pagination = page || {
+    this.pagination = {
+      pageSize: 20,
       initialPageSize: 20,
-      pageSizeOptions: [5, 10, 20, 50]
+      pageIndex: 0,
+      initialPageIndex: 0,
+      pageSizeOptions: PAGE_SIZE_OPTIONS
     };
 
-    this.sorting = sort || {
-      sort: {
-        field: 'name',
-        direction: EUI_SORT_ASCENDING
+    if (page) {
+      if (!PAGE_SIZE_OPTIONS.includes(page.size)) {
+        page.size = 20;
       }
-    };
+      this.setPagination(page);
+    }
+
+    this.setSorting(sort);
 
     this.onTableChange = ({ page, sort }) => {
       setLocalStorageData(storage, {
@@ -62,5 +69,59 @@ export class MonitoringViewBaseEuiTableController extends MonitoringViewBaseCont
         }
       });
     };
+
+    this.updateData();
+  }
+
+  setPagination(page) {
+    this.pagination = {
+      pageSize: page.size,
+      pageIndex: page.index,
+      pageSizeOptions: PAGE_SIZE_OPTIONS
+    };
+  }
+
+  setSorting(sort) {
+    this.sorting = sort || { sort: {} };
+
+    if (!this.sorting.sort.field) {
+      this.sorting.sort.field = 'name';
+    }
+    if (!this.sorting.sort.direction) {
+      this.sorting.sort.direction = EUI_SORT_ASCENDING;
+    }
+  }
+
+  setQueryText(queryText) {
+    this.queryText = queryText;
+  }
+
+  getPaginationRouteOptions() {
+    if (!this.pagination || !this.sorting) {
+      return {};
+    }
+
+    return {
+      pagination: {
+        size: this.pagination.pageSize,
+        index: this.pagination.pageIndex
+      },
+      ...this.sorting,
+      queryText: this.queryText,
+    };
+  }
+
+  getPaginationTableProps(pagination) {
+    return {
+      sorting: this.sorting,
+      pagination: pagination,
+      onTableChange: this.onTableChange,
+      fetchMoreData: async ({ page, sort, queryText }) => {
+        this.setPagination(page);
+        this.setSorting(sort);
+        this.setQueryText(queryText);
+        this.updateData();
+      }
+    };
   }
 }
diff --git a/x-pack/legacy/plugins/monitoring/public/views/beats/listing/index.js b/x-pack/legacy/plugins/monitoring/public/views/beats/listing/index.js
index 2878874e1a4a93..deb195df1d8108 100644
--- a/x-pack/legacy/plugins/monitoring/public/views/beats/listing/index.js
+++ b/x-pack/legacy/plugins/monitoring/public/views/beats/listing/index.js
@@ -15,8 +15,7 @@ import React, { Fragment } from 'react';
 import { I18nContext } from 'ui/i18n';
 import { Listing } from '../../../components/beats/listing/listing';
 import { SetupModeRenderer } from '../../../components/renderers';
-import { BEATS_SYSTEM_ID } from '../../../../../telemetry/common/constants';
-import { CODE_PATH_BEATS } from '../../../../common/constants';
+import { CODE_PATH_BEATS, BEATS_SYSTEM_ID } from '../../../../common/constants';
 
 uiRoutes.when('/beats/beats', {
   template,
@@ -63,7 +62,7 @@ uiRoutes.when('/beats/beats', {
             scope={this.scope}
             injector={this.injector}
             productName={BEATS_SYSTEM_ID}
-            render={({ setupMode, flyoutComponent }) => (
+            render={({ setupMode, flyoutComponent, bottomBarComponent }) => (
               <Fragment>
                 {flyoutComponent}
                 <Listing
@@ -78,6 +77,7 @@ uiRoutes.when('/beats/beats', {
                     scope: this.scope,
                   }}
                 />
+                {bottomBarComponent}
               </Fragment>
             )}
           />
diff --git a/x-pack/legacy/plugins/monitoring/public/views/cluster/overview/index.js b/x-pack/legacy/plugins/monitoring/public/views/cluster/overview/index.js
index 5cf212abf901f9..60cb8349070e49 100644
--- a/x-pack/legacy/plugins/monitoring/public/views/cluster/overview/index.js
+++ b/x-pack/legacy/plugins/monitoring/public/views/cluster/overview/index.js
@@ -58,7 +58,7 @@ uiRoutes.when('/overview', {
             <SetupModeRenderer
               scope={$scope}
               injector={$injector}
-              render={({ setupMode, flyoutComponent }) => (
+              render={({ setupMode, flyoutComponent, bottomBarComponent }) => (
                 <Fragment>
                   {flyoutComponent}
                   <Overview
@@ -67,6 +67,7 @@ uiRoutes.when('/overview', {
                     changeUrl={changeUrl}
                     showLicenseExpiration={showLicenseExpiration}
                   />
+                  {bottomBarComponent}
                 </Fragment>
               )}
             />
diff --git a/x-pack/legacy/plugins/monitoring/public/views/elasticsearch/nodes/index.js b/x-pack/legacy/plugins/monitoring/public/views/elasticsearch/nodes/index.js
index 67658c665d3cfa..ce7e81a80e5217 100644
--- a/x-pack/legacy/plugins/monitoring/public/views/elasticsearch/nodes/index.js
+++ b/x-pack/legacy/plugins/monitoring/public/views/elasticsearch/nodes/index.js
@@ -16,7 +16,7 @@ import { ElasticsearchNodes } from '../../../components';
 import { I18nContext } from 'ui/i18n';
 import { ajaxErrorHandlersProvider } from '../../../lib/ajax_error_handler';
 import { SetupModeRenderer } from '../../../components/renderers';
-import { ELASTICSEARCH_CUSTOM_ID, CODE_PATH_ELASTICSEARCH } from '../../../../common/constants';
+import { ELASTICSEARCH_SYSTEM_ID, CODE_PATH_ELASTICSEARCH } from '../../../../common/constants';
 
 uiRoutes.when('/elasticsearch/nodes', {
   template,
@@ -83,8 +83,8 @@ uiRoutes.when('/elasticsearch/nodes', {
             <SetupModeRenderer
               scope={$scope}
               injector={$injector}
-              productName={ELASTICSEARCH_CUSTOM_ID}
-              render={({ setupMode, flyoutComponent }) => (
+              productName={ELASTICSEARCH_SYSTEM_ID}
+              render={({ setupMode, flyoutComponent, bottomBarComponent }) => (
                 <Fragment>
                   {flyoutComponent}
                   <ElasticsearchNodes
@@ -97,6 +97,7 @@ uiRoutes.when('/elasticsearch/nodes', {
                     pagination={this.pagination}
                     onTableChange={this.onTableChange}
                   />
+                  {bottomBarComponent}
                 </Fragment>
               )}
             />
diff --git a/x-pack/legacy/plugins/monitoring/public/views/kibana/instances/index.js b/x-pack/legacy/plugins/monitoring/public/views/kibana/instances/index.js
index 1b8e2b193c97b7..f5f2f5a5a76df1 100644
--- a/x-pack/legacy/plugins/monitoring/public/views/kibana/instances/index.js
+++ b/x-pack/legacy/plugins/monitoring/public/views/kibana/instances/index.js
@@ -13,8 +13,7 @@ import template from './index.html';
 import { KibanaInstances } from 'plugins/monitoring/components/kibana/instances';
 import { SetupModeRenderer } from '../../../components/renderers';
 import { I18nContext } from 'ui/i18n';
-import { KIBANA_SYSTEM_ID } from '../../../../../telemetry/common/constants';
-import { CODE_PATH_KIBANA } from '../../../../common/constants';
+import { KIBANA_SYSTEM_ID, CODE_PATH_KIBANA } from '../../../../common/constants';
 
 uiRoutes.when('/kibana/instances', {
   template,
@@ -47,7 +46,7 @@ uiRoutes.when('/kibana/instances', {
               scope={$scope}
               injector={$injector}
               productName={KIBANA_SYSTEM_ID}
-              render={({ setupMode, flyoutComponent }) => (
+              render={({ setupMode, flyoutComponent, bottomBarComponent }) => (
                 <Fragment>
                   {flyoutComponent}
                   <KibanaInstances
@@ -62,6 +61,7 @@ uiRoutes.when('/kibana/instances', {
                       kbnUrl,
                     }}
                   />
+                  {bottomBarComponent}
                 </Fragment>
               )}
             />
diff --git a/x-pack/legacy/plugins/monitoring/public/views/loading/index.js b/x-pack/legacy/plugins/monitoring/public/views/loading/index.js
index 683a1e1ac5264a..2b79e047177a61 100644
--- a/x-pack/legacy/plugins/monitoring/public/views/loading/index.js
+++ b/x-pack/legacy/plugins/monitoring/public/views/loading/index.js
@@ -10,7 +10,6 @@ import { PageLoading } from 'plugins/monitoring/components';
 import uiRoutes from 'ui/routes';
 import { I18nContext } from 'ui/i18n';
 import template from './index.html';
-import { toggleSetupMode, getSetupModeState, initSetupModeState } from '../../lib/setup_mode';
 import { CODE_PATH_LICENSE } from '../../../common/constants';
 
 const REACT_DOM_ID = 'monitoringLoadingReactApp';
@@ -23,17 +22,6 @@ uiRoutes
         const monitoringClusters = $injector.get('monitoringClusters');
         const kbnUrl = $injector.get('kbnUrl');
 
-        initSetupModeState($scope, $injector);
-
-        const setupMode = getSetupModeState();
-        // For phase 3, this is not an valid route unless
-        // setup mode is currently enabled. For phase 4,
-        // we will remove this check.
-        if (!setupMode.enabled) {
-          kbnUrl.changePath('/no-data');
-          return;
-        }
-
         $scope.$on('$destroy', () => {
           unmountComponentAtNode(document.getElementById(REACT_DOM_ID));
         });
@@ -48,12 +36,8 @@ uiRoutes
               kbnUrl.changePath('/home');
               return;
             }
-            initSetupModeState($scope, $injector);
-            return toggleSetupMode(true)
-              .then(() => {
-                kbnUrl.changePath('/elasticsearch/nodes');
-                $scope.$apply();
-              });
+            kbnUrl.changePath('/no-data');
+            return;
           });
       }
 
diff --git a/x-pack/legacy/plugins/monitoring/public/views/logstash/node/pipelines/index.js b/x-pack/legacy/plugins/monitoring/public/views/logstash/node/pipelines/index.js
index 80fcde76427589..b8bdccab349772 100644
--- a/x-pack/legacy/plugins/monitoring/public/views/logstash/node/pipelines/index.js
+++ b/x-pack/legacy/plugins/monitoring/public/views/logstash/node/pipelines/index.js
@@ -24,7 +24,7 @@ import { PipelineListing } from '../../../../components/logstash/pipeline_listin
 import { DetailStatus } from '../../../../components/logstash/detail_status';
 import { CODE_PATH_LOGSTASH } from '../../../../../common/constants';
 
-const getPageData = ($injector) => {
+const getPageData = ($injector, _api = undefined, routeOptions = {}) => {
   const $route = $injector.get('$route');
   const $http = $injector.get('$http');
   const globalState = $injector.get('globalState');
@@ -39,7 +39,8 @@ const getPageData = ($injector) => {
     timeRange: {
       min: timeBounds.min.toISOString(),
       max: timeBounds.max.toISOString()
-    }
+    },
+    ...routeOptions
   })
     .then(response => response.data)
     .catch((err) => {
@@ -70,7 +71,6 @@ uiRoutes
         const routeInit = Private(routeInitProvider);
         return routeInit({ codePaths: [CODE_PATH_LOGSTASH] });
       },
-      pageData: getPageData
     },
     controller: class extends MonitoringViewBaseEuiTableController {
       constructor($injector, $scope) {
@@ -82,9 +82,11 @@ uiRoutes
           getPageData,
           reactNodeId: 'monitoringLogstashNodePipelinesApp',
           $scope,
-          $injector
+          $injector,
+          fetchDataImmediately: false // We want to apply pagination before sending the first request
         });
 
+
         $scope.$watch(() => this.data, data => {
           if (!data || !data.nodeSummary) {
             return;
@@ -97,6 +99,11 @@ uiRoutes
             }
           }));
 
+          const pagination = {
+            ...this.pagination,
+            totalItemCount: data.totalPipelineCount
+          };
+
           this.renderReact(
             <I18nContext>
               <PipelineListing
@@ -106,9 +113,7 @@ uiRoutes
                 stats={data.nodeSummary}
                 statusComponent={DetailStatus}
                 data={data.pipelines}
-                sorting={this.sorting}
-                pagination={this.pagination}
-                onTableChange={this.onTableChange}
+                {...this.getPaginationTableProps(pagination)}
                 dateFormat={config.get('dateFormat')}
                 upgradeMessage={makeUpgradeMessage(data.nodeSummary.version, i18n)}
                 angular={{
diff --git a/x-pack/legacy/plugins/monitoring/public/views/logstash/nodes/index.js b/x-pack/legacy/plugins/monitoring/public/views/logstash/nodes/index.js
index a392911dcda1dd..1f4b37b77ad64a 100644
--- a/x-pack/legacy/plugins/monitoring/public/views/logstash/nodes/index.js
+++ b/x-pack/legacy/plugins/monitoring/public/views/logstash/nodes/index.js
@@ -12,8 +12,7 @@ import template from './index.html';
 import { I18nContext } from 'ui/i18n';
 import { Listing } from '../../../components/logstash/listing';
 import { SetupModeRenderer } from '../../../components/renderers';
-import { LOGSTASH_SYSTEM_ID } from '../../../../../telemetry/common/constants';
-import { CODE_PATH_LOGSTASH } from '../../../../common/constants';
+import { CODE_PATH_LOGSTASH, LOGSTASH_SYSTEM_ID } from '../../../../common/constants';
 
 uiRoutes.when('/logstash/nodes', {
   template,
@@ -46,7 +45,7 @@ uiRoutes.when('/logstash/nodes', {
               scope={$scope}
               injector={$injector}
               productName={LOGSTASH_SYSTEM_ID}
-              render={({ setupMode, flyoutComponent }) => (
+              render={({ setupMode, flyoutComponent, bottomBarComponent }) => (
                 <Fragment>
                   {flyoutComponent}
                   <Listing
@@ -58,6 +57,7 @@ uiRoutes.when('/logstash/nodes', {
                     onTableChange={this.onTableChange}
                     angular={{ kbnUrl, scope: $scope }}
                   />
+                  {bottomBarComponent}
                 </Fragment>
               )}
             />
diff --git a/x-pack/legacy/plugins/monitoring/public/views/logstash/pipelines/index.js b/x-pack/legacy/plugins/monitoring/public/views/logstash/pipelines/index.js
index 659c1459451b2a..73c5674516a125 100644
--- a/x-pack/legacy/plugins/monitoring/public/views/logstash/pipelines/index.js
+++ b/x-pack/legacy/plugins/monitoring/public/views/logstash/pipelines/index.js
@@ -24,7 +24,7 @@ import { CODE_PATH_LOGSTASH } from '../../../../common/constants';
  * Logstash Pipelines Listing page
  */
 
-const getPageData = ($injector) => {
+const getPageData = ($injector, _api = undefined, routeOptions = {}) => {
   const $http = $injector.get('$http');
   const globalState = $injector.get('globalState');
   const Private = $injector.get('Private');
@@ -37,7 +37,8 @@ const getPageData = ($injector) => {
     timeRange: {
       min: timeBounds.min.toISOString(),
       max: timeBounds.max.toISOString()
-    }
+    },
+    ...routeOptions
   })
     .then(response => response.data)
     .catch((err) => {
@@ -64,7 +65,6 @@ uiRoutes
         const routeInit = Private(routeInitProvider);
         return routeInit({ codePaths: [CODE_PATH_LOGSTASH] });
       },
-      pageData: getPageData
     },
     controller: class LogstashPipelinesList extends MonitoringViewBaseEuiTableController {
       constructor($injector, $scope) {
@@ -74,7 +74,8 @@ uiRoutes
           getPageData,
           reactNodeId: 'monitoringLogstashPipelinesApp',
           $scope,
-          $injector
+          $injector,
+          fetchDataImmediately: false // We want to apply pagination before sending the first request
         });
 
         const $route = $injector.get('$route');
@@ -93,6 +94,11 @@ uiRoutes
             ? makeUpgradeMessage(pageData.clusterStatus.versions, i18n)
             : null;
 
+          const pagination = {
+            ...this.pagination,
+            totalItemCount: pageData.totalPipelineCount
+          };
+
           super.renderReact(
             <I18nContext>
               <PipelineListing
@@ -100,9 +106,7 @@ uiRoutes
                 onBrush={(xaxis) => this.onBrush({ xaxis })}
                 stats={pageData.clusterStatus}
                 data={pageData.pipelines}
-                sorting={this.sorting}
-                pagination={this.pagination}
-                onTableChange={this.onTableChange}
+                {...this.getPaginationTableProps(pagination)}
                 upgradeMessage={upgradeMessage}
                 dateFormat={config.get('dateFormat')}
                 angular={{
diff --git a/x-pack/legacy/plugins/monitoring/public/views/no_data/controller.js b/x-pack/legacy/plugins/monitoring/public/views/no_data/controller.js
index 5ad68268ed31fa..0ecd6c83265fff 100644
--- a/x-pack/legacy/plugins/monitoring/public/views/no_data/controller.js
+++ b/x-pack/legacy/plugins/monitoring/public/views/no_data/controller.js
@@ -72,7 +72,14 @@ export class NoDataController extends MonitoringViewBaseController {
     //Need to set updateModel after super since there is no `this` otherwise
     const { updateModel } = new ModelUpdater($scope, this);
     const enabler = new Enabler($http, updateModel);
-    $scope.$watch(() => this, () => this.render(enabler), true);
+    $scope.$watch(() => this, () => {
+      if (this.isCollectionEnabledUpdated && !this.reason) {
+        return;
+      }
+      this.render(enabler);
+    }, true);
+
+    this.changePath = path => kbnUrl.changePath(path);
   }
 
   getDefaultModel() {
@@ -89,9 +96,10 @@ export class NoDataController extends MonitoringViewBaseController {
 
   render(enabler) {
     const props = this;
+
     this.renderReact(
       <I18nContext>
-        <NoData {...props} enabler={enabler} />
+        <NoData {...props} enabler={enabler} changePath={this.changePath} />
       </I18nContext>
     );
   }
diff --git a/x-pack/legacy/plugins/monitoring/server/lib/cluster/get_clusters_from_request.js b/x-pack/legacy/plugins/monitoring/server/lib/cluster/get_clusters_from_request.js
index 9b6a2380bf4ecf..9fc6866f0f579b 100644
--- a/x-pack/legacy/plugins/monitoring/server/lib/cluster/get_clusters_from_request.js
+++ b/x-pack/legacy/plugins/monitoring/server/lib/cluster/get_clusters_from_request.js
@@ -150,7 +150,7 @@ export async function getClustersFromRequest(req, indexPatterns, { clusterUuid,
     : [];
 
   const clusterPipelineNodesCount = isInCodePath(codePaths, [CODE_PATH_LOGSTASH])
-    ? await getPipelines(req, lsIndexPattern, ['logstash_cluster_pipeline_nodes_count'])
+    ? await getPipelines(req, lsIndexPattern, null, ['logstash_cluster_pipeline_nodes_count'])
     : [];
 
   // add the logstash data to each cluster
diff --git a/x-pack/legacy/plugins/monitoring/server/lib/details/__test__/get_metrics.test.js b/x-pack/legacy/plugins/monitoring/server/lib/details/__test__/get_metrics.test.js
index f7caf9de0d1fe5..5af714f7b3ba26 100644
--- a/x-pack/legacy/plugins/monitoring/server/lib/details/__test__/get_metrics.test.js
+++ b/x-pack/legacy/plugins/monitoring/server/lib/details/__test__/get_metrics.test.js
@@ -51,7 +51,10 @@ function getMockReq(metricsBuckets = []) {
     },
     params: {
       clusterUuid: '1234xyz'
-    }
+    },
+    getUiSettingsService: () => ({
+      get: () => 'Browser'
+    })
   };
 }
 
diff --git a/x-pack/legacy/plugins/monitoring/server/lib/details/get_metrics.js b/x-pack/legacy/plugins/monitoring/server/lib/details/get_metrics.js
index 57c936f960212b..e11de68b55c1f0 100644
--- a/x-pack/legacy/plugins/monitoring/server/lib/details/get_metrics.js
+++ b/x-pack/legacy/plugins/monitoring/server/lib/details/get_metrics.js
@@ -10,17 +10,24 @@ import Promise from 'bluebird';
 import { checkParam } from '../error_missing_required';
 import { getSeries } from './get_series';
 import { calculateTimeseriesInterval } from '../calculate_timeseries_interval';
+import { getTimezone } from '../get_timezone';
 
-export function getMetrics(req, indexPattern, metricSet = [], filters = []) {
+export async function getMetrics(req, indexPattern, metricSet = [], filters = [], metricOptions = {}, numOfBuckets = 0) {
   checkParam(indexPattern, 'indexPattern in details/getMetrics');
   checkParam(metricSet, 'metricSet in details/getMetrics');
 
   const config = req.server.config();
   // TODO: Pass in req parameters as explicit function parameters
-  const min = moment.utc(req.payload.timeRange.min).valueOf();
+  let min = moment.utc(req.payload.timeRange.min).valueOf();
   const max = moment.utc(req.payload.timeRange.max).valueOf();
   const minIntervalSeconds = config.get('xpack.monitoring.min_interval_seconds');
   const bucketSize = calculateTimeseriesInterval(min, max, minIntervalSeconds);
+  const timezone = await getTimezone(req);
+
+  // If specified, adjust the time period to ensure we only return this many buckets
+  if (numOfBuckets > 0) {
+    min = max - (numOfBuckets * bucketSize * 1000);
+  }
 
   return Promise.map(metricSet, metric => {
     // metric names match the literal metric name, but they can be supplied in groups or individually
@@ -33,7 +40,7 @@ export function getMetrics(req, indexPattern, metricSet = [], filters = []) {
     }
 
     return Promise.map(metricNames, metricName => {
-      return getSeries(req, indexPattern, metricName, filters, { min, max, bucketSize });
+      return getSeries(req, indexPattern, metricName, metricOptions, filters, { min, max, bucketSize, timezone });
     });
   })
     .then(rows => {
diff --git a/x-pack/legacy/plugins/monitoring/server/lib/details/get_series.js b/x-pack/legacy/plugins/monitoring/server/lib/details/get_series.js
index 306e93273c157d..059b02980a427a 100644
--- a/x-pack/legacy/plugins/monitoring/server/lib/details/get_series.js
+++ b/x-pack/legacy/plugins/monitoring/server/lib/details/get_series.js
@@ -14,6 +14,7 @@ import {
   NORMALIZED_DERIVATIVE_UNIT,
   CALCULATE_DURATION_UNTIL
 } from '../../../common/constants';
+import { formatUTCTimestampForTimezone } from '../format_timezone';
 
 /**
  * Derivative metrics for the first two agg buckets are unusable. For the first bucket, there
@@ -70,18 +71,27 @@ function createMetricAggs(metric) {
   return metric.aggs;
 }
 
-function fetchSeries(req, indexPattern, metric, min, max, bucketSize, filters) {
+function fetchSeries(req, indexPattern, metric, metricOptions, min, max, bucketSize, filters) {
   // if we're using a derivative metric, offset the min (also @see comment on offsetMinForDerivativeMetric function)
   const adjustedMin = metric.derivative ? offsetMinForDerivativeMetric(min, bucketSize) : min;
 
-  const dateHistogramSubAggs = metric.dateHistogramSubAggs || {
-    metric: {
-      [metric.metricAgg]: {
-        field: metric.field
-      }
-    },
-    ...createMetricAggs(metric)
-  };
+  let dateHistogramSubAggs = null;
+  if (metric.getDateHistogramSubAggs) {
+    dateHistogramSubAggs = metric.getDateHistogramSubAggs(metricOptions);
+  }
+  else if (metric.dateHistogramSubAggs) {
+    dateHistogramSubAggs = metric.dateHistogramSubAggs;
+  }
+  else {
+    dateHistogramSubAggs = {
+      metric: {
+        [metric.metricAgg]: {
+          field: metric.field
+        }
+      },
+      ...createMetricAggs(metric)
+    };
+  }
 
   const params = {
     index: indexPattern,
@@ -177,13 +187,41 @@ const formatBucketSize = bucketSizeInSeconds => {
   return formatTimestampToDuration(timestamp, CALCULATE_DURATION_UNTIL, now);
 };
 
-function handleSeries(metric, min, max, bucketSizeInSeconds, response) {
+function isObject(value) {
+  return typeof value === 'object' && !!value && !Array.isArray(value);
+}
+
+function countBuckets(data, count = 0) {
+  if (data.buckets) {
+    count += data.buckets.length;
+    for (const bucket of data.buckets) {
+      for (const key of Object.keys(bucket)) {
+        if (isObject(bucket[key])) {
+          count = countBuckets(bucket[key], count);
+        }
+      }
+    }
+  } else {
+    for (const key of Object.keys(data)) {
+      if (isObject(data[key])) {
+        count = countBuckets(data[key], count);
+      }
+    }
+  }
+  return count;
+}
+
+function handleSeries(metric, min, max, bucketSizeInSeconds, timezone, response) {
   const { derivative, calculation: customCalculation } = metric;
   const buckets = get(response, 'aggregations.check.buckets', []);
   const firstUsableBucketIndex = findFirstUsableBucketIndex(buckets, min);
   const lastUsableBucketIndex = findLastUsableBucketIndex(buckets, max, firstUsableBucketIndex, bucketSizeInSeconds * 1000);
   let data = [];
 
+  if (metric.debug) {
+    console.log(`metric.debug field=${metric.field} bucketsCreated: ${countBuckets(get(response, 'aggregations.check'))}`);
+    console.log(`metric.debug`, { bucketsLength: buckets.length, firstUsableBucketIndex, lastUsableBucketIndex });
+  }
 
   if (firstUsableBucketIndex <= lastUsableBucketIndex) {
     // map buckets to values for charts
@@ -193,14 +231,17 @@ function handleSeries(metric, min, max, bucketSizeInSeconds, response) {
     data = buckets
       .slice(firstUsableBucketIndex, lastUsableBucketIndex + 1) // take only the buckets we know are usable
       .map(bucket => ([
-        bucket.key,
+        formatUTCTimestampForTimezone(bucket.key, timezone),
         calculation(bucket, key, metric, bucketSizeInSeconds)
       ])); // map buckets to X/Y coords for Flot charting
   }
 
   return {
     bucket_size: formatBucketSize(bucketSizeInSeconds),
-    timeRange: { min, max },
+    timeRange: {
+      min: formatUTCTimestampForTimezone(min, timezone),
+      max: formatUTCTimestampForTimezone(max, timezone),
+    },
     metric: metric.serialize(),
     data
   };
@@ -217,14 +258,14 @@ function handleSeries(metric, min, max, bucketSizeInSeconds, response) {
  * @param {Array} filters Any filters that should be applied to the query.
  * @return {Promise} The object response containing the {@code timeRange}, {@code metric}, and {@code data}.
  */
-export async function getSeries(req, indexPattern, metricName, filters, { min, max, bucketSize }) {
+export async function getSeries(req, indexPattern, metricName, metricOptions, filters, { min, max, bucketSize, timezone }) {
   checkParam(indexPattern, 'indexPattern in details/getSeries');
 
   const metric = metrics[metricName];
   if (!metric) {
     throw new Error(`Not a valid metric: ${metricName}`);
   }
-  const response = await fetchSeries(req, indexPattern, metric, min, max, bucketSize, filters);
+  const response = await fetchSeries(req, indexPattern, metric, metricOptions, min, max, bucketSize, filters);
 
-  return handleSeries(metric, min, max, bucketSize, response);
+  return handleSeries(metric, min, max, bucketSize, timezone, response);
 }
diff --git a/x-pack/legacy/plugins/monitoring/server/lib/format_timezone.js b/x-pack/legacy/plugins/monitoring/server/lib/format_timezone.js
new file mode 100644
index 00000000000000..334477ac1c3596
--- /dev/null
+++ b/x-pack/legacy/plugins/monitoring/server/lib/format_timezone.js
@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import moment from 'moment';
+
+
+/**
+ * This function is designed to offset a UTC timestamp based on the provided timezone
+ * For example, EST is UTC-4h so this function will subtract (4 * 60 * 60 * 1000)ms
+ * from the UTC timestamp. This allows us to allow users to view monitoring data
+ * in various timezones without needing to not store UTC dates.
+ *
+ * @param {*} utcTimestamp UTC timestamp
+ * @param {*} timezone The timezone to convert into
+ */
+export const formatUTCTimestampForTimezone = (utcTimestamp, timezone) => {
+  if (timezone === 'Browser') {
+    return utcTimestamp;
+  }
+  const offsetInMinutes = moment.tz(timezone).utcOffset();
+  const offsetTimestamp = utcTimestamp + (offsetInMinutes * 1 * 60 * 1000);
+  return offsetTimestamp;
+};
diff --git a/x-pack/legacy/plugins/uptime/public/apps/kibana_app.ts b/x-pack/legacy/plugins/monitoring/server/lib/get_timezone.js
similarity index 67%
rename from x-pack/legacy/plugins/uptime/public/apps/kibana_app.ts
rename to x-pack/legacy/plugins/monitoring/server/lib/get_timezone.js
index bc82dc0cddeece..0da15bf6b28e17 100644
--- a/x-pack/legacy/plugins/uptime/public/apps/kibana_app.ts
+++ b/x-pack/legacy/plugins/monitoring/server/lib/get_timezone.js
@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { compose } from '../lib/compose/kibana_compose';
-import { startApp } from './start_app';
-
-startApp(compose());
+export async function getTimezone(req) {
+  return await req.getUiSettingsService().get('dateFormat:tz');
+}
diff --git a/x-pack/legacy/plugins/monitoring/server/lib/logs/get_logs.js b/x-pack/legacy/plugins/monitoring/server/lib/logs/get_logs.js
index 80d7f21fc45db2..0d45b8c6a1c4e7 100644
--- a/x-pack/legacy/plugins/monitoring/server/lib/logs/get_logs.js
+++ b/x-pack/legacy/plugins/monitoring/server/lib/logs/get_logs.js
@@ -4,10 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import moment from 'moment';
 import { get } from 'lodash';
 import { checkParam } from '../error_missing_required';
 import { createTimeFilter } from '../create_query';
 import { detectReason } from './detect_reason';
+import { formatUTCTimestampForTimezone } from '../format_timezone';
+import { getTimezone } from '../get_timezone';
 
 async function handleResponse(response, req, filebeatIndexPattern, opts) {
   const result = {
@@ -15,15 +18,17 @@ async function handleResponse(response, req, filebeatIndexPattern, opts) {
     logs: []
   };
 
+  const timezone = await getTimezone(req);
   const hits = get(response, 'hits.hits', []);
   if (hits.length) {
     result.enabled = true;
     result.logs = hits.map(hit => {
       const source = hit._source;
       const type = get(source, 'event.dataset').split('.')[1];
+      const utcTimestamp = moment(get(source, '@timestamp')).valueOf();
 
       return {
-        timestamp: get(source, '@timestamp'),
+        timestamp: formatUTCTimestampForTimezone(utcTimestamp, timezone),
         component: get(source, 'elasticsearch.component'),
         node: get(source, 'elasticsearch.node.name'),
         index: get(source, 'elasticsearch.index.name'),
diff --git a/x-pack/legacy/plugins/monitoring/server/lib/logstash/__tests__/get_pipelines.js b/x-pack/legacy/plugins/monitoring/server/lib/logstash/__tests__/get_pipelines.js
index 47735e08c470a0..d4327049b2b412 100644
--- a/x-pack/legacy/plugins/monitoring/server/lib/logstash/__tests__/get_pipelines.js
+++ b/x-pack/legacy/plugins/monitoring/server/lib/logstash/__tests__/get_pipelines.js
@@ -6,7 +6,7 @@
 
 import expect from '@kbn/expect';
 import {
-  _handleResponse,
+  handleGetPipelinesResponse,
   processPipelinesAPIResponse } from '../get_pipelines';
 
 describe('processPipelinesAPIResponse', () => {
@@ -71,7 +71,7 @@ describe('get_pipelines', () => {
     });
 
     it ('returns an empty array', () => {
-      const result = _handleResponse(fetchPipelinesWithMetricsResult);
+      const result = handleGetPipelinesResponse(fetchPipelinesWithMetricsResult);
       expect(result).to.eql([]);
     });
   });
@@ -97,7 +97,7 @@ describe('get_pipelines', () => {
     });
 
     it ('returns the correct structure for a non-empty response', () => {
-      const result = _handleResponse(fetchPipelinesWithMetricsResult);
+      const result = handleGetPipelinesResponse(fetchPipelinesWithMetricsResult);
       expect(result).to.eql([
         {
           id: 'apache_logs',
diff --git a/x-pack/legacy/plugins/monitoring/server/lib/logstash/get_paginated_pipelines.js b/x-pack/legacy/plugins/monitoring/server/lib/logstash/get_paginated_pipelines.js
new file mode 100644
index 00000000000000..9d988c2da2224d
--- /dev/null
+++ b/x-pack/legacy/plugins/monitoring/server/lib/logstash/get_paginated_pipelines.js
@@ -0,0 +1,69 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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 { filter } from '../pagination/filter';
+import { getLogstashPipelineIds } from './get_pipeline_ids';
+import { handleGetPipelinesResponse } from './get_pipelines';
+import { sortPipelines } from './sort_pipelines';
+import { paginate } from '../pagination/paginate';
+import { getMetrics } from '../details/get_metrics';
+
+/**
+ * This function performs an optimization around the pipeline listing tables in the UI. To avoid
+ * query performances in Elasticsearch (mainly thinking of `search.max_buckets` overflows), we do
+ * not want to fetch all time-series data for all pipelines. Instead, we only want to fetch the
+ * time-series data for the pipelines visible in the listing table. This function accepts
+ * pagination/sorting/filtering data to determine which pipelines will be visible in the table
+ * and returns that so the caller can perform their normal call to get the time-series data.
+ *
+ * @param {*} req - Server request object
+ * @param {*} lsIndexPattern - The index pattern to search against (`.monitoring-logstash-*`)
+ * @param {*} uuids - The optional `clusterUuid` and `logstashUuid` to filter the results from
+ * @param {*} metricSet - The array of metrics that are sortable in the UI
+ * @param {*} pagination - ({ index, size })
+ * @param {*} sort - ({ field, direction })
+ * @param {*} queryText - Text that will be used to filter out pipelines
+ */
+export async function getPaginatedPipelines(req, lsIndexPattern, { clusterUuid, logstashUuid }, metricSet, pagination, sort, queryText) {
+  const config = req.server.config();
+  const size = config.get('xpack.monitoring.max_bucket_size');
+  const pipelines = await getLogstashPipelineIds(req, lsIndexPattern, { clusterUuid, logstashUuid }, size);
+
+  // `metricSet` defines a list of metrics that are sortable in the UI
+  // but we don't need to fetch all the data for these metrics to perform
+  // the necessary sort - we only need the last bucket of data so we
+  // fetch the last two buckets of data (to ensure we have a single full bucekt),
+  // then return the value from that last bucket
+  const metricSeriesData = await getMetrics(req, lsIndexPattern, metricSet, [], { pageOfPipelines: pipelines }, 2);
+  const pipelineAggregationsData = handleGetPipelinesResponse(metricSeriesData, pipelines.map(p => p.id));
+  for (const pipelineAggregationData of pipelineAggregationsData) {
+    for (const pipeline of pipelines) {
+      if (pipelineAggregationData.id === pipeline.id) {
+        for (const metric of metricSet) {
+          const dataSeries = get(pipelineAggregationData, `metrics.${metric}.data`, [[]]);
+          pipeline[metric] = dataSeries[dataSeries.length - 1][1];
+        }
+      }
+    }
+  }
+
+  // Manually apply pagination/sorting/filtering concerns
+
+  // Filtering
+  const filteredPipelines = filter(pipelines, queryText, ['id']); // We only support filtering by id right now
+
+  // Sorting
+  const sortedPipelines = sortPipelines(filteredPipelines, sort);
+
+  // Pagination
+  const pageOfPipelines = paginate(pagination, sortedPipelines);
+
+  return {
+    pageOfPipelines,
+    totalPipelineCount: filteredPipelines.length
+  };
+}
diff --git a/x-pack/legacy/plugins/monitoring/server/lib/logstash/get_pipeline_ids.js b/x-pack/legacy/plugins/monitoring/server/lib/logstash/get_pipeline_ids.js
new file mode 100644
index 00000000000000..f99925425abd3e
--- /dev/null
+++ b/x-pack/legacy/plugins/monitoring/server/lib/logstash/get_pipeline_ids.js
@@ -0,0 +1,78 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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 { get } from 'lodash';
+import { createQuery } from '../create_query';
+import { LogstashMetric } from '../metrics';
+
+export async function getLogstashPipelineIds(req, logstashIndexPattern, { clusterUuid, logstashUuid }, size) {
+  const start = moment.utc(req.payload.timeRange.min).valueOf();
+  const end = moment.utc(req.payload.timeRange.max).valueOf();
+
+  const filters = [];
+  if (logstashUuid) {
+    filters.push({ term: { 'logstash_stats.logstash.uuid': logstashUuid } });
+  }
+
+  const params = {
+    index: logstashIndexPattern,
+    size: 0,
+    ignoreUnavailable: true,
+    filterPath: [
+      'aggregations.nested_context.composite_data.buckets'
+    ],
+    body: {
+      query: createQuery({
+        start,
+        end,
+        metric: LogstashMetric.getMetricFields(),
+        clusterUuid,
+        filters,
+      }),
+      aggs: {
+        nested_context: {
+          nested: {
+            path: 'logstash_stats.pipelines'
+          },
+          aggs: {
+            composite_data: {
+              composite: {
+                size,
+                sources: [
+                  {
+                    id: {
+                      terms: {
+                        field: 'logstash_stats.pipelines.id',
+                      }
+                    }
+                  },
+                  {
+                    hash: {
+                      terms: {
+                        field: 'logstash_stats.pipelines.hash',
+                      }
+                    }
+                  },
+                  {
+                    ephemeral_id: {
+                      terms: {
+                        field: 'logstash_stats.pipelines.ephemeral_id',
+                      }
+                    }
+                  }
+                ]
+              }
+            }
+          }
+        }
+      }
+    }
+  };
+
+  const { callWithRequest } = req.server.plugins.elasticsearch.getCluster('monitoring');
+  const response = await callWithRequest(req, 'search', params);
+  return get(response, 'aggregations.nested_context.composite_data.buckets', []).map(bucket => bucket.key);
+}
diff --git a/x-pack/legacy/plugins/monitoring/server/lib/logstash/get_pipelines.js b/x-pack/legacy/plugins/monitoring/server/lib/logstash/get_pipelines.js
index 8cec101477ecf0..c059e62815917e 100644
--- a/x-pack/legacy/plugins/monitoring/server/lib/logstash/get_pipelines.js
+++ b/x-pack/legacy/plugins/monitoring/server/lib/logstash/get_pipelines.js
@@ -3,12 +3,11 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-
 import { cloneDeep, last, omit } from 'lodash';
 import { checkParam } from '../error_missing_required';
 import { getMetrics } from '../details/get_metrics';
 
-export function _handleResponse(response) {
+export function handleGetPipelinesResponse(response, exclusivePipelineIds) {
   const pipelinesById = {};
 
   const metrics = Object.keys(response);
@@ -16,6 +15,9 @@ export function _handleResponse(response) {
     response[metric][0].data.forEach(([x, y]) => {
       const pipelineIds = Object.keys(y);
       pipelineIds.forEach(pipelineId => {
+        if (exclusivePipelineIds && !exclusivePipelineIds.includes(pipelineId)) {
+          return;
+        }
         // Create new pipeline object if necessary
         if (!pipelinesById.hasOwnProperty(pipelineId)) {
           pipelinesById[pipelineId] = {
@@ -40,14 +42,24 @@ export function _handleResponse(response) {
     });
   });
 
-  // Convert pipelinesById map to array
+  // Convert pipelinesById map to array and preserve sorting
   const pipelines = [];
-  Object.keys(pipelinesById).forEach(pipelineId => {
-    pipelines.push({
-      id: pipelineId,
-      ...pipelinesById[pipelineId]
+  if (exclusivePipelineIds) {
+    for (const exclusivePipelineId of exclusivePipelineIds) {
+      pipelines.push({
+        id: exclusivePipelineId,
+        ...pipelinesById[exclusivePipelineId]
+      });
+    }
+  }
+  else {
+    Object.keys(pipelinesById).forEach(pipelineId => {
+      pipelines.push({
+        id: pipelineId,
+        ...pipelinesById[pipelineId]
+      });
     });
-  });
+  }
 
   return pipelines;
 }
@@ -71,10 +83,13 @@ export async function processPipelinesAPIResponse(response, throughputMetricKey,
   return processedResponse;
 }
 
-export async function getPipelines(req, logstashIndexPattern, metricSet) {
+
+export async function getPipelines(req, logstashIndexPattern, pipelineIds, metricSet, metricOptions = {}) {
   checkParam(logstashIndexPattern, 'logstashIndexPattern in logstash/getPipelines');
   checkParam(metricSet, 'metricSet in logstash/getPipelines');
 
-  const metricsResponse = await getMetrics(req, logstashIndexPattern, metricSet);
-  return _handleResponse(metricsResponse);
+  const filters = [];
+
+  const metricsResponse = await getMetrics(req, logstashIndexPattern, metricSet, filters, metricOptions);
+  return handleGetPipelinesResponse(metricsResponse, pipelineIds);
 }
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/index.js b/x-pack/legacy/plugins/monitoring/server/lib/logstash/sort_pipelines.js
similarity index 53%
rename from x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/index.js
rename to x-pack/legacy/plugins/monitoring/server/lib/logstash/sort_pipelines.js
index c2fb4646306692..994e910c8ec4b4 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/index.js
+++ b/x-pack/legacy/plugins/monitoring/server/lib/logstash/sort_pipelines.js
@@ -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 { sortByOrder } from 'lodash';
 
+export function sortPipelines(pipelines, sort) {
+  if (!sort) {
+    return pipelines;
+  }
 
-
-// SASS TODO: Import wizard.scss instead
-// import 'plugins/kibana/visualize/wizard/wizard.less';
-import './steps/index_or_search';
-import './steps/job_type';
-import 'plugins/ml/components/data_recognizer';
+  return sortByOrder(pipelines, pipeline => pipeline[sort.field], sort.direction);
+}
diff --git a/x-pack/legacy/plugins/monitoring/server/lib/metrics/__test__/__snapshots__/metrics.test.js.snap b/x-pack/legacy/plugins/monitoring/server/lib/metrics/__test__/__snapshots__/metrics.test.js.snap
index a899dc9dfc7481..21fce7e64376c9 100644
--- a/x-pack/legacy/plugins/monitoring/server/lib/metrics/__test__/__snapshots__/metrics.test.js.snap
+++ b/x-pack/legacy/plugins/monitoring/server/lib/metrics/__test__/__snapshots__/metrics.test.js.snap
@@ -2996,37 +2996,11 @@ Object {
   "logstash_cluster_pipeline_nodes_count": LogstashPipelineNodeCountMetric {
     "app": "logstash",
     "calculation": [Function],
-    "dateHistogramSubAggs": Object {
-      "pipelines_nested": Object {
-        "aggs": Object {
-          "by_pipeline_id": Object {
-            "aggs": Object {
-              "to_root": Object {
-                "aggs": Object {
-                  "node_count": Object {
-                    "cardinality": Object {
-                      "field": "logstash_stats.logstash.uuid",
-                    },
-                  },
-                },
-                "reverse_nested": Object {},
-              },
-            },
-            "terms": Object {
-              "field": "logstash_stats.pipelines.id",
-              "size": 1000,
-            },
-          },
-        },
-        "nested": Object {
-          "path": "logstash_stats.pipelines",
-        },
-      },
-    },
     "derivative": false,
     "description": "Number of nodes on which the Logstash pipeline is running.",
     "field": "logstash_stats.logstash.uuid",
     "format": "0,0.[00]",
+    "getDateHistogramSubAggs": [Function],
     "label": "Pipeline Node Count",
     "timestampField": "logstash_stats.timestamp",
     "units": "",
@@ -3035,67 +3009,11 @@ Object {
   "logstash_cluster_pipeline_throughput": LogstashPipelineThroughputMetric {
     "app": "logstash",
     "calculation": [Function],
-    "dateHistogramSubAggs": Object {
-      "pipelines_nested": Object {
-        "aggs": Object {
-          "by_pipeline_id": Object {
-            "aggs": Object {
-              "by_pipeline_hash": Object {
-                "aggs": Object {
-                  "by_ephemeral_id": Object {
-                    "aggs": Object {
-                      "events_stats": Object {
-                        "stats": Object {
-                          "field": "logstash_stats.pipelines.events.out",
-                        },
-                      },
-                      "throughput": Object {
-                        "bucket_script": Object {
-                          "buckets_path": Object {
-                            "max": "events_stats.max",
-                            "min": "events_stats.min",
-                          },
-                          "script": "params.max - params.min",
-                        },
-                      },
-                    },
-                    "terms": Object {
-                      "field": "logstash_stats.pipelines.ephemeral_id",
-                      "size": 1000,
-                    },
-                  },
-                  "throughput": Object {
-                    "sum_bucket": Object {
-                      "buckets_path": "by_ephemeral_id>throughput",
-                    },
-                  },
-                },
-                "terms": Object {
-                  "field": "logstash_stats.pipelines.hash",
-                  "size": 1000,
-                },
-              },
-              "throughput": Object {
-                "sum_bucket": Object {
-                  "buckets_path": "by_pipeline_hash>throughput",
-                },
-              },
-            },
-            "terms": Object {
-              "field": "logstash_stats.pipelines.id",
-              "size": 1000,
-            },
-          },
-        },
-        "nested": Object {
-          "path": "logstash_stats.pipelines",
-        },
-      },
-    },
     "derivative": false,
     "description": "Number of events emitted per second by the Logstash pipeline at the outputs stage.",
     "field": "logstash_stats.pipelines.events.out",
     "format": "0,0.[00]",
+    "getDateHistogramSubAggs": [Function],
     "label": "Pipeline Throughput",
     "timestampField": "logstash_stats.timestamp",
     "units": "e/s",
@@ -3354,37 +3272,11 @@ Object {
   "logstash_node_pipeline_nodes_count": LogstashPipelineNodeCountMetric {
     "app": "logstash",
     "calculation": [Function],
-    "dateHistogramSubAggs": Object {
-      "pipelines_nested": Object {
-        "aggs": Object {
-          "by_pipeline_id": Object {
-            "aggs": Object {
-              "to_root": Object {
-                "aggs": Object {
-                  "node_count": Object {
-                    "cardinality": Object {
-                      "field": "logstash_stats.logstash.uuid",
-                    },
-                  },
-                },
-                "reverse_nested": Object {},
-              },
-            },
-            "terms": Object {
-              "field": "logstash_stats.pipelines.id",
-              "size": 1000,
-            },
-          },
-        },
-        "nested": Object {
-          "path": "logstash_stats.pipelines",
-        },
-      },
-    },
     "derivative": false,
     "description": "Number of nodes on which the Logstash pipeline is running.",
     "field": "logstash_stats.logstash.uuid",
     "format": "0,0.[00]",
+    "getDateHistogramSubAggs": [Function],
     "label": "Pipeline Node Count",
     "timestampField": "logstash_stats.timestamp",
     "units": "",
@@ -3393,67 +3285,11 @@ Object {
   "logstash_node_pipeline_throughput": LogstashPipelineThroughputMetric {
     "app": "logstash",
     "calculation": [Function],
-    "dateHistogramSubAggs": Object {
-      "pipelines_nested": Object {
-        "aggs": Object {
-          "by_pipeline_id": Object {
-            "aggs": Object {
-              "by_pipeline_hash": Object {
-                "aggs": Object {
-                  "by_ephemeral_id": Object {
-                    "aggs": Object {
-                      "events_stats": Object {
-                        "stats": Object {
-                          "field": "logstash_stats.pipelines.events.out",
-                        },
-                      },
-                      "throughput": Object {
-                        "bucket_script": Object {
-                          "buckets_path": Object {
-                            "max": "events_stats.max",
-                            "min": "events_stats.min",
-                          },
-                          "script": "params.max - params.min",
-                        },
-                      },
-                    },
-                    "terms": Object {
-                      "field": "logstash_stats.pipelines.ephemeral_id",
-                      "size": 1000,
-                    },
-                  },
-                  "throughput": Object {
-                    "sum_bucket": Object {
-                      "buckets_path": "by_ephemeral_id>throughput",
-                    },
-                  },
-                },
-                "terms": Object {
-                  "field": "logstash_stats.pipelines.hash",
-                  "size": 1000,
-                },
-              },
-              "throughput": Object {
-                "sum_bucket": Object {
-                  "buckets_path": "by_pipeline_hash>throughput",
-                },
-              },
-            },
-            "terms": Object {
-              "field": "logstash_stats.pipelines.id",
-              "size": 1000,
-            },
-          },
-        },
-        "nested": Object {
-          "path": "logstash_stats.pipelines",
-        },
-      },
-    },
     "derivative": false,
     "description": "Number of events emitted per second by the Logstash pipeline at the outputs stage.",
     "field": "logstash_stats.pipelines.events.out",
     "format": "0,0.[00]",
+    "getDateHistogramSubAggs": [Function],
     "label": "Pipeline Throughput",
     "timestampField": "logstash_stats.timestamp",
     "units": "e/s",
diff --git a/x-pack/legacy/plugins/monitoring/server/lib/metrics/logstash/classes.js b/x-pack/legacy/plugins/monitoring/server/lib/metrics/logstash/classes.js
index dade736cd53f85..3af726328aca8d 100644
--- a/x-pack/legacy/plugins/monitoring/server/lib/metrics/logstash/classes.js
+++ b/x-pack/legacy/plugins/monitoring/server/lib/metrics/logstash/classes.js
@@ -270,7 +270,7 @@ export class LogstashPipelineThroughputMetric extends LogstashMetric {
       derivative: false
     });
 
-    this.dateHistogramSubAggs = {
+    this.getDateHistogramSubAggs = ({ pageOfPipelines }) => ({
       pipelines_nested: {
         nested: {
           path: 'logstash_stats.pipelines'
@@ -279,7 +279,8 @@ export class LogstashPipelineThroughputMetric extends LogstashMetric {
           by_pipeline_id: {
             terms: {
               field: 'logstash_stats.pipelines.id',
-              size: 1000
+              size: 1000,
+              include: pageOfPipelines.map(pipeline => pipeline.id),
             },
             aggs: {
               throughput: {
@@ -290,7 +291,8 @@ export class LogstashPipelineThroughputMetric extends LogstashMetric {
               by_pipeline_hash: {
                 terms: {
                   field: 'logstash_stats.pipelines.hash',
-                  size: 1000
+                  size: 1000,
+                  include: pageOfPipelines.map(pipeline => pipeline.hash),
                 },
                 aggs: {
                   throughput: {
@@ -301,7 +303,8 @@ export class LogstashPipelineThroughputMetric extends LogstashMetric {
                   by_ephemeral_id: {
                     terms: {
                       field: 'logstash_stats.pipelines.ephemeral_id',
-                      size: 1000
+                      size: 1000,
+                      include: pageOfPipelines.map(pipeline => pipeline.ephemeral_id),
                     },
                     aggs: {
                       events_stats: {
@@ -326,7 +329,7 @@ export class LogstashPipelineThroughputMetric extends LogstashMetric {
           }
         }
       }
-    };
+    });
 
     this.calculation = (bucket, _key, _metric, bucketSizeInSeconds) => {
       const pipelineThroughputs = {};
@@ -353,24 +356,31 @@ export class LogstashPipelineNodeCountMetric extends LogstashMetric {
       derivative: false
     });
 
-    this.dateHistogramSubAggs = {
-      pipelines_nested: {
-        nested: {
-          path: 'logstash_stats.pipelines'
-        },
-        aggs: {
-          by_pipeline_id: {
-            terms: {
-              field: 'logstash_stats.pipelines.id',
-              size: 1000
-            },
-            aggs: {
-              to_root: {
-                reverse_nested: {},
-                aggs: {
-                  node_count: {
-                    cardinality: {
-                      field: this.field
+    this.getDateHistogramSubAggs = ({ pageOfPipelines }) => {
+      const termAggExtras = {};
+      if (pageOfPipelines) {
+        termAggExtras.include = pageOfPipelines.map(pipeline => pipeline.id);
+      }
+      return {
+        pipelines_nested: {
+          nested: {
+            path: 'logstash_stats.pipelines'
+          },
+          aggs: {
+            by_pipeline_id: {
+              terms: {
+                field: 'logstash_stats.pipelines.id',
+                size: 1000,
+                ...termAggExtras
+              },
+              aggs: {
+                to_root: {
+                  reverse_nested: {},
+                  aggs: {
+                    node_count: {
+                      cardinality: {
+                        field: this.field
+                      }
                     }
                   }
                 }
@@ -378,7 +388,7 @@ export class LogstashPipelineNodeCountMetric extends LogstashMetric {
             }
           }
         }
-      }
+      };
     };
 
     this.calculation = bucket => {
diff --git a/x-pack/legacy/plugins/monitoring/server/lib/metrics/logstash/metrics.js b/x-pack/legacy/plugins/monitoring/server/lib/metrics/logstash/metrics.js
index a87f79533da3b4..6c9bc315858068 100644
--- a/x-pack/legacy/plugins/monitoring/server/lib/metrics/logstash/metrics.js
+++ b/x-pack/legacy/plugins/monitoring/server/lib/metrics/logstash/metrics.js
@@ -324,7 +324,7 @@ export const metrics = {
     label: pipelineThroughputLabel,
     description: pipelineThroughputDescription,
     format: LARGE_FLOAT,
-    units: eventsPerSecondUnitLabel
+    units: eventsPerSecondUnitLabel,
   }),
   logstash_node_pipeline_throughput: new LogstashPipelineThroughputMetric({
     uuidField: 'logstash_stats.logstash.uuid', // TODO: add comment explaining why
diff --git a/x-pack/legacy/plugins/monitoring/server/lib/pagination/filter.js b/x-pack/legacy/plugins/monitoring/server/lib/pagination/filter.js
new file mode 100644
index 00000000000000..7cc91d8deeb326
--- /dev/null
+++ b/x-pack/legacy/plugins/monitoring/server/lib/pagination/filter.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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';
+
+function defaultFilterFn(value, query) {
+  if (value.toLowerCase().includes(query.toLowerCase())) {
+    return true;
+  }
+  return false;
+}
+
+export function filter(data, queryText, fields, filterFn = defaultFilterFn) {
+  return data.filter(item => {
+    for (const field of fields) {
+      if (filterFn(get(item, field), queryText)) {
+        return true;
+      }
+    }
+  });
+}
diff --git a/x-pack/legacy/plugins/monitoring/server/lib/pagination/paginate.js b/x-pack/legacy/plugins/monitoring/server/lib/pagination/paginate.js
new file mode 100644
index 00000000000000..b5e63fb862fe73
--- /dev/null
+++ b/x-pack/legacy/plugins/monitoring/server/lib/pagination/paginate.js
@@ -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 function paginate({ size,  index }, data) {
+  const start = index * size;
+  return data.slice(start, Math.min(data.length, start + size));
+}
diff --git a/x-pack/legacy/plugins/monitoring/server/lib/setup/collection/__test__/get_collection_status.js b/x-pack/legacy/plugins/monitoring/server/lib/setup/collection/__test__/get_collection_status.js
index 228e2b602dfbb0..bb42dad26786a5 100644
--- a/x-pack/legacy/plugins/monitoring/server/lib/setup/collection/__test__/get_collection_status.js
+++ b/x-pack/legacy/plugins/monitoring/server/lib/setup/collection/__test__/get_collection_status.js
@@ -9,7 +9,8 @@ import sinon from 'sinon';
 import { getCollectionStatus } from '../';
 import { getIndexPatterns } from '../../../cluster/get_index_patterns';
 
-const mockReq = (searchResult = {}, msearchResult = { responses: [] }) => {
+const liveClusterUuid = 'a12';
+const mockReq = (searchResult = {}) => {
   return {
     server: {
       config() {
@@ -18,12 +19,28 @@ const mockReq = (searchResult = {}, msearchResult = { responses: [] }) => {
             .withArgs('server.uuid').returns('kibana-1234')
         };
       },
+      usage: {
+        collectorSet: {
+          getCollectorByType: () => ({
+            isReady: () => false
+          })
+        }
+      },
       plugins: {
         elasticsearch: {
           getCluster() {
             return {
-              callWithRequest(_req, type) {
-                return Promise.resolve(type === 'search' ? searchResult : msearchResult);
+              callWithRequest(_req, type, params) {
+                if (type === 'transport.request' && (params && params.path === '/_cluster/state/cluster_uuid')) {
+                  return Promise.resolve({ cluster_uuid: liveClusterUuid });
+                }
+                if (type === 'transport.request' && (params && params.path === '/_nodes')) {
+                  return Promise.resolve({ nodes: {} });
+                }
+                if (type === 'cat.indices') {
+                  return Promise.resolve([1]);
+                }
+                return Promise.resolve(searchResult);
               }
             };
           }
@@ -192,7 +209,7 @@ describe('getCollectionStatus', () => {
       ]
     });
 
-    const result = await getCollectionStatus(req, getIndexPatterns(req.server));
+    const result = await getCollectionStatus(req, getIndexPatterns(req.server), liveClusterUuid);
 
     expect(result.kibana.detected.doesExist).to.be(true);
     expect(result.elasticsearch.detected.doesExist).to.be(true);
diff --git a/x-pack/legacy/plugins/monitoring/server/lib/setup/collection/get_collection_status.js b/x-pack/legacy/plugins/monitoring/server/lib/setup/collection/get_collection_status.js
index 85e0745436463d..a49da8ba60200a 100644
--- a/x-pack/legacy/plugins/monitoring/server/lib/setup/collection/get_collection_status.js
+++ b/x-pack/legacy/plugins/monitoring/server/lib/setup/collection/get_collection_status.js
@@ -5,8 +5,14 @@
  */
 
 import { get, uniq } from 'lodash';
-import { METRICBEAT_INDEX_NAME_UNIQUE_TOKEN, ELASTICSEARCH_CUSTOM_ID, APM_CUSTOM_ID } from '../../../../common/constants';
-import { KIBANA_SYSTEM_ID, BEATS_SYSTEM_ID, LOGSTASH_SYSTEM_ID } from '../../../../../telemetry/common/constants';
+import {
+  METRICBEAT_INDEX_NAME_UNIQUE_TOKEN,
+  ELASTICSEARCH_SYSTEM_ID,
+  APM_SYSTEM_ID,
+  KIBANA_SYSTEM_ID,
+  BEATS_SYSTEM_ID,
+  LOGSTASH_SYSTEM_ID
+} from '../../../../common/constants';
 import { getLivesNodes } from '../../elasticsearch/nodes/get_nodes/get_live_nodes';
 import { KIBANA_STATS_TYPE } from '../../../../../../../../src/legacy/server/status/constants';
 
@@ -139,18 +145,18 @@ const getRecentMonitoringDocuments = async (req, indexPatterns, clusterUuid, nod
   return await callWithRequest(req, 'search', params);
 };
 
-async function detectProducts(req) {
+async function detectProducts(req, isLiveCluster) {
   const result = {
     [KIBANA_SYSTEM_ID]: {
       doesExist: true,
     },
-    [ELASTICSEARCH_CUSTOM_ID]: {
+    [ELASTICSEARCH_SYSTEM_ID]: {
       doesExist: true,
     },
     [BEATS_SYSTEM_ID]: {
       mightExist: false,
     },
-    [APM_CUSTOM_ID]: {
+    [APM_SYSTEM_ID]: {
       mightExist: false,
     },
     [LOGSTASH_SYSTEM_ID]: {
@@ -174,18 +180,20 @@ async function detectProducts(req) {
       ]
     },
     {
-      id: APM_CUSTOM_ID,
+      id: APM_SYSTEM_ID,
       indices: [
         'apm-*'
       ]
     }
   ];
 
-  const { callWithRequest } = req.server.plugins.elasticsearch.getCluster('data');
-  for (const { id, indices } of detectionSearch) {
-    const response = await callWithRequest(req, 'cat.indices', { index: indices, format: 'json' });
-    if (response.length) {
-      result[id].mightExist = true;
+  if (isLiveCluster) {
+    const { callWithRequest } = req.server.plugins.elasticsearch.getCluster('data');
+    for (const { id, indices } of detectionSearch) {
+      const response = await callWithRequest(req, 'cat.indices', { index: indices, format: 'json' });
+      if (response.length) {
+        result[id].mightExist = true;
+      }
     }
   }
 
@@ -194,12 +202,12 @@ async function detectProducts(req) {
 
 function getUuidBucketName(productName) {
   switch (productName) {
-    case ELASTICSEARCH_CUSTOM_ID:
+    case ELASTICSEARCH_SYSTEM_ID:
       return 'es_uuids';
     case KIBANA_SYSTEM_ID:
       return 'kibana_uuids';
     case BEATS_SYSTEM_ID:
-    case APM_CUSTOM_ID:
+    case APM_SYSTEM_ID:
       return 'beats_uuids';
     case LOGSTASH_SYSTEM_ID:
       return 'logstash_uuids';
@@ -232,7 +240,7 @@ function shouldSkipBucket(product, bucket) {
   if (product.name === BEATS_SYSTEM_ID && isBeatFromAPM(bucket)) {
     return true;
   }
-  if (product.name === APM_CUSTOM_ID && !isBeatFromAPM(bucket)) {
+  if (product.name === APM_SYSTEM_ID && !isBeatFromAPM(bucket)) {
     return true;
   }
   return false;
@@ -271,7 +279,7 @@ async function getLiveElasticsearchCollectionEnabled(req) {
   });
   const sources = ['persistent', 'transient', 'defaults'];
   for (const source of sources) {
-    const collectionSettings = get(response[source], 'xpack.monitoring.collection');
+    const collectionSettings = get(response[source], 'xpack.monitoring.elasticsearch.collection');
     if (collectionSettings && collectionSettings.enabled === 'true') {
       return true;
     }
@@ -308,13 +316,15 @@ async function getLiveElasticsearchCollectionEnabled(req) {
 export const getCollectionStatus = async (req, indexPatterns, clusterUuid, nodeUuid, skipLiveData) => {
   const config = req.server.config();
   const kibanaUuid = config.get('server.uuid');
+  const liveClusterUuid = skipLiveData ? null : await getLiveElasticsearchClusterUuid(req);
+  const isLiveCluster = !clusterUuid || liveClusterUuid === clusterUuid;
 
   const PRODUCTS = [
     { name: KIBANA_SYSTEM_ID },
     { name: BEATS_SYSTEM_ID },
     { name: LOGSTASH_SYSTEM_ID },
-    { name: APM_CUSTOM_ID, token: '-beats-' },
-    { name: ELASTICSEARCH_CUSTOM_ID, token: '-es-' },
+    { name: APM_SYSTEM_ID, token: '-beats-' },
+    { name: ELASTICSEARCH_SYSTEM_ID, token: '-es-' },
   ];
 
   const [
@@ -322,12 +332,12 @@ export const getCollectionStatus = async (req, indexPatterns, clusterUuid, nodeU
     detectedProducts
   ] = await Promise.all([
     await getRecentMonitoringDocuments(req, indexPatterns, clusterUuid, nodeUuid),
-    await detectProducts(req)
+    await detectProducts(req, isLiveCluster)
   ]);
 
-  const liveClusterUuid = skipLiveData ? null : await getLiveElasticsearchClusterUuid(req);
-  const liveEsNodes = skipLiveData || (clusterUuid && liveClusterUuid !== clusterUuid) ? [] : await getLivesNodes(req);
-  const liveKibanaInstance = skipLiveData || (clusterUuid && liveClusterUuid !== clusterUuid) ? {} : await getLiveKibanaInstance(req);
+
+  const liveEsNodes = skipLiveData || !isLiveCluster ? [] : await getLivesNodes(req);
+  const liveKibanaInstance = skipLiveData || !isLiveCluster ? {} : await getLiveKibanaInstance(req);
   const indicesBuckets = get(recentDocuments, 'aggregations.indices.buckets', []);
   const liveClusterInternalCollectionEnabled = await getLiveElasticsearchCollectionEnabled(req);
 
@@ -338,6 +348,7 @@ export const getCollectionStatus = async (req, indexPatterns, clusterUuid, nodeU
 
     const productStatus = {
       totalUniqueInstanceCount: 0,
+      totalUniqueInternallyCollectedCount: 0,
       totalUniqueFullyMigratedCount: 0,
       totalUniquePartiallyMigratedCount: 0,
       detected: null,
@@ -348,28 +359,6 @@ export const getCollectionStatus = async (req, indexPatterns, clusterUuid, nodeU
     const internalCollectorsUuidsMap = {};
     const partiallyMigratedUuidsMap = {};
 
-    if (product.name === ELASTICSEARCH_CUSTOM_ID && liveEsNodes.length) {
-      productStatus.byUuid = liveEsNodes.reduce((accum, esNode) => ({
-        ...accum,
-        [esNode.id]: {
-          node: esNode,
-          isNetNewUser: true
-        },
-      }), {});
-    }
-
-    if (product.name === KIBANA_SYSTEM_ID && liveKibanaInstance) {
-      const kibanaLiveUuid = get(liveKibanaInstance, 'kibana.uuid');
-      if (kibanaLiveUuid) {
-        productStatus.byUuid = {
-          [kibanaLiveUuid]: {
-            instance: liveKibanaInstance,
-            isNetNewUser: true
-          }
-        };
-      }
-    }
-
     // If there is no data, then they are a net new user
     if (!indexBuckets || indexBuckets.length === 0) {
       productStatus.totalUniqueInstanceCount = 0;
@@ -400,6 +389,7 @@ export const getCollectionStatus = async (req, indexPatterns, clusterUuid, nodeU
         }
       }
       productStatus.totalUniqueInstanceCount = Object.keys(map).length;
+      productStatus.totalUniqueInternallyCollectedCount = Object.keys(internalCollectorsUuidsMap).length;
       productStatus.totalUniquePartiallyMigratedCount = Object.keys(partiallyMigratedUuidsMap).length;
       productStatus.totalUniqueFullyMigratedCount = Object.keys(fullyMigratedUuidsMap).length;
       productStatus.byUuid = {
@@ -435,7 +425,7 @@ export const getCollectionStatus = async (req, indexPatterns, clusterUuid, nodeU
     }
     // If there are multiple buckets, they are partially upgraded assuming a single mb index exists
     else {
-      const considerAllInstancesMigrated = product.name === ELASTICSEARCH_CUSTOM_ID &&
+      const considerAllInstancesMigrated = product.name === ELASTICSEARCH_SYSTEM_ID &&
         clusterUuid === liveClusterUuid && !liveClusterInternalCollectionEnabled;
       const internalTimestamps = [];
       for (const indexBucket of indexBuckets) {
@@ -479,6 +469,7 @@ export const getCollectionStatus = async (req, indexPatterns, clusterUuid, nodeU
         ...Object.keys(fullyMigratedUuidsMap),
         ...Object.keys(partiallyMigratedUuidsMap)
       ]).length;
+      productStatus.totalUniqueInternallyCollectedCount = Object.keys(internalCollectorsUuidsMap).length;
       productStatus.totalUniquePartiallyMigratedCount = Object.keys(partiallyMigratedUuidsMap).length;
       productStatus.totalUniqueFullyMigratedCount = Object.keys(fullyMigratedUuidsMap).length;
       productStatus.byUuid = {
@@ -518,6 +509,35 @@ export const getCollectionStatus = async (req, indexPatterns, clusterUuid, nodeU
       productStatus.detected = detectedProducts[product.name];
     }
 
+    if (product.name === ELASTICSEARCH_SYSTEM_ID && liveEsNodes.length) {
+      productStatus.byUuid = liveEsNodes.reduce((byUuid, esNode) => {
+        if (!byUuid[esNode.id]) {
+          productStatus.totalUniqueInstanceCount++;
+          return {
+            ...byUuid,
+            [esNode.id]: {
+              node: esNode,
+              isNetNewUser: true
+            },
+          };
+        }
+        return byUuid;
+      }, productStatus.byUuid);
+    }
+
+    if (product.name === KIBANA_SYSTEM_ID && liveKibanaInstance) {
+      const kibanaLiveUuid = get(liveKibanaInstance, 'kibana.uuid');
+      if (kibanaLiveUuid && !productStatus.byUuid[kibanaLiveUuid]) {
+        productStatus.totalUniqueInstanceCount++;
+        productStatus.byUuid = {
+          [kibanaLiveUuid]: {
+            instance: liveKibanaInstance,
+            isNetNewUser: true
+          }
+        };
+      }
+    }
+
     return {
       ...products,
       [product.name]: productStatus,
diff --git a/x-pack/legacy/plugins/monitoring/server/routes/api/v1/logstash/index.js b/x-pack/legacy/plugins/monitoring/server/routes/api/v1/logstash/index.js
index 7f9e6d71621b91..796b5f29cef6cb 100644
--- a/x-pack/legacy/plugins/monitoring/server/routes/api/v1/logstash/index.js
+++ b/x-pack/legacy/plugins/monitoring/server/routes/api/v1/logstash/index.js
@@ -10,3 +10,4 @@ export { logstashOverviewRoute } from './overview';
 export { logstashPipelineRoute } from './pipeline';
 export { logstashNodePipelinesRoute } from './pipelines/node_pipelines';
 export { logstashClusterPipelinesRoute } from './pipelines/cluster_pipelines';
+export { logstashClusterPipelineIdsRoute } from './pipelines/cluster_pipeline_ids';
diff --git a/x-pack/legacy/plugins/monitoring/server/routes/api/v1/logstash/pipelines/cluster_pipeline_ids.js b/x-pack/legacy/plugins/monitoring/server/routes/api/v1/logstash/pipelines/cluster_pipeline_ids.js
new file mode 100644
index 00000000000000..066b89fc325bb6
--- /dev/null
+++ b/x-pack/legacy/plugins/monitoring/server/routes/api/v1/logstash/pipelines/cluster_pipeline_ids.js
@@ -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 Joi from 'joi';
+import { handleError } from '../../../../../lib/errors';
+import { prefixIndexPattern } from '../../../../../lib/ccs_utils';
+import { INDEX_PATTERN_LOGSTASH } from '../../../../../../common/constants';
+import { getLogstashPipelineIds } from '../../../../../lib/logstash/get_pipeline_ids';
+
+/**
+ * Retrieve pipelines for a cluster
+ */
+export function logstashClusterPipelineIdsRoute(server) {
+  server.route({
+    method: 'POST',
+    path: '/api/monitoring/v1/clusters/{clusterUuid}/logstash/pipeline_ids',
+    config: {
+      validate: {
+        params: Joi.object({
+          clusterUuid: Joi.string().required()
+        }),
+        payload: Joi.object({
+          ccs: Joi.string().optional(),
+          timeRange: Joi.object({
+            min: Joi.date().required(),
+            max: Joi.date().required()
+          }).required()
+        })
+      }
+    },
+    handler: async (req) => {
+      const config = server.config();
+      const { ccs } = req.payload;
+      const clusterUuid = req.params.clusterUuid;
+      const lsIndexPattern = prefixIndexPattern(config, INDEX_PATTERN_LOGSTASH, ccs);
+      const size = config.get('xpack.monitoring.max_bucket_size');
+
+      try {
+        const pipelines = await getLogstashPipelineIds(req, lsIndexPattern, { clusterUuid }, size);
+        return pipelines;
+      } catch (err) {
+        throw handleError(err, req);
+      }
+    }
+  });
+}
diff --git a/x-pack/legacy/plugins/monitoring/server/routes/api/v1/logstash/pipelines/cluster_pipelines.js b/x-pack/legacy/plugins/monitoring/server/routes/api/v1/logstash/pipelines/cluster_pipelines.js
index 247e734360dc91..c55f8c19037d58 100644
--- a/x-pack/legacy/plugins/monitoring/server/routes/api/v1/logstash/pipelines/cluster_pipelines.js
+++ b/x-pack/legacy/plugins/monitoring/server/routes/api/v1/logstash/pipelines/cluster_pipelines.js
@@ -10,6 +10,7 @@ import { getPipelines, processPipelinesAPIResponse } from '../../../../../lib/lo
 import { handleError } from '../../../../../lib/errors';
 import { prefixIndexPattern } from '../../../../../lib/ccs_utils';
 import { INDEX_PATTERN_LOGSTASH } from '../../../../../../common/constants';
+import { getPaginatedPipelines } from '../../../../../lib/logstash/get_paginated_pipelines';
 
 /**
  * Retrieve pipelines for a cluster
@@ -28,13 +29,22 @@ export function logstashClusterPipelinesRoute(server) {
           timeRange: Joi.object({
             min: Joi.date().required(),
             max: Joi.date().required()
-          }).required()
+          }).required(),
+          pagination: Joi.object({
+            index: Joi.number().required(),
+            size: Joi.number().required()
+          }).required(),
+          sort: Joi.object({
+            field: Joi.string().required(),
+            direction: Joi.string().required()
+          }).optional(),
+          queryText: Joi.string().default('').allow('').optional(),
         })
       }
     },
     handler: async (req) => {
       const config = server.config();
-      const { ccs } = req.payload;
+      const { ccs, pagination, sort, queryText } = req.payload;
       const clusterUuid = req.params.clusterUuid;
       const lsIndexPattern = prefixIndexPattern(config, INDEX_PATTERN_LOGSTASH, ccs);
 
@@ -46,16 +56,40 @@ export function logstashClusterPipelinesRoute(server) {
         nodesCountMetric
       ];
 
+      // The client side fields do not match the server side metric names
+      // so adjust that here. See processPipelinesAPIResponse
+      const sortMetricSetMap = {
+        latestThroughput: throughputMetric,
+        latestNodesCount: nodesCountMetric
+      };
+      if (sort) {
+        sort.field = sortMetricSetMap[sort.field] || sort.field;
+      }
+
+      const { pageOfPipelines, totalPipelineCount } =
+        await getPaginatedPipelines(req, lsIndexPattern, {}, metricSet, pagination, sort, queryText);
+
+      // Just the IDs for the rest
+      const pipelineIds = pageOfPipelines.map(pipeline => pipeline.id);
+
+      const metricOptions = {
+        pageOfPipelines,
+      };
+
       try {
+        const pipelineData = await getPipelines(req, lsIndexPattern, pipelineIds, metricSet, metricOptions);
         const response = await processPipelinesAPIResponse(
           {
-            pipelines: await getPipelines(req, lsIndexPattern, metricSet),
+            pipelines: pipelineData,
             clusterStatus: await getClusterStatus(req, lsIndexPattern, { clusterUuid })
           },
           throughputMetric,
           nodesCountMetric
         );
-        return response;
+        return {
+          ...response,
+          totalPipelineCount
+        };
       } catch (err) {
         throw handleError(err, req);
       }
diff --git a/x-pack/legacy/plugins/monitoring/server/routes/api/v1/logstash/pipelines/node_pipelines.js b/x-pack/legacy/plugins/monitoring/server/routes/api/v1/logstash/pipelines/node_pipelines.js
index faec0791d7c326..84f16267701276 100644
--- a/x-pack/legacy/plugins/monitoring/server/routes/api/v1/logstash/pipelines/node_pipelines.js
+++ b/x-pack/legacy/plugins/monitoring/server/routes/api/v1/logstash/pipelines/node_pipelines.js
@@ -10,6 +10,7 @@ import { getPipelines, processPipelinesAPIResponse } from '../../../../../lib/lo
 import { handleError } from '../../../../../lib/errors';
 import { prefixIndexPattern } from '../../../../../lib/ccs_utils';
 import { INDEX_PATTERN_LOGSTASH } from '../../../../../../common/constants';
+import { getPaginatedPipelines } from '../../../../../lib/logstash/get_paginated_pipelines';
 
 /**
  * Retrieve pipelines for a node
@@ -29,15 +30,25 @@ export function logstashNodePipelinesRoute(server) {
           timeRange: Joi.object({
             min: Joi.date().required(),
             max: Joi.date().required()
-          }).required()
+          }).required(),
+          pagination: Joi.object({
+            index: Joi.number().required(),
+            size: Joi.number().required()
+          }).required(),
+          sort: Joi.object({
+            field: Joi.string().required(),
+            direction: Joi.string().required()
+          }).optional(),
+          queryText: Joi.string().default('').allow('').optional(),
         })
       }
     },
     handler: async (req) => {
       const config = server.config();
-      const { ccs } = req.payload;
+      const { ccs, pagination, sort, queryText } = req.payload;
       const { clusterUuid, logstashUuid } = req.params;
       const lsIndexPattern = prefixIndexPattern(config, INDEX_PATTERN_LOGSTASH, ccs);
+
       const throughputMetric = 'logstash_node_pipeline_throughput';
       const nodesCountMetric = 'logstash_node_pipeline_nodes_count';
       const metricSet = [
@@ -45,16 +56,40 @@ export function logstashNodePipelinesRoute(server) {
         nodesCountMetric
       ];
 
+      // The client side fields do not match the server side metric names
+      // so adjust that here. See processPipelinesAPIResponse
+      const sortMetricSetMap = {
+        latestThroughput: throughputMetric,
+        latestNodesCount: nodesCountMetric
+      };
+      if (sort) {
+        sort.field = sortMetricSetMap[sort.field] || sort.field;
+      }
+
+      const { pageOfPipelines, totalPipelineCount }
+        = await getPaginatedPipelines(req, lsIndexPattern, { clusterUuid, logstashUuid }, metricSet, pagination, sort, queryText);
+
+      // Just the IDs for the rest
+      const pipelineIds = pageOfPipelines.map(pipeline => pipeline.id);
+
+      const metricOptions = {
+        pageOfPipelines,
+      };
+
       try {
+        const pipelineData = await getPipelines(req, lsIndexPattern, pipelineIds, metricSet, metricOptions);
         const response = await processPipelinesAPIResponse(
           {
-            pipelines: await getPipelines(req, lsIndexPattern, metricSet),
+            pipelines: pipelineData,
             nodeSummary: await getNodeInfo(req, lsIndexPattern, { clusterUuid, logstashUuid })
           },
           throughputMetric,
           nodesCountMetric
         );
-        return response;
+        return {
+          ...response,
+          totalPipelineCount
+        };
       } catch (err) {
         throw handleError(err, req);
       }
diff --git a/x-pack/legacy/plugins/monitoring/server/routes/api/v1/ui.js b/x-pack/legacy/plugins/monitoring/server/routes/api/v1/ui.js
index 302cdafc725612..dc0549a283972b 100644
--- a/x-pack/legacy/plugins/monitoring/server/routes/api/v1/ui.js
+++ b/x-pack/legacy/plugins/monitoring/server/routes/api/v1/ui.js
@@ -52,6 +52,7 @@ export {
   logstashNodeRoute,
   logstashNodesRoute,
   logstashOverviewRoute,
-  logstashPipelineRoute
+  logstashPipelineRoute,
+  logstashClusterPipelineIdsRoute
 } from './logstash';
 export * from './setup';
diff --git a/x-pack/legacy/plugins/reporting/export_types/csv_from_savedobject/server/lib/generate_csv_search.ts b/x-pack/legacy/plugins/reporting/export_types/csv_from_savedobject/server/lib/generate_csv_search.ts
index fee17baecce28c..da2c184d2d6e03 100644
--- a/x-pack/legacy/plugins/reporting/export_types/csv_from_savedobject/server/lib/generate_csv_search.ts
+++ b/x-pack/legacy/plugins/reporting/export_types/csv_from_savedobject/server/lib/generate_csv_search.ts
@@ -6,7 +6,6 @@
 
 import { Request } from 'hapi';
 
-// @ts-ignore no module definition
 import { buildEsQuery } from '@kbn/es-query';
 // @ts-ignore no module definition
 import { createGenerateCsv } from '../../../csv/server/lib/generate_csv';
diff --git a/x-pack/legacy/plugins/security/public/views/management/edit_role/components/privileges/kibana/space_aware_privilege_section/privilege_space_table.tsx b/x-pack/legacy/plugins/security/public/views/management/edit_role/components/privileges/kibana/space_aware_privilege_section/privilege_space_table.tsx
index 5a718a34b90057..3c49e5717ba42b 100644
--- a/x-pack/legacy/plugins/security/public/views/management/edit_role/components/privileges/kibana/space_aware_privilege_section/privilege_space_table.tsx
+++ b/x-pack/legacy/plugins/security/public/views/management/edit_role/components/privileges/kibana/space_aware_privilege_section/privilege_space_table.tsx
@@ -14,7 +14,7 @@ import {
 import { FormattedMessage, InjectedIntl } from '@kbn/i18n/react';
 import _ from 'lodash';
 import React, { Component } from 'react';
-import { getSpaceColor } from '../../../../../../../../../spaces/common';
+import { getSpaceColor } from '../../../../../../../../../spaces/public/lib/space_attributes';
 import { Space } from '../../../../../../../../../spaces/common/model/space';
 import {
   FeaturesPrivileges,
diff --git a/x-pack/legacy/plugins/security/public/views/management/edit_role/components/privileges/kibana/space_aware_privilege_section/space_selector.tsx b/x-pack/legacy/plugins/security/public/views/management/edit_role/components/privileges/kibana/space_aware_privilege_section/space_selector.tsx
index 9cc9894a0f0513..75211498c57b89 100644
--- a/x-pack/legacy/plugins/security/public/views/management/edit_role/components/privileges/kibana/space_aware_privilege_section/space_selector.tsx
+++ b/x-pack/legacy/plugins/security/public/views/management/edit_role/components/privileges/kibana/space_aware_privilege_section/space_selector.tsx
@@ -14,7 +14,7 @@ import {
 import { InjectedIntl } from '@kbn/i18n/react';
 import React, { Component } from 'react';
 import { Space } from '../../../../../../../../../spaces/common/model/space';
-import { getSpaceColor } from '../../../../../../../../../spaces/common/space_attributes';
+import { getSpaceColor } from '../../../../../../../../../spaces/public/lib/space_attributes';
 
 const spaceToOption = (space?: Space, currentSelection?: 'global' | 'spaces') => {
   if (!space) {
diff --git a/x-pack/legacy/plugins/security/public/views/management/roles_grid/components/__snapshots__/roles_grid_page.test.tsx.snap b/x-pack/legacy/plugins/security/public/views/management/roles_grid/components/__snapshots__/roles_grid_page.test.tsx.snap
index 5e3625a1f0fc4b..048fa74a72818f 100644
--- a/x-pack/legacy/plugins/security/public/views/management/roles_grid/components/__snapshots__/roles_grid_page.test.tsx.snap
+++ b/x-pack/legacy/plugins/security/public/views/management/roles_grid/components/__snapshots__/roles_grid_page.test.tsx.snap
@@ -31,7 +31,6 @@ exports[`<RolesGridPage /> renders permission denied if required 1`] = `
                   />
                 </p>
               }
-              iconColor="subdued"
               iconType="securityApp"
               title={
                 <h2>
diff --git a/x-pack/legacy/plugins/siem/cypress/.eslintrc.json b/x-pack/legacy/plugins/siem/cypress/.eslintrc.json
new file mode 100644
index 00000000000000..96a5a52f13e6c7
--- /dev/null
+++ b/x-pack/legacy/plugins/siem/cypress/.eslintrc.json
@@ -0,0 +1,6 @@
+{
+  "plugins": ["cypress"],
+  "env": {
+    "cypress/globals": true
+  }
+}
diff --git a/x-pack/legacy/plugins/siem/cypress/README.md b/x-pack/legacy/plugins/siem/cypress/README.md
index 5bbdf1d42eaf18..fb2b6cd2e3fd30 100644
--- a/x-pack/legacy/plugins/siem/cypress/README.md
+++ b/x-pack/legacy/plugins/siem/cypress/README.md
@@ -240,3 +240,7 @@ Videos are (optionally) output to:
 ```
 target/kibana-siem/cypress/videos
 ```
+
+## Linting 
+
+Optional linting rules for Cypress and linting setup can be found [here](https://github.com/cypress-io/eslint-plugin-cypress#usage)
\ No newline at end of file
diff --git a/x-pack/legacy/plugins/siem/cypress/integration/smoke_tests/timeline/data_providers.spec.ts b/x-pack/legacy/plugins/siem/cypress/integration/smoke_tests/timeline/data_providers.spec.ts
index 7c9a0edebe53e9..236d5a53481b7f 100644
--- a/x-pack/legacy/plugins/siem/cypress/integration/smoke_tests/timeline/data_providers.spec.ts
+++ b/x-pack/legacy/plugins/siem/cypress/integration/smoke_tests/timeline/data_providers.spec.ts
@@ -61,7 +61,7 @@ describe('timeline data providers', () => {
     cy.get(TIMELINE_DATA_PROVIDERS).should(
       'have.css',
       'background',
-      'rgba(125, 226, 209, 0.1) none repeat scroll 0% 0% / auto padding-box border-box'
+      'rgba(1, 125, 115, 0.1) none repeat scroll 0% 0% / auto padding-box border-box'
     );
   });
 
@@ -81,7 +81,7 @@ describe('timeline data providers', () => {
     cy.get(TIMELINE_DATA_PROVIDERS_EMPTY).should(
       'have.css',
       'background',
-      'rgba(125, 226, 209, 0.2) none repeat scroll 0% 0% / auto padding-box border-box'
+      'rgba(1, 125, 115, 0.2) none repeat scroll 0% 0% / auto padding-box border-box'
     );
   });
 
@@ -101,7 +101,7 @@ describe('timeline data providers', () => {
     cy.get(TIMELINE_DATA_PROVIDERS).should(
       'have.css',
       'border',
-      '3.1875px dashed rgb(125, 226, 209)'
+      '3.1875px dashed rgb(1, 125, 115)'
     );
   });
 });
diff --git a/x-pack/legacy/plugins/siem/cypress/integration/smoke_tests/timeline/flyout_button.spec.ts b/x-pack/legacy/plugins/siem/cypress/integration/smoke_tests/timeline/flyout_button.spec.ts
index 811c529b8bec59..c1c35e497d0815 100644
--- a/x-pack/legacy/plugins/siem/cypress/integration/smoke_tests/timeline/flyout_button.spec.ts
+++ b/x-pack/legacy/plugins/siem/cypress/integration/smoke_tests/timeline/flyout_button.spec.ts
@@ -41,7 +41,7 @@ describe('timeline flyout button', () => {
     cy.get(TIMELINE_NOT_READY_TO_DROP_BUTTON).should(
       'have.css',
       'background',
-      'rgba(125, 226, 209, 0.1) none repeat scroll 0% 0% / auto padding-box border-box'
+      'rgba(1, 125, 115, 0.1) none repeat scroll 0% 0% / auto padding-box border-box'
     );
   });
 });
diff --git a/x-pack/legacy/plugins/siem/index.ts b/x-pack/legacy/plugins/siem/index.ts
index 78fc0a52dc3d67..c3e2c2b0e119d4 100644
--- a/x-pack/legacy/plugins/siem/index.ts
+++ b/x-pack/legacy/plugins/siem/index.ts
@@ -23,6 +23,7 @@ import {
   DEFAULT_FROM,
   DEFAULT_TO,
 } from './common/constants';
+import { signalsAlertType } from './server/lib/detection_engine/alerts/signals_alert_type';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function siem(kibana: any) {
@@ -31,6 +32,11 @@ export function siem(kibana: any) {
     configPrefix: 'xpack.siem',
     publicDir: resolve(__dirname, 'public'),
     require: ['kibana', 'elasticsearch'],
+    // Uncomment these lines to turn on alerting and action for detection engine and comment the other
+    // require statement out. These are hidden behind feature flags at the moment so if you turn
+    // these on without the feature flags turned on then Kibana will crash since we are a legacy plugin
+    // and legacy plugins cannot have optional requirements.
+    // require: ['kibana', 'elasticsearch', 'alerting', 'actions'],
     uiExports: {
       app: {
         description: i18n.translate('xpack.siem.securityDescription', {
@@ -59,14 +65,15 @@ export function siem(kibana: any) {
         [DEFAULT_SIEM_REFRESH_INTERVAL]: {
           type: 'json',
           name: i18n.translate('xpack.siem.uiSettings.defaultRefreshIntervalLabel', {
-            defaultMessage: 'Time picker refresh interval',
+            defaultMessage: 'Time filter refresh interval',
           }),
           value: `{
   "pause": ${DEFAULT_INTERVAL_PAUSE},
   "value": ${DEFAULT_INTERVAL_VALUE}
 }`,
           description: i18n.translate('xpack.siem.uiSettings.defaultRefreshIntervalDescription', {
-            defaultMessage: "The SIEM timefilter's default refresh interval",
+            defaultMessage:
+              '<p>Default refresh interval for the SIEM time filter, in milliseconds.</p>',
           }),
           category: ['siem'],
           requiresPageReload: true,
@@ -74,39 +81,39 @@ export function siem(kibana: any) {
         [DEFAULT_SIEM_TIME_RANGE]: {
           type: 'json',
           name: i18n.translate('xpack.siem.uiSettings.defaultTimeRangeLabel', {
-            defaultMessage: 'Time picker defaults',
+            defaultMessage: 'Time filter period',
           }),
           value: `{
   "from": "${DEFAULT_FROM}",
   "to": "${DEFAULT_TO}"
 }`,
           description: i18n.translate('xpack.siem.uiSettings.defaultTimeRangeDescription', {
-            defaultMessage:
-              'The SIEM timefilter selection to use when Kibana is started without one',
+            defaultMessage: '<p>Default period of time in the SIEM time filter.</p>',
           }),
           category: ['siem'],
           requiresPageReload: true,
         },
         [DEFAULT_INDEX_KEY]: {
           name: i18n.translate('xpack.siem.uiSettings.defaultIndexLabel', {
-            defaultMessage: 'Default index',
+            defaultMessage: 'Elasticsearch indices',
           }),
           value: ['auditbeat-*', 'filebeat-*', 'packetbeat-*', 'winlogbeat-*'],
           description: i18n.translate('xpack.siem.uiSettings.defaultIndexDescription', {
-            defaultMessage: 'Default Elasticsearch index to search',
+            defaultMessage:
+              '<p>Comma-delimited list of Elasticsearch indices from which the SIEM app collects events.</p>',
           }),
           category: ['siem'],
           requiresPageReload: true,
         },
         [DEFAULT_ANOMALY_SCORE]: {
           name: i18n.translate('xpack.siem.uiSettings.defaultAnomalyScoreLabel', {
-            defaultMessage: 'Default anomaly threshold',
+            defaultMessage: 'Anomaly threshold',
           }),
           value: 50,
           type: 'number',
           description: i18n.translate('xpack.siem.uiSettings.defaultAnomalyScoreDescription', {
             defaultMessage:
-              'Default anomaly score threshold to exceed before showing anomalies. Valid values are between 0 and 100',
+              '<p>Value above which Machine Learning job anomalies are displayed in the SIEM app.</p><p>Valid values: 0 to 100.</p>',
           }),
           category: ['siem'],
           requiresPageReload: true,
@@ -115,6 +122,9 @@ export function siem(kibana: any) {
       mappings: savedObjectMappings,
     },
     init(server: Server) {
+      if (server.plugins.alerting != null) {
+        server.plugins.alerting.registerType(signalsAlertType);
+      }
       server.injectUiAppVars('siem', async () => server.getInjectedUiAppVars('kibana'));
       initServerWithKibana(server);
     },
diff --git a/x-pack/legacy/plugins/siem/package.json b/x-pack/legacy/plugins/siem/package.json
index bad49b6fdf4b10..0e01921325222f 100644
--- a/x-pack/legacy/plugins/siem/package.json
+++ b/x-pack/legacy/plugins/siem/package.json
@@ -6,22 +6,13 @@
   "license": "Elastic-License",
   "scripts": {
     "build-graphql-types": "node scripts/generate_types_from_graphql.js",
-    "cypress:open": "cypress open",
-    "cypress:run": "cypress run --spec ./cypress/integration/**/*.spec.ts --reporter mocha-multi-reporters --reporter-options configFile=./reporter_config.json; mochawesome-merge --reportDir ../../../../target/kibana-siem/cypress/results > ../../../../target/kibana-siem/cypress/results/output.json; marge ../../../../target/kibana-siem/cypress/results/output.json --reportDir ../../../../target/kibana-siem/cypress/results; mkdir -p ../../../../target/junit && cp ../../../../target/kibana-siem/cypress/results/*.xml ../../../../target/junit/"
+    "cypress:open": "../../../node_modules/.bin/cypress open",
+    "cypress:run": "../../../node_modules/.bin/cypress run --spec ./cypress/integration/**/*.spec.ts --reporter ../../../node_modules/mocha-multi-reporters --reporter-options configFile=./reporter_config.json; ../../../node_modules/.bin/mochawesome-merge --reportDir ../../../../target/kibana-siem/cypress/results > ../../../../target/kibana-siem/cypress/results/output.json; ../../../node_modules/.bin/marge ../../../../target/kibana-siem/cypress/results/output.json --reportDir ../../../../target/kibana-siem/cypress/results; mkdir -p ../../../../target/junit && cp ../../../../target/kibana-siem/cypress/results/*.xml ../../../../target/junit/"
   },
   "devDependencies": {
-    "@cypress/webpack-preprocessor": "^4.1.0",
-    "@types/js-yaml": "^3.12.1",
     "@types/lodash": "^4.14.110",
-    "@types/react-beautiful-dnd": "^10.0.1",
-    "cypress": "^3.4.1",
-    "js-yaml": "^3.13.1",
-    "mocha-junit-reporter": "^1.23.1",
-    "mocha-multi-reporters": "^1.1.7",
-    "mochawesome": "^4.0.1",
-    "mochawesome-merge": "^2.0.1",
-    "mochawesome-report-generator": "^4.0.1",
-    "ts-loader": "^6.0.4"
+    "@types/js-yaml": "^3.12.1",
+    "@types/react-beautiful-dnd": "^10.0.1"
   },
   "dependencies": {
     "lodash": "^4.17.15",
diff --git a/x-pack/legacy/plugins/siem/public/components/autocomplete_field/suggestion_item.tsx b/x-pack/legacy/plugins/siem/public/components/autocomplete_field/suggestion_item.tsx
index 997a19b0e8a2ec..aaf7be2f7f5a6d 100644
--- a/x-pack/legacy/plugins/siem/public/components/autocomplete_field/suggestion_item.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/autocomplete_field/suggestion_item.tsx
@@ -18,13 +18,8 @@ interface SuggestionItemProps {
   suggestion: AutocompleteSuggestion;
 }
 
-export class SuggestionItem extends React.PureComponent<SuggestionItemProps> {
-  public static defaultProps: Partial<SuggestionItemProps> = {
-    isSelected: false,
-  };
-
-  public render() {
-    const { isSelected, onClick, onMouseEnter, suggestion } = this.props;
+export const SuggestionItem = React.memo<SuggestionItemProps>(
+  ({ isSelected = false, onClick, onMouseEnter, suggestion }) => {
     return (
       <SuggestionItemContainer
         isSelected={isSelected}
@@ -40,7 +35,9 @@ export class SuggestionItem extends React.PureComponent<SuggestionItemProps> {
       </SuggestionItemContainer>
     );
   }
-}
+);
+
+SuggestionItem.displayName = 'SuggestionItem';
 
 const SuggestionItemContainer = euiStyled.div<{
   isSelected?: boolean;
diff --git a/x-pack/legacy/plugins/siem/public/components/charts/areachart.test.tsx b/x-pack/legacy/plugins/siem/public/components/charts/areachart.test.tsx
index 7338a959495f86..910e576e6e1e71 100644
--- a/x-pack/legacy/plugins/siem/public/components/charts/areachart.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/charts/areachart.test.tsx
@@ -7,13 +7,135 @@
 import { ShallowWrapper, shallow } from 'enzyme';
 import * as React from 'react';
 
-import { AreaChartBaseComponent, AreaChartWithCustomPrompt, AreaChart } from './areachart';
-import { ChartHolder, ChartSeriesData } from './common';
+import { AreaChartBaseComponent, AreaChart } from './areachart';
+import { ChartSeriesData } from './common';
 import { ScaleType, AreaSeries, Axis } from '@elastic/charts';
 
-jest.mock('@elastic/charts');
 const customHeight = '100px';
 const customWidth = '120px';
+const chartDataSets = [
+  [
+    [
+      {
+        key: 'uniqueSourceIpsHistogram',
+        value: [
+          { x: new Date('2019-05-03T13:00:00.000Z').valueOf(), y: 580213 },
+          { x: new Date('2019-05-04T01:00:00.000Z').valueOf(), y: null },
+          { x: new Date('2019-05-04T13:00:00.000Z').valueOf(), y: 12382 },
+        ],
+        color: '#DB1374',
+      },
+      {
+        key: 'uniqueDestinationIpsHistogram',
+        value: [
+          { x: new Date('2019-05-03T13:00:00.000Z').valueOf(), y: 565975 },
+          { x: new Date('2019-05-04T01:00:00.000Z').valueOf(), y: 1084366 },
+          { x: new Date('2019-05-04T13:00:00.000Z').valueOf(), y: 12280 },
+        ],
+        color: '#490092',
+      },
+    ],
+  ],
+  [
+    [
+      {
+        key: 'uniqueSourceIpsHistogram',
+        value: [
+          { x: new Date('2019-05-03T13:00:00.000Z').valueOf(), y: 580213 },
+          { x: new Date('2019-05-04T01:00:00.000Z').valueOf(), y: 1096175 },
+          { x: new Date('2019-05-04T13:00:00.000Z').valueOf(), y: 12382 },
+        ],
+        color: '#DB1374',
+      },
+      {
+        key: 'uniqueDestinationIpsHistogram',
+        value: [
+          { x: new Date('2019-05-03T13:00:00.000Z').valueOf(), y: 565975 },
+          { x: new Date('2019-05-04T01:00:00.000Z').valueOf(), y: 1084366 },
+          { x: new Date('2019-05-04T13:00:00.000Z').valueOf(), y: 12280 },
+        ],
+        color: '#490092',
+      },
+    ],
+  ],
+  [
+    [
+      {
+        key: 'uniqueSourceIpsHistogram',
+        value: [
+          { x: new Date('2019-05-03T13:00:00.000Z').valueOf(), y: 580213 },
+          { x: new Date('2019-05-04T01:00:00.000Z').valueOf(), y: {} },
+          { x: new Date('2019-05-04T13:00:00.000Z').valueOf(), y: 12382 },
+        ],
+        color: '#DB1374',
+      },
+      {
+        key: 'uniqueDestinationIpsHistogram',
+        value: [
+          { x: new Date('2019-05-03T13:00:00.000Z').valueOf(), y: 565975 },
+          { x: new Date('2019-05-04T01:00:00.000Z').valueOf(), y: 1084366 },
+          { x: new Date('2019-05-04T13:00:00.000Z').valueOf(), y: 12280 },
+        ],
+        color: '#490092',
+      },
+    ],
+  ],
+  [
+    [
+      {
+        key: 'uniqueSourceIpsHistogram',
+        value: [],
+        color: '#DB1374',
+      },
+      {
+        key: 'uniqueDestinationIpsHistogram',
+        value: [
+          { x: new Date('2019-05-03T13:00:00.000Z').valueOf(), y: 565975 },
+          { x: new Date('2019-05-04T01:00:00.000Z').valueOf(), y: 1084366 },
+          { x: new Date('2019-05-04T13:00:00.000Z').valueOf(), y: 12280 },
+        ],
+        color: '#490092',
+      },
+    ],
+  ],
+];
+
+const chartHolderDataSets = [
+  [null],
+  [[]],
+  [
+    {
+      key: 'uniqueSourceIpsHistogram',
+      value: null,
+      color: '#DB1374',
+    },
+    {
+      key: 'uniqueDestinationIpsHistogram',
+      value: null,
+      color: '#490092',
+    },
+  ],
+  [
+    {
+      key: 'uniqueSourceIpsHistogram',
+      value: [
+        { x: new Date('2019-05-03T13:00:00.000Z').valueOf() },
+        { x: new Date('2019-05-04T01:00:00.000Z').valueOf() },
+        { x: new Date('2019-05-04T13:00:00.000Z').valueOf() },
+      ],
+      color: '#DB1374',
+    },
+    {
+      key: 'uniqueDestinationIpsHistogram',
+      value: [
+        { x: new Date('2019-05-03T13:00:00.000Z').valueOf() },
+        { x: new Date('2019-05-04T01:00:00.000Z').valueOf() },
+        { x: new Date('2019-05-04T13:00:00.000Z').valueOf() },
+      ],
+      color: '#490092',
+    },
+  ],
+];
 describe('AreaChartBaseComponent', () => {
   let shallowWrapper: ShallowWrapper;
   const mockAreaChartData: ChartSeriesData[] = [
@@ -186,137 +308,6 @@ describe('AreaChartBaseComponent', () => {
   });
 });
 
-describe('AreaChartWithCustomPrompt', () => {
-  let shallowWrapper: ShallowWrapper;
-  describe.each([
-    [
-      [
-        {
-          key: 'uniqueSourceIpsHistogram',
-          value: [
-            { x: new Date('2019-05-03T13:00:00.000Z').valueOf(), y: 580213 },
-            { x: new Date('2019-05-04T01:00:00.000Z').valueOf(), y: 1096175 },
-            { x: new Date('2019-05-04T13:00:00.000Z').valueOf(), y: 12382 },
-          ],
-          color: '#DB1374',
-        },
-        {
-          key: 'uniqueDestinationIpsHistogram',
-          value: [
-            { x: new Date('2019-05-03T13:00:00.000Z').valueOf(), y: 565975 },
-            { x: new Date('2019-05-04T01:00:00.000Z').valueOf(), y: 1084366 },
-            { x: new Date('2019-05-04T13:00:00.000Z').valueOf(), y: 12280 },
-          ],
-          color: '#490092',
-        },
-      ],
-    ],
-  ] as Array<[ChartSeriesData[]]>)('renders areachart', data => {
-    beforeAll(() => {
-      shallowWrapper = shallow(
-        <AreaChartWithCustomPrompt height={customHeight} width={customWidth} data={data} />
-      );
-    });
-
-    it('render AreaChartBaseComponent', () => {
-      expect(shallowWrapper.find(AreaChartBaseComponent)).toHaveLength(1);
-      expect(shallowWrapper.find(ChartHolder)).toHaveLength(0);
-    });
-  });
-
-  describe.each([
-    null,
-    [],
-    [
-      {
-        key: 'uniqueSourceIpsHistogram',
-        value: null,
-        color: '#DB1374',
-      },
-      {
-        key: 'uniqueDestinationIpsHistogram',
-        value: null,
-        color: '#490092',
-      },
-    ],
-    [
-      {
-        key: 'uniqueSourceIpsHistogram',
-        value: [
-          { x: new Date('2019-05-03T13:00:00.000Z').valueOf() },
-          { x: new Date('2019-05-04T01:00:00.000Z').valueOf() },
-          { x: new Date('2019-05-04T13:00:00.000Z').valueOf() },
-        ],
-        color: '#DB1374',
-      },
-      {
-        key: 'uniqueDestinationIpsHistogram',
-        value: [
-          { x: new Date('2019-05-03T13:00:00.000Z').valueOf() },
-          { x: new Date('2019-05-04T01:00:00.000Z').valueOf() },
-          { x: new Date('2019-05-04T13:00:00.000Z').valueOf() },
-        ],
-        color: '#490092',
-      },
-    ],
-    [
-      [
-        {
-          key: 'uniqueSourceIpsHistogram',
-          value: [
-            { x: new Date('2019-05-03T13:00:00.000Z').valueOf(), y: 580213 },
-            { x: new Date('2019-05-04T01:00:00.000Z').valueOf(), y: null },
-            { x: new Date('2019-05-04T13:00:00.000Z').valueOf(), y: 12382 },
-          ],
-          color: '#DB1374',
-        },
-        {
-          key: 'uniqueDestinationIpsHistogram',
-          value: [
-            { x: new Date('2019-05-03T13:00:00.000Z').valueOf(), y: 565975 },
-            { x: new Date('2019-05-04T01:00:00.000Z').valueOf(), y: 1084366 },
-            { x: new Date('2019-05-04T13:00:00.000Z').valueOf(), y: 12280 },
-          ],
-          color: '#490092',
-        },
-      ],
-    ],
-    [
-      [
-        {
-          key: 'uniqueSourceIpsHistogram',
-          value: [
-            { x: new Date('2019-05-03T13:00:00.000Z').valueOf(), y: 580213 },
-            { x: new Date('2019-05-04T01:00:00.000Z').valueOf(), y: {} },
-            { x: new Date('2019-05-04T13:00:00.000Z').valueOf(), y: 12382 },
-          ],
-          color: '#DB1374',
-        },
-        {
-          key: 'uniqueDestinationIpsHistogram',
-          value: [
-            { x: new Date('2019-05-03T13:00:00.000Z').valueOf(), y: 565975 },
-            { x: new Date('2019-05-04T01:00:00.000Z').valueOf(), y: 1084366 },
-            { x: new Date('2019-05-04T13:00:00.000Z').valueOf(), y: 12280 },
-          ],
-          color: '#490092',
-        },
-      ],
-    ],
-  ] as Array<[ChartSeriesData[] | null | undefined]>)('renders prompt', data => {
-    beforeAll(() => {
-      shallowWrapper = shallow(
-        <AreaChartWithCustomPrompt height={customHeight} width={customWidth} data={data} />
-      );
-    });
-
-    it('render Chart Holder', () => {
-      expect(shallowWrapper.find(AreaChartBaseComponent)).toHaveLength(0);
-      expect(shallowWrapper.find(ChartHolder)).toHaveLength(1);
-    });
-  });
-});
-
 describe('AreaChart', () => {
   let shallowWrapper: ShallowWrapper;
   const mockConfig = {
@@ -332,20 +323,28 @@ describe('AreaChart', () => {
     },
     customHeight: 324,
   };
+  describe.each(chartDataSets as Array<[ChartSeriesData[]]>)('with valid data [%o]', data => {
+    beforeAll(() => {
+      shallowWrapper = shallow(<AreaChart configs={mockConfig} areaChart={data} />);
+    });
 
-  it('should render if data exist', () => {
-    const mockData = [
-      { key: 'uniqueSourceIps', value: [{ y: 100, x: 100, g: 'group' }], color: '#DB1374' },
-    ];
-    shallowWrapper = shallow(<AreaChart configs={mockConfig} areaChart={mockData} />);
-    expect(shallowWrapper.find('AutoSizer')).toHaveLength(1);
-    expect(shallowWrapper.find('ChartHolder')).toHaveLength(0);
+    it(`should render area chart`, () => {
+      expect(shallowWrapper.find('AutoSizer')).toHaveLength(1);
+      expect(shallowWrapper.find('ChartPlaceHolder')).toHaveLength(0);
+    });
   });
 
-  it('should render a chartHolder if no data given', () => {
-    const mockData = [{ key: 'uniqueSourceIps', value: [], color: '#DB1374' }];
-    shallowWrapper = shallow(<AreaChart configs={mockConfig} areaChart={mockData} />);
-    expect(shallowWrapper.find('AutoSizer')).toHaveLength(0);
-    expect(shallowWrapper.find('ChartHolder')).toHaveLength(1);
-  });
+  describe.each(chartHolderDataSets as Array<[ChartSeriesData[] | null | undefined]>)(
+    'with invalid data [%o]',
+    data => {
+      beforeAll(() => {
+        shallowWrapper = shallow(<AreaChart configs={mockConfig} areaChart={data} />);
+      });
+
+      it(`should render a chart place holder`, () => {
+        expect(shallowWrapper.find('AutoSizer')).toHaveLength(0);
+        expect(shallowWrapper.find('ChartPlaceHolder')).toHaveLength(1);
+      });
+    }
+  );
 });
diff --git a/x-pack/legacy/plugins/siem/public/components/charts/areachart.tsx b/x-pack/legacy/plugins/siem/public/components/charts/areachart.tsx
index c4bb01a66753b1..6347b93772b4eb 100644
--- a/x-pack/legacy/plugins/siem/public/components/charts/areachart.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/charts/areachart.tsx
@@ -17,19 +17,19 @@ import {
   AreaSeriesStyle,
   RecursivePartial,
 } from '@elastic/charts';
-import { getOr, get } from 'lodash/fp';
+import { getOr, get, isNull, isNumber } from 'lodash/fp';
+import { AutoSizer } from '../auto_sizer';
+import { ChartPlaceHolder } from './chart_place_holder';
 import {
-  ChartSeriesData,
-  ChartHolder,
-  getSeriesStyle,
-  WrappedByAutoSizer,
-  ChartSeriesConfigs,
   browserTimezone,
   chartDefaultSettings,
+  ChartSeriesConfigs,
+  ChartSeriesData,
   getChartHeight,
   getChartWidth,
+  getSeriesStyle,
+  WrappedByAutoSizer,
 } from './common';
-import { AutoSizer } from '../auto_sizer';
 
 // custom series styles: https://ela.st/areachart-styling
 const getSeriesLineStyle = (): RecursivePartial<AreaSeriesStyle> => {
@@ -51,6 +51,17 @@ const getSeriesLineStyle = (): RecursivePartial<AreaSeriesStyle> => {
   };
 };
 
+const checkIfAllTheDataInTheSeriesAreValid = (series: unknown): series is ChartSeriesData =>
+  !!get('value.length', series) &&
+  get('value', series).every(
+    ({ x, y }: { x: unknown; y: unknown }) => !isNull(x) && isNumber(y) && y > 0
+  );
+
+const checkIfAnyValidSeriesExist = (
+  data: ChartSeriesData[] | null | undefined
+): data is ChartSeriesData[] =>
+  Array.isArray(data) && data.some(checkIfAllTheDataInTheSeriesAreValid);
+
 // https://ela.st/multi-areaseries
 export const AreaChartBaseComponent = React.memo<{
   data: ChartSeriesData[];
@@ -73,12 +84,12 @@ export const AreaChartBaseComponent = React.memo<{
         {data.map(series => {
           const seriesKey = series.key;
           const seriesSpecId = getSpecId(seriesKey);
-          return series.value != null ? (
+          return checkIfAllTheDataInTheSeriesAreValid(series) ? (
             <AreaSeries
               id={seriesSpecId}
               key={seriesKey}
               name={series.key.replace('Histogram', '')}
-              data={series.value}
+              data={series.value || undefined}
               xScaleType={getOr(ScaleType.Linear, 'configs.series.xScaleType', chartConfigs)}
               yScaleType={getOr(ScaleType.Linear, 'configs.series.yScaleType', chartConfigs)}
               timeZone={browserTimezone}
@@ -106,28 +117,6 @@ export const AreaChartBaseComponent = React.memo<{
 
 AreaChartBaseComponent.displayName = 'AreaChartBaseComponent';
 
-export const AreaChartWithCustomPrompt = React.memo<{
-  data: ChartSeriesData[] | null | undefined;
-  height: string | null | undefined;
-  width: string | null | undefined;
-  configs?: ChartSeriesConfigs | undefined;
-}>(({ data, height, width, configs }) => {
-  return data != null &&
-    data.length &&
-    data.every(
-      ({ value }) =>
-        value != null &&
-        value.length > 0 &&
-        value.every(chart => chart.x != null && chart.y != null)
-    ) ? (
-    <AreaChartBaseComponent height={height} width={width} data={data} configs={configs} />
-  ) : (
-    <ChartHolder height={height} width={width} />
-  );
-});
-
-AreaChartWithCustomPrompt.displayName = 'AreaChartWithCustomPrompt';
-
 export const AreaChart = React.memo<{
   areaChart: ChartSeriesData[] | null | undefined;
   configs?: ChartSeriesConfigs | undefined;
@@ -135,11 +124,11 @@ export const AreaChart = React.memo<{
   const customHeight = get('customHeight', configs);
   const customWidth = get('customWidth', configs);
 
-  return get(`0.value.length`, areaChart) ? (
+  return checkIfAnyValidSeriesExist(areaChart) ? (
     <AutoSizer detectAnyWindowResize={false} content>
       {({ measureRef, content: { height, width } }) => (
         <WrappedByAutoSizer innerRef={measureRef} height={getChartHeight(customHeight, height)}>
-          <AreaChartWithCustomPrompt
+          <AreaChartBaseComponent
             data={areaChart}
             height={getChartHeight(customHeight, height)}
             width={getChartWidth(customWidth, width)}
@@ -149,7 +138,11 @@ export const AreaChart = React.memo<{
       )}
     </AutoSizer>
   ) : (
-    <ChartHolder height={getChartHeight(customHeight)} width={getChartWidth(customWidth)} />
+    <ChartPlaceHolder
+      height={getChartHeight(customHeight)}
+      width={getChartWidth(customWidth)}
+      data={areaChart}
+    />
   );
 });
 
diff --git a/x-pack/legacy/plugins/siem/public/components/charts/barchart.test.tsx b/x-pack/legacy/plugins/siem/public/components/charts/barchart.test.tsx
index 527556842126cb..4b3ec577e64880 100644
--- a/x-pack/legacy/plugins/siem/public/components/charts/barchart.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/charts/barchart.test.tsx
@@ -7,13 +7,113 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import * as React from 'react';
 
-import { BarChartBaseComponent, BarChartWithCustomPrompt, BarChart } from './barchart';
-import { ChartSeriesData, ChartHolder } from './common';
+import { BarChartBaseComponent, BarChart } from './barchart';
+import { ChartSeriesData } from './common';
 import { BarSeries, ScaleType, Axis } from '@elastic/charts';
 
-jest.mock('@elastic/charts');
 const customHeight = '100px';
 const customWidth = '120px';
+const chartDataSets = [
+  [
+    [
+      { key: 'uniqueSourceIps', value: [{ y: 1714, x: 'uniqueSourceIps' }], color: '#DB1374' },
+      {
+        key: 'uniqueDestinationIps',
+        value: [{ y: 2354, x: 'uniqueDestinationIps' }],
+        color: '#490092',
+      },
+    ],
+  ],
+  [
+    [
+      { key: 'uniqueSourceIps', value: [{ y: 1714, x: '' }], color: '#DB1374' },
+      {
+        key: 'uniqueDestinationIps',
+        value: [{ y: 2354, x: '' }],
+        color: '#490092',
+      },
+    ],
+  ],
+  [
+    [
+      { key: 'uniqueSourceIps', value: [{ y: 1714, x: 'uniqueSourceIps' }], color: '#DB1374' },
+      {
+        key: 'uniqueDestinationIps',
+        value: [{ y: 0, x: 'uniqueDestinationIps' }],
+        color: '#490092',
+      },
+    ],
+  ],
+  [
+    [
+      { key: 'uniqueSourceIps', value: [{ y: null, x: 'uniqueSourceIps' }], color: '#DB1374' },
+      {
+        key: 'uniqueDestinationIps',
+        value: [{ y: 2354, x: 'uniqueDestinationIps' }],
+        color: '#490092',
+      },
+    ],
+  ],
+];
+
+const chartHolderDataSets: Array<[ChartSeriesData[] | undefined | null]> = [
+  [[]],
+  [null],
+  [
+    [
+      { key: 'uniqueSourceIps', color: '#DB1374' },
+      {
+        key: 'uniqueDestinationIps',
+        color: '#490092',
+      },
+    ],
+  ],
+  [
+    [
+      { key: 'uniqueSourceIps', value: [], color: '#DB1374' },
+      {
+        key: 'uniqueDestinationIps',
+        value: [],
+        color: '#490092',
+      },
+    ],
+  ],
+  [
+    [
+      { key: 'uniqueSourceIps', value: [{}], color: '#DB1374' },
+      {
+        key: 'uniqueDestinationIps',
+        value: [{}],
+        color: '#490092',
+      },
+    ],
+  ],
+  [
+    [
+      { key: 'uniqueSourceIps', value: [{ y: 0, x: 'uniqueSourceIps' }], color: '#DB1374' },
+      {
+        key: 'uniqueDestinationIps',
+        value: [{ y: 0, x: 'uniqueDestinationIps' }],
+        color: '#490092',
+      },
+    ],
+  ],
+] as any; // eslint-disable-line @typescript-eslint/no-explicit-any
+
+const mockConfig = {
+  series: {
+    xScaleType: ScaleType.Time,
+    yScaleType: ScaleType.Linear,
+    stackAccessors: ['g'],
+  },
+  axis: {
+    xTickFormatter: jest.fn(),
+    yTickFormatter: jest.fn(),
+    tickSize: 8,
+  },
+  customHeight: 324,
+};
+
 describe('BarChartBaseComponent', () => {
   let shallowWrapper: ShallowWrapper;
   const mockBarChartData: ChartSeriesData[] = [
@@ -168,164 +268,28 @@ describe('BarChartBaseComponent', () => {
   });
 });
 
-describe.each([
-  [
-    [
-      { key: 'uniqueSourceIps', value: [{ y: 1714, x: 'uniqueSourceIps' }], color: '#DB1374' },
-      {
-        key: 'uniqueDestinationIps',
-        value: [{ y: 2354, x: 'uniqueDestinationIps' }],
-        color: '#490092',
-      },
-    ],
-  ],
-  [
-    [
-      { key: 'uniqueSourceIps', value: [{ y: 1714, x: '' }], color: '#DB1374' },
-      {
-        key: 'uniqueDestinationIps',
-        value: [{ y: 2354, x: '' }],
-        color: '#490092',
-      },
-    ],
-  ],
-  [
-    [
-      { key: 'uniqueSourceIps', value: [{ y: 1714, x: 'uniqueSourceIps' }], color: '#DB1374' },
-      {
-        key: 'uniqueDestinationIps',
-        value: [{ y: 0, x: 'uniqueDestinationIps' }],
-        color: '#490092',
-      },
-    ],
-  ],
-])('BarChartWithCustomPrompt', mockBarChartData => {
+describe.each(chartDataSets)('BarChart with valid data [%o]', data => {
   let shallowWrapper: ShallowWrapper;
-  describe('renders barchart', () => {
-    beforeAll(() => {
-      shallowWrapper = shallow(
-        <BarChartWithCustomPrompt
-          height={customHeight}
-          width={customWidth}
-          data={mockBarChartData}
-        />
-      );
-    });
-
-    it('render BarChartBaseComponent', () => {
-      expect(shallowWrapper.find(BarChartBaseComponent)).toHaveLength(1);
-      expect(shallowWrapper.find(ChartHolder)).toHaveLength(0);
-    });
-  });
-});
 
-const table: Array<[ChartSeriesData[] | undefined | null]> = [
-  [],
-  null,
-  [
-    [
-      { key: 'uniqueSourceIps', color: '#DB1374' },
-      {
-        key: 'uniqueDestinationIps',
-        color: '#490092',
-      },
-    ],
-  ],
-  [
-    [
-      { key: 'uniqueSourceIps', value: [], color: '#DB1374' },
-      {
-        key: 'uniqueDestinationIps',
-        value: [],
-        color: '#490092',
-      },
-    ],
-  ],
-  [
-    [
-      { key: 'uniqueSourceIps', value: [{}], color: '#DB1374' },
-      {
-        key: 'uniqueDestinationIps',
-        value: [{}],
-        color: '#490092',
-      },
-    ],
-  ],
-  [
-    [
-      { key: 'uniqueSourceIps', value: [{ y: 0, x: 'uniqueSourceIps' }], color: '#DB1374' },
-      {
-        key: 'uniqueDestinationIps',
-        value: [{ y: 0, x: 'uniqueDestinationIps' }],
-        color: '#490092',
-      },
-    ],
-  ],
-  [
-    [
-      { key: 'uniqueSourceIps', value: [{ y: null, x: 'uniqueSourceIps' }], color: '#DB1374' },
-      {
-        key: 'uniqueDestinationIps',
-        value: [{ y: 2354, x: 'uniqueDestinationIps' }],
-        color: '#490092',
-      },
-    ],
-  ],
-  [
-    [
-      { key: 'uniqueSourceIps', value: [{ y: null, x: 'uniqueSourceIps' }], color: '#DB1374' },
-      {
-        key: 'uniqueDestinationIps',
-        value: [{ y: null, x: 'uniqueDestinationIps' }],
-        color: '#490092',
-      },
-    ],
-  ],
-] as any; // eslint-disable-line @typescript-eslint/no-explicit-any
-
-describe.each(table)('renders prompt', data => {
-  let shallowWrapper: ShallowWrapper;
   beforeAll(() => {
-    shallowWrapper = shallow(
-      <BarChartWithCustomPrompt height={customHeight} width={customWidth} data={data} />
-    );
+    shallowWrapper = shallow(<BarChart configs={mockConfig} barChart={data} />);
   });
 
-  it('render Chart Holder', () => {
-    expect(shallowWrapper.find(BarChartBaseComponent)).toHaveLength(0);
-    expect(shallowWrapper.find(ChartHolder)).toHaveLength(1);
+  it(`should render chart`, () => {
+    expect(shallowWrapper.find('AutoSizer')).toHaveLength(1);
+    expect(shallowWrapper.find('ChartPlaceHolder')).toHaveLength(0);
   });
 });
 
-describe('BarChart', () => {
+describe.each(chartHolderDataSets)('BarChart with invalid data [%o]', data => {
   let shallowWrapper: ShallowWrapper;
-  const mockConfig = {
-    series: {
-      xScaleType: ScaleType.Time,
-      yScaleType: ScaleType.Linear,
-      stackAccessors: ['g'],
-    },
-    axis: {
-      xTickFormatter: jest.fn(),
-      yTickFormatter: jest.fn(),
-      tickSize: 8,
-    },
-    customHeight: 324,
-  };
 
-  it('should render if data exist', () => {
-    const mockData = [
-      { key: 'uniqueSourceIps', value: [{ y: 100, x: 100, g: 'group' }], color: '#DB1374' },
-    ];
-    shallowWrapper = shallow(<BarChart configs={mockConfig} barChart={mockData} />);
-    expect(shallowWrapper.find('AutoSizer')).toHaveLength(1);
-    expect(shallowWrapper.find('ChartHolder')).toHaveLength(0);
+  beforeAll(() => {
+    shallowWrapper = shallow(<BarChart configs={mockConfig} barChart={data} />);
   });
 
-  it('should render a chartHolder if no data given', () => {
-    const mockData = [{ key: 'uniqueSourceIps', value: [], color: '#DB1374' }];
-    shallowWrapper = shallow(<BarChart configs={mockConfig} barChart={mockData} />);
+  it(`should render chart holder`, () => {
     expect(shallowWrapper.find('AutoSizer')).toHaveLength(0);
-    expect(shallowWrapper.find('ChartHolder')).toHaveLength(1);
+    expect(shallowWrapper.find('ChartPlaceHolder')).toHaveLength(1);
   });
 });
diff --git a/x-pack/legacy/plugins/siem/public/components/charts/barchart.tsx b/x-pack/legacy/plugins/siem/public/components/charts/barchart.tsx
index 02345fc149c2af..9ef26c690c56bf 100644
--- a/x-pack/legacy/plugins/siem/public/components/charts/barchart.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/charts/barchart.tsx
@@ -16,20 +16,33 @@ import {
   ScaleType,
   Settings,
 } from '@elastic/charts';
-import { getOr, get } from 'lodash/fp';
+import { getOr, get, isNumber } from 'lodash/fp';
+import { AutoSizer } from '../auto_sizer';
+import { ChartPlaceHolder } from './chart_place_holder';
 import {
-  ChartSeriesData,
-  WrappedByAutoSizer,
-  ChartHolder,
-  SeriesType,
-  getSeriesStyle,
-  ChartSeriesConfigs,
   browserTimezone,
   chartDefaultSettings,
+  ChartSeriesConfigs,
+  ChartSeriesData,
+  checkIfAllValuesAreZero,
+  getSeriesStyle,
   getChartHeight,
   getChartWidth,
+  SeriesType,
+  WrappedByAutoSizer,
 } from './common';
-import { AutoSizer } from '../auto_sizer';
+
+const checkIfAllTheDataInTheSeriesAreValid = (series: ChartSeriesData): series is ChartSeriesData =>
+  series != null &&
+  !!get('value.length', series) &&
+  (series.value || []).every(({ x, y }) => isNumber(y) && y >= 0);
+
+const checkIfAnyValidSeriesExist = (
+  data: ChartSeriesData[] | null | undefined
+): data is ChartSeriesData[] =>
+  Array.isArray(data) &&
+  !checkIfAllValuesAreZero(data) &&
+  data.some(checkIfAllTheDataInTheSeriesAreValid);
 
 // Bar chart rotation: https://ela.st/chart-rotations
 export const BarChartBaseComponent = React.memo<{
@@ -54,7 +67,7 @@ export const BarChartBaseComponent = React.memo<{
         const barSeriesKey = series.key;
         const barSeriesSpecId = getSpecId(barSeriesKey);
         const seriesType = SeriesType.BAR;
-        return (
+        return checkIfAllTheDataInTheSeriesAreValid ? (
           <BarSeries
             id={barSeriesSpecId}
             key={barSeriesKey}
@@ -69,7 +82,7 @@ export const BarChartBaseComponent = React.memo<{
             stackAccessors={get('configs.series.stackAccessors', chartConfigs)}
             customSeriesColors={getSeriesStyle(barSeriesKey, series.color, seriesType)}
           />
-        );
+        ) : null;
       })}
 
       <Axis
@@ -87,37 +100,17 @@ export const BarChartBaseComponent = React.memo<{
 
 BarChartBaseComponent.displayName = 'BarChartBaseComponent';
 
-export const BarChartWithCustomPrompt = React.memo<{
-  data: ChartSeriesData[] | null | undefined;
-  height: string | null | undefined;
-  width: string | null | undefined;
-  configs?: ChartSeriesConfigs | undefined;
-}>(({ data, height, width, configs }) => {
-  return data &&
-    data.length &&
-    data.some(
-      ({ value }) =>
-        value != null && value.length > 0 && value.every(chart => chart.y != null && chart.y >= 0)
-    ) ? (
-    <BarChartBaseComponent height={height} width={width} data={data} configs={configs} />
-  ) : (
-    <ChartHolder height={height} width={width} />
-  );
-});
-
-BarChartWithCustomPrompt.displayName = 'BarChartWithCustomPrompt';
-
 export const BarChart = React.memo<{
   barChart: ChartSeriesData[] | null | undefined;
   configs?: ChartSeriesConfigs | undefined;
 }>(({ barChart, configs }) => {
   const customHeight = get('customHeight', configs);
   const customWidth = get('customWidth', configs);
-  return get(`0.value.length`, barChart) ? (
+  return checkIfAnyValidSeriesExist(barChart) ? (
     <AutoSizer detectAnyWindowResize={false} content>
       {({ measureRef, content: { height, width } }) => (
         <WrappedByAutoSizer innerRef={measureRef} height={getChartHeight(customHeight, height)}>
-          <BarChartWithCustomPrompt
+          <BarChartBaseComponent
             height={getChartHeight(customHeight, height)}
             width={getChartWidth(customWidth, width)}
             data={barChart}
@@ -127,7 +120,11 @@ export const BarChart = React.memo<{
       )}
     </AutoSizer>
   ) : (
-    <ChartHolder height={getChartHeight(customHeight)} width={getChartWidth(customWidth)} />
+    <ChartPlaceHolder
+      height={getChartHeight(customHeight)}
+      width={getChartWidth(customWidth)}
+      data={barChart}
+    />
   );
 });
 
diff --git a/x-pack/legacy/plugins/siem/public/components/charts/chart_place_holder.test.tsx b/x-pack/legacy/plugins/siem/public/components/charts/chart_place_holder.test.tsx
new file mode 100644
index 00000000000000..7674fd09739f5e
--- /dev/null
+++ b/x-pack/legacy/plugins/siem/public/components/charts/chart_place_holder.test.tsx
@@ -0,0 +1,92 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { shallow, ShallowWrapper } from 'enzyme';
+import React from 'react';
+import { ChartPlaceHolder } from './chart_place_holder';
+import { ChartSeriesData } from './common';
+
+describe('ChartPlaceHolder', () => {
+  let shallowWrapper: ShallowWrapper;
+  const mockDataAllZeros = [
+    {
+      key: 'mockKeyA',
+      color: 'mockColor',
+      value: [{ x: 'a', y: 0 }, { x: 'b', y: 0 }],
+    },
+    {
+      key: 'mockKeyB',
+      color: 'mockColor',
+      value: [{ x: 'a', y: 0 }, { x: 'b', y: 0 }],
+    },
+  ];
+  const mockDataUnexpectedValue = [
+    {
+      key: 'mockKeyA',
+      color: 'mockColor',
+      value: [{ x: 'a', y: '' }, { x: 'b', y: 0 }],
+    },
+    {
+      key: 'mockKeyB',
+      color: 'mockColor',
+      value: [{ x: 'a', y: {} }, { x: 'b', y: 0 }],
+    },
+  ];
+
+  it('should render with default props', () => {
+    const height = `100%`;
+    const width = `100%`;
+    shallowWrapper = shallow(<ChartPlaceHolder data={mockDataAllZeros} />);
+    expect(shallowWrapper.props()).toMatchObject({
+      height,
+      width,
+    });
+  });
+
+  it('should render with given props', () => {
+    const height = `100px`;
+    const width = `100px`;
+    shallowWrapper = shallow(
+      <ChartPlaceHolder height={height} width={width} data={mockDataAllZeros} />
+    );
+    expect(shallowWrapper.props()).toMatchObject({
+      height,
+      width,
+    });
+  });
+
+  it('should render correct wording when all values returned zero', () => {
+    const height = `100px`;
+    const width = `100px`;
+    shallowWrapper = shallow(
+      <ChartPlaceHolder height={height} width={width} data={mockDataAllZeros} />
+    );
+    expect(
+      shallowWrapper
+        .find(`[data-test-subj="chartHolderText"]`)
+        .childAt(0)
+        .text()
+    ).toEqual('All values returned zero');
+  });
+
+  it('should render correct wording when unexpected value exists', () => {
+    const height = `100px`;
+    const width = `100px`;
+    shallowWrapper = shallow(
+      <ChartPlaceHolder
+        height={height}
+        width={width}
+        data={mockDataUnexpectedValue as ChartSeriesData[]}
+      />
+    );
+    expect(
+      shallowWrapper
+        .find(`[data-test-subj="chartHolderText"]`)
+        .childAt(0)
+        .text()
+    ).toEqual('Chart Data Not Available');
+  });
+});
diff --git a/x-pack/legacy/plugins/siem/public/components/charts/chart_place_holder.tsx b/x-pack/legacy/plugins/siem/public/components/charts/chart_place_holder.tsx
new file mode 100644
index 00000000000000..22122b5fad74ac
--- /dev/null
+++ b/x-pack/legacy/plugins/siem/public/components/charts/chart_place_holder.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 React from 'react';
+import { EuiFlexItem, EuiText, EuiFlexGroup } from '@elastic/eui';
+import styled from 'styled-components';
+import { ChartSeriesData, checkIfAllValuesAreZero } from './common';
+import * as i18n from './translation';
+
+const FlexGroup = styled(EuiFlexGroup)<{ height?: string | null; width?: string | null }>`
+  height: ${({ height }) => (height ? height : '100%')};
+  width: ${({ width }) => (width ? width : '100%')};
+  position: relative;
+  margin: 0;
+`;
+
+FlexGroup.displayName = 'FlexGroup';
+
+export const ChartPlaceHolder = ({
+  height = '100%',
+  width = '100%',
+  data,
+}: {
+  height?: string | null;
+  width?: string | null;
+  data: ChartSeriesData[] | null | undefined;
+}) => (
+  <FlexGroup justifyContent="center" alignItems="center" height={height} width={width}>
+    <EuiFlexItem grow={false}>
+      <EuiText size="s" textAlign="center" color="subdued" data-test-subj="chartHolderText">
+        {checkIfAllValuesAreZero(data)
+          ? i18n.ALL_VALUES_ZEROS_TITLE
+          : i18n.DATA_NOT_AVAILABLE_TITLE}
+      </EuiText>
+    </EuiFlexItem>
+  </FlexGroup>
+);
diff --git a/x-pack/legacy/plugins/siem/public/components/charts/common.test.tsx b/x-pack/legacy/plugins/siem/public/components/charts/common.test.tsx
index f23b97d8cd5ff6..0fc7bc6afc2161 100644
--- a/x-pack/legacy/plugins/siem/public/components/charts/common.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/charts/common.test.tsx
@@ -3,18 +3,18 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-
-import { shallow, ShallowWrapper } from 'enzyme';
-import * as React from 'react';
+import { shallow } from 'enzyme';
+import React from 'react';
 import {
-  ChartHolder,
+  checkIfAllValuesAreZero,
+  defaultChartHeight,
   getChartHeight,
   getChartWidth,
-  WrappedByAutoSizer,
-  defaultChartHeight,
   getSeriesStyle,
-  SeriesType,
   getTheme,
+  SeriesType,
+  WrappedByAutoSizer,
+  ChartSeriesData,
 } from './common';
 import 'jest-styled-components';
 import { mergeWithDefaultTheme, LIGHT_THEME } from '@elastic/charts';
@@ -26,30 +26,6 @@ jest.mock('@elastic/charts', () => {
   };
 });
 
-describe('ChartHolder', () => {
-  let shallowWrapper: ShallowWrapper;
-
-  it('should render with default props', () => {
-    const height = `100%`;
-    const width = `100%`;
-    shallowWrapper = shallow(<ChartHolder />);
-    expect(shallowWrapper.props()).toMatchObject({
-      height,
-      width,
-    });
-  });
-
-  it('should render with given props', () => {
-    const height = `100px`;
-    const width = `100px`;
-    shallowWrapper = shallow(<ChartHolder height={height} width={width} />);
-    expect(shallowWrapper.props()).toMatchObject({
-      height,
-      width,
-    });
-  });
-});
-
 describe('WrappedByAutoSizer', () => {
   it('should render correct default height', () => {
     const wrapper = shallow(<WrappedByAutoSizer />);
@@ -88,7 +64,7 @@ describe('getTheme', () => {
       chartMargins: { bottom: 0, left: 0, right: 0, top: 4 },
       chartPaddings: { bottom: 0, left: 0, right: 0, top: 0 },
       scales: {
-        barsPadding: 0.5,
+        barsPadding: 0.05,
       },
     };
     getTheme();
@@ -130,3 +106,46 @@ describe('getChartWidth', () => {
     expect(height).toEqual(defaultChartHeight);
   });
 });
+
+describe('checkIfAllValuesAreZero', () => {
+  const mockInvalidDataSets: Array<[ChartSeriesData[]]> = [
+    [[{ key: 'mockKey', color: 'mockColor', value: [{ x: 1, y: 0 }, { x: 1, y: 1 }] }]],
+    [
+      [
+        { key: 'mockKeyA', color: 'mockColor', value: [{ x: 1, y: 0 }, { x: 1, y: 1 }] },
+        { key: 'mockKeyB', color: 'mockColor', value: [{ x: 1, y: 0 }, { x: 1, y: 0 }] },
+      ],
+    ],
+  ];
+  const mockValidDataSets: Array<[ChartSeriesData[]]> = [
+    [[{ key: 'mockKey', color: 'mockColor', value: [{ x: 0, y: 0 }, { x: 1, y: 0 }] }]],
+    [
+      [
+        { key: 'mockKeyA', color: 'mockColor', value: [{ x: 1, y: 0 }, { x: 3, y: 0 }] },
+        { key: 'mockKeyB', color: 'mockColor', value: [{ x: 2, y: 0 }, { x: 4, y: 0 }] },
+      ],
+    ],
+  ];
+
+  describe.each(mockInvalidDataSets)('with data [%o]', data => {
+    let result: boolean;
+    beforeAll(() => {
+      result = checkIfAllValuesAreZero(data);
+    });
+
+    it(`should return false`, () => {
+      expect(result).toBeFalsy();
+    });
+  });
+
+  describe.each(mockValidDataSets)('with data [%o]', data => {
+    let result: boolean;
+    beforeAll(() => {
+      result = checkIfAllValuesAreZero(data);
+    });
+
+    it(`should return true`, () => {
+      expect(result).toBeTruthy();
+    });
+  });
+});
diff --git a/x-pack/legacy/plugins/siem/public/components/charts/common.tsx b/x-pack/legacy/plugins/siem/public/components/charts/common.tsx
index 59873b2cd6a31e..7ac91437920e5e 100644
--- a/x-pack/legacy/plugins/siem/public/components/charts/common.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/charts/common.tsx
@@ -3,58 +3,33 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { EuiFlexGroup, EuiText, EuiFlexItem } from '@elastic/eui';
-import React from 'react';
-import styled from 'styled-components';
+
+import chrome from 'ui/chrome';
 import {
   CustomSeriesColorsMap,
+  DARK_THEME,
   DataSeriesColorsValues,
   getSpecId,
+  LIGHT_THEME,
   mergeWithDefaultTheme,
   PartialTheme,
-  LIGHT_THEME,
-  DARK_THEME,
+  Rendering,
+  Rotation,
   ScaleType,
-  TickFormatter,
   SettingSpecProps,
-  Rotation,
-  Rendering,
+  TickFormatter,
 } from '@elastic/charts';
-import { i18n } from '@kbn/i18n';
-import chrome from 'ui/chrome';
 import moment from 'moment-timezone';
+import styled from 'styled-components';
 import { DEFAULT_DATE_FORMAT_TZ, DEFAULT_DARK_MODE } from '../../../common/constants';
+
 export const defaultChartHeight = '100%';
 export const defaultChartWidth = '100%';
 const chartDefaultRotation: Rotation = 0;
 const chartDefaultRendering: Rendering = 'canvas';
-const FlexGroup = styled(EuiFlexGroup)<{ height?: string | null; width?: string | null }>`
-  height: ${({ height }) => (height ? height : '100%')};
-  width: ${({ width }) => (width ? width : '100%')};
-`;
-
-FlexGroup.displayName = 'FlexGroup';
 
 export type UpdateDateRange = (min: number, max: number) => void;
 
-export const ChartHolder = ({
-  height = '100%',
-  width = '100%',
-}: {
-  height?: string | null;
-  width?: string | null;
-}) => (
-  <FlexGroup justifyContent="center" alignItems="center" height={height} width={width}>
-    <EuiFlexItem grow={false}>
-      <EuiText size="s" textAlign="center" color="subdued">
-        {i18n.translate('xpack.siem.chart.dataNotAvailableTitle', {
-          defaultMessage: 'Chart Data Not Available',
-        })}
-      </EuiText>
-    </EuiFlexItem>
-  </FlexGroup>
-);
-
 export interface ChartData {
   x: number | string | null;
   y: number | string | null;
@@ -136,7 +111,7 @@ export const getTheme = () => {
       bottom: 0,
     },
     scales: {
-      barsPadding: 0.5,
+      barsPadding: 0.05,
     },
   };
   const isDarkMode: boolean = chrome.getUiSettingsClient().get(DEFAULT_DARK_MODE);
@@ -166,3 +141,9 @@ export const getChartWidth = (customWidth?: number, autoSizerWidth?: number): st
   const height = customWidth || autoSizerWidth;
   return height ? `${height}px` : defaultChartWidth;
 };
+
+export const checkIfAllValuesAreZero = (data: ChartSeriesData[] | null | undefined): boolean =>
+  Array.isArray(data) &&
+  data.every(series => {
+    return Array.isArray(series.value) && (series.value as ChartData[]).every(({ y }) => y === 0);
+  });
diff --git a/x-pack/legacy/plugins/siem/public/components/charts/translation.ts b/x-pack/legacy/plugins/siem/public/components/charts/translation.ts
new file mode 100644
index 00000000000000..341cb7782f87cc
--- /dev/null
+++ b/x-pack/legacy/plugins/siem/public/components/charts/translation.ts
@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const ALL_VALUES_ZEROS_TITLE = i18n.translate('xpack.siem.chart.dataAllValuesZerosTitle', {
+  defaultMessage: 'All values returned zero',
+});
+
+export const DATA_NOT_AVAILABLE_TITLE = i18n.translate('xpack.siem.chart.dataNotAvailableTitle', {
+  defaultMessage: 'Chart Data Not Available',
+});
diff --git a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/drag_drop_context_wrapper.tsx b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/drag_drop_context_wrapper.tsx
index aab83ec7908fe0..11b604571378b1 100644
--- a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/drag_drop_context_wrapper.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/drag_drop_context_wrapper.tsx
@@ -6,7 +6,7 @@
 
 import { defaultTo, noop } from 'lodash/fp';
 import * as React from 'react';
-import { DragDropContext, DropResult, ResponderProvided, DragStart } from 'react-beautiful-dnd';
+import { DragDropContext, DropResult, DragStart } from 'react-beautiful-dnd';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
 
@@ -57,43 +57,39 @@ const onDragEndHandler = ({
 /**
  * DragDropContextWrapperComponent handles all drag end events
  */
-export class DragDropContextWrapperComponent extends React.Component<Props> {
-  public shouldComponentUpdate = ({ children, dataProviders }: Props) =>
-    children === this.props.children && dataProviders !== this.props.dataProviders // prevent re-renders when data providers are added or removed, but all other props are the same
-      ? false
-      : true;
-
-  public render() {
-    const { children } = this.props;
-
+export const DragDropContextWrapperComponent = React.memo<Props>(
+  ({ browserFields, children, dataProviders, dispatch }) => {
+    function onDragEnd(result: DropResult) {
+      enableScrolling();
+
+      if (dataProviders != null) {
+        onDragEndHandler({
+          browserFields,
+          result,
+          dataProviders,
+          dispatch,
+        });
+      }
+
+      if (!draggableIsField(result)) {
+        document.body.classList.remove(IS_DRAGGING_CLASS_NAME);
+      }
+    }
     return (
-      <DragDropContext onDragEnd={this.onDragEnd} onDragStart={onDragStart}>
+      <DragDropContext onDragEnd={onDragEnd} onDragStart={onDragStart}>
         {children}
       </DragDropContext>
     );
+  },
+  (prevProps, nextProps) => {
+    return (
+      prevProps.children === nextProps.children &&
+      prevProps.dataProviders === nextProps.dataProviders
+    ); // prevent re-renders when data providers are added or removed, but all other props are the same
   }
+);
 
-  private onDragEnd: (result: DropResult, provided: ResponderProvided) => void = (
-    result: DropResult
-  ) => {
-    const { browserFields, dataProviders, dispatch } = this.props;
-
-    enableScrolling();
-
-    if (dataProviders != null) {
-      onDragEndHandler({
-        browserFields,
-        result,
-        dataProviders,
-        dispatch,
-      });
-    }
-
-    if (!draggableIsField(result)) {
-      document.body.classList.remove(IS_DRAGGING_CLASS_NAME);
-    }
-  };
-}
+DragDropContextWrapperComponent.displayName = 'DragDropContextWrapperComponent';
 
 const emptyDataProviders: dragAndDropModel.IdToDataProvider = {}; // stable reference
 
diff --git a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.test.tsx b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.test.tsx
index 60c466459794e2..d9b78836b450e4 100644
--- a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.test.tsx
@@ -12,7 +12,6 @@ import { MockedProvider } from 'react-apollo/test-utils';
 import { mockBrowserFields, mocksSource } from '../../containers/source/mock';
 import { TestProviders } from '../../mock';
 import { mockDataProviders } from '../timeline/data_providers/mock/mock_data_providers';
-
 import { DragDropContextWrapper } from './drag_drop_context_wrapper';
 import { DraggableWrapper } from './draggable_wrapper';
 
@@ -50,14 +49,12 @@ describe('DraggableWrapper', () => {
   });
 
   describe('text truncation styling', () => {
-    test('it applies text truncation styling when a width IS specified (implicit: and the user is not dragging)', () => {
-      const width = '100px';
-
+    test('it applies text truncation styling when truncate IS specified (implicit: and the user is not dragging)', () => {
       const wrapper = mount(
         <TestProviders>
           <MockedProvider mocks={mocksSource} addTypename={false}>
             <DragDropContextWrapper browserFields={mockBrowserFields}>
-              <DraggableWrapper dataProvider={dataProvider} width={width} render={() => message} />
+              <DraggableWrapper dataProvider={dataProvider} render={() => message} truncate />
             </DragDropContextWrapper>
           </MockedProvider>
         </TestProviders>
@@ -68,7 +65,7 @@ describe('DraggableWrapper', () => {
       );
     });
 
-    test('it does NOT apply text truncation styling when a width is NOT specified', () => {
+    test('it does NOT apply text truncation styling when truncate is NOT specified', () => {
       const wrapper = mount(
         <TestProviders>
           <MockedProvider mocks={mocksSource} addTypename={false}>
diff --git a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.tsx b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.tsx
index 9ddfc82dd88a5a..8a12a5035fc3a8 100644
--- a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.tsx
@@ -5,7 +5,7 @@
  */
 
 import { isEqual } from 'lodash/fp';
-import * as React from 'react';
+import React, { useEffect } from 'react';
 import {
   Draggable,
   DraggableProvided,
@@ -20,7 +20,6 @@ import { dragAndDropActions } from '../../store/drag_and_drop';
 import { DataProvider } from '../timeline/data_providers/data_provider';
 import { STATEFUL_EVENT_CSS_CLASS_NAME } from '../timeline/helpers';
 import { TruncatableText } from '../truncatable_text';
-
 import { getDraggableId, getDroppableId } from './helpers';
 
 // As right now, we do not know what we want there, we will keep it as a placeholder
@@ -29,17 +28,14 @@ export const DragEffects = styled.div``;
 DragEffects.displayName = 'DragEffects';
 
 const Wrapper = styled.div`
-  .euiPageBody & {
-    display: inline-block;
-  }
+  display: inline-block;
+  max-width: 100%;
 `;
 
 Wrapper.displayName = 'Wrapper';
 
 const ProviderContainer = styled.div<{ isDragging: boolean }>`
   ${({ theme, isDragging }) => css`
-    // ALL DRAGGABLES
-
     &,
     &::before,
     &::after {
@@ -47,23 +43,13 @@ const ProviderContainer = styled.div<{ isDragging: boolean }>`
         color ${theme.eui.euiAnimSpeedFast} ease;
     }
 
-    .euiBadge,
-    .euiBadge__text {
-      cursor: grab;
-    }
-
-    // PAGE DRAGGABLES
-
     ${!isDragging &&
       `
-      .euiPageBody & {
-        z-index: ${theme.eui.euiZLevel0} !important;
-      }
-
-      {
+      & {
         border-radius: 2px;
         padding: 0 4px 0 8px;
         position: relative;
+        z-index: ${theme.eui.euiZLevel0} !important;
 
         &::before {
           background-image: linear-gradient(
@@ -86,6 +72,14 @@ const ProviderContainer = styled.div<{ isDragging: boolean }>`
         }
       }
 
+      &:hover {
+        &,
+        & .euiBadge,
+        & .euiBadge__text {
+          cursor: move; //Fallback for IE11
+          cursor: grab;
+        }
+      }
 
       .${STATEFUL_EVENT_CSS_CLASS_NAME}:hover &,
       tr:hover & {
@@ -112,7 +106,8 @@ const ProviderContainer = styled.div<{ isDragging: boolean }>`
         background-color: ${theme.eui.euiColorPrimary};
 
         &,
-        & a {
+        & a,
+        & a:hover {
           color: ${theme.eui.euiColorEmptyShade};
         }
 
@@ -131,9 +126,10 @@ const ProviderContainer = styled.div<{ isDragging: boolean }>`
 
     ${isDragging &&
       `
-      .euiPageBody & {
+      & {
         z-index: ${theme.eui.euiZLevel9} !important;
-      `}
+      }
+    `}
   `}
 `;
 
@@ -147,7 +143,7 @@ interface OwnProps {
     provided: DraggableProvided,
     state: DraggableStateSnapshot
   ) => React.ReactNode;
-  width?: string;
+  truncate?: boolean;
 }
 
 interface DispatchProps {
@@ -165,28 +161,15 @@ type Props = OwnProps & DispatchProps;
  * Wraps a draggable component to handle registration / unregistration of the
  * data provider associated with the item being dropped
  */
-class DraggableWrapperComponent extends React.Component<Props> {
-  public shouldComponentUpdate = ({ dataProvider, render, width }: Props) =>
-    isEqual(dataProvider, this.props.dataProvider) &&
-    render !== this.props.render &&
-    width === this.props.width
-      ? false
-      : true;
-
-  public componentDidMount() {
-    const { dataProvider, registerProvider } = this.props;
-
-    registerProvider!({ provider: dataProvider });
-  }
-
-  public componentWillUnmount() {
-    const { dataProvider, unRegisterProvider } = this.props;
 
-    unRegisterProvider!({ id: dataProvider.id });
-  }
-
-  public render() {
-    const { dataProvider, render, width } = this.props;
+const DraggableWrapperComponent = React.memo<Props>(
+  ({ dataProvider, registerProvider, render, truncate, unRegisterProvider }) => {
+    useEffect(() => {
+      registerProvider!({ provider: dataProvider });
+      return () => {
+        unRegisterProvider!({ id: dataProvider.id });
+      };
+    }, []);
 
     return (
       <Wrapper data-test-subj="draggableWrapperDiv">
@@ -198,34 +181,28 @@ class DraggableWrapperComponent extends React.Component<Props> {
                 index={0}
                 key={getDraggableId(dataProvider.id)}
               >
-                {(provided, snapshot) => {
-                  return (
-                    <ProviderContainer
-                      {...provided.draggableProps}
-                      {...provided.dragHandleProps}
-                      innerRef={provided.innerRef}
-                      data-test-subj="providerContainer"
-                      isDragging={snapshot.isDragging}
-                      style={{
-                        ...provided.draggableProps.style,
-                      }}
-                    >
-                      {width != null && !snapshot.isDragging ? (
-                        <TruncatableText
-                          data-test-subj="draggable-truncatable-content"
-                          size="xs"
-                          width={width}
-                        >
-                          {render(dataProvider, provided, snapshot)}
-                        </TruncatableText>
-                      ) : (
-                        <span data-test-subj={`draggable-content-${dataProvider.queryMatch.field}`}>
-                          {render(dataProvider, provided, snapshot)}
-                        </span>
-                      )}
-                    </ProviderContainer>
-                  );
-                }}
+                {(provided, snapshot) => (
+                  <ProviderContainer
+                    {...provided.draggableProps}
+                    {...provided.dragHandleProps}
+                    innerRef={provided.innerRef}
+                    data-test-subj="providerContainer"
+                    isDragging={snapshot.isDragging}
+                    style={{
+                      ...provided.draggableProps.style,
+                    }}
+                  >
+                    {truncate && !snapshot.isDragging ? (
+                      <TruncatableText data-test-subj="draggable-truncatable-content">
+                        {render(dataProvider, provided, snapshot)}
+                      </TruncatableText>
+                    ) : (
+                      <span data-test-subj={`draggable-content-${dataProvider.queryMatch.field}`}>
+                        {render(dataProvider, provided, snapshot)}
+                      </span>
+                    )}
+                  </ProviderContainer>
+                )}
               </Draggable>
               {droppableProvided.placeholder}
             </div>
@@ -233,8 +210,17 @@ class DraggableWrapperComponent extends React.Component<Props> {
         </Droppable>
       </Wrapper>
     );
+  },
+  (prevProps, nextProps) => {
+    return (
+      isEqual(prevProps.dataProvider, nextProps.dataProvider) &&
+      prevProps.render !== nextProps.render &&
+      prevProps.truncate === nextProps.truncate
+    );
   }
-}
+);
+
+DraggableWrapperComponent.displayName = 'DraggableWrapperComponent';
 
 export const DraggableWrapper = connect(
   null,
diff --git a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/droppable_wrapper.tsx b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/droppable_wrapper.tsx
index af28e74df0f5f1..c0ab5a939bc4da 100644
--- a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/droppable_wrapper.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/droppable_wrapper.tsx
@@ -4,13 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { rgba } from 'polished';
 import * as React from 'react';
 import { Droppable } from 'react-beautiful-dnd';
 import { pure } from 'recompose';
 import styled from 'styled-components';
 
-import { THIRTY_PERCENT_ALPHA_HEX_SUFFIX, TWENTY_PERCENT_ALPHA_HEX_SUFFIX } from './helpers';
-
 interface Props {
   children?: React.ReactNode;
   droppableId: string;
@@ -34,22 +33,22 @@ const ReactDndDropTarget = styled.div<{ isDraggingOver: boolean; height: string
       ? `
     .drop-and-provider-timeline {
       &:hover {
-        background-color: ${props.theme.eui.euiColorSuccess}${THIRTY_PERCENT_ALPHA_HEX_SUFFIX};
+        background-color: ${rgba(props.theme.eui.euiColorSuccess, 0.3)};
       }
     }
     .drop-and-provider-timeline:hover {
-        background-color: ${props.theme.eui.euiColorSuccess}${THIRTY_PERCENT_ALPHA_HEX_SUFFIX};
+        background-color: ${rgba(props.theme.eui.euiColorSuccess, 0.3)};
     }
   > div.timeline-drop-area-empty {
      color: ${props.theme.eui.euiColorSuccess}
-     background-color: ${props.theme.eui.euiColorSuccess}${TWENTY_PERCENT_ALPHA_HEX_SUFFIX};
+     background-color: ${rgba(props.theme.eui.euiColorSuccess, 0.2)};
 
      & .euiTextColor--subdued {
       color: ${props.theme.eui.euiColorSuccess};
      }
   }
   > div.timeline-drop-area {
-    background-color: ${props.theme.eui.euiColorSuccess}${TWENTY_PERCENT_ALPHA_HEX_SUFFIX};
+    background-color: ${rgba(props.theme.eui.euiColorSuccess, 0.2)};
     .provider-item-filter-container div:first-child{
       // Override dragNdrop beautiful so we do not have our droppable moving around for no good reason
       transform: none !important;
@@ -86,7 +85,6 @@ const ReactDndDropTarget = styled.div<{ isDraggingOver: boolean; height: string
     }
   }
 `;
-
 ReactDndDropTarget.displayName = 'ReactDndDropTarget';
 
 export const DroppableWrapper = pure<Props>(
@@ -118,5 +116,4 @@ export const DroppableWrapper = pure<Props>(
     </Droppable>
   )
 );
-
 DroppableWrapper.displayName = 'DroppableWrapper';
diff --git a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/helpers.ts b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/helpers.ts
index dce7b84a2128bd..415970474db4c3 100644
--- a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/helpers.ts
+++ b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/helpers.ts
@@ -224,12 +224,3 @@ export const DRAG_TYPE_FIELD = 'drag-type-field';
 
 /** This class is added to the document body while dragging */
 export const IS_DRAGGING_CLASS_NAME = 'is-dragging';
-
-/** A hex alpha channel suffix representing 10% for the `AA` in `#RRGGBBAA` */
-export const TEN_PERCENT_ALPHA_HEX_SUFFIX = '1A';
-
-/** A hex alpha channel suffix representing 20% for the `AA` in `#RRGGBBAA` */
-export const TWENTY_PERCENT_ALPHA_HEX_SUFFIX = '33';
-
-/** A hex alpha channel suffix representing 30% for the `AA` in `#RRGGBBAA` */
-export const THIRTY_PERCENT_ALPHA_HEX_SUFFIX = '4d';
diff --git a/x-pack/legacy/plugins/siem/public/components/draggables/field_badge/index.tsx b/x-pack/legacy/plugins/siem/public/components/draggables/field_badge/index.tsx
index f80afea9a98e95..faf65338b43378 100644
--- a/x-pack/legacy/plugins/siem/public/components/draggables/field_badge/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/draggables/field_badge/index.tsx
@@ -4,54 +4,37 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import {
-  EuiBadge,
-  EuiFlexGroup,
-  EuiFlexItem,
-  // @ts-ignore
-  EuiHighlight,
-} from '@elastic/eui';
+import { rgba } from 'polished';
 import * as React from 'react';
 import { pure } from 'recompose';
-import styled from 'styled-components';
-
-const FieldBadgeFlexGroup = styled(EuiFlexGroup)`
-  height: 38px;
-`;
-
-FieldBadgeFlexGroup.displayName = 'FieldBadgeFlexGroup';
-
-const FieldBadgeFlexItem = styled(EuiFlexItem)`
-  font-weight: bold;
-`;
-
-FieldBadgeFlexItem.displayName = 'FieldBadgeFlexItem';
-
-/**
- * The name of a (draggable) field
- */
-export const FieldNameContainer = styled.div`
-  padding: 5px;
-  &:hover {
-    transition: background-color 0.7s ease;
-    background-color: #000;
-    color: #fff;
-  }
+import styled, { css } from 'styled-components';
+
+const Field = styled.div`
+  ${({ theme }) => css`
+    background-color: ${theme.eui.euiColorEmptyShade};
+    border: ${theme.eui.euiBorderThin};
+    box-shadow: 0 2px 2px -1px ${rgba(theme.eui.euiColorMediumShade, 0.3)},
+      0 1px 5px -2px ${rgba(theme.eui.euiColorMediumShade, 0.3)};
+    font-size: ${theme.eui.euiFontSizeXS};
+    font-weight: ${theme.eui.euiFontWeightSemiBold};
+    line-height: ${theme.eui.euiLineHeight};
+    padding: ${theme.eui.paddingSizes.xs};
+  `}
 `;
-
-FieldNameContainer.displayName = 'FieldNameContainer';
+Field.displayName = 'Field';
 
 /**
  * Renders a field (e.g. `event.action`) as a draggable badge
  */
-export const DraggableFieldBadge = pure<{ fieldId: string }>(({ fieldId }) => (
-  <EuiBadge color="#000">
-    <FieldBadgeFlexGroup alignItems="center" justifyContent="center" gutterSize="none">
-      <FieldBadgeFlexItem data-test-subj="field" grow={false}>
-        {fieldId}
-      </FieldBadgeFlexItem>
-    </FieldBadgeFlexGroup>
-  </EuiBadge>
-));
 
+// Passing the styles directly to the component because the width is
+// being calculated and is recommended by Styled Components for performance
+// https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
+export const DraggableFieldBadge = pure<{ fieldId: string; fieldWidth?: string }>(
+  ({ fieldId, fieldWidth }) => (
+    <Field data-test-subj="field" style={{ width: fieldWidth }}>
+      {fieldId}
+    </Field>
+  )
+);
 DraggableFieldBadge.displayName = 'DraggableFieldBadge';
diff --git a/x-pack/legacy/plugins/siem/public/components/edit_data_provider/index.tsx b/x-pack/legacy/plugins/siem/public/components/edit_data_provider/index.tsx
index 10b4340b6a88d2..dc7f2185c26b72 100644
--- a/x-pack/legacy/plugins/siem/public/components/edit_data_provider/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/edit_data_provider/index.tsx
@@ -9,15 +9,15 @@ import {
   EuiButton,
   EuiComboBox,
   EuiComboBoxOptionProps,
+  EuiFieldText,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFieldText,
   EuiFormRow,
   EuiPanel,
   EuiSpacer,
   EuiToolTip,
 } from '@elastic/eui';
-import * as React from 'react';
+import React, { useEffect, useState } from 'react';
 import styled, { injectGlobal } from 'styled-components';
 
 import { BrowserFields } from '../../containers/source';
@@ -37,8 +37,8 @@ import * as i18n from './translations';
 const EDIT_DATA_PROVIDER_WIDTH = 400;
 const FIELD_COMBO_BOX_WIDTH = 195;
 const OPERATOR_COMBO_BOX_WIDTH = 160;
-const VALUE_INPUT_CLASS_NAME = 'edit-data-provider-value';
 const SAVE_CLASS_NAME = 'edit-data-provider-save';
+const VALUE_INPUT_CLASS_NAME = 'edit-data-provider-value';
 
 export const HeaderContainer = styled.div`
   width: ${EDIT_DATA_PROVIDER_WIDTH};
@@ -68,12 +68,6 @@ interface Props {
   value: string | number;
 }
 
-interface State {
-  updatedField: EuiComboBoxOptionProps[];
-  updatedOperator: EuiComboBoxOptionProps[];
-  updatedValue: string | number;
-}
-
 const sanatizeValue = (value: string | number): string =>
   Array.isArray(value) ? `${value[0]}` : `${value}`; // fun fact: value should never be an array
 
@@ -88,37 +82,80 @@ export const getInitialOperatorLabel = (
   }
 };
 
-export class StatefulEditDataProvider extends React.PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props);
+export const StatefulEditDataProvider = React.memo<Props>(
+  ({
+    andProviderId,
+    browserFields,
+    field,
+    isExcluded,
+    onDataProviderEdited,
+    operator,
+    providerId,
+    timelineId,
+    value,
+  }) => {
+    const [updatedField, setUpdatedField] = useState<EuiComboBoxOptionProps[]>([{ label: field }]);
+    const [updatedOperator, setUpdatedOperator] = useState<EuiComboBoxOptionProps[]>(
+      getInitialOperatorLabel(isExcluded, operator)
+    );
+    const [updatedValue, setUpdatedValue] = useState<string | number>(value);
 
-    const { field, isExcluded, operator, value } = props;
+    /** Focuses the Value input if it is visible, falling back to the Save button if it's not */
+    function focusInput() {
+      const elements = document.getElementsByClassName(VALUE_INPUT_CLASS_NAME);
 
-    this.state = {
-      updatedField: [{ label: field }],
-      updatedOperator: getInitialOperatorLabel(isExcluded, operator),
-      updatedValue: value,
-    };
-  }
+      if (elements.length > 0) {
+        (elements[0] as HTMLElement).focus(); // this cast is required because focus() does not exist on every `Element` returned by `getElementsByClassName`
+      } else {
+        const saveElements = document.getElementsByClassName(SAVE_CLASS_NAME);
 
-  public componentDidMount() {
-    this.disableScrolling();
-    this.focusInput();
-  }
+        if (saveElements.length > 0) {
+          (saveElements[0] as HTMLElement).focus();
+        }
+      }
+    }
 
-  public componentWillUnmount() {
-    this.enableScrolling();
-  }
+    function onFieldSelected(selectedField: EuiComboBoxOptionProps[]) {
+      setUpdatedField(selectedField);
+
+      focusInput();
+    }
+
+    function onOperatorSelected(operatorSelected: EuiComboBoxOptionProps[]) {
+      setUpdatedOperator(operatorSelected);
+
+      focusInput();
+    }
+
+    function onValueChange(e: React.ChangeEvent<HTMLInputElement>) {
+      setUpdatedValue(e.target.value);
+    }
+
+    function disableScrolling() {
+      const x =
+        window.pageXOffset !== undefined
+          ? window.pageXOffset
+          : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
 
-  public render() {
-    const {
-      andProviderId,
-      browserFields,
-      onDataProviderEdited,
-      providerId,
-      timelineId,
-    } = this.props;
-    const { updatedField, updatedOperator, updatedValue } = this.state;
+      const y =
+        window.pageYOffset !== undefined
+          ? window.pageYOffset
+          : (document.documentElement || document.body.parentNode || document.body).scrollTop;
+
+      window.onscroll = () => window.scrollTo(x, y);
+    }
+
+    function enableScrolling() {
+      window.onscroll = () => noop;
+    }
+
+    useEffect(() => {
+      disableScrolling();
+      focusInput();
+      return () => {
+        enableScrolling();
+      };
+    }, []);
 
     return (
       <EuiPanel paddingSize="s">
@@ -127,18 +164,14 @@ export class StatefulEditDataProvider extends React.PureComponent<Props, State>
             <EuiFlexGroup direction="row" gutterSize="none" justifyContent="spaceBetween">
               <EuiFlexItem grow={false}>
                 <EuiFormRow label={i18n.FIELD}>
-                  <EuiToolTip
-                    content={
-                      this.state.updatedField.length > 0 ? this.state.updatedField[0].label : null
-                    }
-                  >
+                  <EuiToolTip content={updatedField.length > 0 ? updatedField[0].label : null}>
                     <EuiComboBox
                       data-test-subj="field"
                       isClearable={false}
-                      onChange={this.onFieldSelected}
+                      onChange={onFieldSelected}
                       options={getCategorizedFieldNames(browserFields)}
                       placeholder={i18n.FIELD_PLACEHOLDER}
-                      selectedOptions={this.state.updatedField}
+                      selectedOptions={updatedField}
                       singleSelection={{ asPlainText: true }}
                       style={{ width: `${FIELD_COMBO_BOX_WIDTH}px` }}
                     />
@@ -151,10 +184,10 @@ export class StatefulEditDataProvider extends React.PureComponent<Props, State>
                   <EuiComboBox
                     data-test-subj="operator"
                     isClearable={false}
-                    onChange={this.onOperatorSelected}
+                    onChange={onOperatorSelected}
                     options={operatorLabels}
                     placeholder={i18n.SELECT_AN_OPERATOR}
-                    selectedOptions={this.state.updatedOperator}
+                    selectedOptions={updatedOperator}
                     singleSelection={{ asPlainText: true }}
                     style={{ width: `${OPERATOR_COMBO_BOX_WIDTH}px` }}
                   />
@@ -167,17 +200,17 @@ export class StatefulEditDataProvider extends React.PureComponent<Props, State>
             <EuiSpacer />
           </EuiFlexItem>
 
-          {this.state.updatedOperator.length > 0 &&
-          this.state.updatedOperator[0].label !== i18n.EXISTS &&
-          this.state.updatedOperator[0].label !== i18n.DOES_NOT_EXIST ? (
+          {updatedOperator.length > 0 &&
+          updatedOperator[0].label !== i18n.EXISTS &&
+          updatedOperator[0].label !== i18n.DOES_NOT_EXIST ? (
             <EuiFlexItem grow={false}>
               <EuiFormRow label={i18n.VALUE_LABEL}>
                 <EuiFieldText
                   className={VALUE_INPUT_CLASS_NAME}
                   data-test-subj="value"
+                  onChange={onValueChange}
                   placeholder={i18n.VALUE}
-                  onChange={this.onValueChange}
-                  value={sanatizeValue(this.state.updatedValue)}
+                  value={sanatizeValue(updatedValue)}
                 />
               </EuiFormRow>
             </EuiFlexItem>
@@ -196,6 +229,13 @@ export class StatefulEditDataProvider extends React.PureComponent<Props, State>
                   color="primary"
                   data-test-subj="save"
                   fill={true}
+                  isDisabled={
+                    !selectionsAreValid({
+                      browserFields,
+                      selectedField: updatedField,
+                      selectedOperator: updatedOperator,
+                    })
+                  }
                   onClick={() => {
                     onDataProviderEdited({
                       andProviderId,
@@ -207,13 +247,6 @@ export class StatefulEditDataProvider extends React.PureComponent<Props, State>
                       value: updatedValue,
                     });
                   }}
-                  isDisabled={
-                    !selectionsAreValid({
-                      browserFields: this.props.browserFields,
-                      selectedField: updatedField,
-                      selectedOperator: updatedOperator,
-                    })
-                  }
                   size="s"
                 >
                   {i18n.SAVE}
@@ -225,53 +258,6 @@ export class StatefulEditDataProvider extends React.PureComponent<Props, State>
       </EuiPanel>
     );
   }
+);
 
-  /** Focuses the Value input if it is visible, falling back to the Save button if it's not */
-  private focusInput = () => {
-    const elements = document.getElementsByClassName(VALUE_INPUT_CLASS_NAME);
-
-    if (elements.length > 0) {
-      (elements[0] as HTMLElement).focus(); // this cast is required because focus() does not exist on every `Element` returned by `getElementsByClassName`
-    } else {
-      const saveElements = document.getElementsByClassName(SAVE_CLASS_NAME);
-
-      if (saveElements.length > 0) {
-        (saveElements[0] as HTMLElement).focus();
-      }
-    }
-  };
-
-  private onFieldSelected = (selectedField: EuiComboBoxOptionProps[]) => {
-    this.setState({ updatedField: selectedField });
-
-    this.focusInput();
-  };
-
-  private onOperatorSelected = (updatedOperator: EuiComboBoxOptionProps[]) => {
-    this.setState({ updatedOperator });
-
-    this.focusInput();
-  };
-
-  private onValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    this.setState({
-      updatedValue: e.target.value,
-    });
-  };
-
-  private disableScrolling = () => {
-    const x =
-      window.pageXOffset !== undefined
-        ? window.pageXOffset
-        : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
-
-    const y =
-      window.pageYOffset !== undefined
-        ? window.pageYOffset
-        : (document.documentElement || document.body.parentNode || document.body).scrollTop;
-
-    window.onscroll = () => window.scrollTo(x, y);
-  };
-
-  private enableScrolling = () => (window.onscroll = () => noop);
-}
+StatefulEditDataProvider.displayName = 'StatefulEditDataProvider';
diff --git a/x-pack/legacy/plugins/siem/public/components/embeddables/__snapshots__/index_patterns_missing_prompt.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/embeddables/__snapshots__/index_patterns_missing_prompt.test.tsx.snap
index 937ba229b88835..f482a864bed6dc 100644
--- a/x-pack/legacy/plugins/siem/public/components/embeddables/__snapshots__/index_patterns_missing_prompt.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/embeddables/__snapshots__/index_patterns_missing_prompt.test.tsx.snap
@@ -56,7 +56,6 @@ exports[`IndexPatternsMissingPrompt renders correctly against snapshot 1`] = `
       </p>
     </React.Fragment>
   }
-  iconColor="subdued"
   iconType="gisApp"
   title={
     <h2>
diff --git a/x-pack/legacy/plugins/siem/public/components/embeddables/embedded_map.tsx b/x-pack/legacy/plugins/siem/public/components/embeddables/embedded_map.tsx
index 86696503dbda38..18040a35a52807 100644
--- a/x-pack/legacy/plugins/siem/public/components/embeddables/embedded_map.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/embeddables/embedded_map.tsx
@@ -43,7 +43,7 @@ export interface EmbeddedMapProps {
 }
 
 export const EmbeddedMap = React.memo<EmbeddedMapProps>(
-  ({ applyFilterQueryFromKueryExpression, queryExpression, startDate, endDate, setQuery }) => {
+  ({ applyFilterQueryFromKueryExpression, endDate, queryExpression, setQuery, startDate }) => {
     const [embeddable, setEmbeddable] = React.useState<MapEmbeddable | null>(null);
     const [isLoading, setIsLoading] = useState(true);
     const [isError, setIsError] = useState(false);
diff --git a/x-pack/legacy/plugins/siem/public/components/event_details/columns.tsx b/x-pack/legacy/plugins/siem/public/components/event_details/columns.tsx
index 0013e40afa9c43..d835d2c6219312 100644
--- a/x-pack/legacy/plugins/siem/public/components/event_details/columns.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/event_details/columns.tsx
@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Draggable } from 'react-beautiful-dnd';
 import {
   EuiCheckbox,
   EuiFlexGroup,
@@ -15,30 +14,30 @@ import {
   EuiToolTip,
 } from '@elastic/eui';
 import * as React from 'react';
+import { Draggable } from 'react-beautiful-dnd';
 import styled from 'styled-components';
 
 import { BrowserFields } from '../../containers/source';
-import { ColumnHeader } from '../timeline/body/column_headers/column_header';
-import { defaultColumnHeaderType } from '../timeline/body/column_headers/default_headers';
-import { DragEffects } from '../drag_and_drop/draggable_wrapper';
-import { DEFAULT_COLUMN_MIN_WIDTH } from '../timeline/body/helpers';
-import { DefaultDraggable } from '../draggables';
 import { ToStringArray } from '../../graphql/types';
+import { WithCopyToClipboard } from '../../lib/clipboard/with_copy_to_clipboard';
+import { DragEffects } from '../drag_and_drop/draggable_wrapper';
 import { DroppableWrapper } from '../drag_and_drop/droppable_wrapper';
+import { getDroppableId, getDraggableFieldId, DRAG_TYPE_FIELD } from '../drag_and_drop/helpers';
+import { DefaultDraggable } from '../draggables';
 import { DraggableFieldBadge } from '../draggables/field_badge';
-import { FormattedFieldValue } from '../timeline/body/renderers/formatted_field';
+import { EVENT_DURATION_FIELD_NAME } from '../duration';
 import { FieldName } from '../fields_browser/field_name';
-import { getIconFromType, getExampleText, getColumnsWithTimestamp } from './helpers';
-import { getDroppableId, getDraggableFieldId, DRAG_TYPE_FIELD } from '../drag_and_drop/helpers';
-import { OnUpdateColumns } from '../timeline/events';
 import { SelectableText } from '../selectable_text';
-import { WithCopyToClipboard } from '../../lib/clipboard/with_copy_to_clipboard';
-import { WithHoverActions } from '../with_hover_actions';
-
-import * as i18n from './translations';
 import { OverflowField } from '../tables/helpers';
+import { ColumnHeader } from '../timeline/body/column_headers/column_header';
+import { defaultColumnHeaderType } from '../timeline/body/column_headers/default_headers';
+import { DEFAULT_COLUMN_MIN_WIDTH } from '../timeline/body/helpers';
 import { DATE_FIELD_TYPE, MESSAGE_FIELD_NAME } from '../timeline/body/renderers/constants';
-import { EVENT_DURATION_FIELD_NAME } from '../duration';
+import { FormattedFieldValue } from '../timeline/body/renderers/formatted_field';
+import { OnUpdateColumns } from '../timeline/events';
+import { WithHoverActions } from '../with_hover_actions';
+import { getIconFromType, getExampleText, getColumnsWithTimestamp } from './helpers';
+import * as i18n from './translations';
 import { EventFieldsData } from './types';
 
 const HoverActionsContainer = styled(EuiPanel)`
diff --git a/x-pack/legacy/plugins/siem/public/components/event_details/event_details.tsx b/x-pack/legacy/plugins/siem/public/components/event_details/event_details.tsx
index 821ec2048d5ad0..f77c703f064f6c 100644
--- a/x-pack/legacy/plugins/siem/public/components/event_details/event_details.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/event_details/event_details.tsx
@@ -9,14 +9,12 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { BrowserFields } from '../../containers/source';
-import { ColumnHeader } from '../timeline/body/column_headers/column_header';
 import { DetailItem } from '../../graphql/types';
+import { ColumnHeader } from '../timeline/body/column_headers/column_header';
 import { OnUpdateColumns } from '../timeline/events';
-
 import { EventFieldsBrowser } from './event_fields_browser';
 import { JsonView } from './json_view';
 import * as i18n from './translations';
-import { useTimelineWidthContext } from '../timeline/timeline_context';
 
 export type View = 'table-view' | 'json-view';
 
@@ -32,9 +30,8 @@ interface Props {
   toggleColumn: (column: ColumnHeader) => void;
 }
 
-const Details = styled.div<{ width: number }>`
+const Details = styled.div`
   user-select: none;
-  width: ${({ width }) => `${width}px`};
 `;
 
 Details.displayName = 'Details';
@@ -51,7 +48,6 @@ export const EventDetails = React.memo<Props>(
     timelineId,
     toggleColumn,
   }) => {
-    const width = useTimelineWidthContext();
     const tabs: EuiTabbedContentTab[] = [
       {
         id: 'table-view',
@@ -76,7 +72,7 @@ export const EventDetails = React.memo<Props>(
     ];
 
     return (
-      <Details data-test-subj="eventDetails" width={width}>
+      <Details data-test-subj="eventDetails">
         <EuiTabbedContent
           tabs={tabs}
           selectedTab={view === 'table-view' ? tabs[0] : tabs[1]}
diff --git a/x-pack/legacy/plugins/siem/public/components/event_details/stateful_event_details.tsx b/x-pack/legacy/plugins/siem/public/components/event_details/stateful_event_details.tsx
index ec76d8f90c3de9..cb677368298782 100644
--- a/x-pack/legacy/plugins/siem/public/components/event_details/stateful_event_details.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/event_details/stateful_event_details.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import * as React from 'react';
+import React, { useState } from 'react';
 
 import { BrowserFields } from '../../containers/source';
 import { ColumnHeader } from '../timeline/body/column_headers/column_header';
@@ -23,43 +23,24 @@ interface Props {
   toggleColumn: (column: ColumnHeader) => void;
 }
 
-interface State {
-  view: View;
-}
-
-export class StatefulEventDetails extends React.PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = { view: 'table-view' };
-  }
+export const StatefulEventDetails = React.memo<Props>(
+  ({ browserFields, columnHeaders, data, id, onUpdateColumns, timelineId, toggleColumn }) => {
+    const [view, setView] = useState<View>('table-view');
 
-  public onViewSelected = (view: View): void => {
-    this.setState({ view });
-  };
-
-  public render() {
-    const {
-      browserFields,
-      columnHeaders,
-      data,
-      id,
-      onUpdateColumns,
-      timelineId,
-      toggleColumn,
-    } = this.props;
     return (
       <EventDetails
         browserFields={browserFields}
         columnHeaders={columnHeaders}
         data={data}
         id={id}
-        view={this.state.view}
         onUpdateColumns={onUpdateColumns}
-        onViewSelected={this.onViewSelected}
+        onViewSelected={newView => setView(newView)}
         timelineId={timelineId}
         toggleColumn={toggleColumn}
+        view={view}
       />
     );
   }
-}
+);
+
+StatefulEventDetails.displayName = 'StatefulEventDetails';
diff --git a/x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer.test.tsx b/x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer.test.tsx
index 7f5ebd8de35648..d85231b564da8a 100644
--- a/x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer.test.tsx
@@ -20,8 +20,17 @@ jest.mock('../../lib/settings/use_kibana_ui_setting');
 
 const from = 1566943856794;
 const to = 1566857456791;
-
+// Suppress warnings about "act" until async/await syntax is supported: https://github.com/facebook/react/issues/14769
+/* eslint-disable no-console */
+const originalError = console.error;
 describe('EventsViewer', () => {
+  beforeAll(() => {
+    console.error = jest.fn();
+  });
+
+  afterAll(() => {
+    console.error = originalError;
+  });
   test('it renders the "Showing..." subtitle with the expected event count', async () => {
     const wrapper = mount(
       <TestProviders>
@@ -41,7 +50,7 @@ describe('EventsViewer', () => {
 
     expect(
       wrapper
-        .find(`[data-test-subj="subtitle"]`)
+        .find(`[data-test-subj="header-panel-subtitle"]`)
         .first()
         .text()
     ).toEqual('Showing: 12 events');
diff --git a/x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer.tsx b/x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer.tsx
index 62e77aac15fd62..4299657e36dabc 100644
--- a/x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer.tsx
@@ -4,17 +4,18 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiFlexGroup, EuiPanel } from '@elastic/eui';
+import { EuiPanel } from '@elastic/eui';
 import { getOr, isEmpty } from 'lodash/fp';
 import React from 'react';
 import styled from 'styled-components';
 import { StaticIndexPattern } from 'ui/index_patterns';
 
-import { AutoSizer } from '../auto_sizer';
 import { BrowserFields } from '../../containers/source';
 import { TimelineQuery } from '../../containers/timeline';
 import { Direction } from '../../graphql/types';
 import { KqlMode } from '../../store/timeline/model';
+import { AutoSizer } from '../auto_sizer';
+import { HeaderPanel } from '../header_panel';
 import { ColumnHeader } from '../timeline/body/column_headers/column_header';
 import { defaultHeaders } from '../timeline/body/column_headers/default_headers';
 import { Sort } from '../timeline/body/sort';
@@ -23,29 +24,18 @@ import { DataProvider } from '../timeline/data_providers/data_provider';
 import { OnChangeItemsPerPage } from '../timeline/events';
 import { Footer, footerHeight } from '../timeline/footer';
 import { combineQueries } from '../timeline/helpers';
+import { TimelineRefetch } from '../timeline/refetch_timeline';
 import { isCompactFooter } from '../timeline/timeline';
 import { ManageTimelineContext } from '../timeline/timeline_context';
-
-import { EventsViewerHeader } from './events_viewer_header';
-import { TimelineRefetch } from '../timeline/refetch_timeline';
+import * as i18n from './translations';
 
 const DEFAULT_EVENTS_VIEWER_HEIGHT = 500;
 
 const WrappedByAutoSizer = styled.div`
   width: 100%;
 `; // required by AutoSizer
-
 WrappedByAutoSizer.displayName = 'WrappedByAutoSizer';
 
-const EventsViewerContainer = styled(EuiFlexGroup)`
-  overflow: hidden;
-  padding: 0 10px 0 12px;
-  user-select: none;
-  width: 100%;
-`;
-
-EventsViewerContainer.displayName = 'EventsViewerContainer';
-
 interface Props {
   browserFields: BrowserFields;
   columns: ColumnHeader[];
@@ -103,18 +93,14 @@ export const EventsViewer = React.memo<Props>(
       <EuiPanel data-test-subj="events-viewer-panel" grow={false}>
         <AutoSizer detectAnyWindowResize={true} content>
           {({ measureRef, content: { width = 0 } }) => (
-            <EventsViewerContainer
-              data-test-subj="events-viewer-container"
-              direction="column"
-              gutterSize="none"
-              justifyContent="flexStart"
-            >
+            <>
               <WrappedByAutoSizer innerRef={measureRef}>
                 <div
                   data-test-subj="events-viewer-measured"
                   style={{ height: '0px', width: '100%' }}
                 />
               </WrappedByAutoSizer>
+
               {combinedQueries != null ? (
                 <TimelineQuery
                   fields={columnsHeader.map(c => c.id)}
@@ -138,10 +124,13 @@ export const EventsViewer = React.memo<Props>(
                     totalCount = 0,
                   }) => (
                     <>
-                      <EventsViewerHeader
+                      <HeaderPanel
                         id={id}
                         showInspect={showInspect}
-                        totalCount={totalCount}
+                        subtitle={`${i18n.SHOWING}: ${totalCount.toLocaleString()} ${i18n.UNIT(
+                          totalCount
+                        )}`}
+                        title={i18n.EVENTS}
                       />
 
                       <div
@@ -156,6 +145,7 @@ export const EventsViewer = React.memo<Props>(
                             loading={loading}
                             refetch={refetch}
                           />
+
                           <StatefulBody
                             browserFields={browserFields}
                             data={events}
@@ -165,6 +155,7 @@ export const EventsViewer = React.memo<Props>(
                             sort={sort}
                             toggleColumn={toggleColumn}
                           />
+
                           <Footer
                             compact={isCompactFooter(width)}
                             getUpdatedAt={getUpdatedAt}
@@ -188,7 +179,7 @@ export const EventsViewer = React.memo<Props>(
                   )}
                 </TimelineQuery>
               ) : null}
-            </EventsViewerContainer>
+            </>
           )}
         </AutoSizer>
       </EuiPanel>
@@ -211,5 +202,4 @@ export const EventsViewer = React.memo<Props>(
     prevProps.start === nextProps.start &&
     prevProps.sort === nextProps.sort
 );
-
 EventsViewer.displayName = 'EventsViewer';
diff --git a/x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer_header.test.tsx b/x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer_header.test.tsx
deleted file mode 100644
index 84e7248869b2f4..00000000000000
--- a/x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer_header.test.tsx
+++ /dev/null
@@ -1,79 +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 { mount } from 'enzyme';
-import React from 'react';
-
-import { TestProviders } from '../../mock';
-import '../../mock/ui_settings';
-
-import { EventsViewerHeader } from './events_viewer_header';
-
-jest.mock('../../lib/settings/use_kibana_ui_setting');
-
-const totalCount = 30;
-
-describe('EventsViewerHeader', () => {
-  test('it renders the expected title', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <EventsViewerHeader id="test" showInspect={false} totalCount={totalCount} />
-      </TestProviders>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="panel_headline_title"]')
-        .first()
-        .text()
-    ).toEqual('Events');
-  });
-
-  test('it renders a transparent inspect button when showInspect is false', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <EventsViewerHeader id="test" showInspect={false} totalCount={totalCount} />
-      </TestProviders>
-    );
-
-    expect(
-      wrapper
-        .find(`[data-test-subj="transparent-inspect-container"]`)
-        .first()
-        .exists()
-    ).toBe(true);
-  });
-
-  test('it renders an opaque inspect button when showInspect is true', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <EventsViewerHeader id="test" showInspect={true} totalCount={totalCount} />
-      </TestProviders>
-    );
-
-    expect(
-      wrapper
-        .find(`[data-test-subj="opaque-inspect-container"]`)
-        .first()
-        .exists()
-    ).toBe(true);
-  });
-
-  test('it renders the expected totalCount', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <EventsViewerHeader id="test" showInspect={false} totalCount={totalCount} />
-      </TestProviders>
-    );
-
-    expect(
-      wrapper
-        .find(`[data-test-subj="subtitle"]`)
-        .first()
-        .text()
-    ).toEqual(`Showing: ${totalCount} events`);
-  });
-});
diff --git a/x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer_header.tsx b/x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer_header.tsx
deleted file mode 100644
index 048b92e91efd23..00000000000000
--- a/x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer_header.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import React from 'react';
-
-import { HeaderPanel } from '../header_panel';
-import { InspectButton } from '../inspect';
-
-import * as i18n from './translations';
-
-interface Props {
-  id: string;
-  showInspect: boolean;
-  totalCount: number;
-}
-
-export const EventsViewerHeader = React.memo<Props>(({ id, showInspect, totalCount }) => {
-  return (
-    <EuiFlexGroup
-      alignItems="center"
-      data-test-subj="events-viewer-header"
-      gutterSize="none"
-      justifyContent="spaceBetween"
-    >
-      <EuiFlexItem grow={false}>
-        <HeaderPanel
-          subtitle={`${i18n.SHOWING}: ${totalCount.toLocaleString()} ${i18n.UNIT(totalCount)}`}
-          title={i18n.EVENTS}
-        />
-      </EuiFlexItem>
-
-      <EuiFlexItem grow={false}>
-        <InspectButton
-          compact={true}
-          isDisabled={false}
-          inputId="global"
-          inspectIndex={0}
-          queryId={id}
-          show={showInspect}
-          title={i18n.EVENTS}
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  );
-});
-
-EventsViewerHeader.displayName = 'EventsViewerHeader';
diff --git a/x-pack/legacy/plugins/siem/public/components/events_viewer/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/events_viewer/index.test.tsx
index bef5e66faecd16..dc0e1288f40f83 100644
--- a/x-pack/legacy/plugins/siem/public/components/events_viewer/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/events_viewer/index.test.tsx
@@ -20,7 +20,17 @@ jest.mock('../../lib/settings/use_kibana_ui_setting');
 const from = 1566943856794;
 const to = 1566857456791;
 
+// Suppress warnings about "act" until async/await syntax is supported: https://github.com/facebook/react/issues/14769
+/* eslint-disable no-console */
+const originalError = console.error;
 describe('StatefulEventsViewer', () => {
+  beforeAll(() => {
+    console.error = jest.fn();
+  });
+
+  afterAll(() => {
+    console.error = originalError;
+  });
   test('it renders the events viewer', async () => {
     const wrapper = mount(
       <TestProviders>
diff --git a/x-pack/legacy/plugins/siem/public/components/events_viewer/index.tsx b/x-pack/legacy/plugins/siem/public/components/events_viewer/index.tsx
index 52b724525f5a94..d572d6dd4913b7 100644
--- a/x-pack/legacy/plugins/siem/public/components/events_viewer/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/events_viewer/index.tsx
@@ -87,7 +87,7 @@ const StatefulEventsViewerComponent = React.memo<Props>(
     updateItemsPerPage,
     upsertColumn,
   }) => {
-    const [showInspect, setShowInspect] = useState<boolean>(false);
+    const [showInspect, setShowInspect] = useState(false);
 
     useEffect(() => {
       if (createTimeline != null) {
diff --git a/x-pack/legacy/plugins/siem/public/components/field_renderers/field_renderers.tsx b/x-pack/legacy/plugins/siem/public/components/field_renderers/field_renderers.tsx
index 7478cbc055d8f7..c7912777c653b9 100644
--- a/x-pack/legacy/plugins/siem/public/components/field_renderers/field_renderers.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/field_renderers/field_renderers.tsx
@@ -5,11 +5,11 @@
  */
 
 import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiPopover, EuiText } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { getOr } from 'lodash/fp';
 import React, { Fragment, useState } from 'react';
-
-import { FormattedMessage } from '@kbn/i18n/react';
 import { pure } from 'recompose';
+
 import {
   AutonomousSystem,
   FlowTarget,
@@ -17,14 +17,13 @@ import {
   IpOverviewData,
   Overview,
 } from '../../graphql/types';
+import { escapeDataProviderId } from '../drag_and_drop/helpers';
 import { DefaultDraggable } from '../draggables';
 import { getEmptyTagValue } from '../empty_value';
 import { FormattedDate } from '../formatted_date';
 import { HostDetailsLink, ReputationLink, VirusTotalLink, WhoIsLink } from '../links';
-
-import * as i18n from '../page/network/ip_overview/translations';
-import { escapeDataProviderId } from '../drag_and_drop/helpers';
 import { Spacer } from '../page';
+import * as i18n from '../page/network/ip_overview/translations';
 
 export const IpOverviewId = 'ip-overview';
 
diff --git a/x-pack/legacy/plugins/siem/public/components/fields_browser/category_columns.tsx b/x-pack/legacy/plugins/siem/public/components/fields_browser/category_columns.tsx
index 8fab6ec14688a8..2581fba75da1e5 100644
--- a/x-pack/legacy/plugins/siem/public/components/fields_browser/category_columns.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/fields_browser/category_columns.tsx
@@ -18,13 +18,12 @@ import styled from 'styled-components';
 
 import { BrowserFields } from '../../containers/source';
 import { getColumnsWithTimestamp } from '../event_details/helpers';
+import { CountBadge } from '../page';
 import { OnUpdateColumns } from '../timeline/events';
+import { TimelineContext } from '../timeline/timeline_context';
 import { WithHoverActions } from '../with_hover_actions';
-
-import * as i18n from './translations';
-import { CountBadge } from '../page';
 import { LoadingSpinner, getCategoryPaneCategoryClassName, getFieldCount } from './helpers';
-import { TimelineContext } from '../timeline/timeline_context';
+import * as i18n from './translations';
 
 const CategoryName = styled.span<{ bold: boolean }>`
   font-weight: ${({ bold }) => (bold ? 'bold' : 'normal')};
diff --git a/x-pack/legacy/plugins/siem/public/components/fields_browser/field_browser.tsx b/x-pack/legacy/plugins/siem/public/components/fields_browser/field_browser.tsx
index f356c250eae5c9..fb47672512de56 100644
--- a/x-pack/legacy/plugins/siem/public/components/fields_browser/field_browser.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/fields_browser/field_browser.tsx
@@ -4,14 +4,16 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { noop } from 'lodash/fp';
 import { EuiFlexGroup, EuiFlexItem, EuiOutsideClickDetector } from '@elastic/eui';
-import * as React from 'react';
-import styled from 'styled-components';
+import React, { useEffect } from 'react';
+import { noop } from 'lodash/fp';
+import styled, { css } from 'styled-components';
 
 import { BrowserFields } from '../../containers/source';
 import { ColumnHeader } from '../timeline/body/column_headers/column_header';
-
+import { CategoriesPane } from './categories_pane';
+import { FieldsPane } from './fields_pane';
+import { Header } from './header';
 import {
   CATEGORY_PANE_WIDTH,
   FIELDS_PANE_WIDTH,
@@ -20,27 +22,26 @@ import {
   getFieldBrowserSearchInputClassName,
   PANES_FLEX_GROUP_WIDTH,
 } from './helpers';
-import { FieldBrowserProps, OnFieldSelected, OnHideFieldBrowser } from './types';
-import { Header } from './header';
-import { CategoriesPane } from './categories_pane';
-import { FieldsPane } from './fields_pane';
+import { FieldBrowserProps, OnHideFieldBrowser } from './types';
+
 const FieldsBrowserContainer = styled.div<{ width: number }>`
-  background-color: ${props => props.theme.eui.euiColorLightestShade};
-  border: 1px solid ${({ theme }) => theme.eui.euiColorMediumShade};
-  border-radius: 4px;
-  padding: 8px 8px 16px 8px;
-  position: absolute;
-  top: 25px;
-  ${({ width }) => `width: ${width}px`};
-  z-index: 9990;
+  ${({ theme, width }) => css`
+    background-color: ${theme.eui.euiColorLightestShade};
+    border: ${theme.eui.euiBorderWidthThin} solid ${theme.eui.euiColorMediumShade};
+    border-radius: ${theme.eui.euiBorderRadius};
+    left: 0;
+    padding: ${theme.eui.paddingSizes.s} ${theme.eui.paddingSizes.s} ${theme.eui.paddingSizes.m};
+    position: absolute;
+    top: calc(100% + ${theme.eui.euiSize});
+    width: ${width}px;
+    z-index: 9990;
+  `}
 `;
-
 FieldsBrowserContainer.displayName = 'FieldsBrowserContainer';
 
 const PanesFlexGroup = styled(EuiFlexGroup)`
   width: ${PANES_FLEX_GROUP_WIDTH}px;
 `;
-
 PanesFlexGroup.displayName = 'PanesFlexGroup';
 
 type Props = Pick<
@@ -101,34 +102,80 @@ type Props = Pick<
  * This component has no internal state, but it uses lifecycle methods to
  * set focus to the search input, scroll to the selected category, etc
  */
-export class FieldsBrowser extends React.PureComponent<Props> {
-  public componentDidMount() {
-    this.scrollViews();
-    this.focusInput();
-  }
+export const FieldsBrowser = React.memo<Props>(
+  ({
+    browserFields,
+    columnHeaders,
+    filteredBrowserFields,
+    isEventViewer,
+    isSearching,
+    onCategorySelected,
+    onFieldSelected,
+    onHideFieldBrowser,
+    onSearchInputChange,
+    onOutsideClick,
+    onUpdateColumns,
+    searchInput,
+    selectedCategoryId,
+    timelineId,
+    toggleColumn,
+    width,
+  }) => {
+    /** Focuses the input that filters the field browser */
+    function focusInput() {
+      const elements = document.getElementsByClassName(
+        getFieldBrowserSearchInputClassName(timelineId)
+      );
 
-  public componentDidUpdate() {
-    this.scrollViews();
-    this.focusInput(); // always re-focus the input to enable additional filtering
-  }
+      if (elements.length > 0) {
+        (elements[0] as HTMLElement).focus(); // this cast is required because focus() does not exist on every `Element` returned by `getElementsByClassName`
+      }
+    }
+
+    /** Invoked when the user types in the input to filter the field browser */
+    function onInputChange(event: React.ChangeEvent<HTMLInputElement>) {
+      onSearchInputChange(event.target.value);
+    }
+
+    function selectFieldAndHide(fieldId: string) {
+      if (onFieldSelected != null) {
+        onFieldSelected(fieldId);
+      }
 
-  public render() {
-    const {
-      columnHeaders,
-      browserFields,
-      filteredBrowserFields,
-      searchInput,
-      isEventViewer,
-      isSearching,
-      onCategorySelected,
-      onFieldSelected,
-      onOutsideClick,
-      onUpdateColumns,
-      selectedCategoryId,
-      timelineId,
-      toggleColumn,
-      width,
-    } = this.props;
+      onHideFieldBrowser();
+    }
+
+    function scrollViews() {
+      if (selectedCategoryId !== '') {
+        const categoryPaneTitles = document.getElementsByClassName(
+          getCategoryPaneCategoryClassName({
+            categoryId: selectedCategoryId,
+            timelineId,
+          })
+        );
+
+        if (categoryPaneTitles.length > 0) {
+          categoryPaneTitles[0].scrollIntoView();
+        }
+
+        const fieldPaneTitles = document.getElementsByClassName(
+          getFieldBrowserCategoryTitleClassName({
+            categoryId: selectedCategoryId,
+            timelineId,
+          })
+        );
+
+        if (fieldPaneTitles.length > 0) {
+          fieldPaneTitles[0].scrollIntoView();
+        }
+      }
+
+      focusInput(); // always re-focus the input to enable additional filtering
+    }
+
+    useEffect(() => {
+      scrollViews();
+    }, [selectedCategoryId, timelineId]);
 
     return (
       <EuiOutsideClickDetector
@@ -143,7 +190,7 @@ export class FieldsBrowser extends React.PureComponent<Props> {
             isEventViewer={isEventViewer}
             isSearching={isSearching}
             onOutsideClick={onOutsideClick}
-            onSearchInputChange={this.onInputChange}
+            onSearchInputChange={onInputChange}
             onUpdateColumns={onUpdateColumns}
             searchInput={searchInput}
             timelineId={timelineId}
@@ -169,7 +216,7 @@ export class FieldsBrowser extends React.PureComponent<Props> {
                 data-test-subj="fields-pane"
                 filteredBrowserFields={filteredBrowserFields}
                 onCategorySelected={onCategorySelected}
-                onFieldSelected={this.selectFieldAndHide}
+                onFieldSelected={selectFieldAndHide}
                 onUpdateColumns={onUpdateColumns}
                 searchInput={searchInput}
                 selectedCategoryId={selectedCategoryId}
@@ -183,59 +230,4 @@ export class FieldsBrowser extends React.PureComponent<Props> {
       </EuiOutsideClickDetector>
     );
   }
-
-  /** Focuses the input that filters the field browser */
-  private focusInput = () => {
-    const elements = document.getElementsByClassName(
-      getFieldBrowserSearchInputClassName(this.props.timelineId)
-    );
-
-    if (elements.length > 0) {
-      (elements[0] as HTMLElement).focus(); // this cast is required because focus() does not exist on every `Element` returned by `getElementsByClassName`
-    }
-  };
-
-  /** Invoked when the user types in the input to filter the field browser */
-  private onInputChange = (event: React.ChangeEvent<HTMLInputElement>) =>
-    this.props.onSearchInputChange(event.target.value);
-
-  private selectFieldAndHide: OnFieldSelected = (fieldId: string) => {
-    const { onFieldSelected, onHideFieldBrowser } = this.props;
-
-    if (onFieldSelected != null) {
-      onFieldSelected(fieldId);
-    }
-
-    onHideFieldBrowser();
-  };
-
-  private scrollViews = () => {
-    const { selectedCategoryId, timelineId } = this.props;
-
-    if (this.props.selectedCategoryId !== '') {
-      const categoryPaneTitles = document.getElementsByClassName(
-        getCategoryPaneCategoryClassName({
-          categoryId: selectedCategoryId,
-          timelineId,
-        })
-      );
-
-      if (categoryPaneTitles.length > 0) {
-        categoryPaneTitles[0].scrollIntoView();
-      }
-
-      const fieldPaneTitles = document.getElementsByClassName(
-        getFieldBrowserCategoryTitleClassName({
-          categoryId: selectedCategoryId,
-          timelineId,
-        })
-      );
-
-      if (fieldPaneTitles.length > 0) {
-        fieldPaneTitles[0].scrollIntoView();
-      }
-    }
-
-    this.focusInput(); // always re-focus the input to enable additional filtering
-  };
-}
+);
diff --git a/x-pack/legacy/plugins/siem/public/components/fields_browser/field_items.tsx b/x-pack/legacy/plugins/siem/public/components/fields_browser/field_items.tsx
index 5cb96246de7d17..e909a983deedb1 100644
--- a/x-pack/legacy/plugins/siem/public/components/fields_browser/field_items.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/fields_browser/field_items.tsx
@@ -11,22 +11,20 @@ import { Draggable } from 'react-beautiful-dnd';
 import styled from 'styled-components';
 
 import { BrowserField, BrowserFields } from '../../containers/source';
-import { DraggableFieldBadge } from '../draggables/field_badge';
 import { DragEffects } from '../drag_and_drop/draggable_wrapper';
 import { DroppableWrapper } from '../drag_and_drop/droppable_wrapper';
-import { getColumnsWithTimestamp, getExampleText, getIconFromType } from '../event_details/helpers';
 import { getDraggableFieldId, getDroppableId, DRAG_TYPE_FIELD } from '../drag_and_drop/helpers';
+import { DraggableFieldBadge } from '../draggables/field_badge';
 import { getEmptyValue } from '../empty_value';
-import { OnUpdateColumns } from '../timeline/events';
+import { getColumnsWithTimestamp, getExampleText, getIconFromType } from '../event_details/helpers';
 import { SelectableText } from '../selectable_text';
+import { ColumnHeader } from '../timeline/body/column_headers/column_header';
+import { defaultColumnHeaderType } from '../timeline/body/column_headers/default_headers';
+import { DEFAULT_COLUMN_MIN_WIDTH } from '../timeline/body/helpers';
+import { OnUpdateColumns } from '../timeline/events';
 import { TruncatableText } from '../truncatable_text';
-
 import { FieldName } from './field_name';
-
 import * as i18n from './translations';
-import { ColumnHeader } from '../timeline/body/column_headers/column_header';
-import { DEFAULT_COLUMN_MIN_WIDTH } from '../timeline/body/helpers';
-import { defaultColumnHeaderType } from '../timeline/body/column_headers/default_headers';
 
 const TypeIcon = styled(EuiIcon)`
   margin-left: 5px;
@@ -179,11 +177,11 @@ export const getFieldColumns = () => [
     field: 'description',
     name: i18n.DESCRIPTION,
     render: (description: string) => (
-      <EuiToolTip position="top" content={description}>
-        <TruncatableText size="xs" width="390px">
-          {description}
-        </TruncatableText>
-      </EuiToolTip>
+      <TruncatableText>
+        <EuiToolTip position="top" content={description}>
+          <>{description}</>
+        </EuiToolTip>
+      </TruncatableText>
     ),
     sortable: true,
     truncateText: true,
diff --git a/x-pack/legacy/plugins/siem/public/components/fields_browser/field_name.tsx b/x-pack/legacy/plugins/siem/public/components/fields_browser/field_name.tsx
index a998c057661eab..9c2cf2cb0e0b28 100644
--- a/x-pack/legacy/plugins/siem/public/components/fields_browser/field_name.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/fields_browser/field_name.tsx
@@ -21,11 +21,10 @@ import styled, { css } from 'styled-components';
 import { WithCopyToClipboard } from '../../lib/clipboard/with_copy_to_clipboard';
 import { ColumnHeader } from '../timeline/body/column_headers/column_header';
 import { OnUpdateColumns } from '../timeline/events';
+import { TimelineContext } from '../timeline/timeline_context';
 import { WithHoverActions } from '../with_hover_actions';
-
 import { LoadingSpinner } from './helpers';
 import * as i18n from './translations';
-import { TimelineContext } from '../timeline/timeline_context';
 
 /**
  * The name of a (draggable) field
diff --git a/x-pack/legacy/plugins/siem/public/components/fields_browser/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/fields_browser/index.test.tsx
index bcff95dc8358e2..4c9c1fc4147ab7 100644
--- a/x-pack/legacy/plugins/siem/public/components/fields_browser/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/fields_browser/index.test.tsx
@@ -38,7 +38,7 @@ describe('StatefulFieldsBrowser', () => {
         .find('[data-test-subj="show-field-browser"]')
         .first()
         .text()
-    ).toEqual('Fields');
+    ).toEqual('Columns');
   });
 
   describe('toggleShow', () => {
diff --git a/x-pack/legacy/plugins/siem/public/components/fields_browser/index.tsx b/x-pack/legacy/plugins/siem/public/components/fields_browser/index.tsx
index 29c2c4a2c4e0b1..7d21e1f44d04b4 100644
--- a/x-pack/legacy/plugins/siem/public/components/fields_browser/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/fields_browser/index.tsx
@@ -4,54 +4,29 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { ActionCreator } from 'typescript-fsa';
-import { connect } from 'react-redux';
-import { EuiButton, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
+import { EuiButtonEmpty, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
 import { noop } from 'lodash/fp';
-import * as React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { connect } from 'react-redux';
 import styled from 'styled-components';
+import { ActionCreator } from 'typescript-fsa';
 
 import { BrowserFields } from '../../containers/source';
+import { timelineActions } from '../../store/actions';
 import { ColumnHeader } from '../timeline/body/column_headers/column_header';
 import { DEFAULT_CATEGORY_NAME } from '../timeline/body/column_headers/default_headers';
-import { OnUpdateColumns } from '../timeline/events';
-
 import { FieldsBrowser } from './field_browser';
-import { FieldBrowserProps } from './types';
 import { filterBrowserFieldsByFieldName, mergeBrowserFieldsWithDefaultCategory } from './helpers';
-
 import * as i18n from './translations';
-import { timelineActions } from '../../store/actions';
+import { FieldBrowserProps } from './types';
 
 const fieldsButtonClassName = 'fields-button';
 
 /** wait this many ms after the user completes typing before applying the filter input */
 const INPUT_TIMEOUT = 250;
 
-interface State {
-  /** all field names shown in the field browser must contain this string (when specified) */
-  filterInput: string;
-  /** all fields in this collection have field names that match the filterInput */
-  filteredBrowserFields: BrowserFields | null;
-  /** when true, show a spinner in the input to indicate the field browser is searching for matching field names */
-  isSearching: boolean;
-  /** this category will be displayed in the right-hand pane of the field browser */
-  selectedCategoryId: string;
-  /** show the field browser */
-  show: boolean;
-}
-
-const FieldsBrowserButtonContainer = styled.div<{ show: boolean }>`
-  ${({ show }) => (show ? 'position: absolute;' : '')}
-
-  .${fieldsButtonClassName} {
-    border-color: ${({ theme }) => theme.eui.euiColorLightShade};
-    color: ${({ theme }) => theme.eui.euiColorDarkestShade};
-    font-size: 14px;
-    margin: 1px 5px 2px 0;
-    ${({ show }) => (show ? 'position: absolute;' : '')}
-    ${({ show }) => (show ? 'top: -15px;' : '')}
-  }
+const FieldsBrowserButtonContainer = styled.div`
+  position: relative;
 `;
 
 FieldsBrowserButtonContainer.displayName = 'FieldsBrowserButtonContainer';
@@ -71,52 +46,110 @@ interface DispatchProps {
 /**
  * Manages the state of the field browser
  */
-export class StatefulFieldsBrowserComponent extends React.PureComponent<
-  FieldBrowserProps & DispatchProps,
-  State
-> {
-  /** tracks the latest timeout id from `setTimeout`*/
-  private inputTimeoutId: number = 0;
+export const StatefulFieldsBrowserComponent = React.memo<FieldBrowserProps & DispatchProps>(
+  ({
+    columnHeaders,
+    browserFields,
+    height,
+    isEventViewer = false,
+    onFieldSelected,
+    onUpdateColumns,
+    timelineId,
+    toggleColumn,
+    width,
+  }) => {
+    /** tracks the latest timeout id from `setTimeout`*/
+    const inputTimeoutId = useRef(0);
+
+    /** all field names shown in the field browser must contain this string (when specified) */
+    const [filterInput, setFilterInput] = useState('');
+    /** all fields in this collection have field names that match the filterInput */
+    const [filteredBrowserFields, setFilteredBrowserFields] = useState<BrowserFields | null>(null);
+    /** when true, show a spinner in the input to indicate the field browser is searching for matching field names */
+    const [isSearching, setIsSearching] = useState(false);
+    /** this category will be displayed in the right-hand pane of the field browser */
+    const [selectedCategoryId, setSelectedCategoryId] = useState(DEFAULT_CATEGORY_NAME);
+    /** show the field browser */
+    const [show, setShow] = useState(false);
+    useEffect(() => {
+      return () => {
+        if (inputTimeoutId.current !== 0) {
+          // ⚠️ mutation: cancel any remaining timers and zero-out the timer id:
+          clearTimeout(inputTimeoutId.current);
+          inputTimeoutId.current = 0;
+        }
+      };
+    }, []);
+
+    /** Shows / hides the field browser */
+    function toggleShow() {
+      setShow(!show);
+    }
 
-  constructor(props: FieldBrowserProps) {
-    super(props);
+    /** Invoked when the user types in the filter input */
+    function updateFilter(newFilterInput: string) {
+      setFilterInput(newFilterInput);
+      setIsSearching(true);
 
-    this.state = {
-      filterInput: '',
-      filteredBrowserFields: null,
-      isSearching: false,
-      selectedCategoryId: DEFAULT_CATEGORY_NAME,
-      show: false,
-    };
-  }
+      if (inputTimeoutId.current !== 0) {
+        clearTimeout(inputTimeoutId.current); // ⚠️ mutation: cancel any previous timers
+      }
+
+      // ⚠️ mutation: schedule a new timer that will apply the filter when it fires:
+      inputTimeoutId.current = window.setTimeout(() => {
+        const newFilteredBrowserFields = filterBrowserFieldsByFieldName({
+          browserFields: mergeBrowserFieldsWithDefaultCategory(browserFields),
+          substring: filterInput,
+        });
+
+        setFilteredBrowserFields(newFilteredBrowserFields);
+        setIsSearching(false);
+
+        const newSelectedCategoryId =
+          filterInput === '' || Object.keys(newFilteredBrowserFields).length === 0
+            ? DEFAULT_CATEGORY_NAME
+            : Object.keys(newFilteredBrowserFields)
+                .sort()
+                .reduce<string>(
+                  (selected, category) =>
+                    newFilteredBrowserFields[category].fields != null &&
+                    newFilteredBrowserFields[selected].fields != null &&
+                    newFilteredBrowserFields[category].fields!.length >
+                      newFilteredBrowserFields[selected].fields!.length
+                      ? category
+                      : selected,
+                  Object.keys(newFilteredBrowserFields)[0]
+                );
+        setSelectedCategoryId(newSelectedCategoryId);
+      }, INPUT_TIMEOUT);
+    }
 
-  public componentWillUnmount() {
-    if (this.inputTimeoutId !== 0) {
-      // ⚠️ mutation: cancel any remaining timers and zero-out the timer id:
-      clearTimeout(this.inputTimeoutId);
-      this.inputTimeoutId = 0;
+    /**
+     * Invoked when the user clicks a category name in the left-hand side of
+     * the field browser
+     */
+    function updateSelectedCategoryId(categoryId: string) {
+      setSelectedCategoryId(categoryId);
     }
-  }
 
-  public render() {
-    const {
-      columnHeaders,
-      browserFields,
-      height,
-      isEventViewer = false,
-      onFieldSelected,
-      timelineId,
-      toggleColumn,
-      width,
-    } = this.props;
-    const {
-      filterInput,
-      filteredBrowserFields,
-      isSearching,
-      selectedCategoryId,
-      show,
-    } = this.state;
+    /**
+     * Invoked when the user clicks on the context menu to view a category's
+     * columns in the timeline, this function dispatches the action that
+     * causes the timeline display those columns.
+     */
+    function updateColumnsAndSelectCategoryId(columns: ColumnHeader[]) {
+      onUpdateColumns(columns); // show the category columns in the timeline
+    }
 
+    /** Invoked when the field browser should be hidden */
+    function hideFieldBrowser() {
+      setFilterInput('');
+      setFilterInput('');
+      setFilteredBrowserFields(null);
+      setIsSearching(false);
+      setSelectedCategoryId(DEFAULT_CATEGORY_NAME);
+      setShow(false);
+    }
     // only merge in the default category if the field browser is visible
     const browserFieldsWithDefaultCategory = show
       ? mergeBrowserFieldsWithDefaultCategory(browserFields)
@@ -124,28 +157,26 @@ export class StatefulFieldsBrowserComponent extends React.PureComponent<
 
     return (
       <>
-        <FieldsBrowserButtonContainer data-test-subj="fields-browser-button-container" show={show}>
+        <FieldsBrowserButtonContainer data-test-subj="fields-browser-button-container">
           <EuiToolTip content={i18n.CUSTOMIZE_COLUMNS}>
             {isEventViewer ? (
               <EuiButtonIcon
                 aria-label={i18n.CUSTOMIZE_COLUMNS}
                 className={fieldsButtonClassName}
                 data-test-subj="show-field-browser-gear"
-                iconType="gear"
-                onClick={this.toggleShow}
+                iconType="list"
+                onClick={toggleShow}
               />
             ) : (
-              <EuiButton
+              <EuiButtonEmpty
                 className={fieldsButtonClassName}
-                color="primary"
                 data-test-subj="show-field-browser"
-                iconSide="right"
-                iconType="arrowDown"
-                onClick={this.toggleShow}
-                size="s"
+                iconType="list"
+                onClick={toggleShow}
+                size="xs"
               >
                 {i18n.FIELDS}
-              </EuiButton>
+              </EuiButtonEmpty>
             )}
           </EuiToolTip>
 
@@ -161,12 +192,12 @@ export class StatefulFieldsBrowserComponent extends React.PureComponent<
               height={height}
               isEventViewer={isEventViewer}
               isSearching={isSearching}
-              onCategorySelected={this.updateSelectedCategoryId}
+              onCategorySelected={updateSelectedCategoryId}
               onFieldSelected={onFieldSelected}
-              onHideFieldBrowser={this.hideFieldBrowser}
-              onOutsideClick={show ? this.hideFieldBrowser : noop}
-              onSearchInputChange={this.updateFilter}
-              onUpdateColumns={this.updateColumnsAndSelectCategoryId}
+              onHideFieldBrowser={hideFieldBrowser}
+              onOutsideClick={show ? hideFieldBrowser : noop}
+              onSearchInputChange={updateFilter}
+              onUpdateColumns={updateColumnsAndSelectCategoryId}
               searchInput={filterInput}
               selectedCategoryId={selectedCategoryId}
               timelineId={timelineId}
@@ -178,84 +209,9 @@ export class StatefulFieldsBrowserComponent extends React.PureComponent<
       </>
     );
   }
+);
 
-  /** Shows / hides the field browser */
-  private toggleShow = () => {
-    this.setState(({ show }) => ({
-      show: !show,
-    }));
-  };
-
-  /** Invoked when the user types in the filter input */
-  private updateFilter = (filterInput: string): void => {
-    this.setState({
-      filterInput,
-      isSearching: true,
-    });
-
-    if (this.inputTimeoutId !== 0) {
-      clearTimeout(this.inputTimeoutId); // ⚠️ mutation: cancel any previous timers
-    }
-
-    // ⚠️ mutation: schedule a new timer that will apply the filter when it fires:
-    this.inputTimeoutId = window.setTimeout(() => {
-      const filteredBrowserFields = filterBrowserFieldsByFieldName({
-        browserFields: mergeBrowserFieldsWithDefaultCategory(this.props.browserFields),
-        substring: this.state.filterInput,
-      });
-
-      this.setState(currentState => ({
-        filteredBrowserFields,
-        isSearching: false,
-        selectedCategoryId:
-          currentState.filterInput === '' || Object.keys(filteredBrowserFields).length === 0
-            ? DEFAULT_CATEGORY_NAME
-            : Object.keys(filteredBrowserFields)
-                .sort()
-                .reduce<string>(
-                  (selected, category) =>
-                    filteredBrowserFields[category].fields != null &&
-                    filteredBrowserFields[selected].fields != null &&
-                    filteredBrowserFields[category].fields!.length >
-                      filteredBrowserFields[selected].fields!.length
-                      ? category
-                      : selected,
-                  Object.keys(filteredBrowserFields)[0]
-                ),
-      }));
-    }, INPUT_TIMEOUT);
-  };
-
-  /**
-   * Invoked when the user clicks a category name in the left-hand side of
-   * the field browser
-   */
-  private updateSelectedCategoryId = (categoryId: string): void => {
-    this.setState({
-      selectedCategoryId: categoryId,
-    });
-  };
-
-  /**
-   * Invoked when the user clicks on the context menu to view a category's
-   * columns in the timeline, this function dispatches the action that
-   * causes the timeline display those columns.
-   */
-  private updateColumnsAndSelectCategoryId: OnUpdateColumns = (columns: ColumnHeader[]): void => {
-    this.props.onUpdateColumns(columns); // show the category columns in the timeline
-  };
-
-  /** Invoked when the field browser should be hidden */
-  private hideFieldBrowser = () => {
-    this.setState({
-      filterInput: '',
-      filteredBrowserFields: null,
-      isSearching: false,
-      selectedCategoryId: DEFAULT_CATEGORY_NAME,
-      show: false,
-    });
-  };
-}
+StatefulFieldsBrowserComponent.displayName = 'StatefulFieldsBrowserComponent';
 
 export const StatefulFieldsBrowser = connect(
   null,
diff --git a/x-pack/legacy/plugins/siem/public/components/fields_browser/translations.ts b/x-pack/legacy/plugins/siem/public/components/fields_browser/translations.ts
index 9446fe1b61bda7..5365fd05b9f750 100644
--- a/x-pack/legacy/plugins/siem/public/components/fields_browser/translations.ts
+++ b/x-pack/legacy/plugins/siem/public/components/fields_browser/translations.ts
@@ -37,7 +37,7 @@ export const FIELD = i18n.translate('xpack.siem.fieldBrowser.fieldLabel', {
 });
 
 export const FIELDS = i18n.translate('xpack.siem.fieldBrowser.fieldsTitle', {
-  defaultMessage: 'Fields',
+  defaultMessage: 'Columns',
 });
 
 export const FIELDS_COUNT = (totalCount: number) =>
diff --git a/x-pack/legacy/plugins/siem/public/components/filters_global/filters_global.tsx b/x-pack/legacy/plugins/siem/public/components/filters_global/filters_global.tsx
index 2283c8c84137f5..0e052fd4196116 100644
--- a/x-pack/legacy/plugins/siem/public/components/filters_global/filters_global.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/filters_global/filters_global.tsx
@@ -64,9 +64,9 @@ export const FiltersGlobal = pure<FiltersGlobalProps>(({ children }) => (
     {({ style, isSticky }) => (
       <Aside isSticky={isSticky} style={style}>
         <EuiFlexGroup>
-          <EuiFlexItem grow={8}>{children}</EuiFlexItem>
+          <EuiFlexItem grow={7}>{children}</EuiFlexItem>
 
-          <FlexItemWithDatePickerFix grow={4} data-test-subj="globalDatePicker">
+          <FlexItemWithDatePickerFix grow={5} data-test-subj="globalDatePicker">
             <SuperDatePicker id="global" />
           </FlexItemWithDatePickerFix>
         </EuiFlexGroup>
diff --git a/x-pack/legacy/plugins/siem/public/components/flyout/button/index.tsx b/x-pack/legacy/plugins/siem/public/components/flyout/button/index.tsx
index de1242e2f00d38..fee4f25f9e2559 100644
--- a/x-pack/legacy/plugins/siem/public/components/flyout/button/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/flyout/button/index.tsx
@@ -5,6 +5,7 @@
  */
 
 import { EuiNotificationBadge, EuiIcon, EuiButton } from '@elastic/eui';
+import { rgba } from 'polished';
 import * as React from 'react';
 import styled from 'styled-components';
 
@@ -12,8 +13,6 @@ import { DroppableWrapper } from '../../drag_and_drop/droppable_wrapper';
 import {
   droppableTimelineFlyoutButtonPrefix,
   IS_DRAGGING_CLASS_NAME,
-  TEN_PERCENT_ALPHA_HEX_SUFFIX,
-  TWENTY_PERCENT_ALPHA_HEX_SUFFIX,
 } from '../../drag_and_drop/helpers';
 import { DataProvider } from '../../timeline/data_providers/data_provider';
 
@@ -59,8 +58,7 @@ const Container = styled.div`
 
   .${IS_DRAGGING_CLASS_NAME} & .${NOT_READY_TO_DROP_CLASS_NAME} {
     color: ${({ theme }) => theme.eui.euiColorSuccess};
-    background: ${({ theme }) =>
-      `${theme.eui.euiColorSuccess}${TEN_PERCENT_ALPHA_HEX_SUFFIX} !important`};
+    background: ${({ theme }) => rgba(theme.eui.euiColorSuccess, 0.1)} !important;
     border: 1px solid ${({ theme }) => theme.eui.euiColorSuccess};
     border-bottom: none;
     text-decoration: none;
@@ -68,8 +66,7 @@ const Container = styled.div`
 
   .${READY_TO_DROP_CLASS_NAME} {
     color: ${({ theme }) => theme.eui.euiColorSuccess};
-    background: ${({ theme }) =>
-      `${theme.eui.euiColorSuccess}${TWENTY_PERCENT_ALPHA_HEX_SUFFIX} !important`};
+    background: ${({ theme }) => rgba(theme.eui.euiColorSuccess, 0.2)} !important;
     border: 1px solid ${({ theme }) => theme.eui.euiColorSuccess};
     border-bottom: none;
     text-decoration: none;
diff --git a/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.tsx b/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.tsx
index 15ce42c6a16b64..ceaff289f776cb 100644
--- a/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.tsx
@@ -111,18 +111,30 @@ const FlyoutHeaderWithCloseButton = React.memo<{
 
 FlyoutHeaderWithCloseButton.displayName = 'FlyoutHeaderWithCloseButton';
 
-class FlyoutPaneComponent extends React.PureComponent<Props> {
-  public render() {
-    const {
-      children,
-      flyoutHeight,
-      headerHeight,
-      onClose,
-      timelineId,
-      usersViewing,
-      width,
-    } = this.props;
-
+const FlyoutPaneComponent = React.memo<Props>(
+  ({
+    applyDeltaToWidth,
+    children,
+    flyoutHeight,
+    headerHeight,
+    onClose,
+    timelineId,
+    usersViewing,
+    width,
+  }) => {
+    const renderFlyout = () => <></>;
+
+    const onResize: OnResize = ({ delta, id }) => {
+      const bodyClientWidthPixels = document.body.clientWidth;
+
+      applyDeltaToWidth({
+        bodyClientWidthPixels,
+        delta,
+        id,
+        maxWidthPercent,
+        minWidthPixels,
+      });
+    };
     return (
       <EuiFlyoutContainer headerHeight={headerHeight} data-test-subj="flyout-pane" width={width}>
         <EuiFlyout
@@ -139,8 +151,8 @@ class FlyoutPaneComponent extends React.PureComponent<Props> {
               <TimelineResizeHandle data-test-subj="flyout-resize-handle" height={flyoutHeight} />
             }
             id={timelineId}
-            onResize={this.onResize}
-            render={this.renderFlyout}
+            onResize={onResize}
+            render={renderFlyout}
           />
           <EuiFlyoutHeader
             className="timeline-flyout-header"
@@ -160,23 +172,9 @@ class FlyoutPaneComponent extends React.PureComponent<Props> {
       </EuiFlyoutContainer>
     );
   }
+);
 
-  private renderFlyout = () => <></>;
-
-  private onResize: OnResize = ({ delta, id }) => {
-    const { applyDeltaToWidth } = this.props;
-
-    const bodyClientWidthPixels = document.body.clientWidth;
-
-    applyDeltaToWidth({
-      bodyClientWidthPixels,
-      delta,
-      id,
-      maxWidthPercent,
-      minWidthPixels,
-    });
-  };
-}
+FlyoutPaneComponent.displayName = 'FlyoutPaneComponent';
 
 export const Pane = connect(
   null,
diff --git a/x-pack/legacy/plugins/siem/public/components/formatted_ip/index.tsx b/x-pack/legacy/plugins/siem/public/components/formatted_ip/index.tsx
index 12701a0e8161ba..81f5cbfe2308be 100644
--- a/x-pack/legacy/plugins/siem/public/components/formatted_ip/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/formatted_ip/index.tsx
@@ -12,10 +12,9 @@ import { DragEffects, DraggableWrapper } from '../drag_and_drop/draggable_wrappe
 import { escapeDataProviderId } from '../drag_and_drop/helpers';
 import { getOrEmptyTagFromValue } from '../empty_value';
 import { IPDetailsLink } from '../links';
+import { parseQueryValue } from '../timeline/body/renderers/parse_query_value';
 import { DataProvider, IS_OPERATOR } from '../timeline/data_providers/data_provider';
 import { Provider } from '../timeline/data_providers/provider';
-import { TruncatableText } from '../truncatable_text';
-import { parseQueryValue } from '../timeline/body/renderers/parse_query_value';
 
 const getUniqueId = ({
   contextId,
@@ -65,17 +64,17 @@ const NonDecoratedIp = pure<{
   contextId: string;
   eventId: string;
   fieldName: string;
+  truncate?: boolean;
   value: string | object | null | undefined;
-  width?: string;
-}>(({ contextId, eventId, fieldName, value, width }) => (
+}>(({ contextId, eventId, fieldName, truncate, value }) => (
   <DraggableWrapper
+    dataProvider={getDataProvider({ contextId, eventId, fieldName, address: value })}
     key={`non-decorated-ip-draggable-wrapper-${getUniqueId({
       contextId,
       eventId,
       fieldName,
       address: value,
     })}`}
-    dataProvider={getDataProvider({ contextId, eventId, fieldName, address: value })}
     render={(dataProvider, _, snapshot) =>
       snapshot.isDragging ? (
         <DragEffects>
@@ -87,7 +86,7 @@ const NonDecoratedIp = pure<{
         getOrEmptyTagFromValue(tryStringify(value))
       )
     }
-    width={width}
+    truncate={truncate}
   />
 ));
 
@@ -98,18 +97,18 @@ const AddressLinks = pure<{
   contextId: string;
   eventId: string;
   fieldName: string;
-  width?: string;
-}>(({ addresses, eventId, contextId, fieldName, width }) => (
+  truncate?: boolean;
+}>(({ addresses, contextId, eventId, fieldName, truncate }) => (
   <>
     {uniq(addresses).map(address => (
       <DraggableWrapper
+        dataProvider={getDataProvider({ contextId, eventId, fieldName, address })}
         key={`address-links-draggable-wrapper-${getUniqueId({
           contextId,
           eventId,
           fieldName,
           address,
         })}`}
-        dataProvider={getDataProvider({ contextId, eventId, fieldName, address })}
         render={(_, __, snapshot) =>
           snapshot.isDragging ? (
             <DragEffects>
@@ -117,17 +116,11 @@ const AddressLinks = pure<{
                 dataProvider={getDataProvider({ contextId, eventId, fieldName, address })}
               />
             </DragEffects>
-          ) : width != null ? (
-            <IPDetailsLink data-test-sub="truncatable-ip-details-link" ip={address}>
-              <TruncatableText data-test-sub="truncatable-ip-details-text" size="xs" width={width}>
-                {address}
-              </TruncatableText>
-            </IPDetailsLink>
           ) : (
             <IPDetailsLink data-test-sub="ip-details" ip={address} />
           )
         }
-        width={width}
+        truncate={truncate}
       />
     ))}
   </>
@@ -139,9 +132,9 @@ export const FormattedIp = pure<{
   contextId: string;
   eventId: string;
   fieldName: string;
+  truncate?: boolean;
   value: string | object | null | undefined;
-  width?: string;
-}>(({ eventId, contextId, fieldName, value, width }) => {
+}>(({ contextId, eventId, fieldName, truncate, value }) => {
   if (isString(value) && !isEmpty(value)) {
     try {
       const addresses = JSON.parse(value);
@@ -149,10 +142,10 @@ export const FormattedIp = pure<{
         return (
           <AddressLinks
             addresses={addresses}
-            eventId={eventId}
             contextId={contextId}
+            eventId={eventId}
             fieldName={fieldName}
-            width={width}
+            truncate={truncate}
           />
         );
       }
@@ -164,20 +157,20 @@ export const FormattedIp = pure<{
     return (
       <AddressLinks
         addresses={[value]}
-        eventId={eventId}
         contextId={contextId}
+        eventId={eventId}
         fieldName={fieldName}
-        width={width}
+        truncate={truncate}
       />
     );
   } else {
     return (
       <NonDecoratedIp
-        eventId={eventId}
         contextId={contextId}
+        eventId={eventId}
         fieldName={fieldName}
+        truncate={truncate}
         value={value}
-        width={width}
       />
     );
   }
diff --git a/x-pack/legacy/plugins/siem/public/components/header_panel/__snapshots__/header_panel.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/header_panel/__snapshots__/header_panel.test.tsx.snap
deleted file mode 100644
index cef682957c3978..00000000000000
--- a/x-pack/legacy/plugins/siem/public/components/header_panel/__snapshots__/header_panel.test.tsx.snap
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`rendering renders correctly 1`] = `
-<Component
-  subtitle="My Test Subtitle"
-  title="My Test Title"
-  tooltip="My test tooltip."
->
-  <p>
-    My test supplement.
-  </p>
-</Component>
-`;
diff --git a/x-pack/legacy/plugins/siem/public/components/header_panel/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/header_panel/__snapshots__/index.test.tsx.snap
new file mode 100644
index 00000000000000..39250c38ef8fcd
--- /dev/null
+++ b/x-pack/legacy/plugins/siem/public/components/header_panel/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HeaderPanel it renders 1`] = `
+<Component>
+  <HeaderPanel
+    title="Test title"
+  />
+</Component>
+`;
diff --git a/x-pack/legacy/plugins/siem/public/components/header_panel/header_panel.test.tsx b/x-pack/legacy/plugins/siem/public/components/header_panel/header_panel.test.tsx
deleted file mode 100644
index 2f0dbd735a96bd..00000000000000
--- a/x-pack/legacy/plugins/siem/public/components/header_panel/header_panel.test.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { shallow } from 'enzyme';
-import toJson from 'enzyme-to-json';
-import React from 'react';
-
-import { HeaderPanel } from './index';
-
-describe('rendering', () => {
-  test('renders correctly', () => {
-    const wrapper = shallow(
-      <HeaderPanel subtitle="My Test Subtitle" title="My Test Title" tooltip="My test tooltip.">
-        <p>{'My test supplement.'}</p>
-      </HeaderPanel>
-    );
-    expect(toJson(wrapper)).toMatchSnapshot();
-  });
-});
diff --git a/x-pack/legacy/plugins/siem/public/components/header_panel/header_panel.tsx b/x-pack/legacy/plugins/siem/public/components/header_panel/header_panel.tsx
deleted file mode 100644
index 8ce19c59b09896..00000000000000
--- a/x-pack/legacy/plugins/siem/public/components/header_panel/header_panel.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { EuiFlexGroup, EuiFlexItem, EuiIconTip, EuiText, EuiTitle } from '@elastic/eui';
-import React from 'react';
-import { pure } from 'recompose';
-import styled, { css } from 'styled-components';
-
-import { InspectButton } from '../inspect';
-
-const Header = styled.header<{ border?: boolean }>`
-  ${props => css`
-    margin-bottom: ${props.theme.eui.euiSizeL};
-    user-select: text;
-
-    ${props.border &&
-      `
-      border-bottom: ${props.theme.eui.euiBorderThin};
-      padding-bottom: ${props.theme.eui.euiSizeL};
-    `}
-  `}
-`;
-
-Header.displayName = 'Header';
-
-export interface HeaderPanelProps {
-  border?: boolean;
-  children?: React.ReactNode;
-  id?: string;
-  subtitle?: string | React.ReactNode;
-  showInspect?: boolean;
-  title: string | React.ReactNode;
-  tooltip?: string;
-}
-
-export const HeaderPanel = pure<HeaderPanelProps>(
-  ({ border, children, id, showInspect = false, subtitle, title, tooltip }) => (
-    <Header border={border}>
-      <EuiFlexGroup alignItems="center">
-        <EuiFlexItem>
-          <EuiFlexGroup alignItems="center" responsive={false}>
-            <EuiFlexItem>
-              <EuiTitle>
-                <h2 data-test-subj="panel_headline_title">
-                  {title}
-                  {tooltip && (
-                    <>
-                      {' '}
-                      <EuiIconTip color="subdued" content={tooltip} size="l" type="iInCircle" />
-                    </>
-                  )}
-                </h2>
-              </EuiTitle>
-
-              <EuiText color="subdued" data-test-subj="subtitle" size="xs">
-                {subtitle}
-              </EuiText>
-            </EuiFlexItem>
-
-            {id && (
-              <EuiFlexItem grow={false}>
-                <InspectButton queryId={id} inspectIndex={0} show={showInspect} title={title} />
-              </EuiFlexItem>
-            )}
-          </EuiFlexGroup>
-        </EuiFlexItem>
-
-        {children && <EuiFlexItem grow={false}>{children}</EuiFlexItem>}
-      </EuiFlexGroup>
-    </Header>
-  )
-);
-
-HeaderPanel.displayName = 'HeaderPanel';
diff --git a/x-pack/legacy/plugins/siem/public/components/header_panel/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/header_panel/index.test.tsx
new file mode 100644
index 00000000000000..9cdb85bcb3d763
--- /dev/null
+++ b/x-pack/legacy/plugins/siem/public/components/header_panel/index.test.tsx
@@ -0,0 +1,160 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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 euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import 'jest-styled-components';
+import React from 'react';
+
+import '../../mock/ui_settings';
+import { TestProviders } from '../../mock';
+import { HeaderPanel } from './index';
+
+jest.mock('../../lib/settings/use_kibana_ui_setting');
+
+describe('HeaderPanel', () => {
+  test('it renders', () => {
+    const wrapper = shallow(
+      <TestProviders>
+        <HeaderPanel title="Test title" />
+      </TestProviders>
+    );
+
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
+  test('it renders the title', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <HeaderPanel title="Test title" />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="header-panel-title"]')
+        .first()
+        .exists()
+    ).toBe(true);
+  });
+
+  test('it renders the subtitle when provided', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <HeaderPanel subtitle="Test subtitle" title="Test title" />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find(`[data-test-subj="header-panel-subtitle"]`)
+        .first()
+        .exists()
+    ).toBe(true);
+  });
+
+  test('it DOES NOT render the subtitle when not provided', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <HeaderPanel title="Test title" />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find(`[data-test-subj="header-panel-subtitle"]`)
+        .first()
+        .exists()
+    ).toBe(false);
+  });
+
+  test('it renders a transparent inspect button when showInspect is false', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <HeaderPanel title="Test title" id="test" showInspect={false} />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find(`[data-test-subj="transparent-inspect-container"]`)
+        .first()
+        .exists()
+    ).toBe(true);
+  });
+
+  test('it renders an opaque inspect button when showInspect is true', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <HeaderPanel title="Test title" id="test" showInspect={true} />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find(`[data-test-subj="opaque-inspect-container"]`)
+        .first()
+        .exists()
+    ).toBe(true);
+  });
+
+  test('it renders supplements when children provided', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <HeaderPanel title="Test title">
+          <p>{'Test children'}</p>
+        </HeaderPanel>
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="header-panel-supplements"]')
+        .first()
+        .exists()
+    ).toBe(true);
+  });
+
+  test('it DOES NOT render supplements when children not provided', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <HeaderPanel title="Test title" />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="header-panel-supplements"]')
+        .first()
+        .exists()
+    ).toBe(false);
+  });
+
+  test('it applies border styles when border is true', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <HeaderPanel border title="Test title" />
+      </TestProviders>
+    );
+    const siemHeaderPanel = wrapper.find('.siemHeaderPanel').first();
+
+    expect(siemHeaderPanel).toHaveStyleRule('border-bottom', euiDarkVars.euiBorderThin);
+    expect(siemHeaderPanel).toHaveStyleRule('padding-bottom', euiDarkVars.euiSizeL);
+  });
+
+  test('it DOES NOT apply border styles when border is false', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <HeaderPanel title="Test title" />
+      </TestProviders>
+    );
+    const siemHeaderPanel = wrapper.find('.siemHeaderPanel').first();
+
+    expect(siemHeaderPanel).not.toHaveStyleRule('border-bottom', euiDarkVars.euiBorderThin);
+    expect(siemHeaderPanel).not.toHaveStyleRule('padding-bottom', euiDarkVars.euiSizeL);
+  });
+});
diff --git a/x-pack/legacy/plugins/siem/public/components/header_panel/index.tsx b/x-pack/legacy/plugins/siem/public/components/header_panel/index.tsx
index 6d4e42a0914b00..e7b3fb9f2f4003 100644
--- a/x-pack/legacy/plugins/siem/public/components/header_panel/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/header_panel/index.tsx
@@ -4,4 +4,84 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { HeaderPanel } from './header_panel';
+import { EuiFlexGroup, EuiFlexItem, EuiIconTip, EuiText, EuiTitle } from '@elastic/eui';
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+import { InspectButton } from '../inspect';
+
+interface HeaderProps {
+  border?: boolean;
+}
+
+const Header = styled.header.attrs({
+  className: 'siemHeaderPanel',
+})<HeaderProps>`
+  ${props => css`
+    margin-bottom: ${props.theme.eui.euiSizeL};
+    user-select: text;
+
+    ${props.border &&
+      `
+      border-bottom: ${props.theme.eui.euiBorderThin};
+      padding-bottom: ${props.theme.eui.euiSizeL};
+    `}
+  `}
+`;
+
+Header.displayName = 'Header';
+
+export interface HeaderPanelProps extends HeaderProps {
+  children?: React.ReactNode;
+  id?: string;
+  subtitle?: string | React.ReactNode;
+  showInspect?: boolean;
+  title: string | React.ReactNode;
+  tooltip?: string;
+}
+
+export const HeaderPanel = React.memo<HeaderPanelProps>(
+  ({ border, children, id, showInspect = false, subtitle, title, tooltip }) => (
+    <Header border={border}>
+      <EuiFlexGroup alignItems="center">
+        <EuiFlexItem>
+          <EuiFlexGroup alignItems="center" responsive={false}>
+            <EuiFlexItem>
+              <EuiTitle>
+                <h2 data-test-subj="header-panel-title">
+                  {title}
+                  {tooltip && (
+                    <>
+                      {' '}
+                      <EuiIconTip color="subdued" content={tooltip} size="l" type="iInCircle" />
+                    </>
+                  )}
+                </h2>
+              </EuiTitle>
+
+              {subtitle && (
+                <EuiText color="subdued" data-test-subj="header-panel-subtitle" size="xs">
+                  <p>{subtitle}</p>
+                </EuiText>
+              )}
+            </EuiFlexItem>
+
+            {id && (
+              <EuiFlexItem grow={false}>
+                <InspectButton queryId={id} inspectIndex={0} show={showInspect} title={title} />
+              </EuiFlexItem>
+            )}
+          </EuiFlexGroup>
+        </EuiFlexItem>
+
+        {children && (
+          <EuiFlexItem data-test-subj="header-panel-supplements" grow={false}>
+            {children}
+          </EuiFlexItem>
+        )}
+      </EuiFlexGroup>
+    </Header>
+  )
+);
+
+HeaderPanel.displayName = 'HeaderPanel';
diff --git a/x-pack/legacy/plugins/siem/public/components/help_menu/help_menu.tsx b/x-pack/legacy/plugins/siem/public/components/help_menu/help_menu.tsx
index 90af0d56c15820..b59753e8add6a7 100644
--- a/x-pack/legacy/plugins/siem/public/components/help_menu/help_menu.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/help_menu/help_menu.tsx
@@ -16,30 +16,28 @@ export const Icon = styled(EuiIcon)`
 
 Icon.displayName = 'Icon';
 
-export class HelpMenuComponent extends React.PureComponent {
-  public render() {
-    return (
-      <>
-        <EuiHorizontalRule margin="none" />
-
-        <EuiSpacer />
-
-        <EuiTitle size="xxs">
-          <h6>
-            <Icon type="securityAnalyticsApp" />
-            <FormattedMessage
-              id="xpack.siem.chrome.help.title"
-              defaultMessage="SIEM Application Help"
-            />
-          </h6>
-        </EuiTitle>
-
-        <EuiSpacer />
-
-        <EuiButton iconType="popout" href="https://discuss.elastic.co/c/siem" target="_blank">
-          <FormattedMessage id="xpack.siem.chrome.help.feedback" defaultMessage="Submit feedback" />
-        </EuiButton>
-      </>
-    );
-  }
-}
+export const HelpMenuComponent = React.memo(() => (
+  <>
+    <EuiHorizontalRule margin="none" />
+
+    <EuiSpacer />
+
+    <EuiTitle size="xxs">
+      <h6>
+        <Icon type="securityAnalyticsApp" />
+        <FormattedMessage
+          id="xpack.siem.chrome.help.title"
+          defaultMessage="SIEM Application Help"
+        />
+      </h6>
+    </EuiTitle>
+
+    <EuiSpacer />
+
+    <EuiButton iconType="popout" href="https://discuss.elastic.co/c/siem" target="_blank">
+      <FormattedMessage id="xpack.siem.chrome.help.feedback" defaultMessage="Submit feedback" />
+    </EuiButton>
+  </>
+));
+
+HelpMenuComponent.displayName = 'HelpMenuComponent';
diff --git a/x-pack/legacy/plugins/siem/public/components/lazy_accordion/index.tsx b/x-pack/legacy/plugins/siem/public/components/lazy_accordion/index.tsx
index 5ed9a3b623c1ce..da2e7334756e4e 100644
--- a/x-pack/legacy/plugins/siem/public/components/lazy_accordion/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/lazy_accordion/index.tsx
@@ -5,7 +5,7 @@
  */
 
 import { EuiAccordion, EuiAccordionProps } from '@elastic/eui';
-import * as React from 'react';
+import React, { useState } from 'react';
 
 type Props = Pick<EuiAccordionProps, Exclude<keyof EuiAccordionProps, 'initialIsOpen'>> & {
   forceExpand?: boolean;
@@ -14,10 +14,6 @@ type Props = Pick<EuiAccordionProps, Exclude<keyof EuiAccordionProps, 'initialIs
   renderExpandedContent: (expanded: boolean) => React.ReactNode;
 };
 
-interface State {
-  expanded: boolean;
-}
-
 /**
  * An accordion that doesn't render it's content unless it's expanded.
  * This component was created because `EuiAccordion`'s eager rendering of
@@ -33,29 +29,36 @@ interface State {
  * TODO: animate the expansion and collapse of content rendered "below"
  * the real `EuiAccordion`.
  */
-export class LazyAccordion extends React.PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      expanded: false,
+export const LazyAccordion = React.memo<Props>(
+  ({
+    buttonContent,
+    buttonContentClassName,
+    extraAction,
+    forceExpand,
+    id,
+    onCollapse,
+    onExpand,
+    paddingSize,
+    renderExpandedContent,
+  }) => {
+    const [expanded, setExpanded] = useState(false);
+    const onCollapsedClick = () => {
+      setExpanded(true);
+      if (onExpand != null) {
+        onExpand();
+      }
     };
-  }
 
-  public render() {
-    const {
-      id,
-      buttonContentClassName,
-      buttonContent,
-      forceExpand,
-      extraAction,
-      renderExpandedContent,
-      paddingSize,
-    } = this.props;
+    const onExpandedClick = () => {
+      setExpanded(false);
+      if (onCollapse != null) {
+        onCollapse();
+      }
+    };
 
     return (
       <>
-        {forceExpand || this.state.expanded ? (
+        {forceExpand || expanded ? (
           <>
             <EuiAccordion
               buttonContent={buttonContent}
@@ -64,12 +67,12 @@ export class LazyAccordion extends React.PureComponent<Props, State> {
               extraAction={extraAction}
               id={id}
               initialIsOpen={true}
-              onClick={this.onExpandedClick}
+              onClick={onExpandedClick}
               paddingSize={paddingSize}
             >
               <></>
             </EuiAccordion>
-            {renderExpandedContent(this.state.expanded)}
+            {renderExpandedContent(expanded)}
           </>
         ) : (
           <EuiAccordion
@@ -78,31 +81,13 @@ export class LazyAccordion extends React.PureComponent<Props, State> {
             data-test-subj="lazy-accordion-placeholder"
             extraAction={extraAction}
             id={id}
-            onClick={this.onCollapsedClick}
+            onClick={onCollapsedClick}
             paddingSize={paddingSize}
           />
         )}
       </>
     );
   }
+);
 
-  private onCollapsedClick = () => {
-    const { onExpand } = this.props;
-
-    this.setState({ expanded: true });
-
-    if (onExpand != null) {
-      onExpand();
-    }
-  };
-
-  private onExpandedClick = () => {
-    const { onCollapse } = this.props;
-
-    this.setState({ expanded: false });
-
-    if (onCollapse != null) {
-      onCollapse();
-    }
-  };
-}
+LazyAccordion.displayName = 'LazyAccordion';
diff --git a/x-pack/legacy/plugins/siem/public/components/load_more_table/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/load_more_table/__snapshots__/index.test.tsx.snap
deleted file mode 100644
index 4bf3f647502e2d..00000000000000
--- a/x-pack/legacy/plugins/siem/public/components/load_more_table/__snapshots__/index.test.tsx.snap
+++ /dev/null
@@ -1,104 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Load More Table Component rendering it renders the default load more table 1`] = `
-<LoadMoreTable
-  columns={
-    Array [
-      Object {
-        "field": "node.host.name",
-        "hideForMobile": false,
-        "name": "Host",
-        "render": [Function],
-        "truncateText": false,
-      },
-      Object {
-        "field": "node.host.firstSeen",
-        "hideForMobile": false,
-        "name": "First seen",
-        "render": [Function],
-        "truncateText": false,
-      },
-      Object {
-        "field": "node.host.os",
-        "hideForMobile": false,
-        "name": "OS",
-        "render": [Function],
-        "truncateText": false,
-      },
-      Object {
-        "field": "node.host.version",
-        "hideForMobile": false,
-        "name": "Version",
-        "render": [Function],
-        "truncateText": false,
-      },
-    ]
-  }
-  hasNextPage={true}
-  headerCount={1}
-  headerSupplement={
-    <p>
-      My test supplement.
-    </p>
-  }
-  headerTitle="Hosts"
-  headerTooltip="My test tooltip"
-  headerUnit="Test Unit"
-  itemsPerRow={
-    Array [
-      Object {
-        "numberOfRow": 2,
-        "text": "2 rows",
-      },
-      Object {
-        "numberOfRow": 5,
-        "text": "5 rows",
-      },
-      Object {
-        "numberOfRow": 10,
-        "text": "10 rows",
-      },
-      Object {
-        "numberOfRow": 20,
-        "text": "20 rows",
-      },
-      Object {
-        "numberOfRow": 50,
-        "text": "50 rows",
-      },
-    ]
-  }
-  limit={1}
-  loadMore={[Function]}
-  loading={false}
-  pageOfItems={
-    Array [
-      Object {
-        "cursor": Object {
-          "value": "98966fa2013c396155c460d35c0902be",
-        },
-        "host": Object {
-          "_id": "cPsuhGcB0WOhS6qyTKC0",
-          "firstSeen": "2018-12-06T15:40:53.319Z",
-          "name": "elrond.elstc.co",
-          "os": "Ubuntu",
-          "version": "18.04.1 LTS (Bionic Beaver)",
-        },
-      },
-      Object {
-        "cursor": Object {
-          "value": "aa7ca589f1b8220002f2fc61c64cfbf1",
-        },
-        "host": Object {
-          "_id": "KwQDiWcB0WOhS6qyXmrW",
-          "firstSeen": "2018-12-07T14:12:38.560Z",
-          "name": "siem-kibana",
-          "os": "Debian GNU/Linux",
-          "version": "9 (stretch)",
-        },
-      },
-    ]
-  }
-  updateLimitPagination={[Function]}
-/>
-`;
diff --git a/x-pack/legacy/plugins/siem/public/components/load_more_table/index.mock.tsx b/x-pack/legacy/plugins/siem/public/components/load_more_table/index.mock.tsx
deleted file mode 100644
index 02ec00a78bc91c..00000000000000
--- a/x-pack/legacy/plugins/siem/public/components/load_more_table/index.mock.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { getOrEmptyTagFromValue } from '../empty_value';
-
-import { Columns, ItemsPerRow } from './index';
-
-export const mockData = {
-  Hosts: {
-    totalCount: 4,
-    edges: [
-      {
-        host: {
-          _id: 'cPsuhGcB0WOhS6qyTKC0',
-          name: 'elrond.elstc.co',
-          os: 'Ubuntu',
-          version: '18.04.1 LTS (Bionic Beaver)',
-          firstSeen: '2018-12-06T15:40:53.319Z',
-        },
-        cursor: {
-          value: '98966fa2013c396155c460d35c0902be',
-        },
-      },
-      {
-        host: {
-          _id: 'KwQDiWcB0WOhS6qyXmrW',
-          name: 'siem-kibana',
-          os: 'Debian GNU/Linux',
-          version: '9 (stretch)',
-          firstSeen: '2018-12-07T14:12:38.560Z',
-        },
-        cursor: {
-          value: 'aa7ca589f1b8220002f2fc61c64cfbf1',
-        },
-      },
-    ],
-    pageInfo: {
-      endCursor: {
-        value: 'aa7ca589f1b8220002f2fc61c64cfbf1',
-      },
-      hasNextPage: true,
-    },
-  },
-};
-
-export const getHostsColumns = (): [
-  Columns<string>,
-  Columns<string>,
-  Columns<string>,
-  Columns<string>
-] => [
-  {
-    field: 'node.host.name',
-    name: 'Host',
-    truncateText: false,
-    hideForMobile: false,
-    render: (name: string) => getOrEmptyTagFromValue(name),
-  },
-  {
-    field: 'node.host.firstSeen',
-    name: 'First seen',
-    truncateText: false,
-    hideForMobile: false,
-    render: (firstSeen: string) => getOrEmptyTagFromValue(firstSeen),
-  },
-  {
-    field: 'node.host.os',
-    name: 'OS',
-    truncateText: false,
-    hideForMobile: false,
-    render: (os: string) => getOrEmptyTagFromValue(os),
-  },
-  {
-    field: 'node.host.version',
-    name: 'Version',
-    truncateText: false,
-    hideForMobile: false,
-    render: (version: string) => getOrEmptyTagFromValue(version),
-  },
-];
-
-export const sortedHosts: [
-  Columns<string>,
-  Columns<string>,
-  Columns<string>,
-  Columns<string>
-] = getHostsColumns().map(h => ({ ...h, sortable: true })) as [
-  Columns<string>,
-  Columns<string>,
-  Columns<string>,
-  Columns<string>
-];
-
-export const rowItems: ItemsPerRow[] = [
-  {
-    text: '2 rows',
-    numberOfRow: 2,
-  },
-  {
-    text: '5 rows',
-    numberOfRow: 5,
-  },
-  {
-    text: '10 rows',
-    numberOfRow: 10,
-  },
-  {
-    text: '20 rows',
-    numberOfRow: 20,
-  },
-  {
-    text: '50 rows',
-    numberOfRow: 50,
-  },
-];
diff --git a/x-pack/legacy/plugins/siem/public/components/load_more_table/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/load_more_table/index.test.tsx
deleted file mode 100644
index 3c42d3d2acfe32..00000000000000
--- a/x-pack/legacy/plugins/siem/public/components/load_more_table/index.test.tsx
+++ /dev/null
@@ -1,360 +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 { mount, shallow } from 'enzyme';
-import toJson from 'enzyme-to-json';
-import * as React from 'react';
-
-import { Direction } from '../../graphql/types';
-
-import { LoadMoreTable } from './index';
-import { getHostsColumns, mockData, rowItems, sortedHosts } from './index.mock';
-import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
-import { ThemeProvider } from 'styled-components';
-
-describe('Load More Table Component', () => {
-  const theme = () => ({ eui: euiDarkVars, darkMode: true });
-  const loadMore = jest.fn();
-  const updateLimitPagination = jest.fn();
-  describe('rendering', () => {
-    test('it renders the default load more table', () => {
-      const wrapper = shallow(
-        <ThemeProvider theme={theme}>
-          <LoadMoreTable
-            columns={getHostsColumns()}
-            hasNextPage={mockData.Hosts.pageInfo.hasNextPage!}
-            headerCount={1}
-            headerSupplement={<p>{'My test supplement.'}</p>}
-            headerTitle="Hosts"
-            headerTooltip="My test tooltip"
-            headerUnit="Test Unit"
-            itemsPerRow={rowItems}
-            limit={1}
-            loading={false}
-            loadMore={() => loadMore(mockData.Hosts.pageInfo.endCursor)}
-            pageOfItems={mockData.Hosts.edges}
-            updateLimitPagination={newlimit => updateLimitPagination({ limit: newlimit })}
-          />
-        </ThemeProvider>
-      );
-
-      expect(toJson(wrapper)).toMatchSnapshot();
-    });
-
-    test('it renders the loading panel at the beginning ', () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <LoadMoreTable
-            columns={getHostsColumns()}
-            hasNextPage={mockData.Hosts.pageInfo.hasNextPage!}
-            headerCount={-1}
-            headerSupplement={<p>{'My test supplement.'}</p>}
-            headerTitle="Hosts"
-            headerTooltip="My test tooltip"
-            headerUnit="Test Unit"
-            itemsPerRow={rowItems}
-            limit={1}
-            loading={true}
-            loadMore={() => loadMore(mockData.Hosts.pageInfo.endCursor)}
-            pageOfItems={[]}
-            updateLimitPagination={newlimit => updateLimitPagination({ limit: newlimit })}
-          />
-        </ThemeProvider>
-      );
-
-      expect(
-        wrapper.find('[data-test-subj="initialLoadingPanelLoadMoreTable"]').exists()
-      ).toBeTruthy();
-    });
-
-    test('it renders the over loading panel after data has been in the table ', () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <LoadMoreTable
-            columns={getHostsColumns()}
-            hasNextPage={mockData.Hosts.pageInfo.hasNextPage!}
-            headerCount={1}
-            headerSupplement={<p>{'My test supplement.'}</p>}
-            headerTitle="Hosts"
-            headerTooltip="My test tooltip"
-            headerUnit="Test Unit"
-            itemsPerRow={rowItems}
-            limit={1}
-            loading={true}
-            loadMore={() => loadMore(mockData.Hosts.pageInfo.endCursor)}
-            pageOfItems={mockData.Hosts.edges}
-            updateLimitPagination={newlimit => updateLimitPagination({ limit: newlimit })}
-          />
-        </ThemeProvider>
-      );
-
-      expect(wrapper.find('[data-test-subj="loadingPanelLoadMoreTable"]').exists()).toBeTruthy();
-    });
-
-    test('it renders the loadMore button if need to fetch more', () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <LoadMoreTable
-            columns={getHostsColumns()}
-            hasNextPage={mockData.Hosts.pageInfo.hasNextPage!}
-            headerCount={1}
-            headerSupplement={<p>{'My test supplement.'}</p>}
-            headerTitle="Hosts"
-            headerTooltip="My test tooltip"
-            headerUnit="Test Unit"
-            itemsPerRow={rowItems}
-            limit={1}
-            loading={false}
-            loadMore={() => loadMore(mockData.Hosts.pageInfo.endCursor)}
-            pageOfItems={mockData.Hosts.edges}
-            updateLimitPagination={newlimit => updateLimitPagination({ limit: newlimit })}
-          />
-        </ThemeProvider>
-      );
-
-      expect(
-        wrapper
-          .find('[data-test-subj="loadingMoreButton"]')
-          .first()
-          .text()
-      ).toContain('Load more');
-    });
-
-    test('it renders the Loading... in the more load button when fetching new data', () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <LoadMoreTable
-            columns={getHostsColumns()}
-            hasNextPage={mockData.Hosts.pageInfo.hasNextPage!}
-            headerCount={1}
-            headerSupplement={<p>{'My test supplement.'}</p>}
-            headerTitle="Hosts"
-            headerTooltip="My test tooltip"
-            headerUnit="Test Unit"
-            itemsPerRow={rowItems}
-            limit={1}
-            loading={true}
-            loadMore={() => loadMore(mockData.Hosts.pageInfo.endCursor)}
-            pageOfItems={mockData.Hosts.edges}
-            updateLimitPagination={newlimit => updateLimitPagination({ limit: newlimit })}
-          />
-        </ThemeProvider>
-      );
-
-      expect(
-        wrapper.find('[data-test-subj="initialLoadingPanelLoadMoreTable"]').exists()
-      ).toBeFalsy();
-      expect(
-        wrapper
-          .find('[data-test-subj="loadingMoreButton"]')
-          .first()
-          .text()
-      ).toContain('Loading…');
-    });
-
-    test('it does NOT render the loadMore button because there is nothing else to fetch', () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <LoadMoreTable
-            columns={getHostsColumns()}
-            hasNextPage={false}
-            headerCount={1}
-            headerSupplement={<p>{'My test supplement.'}</p>}
-            headerTitle="Hosts"
-            headerTooltip="My test tooltip"
-            headerUnit="Test Unit"
-            itemsPerRow={rowItems}
-            limit={2}
-            loading={false}
-            loadMore={() => loadMore(mockData.Hosts.pageInfo.endCursor)}
-            pageOfItems={mockData.Hosts.edges}
-            updateLimitPagination={newlimit => updateLimitPagination({ limit: newlimit })}
-          />
-        </ThemeProvider>
-      );
-
-      expect(wrapper.find('[data-test-subj="loadingMoreButton"]').exists()).toBeFalsy();
-    });
-
-    test('it render popover to select new limit in table', () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <LoadMoreTable
-            columns={getHostsColumns()}
-            hasNextPage={true}
-            headerCount={1}
-            headerSupplement={<p>{'My test supplement.'}</p>}
-            headerTitle="Hosts"
-            headerTooltip="My test tooltip"
-            headerUnit="Test Unit"
-            itemsPerRow={rowItems}
-            limit={2}
-            loading={false}
-            loadMore={() => loadMore(mockData.Hosts.pageInfo.endCursor)}
-            pageOfItems={mockData.Hosts.edges}
-            updateLimitPagination={newlimit => updateLimitPagination({ limit: newlimit })}
-          />
-        </ThemeProvider>
-      );
-
-      wrapper
-        .find('[data-test-subj="loadingMoreSizeRowPopover"] button')
-        .first()
-        .simulate('click');
-      expect(wrapper.find('[data-test-subj="loadingMorePickSizeRow"]').exists()).toBeTruthy();
-    });
-
-    test('it will NOT render popover to select new limit in table if props itemsPerRow is empty', () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <LoadMoreTable
-            columns={getHostsColumns()}
-            hasNextPage={true}
-            headerCount={1}
-            headerSupplement={<p>{'My test supplement.'}</p>}
-            headerTitle="Hosts"
-            headerTooltip="My test tooltip"
-            headerUnit="Test Unit"
-            itemsPerRow={[]}
-            limit={2}
-            loading={false}
-            loadMore={() => loadMore(mockData.Hosts.pageInfo.endCursor)}
-            pageOfItems={mockData.Hosts.edges}
-            updateLimitPagination={newlimit => updateLimitPagination({ limit: newlimit })}
-          />
-        </ThemeProvider>
-      );
-
-      expect(wrapper.find('[data-test-subj="loadingMoreSizeRowPopover"]').exists()).toBeFalsy();
-    });
-
-    test('It should render a sort icon if sorting is defined', () => {
-      const mockOnChange = jest.fn();
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <LoadMoreTable
-            columns={sortedHosts}
-            hasNextPage={true}
-            headerCount={1}
-            headerSupplement={<p>{'My test supplement.'}</p>}
-            headerTitle="Hosts"
-            headerTooltip="My test tooltip"
-            headerUnit="Test Unit"
-            itemsPerRow={rowItems}
-            limit={2}
-            loading={false}
-            loadMore={jest.fn()}
-            onChange={mockOnChange}
-            pageOfItems={mockData.Hosts.edges}
-            sorting={{ direction: Direction.asc, field: 'node.host.name' }}
-            updateLimitPagination={newlimit => updateLimitPagination({ limit: newlimit })}
-          />
-        </ThemeProvider>
-      );
-
-      expect(wrapper.find('.euiTable thead tr th button svg')).toBeTruthy();
-    });
-  });
-
-  describe('Events', () => {
-    test('should call loadmore when clicking on the button load more', () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <LoadMoreTable
-            columns={getHostsColumns()}
-            hasNextPage={mockData.Hosts.pageInfo.hasNextPage!}
-            headerCount={1}
-            headerSupplement={<p>{'My test supplement.'}</p>}
-            headerTitle="Hosts"
-            headerTooltip="My test tooltip"
-            headerUnit="Test Unit"
-            itemsPerRow={rowItems}
-            limit={1}
-            loading={false}
-            loadMore={() => loadMore(mockData.Hosts.pageInfo.endCursor)}
-            pageOfItems={mockData.Hosts.edges}
-            updateLimitPagination={newlimit => updateLimitPagination({ limit: newlimit })}
-          />
-        </ThemeProvider>
-      );
-
-      wrapper
-        .find('[data-test-subj="loadingMoreButton"]')
-        .first()
-        .simulate('click');
-
-      expect(loadMore).toBeCalled();
-    });
-
-    test('Should call updateLimitPagination when you pick a new limit', () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <LoadMoreTable
-            columns={getHostsColumns()}
-            hasNextPage={true}
-            headerCount={1}
-            headerSupplement={<p>{'My test supplement.'}</p>}
-            headerTitle="Hosts"
-            headerTooltip="My test tooltip"
-            headerUnit="Test Unit"
-            itemsPerRow={rowItems}
-            limit={2}
-            loading={false}
-            loadMore={() => loadMore(mockData.Hosts.pageInfo.endCursor)}
-            pageOfItems={mockData.Hosts.edges}
-            updateLimitPagination={newlimit => updateLimitPagination({ limit: newlimit })}
-          />
-        </ThemeProvider>
-      );
-
-      wrapper
-        .find('[data-test-subj="loadingMoreSizeRowPopover"] button')
-        .first()
-        .simulate('click');
-
-      wrapper
-        .find('[data-test-subj="loadingMorePickSizeRow"] button')
-        .first()
-        .simulate('click');
-      expect(updateLimitPagination).toBeCalled();
-    });
-
-    test('Should call onChange when you choose a new sort in the table', () => {
-      const mockOnChange = jest.fn();
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <LoadMoreTable
-            columns={sortedHosts}
-            hasNextPage={true}
-            headerCount={1}
-            headerSupplement={<p>{'My test supplement.'}</p>}
-            headerTitle="Hosts"
-            headerTooltip="My test tooltip"
-            headerUnit="Test Unit"
-            itemsPerRow={rowItems}
-            limit={2}
-            loading={false}
-            loadMore={jest.fn()}
-            onChange={mockOnChange}
-            pageOfItems={mockData.Hosts.edges}
-            sorting={{ direction: Direction.asc, field: 'node.host.name' }}
-            updateLimitPagination={newlimit => updateLimitPagination({ limit: newlimit })}
-          />
-        </ThemeProvider>
-      );
-
-      wrapper
-        .find('.euiTable thead tr th button')
-        .first()
-        .simulate('click');
-
-      expect(mockOnChange).toBeCalled();
-      expect(mockOnChange.mock.calls[0]).toEqual([
-        { page: undefined, sort: { direction: 'desc', field: 'node.host.name' } },
-      ]);
-    });
-  });
-});
diff --git a/x-pack/legacy/plugins/siem/public/components/load_more_table/index.tsx b/x-pack/legacy/plugins/siem/public/components/load_more_table/index.tsx
deleted file mode 100644
index 0663246039cb8d..00000000000000
--- a/x-pack/legacy/plugins/siem/public/components/load_more_table/index.tsx
+++ /dev/null
@@ -1,320 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import {
-  EuiBasicTable,
-  EuiButton,
-  EuiButtonEmpty,
-  EuiContextMenuItem,
-  EuiContextMenuPanel,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiLoadingContent,
-  EuiPopover,
-} from '@elastic/eui';
-import { isEmpty, noop } from 'lodash/fp';
-import React from 'react';
-import styled from 'styled-components';
-
-import { Direction } from '../../graphql/types';
-import { HeaderPanel } from '../header_panel';
-import { Loader } from '../loader';
-
-import * as i18n from './translations';
-import { Panel } from '../panel';
-
-const DEFAULT_DATA_TEST_SUBJ = 'load-more-table';
-
-export interface ItemsPerRow {
-  text: string;
-  numberOfRow: number;
-}
-
-export interface SortingBasicTable {
-  field: string;
-  direction: Direction;
-  allowNeutralSort?: boolean;
-}
-
-export interface Criteria {
-  page?: { index: number; size: number };
-  sort?: SortingBasicTable;
-}
-
-// Using telescoping templates to remove 'any' that was polluting downstream column type checks
-interface BasicTableProps<T, U = T, V = T, W = T, X = T, Y = T, Z = T, AA = T, AB = T> {
-  columns:
-    | [Columns<T>]
-    | [Columns<T>, Columns<U>]
-    | [Columns<T>, Columns<U>, Columns<V>]
-    | [Columns<T>, Columns<U>, Columns<V>, Columns<W>]
-    | [Columns<T>, Columns<U>, Columns<V>, Columns<W>, Columns<X>]
-    | [Columns<T>, Columns<U>, Columns<V>, Columns<W>, Columns<X>, Columns<Y>]
-    | [Columns<T>, Columns<U>, Columns<V>, Columns<W>, Columns<X>, Columns<Y>, Columns<Z>]
-    | [
-        Columns<T>,
-        Columns<U>,
-        Columns<V>,
-        Columns<W>,
-        Columns<X>,
-        Columns<Y>,
-        Columns<Z>,
-        Columns<AA>
-      ]
-    | [
-        Columns<T>,
-        Columns<U>,
-        Columns<V>,
-        Columns<W>,
-        Columns<X>,
-        Columns<Y>,
-        Columns<Z>,
-        Columns<AA>,
-        Columns<AB>
-      ];
-  hasNextPage: boolean;
-  dataTestSubj?: string;
-  headerCount: number;
-  headerSupplement?: React.ReactElement;
-  headerTitle: string | React.ReactElement;
-  headerTooltip?: string;
-  headerUnit: string | React.ReactElement;
-  id?: string;
-  itemsPerRow?: ItemsPerRow[];
-  limit: number;
-  loading: boolean;
-  loadMore: () => void;
-  onChange?: (criteria: Criteria) => void;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  pageOfItems: any[];
-  sorting?: SortingBasicTable;
-  updateLimitPagination: (limit: number) => void;
-}
-
-interface BasicTableState {
-  loadingInitial: boolean;
-  isPopoverOpen: boolean;
-  showInspect: boolean;
-}
-
-type Func<T> = (arg: T) => string | number;
-
-export interface Columns<T, U = T> {
-  field?: string;
-  align?: string;
-  name: string | React.ReactNode;
-  isMobileHeader?: boolean;
-  sortable?: boolean | Func<T>;
-  truncateText?: boolean;
-  hideForMobile?: boolean;
-  render?: (item: T, node: U) => React.ReactNode;
-  width?: string;
-}
-
-export class LoadMoreTable<T, U, V, W, X, Y, Z, AA, AB> extends React.PureComponent<
-  BasicTableProps<T, U, V, W, X, Y, Z, AA, AB>,
-  BasicTableState
-> {
-  public readonly state = {
-    loadingInitial: this.props.headerCount === -1,
-    isPopoverOpen: false,
-    showInspect: false,
-  };
-
-  static getDerivedStateFromProps<T, U, V, W, X, Y, Z, AA, AB>(
-    props: BasicTableProps<T, U, V, W, X, Y, Z, AA, AB>,
-    state: BasicTableState
-  ) {
-    if (state.loadingInitial && props.headerCount >= 0) {
-      return {
-        ...state,
-        loadingInitial: false,
-      };
-    }
-    return null;
-  }
-
-  public render() {
-    const {
-      columns,
-      dataTestSubj = DEFAULT_DATA_TEST_SUBJ,
-      hasNextPage,
-      headerCount,
-      headerSupplement,
-      headerTitle,
-      headerTooltip,
-      headerUnit,
-      id,
-      itemsPerRow,
-      limit,
-      loading,
-      onChange = noop,
-      pageOfItems,
-      sorting = null,
-      updateLimitPagination,
-    } = this.props;
-    const { loadingInitial } = this.state;
-
-    const button = (
-      <EuiButtonEmpty
-        size="xs"
-        color="text"
-        iconType="arrowDown"
-        iconSide="right"
-        onClick={this.onButtonClick}
-      >
-        {`${i18n.ROWS}: ${limit}`}
-      </EuiButtonEmpty>
-    );
-
-    const rowItems =
-      itemsPerRow &&
-      itemsPerRow.map(item => (
-        <EuiContextMenuItem
-          key={item.text}
-          icon={limit === item.numberOfRow ? 'check' : 'empty'}
-          onClick={() => {
-            this.closePopover();
-            updateLimitPagination(item.numberOfRow);
-          }}
-        >
-          {item.text}
-        </EuiContextMenuItem>
-      ));
-
-    return (
-      <Panel
-        data-test-subj={dataTestSubj}
-        loading={loading}
-        onMouseEnter={this.mouseEnter}
-        onMouseLeave={this.mouseLeave}
-      >
-        <HeaderPanel
-          id={id}
-          showInspect={!loadingInitial && this.state.showInspect}
-          subtitle={
-            !loadingInitial &&
-            `${i18n.SHOWING}: ${headerCount >= 0 ? headerCount.toLocaleString() : 0} ${headerUnit}`
-          }
-          title={headerTitle}
-          tooltip={headerTooltip}
-        >
-          {!loadingInitial && headerSupplement}
-        </HeaderPanel>
-
-        {loadingInitial ? (
-          <EuiLoadingContent data-test-subj="initialLoadingPanelLoadMoreTable" lines={10} />
-        ) : (
-          <>
-            <BasicTable
-              columns={columns}
-              compressed
-              items={pageOfItems}
-              onChange={onChange}
-              sorting={
-                sorting
-                  ? {
-                      sort: {
-                        field: sorting.field,
-                        direction: sorting.direction,
-                      },
-                    }
-                  : null
-              }
-            />
-
-            {hasNextPage && (
-              <FooterAction>
-                <EuiFlexItem>
-                  {!isEmpty(itemsPerRow) && (
-                    <EuiPopover
-                      id="customizablePagination"
-                      data-test-subj="loadingMoreSizeRowPopover"
-                      button={button}
-                      isOpen={this.state.isPopoverOpen}
-                      closePopover={this.closePopover}
-                      panelPaddingSize="none"
-                    >
-                      <EuiContextMenuPanel
-                        items={rowItems}
-                        data-test-subj="loadingMorePickSizeRow"
-                      />
-                    </EuiPopover>
-                  )}
-                </EuiFlexItem>
-
-                <EuiFlexItem grow={false}>
-                  <EuiButton
-                    data-test-subj="loadingMoreButton"
-                    isLoading={loading}
-                    onClick={this.props.loadMore}
-                    size="s"
-                  >
-                    {loading ? `${i18n.LOADING}` : i18n.LOAD_MORE}
-                  </EuiButton>
-                </EuiFlexItem>
-              </FooterAction>
-            )}
-
-            {loading && <Loader data-test-subj="loadingPanelLoadMoreTable" overlay size="xl" />}
-          </>
-        )}
-      </Panel>
-    );
-  }
-
-  private mouseEnter = () => {
-    this.setState(prevState => ({
-      ...prevState,
-      showInspect: true,
-    }));
-  };
-
-  private mouseLeave = () => {
-    this.setState(prevState => ({
-      ...prevState,
-      showInspect: false,
-    }));
-  };
-
-  private onButtonClick = () => {
-    this.setState(prevState => ({
-      ...prevState,
-      isPopoverOpen: !prevState.isPopoverOpen,
-    }));
-  };
-
-  private closePopover = () => {
-    this.setState(prevState => ({
-      ...prevState,
-      isPopoverOpen: false,
-    }));
-  };
-}
-
-const BasicTable = styled(EuiBasicTable)`
-  tbody {
-    th,
-    td {
-      vertical-align: top;
-    }
-
-    .euiTableCellContent {
-      display: block;
-    }
-  }
-`;
-
-BasicTable.displayName = 'BasicTable';
-
-const FooterAction = styled(EuiFlexGroup).attrs({
-  alignItems: 'center',
-  responsive: false,
-})`
-  margin-top: ${props => props.theme.eui.euiSizeXS};
-`;
-
-FooterAction.displayName = 'FooterAction';
diff --git a/x-pack/legacy/plugins/siem/public/components/load_more_table/translations.ts b/x-pack/legacy/plugins/siem/public/components/load_more_table/translations.ts
deleted file mode 100644
index ec093f97216247..00000000000000
--- a/x-pack/legacy/plugins/siem/public/components/load_more_table/translations.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { i18n } from '@kbn/i18n';
-
-export const LOADING = i18n.translate('xpack.siem.loadMoreTable.loadingButtonLabel', {
-  defaultMessage: 'Loading…',
-});
-
-export const LOAD_MORE = i18n.translate('xpack.siem.loadMoreTable.loadMoreButtonLabel', {
-  defaultMessage: 'Load more',
-});
-
-export const SHOWING = i18n.translate('xpack.siem.loadMoreTable.showingSubtitle', {
-  defaultMessage: 'Showing',
-});
-
-export const ROWS = i18n.translate('xpack.siem.loadMoreTable.rowsButtonLabel', {
-  defaultMessage: 'Rows per page',
-});
diff --git a/x-pack/legacy/plugins/siem/public/components/loader/index.tsx b/x-pack/legacy/plugins/siem/public/components/loader/index.tsx
index fe759b2da6f6f2..988fa4a677d7ae 100644
--- a/x-pack/legacy/plugins/siem/public/components/loader/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/loader/index.tsx
@@ -12,26 +12,26 @@ import {
   EuiLoadingSpinnerSize,
   EuiText,
 } from '@elastic/eui';
+import { rgba } from 'polished';
 import React from 'react';
 import { pure } from 'recompose';
 import styled, { css } from 'styled-components';
 
 const Aside = styled.aside<{ overlay?: boolean; overlayBackground?: string }>`
-  ${props => css`
-    padding: ${props.theme.eui.paddingSizes.m};
+  ${({ overlay, overlayBackground, theme }) => css`
+    padding: ${theme.eui.paddingSizes.m};
 
-    ${props.overlay &&
+    ${overlay &&
       `
       background: ${
-        props.overlayBackground ? props.overlayBackground : props.theme.eui.euiColorEmptyShade
+        overlayBackground ? rgba(overlayBackground, 0.9) : rgba(theme.eui.euiColorEmptyShade, 0.9)
       };
       bottom: 0;
       left: 0;
-      opacity: 0.9; // Michael - Using opacity instead of rgba because styled components don't support hex colors in rgba
       position: absolute;
       right: 0;
       top: 0;
-      z-index: 3;
+      z-index: ${theme.eui.euiZLevel1};
     `}
   `}
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/matrix_over_time/index.tsx b/x-pack/legacy/plugins/siem/public/components/matrix_over_time/index.tsx
index f95b9e6b3ecf5d..2898541a4a3d10 100644
--- a/x-pack/legacy/plugins/siem/public/components/matrix_over_time/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/matrix_over_time/index.tsx
@@ -53,7 +53,7 @@ const getBarchartConfigs = (from: number, to: number, onBrushEnd: UpdateDateRang
     showLegend: true,
     theme: {
       scales: {
-        barsPadding: 0.05,
+        barsPadding: 0.08,
       },
       chartMargins: {
         left: 0,
diff --git a/x-pack/legacy/plugins/siem/public/components/ml/permissions/ml_capabilities_provider.tsx b/x-pack/legacy/plugins/siem/public/components/ml/permissions/ml_capabilities_provider.tsx
index b2470bc0f5abd4..0956e93829e5ab 100644
--- a/x-pack/legacy/plugins/siem/public/components/ml/permissions/ml_capabilities_provider.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/ml/permissions/ml_capabilities_provider.tsx
@@ -21,7 +21,7 @@ export const MlCapabilitiesContext = React.createContext<MlCapabilities>(emptyMl
 MlCapabilitiesContext.displayName = 'MlCapabilitiesContext';
 
 export const MlCapabilitiesProvider = React.memo<{ children: JSX.Element }>(({ children }) => {
-  const [capabilities, setCapabilities] = useState(emptyMlCapabilities);
+  const [capabilities, setCapabilities] = useState<MlCapabilities>(emptyMlCapabilities);
   const [, dispatchToaster] = useStateToaster();
   const [kbnVersion] = useKibanaUiSetting(DEFAULT_KBN_VERSION);
 
diff --git a/x-pack/legacy/plugins/siem/public/components/ml/tables/get_anomalies_host_table_columns.test.tsx b/x-pack/legacy/plugins/siem/public/components/ml/tables/get_anomalies_host_table_columns.test.tsx
index 3a1fcbb653efec..04fed8e4fff3f0 100644
--- a/x-pack/legacy/plugins/siem/public/components/ml/tables/get_anomalies_host_table_columns.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/ml/tables/get_anomalies_host_table_columns.test.tsx
@@ -8,7 +8,7 @@ import { getAnomaliesHostTableColumnsCurated } from './get_anomalies_host_table_
 import { HostsType } from '../../../store/hosts/model';
 import * as i18n from './translations';
 import { AnomaliesByHost, Anomaly } from '../types';
-import { Columns } from '../../load_more_table';
+import { Columns } from '../../paginated_table';
 import { TestProviders } from '../../../mock';
 import { mount } from 'enzyme';
 import React from 'react';
diff --git a/x-pack/legacy/plugins/siem/public/components/ml/tables/get_anomalies_host_table_columns.tsx b/x-pack/legacy/plugins/siem/public/components/ml/tables/get_anomalies_host_table_columns.tsx
index f0cf2e5a6e662d..6650449dd8200d 100644
--- a/x-pack/legacy/plugins/siem/public/components/ml/tables/get_anomalies_host_table_columns.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/ml/tables/get_anomalies_host_table_columns.tsx
@@ -7,7 +7,7 @@
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiLink } from '@elastic/eui';
 import moment from 'moment';
-import { Columns } from '../../load_more_table';
+import { Columns } from '../../paginated_table';
 import { AnomaliesByHost, Anomaly, NarrowDateRange } from '../types';
 import { getRowItemDraggable } from '../../tables/helpers';
 import { EntityDraggable } from '../entity_draggable';
diff --git a/x-pack/legacy/plugins/siem/public/components/ml/tables/get_anomalies_network_table_columns.test.tsx b/x-pack/legacy/plugins/siem/public/components/ml/tables/get_anomalies_network_table_columns.test.tsx
index d063ed023bca6a..768c7af8f4b2c9 100644
--- a/x-pack/legacy/plugins/siem/public/components/ml/tables/get_anomalies_network_table_columns.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/ml/tables/get_anomalies_network_table_columns.test.tsx
@@ -8,7 +8,7 @@ import { getAnomaliesNetworkTableColumnsCurated } from './get_anomalies_network_
 import { NetworkType } from '../../../store/network/model';
 import * as i18n from './translations';
 import { AnomaliesByNetwork, Anomaly } from '../types';
-import { Columns } from '../../load_more_table';
+import { Columns } from '../../paginated_table';
 import { mount } from 'enzyme';
 import React from 'react';
 import { TestProviders } from '../../../mock';
diff --git a/x-pack/legacy/plugins/siem/public/components/ml/tables/get_anomalies_network_table_columns.tsx b/x-pack/legacy/plugins/siem/public/components/ml/tables/get_anomalies_network_table_columns.tsx
index fb43175686e3d7..1e1628fb077dd4 100644
--- a/x-pack/legacy/plugins/siem/public/components/ml/tables/get_anomalies_network_table_columns.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/ml/tables/get_anomalies_network_table_columns.tsx
@@ -7,7 +7,7 @@
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiLink } from '@elastic/eui';
 import moment from 'moment';
-import { Columns } from '../../load_more_table';
+import { Columns } from '../../paginated_table';
 import { Anomaly, NarrowDateRange, AnomaliesByNetwork } from '../types';
 import { getRowItemDraggable } from '../../tables/helpers';
 import { EntityDraggable } from '../entity_draggable';
diff --git a/x-pack/legacy/plugins/siem/public/components/ml/tables/translations.ts b/x-pack/legacy/plugins/siem/public/components/ml/tables/translations.ts
index 52865c7227df0e..ada2dbf34e5188 100644
--- a/x-pack/legacy/plugins/siem/public/components/ml/tables/translations.ts
+++ b/x-pack/legacy/plugins/siem/public/components/ml/tables/translations.ts
@@ -41,7 +41,7 @@ export const ENTITY = i18n.translate('xpack.siem.ml.table.entityTitle', {
 });
 
 export const DETECTOR = i18n.translate('xpack.siem.ml.table.detectorTitle', {
-  defaultMessage: 'Job name',
+  defaultMessage: 'Job',
 });
 
 export const NETWORK_NAME = i18n.translate('xpack.siem.ml.table.networkNameTitle', {
diff --git a/x-pack/legacy/plugins/siem/public/components/navigation/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/navigation/index.test.tsx
index 25ebb8ad89ecd1..96cb85b246a49b 100644
--- a/x-pack/legacy/plugins/siem/public/components/navigation/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/navigation/index.test.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import * as React from 'react';
 
 import { CONSTANTS } from '../url_state/constants';
@@ -63,7 +63,7 @@ describe('SIEM Navigation', () => {
     },
     [CONSTANTS.timelineId]: '',
   };
-  const wrapper = shallow(<SiemNavigationComponent {...mockProps} />);
+  const wrapper = mount(<SiemNavigationComponent {...mockProps} />);
   test('it calls setBreadcrumbs with correct path on mount', () => {
     expect(setBreadcrumbs).toHaveBeenNthCalledWith(1, {
       detailName: undefined,
diff --git a/x-pack/legacy/plugins/siem/public/components/navigation/index.tsx b/x-pack/legacy/plugins/siem/public/components/navigation/index.tsx
index 6c5cac1464e79c..06f7a2ffb05661 100644
--- a/x-pack/legacy/plugins/siem/public/components/navigation/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/navigation/index.tsx
@@ -5,7 +5,7 @@
  */
 
 import { isEqual } from 'lodash/fp';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 
@@ -27,78 +27,23 @@ import { TabNavigation } from './tab_navigation';
 import { TabNavigationProps } from './tab_navigation/types';
 import { SiemNavigationComponentProps } from './types';
 
-export class SiemNavigationComponent extends React.Component<TabNavigationProps & RouteSpyState> {
-  public shouldComponentUpdate(nextProps: Readonly<TabNavigationProps & RouteSpyState>): boolean {
-    if (
-      this.props.pathName === nextProps.pathName &&
-      this.props.search === nextProps.search &&
-      isEqual(this.props.hosts, nextProps.hosts) &&
-      isEqual(this.props.hostDetails, nextProps.hostDetails) &&
-      isEqual(this.props.network, nextProps.network) &&
-      isEqual(this.props.navTabs, nextProps.navTabs) &&
-      isEqual(this.props.timerange, nextProps.timerange) &&
-      isEqual(this.props.timelineId, nextProps.timelineId)
-    ) {
-      return false;
-    }
-    return true;
-  }
-
-  public componentWillMount(): void {
-    const {
-      detailName,
-      hosts,
-      hostDetails,
-      navTabs,
-      network,
-      pageName,
-      pathName,
-      search,
-      tabName,
-      timerange,
-      timelineId,
-    } = this.props;
-    if (pathName) {
-      setBreadcrumbs({
-        detailName,
-        hosts,
-        hostDetails,
-        navTabs,
-        network,
-        pageName,
-        pathName,
-        search,
-        tabName,
-        timerange,
-        timelineId,
-      });
-    }
-  }
-
-  public componentWillReceiveProps(nextProps: Readonly<RouteSpyState & TabNavigationProps>): void {
-    if (
-      this.props.pathName !== nextProps.pathName ||
-      this.props.search !== nextProps.search ||
-      !isEqual(this.props.hosts, nextProps.hosts) ||
-      !isEqual(this.props.hostDetails, nextProps.hostDetails) ||
-      !isEqual(this.props.network, nextProps.network) ||
-      !isEqual(this.props.navTabs, nextProps.navTabs) ||
-      !isEqual(this.props.timerange, nextProps.timerange) ||
-      !isEqual(this.props.timelineId, nextProps.timelineId)
-    ) {
-      const {
-        detailName,
-        hosts,
-        hostDetails,
-        navTabs,
-        network,
-        pageName,
-        pathName,
-        search,
-        tabName,
-        timelineId,
-        timerange,
-      } = nextProps;
+export const SiemNavigationComponent = React.memo<TabNavigationProps & RouteSpyState>(
+  ({
+    detailName,
+    display,
+    hostDetails,
+    hosts,
+    navTabs,
+    network,
+    pageName,
+    pathName,
+    search,
+    showBorder,
+    tabName,
+    timelineId,
+    timerange,
+  }) => {
+    useEffect(() => {
       if (pathName) {
         setBreadcrumbs({
           detailName,
@@ -114,23 +59,8 @@ export class SiemNavigationComponent extends React.Component<TabNavigationProps
           timelineId,
         });
       }
-    }
-  }
+    }, [pathName, search, hosts, hostDetails, network, navTabs, timerange, timelineId]);
 
-  public render() {
-    const {
-      display,
-      hostDetails,
-      hosts,
-      navTabs,
-      network,
-      pageName,
-      pathName,
-      showBorder,
-      tabName,
-      timelineId,
-      timerange,
-    } = this.props;
     return (
       <TabNavigation
         display={display}
@@ -146,8 +76,22 @@ export class SiemNavigationComponent extends React.Component<TabNavigationProps
         timerange={timerange}
       />
     );
+  },
+  (prevProps, nextProps) => {
+    return (
+      prevProps.pathName === nextProps.pathName &&
+      prevProps.search === nextProps.search &&
+      isEqual(prevProps.hosts, nextProps.hosts) &&
+      isEqual(prevProps.hostDetails, nextProps.hostDetails) &&
+      isEqual(prevProps.network, nextProps.network) &&
+      isEqual(prevProps.navTabs, nextProps.navTabs) &&
+      isEqual(prevProps.timerange, nextProps.timerange) &&
+      isEqual(prevProps.timelineId, nextProps.timelineId)
+    );
   }
-}
+);
+
+SiemNavigationComponent.displayName = 'SiemNavigationComponent';
 
 const makeMapStateToProps = () => {
   const getInputsSelector = inputsSelectors.inputsSelector();
diff --git a/x-pack/legacy/plugins/siem/public/components/navigation/tab_navigation/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/navigation/tab_navigation/index.test.tsx
index b6ec9e5ee0e029..61a0ec9c06c2d0 100644
--- a/x-pack/legacy/plugins/siem/public/components/navigation/tab_navigation/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/navigation/tab_navigation/index.test.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import * as React from 'react';
 
 import { TabNavigation } from './';
@@ -74,8 +74,8 @@ describe('Tab Navigation', () => {
       expect(hostsTab.prop('isSelected')).toBeTruthy();
     });
     test('it changes active tab when nav changes by props', () => {
-      const wrapper = shallow(<TabNavigation {...mockProps} />);
-      const networkTab = () => wrapper.find('[data-test-subj="navigation-network"]');
+      const wrapper = mount(<TabNavigation {...mockProps} />);
+      const networkTab = () => wrapper.find('[data-test-subj="navigation-network"]').first();
       expect(networkTab().prop('isSelected')).toBeFalsy();
       wrapper.setProps({
         pageName: 'network',
@@ -151,9 +151,9 @@ describe('Tab Navigation', () => {
       expect(tableNavigationTab.prop('isSelected')).toBeTruthy();
     });
     test('it changes active tab when nav changes by props', () => {
-      const wrapper = shallow(<TabNavigation {...mockProps} />);
+      const wrapper = mount(<TabNavigation {...mockProps} />);
       const tableNavigationTab = () =>
-        wrapper.find(`[data-test-subj="navigation-${HostsTableType.events}"]`);
+        wrapper.find(`[data-test-subj="navigation-${HostsTableType.events}"]`).first();
       expect(tableNavigationTab().prop('isSelected')).toBeFalsy();
       wrapper.setProps({
         pageName: SiemPageName.hosts,
diff --git a/x-pack/legacy/plugins/siem/public/components/navigation/tab_navigation/index.tsx b/x-pack/legacy/plugins/siem/public/components/navigation/tab_navigation/index.tsx
index 9a409b9f53d8ce..c62335ea1c06db 100644
--- a/x-pack/legacy/plugins/siem/public/components/navigation/tab_navigation/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/navigation/tab_navigation/index.tsx
@@ -4,14 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { EuiTab, EuiTabs, EuiLink } from '@elastic/eui';
-import { get, getOr } from 'lodash/fp';
+import { getOr } from 'lodash/fp';
 
-import * as React from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import classnames from 'classnames';
 
 import { trackUiAction as track, METRIC_TYPE, TELEMETRY_EVENT } from '../../../lib/track_usage';
-import { HostsTableType } from '../../../store/hosts/model';
 import { getSearch } from '../helpers';
 import { TabNavigationProps } from './types';
 
@@ -36,71 +35,51 @@ const TabContainer = styled.div`
 
 TabContainer.displayName = 'TabContainer';
 
-interface TabNavigationState {
-  selectedTabId: string;
-}
-
-export class TabNavigation extends React.PureComponent<TabNavigationProps, TabNavigationState> {
-  constructor(props: TabNavigationProps) {
-    super(props);
-    const selectedTabId = this.mapLocationToTab(props.pageName, props.tabName);
-    this.state = { selectedTabId };
-  }
-  public componentWillReceiveProps(nextProps: TabNavigationProps): void {
-    const selectedTabId = this.mapLocationToTab(nextProps.pageName, nextProps.tabName);
-
-    if (this.state.selectedTabId !== selectedTabId) {
-      this.setState(prevState => ({
-        ...prevState,
-        selectedTabId,
-      }));
-    }
-  }
-  public render() {
-    const { display = 'condensed' } = this.props;
-    return (
-      <EuiTabs display={display} size="m">
-        {this.renderTabs()}
-      </EuiTabs>
-    );
-  }
-
-  public mapLocationToTab = (pageName: string, tabName?: HostsTableType): string => {
-    const { navTabs } = this.props;
+export const TabNavigation = React.memo<TabNavigationProps>(props => {
+  const { display = 'condensed', navTabs, pageName, showBorder, tabName } = props;
+  const mapLocationToTab = (): string => {
     return getOr(
       '',
       'id',
       Object.values(navTabs).find(item => tabName === item.id || pageName === item.id)
     );
   };
+  const [selectedTabId, setSelectedTabId] = useState(mapLocationToTab());
+  useEffect(() => {
+    const currentTabSelected = mapLocationToTab();
 
-  private renderTabs = (): JSX.Element[] => {
-    const { navTabs } = this.props;
-    return Object.keys(navTabs).map(tabName => {
-      const tab = get(tabName, navTabs);
-      return (
-        <TabContainer
-          className={classnames({ euiTab: true, showBorder: this.props.showBorder })}
-          key={`navigation-${tab.id}`}
+    if (currentTabSelected !== selectedTabId) {
+      setSelectedTabId(currentTabSelected);
+    }
+  }, [pageName, tabName]);
+
+  const renderTabs = (): JSX.Element[] =>
+    Object.values(navTabs).map(tab => (
+      <TabContainer
+        className={classnames({ euiTab: true, showBorder })}
+        key={`navigation-${tab.id}`}
+      >
+        <EuiLink
+          data-test-subj={`navigation-link-${tab.id}`}
+          href={tab.href + getSearch(tab, props)}
         >
-          <EuiLink
-            data-test-subj={`navigation-link-${tab.id}`}
-            href={tab.href + getSearch(tab, this.props)}
+          <EuiTab
+            data-href={tab.href}
+            data-test-subj={`navigation-${tab.id}`}
+            disabled={tab.disabled}
+            isSelected={selectedTabId === tab.id}
+            onClick={() => {
+              track(METRIC_TYPE.CLICK, `${TELEMETRY_EVENT.TAB_CLICKED}${tab.id}`);
+            }}
           >
-            <EuiTab
-              data-href={tab.href}
-              data-test-subj={`navigation-${tab.id}`}
-              disabled={tab.disabled}
-              isSelected={this.state.selectedTabId === tab.id}
-              onClick={() => {
-                track(METRIC_TYPE.CLICK, `${TELEMETRY_EVENT.TAB_CLICKED}${tab.id}`);
-              }}
-            >
-              {tab.name}
-            </EuiTab>
-          </EuiLink>
-        </TabContainer>
-      );
-    });
-  };
-}
+            {tab.name}
+          </EuiTab>
+        </EuiLink>
+      </TabContainer>
+    ));
+  return (
+    <EuiTabs display={display} size="m">
+      {renderTabs()}
+    </EuiTabs>
+  );
+});
diff --git a/x-pack/legacy/plugins/siem/public/components/notes/index.tsx b/x-pack/legacy/plugins/siem/public/components/notes/index.tsx
index 8eaf368058631b..29f7686ade88b5 100644
--- a/x-pack/legacy/plugins/siem/public/components/notes/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/notes/index.tsx
@@ -5,7 +5,7 @@
  */
 
 import { EuiInMemoryTable, EuiModalBody, EuiModalHeader, EuiPanel, EuiSpacer } from '@elastic/eui';
-import * as React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 
 import { Note } from '../../lib/note';
@@ -23,10 +23,6 @@ interface Props {
   updateNote: UpdateNote;
 }
 
-interface State {
-  newNote: string;
-}
-
 const NotesPanel = styled(EuiPanel)`
   height: ${NOTES_PANEL_HEIGHT}px;
   width: ${NOTES_PANEL_WIDTH}px;
@@ -47,15 +43,9 @@ const InMemoryTable = styled(EuiInMemoryTable)`
 InMemoryTable.displayName = 'InMemoryTable';
 
 /** A view for entering and reviewing notes */
-export class Notes extends React.PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = { newNote: '' };
-  }
-
-  public render() {
-    const { associateNote, getNotesByIds, getNewNoteId, noteIds, updateNote } = this.props;
+export const Notes = React.memo<Props>(
+  ({ associateNote, getNotesByIds, getNewNoteId, noteIds, updateNote }) => {
+    const [newNote, setNewNote] = useState('');
 
     return (
       <NotesPanel>
@@ -67,8 +57,8 @@ export class Notes extends React.PureComponent<Props, State> {
           <AddNote
             associateNote={associateNote}
             getNewNoteId={getNewNoteId}
-            newNote={this.state.newNote}
-            updateNewNote={this.updateNewNote}
+            newNote={newNote}
+            updateNewNote={setNewNote}
             updateNote={updateNote}
           />
           <EuiSpacer size="s" />
@@ -84,8 +74,6 @@ export class Notes extends React.PureComponent<Props, State> {
       </NotesPanel>
     );
   }
+);
 
-  private updateNewNote = (newNote: string): void => {
-    this.setState({ newNote });
-  };
-}
+Notes.displayName = 'Notes';
diff --git a/x-pack/legacy/plugins/siem/public/components/notes/note_cards/index.tsx b/x-pack/legacy/plugins/siem/public/components/notes/note_cards/index.tsx
index 8ea0f8ee8bb214..aa9415aadeda16 100644
--- a/x-pack/legacy/plugins/siem/public/components/notes/note_cards/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/notes/note_cards/index.tsx
@@ -5,54 +5,42 @@
  */
 
 import { EuiFlexGroup, EuiPanel } from '@elastic/eui';
-import * as React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 
 import { Note } from '../../../lib/note';
 import { AddNote } from '../add_note';
 import { AssociateNote, GetNewNoteId, UpdateNote } from '../helpers';
 import { NoteCard } from '../note_card';
-import { useTimelineWidthContext } from '../../timeline/timeline_context';
 
 const AddNoteContainer = styled.div``;
-
 AddNoteContainer.displayName = 'AddNoteContainer';
 
 const NoteContainer = styled.div`
   margin-top: 5px;
 `;
-
 NoteContainer.displayName = 'NoteContainer';
 
 interface NoteCardsCompProps {
   children: React.ReactNode;
 }
 
-const NoteCardsComp = React.memo<NoteCardsCompProps>(({ children }) => {
-  const width = useTimelineWidthContext();
-
-  // Passing the styles directly to the component because the width is
-  // being calculated and is recommended by Styled Components for performance
-  // https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
-  return (
-    <EuiPanel
-      data-test-subj="note-cards"
-      hasShadow={false}
-      paddingSize="none"
-      style={{ width: `${width - 10}px`, border: 'none' }}
-    >
-      {children}
-    </EuiPanel>
-  );
-});
-
+const NoteCardsComp = React.memo<NoteCardsCompProps>(({ children }) => (
+  <EuiPanel
+    data-test-subj="note-cards"
+    hasShadow={false}
+    paddingSize="none"
+    style={{ border: 'none' }}
+  >
+    {children}
+  </EuiPanel>
+));
 NoteCardsComp.displayName = 'NoteCardsComp';
 
 const NotesContainer = styled(EuiFlexGroup)`
   padding: 0 5px;
   margin-bottom: 5px;
 `;
-
 NotesContainer.displayName = 'NotesContainer';
 
 interface Props {
@@ -65,27 +53,23 @@ interface Props {
   updateNote: UpdateNote;
 }
 
-interface State {
-  newNote: string;
-}
-
 /** A view for entering and reviewing notes */
-export class NoteCards extends React.PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = { newNote: '' };
-  }
-
-  public render() {
-    const {
-      getNotesByIds,
-      getNewNoteId,
-      noteIds,
-      showAddNote,
-      toggleShowAddNote,
-      updateNote,
-    } = this.props;
+export const NoteCards = React.memo<Props>(
+  ({
+    associateNote,
+    getNotesByIds,
+    getNewNoteId,
+    noteIds,
+    showAddNote,
+    toggleShowAddNote,
+    updateNote,
+  }) => {
+    const [newNote, setNewNote] = useState('');
+
+    const associateNoteAndToggleShow = (noteId: string) => {
+      associateNote(noteId);
+      toggleShowAddNote();
+    };
 
     return (
       <NoteCardsComp>
@@ -102,11 +86,11 @@ export class NoteCards extends React.PureComponent<Props, State> {
         {showAddNote ? (
           <AddNoteContainer data-test-subj="add-note-container">
             <AddNote
-              associateNote={this.associateNoteAndToggleShow}
+              associateNote={associateNoteAndToggleShow}
               getNewNoteId={getNewNoteId}
-              newNote={this.state.newNote}
+              newNote={newNote}
               onCancelAddNote={toggleShowAddNote}
-              updateNewNote={this.updateNewNote}
+              updateNewNote={setNewNote}
               updateNote={updateNote}
             />
           </AddNoteContainer>
@@ -114,13 +98,6 @@ export class NoteCards extends React.PureComponent<Props, State> {
       </NoteCardsComp>
     );
   }
+);
 
-  private associateNoteAndToggleShow = (noteId: string) => {
-    this.props.associateNote(noteId);
-    this.props.toggleShowAddNote();
-  };
-
-  private updateNewNote = (newNote: string): void => {
-    this.setState({ newNote });
-  };
-}
+NoteCards.displayName = 'NoteCards';
diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/delete_timeline_modal/delete_timeline_modal.test.tsx b/x-pack/legacy/plugins/siem/public/components/open_timeline/delete_timeline_modal/delete_timeline_modal.test.tsx
index e91feed536f93c..917ec3f1bf0b86 100644
--- a/x-pack/legacy/plugins/siem/public/components/open_timeline/delete_timeline_modal/delete_timeline_modal.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/open_timeline/delete_timeline_modal/delete_timeline_modal.test.tsx
@@ -17,7 +17,7 @@ describe('DeleteTimelineModal', () => {
       <DeleteTimelineModal
         title="Privilege Escalation"
         onDelete={jest.fn()}
-        toggleShowModal={jest.fn()}
+        closeModal={jest.fn()}
       />
     );
 
@@ -34,7 +34,7 @@ describe('DeleteTimelineModal', () => {
       <DeleteTimelineModal
         title="    Leading and trailing whitespace    "
         onDelete={jest.fn()}
-        toggleShowModal={jest.fn()}
+        closeModal={jest.fn()}
       />
     );
 
@@ -48,7 +48,7 @@ describe('DeleteTimelineModal', () => {
 
   test('it displays `Untitled Timeline` in the title when title is undefined', () => {
     const wrapper = mountWithIntl(
-      <DeleteTimelineModal onDelete={jest.fn()} toggleShowModal={jest.fn()} />
+      <DeleteTimelineModal onDelete={jest.fn()} closeModal={jest.fn()} />
     );
 
     expect(
@@ -61,7 +61,7 @@ describe('DeleteTimelineModal', () => {
 
   test('it displays `Untitled Timeline` in the title when title is null', () => {
     const wrapper = mountWithIntl(
-      <DeleteTimelineModal onDelete={jest.fn()} title={null} toggleShowModal={jest.fn()} />
+      <DeleteTimelineModal onDelete={jest.fn()} title={null} closeModal={jest.fn()} />
     );
 
     expect(
@@ -74,7 +74,7 @@ describe('DeleteTimelineModal', () => {
 
   test('it displays `Untitled Timeline` in the title when title is just whitespace', () => {
     const wrapper = mountWithIntl(
-      <DeleteTimelineModal onDelete={jest.fn()} title={'    '} toggleShowModal={jest.fn()} />
+      <DeleteTimelineModal onDelete={jest.fn()} title={'    '} closeModal={jest.fn()} />
     );
 
     expect(
@@ -90,7 +90,7 @@ describe('DeleteTimelineModal', () => {
       <DeleteTimelineModal
         title="Privilege Escalation"
         onDelete={jest.fn()}
-        toggleShowModal={jest.fn()}
+        closeModal={jest.fn()}
       />
     );
 
@@ -102,14 +102,14 @@ describe('DeleteTimelineModal', () => {
     ).toEqual(i18n.DELETE_WARNING);
   });
 
-  test('it invokes toggleShowModal when the Cancel button is clicked', () => {
-    const toggleShowModal = jest.fn();
+  test('it invokes closeModal when the Cancel button is clicked', () => {
+    const closeModal = jest.fn();
 
     const wrapper = mountWithIntl(
       <DeleteTimelineModal
         title="Privilege Escalation"
         onDelete={jest.fn()}
-        toggleShowModal={toggleShowModal}
+        closeModal={closeModal}
       />
     );
 
@@ -118,7 +118,7 @@ describe('DeleteTimelineModal', () => {
       .first()
       .simulate('click');
 
-    expect(toggleShowModal).toBeCalled();
+    expect(closeModal).toBeCalled();
   });
 
   test('it invokes onDelete when the Delete button is clicked', () => {
@@ -128,7 +128,7 @@ describe('DeleteTimelineModal', () => {
       <DeleteTimelineModal
         title="Privilege Escalation"
         onDelete={onDelete}
-        toggleShowModal={jest.fn()}
+        closeModal={jest.fn()}
       />
     );
 
diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/delete_timeline_modal/delete_timeline_modal.tsx b/x-pack/legacy/plugins/siem/public/components/open_timeline/delete_timeline_modal/delete_timeline_modal.tsx
index 9c416419066e66..e9e438a8c5e2e2 100644
--- a/x-pack/legacy/plugins/siem/public/components/open_timeline/delete_timeline_modal/delete_timeline_modal.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/open_timeline/delete_timeline_modal/delete_timeline_modal.tsx
@@ -14,7 +14,7 @@ import * as i18n from '../translations';
 interface Props {
   title?: string | null;
   onDelete: () => void;
-  toggleShowModal: () => void;
+  closeModal: () => void;
 }
 
 export const DELETE_TIMELINE_MODAL_WIDTH = 600; // px
@@ -22,7 +22,7 @@ export const DELETE_TIMELINE_MODAL_WIDTH = 600; // px
 /**
  * Renders a modal that confirms deletion of a timeline
  */
-export const DeleteTimelineModal = pure<Props>(({ title, toggleShowModal, onDelete }) => (
+export const DeleteTimelineModal = pure<Props>(({ title, closeModal, onDelete }) => (
   <EuiConfirmModal
     title={
       <FormattedMessage
@@ -34,7 +34,7 @@ export const DeleteTimelineModal = pure<Props>(({ title, toggleShowModal, onDele
         }}
       />
     }
-    onCancel={toggleShowModal}
+    onCancel={closeModal}
     onConfirm={onDelete}
     cancelButtonText={i18n.CANCEL}
     confirmButtonText={i18n.DELETE}
diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/delete_timeline_modal/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/open_timeline/delete_timeline_modal/index.test.tsx
index 1700e86f57c844..561eac000bbf76 100644
--- a/x-pack/legacy/plugins/siem/public/components/open_timeline/delete_timeline_modal/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/open_timeline/delete_timeline_modal/index.test.tsx
@@ -5,7 +5,6 @@
  */
 
 import { EuiButtonIconProps } from '@elastic/eui';
-import { get } from 'lodash/fp';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import * as React from 'react';
 
@@ -79,35 +78,6 @@ describe('DeleteTimelineModal', () => {
       expect(props.isDisabled).toBe(false);
     });
 
-    test('it defaults showModal to false until the trash button is clicked', () => {
-      const wrapper = mountWithIntl(
-        <DeleteTimelineModalButton
-          deleteTimelines={jest.fn()}
-          savedObjectId={savedObjectId}
-          title="Privilege Escalation"
-        />
-      );
-
-      expect(get('showModal', wrapper.state())).toBe(false);
-    });
-
-    test('it sets showModal to true when the trash button is clicked', () => {
-      const wrapper = mountWithIntl(
-        <DeleteTimelineModalButton
-          deleteTimelines={jest.fn()}
-          savedObjectId={savedObjectId}
-          title="Privilege Escalation"
-        />
-      );
-
-      wrapper
-        .find('[data-test-subj="delete-timeline"]')
-        .first()
-        .simulate('click');
-
-      expect(get('showModal', wrapper.state())).toBe(true);
-    });
-
     test('it does NOT render the modal when showModal is false', () => {
       const wrapper = mountWithIntl(
         <DeleteTimelineModalButton
diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/delete_timeline_modal/index.tsx b/x-pack/legacy/plugins/siem/public/components/open_timeline/delete_timeline_modal/index.tsx
index 539911c1960c7b..caa9cd0689c763 100644
--- a/x-pack/legacy/plugins/siem/public/components/open_timeline/delete_timeline_modal/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/open_timeline/delete_timeline_modal/index.tsx
@@ -5,7 +5,7 @@
  */
 
 import { EuiButtonIcon, EuiModal, EuiToolTip, EuiOverlayMask } from '@elastic/eui';
-import * as React from 'react';
+import React, { useState } from 'react';
 
 import { DeleteTimelineModal, DELETE_TIMELINE_MODAL_WIDTH } from './delete_timeline_modal';
 import * as i18n from '../translations';
@@ -16,23 +16,22 @@ interface Props {
   savedObjectId?: string | null;
   title?: string | null;
 }
-
-interface State {
-  showModal: boolean;
-}
-
 /**
  * Renders a button that when clicked, displays the `Delete Timeline` modal
  */
-export class DeleteTimelineModalButton extends React.PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props);
+export const DeleteTimelineModalButton = React.memo<Props>(
+  ({ deleteTimelines, savedObjectId, title }) => {
+    const [showModal, setShowModal] = useState(false);
 
-    this.state = { showModal: false };
-  }
+    const openModal = () => setShowModal(true);
+    const closeModal = () => setShowModal(false);
 
-  public render() {
-    const { deleteTimelines, savedObjectId, title } = this.props;
+    const onDelete = () => {
+      if (deleteTimelines != null && savedObjectId != null) {
+        deleteTimelines([savedObjectId]);
+      }
+      closeModal();
+    };
 
     return (
       <>
@@ -44,19 +43,19 @@ export class DeleteTimelineModalButton extends React.PureComponent<Props, State>
             iconSize="s"
             iconType="trash"
             isDisabled={deleteTimelines == null || savedObjectId == null || savedObjectId === ''}
-            onClick={this.toggleShowModal}
+            onClick={openModal}
             size="s"
           />
         </EuiToolTip>
 
-        {this.state.showModal ? (
+        {showModal ? (
           <EuiOverlayMask>
-            <EuiModal maxWidth={DELETE_TIMELINE_MODAL_WIDTH} onClose={this.toggleShowModal}>
+            <EuiModal maxWidth={DELETE_TIMELINE_MODAL_WIDTH} onClose={closeModal}>
               <DeleteTimelineModal
                 data-test-subj="delete-timeline-modal"
-                onDelete={this.onDelete}
+                onDelete={onDelete}
                 title={title}
-                toggleShowModal={this.toggleShowModal}
+                closeModal={closeModal}
               />
             </EuiModal>
           </EuiOverlayMask>
@@ -64,20 +63,6 @@ export class DeleteTimelineModalButton extends React.PureComponent<Props, State>
       </>
     );
   }
+);
 
-  private toggleShowModal = () => {
-    this.setState(state => ({
-      showModal: !state.showModal,
-    }));
-  };
-
-  private onDelete = () => {
-    const { deleteTimelines, savedObjectId } = this.props;
-
-    if (deleteTimelines != null && savedObjectId != null) {
-      deleteTimelines([savedObjectId]);
-    }
-
-    this.toggleShowModal();
-  };
-}
+DeleteTimelineModalButton.displayName = 'DeleteTimelineModalButton';
diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/open_timeline/index.test.tsx
index beeb26b424c0c6..7a0caf14af302e 100644
--- a/x-pack/legacy/plugins/siem/public/components/open_timeline/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/open_timeline/index.test.tsx
@@ -5,8 +5,7 @@
  */
 
 import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
-import { mount, ReactWrapper } from 'enzyme';
-import { get } from 'lodash/fp';
+import { mount } from 'enzyme';
 import { MockedProvider } from 'react-apollo/test-utils';
 import * as React from 'react';
 import { ThemeProvider } from 'styled-components';
@@ -22,21 +21,11 @@ import { OPEN_TIMELINE_CLASS_NAME } from './helpers';
 
 jest.mock('../../lib/settings/use_kibana_ui_setting');
 
-const getStateChildComponent = (
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  wrapper: ReactWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>
-): // eslint-disable-next-line @typescript-eslint/no-explicit-any
-React.Component<{}, {}, any> =>
-  wrapper
-    .find('[data-test-subj="stateful-timeline"]')
-    .last()
-    .instance();
-
 describe('StatefulOpenTimeline', () => {
   const theme = () => ({ eui: euiDarkVars, darkMode: true });
   const title = 'All Timelines / Open Timelines';
 
-  test('it has the expected initial state', async () => {
+  test('it has the expected initial state', () => {
     const wrapper = mount(
       <ThemeProvider theme={theme}>
         <TestProviderWithoutDragAndDrop>
@@ -53,15 +42,18 @@ describe('StatefulOpenTimeline', () => {
       </ThemeProvider>
     );
 
-    await wait();
-    wrapper.update();
+    const componentProps = wrapper
+      .find('[data-test-subj="open-timeline"]')
+      .last()
+      .props();
 
-    expect(getStateChildComponent(wrapper).state).toEqual({
+    expect(componentProps).toEqual({
+      ...componentProps,
       itemIdToExpandedNotesRowMap: {},
       onlyFavorites: false,
       pageIndex: 0,
       pageSize: 10,
-      search: '',
+      query: '',
       selectedItems: [],
       sortDirection: 'desc',
       sortField: 'updated',
@@ -69,7 +61,7 @@ describe('StatefulOpenTimeline', () => {
   });
 
   describe('#onQueryChange', () => {
-    test('it updates the query state with the expected trimmed value when the user enters a query', async () => {
+    test('it updates the query state with the expected trimmed value when the user enters a query', () => {
       const wrapper = mount(
         <ThemeProvider theme={theme}>
           <TestProviderWithoutDragAndDrop>
@@ -85,26 +77,15 @@ describe('StatefulOpenTimeline', () => {
           </TestProviderWithoutDragAndDrop>
         </ThemeProvider>
       );
-
-      await wait();
-      wrapper.update();
-
       wrapper
         .find('[data-test-subj="search-bar"] input')
         .simulate('keyup', { keyCode: 13, target: { value: '   abcd   ' } });
-
-      wrapper.update();
-
-      expect(getStateChildComponent(wrapper).state).toEqual({
-        itemIdToExpandedNotesRowMap: {},
-        onlyFavorites: false,
-        pageIndex: 0,
-        pageSize: 10,
-        search: 'abcd',
-        selectedItems: [],
-        sortDirection: 'desc',
-        sortField: 'updated',
-      });
+      expect(
+        wrapper
+          .find('[data-test-subj="search-row"]')
+          .first()
+          .prop('query')
+      ).toEqual('abcd');
     });
 
     test('it appends the word "with" to the Showing in Timelines message when the user enters a query', async () => {
@@ -129,8 +110,6 @@ describe('StatefulOpenTimeline', () => {
         .find('[data-test-subj="search-bar"] input')
         .simulate('keyup', { keyCode: 13, target: { value: '   abcd   ' } });
 
-      wrapper.update();
-
       expect(
         wrapper
           .find('[data-test-subj="query-message"]')
@@ -161,8 +140,6 @@ describe('StatefulOpenTimeline', () => {
         .find('[data-test-subj="search-bar"] input')
         .simulate('keyup', { keyCode: 13, target: { value: '   abcd   ' } });
 
-      wrapper.update();
-
       expect(
         wrapper
           .find('[data-test-subj="selectable-query-text"]')
@@ -226,7 +203,6 @@ describe('StatefulOpenTimeline', () => {
         .find('.euiCheckbox__input')
         .first()
         .simulate('change', { target: { checked: true } });
-      wrapper.update();
 
       wrapper
         .find('[data-test-subj="favorite-selected"]')
@@ -273,7 +249,6 @@ describe('StatefulOpenTimeline', () => {
         .find('.euiCheckbox__input')
         .first()
         .simulate('change', { target: { checked: true } });
-      wrapper.update();
 
       wrapper
         .find('[data-test-subj="delete-selected"]')
@@ -319,14 +294,17 @@ describe('StatefulOpenTimeline', () => {
         .first()
         .simulate('change', { target: { checked: true } });
 
-      wrapper.update();
+      const selectedItems: [] = wrapper
+        .find('[data-test-subj="open-timeline"]')
+        .last()
+        .prop('selectedItems');
 
-      expect(get('selectedItems', getStateChildComponent(wrapper).state).length).toEqual(13); // 13 because we did mock 13 timelines in the query
+      expect(selectedItems.length).toEqual(13); // 13 because we did mock 13 timelines in the query
     });
   });
 
   describe('#onTableChange', () => {
-    test('it updates the sort state when the user clicks on a column to sort it', async () => {
+    test('it updates the sort state when the user clicks on a column to sort it', () => {
       const wrapper = mount(
         <ThemeProvider theme={theme}>
           <TestProviderWithoutDragAndDrop>
@@ -343,32 +321,29 @@ describe('StatefulOpenTimeline', () => {
         </ThemeProvider>
       );
 
-      await wait();
-
-      wrapper.update();
+      expect(
+        wrapper
+          .find('[data-test-subj="open-timeline"]')
+          .last()
+          .prop('sortDirection')
+      ).toEqual('desc');
 
       wrapper
         .find('thead tr th button')
         .at(0)
         .simulate('click');
 
-      wrapper.update();
-
-      expect(getStateChildComponent(wrapper).state).toEqual({
-        itemIdToExpandedNotesRowMap: {},
-        onlyFavorites: false,
-        pageIndex: 0,
-        pageSize: 10,
-        search: '',
-        selectedItems: [],
-        sortDirection: 'asc',
-        sortField: 'updated',
-      });
+      expect(
+        wrapper
+          .find('[data-test-subj="open-timeline"]')
+          .last()
+          .prop('sortDirection')
+      ).toEqual('asc');
     });
   });
 
   describe('#onToggleOnlyFavorites', () => {
-    test('it updates the onlyFavorites state when the user clicks the Only Favorites button', async () => {
+    test('it updates the onlyFavorites state when the user clicks the Only Favorites button', () => {
       const wrapper = mount(
         <ThemeProvider theme={theme}>
           <TestProviderWithoutDragAndDrop>
@@ -385,25 +360,24 @@ describe('StatefulOpenTimeline', () => {
         </ThemeProvider>
       );
 
-      await wait();
+      expect(
+        wrapper
+          .find('[data-test-subj="open-timeline"]')
+          .last()
+          .prop('onlyFavorites')
+      ).toEqual(false);
 
       wrapper
         .find('[data-test-subj="only-favorites-toggle"]')
         .first()
         .simulate('click');
 
-      wrapper.update();
-
-      expect(getStateChildComponent(wrapper).state).toEqual({
-        itemIdToExpandedNotesRowMap: {},
-        onlyFavorites: true,
-        pageIndex: 0,
-        pageSize: 10,
-        search: '',
-        selectedItems: [],
-        sortDirection: 'desc',
-        sortField: 'updated',
-      });
+      expect(
+        wrapper
+          .find('[data-test-subj="open-timeline"]')
+          .last()
+          .prop('onlyFavorites')
+      ).toEqual(true);
     });
   });
 
@@ -426,38 +400,38 @@ describe('StatefulOpenTimeline', () => {
       );
 
       await wait();
-
       wrapper.update();
 
+      expect(
+        wrapper
+          .find('[data-test-subj="open-timeline"]')
+          .last()
+          .prop('itemIdToExpandedNotesRowMap')
+      ).toEqual({});
+
       wrapper
         .find('[data-test-subj="expand-notes"]')
         .first()
         .simulate('click');
 
-      wrapper.update();
-      expect(getStateChildComponent(wrapper).state).toEqual({
-        itemIdToExpandedNotesRowMap: {
-          '10849df0-7b44-11e9-a608-ab3d811609': (
-            <NotePreviews
-              isModal={false}
-              notes={
-                mockOpenTimelineQueryResults[0].result.data!.getAllTimeline.timeline[0].notes !=
-                null
-                  ? mockOpenTimelineQueryResults[0].result.data!.getAllTimeline.timeline[0].notes.map(
-                      note => ({ ...note, savedObjectId: note.noteId })
-                    )
-                  : []
-              }
-            />
-          ),
-        },
-        onlyFavorites: false,
-        pageIndex: 0,
-        pageSize: 10,
-        search: '',
-        selectedItems: [],
-        sortDirection: 'desc',
-        sortField: 'updated',
+      expect(
+        wrapper
+          .find('[data-test-subj="open-timeline"]')
+          .last()
+          .prop('itemIdToExpandedNotesRowMap')
+      ).toEqual({
+        '10849df0-7b44-11e9-a608-ab3d811609': (
+          <NotePreviews
+            isModal={false}
+            notes={
+              mockOpenTimelineQueryResults[0].result.data!.getAllTimeline.timeline[0].notes != null
+                ? mockOpenTimelineQueryResults[0].result.data!.getAllTimeline.timeline[0].notes.map(
+                    note => ({ ...note, savedObjectId: note.noteId })
+                  )
+                : []
+            }
+          />
+        ),
       });
     });
 
@@ -487,8 +461,6 @@ describe('StatefulOpenTimeline', () => {
         .first()
         .simulate('click');
 
-      wrapper.update();
-
       expect(
         wrapper
           .find('[data-test-subj="note-previews-container"]')
@@ -520,7 +492,7 @@ describe('StatefulOpenTimeline', () => {
 
     expect(
       wrapper
-        .find('[data-test-subj="panel_headline_title"]')
+        .find('[data-test-subj="header-panel-title"]')
         .first()
         .text()
     ).toEqual(title);
@@ -543,25 +515,23 @@ describe('StatefulOpenTimeline', () => {
           </TestProviderWithoutDragAndDrop>
         </ThemeProvider>
       );
-
+      const getSelectedItem = (): [] =>
+        wrapper
+          .find('[data-test-subj="open-timeline"]')
+          .last()
+          .prop('selectedItems');
       await wait();
-
-      wrapper.update();
-
+      expect(getSelectedItem().length).toEqual(0);
       wrapper
         .find('.euiCheckbox__input')
         .first()
         .simulate('change', { target: { checked: true } });
-      wrapper.update();
-
+      expect(getSelectedItem().length).toEqual(13);
       wrapper
         .find('[data-test-subj="delete-selected"]')
         .first()
         .simulate('click');
-
-      wrapper.update();
-
-      expect(get('selectedItems', getStateChildComponent(wrapper).state).length).toEqual(0);
+      expect(getSelectedItem().length).toEqual(0);
     });
   });
 
diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/index.tsx b/x-pack/legacy/plugins/siem/public/components/open_timeline/index.tsx
index c686228ed31e8f..d101d1f4d39f41 100644
--- a/x-pack/legacy/plugins/siem/public/components/open_timeline/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/open_timeline/index.tsx
@@ -5,7 +5,7 @@
  */
 
 import ApolloClient from 'apollo-client';
-import * as React from 'react';
+import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 
 import { Dispatch } from 'redux';
@@ -43,25 +43,6 @@ import {
 import { DEFAULT_SORT_FIELD, DEFAULT_SORT_DIRECTION } from './constants';
 import { ColumnHeader } from '../timeline/body/column_headers/column_header';
 
-export interface OpenTimelineState {
-  /** Required by EuiTable for expandable rows: a map of `TimelineResult.savedObjectId` to rendered notes */
-  itemIdToExpandedNotesRowMap: Record<string, JSX.Element>;
-  /** Only query for favorite timelines when true */
-  onlyFavorites: boolean;
-  /** The requested page of results */
-  pageIndex: number;
-  /** The requested size of each page of search results */
-  pageSize: number;
-  /** The current search criteria */
-  search: string;
-  /** The currently-selected timelines in the table */
-  selectedItems: OpenTimelineResult[];
-  /** The requested sort direction of the query results */
-  sortDirection: 'asc' | 'desc';
-  /** The requested field to sort on */
-  sortField: string;
-}
-
 interface OwnProps<TCache = object> {
   apolloClient: ApolloClient<TCache>;
   /** Displays open timeline in modal */
@@ -85,70 +66,208 @@ export const getSelectedTimelineIds = (selectedItems: OpenTimelineResult[]): str
   );
 
 /** Manages the state (e.g table selection) of the (pure) `OpenTimeline` component */
-export class StatefulOpenTimelineComponent extends React.PureComponent<
-  OpenTimelineOwnProps,
-  OpenTimelineState
-> {
-  constructor(props: OpenTimelineOwnProps) {
-    super(props);
+export const StatefulOpenTimelineComponent = React.memo<OpenTimelineOwnProps>(
+  ({
+    defaultPageSize,
+    isModal = false,
+    title,
+    apolloClient,
+    closeModalTimeline,
+    updateTimeline,
+    updateIsLoading,
+    timeline,
+    createNewTimeline,
+  }) => {
+    /** Required by EuiTable for expandable rows: a map of `TimelineResult.savedObjectId` to rendered notes */
+    const [itemIdToExpandedNotesRowMap, setItemIdToExpandedNotesRowMap] = useState<
+      Record<string, JSX.Element>
+    >({});
+    /** Only query for favorite timelines when true */
+    const [onlyFavorites, setOnlyFavorites] = useState(false);
+    /** The requested page of results */
+    const [pageIndex, setPageIndex] = useState(0);
+    /** The requested size of each page of search results */
+    const [pageSize, setPageSize] = useState(defaultPageSize);
+    /** The current search criteria */
+    const [search, setSearch] = useState('');
+    /** The currently-selected timelines in the table */
+    const [selectedItems, setSelectedItems] = useState<OpenTimelineResult[]>([]);
+    /** The requested sort direction of the query results */
+    const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>(DEFAULT_SORT_DIRECTION);
+    /** The requested field to sort on */
+    const [sortField, setSortField] = useState(DEFAULT_SORT_FIELD);
+
+    /** Invoked when the user presses enters to submit the text in the search input */
+    const onQueryChange: OnQueryChange = (query: EuiSearchBarQuery) => {
+      setSearch(query.queryText.trim());
+    };
+
+    /** Focuses the input that filters the field browser */
+    const focusInput = () => {
+      const elements = document.querySelector<HTMLElement>(`.${OPEN_TIMELINE_CLASS_NAME} input`);
 
-    this.state = {
-      itemIdToExpandedNotesRowMap: {},
-      onlyFavorites: false,
-      search: '',
-      pageIndex: 0,
-      pageSize: props.defaultPageSize,
-      sortField: DEFAULT_SORT_FIELD,
-      sortDirection: DEFAULT_SORT_DIRECTION,
-      selectedItems: [],
+      if (elements != null) {
+        elements.focus();
+      }
     };
-  }
 
-  public componentDidMount() {
-    this.focusInput();
-  }
+    /* This feature will be implemented in the near future, so we are keeping it to know what to do */
+
+    /** Invoked when the user clicks the action to add the selected timelines to favorites */
+    // const onAddTimelinesToFavorites: OnAddTimelinesToFavorites = () => {
+    // const { addTimelinesToFavorites } = this.props;
+    // const { selectedItems } = this.state;
+    // if (addTimelinesToFavorites != null) {
+    //   addTimelinesToFavorites(getSelectedTimelineIds(selectedItems));
+    // TODO: it's not possible to clear the selection state of the newly-favorited
+    // items, because we can't pass the selection state as props to the table.
+    // See: https://github.com/elastic/eui/issues/1077
+    // TODO: the query must re-execute to show the results of the mutation
+    // }
+    // };
+
+    const onDeleteOneTimeline: OnDeleteOneTimeline = (timelineIds: string[]) => {
+      deleteTimelines(timelineIds, {
+        search,
+        pageInfo: {
+          pageIndex: pageIndex + 1,
+          pageSize,
+        },
+        sort: {
+          sortField: sortField as SortFieldTimeline,
+          sortOrder: sortDirection as Direction,
+        },
+        onlyUserFavorite: onlyFavorites,
+      });
+    };
+
+    /** Invoked when the user clicks the action to delete the selected timelines */
+    const onDeleteSelected: OnDeleteSelected = () => {
+      deleteTimelines(getSelectedTimelineIds(selectedItems), {
+        search,
+        pageInfo: {
+          pageIndex: pageIndex + 1,
+          pageSize,
+        },
+        sort: {
+          sortField: sortField as SortFieldTimeline,
+          sortOrder: sortDirection as Direction,
+        },
+        onlyUserFavorite: onlyFavorites,
+      });
+
+      // NOTE: we clear the selection state below, but if the server fails to
+      // delete a timeline, it will remain selected in the table:
+      resetSelectionState();
+
+      // TODO: the query must re-execute to show the results of the deletion
+    };
+
+    /** Invoked when the user selects (or de-selects) timelines */
+    const onSelectionChange: OnSelectionChange = (newSelectedItems: OpenTimelineResult[]) => {
+      setSelectedItems(newSelectedItems); // <-- this is NOT passed down as props to the table: https://github.com/elastic/eui/issues/1077
+    };
+
+    /** Invoked by the EUI table implementation when the user interacts with the table (i.e. to update sorting) */
+    const onTableChange: OnTableChange = ({ page, sort }: OnTableChangeParams) => {
+      const { index, size } = page;
+      const { field, direction } = sort;
+      setPageIndex(index);
+      setPageSize(size);
+      setSortDirection(direction);
+      setSortField(field);
+    };
+
+    /** Invoked when the user toggles the option to only view favorite timelines */
+    const onToggleOnlyFavorites: OnToggleOnlyFavorites = () => {
+      setOnlyFavorites(!onlyFavorites);
+    };
+
+    /** Invoked when the user toggles the expansion or collapse of inline notes in a table row */
+    const onToggleShowNotes: OnToggleShowNotes = (
+      newItemIdToExpandedNotesRowMap: Record<string, JSX.Element>
+    ) => {
+      setItemIdToExpandedNotesRowMap(newItemIdToExpandedNotesRowMap);
+    };
+
+    /** Resets the selection state such that all timelines are unselected */
+    const resetSelectionState = () => {
+      setSelectedItems([]);
+    };
+
+    const openTimeline: OnOpenTimeline = ({
+      duplicate,
+      timelineId,
+    }: {
+      duplicate: boolean;
+      timelineId: string;
+    }) => {
+      if (isModal && closeModalTimeline != null) {
+        closeModalTimeline();
+      }
+
+      queryTimelineById({
+        apolloClient,
+        duplicate,
+        timelineId,
+        updateIsLoading,
+        updateTimeline,
+      });
+    };
+
+    const deleteTimelines: DeleteTimelines = (
+      timelineIds: string[],
+      variables?: AllTimelinesVariables
+    ) => {
+      if (timelineIds.includes(timeline.savedObjectId || '')) {
+        createNewTimeline({ id: 'timeline-1', columns: defaultHeaders, show: false });
+      }
+      apolloClient.mutate<DeleteTimelineMutation.Mutation, DeleteTimelineMutation.Variables>({
+        mutation: deleteTimelineMutation,
+        fetchPolicy: 'no-cache',
+        variables: { id: timelineIds },
+        refetchQueries: [
+          {
+            query: allTimelinesQuery,
+            variables,
+          },
+        ],
+      });
+    };
+    useEffect(() => {
+      focusInput();
+    }, []);
 
-  public render() {
-    const { defaultPageSize, isModal = false, title } = this.props;
-    const {
-      itemIdToExpandedNotesRowMap,
-      onlyFavorites,
-      pageIndex,
-      pageSize,
-      search: query,
-      selectedItems,
-      sortDirection,
-      sortField,
-    } = this.state;
     return (
       <AllTimelinesQuery
         pageInfo={{
           pageIndex: pageIndex + 1,
           pageSize,
         }}
-        search={query}
+        search={search}
         sort={{ sortField: sortField as SortFieldTimeline, sortOrder: sortDirection as Direction }}
         onlyUserFavorite={onlyFavorites}
       >
         {({ timelines, loading, totalCount }) => {
           return !isModal ? (
             <OpenTimeline
-              deleteTimelines={this.onDeleteOneTimeline}
+              data-test-subj={'open-timeline'}
+              deleteTimelines={onDeleteOneTimeline}
               defaultPageSize={defaultPageSize}
               isLoading={loading}
               itemIdToExpandedNotesRowMap={itemIdToExpandedNotesRowMap}
               onAddTimelinesToFavorites={undefined}
-              onDeleteSelected={this.onDeleteSelected}
+              onDeleteSelected={onDeleteSelected}
               onlyFavorites={onlyFavorites}
-              onOpenTimeline={this.openTimeline}
-              onQueryChange={this.onQueryChange}
-              onSelectionChange={this.onSelectionChange}
-              onTableChange={this.onTableChange}
-              onToggleOnlyFavorites={this.onToggleOnlyFavorites}
-              onToggleShowNotes={this.onToggleShowNotes}
+              onOpenTimeline={openTimeline}
+              onQueryChange={onQueryChange}
+              onSelectionChange={onSelectionChange}
+              onTableChange={onTableChange}
+              onToggleOnlyFavorites={onToggleOnlyFavorites}
+              onToggleShowNotes={onToggleShowNotes}
               pageIndex={pageIndex}
               pageSize={pageSize}
-              query={query}
+              query={search}
               searchResults={timelines}
               selectedItems={selectedItems}
               sortDirection={sortDirection}
@@ -158,21 +277,22 @@ export class StatefulOpenTimelineComponent extends React.PureComponent<
             />
           ) : (
             <OpenTimelineModal
-              deleteTimelines={this.onDeleteOneTimeline}
+              data-test-subj={'open-timeline-modal'}
+              deleteTimelines={onDeleteOneTimeline}
               defaultPageSize={defaultPageSize}
               isLoading={loading}
               itemIdToExpandedNotesRowMap={itemIdToExpandedNotesRowMap}
               onAddTimelinesToFavorites={undefined}
               onlyFavorites={onlyFavorites}
-              onOpenTimeline={this.openTimeline}
-              onQueryChange={this.onQueryChange}
-              onSelectionChange={this.onSelectionChange}
-              onTableChange={this.onTableChange}
-              onToggleOnlyFavorites={this.onToggleOnlyFavorites}
-              onToggleShowNotes={this.onToggleShowNotes}
+              onOpenTimeline={openTimeline}
+              onQueryChange={onQueryChange}
+              onSelectionChange={onSelectionChange}
+              onTableChange={onTableChange}
+              onToggleOnlyFavorites={onToggleOnlyFavorites}
+              onToggleShowNotes={onToggleShowNotes}
               pageIndex={pageIndex}
               pageSize={pageSize}
-              query={query}
+              query={search}
               searchResults={timelines}
               selectedItems={selectedItems}
               sortDirection={sortDirection}
@@ -185,171 +305,7 @@ export class StatefulOpenTimelineComponent extends React.PureComponent<
       </AllTimelinesQuery>
     );
   }
-
-  /** Invoked when the user presses enters to submit the text in the search input */
-  private onQueryChange: OnQueryChange = (query: EuiSearchBarQuery) => {
-    this.setState({
-      search: query.queryText.trim(),
-    });
-  };
-
-  /** Focuses the input that filters the field browser */
-  private focusInput = () => {
-    const elements = document.querySelector<HTMLElement>(`.${OPEN_TIMELINE_CLASS_NAME} input`);
-
-    if (elements != null) {
-      elements.focus();
-    }
-  };
-
-  /* This feature will be implemented in the near future, so we are keeping it to know what to do */
-
-  /** Invoked when the user clicks the action to add the selected timelines to favorites */
-  // private onAddTimelinesToFavorites: OnAddTimelinesToFavorites = () => {
-  // const { addTimelinesToFavorites } = this.props;
-  // const { selectedItems } = this.state;
-  // if (addTimelinesToFavorites != null) {
-  //   addTimelinesToFavorites(getSelectedTimelineIds(selectedItems));
-  // TODO: it's not possible to clear the selection state of the newly-favorited
-  // items, because we can't pass the selection state as props to the table.
-  // See: https://github.com/elastic/eui/issues/1077
-  // TODO: the query must re-execute to show the results of the mutation
-  // }
-  // };
-
-  private onDeleteOneTimeline: OnDeleteOneTimeline = (timelineIds: string[]) => {
-    const { onlyFavorites, pageIndex, pageSize, search, sortDirection, sortField } = this.state;
-
-    this.deleteTimelines(timelineIds, {
-      search,
-      pageInfo: {
-        pageIndex: pageIndex + 1,
-        pageSize,
-      },
-      sort: {
-        sortField: sortField as SortFieldTimeline,
-        sortOrder: sortDirection as Direction,
-      },
-      onlyUserFavorite: onlyFavorites,
-    });
-  };
-
-  /** Invoked when the user clicks the action to delete the selected timelines */
-  private onDeleteSelected: OnDeleteSelected = () => {
-    const { selectedItems, onlyFavorites } = this.state;
-
-    this.deleteTimelines(getSelectedTimelineIds(selectedItems), {
-      search: this.state.search,
-      pageInfo: {
-        pageIndex: this.state.pageIndex + 1,
-        pageSize: this.state.pageSize,
-      },
-      sort: {
-        sortField: this.state.sortField as SortFieldTimeline,
-        sortOrder: this.state.sortDirection as Direction,
-      },
-      onlyUserFavorite: onlyFavorites,
-    });
-
-    // NOTE: we clear the selection state below, but if the server fails to
-    // delete a timeline, it will remain selected in the table:
-    this.resetSelectionState();
-
-    // TODO: the query must re-execute to show the results of the deletion
-  };
-
-  /** Invoked when the user selects (or de-selects) timelines */
-  private onSelectionChange: OnSelectionChange = (selectedItems: OpenTimelineResult[]) => {
-    this.setState({ selectedItems }); // <-- this is NOT passed down as props to the table: https://github.com/elastic/eui/issues/1077
-  };
-
-  /** Invoked by the EUI table implementation when the user interacts with the table (i.e. to update sorting) */
-  private onTableChange: OnTableChange = ({ page, sort }: OnTableChangeParams) => {
-    const { index: pageIndex, size: pageSize } = page;
-    const { field: sortField, direction: sortDirection } = sort;
-
-    this.setState({
-      pageIndex,
-      pageSize,
-      sortDirection,
-      sortField,
-    });
-  };
-
-  /** Invoked when the user toggles the option to only view favorite timelines */
-  private onToggleOnlyFavorites: OnToggleOnlyFavorites = () => {
-    this.setState(state => ({
-      onlyFavorites: !state.onlyFavorites,
-    }));
-  };
-
-  /** Invoked when the user toggles the expansion or collapse of inline notes in a table row */
-  private onToggleShowNotes: OnToggleShowNotes = (
-    itemIdToExpandedNotesRowMap: Record<string, JSX.Element>
-  ) => {
-    this.setState(() => ({
-      itemIdToExpandedNotesRowMap,
-    }));
-  };
-
-  /** Resets the selection state such that all timelines are unselected */
-  private resetSelectionState = () => {
-    this.setState({
-      selectedItems: [],
-    });
-  };
-
-  private openTimeline: OnOpenTimeline = ({
-    duplicate,
-    timelineId,
-  }: {
-    duplicate: boolean;
-    timelineId: string;
-  }) => {
-    const {
-      apolloClient,
-      closeModalTimeline,
-      isModal,
-      updateTimeline,
-      updateIsLoading,
-    } = this.props;
-
-    if (isModal && closeModalTimeline != null) {
-      closeModalTimeline();
-    }
-
-    queryTimelineById({
-      apolloClient,
-      duplicate,
-      timelineId,
-      updateIsLoading,
-      updateTimeline,
-    });
-  };
-
-  private deleteTimelines: DeleteTimelines = (
-    timelineIds: string[],
-    variables?: AllTimelinesVariables
-  ) => {
-    if (timelineIds.includes(this.props.timeline.savedObjectId || '')) {
-      this.props.createNewTimeline({ id: 'timeline-1', columns: defaultHeaders, show: false });
-    }
-    this.props.apolloClient.mutate<
-      DeleteTimelineMutation.Mutation,
-      DeleteTimelineMutation.Variables
-    >({
-      mutation: deleteTimelineMutation,
-      fetchPolicy: 'no-cache',
-      variables: { id: timelineIds },
-      refetchQueries: [
-        {
-          query: allTimelinesQuery,
-          variables,
-        },
-      ],
-    });
-  };
-}
+);
 
 const makeMapStateToProps = () => {
   const getTimeline = timelineSelectors.getTimelineByIdSelector();
diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/open_timeline_modal/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/open_timeline/open_timeline_modal/index.test.tsx
index bcafed20a50ffd..146afa85e10a76 100644
--- a/x-pack/legacy/plugins/siem/public/components/open_timeline/open_timeline_modal/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/open_timeline/open_timeline_modal/index.test.tsx
@@ -5,8 +5,7 @@
  */
 
 import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
-import { get } from 'lodash/fp';
-import { mount, ReactWrapper } from 'enzyme';
+import { mount } from 'enzyme';
 import * as React from 'react';
 import { MockedProvider } from 'react-apollo/test-utils';
 import { ThemeProvider } from 'styled-components';
@@ -20,12 +19,6 @@ import { OpenTimelineModalButton } from '.';
 
 jest.mock('../../../lib/settings/use_kibana_ui_setting');
 
-const getStateChildComponent = (
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  wrapper: ReactWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>
-): // eslint-disable-next-line @typescript-eslint/no-explicit-any
-React.Component<{}, {}, any> => wrapper.find('[data-test-subj="state-child-component"]').instance();
-
 describe('OpenTimelineModalButton', () => {
   const theme = () => ({ eui: euiDarkVars, darkMode: true });
 
@@ -56,10 +49,7 @@ describe('OpenTimelineModalButton', () => {
         <ThemeProvider theme={theme}>
           <TestProviderWithoutDragAndDrop>
             <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
-              <OpenTimelineModalButton
-                data-test-subj="state-child-component"
-                onToggle={jest.fn()}
-              />
+              <OpenTimelineModalButton onToggle={jest.fn()} />
             </MockedProvider>
           </TestProviderWithoutDragAndDrop>
         </ThemeProvider>
@@ -69,7 +59,7 @@ describe('OpenTimelineModalButton', () => {
 
       wrapper.update();
 
-      expect(get('showModal', getStateChildComponent(wrapper).state)).toEqual(false);
+      expect(wrapper.find('div[data-test-subj="open-timeline-modal"].euiModal').length).toEqual(0);
     });
 
     test('it sets showModal to true when the button is clicked', async () => {
@@ -151,10 +141,7 @@ describe('OpenTimelineModalButton', () => {
         <ThemeProvider theme={theme}>
           <TestProviderWithoutDragAndDrop>
             <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
-              <OpenTimelineModalButton
-                data-test-subj="state-child-component"
-                onToggle={jest.fn()}
-              />
+              <OpenTimelineModalButton onToggle={jest.fn()} />
             </MockedProvider>
           </TestProviderWithoutDragAndDrop>
         </ThemeProvider>
@@ -169,7 +156,7 @@ describe('OpenTimelineModalButton', () => {
 
       wrapper.update();
 
-      expect(get('showModal', getStateChildComponent(wrapper).state)).toEqual(true);
+      expect(wrapper.find('div[data-test-subj="open-timeline-modal"].euiModal').length).toEqual(1);
     });
 
     test('it invokes the optional onToggle function provided as a prop when the open timeline button is clicked', async () => {
diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/open_timeline_modal/index.tsx b/x-pack/legacy/plugins/siem/public/components/open_timeline/open_timeline_modal/index.tsx
index 79fa747aee0817..41907e07d5c1bf 100644
--- a/x-pack/legacy/plugins/siem/public/components/open_timeline/open_timeline_modal/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/open_timeline/open_timeline_modal/index.tsx
@@ -5,8 +5,7 @@
  */
 
 import { EuiButtonEmpty, EuiModal, EuiOverlayMask } from '@elastic/eui';
-import * as React from 'react';
-import styled from 'styled-components';
+import React, { useState } from 'react';
 
 import { ApolloConsumer } from 'react-apollo';
 import * as i18n from '../translations';
@@ -20,90 +19,61 @@ export interface OpenTimelineModalButtonProps {
   onToggle?: () => void;
 }
 
-export interface OpenTimelineModalButtonState {
-  showModal: boolean;
-}
-
 const DEFAULT_SEARCH_RESULTS_PER_PAGE = 10;
 const OPEN_TIMELINE_MODAL_WIDTH = 1000; // px
 
-// TODO: this container can be removed when
-// the following EUI PR is available (in Kibana):
-// https://github.com/elastic/eui/pull/1902/files#diff-d662c14c5dcd7e4b41028bf60b9bc77b
-const ModalContainer = styled.div`
-  .euiModalBody {
-    display: flex;
-    flex-direction: column;
-  }
-`;
-
-ModalContainer.displayName = 'ModalContainer';
-
 /**
  * Renders a button that when clicked, displays the `Open Timelines` modal
  */
-export class OpenTimelineModalButton extends React.PureComponent<
-  OpenTimelineModalButtonProps,
-  OpenTimelineModalButtonState
-> {
-  constructor(props: OpenTimelineModalButtonProps) {
-    super(props);
+export const OpenTimelineModalButton = React.memo<OpenTimelineModalButtonProps>(({ onToggle }) => {
+  const [showModal, setShowModal] = useState(false);
 
-    this.state = { showModal: false };
+  /** shows or hides the `Open Timeline` modal */
+  function toggleShowModal() {
+    if (onToggle != null) {
+      onToggle();
+    }
+    setShowModal(!showModal);
   }
 
-  public render() {
-    return (
-      <ApolloConsumer>
-        {client => (
-          <>
-            <EuiButtonEmpty
-              color="text"
-              data-test-subj="open-timeline-button"
-              iconSide="left"
-              iconType="folderOpen"
-              onClick={this.toggleShowModal}
-            >
-              {i18n.OPEN_TIMELINE}
-            </EuiButtonEmpty>
-
-            {this.state.showModal && (
-              <EuiOverlayMask>
-                <ModalContainer>
-                  <EuiModal
-                    data-test-subj="open-timeline-modal"
-                    maxWidth={OPEN_TIMELINE_MODAL_WIDTH}
-                    onClose={this.toggleShowModal}
-                  >
-                    <StatefulOpenTimeline
-                      apolloClient={client}
-                      closeModalTimeline={this.closeModalTimeline}
-                      isModal={true}
-                      defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
-                      title={i18n.OPEN_TIMELINE_TITLE}
-                    />
-                  </EuiModal>
-                </ModalContainer>
-              </EuiOverlayMask>
-            )}
-          </>
-        )}
-      </ApolloConsumer>
-    );
+  function closeModalTimeline() {
+    toggleShowModal();
   }
+  return (
+    <ApolloConsumer>
+      {client => (
+        <>
+          <EuiButtonEmpty
+            color="text"
+            data-test-subj="open-timeline-button"
+            iconSide="left"
+            iconType="folderOpen"
+            onClick={toggleShowModal}
+          >
+            {i18n.OPEN_TIMELINE}
+          </EuiButtonEmpty>
 
-  /** shows or hides the `Open Timeline` modal */
-  private toggleShowModal = () => {
-    if (this.props.onToggle != null) {
-      this.props.onToggle();
-    }
-
-    this.setState(state => ({
-      showModal: !state.showModal,
-    }));
-  };
+          {showModal && (
+            <EuiOverlayMask>
+              <EuiModal
+                data-test-subj="open-timeline-modal"
+                maxWidth={OPEN_TIMELINE_MODAL_WIDTH}
+                onClose={toggleShowModal}
+              >
+                <StatefulOpenTimeline
+                  apolloClient={client}
+                  closeModalTimeline={closeModalTimeline}
+                  isModal={true}
+                  defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
+                  title={i18n.OPEN_TIMELINE_TITLE}
+                />
+              </EuiModal>
+            </EuiOverlayMask>
+          )}
+        </>
+      )}
+    </ApolloConsumer>
+  );
+});
 
-  private closeModalTimeline = () => {
-    this.toggleShowModal();
-  };
-}
+OpenTimelineModalButton.displayName = 'OpenTimelineModalButton';
diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/index.tsx b/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/index.tsx
index 14443d0bcdf79a..278668eb1d8b48 100644
--- a/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/index.tsx
@@ -9,6 +9,7 @@ import * as React from 'react';
 import { pure } from 'recompose';
 import styled from 'styled-components';
 
+import * as i18n from '../translations';
 import {
   DeleteTimelines,
   OnOpenTimeline,
@@ -22,14 +23,15 @@ import { getCommonColumns } from './common_columns';
 import { getExtendedColumns } from './extended_columns';
 import { getIconHeaderColumns } from './icon_header_columns';
 
-import * as i18n from '../translations';
-
 const BasicTable = styled(EuiBasicTable)`
   .euiTableCellContent {
-    animation: none;
+    animation: none; //Prevents applying max-height from animation
   }
-`;
 
+  .euiTableRow-isExpandedRow .euiTableCellContent__text {
+    width: 100%; //Fixes collapsing nested flex content in IE11
+  }
+`;
 BasicTable.displayName = 'BasicTable';
 
 const getExtendedColumnsIfEnabled = (showExtendedColumnsAndActions: boolean) =>
@@ -144,6 +146,7 @@ export const TimelinesTable = pure<TimelinesTableProps>(
           onToggleShowNotes,
           showExtendedColumnsAndActions,
         })}
+        compressed
         data-test-subj="timelines-table"
         isExpandable={true}
         isSelectable={showExtendedColumnsAndActions}
@@ -160,5 +163,4 @@ export const TimelinesTable = pure<TimelinesTableProps>(
     );
   }
 );
-
 TimelinesTable.displayName = 'TimelinesTable';
diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/title_row/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/open_timeline/title_row/index.test.tsx
index 16ef2537208d1b..db3d192f06ba18 100644
--- a/x-pack/legacy/plugins/siem/public/components/open_timeline/title_row/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/open_timeline/title_row/index.test.tsx
@@ -30,7 +30,7 @@ describe('TitleRow', () => {
 
     expect(
       wrapper
-        .find('[data-test-subj="panel_headline_title"]')
+        .find('[data-test-subj="header-panel-title"]')
         .first()
         .text()
     ).toEqual(title);
diff --git a/x-pack/legacy/plugins/siem/public/components/page/add_to_kql/index.tsx b/x-pack/legacy/plugins/siem/public/components/page/add_to_kql/index.tsx
index 43a8ec97c61f04..5c0b449916a1f9 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/add_to_kql/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/page/add_to_kql/index.tsx
@@ -7,7 +7,6 @@
 import { EuiIcon, EuiPanel, EuiToolTip } from '@elastic/eui';
 import { isEmpty } from 'lodash/fp';
 import React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 import { StaticIndexPattern } from 'ui/index_patterns';
 
@@ -16,7 +15,6 @@ import { NetworkFilter } from '../../../containers/network';
 import { assertUnreachable } from '../../../lib/helpers';
 import { hostsModel, KueryFilterQuery, networkModel } from '../../../store';
 import { WithHoverActions } from '../../with_hover_actions';
-
 import * as i18n from './translations';
 
 interface Props {
@@ -26,15 +24,21 @@ interface Props {
   filterQueryDraft: KueryFilterQuery;
 }
 
-class AddToKqlComponent extends React.PureComponent<Props> {
-  public render() {
-    const { children } = this.props;
+const AddToKqlComponent = React.memo<Props>(
+  ({ children, expression, filterQueryDraft, applyFilterQueryFromKueryExpression }) => {
+    const addToKql = () => {
+      applyFilterQueryFromKueryExpression(
+        filterQueryDraft && !isEmpty(filterQueryDraft.expression)
+          ? `${filterQueryDraft.expression} and ${expression}`
+          : expression
+      );
+    };
     return (
       <WithHoverActions
         hoverContent={
           <HoverActionsContainer data-test-subj="hover-actions-container">
             <EuiToolTip content={i18n.FILTER_FOR_VALUE}>
-              <EuiIcon type="filter" onClick={this.addToKql} />
+              <EuiIcon type="filter" onClick={addToKql} />
             </EuiToolTip>
           </HoverActionsContainer>
         }
@@ -42,16 +46,9 @@ class AddToKqlComponent extends React.PureComponent<Props> {
       />
     );
   }
+);
 
-  private addToKql = () => {
-    const { expression, filterQueryDraft, applyFilterQueryFromKueryExpression } = this.props;
-    applyFilterQueryFromKueryExpression(
-      filterQueryDraft && !isEmpty(filterQueryDraft.expression)
-        ? `${filterQueryDraft.expression} and ${expression}`
-        : expression
-    );
-  };
-}
+AddToKqlComponent.displayName = 'AddToKqlComponent';
 
 const HoverActionsContainer = styled(EuiPanel)`
   align-items: center;
@@ -76,7 +73,7 @@ interface AddToKqlProps {
   type: networkModel.NetworkType | hostsModel.HostsType;
 }
 
-export const AddToKql = pure<AddToKqlProps>(
+export const AddToKql = React.memo<AddToKqlProps>(
   ({ children, expression, type, componentFilterType, indexPattern }) => {
     switch (componentFilterType) {
       case 'hosts':
diff --git a/x-pack/legacy/plugins/siem/public/components/page/hosts/events_over_time/translation.ts b/x-pack/legacy/plugins/siem/public/components/page/hosts/events_over_time/translation.ts
index a2d7036f050368..5f68a1a1cae7d1 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/hosts/events_over_time/translation.ts
+++ b/x-pack/legacy/plugins/siem/public/components/page/hosts/events_over_time/translation.ts
@@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n';
 export const EVENT_COUNT_FREQUENCY_BY_ACTION = i18n.translate(
   'xpack.siem.eventsOverTime.eventCountFrequencyByActionTitle',
   {
-    defaultMessage: 'Event count frequency by action',
+    defaultMessage: 'Event count by action',
   }
 );
 
diff --git a/x-pack/legacy/plugins/siem/public/components/page/hosts/hosts_table/columns.tsx b/x-pack/legacy/plugins/siem/public/components/page/hosts/hosts_table/columns.tsx
index 3391091b801c49..5789b63bd2bc34 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/hosts/hosts_table/columns.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/page/hosts/hosts_table/columns.tsx
@@ -70,6 +70,7 @@ export const getHostsColumns = (
       }
       return getEmptyTagValue();
     },
+    width: '35%',
   },
   {
     field: 'node.lastSeen',
diff --git a/x-pack/legacy/plugins/siem/public/components/page/hosts/hosts_table/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/page/hosts/hosts_table/index.test.tsx
index 3a40bafdf71c13..dabfa4acda105c 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/hosts/hosts_table/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/page/hosts/hosts_table/index.test.tsx
@@ -143,7 +143,7 @@ describe('Hosts Table', () => {
             .find('.euiTable thead tr th button')
             .first()
             .text()
-        ).toEqual('NameClick to sort in descending order');
+        ).toEqual('Host nameClick to sort in descending order');
       });
     });
   });
diff --git a/x-pack/legacy/plugins/siem/public/components/page/hosts/hosts_table/index.tsx b/x-pack/legacy/plugins/siem/public/components/page/hosts/hosts_table/index.tsx
index 65c8e9a6546866..d4b3b5e8759892 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/hosts/hosts_table/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/page/hosts/hosts_table/index.tsx
@@ -4,8 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import memoizeOne from 'memoize-one';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { connect } from 'react-redux';
 import { ActionCreator } from 'typescript-fsa';
 import { StaticIndexPattern } from 'ui/index_patterns';
@@ -38,8 +37,8 @@ interface OwnProps {
   data: HostsEdges[];
   fakeTotalCount: number;
   id: string;
-  isInspect: boolean;
   indexPattern: StaticIndexPattern;
+  isInspect: boolean;
   loading: boolean;
   loadPage: (newActivePage: number) => void;
   showMorePagesIndicator: boolean;
@@ -49,15 +48,15 @@ interface OwnProps {
 
 interface HostsTableReduxProps {
   activePage: number;
+  direction: Direction;
   limit: number;
   sortField: HostsFields;
-  direction: Direction;
 }
 
 interface HostsTableDispatchProps {
   updateHostsSort: ActionCreator<{
-    sort: HostsSortField;
     hostsType: hostsModel.HostsType;
+    sort: HostsSortField;
   }>;
   updateTableActivePage: ActionCreator<{
     activePage: number;
@@ -65,8 +64,8 @@ interface HostsTableDispatchProps {
     tableType: hostsModel.HostsTableType;
   }>;
   updateTableLimit: ActionCreator<{
-    limit: number;
     hostsType: hostsModel.HostsType;
+    limit: number;
     tableType: hostsModel.HostsTableType;
   }>;
 }
@@ -90,47 +89,58 @@ const rowItems: ItemsPerRow[] = [
     numberOfRow: 10,
   },
 ];
+const getSorting = (
+  trigger: string,
+  sortField: HostsFields,
+  direction: Direction
+): SortingBasicTable => ({ field: getNodeField(sortField), direction });
+
+const HostsTableComponent = React.memo<HostsTableProps>(
+  ({
+    activePage,
+    data,
+    direction,
+    fakeTotalCount,
+    id,
+    indexPattern,
+    isInspect,
+    limit,
+    loading,
+    loadPage,
+    showMorePagesIndicator,
+    sortField,
+    totalCount,
+    type,
+    updateHostsSort,
+    updateTableActivePage,
+    updateTableLimit,
+  }) => {
+    const onChange = (criteria: Criteria) => {
+      if (criteria.sort != null) {
+        const sort: HostsSortField = {
+          field: getSortField(criteria.sort.field),
+          direction: criteria.sort.direction,
+        };
+        if (sort.direction !== direction || sort.field !== sortField) {
+          updateHostsSort({
+            sort,
+            hostsType: type,
+          });
+        }
+      }
+    };
 
-class HostsTableComponent extends React.PureComponent<HostsTableProps> {
-  private memoizedColumns: (
-    type: hostsModel.HostsType,
-    indexPattern: StaticIndexPattern
-  ) => HostsTableColumns;
-  private memoizedSorting: (
-    trigger: string,
-    sortField: HostsFields,
-    direction: Direction
-  ) => SortingBasicTable;
-
-  constructor(props: HostsTableProps) {
-    super(props);
-    this.memoizedColumns = memoizeOne(this.getMemoizeHostsColumns);
-    this.memoizedSorting = memoizeOne(this.getSorting);
-  }
+    const hostsColumns = useMemo(() => getHostsColumns(type, indexPattern), [type, indexPattern]);
 
-  public render() {
-    const {
-      activePage,
-      data,
-      direction,
-      fakeTotalCount,
-      id,
-      isInspect,
-      indexPattern,
-      limit,
-      loading,
-      loadPage,
-      showMorePagesIndicator,
-      totalCount,
+    const sorting = useMemo(() => getSorting(`${sortField}-${direction}`, sortField, direction), [
       sortField,
-      type,
-      updateTableActivePage,
-      updateTableLimit,
-    } = this.props;
+      direction,
+    ]);
+
     return (
       <PaginatedTable
         activePage={activePage}
-        columns={this.memoizedColumns(type, indexPattern)}
+        columns={hostsColumns}
         dataTestSubj={`table-${tableType}`}
         headerCount={totalCount}
         headerTitle={i18n.HOSTS}
@@ -141,10 +151,10 @@ class HostsTableComponent extends React.PureComponent<HostsTableProps> {
         limit={limit}
         loading={loading}
         loadPage={newActivePage => loadPage(newActivePage)}
-        onChange={this.onChange}
+        onChange={onChange}
         pageOfItems={data}
         showMorePagesIndicator={showMorePagesIndicator}
-        sorting={this.memoizedSorting(`${sortField}-${direction}`, sortField, direction)}
+        sorting={sorting}
         totalCount={fakeTotalCount}
         updateLimitPagination={newLimit =>
           updateTableLimit({
@@ -163,33 +173,9 @@ class HostsTableComponent extends React.PureComponent<HostsTableProps> {
       />
     );
   }
+);
 
-  private getSorting = (
-    trigger: string,
-    sortField: HostsFields,
-    direction: Direction
-  ): SortingBasicTable => ({ field: getNodeField(sortField), direction });
-
-  private getMemoizeHostsColumns = (
-    type: hostsModel.HostsType,
-    indexPattern: StaticIndexPattern
-  ): HostsTableColumns => getHostsColumns(type, indexPattern);
-
-  private onChange = (criteria: Criteria) => {
-    if (criteria.sort != null) {
-      const sort: HostsSortField = {
-        field: getSortField(criteria.sort.field),
-        direction: criteria.sort.direction,
-      };
-      if (sort.direction !== this.props.direction || sort.field !== this.props.sortField) {
-        this.props.updateHostsSort({
-          sort,
-          hostsType: this.props.type,
-        });
-      }
-    }
-  };
-}
+HostsTableComponent.displayName = 'HostsTableComponent';
 
 const getSortField = (field: string): HostsFields => {
   switch (field) {
diff --git a/x-pack/legacy/plugins/siem/public/components/page/hosts/hosts_table/translations.ts b/x-pack/legacy/plugins/siem/public/components/page/hosts/hosts_table/translations.ts
index 59fd21e32c3e51..be5d536d4cbb66 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/hosts/hosts_table/translations.ts
+++ b/x-pack/legacy/plugins/siem/public/components/page/hosts/hosts_table/translations.ts
@@ -17,7 +17,7 @@ export const UNIT = (totalCount: number) =>
   });
 
 export const NAME = i18n.translate('xpack.siem.hostsTable.nameTitle', {
-  defaultMessage: 'Name',
+  defaultMessage: 'Host name',
 });
 
 export const LAST_SEEN = i18n.translate('xpack.siem.hostsTable.lastSeenTitle', {
diff --git a/x-pack/legacy/plugins/siem/public/components/page/hosts/uncommon_process_table/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/page/hosts/uncommon_process_table/index.test.tsx
index f2e003c18af64e..2fe3843f71d853 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/hosts/uncommon_process_table/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/page/hosts/uncommon_process_table/index.test.tsx
@@ -73,7 +73,7 @@ describe('Uncommon Process Table Component', () => {
           .find('.euiTableRowCell')
           .at(3)
           .text()
-      ).toBe(`Hosts${getEmptyValue()}`);
+      ).toBe(`Host names${getEmptyValue()}`);
     });
 
     test('it has a single host without any extra comma when the number of hosts is exactly 1', () => {
@@ -104,7 +104,7 @@ describe('Uncommon Process Table Component', () => {
           .find('.euiTableRowCell')
           .at(3)
           .text()
-      ).toBe('Hostshello-world ');
+      ).toBe('Host nameshello-world ');
     });
 
     test('it has a single link when the number of hosts is exactly 1', () => {
@@ -166,7 +166,7 @@ describe('Uncommon Process Table Component', () => {
           .find('.euiTableRowCell')
           .at(3)
           .text()
-      ).toBe('Hostshello-world,hello-world-2 ');
+      ).toBe('Host nameshello-world,hello-world-2 ');
     });
 
     test('it has 2 links when the number of hosts is equal to 2', () => {
@@ -227,7 +227,7 @@ describe('Uncommon Process Table Component', () => {
           .find('.euiTableRowCell')
           .at(3)
           .text()
-      ).toBe(`Hosts${getEmptyValue()}`);
+      ).toBe(`Host names${getEmptyValue()}`);
     });
 
     test('it has no link when all hosts are invalid because they do not contain an id and a name', () => {
@@ -287,7 +287,7 @@ describe('Uncommon Process Table Component', () => {
           .find('.euiTableRowCell')
           .at(3)
           .text()
-      ).toBe('Hostshello-world,hello-world-2 ');
+      ).toBe('Host nameshello-world,hello-world-2 ');
     });
   });
 
diff --git a/x-pack/legacy/plugins/siem/public/components/page/hosts/uncommon_process_table/index.tsx b/x-pack/legacy/plugins/siem/public/components/page/hosts/uncommon_process_table/index.tsx
index 6f88bef622948c..6fd2cab90efea5 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/hosts/uncommon_process_table/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/page/hosts/uncommon_process_table/index.tsx
@@ -158,7 +158,7 @@ const getUncommonColumns = (): UncommonProcessTableColumns => [
         attrName: 'process.name',
         idPrefix: `uncommon-process-table-${node._id}-processName`,
       }),
-    width: '15%',
+    width: '20%',
   },
   {
     name: i18n.NUMBER_OF_HOSTS,
@@ -183,7 +183,7 @@ const getUncommonColumns = (): UncommonProcessTableColumns => [
         idPrefix: `uncommon-process-table-${node._id}-processHost`,
         render: item => <HostDetailsLink hostName={item} />,
       }),
-    width: '15%',
+    width: '25%',
   },
   {
     name: i18n.LAST_COMMAND,
@@ -196,7 +196,7 @@ const getUncommonColumns = (): UncommonProcessTableColumns => [
         idPrefix: `uncommon-process-table-${node._id}-processArgs`,
         displayCount: 1, // TODO: Change this back once we have improved the UI
       }),
-    width: '35%',
+    width: '25%',
   },
   {
     name: i18n.LAST_USER,
diff --git a/x-pack/legacy/plugins/siem/public/components/page/hosts/uncommon_process_table/translations.ts b/x-pack/legacy/plugins/siem/public/components/page/hosts/uncommon_process_table/translations.ts
index d80575c39f89c8..c76544903636cb 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/hosts/uncommon_process_table/translations.ts
+++ b/x-pack/legacy/plugins/siem/public/components/page/hosts/uncommon_process_table/translations.ts
@@ -20,20 +20,20 @@ export const UNIT = (totalCount: number) =>
   });
 
 export const HOSTS = i18n.translate('xpack.siem.uncommonProcessTable.hostsTitle', {
-  defaultMessage: 'Hosts',
+  defaultMessage: 'Host names',
 });
 
 export const NUMBER_OF_HOSTS = i18n.translate(
   'xpack.siem.uncommonProcessTable.numberOfHostsTitle',
   {
-    defaultMessage: 'Number of hosts',
+    defaultMessage: 'Hosts',
   }
 );
 
 export const NUMBER_OF_INSTANCES = i18n.translate(
   'xpack.siem.uncommonProcessTable.numberOfInstances',
   {
-    defaultMessage: 'Number of instances',
+    defaultMessage: 'Instances',
   }
 );
 
@@ -46,7 +46,7 @@ export const LAST_USER = i18n.translate('xpack.siem.uncommonProcessTable.lastUse
 });
 
 export const NAME = i18n.translate('xpack.siem.uncommonProcessTable.nameTitle', {
-  defaultMessage: 'Name',
+  defaultMessage: 'Process name',
 });
 
 export const ROWS_5 = i18n.translate('xpack.siem.uncommonProcessTable.rows', {
diff --git a/x-pack/legacy/plugins/siem/public/components/page/network/domains_table/columns.tsx b/x-pack/legacy/plugins/siem/public/components/page/network/domains_table/columns.tsx
index 24820b637d388e..cf5da3fbebba64 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/network/domains_table/columns.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/page/network/domains_table/columns.tsx
@@ -25,7 +25,7 @@ import { DragEffects, DraggableWrapper } from '../../../drag_and_drop/draggable_
 import { escapeDataProviderId } from '../../../drag_and_drop/helpers';
 import { defaultToEmptyTag, getEmptyTagValue } from '../../../empty_value';
 import { PreferenceFormattedDate } from '../../../formatted_date';
-import { Columns } from '../../../load_more_table';
+import { Columns } from '../../../paginated_table';
 import { LocalizedDateTooltip } from '../../../localized_date_tooltip';
 import { IS_OPERATOR } from '../../../timeline/data_providers/data_provider';
 import { PreferenceFormattedBytes } from '../../../formatted_bytes';
diff --git a/x-pack/legacy/plugins/siem/public/components/page/network/domains_table/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/page/network/domains_table/index.test.tsx
index 6f7a983e048755..45b5998f4d45cb 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/network/domains_table/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/page/network/domains_table/index.test.tsx
@@ -112,7 +112,7 @@ describe('Domains Table Component', () => {
           .find('.euiTable thead tr th button')
           .first()
           .text()
-      ).toEqual('Domain nameClick to sort in ascending order');
+      ).toEqual('DomainClick to sort in ascending order');
       expect(
         wrapper
           .find('.euiTable thead tr th button')
diff --git a/x-pack/legacy/plugins/siem/public/components/page/network/domains_table/translations.ts b/x-pack/legacy/plugins/siem/public/components/page/network/domains_table/translations.ts
index 171a3fdb72e1ab..b702eb05783370 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/network/domains_table/translations.ts
+++ b/x-pack/legacy/plugins/siem/public/components/page/network/domains_table/translations.ts
@@ -20,7 +20,7 @@ export const UNIT = (totalCount: number) =>
 export const DOMAIN_NAME = i18n.translate(
   'xpack.siem.network.ipDetails.domainsTable.columns.domainNameTitle',
   {
-    defaultMessage: 'Domain name',
+    defaultMessage: 'Domain',
   }
 );
 
diff --git a/x-pack/legacy/plugins/siem/public/components/page/network/kpi_network/mock.ts b/x-pack/legacy/plugins/siem/public/components/page/network/kpi_network/mock.ts
index bb06926ec08f40..e06bb1477bc7f9 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/network/kpi_network/mock.ts
+++ b/x-pack/legacy/plugins/siem/public/components/page/network/kpi_network/mock.ts
@@ -184,12 +184,19 @@ export const mockEnableChartsData = {
     {
       key: 'uniqueSourcePrivateIps',
       color: '#DB1374',
-      value: [{ x: 'Src.', y: 383, g: 'uniqueSourcePrivateIps' }],
+      value: [
+        {
+          x: 'Src.',
+          y: 383,
+          g: 'uniqueSourcePrivateIps',
+          y0: 0,
+        },
+      ],
     },
     {
       key: 'uniqueDestinationPrivateIps',
       color: '#490092',
-      value: [{ x: 'Dest.', y: 18, g: 'uniqueDestinationPrivateIps' }],
+      value: [{ x: 'Dest.', y: 18, g: 'uniqueDestinationPrivateIps', y0: 0 }],
     },
   ],
   description: 'Unique private IPs',
diff --git a/x-pack/legacy/plugins/siem/public/components/page/network/network_dns_table/columns.tsx b/x-pack/legacy/plugins/siem/public/components/page/network/network_dns_table/columns.tsx
index 1fdea3f2b03322..353699c5158bc4 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/network/network_dns_table/columns.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/page/network/network_dns_table/columns.tsx
@@ -12,7 +12,7 @@ import { networkModel } from '../../../../store';
 import { DragEffects, DraggableWrapper } from '../../../drag_and_drop/draggable_wrapper';
 import { escapeDataProviderId } from '../../../drag_and_drop/helpers';
 import { defaultToEmptyTag, getEmptyTagValue } from '../../../empty_value';
-import { Columns } from '../../../load_more_table';
+import { Columns } from '../../../paginated_table';
 import { IS_OPERATOR } from '../../../timeline/data_providers/data_provider';
 import { PreferenceFormattedBytes } from '../../../formatted_bytes';
 import { Provider } from '../../../timeline/data_providers/provider';
diff --git a/x-pack/legacy/plugins/siem/public/components/page/network/network_top_n_flow_table/columns.tsx b/x-pack/legacy/plugins/siem/public/components/page/network/network_top_n_flow_table/columns.tsx
index 598b9b038d3864..97fa601a49af17 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/network/network_top_n_flow_table/columns.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/page/network/network_top_n_flow_table/columns.tsx
@@ -21,7 +21,7 @@ import { DragEffects, DraggableWrapper } from '../../../drag_and_drop/draggable_
 import { escapeDataProviderId } from '../../../drag_and_drop/helpers';
 import { getEmptyTagValue } from '../../../empty_value';
 import { IPDetailsLink } from '../../../links';
-import { Columns } from '../../../load_more_table';
+import { Columns } from '../../../paginated_table';
 import { IS_OPERATOR } from '../../../timeline/data_providers/data_provider';
 import { Provider } from '../../../timeline/data_providers/provider';
 import * as i18n from './translations';
@@ -111,7 +111,7 @@ export const getNetworkTopNFlowColumns = (
         return getEmptyTagValue();
       }
     },
-    width: '15%',
+    width: '20%',
   },
   {
     name: i18n.DOMAIN,
@@ -150,12 +150,17 @@ export const getNetworkTopNFlowColumns = (
                 attrName: `${flowTarget}.as.organization.name`,
                 idPrefix: `${id}-name`,
               })}
-            {as.number &&
-              getRowItemDraggable({
-                rowItem: `${as.number}`,
-                attrName: `${flowTarget}.as.number`,
-                idPrefix: `${id}-number`,
-              })}
+
+            {as.number && (
+              <>
+                {' '}
+                {getRowItemDraggable({
+                  rowItem: `${as.number}`,
+                  attrName: `${flowTarget}.as.number`,
+                  idPrefix: `${id}-number`,
+                })}
+              </>
+            )}
           </>
         );
       } else {
diff --git a/x-pack/legacy/plugins/siem/public/components/page/network/network_top_n_flow_table/index.tsx b/x-pack/legacy/plugins/siem/public/components/page/network/network_top_n_flow_table/index.tsx
index 5abbdab9c980fe..714d3f7a8131c6 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/network/network_top_n_flow_table/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/page/network/network_top_n_flow_table/index.tsx
@@ -79,26 +79,45 @@ const rowItems: ItemsPerRow[] = [
 
 export const NetworkTopNFlowTableId = 'networkTopSourceFlow-top-talkers';
 
-class NetworkTopNFlowTableComponent extends React.PureComponent<NetworkTopNFlowTableProps> {
-  public render() {
-    const {
-      activePage,
-      data,
-      fakeTotalCount,
-      flowTargeted,
-      id,
-      indexPattern,
-      isInspect,
-      limit,
-      loading,
-      loadPage,
-      showMorePagesIndicator,
-      topNFlowSort,
-      totalCount,
-      type,
-      updateTopNFlowLimit,
-      updateTableActivePage,
-    } = this.props;
+const NetworkTopNFlowTableComponent = React.memo<NetworkTopNFlowTableProps>(
+  ({
+    activePage,
+    data,
+    fakeTotalCount,
+    flowTargeted,
+    id,
+    indexPattern,
+    isInspect,
+    limit,
+    loading,
+    loadPage,
+    showMorePagesIndicator,
+    topNFlowSort,
+    totalCount,
+    type,
+    updateTopNFlowLimit,
+    updateTopNFlowSort,
+    updateTableActivePage,
+  }) => {
+    const onChange = (criteria: Criteria, tableType: networkModel.TopNTableType) => {
+      if (criteria.sort != null) {
+        const splitField = criteria.sort.field.split('.');
+        const field = last(splitField);
+        const newSortDirection =
+          field !== topNFlowSort.field ? Direction.desc : criteria.sort.direction; // sort by desc on init click
+        const newTopNFlowSort: NetworkTopNFlowSortField = {
+          field: field as NetworkTopNFlowFields,
+          direction: newSortDirection,
+        };
+        if (!isEqual(newTopNFlowSort, topNFlowSort)) {
+          updateTopNFlowSort({
+            topNFlowSort: newTopNFlowSort,
+            networkType: type,
+            tableType,
+          });
+        }
+      }
+    };
 
     let tableType: networkModel.TopNTableType;
     let headerTitle: string;
@@ -136,7 +155,7 @@ class NetworkTopNFlowTableComponent extends React.PureComponent<NetworkTopNFlowT
         limit={limit}
         loading={loading}
         loadPage={newActivePage => loadPage(newActivePage)}
-        onChange={criteria => this.onChange(criteria, tableType)}
+        onChange={criteria => onChange(criteria, tableType)}
         pageOfItems={data}
         showMorePagesIndicator={showMorePagesIndicator}
         sorting={{ field, direction: topNFlowSort.direction }}
@@ -153,27 +172,9 @@ class NetworkTopNFlowTableComponent extends React.PureComponent<NetworkTopNFlowT
       />
     );
   }
+);
 
-  private onChange = (criteria: Criteria, tableType: networkModel.TopNTableType) => {
-    if (criteria.sort != null) {
-      const splitField = criteria.sort.field.split('.');
-      const field = last(splitField);
-      const newSortDirection =
-        field !== this.props.topNFlowSort.field ? Direction.desc : criteria.sort.direction; // sort by desc on init click
-      const newTopNFlowSort: NetworkTopNFlowSortField = {
-        field: field as NetworkTopNFlowFields,
-        direction: newSortDirection,
-      };
-      if (!isEqual(newTopNFlowSort, this.props.topNFlowSort)) {
-        this.props.updateTopNFlowSort({
-          topNFlowSort: newTopNFlowSort,
-          networkType: this.props.type,
-          tableType,
-        });
-      }
-    }
-  };
-}
+NetworkTopNFlowTableComponent.displayName = 'NetworkTopNFlowTableComponent';
 
 const mapStateToProps = (state: State, ownProps: OwnProps) =>
   networkSelectors.topNFlowSelector(ownProps.flowTargeted);
diff --git a/x-pack/legacy/plugins/siem/public/components/page/network/tls_table/columns.tsx b/x-pack/legacy/plugins/siem/public/components/page/network/tls_table/columns.tsx
index 7578c5decc8519..aea8ee9e6b9e14 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/network/tls_table/columns.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/page/network/tls_table/columns.tsx
@@ -7,7 +7,7 @@
 import React from 'react';
 import moment from 'moment';
 import { TlsNode } from '../../../../graphql/types';
-import { Columns } from '../../../load_more_table';
+import { Columns } from '../../../paginated_table';
 
 import { getRowItemDraggables, getRowItemDraggable } from '../../../tables/helpers';
 import { LocalizedDateTooltip } from '../../../localized_date_tooltip';
diff --git a/x-pack/legacy/plugins/siem/public/components/page/network/tls_table/translations.ts b/x-pack/legacy/plugins/siem/public/components/page/network/tls_table/translations.ts
index d81ba115747f51..89d0f58684cbe2 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/network/tls_table/translations.ts
+++ b/x-pack/legacy/plugins/siem/public/components/page/network/tls_table/translations.ts
@@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n';
 export const TRANSPORT_LAYER_SECURITY = i18n.translate(
   'xpack.siem.network.ipDetails.tlsTable.transportLayerSecurityTitle',
   {
-    defaultMessage: 'Transport layer security',
+    defaultMessage: 'Transport Layer Security',
   }
 );
 
diff --git a/x-pack/legacy/plugins/siem/public/components/page/network/users_table/columns.tsx b/x-pack/legacy/plugins/siem/public/components/page/network/users_table/columns.tsx
index b17ec74fa05401..2c51fb8f94561a 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/network/users_table/columns.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/page/network/users_table/columns.tsx
@@ -6,7 +6,7 @@
 
 import { FlowTarget, UsersItem } from '../../../../graphql/types';
 import { defaultToEmptyTag } from '../../../empty_value';
-import { Columns } from '../../../load_more_table';
+import { Columns } from '../../../paginated_table';
 
 import * as i18n from './translations';
 import { getRowItemDraggables, getRowItemDraggable } from '../../../tables/helpers';
diff --git a/x-pack/legacy/plugins/siem/public/components/page/network/users_table/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/page/network/users_table/index.test.tsx
index e1f2e0b5ae8984..792f66635cc73c 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/network/users_table/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/page/network/users_table/index.test.tsx
@@ -96,7 +96,7 @@ describe('Users Table Component', () => {
           .find('.euiTable thead tr th button')
           .first()
           .text()
-      ).toEqual('NameClick to sort in ascending order');
+      ).toEqual('UserClick to sort in ascending order');
     });
   });
 });
diff --git a/x-pack/legacy/plugins/siem/public/components/page/network/users_table/translations.ts b/x-pack/legacy/plugins/siem/public/components/page/network/users_table/translations.ts
index 7db078d170402d..7fa80a1349ab88 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/network/users_table/translations.ts
+++ b/x-pack/legacy/plugins/siem/public/components/page/network/users_table/translations.ts
@@ -20,7 +20,7 @@ export const UNIT = (totalCount: number) =>
 export const USER_NAME = i18n.translate(
   'xpack.siem.network.ipDetails.usersTable.columns.userNameTitle',
   {
-    defaultMessage: 'Name',
+    defaultMessage: 'User',
   }
 );
 
diff --git a/x-pack/legacy/plugins/siem/public/components/paginated_table/index.tsx b/x-pack/legacy/plugins/siem/public/components/paginated_table/index.tsx
index b5678a36c1eedf..257ee03c944bfb 100644
--- a/x-pack/legacy/plugins/siem/public/components/paginated_table/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/paginated_table/index.tsx
@@ -100,15 +100,17 @@ export interface BasicTableProps<T> {
   updateActivePage: (activePage: number) => void;
   updateLimitPagination: (limit: number) => void;
 }
+type Func<T> = (arg: T) => string | number;
 
-export interface Columns<T> {
+export interface Columns<T, U = T> {
+  align?: string;
   field?: string;
-  name: string | React.ReactNode;
+  hideForMobile?: boolean;
   isMobileHeader?: boolean;
-  sortable?: boolean;
+  name: string | React.ReactNode;
+  render?: (item: T, node: U) => React.ReactNode;
+  sortable?: boolean | Func<T>;
   truncateText?: boolean;
-  hideForMobile?: boolean;
-  render?: (item: T) => void;
   width?: string;
 }
 
diff --git a/x-pack/legacy/plugins/siem/public/components/pin/index.tsx b/x-pack/legacy/plugins/siem/public/components/pin/index.tsx
index e9a907975a9ead..897195af0aa46b 100644
--- a/x-pack/legacy/plugins/siem/public/components/pin/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/pin/index.tsx
@@ -4,11 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiButtonIcon } from '@elastic/eui';
+import { EuiButtonIcon, IconSize } from '@elastic/eui';
 import { noop } from 'lodash/fp';
 import * as React from 'react';
 import { pure } from 'recompose';
-import styled from 'styled-components';
 
 import * as i18n from '../../components/timeline/body/translations';
 
@@ -18,31 +17,19 @@ export const getPinIcon = (pinned: boolean): PinIcon => (pinned ? 'pinFilled' :
 
 interface Props {
   allowUnpinning: boolean;
-  pinned: boolean;
+  iconSize?: IconSize;
   onClick?: () => void;
+  pinned: boolean;
 }
 
-const PinButtonIcon = styled(EuiButtonIcon)<{ pinned: string }>`
-  svg {
-    ${({ pinned, theme }) => (pinned === 'true' ? `fill: ${theme.eui.euiColorPrimary};` : '')}
-    height: 19px;
-    ${({ pinned }) => `left: ${pinned === 'true' ? '-2' : '-1'}`}px;
-    position: relative;
-    width: 19px;
-  }
-`;
-
-export const Pin = pure<Props>(({ allowUnpinning, pinned, onClick = noop }) => (
-  <PinButtonIcon
+export const Pin = pure<Props>(({ allowUnpinning, iconSize = 'm', onClick = noop, pinned }) => (
+  <EuiButtonIcon
     aria-label={pinned ? i18n.PINNED : i18n.UNPINNED}
-    isDisabled={allowUnpinning ? false : true}
-    color={pinned ? 'primary' : 'subdued'}
     data-test-subj="pin"
-    onClick={onClick}
-    pinned={pinned.toString()}
-    role="button"
-    size="m"
+    iconSize={iconSize}
     iconType={getPinIcon(pinned)}
+    isDisabled={allowUnpinning ? false : true}
+    onClick={onClick}
   />
 ));
 
diff --git a/x-pack/legacy/plugins/siem/public/components/resize_handle/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/resize_handle/__snapshots__/index.test.tsx.snap
index e284628d66e114..432abd799b48af 100644
--- a/x-pack/legacy/plugins/siem/public/components/resize_handle/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/resize_handle/__snapshots__/index.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Resizeable it renders 1`] = `
 <Component>
   <Resizeable
     handle={
-      <CellResizeHandle
+      <CommonResizeHandle
         data-test-subj="test-resize-handle"
       />
     }
diff --git a/x-pack/legacy/plugins/siem/public/components/resize_handle/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/resize_handle/index.test.tsx
index ee844726bf9808..6bb036a88a9d74 100644
--- a/x-pack/legacy/plugins/siem/public/components/resize_handle/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/resize_handle/index.test.tsx
@@ -18,7 +18,7 @@ import {
   Resizeable,
   calculateDeltaX,
 } from '.';
-import { CellResizeHandle } from './styled_handles';
+import { CommonResizeHandle } from './styled_handles';
 
 describe('Resizeable', () => {
   afterEach(() => {
@@ -29,7 +29,7 @@ describe('Resizeable', () => {
     const wrapper = mount(
       <TestProviders>
         <Resizeable
-          handle={<CellResizeHandle data-test-subj="test-resize-handle" />}
+          handle={<CommonResizeHandle data-test-subj="test-resize-handle" />}
           height="100%"
           id="test"
           onResize={jest.fn()}
@@ -44,11 +44,64 @@ describe('Resizeable', () => {
     );
   });
 
+  test('it applies positioning styles to the ResizeHandleContainer when positionAbsolute is true and bottom/left/right/top is specified', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <Resizeable
+          bottom={0}
+          handle={<CommonResizeHandle data-test-subj="test-resize-handle" />}
+          id="test"
+          left={0}
+          onResize={jest.fn()}
+          positionAbsolute
+          render={() => <></>}
+          right={0}
+          top={0}
+        />
+      </TestProviders>
+    );
+    const resizeHandleContainer = wrapper
+      .find('[data-test-subj="resize-handle-container"]')
+      .first();
+
+    expect(resizeHandleContainer).toHaveStyleRule('bottom', '0');
+    expect(resizeHandleContainer).toHaveStyleRule('left', '0');
+    expect(resizeHandleContainer).toHaveStyleRule('position', 'absolute');
+    expect(resizeHandleContainer).toHaveStyleRule('right', '0');
+    expect(resizeHandleContainer).toHaveStyleRule('top', '0');
+  });
+
+  test('it DOES NOT apply positioning styles to the ResizeHandleContainer when positionAbsolute is false, regardless if bottom/left/right/top is specified', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <Resizeable
+          bottom={0}
+          handle={<CommonResizeHandle data-test-subj="test-resize-handle" />}
+          id="test"
+          left={0}
+          onResize={jest.fn()}
+          render={() => <></>}
+          right={0}
+          top={0}
+        />
+      </TestProviders>
+    );
+    const resizeHandleContainer = wrapper
+      .find('[data-test-subj="resize-handle-container"]')
+      .first();
+
+    expect(resizeHandleContainer).not.toHaveStyleRule('bottom', '0');
+    expect(resizeHandleContainer).not.toHaveStyleRule('left', '0');
+    expect(resizeHandleContainer).not.toHaveStyleRule('position', 'absolute');
+    expect(resizeHandleContainer).not.toHaveStyleRule('right', '0');
+    expect(resizeHandleContainer).not.toHaveStyleRule('top', '0');
+  });
+
   test('it renders', () => {
     const wrapper = shallow(
       <TestProviders>
         <Resizeable
-          handle={<CellResizeHandle data-test-subj="test-resize-handle" />}
+          handle={<CommonResizeHandle data-test-subj="test-resize-handle" />}
           height="100%"
           id="test"
           onResize={jest.fn()}
@@ -65,7 +118,7 @@ describe('Resizeable', () => {
       mount(
         <TestProviders>
           <Resizeable
-            handle={<CellResizeHandle data-test-subj="test-resize-handle" />}
+            handle={<CommonResizeHandle data-test-subj="test-resize-handle" />}
             height="100%"
             id="test"
             onResize={jest.fn()}
@@ -82,7 +135,7 @@ describe('Resizeable', () => {
         mount(
           <TestProviders>
             <Resizeable
-              handle={<CellResizeHandle data-test-subj="test-resize-handle" />}
+              handle={<CommonResizeHandle data-test-subj="test-resize-handle" />}
               height="100%"
               id="test"
               onResize={jest.fn()}
@@ -102,7 +155,7 @@ describe('Resizeable', () => {
         mount(
           <TestProviders>
             <Resizeable
-              handle={<CellResizeHandle data-test-subj="test-resize-handle" />}
+              handle={<CommonResizeHandle data-test-subj="test-resize-handle" />}
               height="100%"
               id="test"
               onResize={jest.fn()}
diff --git a/x-pack/legacy/plugins/siem/public/components/resize_handle/index.tsx b/x-pack/legacy/plugins/siem/public/components/resize_handle/index.tsx
index 054df1eff4959b..0a6203056fd20f 100644
--- a/x-pack/legacy/plugins/siem/public/components/resize_handle/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/resize_handle/index.tsx
@@ -4,10 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import * as React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { fromEvent, Observable, Subscription } from 'rxjs';
 import { concatMap, takeUntil } from 'rxjs/operators';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 export type OnResize = ({ delta, id }: { delta: number; id: string }) => void;
 
@@ -20,28 +20,39 @@ export const calculateDeltaX = ({ prevX, screenX }: { prevX: number; screenX: nu
 
 const isSafari = /^((?!chrome|android|crios|fxios|Firefox).)*safari/i.test(navigator.userAgent);
 
-interface Props {
-  /** the `onResize` callback will be invoked with this id */
-  id: string;
-  /** The resizeable content to render */
-  render: (isResizing: boolean) => React.ReactNode;
-  /** a (styled) resize handle */
-  handle: React.ReactNode;
+interface ResizeHandleContainerProps {
+  bottom?: string | number;
   /** optionally provide a height style ResizeHandleContainer */
   height?: string;
-  /** invoked when the handle is resized */
-  onResize: OnResize;
+  left?: string | number;
+  positionAbsolute?: boolean;
+  right?: string | number;
+  top?: string | number;
 }
 
-interface State {
-  isResizing: boolean;
+interface Props extends ResizeHandleContainerProps {
+  /** a (styled) resize handle */
+  handle: React.ReactNode;
+  /** the `onResize` callback will be invoked with this id */
+  id: string;
+  /** invoked when the handle is resized */
+  onResize: OnResize;
+  /** The resizeable content to render */
+  render: (isResizing: boolean) => React.ReactNode;
 }
 
-const ResizeHandleContainer = styled.div<{ height?: string }>`
-  cursor: ${resizeCursorStyle};
-  ${({ height }) => (height != null ? `height: ${height}` : '')}
+const ResizeHandleContainer = styled.div<ResizeHandleContainerProps>`
+  ${({ bottom, height, left, positionAbsolute, right, theme, top }) => css`
+    bottom: ${positionAbsolute && bottom};
+    cursor: ${resizeCursorStyle};
+    height: ${height};
+    left: ${positionAbsolute && left};
+    position: ${positionAbsolute && 'absolute'};
+    right: ${positionAbsolute && right};
+    top: ${positionAbsolute && top};
+    z-index: ${positionAbsolute && theme.eui.euiZLevel1};
+  `}
 `;
-
 ResizeHandleContainer.displayName = 'ResizeHandleContainer';
 
 export const addGlobalResizeCursorStyleToBody = () => {
@@ -52,99 +63,85 @@ export const removeGlobalResizeCursorStyleFromBody = () => {
   document.body.classList.remove(globalResizeCursorClassName);
 };
 
-export class Resizeable extends React.PureComponent<Props, State> {
-  private drag$: Observable<MouseEvent> | null;
-  private dragEventTargets: Array<{ htmlElement: HTMLElement; prevCursor: string }>;
-  private dragSubscription: Subscription | null;
-  private prevX: number = 0;
-  private ref: React.RefObject<HTMLElement>;
-  private upSubscription: Subscription | null;
-
-  constructor(props: Props) {
-    super(props);
-
-    // NOTE: the ref and observable below are NOT stored in component `State`
-    this.ref = React.createRef<HTMLElement>();
-    this.drag$ = null;
-    this.dragSubscription = null;
-    this.upSubscription = null;
-    this.dragEventTargets = [];
-
-    this.state = {
-      isResizing: false,
+export const Resizeable = React.memo<Props>(
+  ({ bottom, handle, height, id, left, onResize, positionAbsolute, render, right, top }) => {
+    const drag$ = useRef<Observable<MouseEvent> | null>(null);
+    const dragEventTargets = useRef<Array<{ htmlElement: HTMLElement; prevCursor: string }>>([]);
+    const dragSubscription = useRef<Subscription | null>(null);
+    const prevX = useRef(0);
+    const ref = useRef<React.RefObject<HTMLElement>>(React.createRef<HTMLElement>());
+    const upSubscription = useRef<Subscription | null>(null);
+    const isResizingRef = useRef(false);
+
+    const calculateDelta = (e: MouseEvent) => {
+      const deltaX = calculateDeltaX({ prevX: prevX.current, screenX: e.screenX });
+      prevX.current = e.screenX;
+      return deltaX;
     };
-  }
-
-  public componentDidMount() {
-    const { id, onResize } = this.props;
-
-    const move$ = fromEvent<MouseEvent>(document, 'mousemove');
-    const down$ = fromEvent<MouseEvent>(this.ref.current!, 'mousedown');
-    const up$ = fromEvent<MouseEvent>(document, 'mouseup');
-
-    this.drag$ = down$.pipe(concatMap(() => move$.pipe(takeUntil(up$))));
-    this.dragSubscription = this.drag$.subscribe(event => {
-      // We do a feature detection of event.movementX here and if it is missing
-      // we calculate the delta manually. Browsers IE-11 and Safari will call calculateDelta
-      const delta =
-        event.movementX == null || isSafari ? this.calculateDelta(event) : event.movementX;
-      if (!this.state.isResizing) {
-        this.setState({ isResizing: true });
-      }
-      onResize({ id, delta });
-      if (event.target != null && event.target instanceof HTMLElement) {
-        const htmlElement: HTMLElement = event.target;
-        this.dragEventTargets = [
-          ...this.dragEventTargets,
-          { htmlElement, prevCursor: htmlElement.style.cursor },
-        ];
-        htmlElement.style.cursor = resizeCursorStyle;
-      }
-    });
-
-    this.upSubscription = up$.subscribe(() => {
-      if (this.state.isResizing) {
-        this.dragEventTargets.reverse().forEach(eventTarget => {
-          eventTarget.htmlElement.style.cursor = eventTarget.prevCursor;
+    useEffect(() => {
+      const move$ = fromEvent<MouseEvent>(document, 'mousemove');
+      const down$ = fromEvent<MouseEvent>(ref.current.current!, 'mousedown');
+      const up$ = fromEvent<MouseEvent>(document, 'mouseup');
+
+      drag$.current = down$.pipe(concatMap(() => move$.pipe(takeUntil(up$))));
+      dragSubscription.current =
+        drag$.current &&
+        drag$.current.subscribe(event => {
+          // We do a feature detection of event.movementX here and if it is missing
+          // we calculate the delta manually. Browsers IE-11 and Safari will call calculateDelta
+          const delta =
+            event.movementX == null || isSafari ? calculateDelta(event) : event.movementX;
+          if (!isResizingRef.current) {
+            isResizingRef.current = true;
+          }
+          onResize({ id, delta });
+          if (event.target != null && event.target instanceof HTMLElement) {
+            const htmlElement: HTMLElement = event.target;
+            dragEventTargets.current = [
+              ...dragEventTargets.current,
+              { htmlElement, prevCursor: htmlElement.style.cursor },
+            ];
+            htmlElement.style.cursor = resizeCursorStyle;
+          }
         });
-        this.dragEventTargets = [];
-        this.setState({ isResizing: false });
-      }
-    });
-  }
 
-  public componentWillUnmount() {
-    if (this.dragSubscription != null) {
-      this.dragSubscription.unsubscribe();
-    }
-
-    if (this.upSubscription != null) {
-      this.upSubscription.unsubscribe();
-    }
-  }
-
-  public render() {
-    const { handle, height, render } = this.props;
+      upSubscription.current = up$.subscribe(() => {
+        if (isResizingRef.current) {
+          dragEventTargets.current.reverse().forEach(eventTarget => {
+            eventTarget.htmlElement.style.cursor = eventTarget.prevCursor;
+          });
+          dragEventTargets.current = [];
+          isResizingRef.current = false;
+        }
+      });
+      return () => {
+        if (dragSubscription.current != null) {
+          dragSubscription.current.unsubscribe();
+        }
+        if (upSubscription.current != null) {
+          upSubscription.current.unsubscribe();
+        }
+      };
+    }, []);
 
     return (
       <>
-        {render(this.state.isResizing)}
+        {render(isResizingRef.current)}
         <ResizeHandleContainer
+          bottom={bottom}
           data-test-subj="resize-handle-container"
           height={height}
-          innerRef={this.ref}
+          innerRef={ref.current}
+          left={left}
+          positionAbsolute={positionAbsolute}
+          right={right}
+          top={top}
         >
           {handle}
         </ResizeHandleContainer>
       </>
     );
   }
+);
 
-  private calculateDelta = (e: MouseEvent) => {
-    const deltaX = calculateDeltaX({ prevX: this.prevX, screenX: e.screenX });
-
-    this.prevX = e.screenX;
-
-    return deltaX;
-  };
-}
+Resizeable.displayName = 'Resizeable';
diff --git a/x-pack/legacy/plugins/siem/public/components/resize_handle/styled_handles.tsx b/x-pack/legacy/plugins/siem/public/components/resize_handle/styled_handles.tsx
index 4a8a3d1ec7262a..4f641c5d2042ef 100644
--- a/x-pack/legacy/plugins/siem/public/components/resize_handle/styled_handles.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/resize_handle/styled_handles.tsx
@@ -6,7 +6,6 @@
 
 import styled from 'styled-components';
 
-export const CELL_RESIZE_HANDLE_WIDTH = 2; // px;
 export const TIMELINE_RESIZE_HANDLE_WIDTH = 2; // px
 
 export const CommonResizeHandle = styled.div`
@@ -15,29 +14,12 @@ export const CommonResizeHandle = styled.div`
   min-height: 20px;
   width: 0;
 `;
-
 CommonResizeHandle.displayName = 'CommonResizeHandle';
 
-export const CellResizeHandle = styled(CommonResizeHandle)`
-  border-right: ${CELL_RESIZE_HANDLE_WIDTH}px solid
-    ${({ theme }) =>
-      theme.darkMode ? theme.eui.euiFormBackgroundColor : theme.eui.euiColorLightestShade};
-  border-top: ${CELL_RESIZE_HANDLE_WIDTH}px solid ${({ theme }) => theme.eui.euiColorLightShade};
-`;
-
-CellResizeHandle.displayName = 'CellResizeHandle';
-
-export const ColumnHeaderResizeHandle = styled(CommonResizeHandle)`
-  border: ${CELL_RESIZE_HANDLE_WIDTH}px solid ${({ theme }) => theme.eui.euiColorLightestShade};
-`;
-
-ColumnHeaderResizeHandle.displayName = 'ColumnHeaderResizeHandle';
-
 export const TimelineResizeHandle = styled(CommonResizeHandle)<{ height: number }>`
   border: ${TIMELINE_RESIZE_HANDLE_WIDTH}px solid ${props => props.theme.eui.euiColorLightShade};
   z-index: 2;
   height: ${({ height }) => `${height}px`};
   position: absolute;
 `;
-
 TimelineResizeHandle.displayName = 'TimelineResizeHandle';
diff --git a/x-pack/legacy/plugins/siem/public/components/skeleton_row/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/skeleton_row/__snapshots__/index.test.tsx.snap
new file mode 100644
index 00000000000000..526758b097a56e
--- /dev/null
+++ b/x-pack/legacy/plugins/siem/public/components/skeleton_row/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SkeletonRow it renders 1`] = `
+<Component>
+  <SkeletonRow />
+</Component>
+`;
diff --git a/x-pack/legacy/plugins/siem/public/components/skeleton_row/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/skeleton_row/index.test.tsx
new file mode 100644
index 00000000000000..b5147d395c7381
--- /dev/null
+++ b/x-pack/legacy/plugins/siem/public/components/skeleton_row/index.test.tsx
@@ -0,0 +1,58 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import 'jest-styled-components';
+import React from 'react';
+
+import { TestProviders } from '../../mock';
+import { SkeletonRow } from './index';
+
+describe('SkeletonRow', () => {
+  test('it renders', () => {
+    const wrapper = shallow(
+      <TestProviders>
+        <SkeletonRow />
+      </TestProviders>
+    );
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
+  test('it renders the correct number of cells if cellCount is specified', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <SkeletonRow cellCount={10} />
+      </TestProviders>
+    );
+
+    expect(wrapper.find('.siemSkeletonRow__cell')).toHaveLength(10);
+  });
+
+  test('it applies row and cell styles when cellColor/cellMargin/rowHeight/rowPadding/style provided', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <SkeletonRow
+          cellColor="red"
+          cellMargin="10px"
+          rowHeight="100px"
+          rowPadding="10px"
+          style={{ width: 'auto' }}
+        />
+      </TestProviders>
+    );
+    const siemSkeletonRow = wrapper.find('.siemSkeletonRow').first();
+    const siemSkeletonRowCell = wrapper.find('.siemSkeletonRow__cell').last();
+
+    expect(siemSkeletonRow).toHaveStyleRule('height', '100px');
+    expect(siemSkeletonRow).toHaveStyleRule('padding', '10px');
+    expect(siemSkeletonRow.props().style!.width).toBe('auto');
+    expect(siemSkeletonRowCell).toHaveStyleRule('background-color', 'red');
+    expect(siemSkeletonRowCell).toHaveStyleRule('margin-left', '10px', {
+      modifier: '& + &',
+    });
+  });
+});
diff --git a/x-pack/legacy/plugins/siem/public/components/skeleton_row/index.tsx b/x-pack/legacy/plugins/siem/public/components/skeleton_row/index.tsx
new file mode 100644
index 00000000000000..4859dc0d055561
--- /dev/null
+++ b/x-pack/legacy/plugins/siem/public/components/skeleton_row/index.tsx
@@ -0,0 +1,67 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+interface RowProps {
+  rowHeight?: string;
+  rowPadding?: string;
+}
+
+const Row = styled.div.attrs({
+  className: 'siemSkeletonRow',
+})<RowProps>`
+  ${({ rowHeight, rowPadding, theme }) => css`
+    border-bottom: ${theme.eui.euiBorderThin};
+    display: flex;
+    height: ${rowHeight ? rowHeight : theme.eui.euiSizeXL};
+    padding: ${rowPadding
+      ? rowPadding
+      : theme.eui.paddingSizes.s + ' ' + theme.eui.paddingSizes.xs};
+  `}
+`;
+Row.displayName = 'Row';
+
+interface CellProps {
+  cellColor?: string;
+  cellMargin?: string;
+}
+
+const Cell = styled.div.attrs({
+  className: 'siemSkeletonRow__cell',
+})<CellProps>`
+  ${({ cellColor, cellMargin, theme }) => css`
+    background-color: ${cellColor ? cellColor : theme.eui.euiColorLightestShade};
+    border-radius: 2px;
+    flex: 1;
+
+    & + & {
+      margin-left: ${cellMargin ? cellMargin : theme.eui.gutterTypes.gutterSmall};
+    }
+  `}
+`;
+Cell.displayName = 'Cell';
+
+export interface SkeletonRowProps extends CellProps, RowProps {
+  cellCount?: number;
+  style?: object;
+}
+
+export const SkeletonRow = React.memo<SkeletonRowProps>(
+  ({ cellColor, cellCount = 4, cellMargin, rowHeight, rowPadding, style }) => {
+    const cells = [...Array(cellCount)].map((_, i) => (
+      <Cell cellColor={cellColor} cellMargin={cellMargin} key={i}></Cell>
+    ));
+
+    return (
+      <Row rowHeight={rowHeight} rowPadding={rowPadding} style={style}>
+        {cells}
+      </Row>
+    );
+  }
+);
+SkeletonRow.displayName = 'SkeletonRow';
diff --git a/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap
index 9541ad4de043bd..7475220b56e77d 100644
--- a/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap
@@ -994,6 +994,9 @@ exports[`Stat Items Component rendering kpis with charts it renders the default
                               },
                               "customHeight": 74,
                               "series": Object {
+                                "stackAccessors": Array [
+                                  "y0",
+                                ],
                                 "xScaleType": "ordinal",
                                 "yScaleType": "linear",
                               },
diff --git a/x-pack/legacy/plugins/siem/public/components/stat_items/index.tsx b/x-pack/legacy/plugins/siem/public/components/stat_items/index.tsx
index 110d1463817092..c206a4d33270b9 100644
--- a/x-pack/legacy/plugins/siem/public/components/stat_items/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/stat_items/index.tsx
@@ -103,6 +103,7 @@ export const barchartConfigs = (config?: { onElementClick?: ElementClickListener
   series: {
     xScaleType: ScaleType.Ordinal,
     yScaleType: ScaleType.Linear,
+    stackAccessors: ['y0'],
   },
   axis: {
     xTickFormatter: numberFormatter,
@@ -145,6 +146,7 @@ export const addValueToBarChart = (
         x,
         y,
         g: key,
+        y0: 0,
       },
     ];
 
diff --git a/x-pack/legacy/plugins/siem/public/components/super_date_picker/index.tsx b/x-pack/legacy/plugins/siem/public/components/super_date_picker/index.tsx
index 722cf9db731f72..fa695d76f9f3e5 100644
--- a/x-pack/legacy/plugins/siem/public/components/super_date_picker/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/super_date_picker/index.tsx
@@ -7,13 +7,13 @@
 import dateMath from '@elastic/datemath';
 import {
   EuiSuperDatePicker,
-  EuiSuperDatePickerProps,
   OnRefreshChangeProps,
+  EuiSuperDatePickerRecentRange,
   OnRefreshProps,
   OnTimeChangeProps,
 } from '@elastic/eui';
 import { getOr, take } from 'lodash/fp';
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import { connect } from 'react-redux';
 
 import { Dispatch } from 'redux';
@@ -36,33 +36,17 @@ import { InputsRange, Policy } from '../../store/inputs/model';
 
 const MAX_RECENTLY_USED_RANGES = 9;
 
-type MyEuiSuperDatePickerProps = Pick<
-  EuiSuperDatePickerProps,
-  | 'end'
-  | 'isPaused'
-  | 'onTimeChange'
-  | 'onRefreshChange'
-  | 'onRefresh'
-  | 'recentlyUsedRanges'
-  | 'refreshInterval'
-  | 'showUpdateButton'
-  | 'start'
-> & {
-  isLoading?: boolean;
-};
-const MyEuiSuperDatePicker: React.SFC<MyEuiSuperDatePickerProps> = EuiSuperDatePicker;
-
 interface SuperDatePickerStateRedux {
   duration: number;
-  policy: Policy['kind'];
-  kind: string;
-  fromStr: string;
-  toStr: string;
-  start: number;
   end: number;
+  fromStr: string;
   isLoading: boolean;
-  queries: inputsModel.GlobalGraphqlQuery[];
+  kind: string;
   kqlQuery: inputsModel.GlobalKqlQuery;
+  policy: Policy['kind'];
+  queries: inputsModel.GlobalGraphqlQuery[];
+  start: number;
+  toStr: string;
 }
 
 interface UpdateReduxTime extends OnTimeChangeProps {
@@ -85,145 +69,137 @@ type DispatchUpdateReduxTime = ({
 }: UpdateReduxTime) => ReturnUpdateReduxTime;
 
 interface SuperDatePickerDispatchProps {
+  setDuration: ({ id, duration }: { id: InputsModelId; duration: number }) => void;
   startAutoReload: ({ id }: { id: InputsModelId }) => void;
   stopAutoReload: ({ id }: { id: InputsModelId }) => void;
-  setDuration: ({ id, duration }: { id: InputsModelId; duration: number }) => void;
   updateReduxTime: DispatchUpdateReduxTime;
 }
 
 interface OwnProps {
-  id: InputsModelId;
   disabled?: boolean;
+  id: InputsModelId;
   timelineId?: string;
 }
 
-interface TimeArgs {
-  start: string;
-  end: string;
-}
-
 export type SuperDatePickerProps = OwnProps &
   SuperDatePickerDispatchProps &
   SuperDatePickerStateRedux;
 
-export interface SuperDatePickerState {
-  isQuickSelection: boolean;
-  recentlyUsedRanges: TimeArgs[];
-  showUpdateButton: boolean;
-}
+export const SuperDatePickerComponent = React.memo<SuperDatePickerProps>(
+  ({
+    duration,
+    end,
+    fromStr,
+    id,
+    isLoading,
+    kind,
+    kqlQuery,
+    policy,
+    queries,
+    setDuration,
+    start,
+    startAutoReload,
+    stopAutoReload,
+    timelineId,
+    toStr,
+    updateReduxTime,
+  }) => {
+    const [isQuickSelection, setIsQuickSelection] = useState(true);
+    const [recentlyUsedRanges, setRecentlyUsedRanges] = useState<EuiSuperDatePickerRecentRange[]>(
+      []
+    );
+    const onRefresh = ({ start: newStart, end: newEnd }: OnRefreshProps): void => {
+      const { kqlHasBeenUpdated } = updateReduxTime({
+        end: newEnd,
+        id,
+        isInvalid: false,
+        isQuickSelection,
+        kql: kqlQuery,
+        start: newStart,
+        timelineId,
+      });
+      const currentStart = formatDate(newStart);
+      const currentEnd = isQuickSelection
+        ? formatDate(newEnd, { roundUp: true })
+        : formatDate(newEnd);
+      if (
+        !kqlHasBeenUpdated &&
+        (!isQuickSelection || (start === currentStart && end === currentEnd))
+      ) {
+        refetchQuery(queries);
+      }
+    };
+
+    const onRefreshChange = ({ isPaused, refreshInterval }: OnRefreshChangeProps): void => {
+      if (duration !== refreshInterval) {
+        setDuration({ id, duration: refreshInterval });
+      }
 
-export const SuperDatePickerComponent = class extends Component<
-  SuperDatePickerProps,
-  SuperDatePickerState
-> {
-  constructor(props: SuperDatePickerProps) {
-    super(props);
+      if (isPaused && policy === 'interval') {
+        stopAutoReload({ id });
+      } else if (!isPaused && policy === 'manual') {
+        startAutoReload({ id });
+      }
 
-    this.state = {
-      isQuickSelection: true,
-      recentlyUsedRanges: [],
-      showUpdateButton: true,
+      if (!isPaused && (!isQuickSelection || (isQuickSelection && toStr !== 'now'))) {
+        refetchQuery(queries);
+      }
+    };
+
+    const refetchQuery = (newQueries: inputsModel.GlobalGraphqlQuery[]) => {
+      newQueries.forEach(q => q.refetch && (q.refetch as inputsModel.Refetch)());
     };
-  }
 
-  public render() {
-    const { duration, end, start, kind, fromStr, policy, toStr, isLoading } = this.props;
+    const onTimeChange = ({
+      start: newStart,
+      end: newEnd,
+      isQuickSelection: newIsQuickSelection,
+      isInvalid,
+    }: OnTimeChangeProps) => {
+      if (!isInvalid) {
+        updateReduxTime({
+          end: newEnd,
+          id,
+          isInvalid,
+          isQuickSelection: newIsQuickSelection,
+          kql: kqlQuery,
+          start: newStart,
+          timelineId,
+        });
+        const newRecentlyUsedRanges = [
+          { start: newStart, end: newEnd },
+          ...take(
+            MAX_RECENTLY_USED_RANGES,
+            recentlyUsedRanges.filter(
+              recentlyUsedRange =>
+                !(recentlyUsedRange.start === newStart && recentlyUsedRange.end === newEnd)
+            )
+          ),
+        ];
+
+        setRecentlyUsedRanges(newRecentlyUsedRanges);
+        setIsQuickSelection(newIsQuickSelection);
+      }
+    };
     const endDate = kind === 'relative' ? toStr : new Date(end).toISOString();
     const startDate = kind === 'relative' ? fromStr : new Date(start).toISOString();
 
     return (
-      <MyEuiSuperDatePicker
+      <EuiSuperDatePicker
         end={endDate}
         isLoading={isLoading}
         isPaused={policy === 'manual'}
-        onTimeChange={this.onTimeChange}
-        onRefreshChange={this.onRefreshChange}
-        onRefresh={this.onRefresh}
-        recentlyUsedRanges={this.state.recentlyUsedRanges}
+        onRefresh={onRefresh}
+        onRefreshChange={onRefreshChange}
+        onTimeChange={onTimeChange}
+        recentlyUsedRanges={recentlyUsedRanges}
         refreshInterval={duration}
-        showUpdateButton={this.state.showUpdateButton}
+        showUpdateButton={true}
         start={startDate}
       />
     );
   }
-  private onRefresh = ({ start, end }: OnRefreshProps): void => {
-    const { kqlHasBeenUpdated } = this.props.updateReduxTime({
-      end,
-      id: this.props.id,
-      isInvalid: false,
-      isQuickSelection: this.state.isQuickSelection,
-      kql: this.props.kqlQuery,
-      start,
-      timelineId: this.props.timelineId,
-    });
-    const currentStart = formatDate(start);
-    const currentEnd = this.state.isQuickSelection
-      ? formatDate(end, { roundUp: true })
-      : formatDate(end);
-    if (
-      !kqlHasBeenUpdated &&
-      (!this.state.isQuickSelection ||
-        (this.props.start === currentStart && this.props.end === currentEnd))
-    ) {
-      this.refetchQuery(this.props.queries);
-    }
-  };
-
-  private onRefreshChange = ({ isPaused, refreshInterval }: OnRefreshChangeProps): void => {
-    const { id, duration, policy, stopAutoReload, startAutoReload } = this.props;
-    if (duration !== refreshInterval) {
-      this.props.setDuration({ id, duration: refreshInterval });
-    }
-
-    if (isPaused && policy === 'interval') {
-      stopAutoReload({ id });
-    } else if (!isPaused && policy === 'manual') {
-      startAutoReload({ id });
-    }
-
-    if (
-      !isPaused &&
-      (!this.state.isQuickSelection || (this.state.isQuickSelection && this.props.toStr !== 'now'))
-    ) {
-      this.refetchQuery(this.props.queries);
-    }
-  };
-
-  private refetchQuery = (queries: inputsModel.GlobalGraphqlQuery[]) => {
-    queries.forEach(q => q.refetch && (q.refetch as inputsModel.Refetch)());
-  };
-
-  private onTimeChange = ({ start, end, isQuickSelection, isInvalid }: OnTimeChangeProps) => {
-    if (!isInvalid) {
-      this.props.updateReduxTime({
-        end,
-        id: this.props.id,
-        isInvalid,
-        isQuickSelection,
-        kql: this.props.kqlQuery,
-        start,
-        timelineId: this.props.timelineId,
-      });
-      this.setState((prevState: SuperDatePickerState) => {
-        const recentlyUsedRanges = [
-          { start, end },
-          ...take(
-            MAX_RECENTLY_USED_RANGES,
-            prevState.recentlyUsedRanges.filter(
-              recentlyUsedRange =>
-                !(recentlyUsedRange.start === start && recentlyUsedRange.end === end)
-            )
-          ),
-        ];
-
-        return {
-          recentlyUsedRanges,
-          isQuickSelection,
-        };
-      });
-    }
-  };
-};
+);
 
 const formatDate = (
   date: string,
@@ -292,33 +268,35 @@ const dispatchUpdateReduxTime = (dispatch: Dispatch) => ({
 };
 
 export const makeMapStateToProps = () => {
-  const getPolicySelector = policySelector();
   const getDurationSelector = durationSelector();
-  const getKindSelector = kindSelector();
-  const getStartSelector = startSelector();
   const getEndSelector = endSelector();
   const getFromStrSelector = fromStrSelector();
-  const getToStrSelector = toStrSelector();
   const getIsLoadingSelector = isLoadingSelector();
-  const getQueriesSelector = queriesSelector();
+  const getKindSelector = kindSelector();
   const getKqlQuerySelector = kqlQuerySelector();
+  const getPolicySelector = policySelector();
+  const getQueriesSelector = queriesSelector();
+  const getStartSelector = startSelector();
+  const getToStrSelector = toStrSelector();
   return (state: State, { id }: OwnProps) => {
     const inputsRange: InputsRange = getOr({}, `inputs.${id}`, state);
     return {
-      policy: getPolicySelector(inputsRange),
       duration: getDurationSelector(inputsRange),
-      kind: getKindSelector(inputsRange),
-      start: getStartSelector(inputsRange),
       end: getEndSelector(inputsRange),
       fromStr: getFromStrSelector(inputsRange),
-      toStr: getToStrSelector(inputsRange),
       isLoading: getIsLoadingSelector(inputsRange),
-      queries: getQueriesSelector(inputsRange),
+      kind: getKindSelector(inputsRange),
       kqlQuery: getKqlQuerySelector(inputsRange),
+      policy: getPolicySelector(inputsRange),
+      queries: getQueriesSelector(inputsRange),
+      start: getStartSelector(inputsRange),
+      toStr: getToStrSelector(inputsRange),
     };
   };
 };
 
+SuperDatePickerComponent.displayName = 'SuperDatePickerComponent';
+
 const mapDispatchToProps = (dispatch: Dispatch) => ({
   startAutoReload: ({ id }: { id: InputsModelId }) =>
     dispatch(inputsActions.startAutoReload({ id })),
diff --git a/x-pack/legacy/plugins/siem/public/components/tables/helpers.tsx b/x-pack/legacy/plugins/siem/public/components/tables/helpers.tsx
index 9fe227c8f655a9..2557630a603061 100644
--- a/x-pack/legacy/plugins/siem/public/components/tables/helpers.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/tables/helpers.tsx
@@ -4,17 +4,17 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import styled from 'styled-components';
 import { EuiLink, EuiPopover, EuiToolTip, EuiText, EuiTextColor } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React, { useState } from 'react';
+import styled from 'styled-components';
 
-import { escapeDataProviderId } from '../drag_and_drop/helpers';
 import { DragEffects, DraggableWrapper } from '../drag_and_drop/draggable_wrapper';
-import { IS_OPERATOR } from '../timeline/data_providers/data_provider';
-import { Provider } from '../timeline/data_providers/provider';
+import { escapeDataProviderId } from '../drag_and_drop/helpers';
 import { defaultToEmptyTag, getEmptyTagValue } from '../empty_value';
 import { MoreRowItems, Spacer } from '../page';
+import { IS_OPERATOR } from '../timeline/data_providers/data_provider';
+import { Provider } from '../timeline/data_providers/provider';
 
 const Subtext = styled.div`
   font-size: ${props => props.theme.eui.euiFontSizeXS};
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/actions/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/actions/index.tsx
index 000c44be95a5dd..2de60fdf548b1c 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/actions/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/actions/index.tsx
@@ -3,22 +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 {
-  EuiButtonIcon,
-  EuiCheckbox,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiLoadingSpinner,
-  EuiToolTip,
-} from '@elastic/eui';
+import { EuiButtonIcon, EuiCheckbox, EuiToolTip } from '@elastic/eui';
 import { noop } from 'lodash/fp';
 import * as React from 'react';
-import styled from 'styled-components';
 
 import { Note } from '../../../../lib/note';
 import { AssociateNote, UpdateNote } from '../../../notes/helpers';
 import { Pin } from '../../../pin';
 import { NotesButton } from '../../properties/helpers';
+import { EventsLoading, EventsTd, EventsTdContent, EventsTdGroupActions } from '../../styles';
 import { eventHasNotes, getPinTooltip } from '../helpers';
 import * as i18n from '../translations';
 
@@ -41,41 +34,6 @@ interface Props {
   updateNote: UpdateNote;
 }
 
-const ActionsContainer = styled.div<{ actionsColumnWidth: number }>`
-  overflow: hidden;
-  width: ${({ actionsColumnWidth }) => actionsColumnWidth}px;
-`;
-
-ActionsContainer.displayName = 'ActionsContainer';
-
-const ActionLoading = styled(EuiLoadingSpinner)`
-  position: relative;
-  top: 3px;
-`;
-
-ActionLoading.displayName = 'ActionLoading';
-
-const PinContainer = styled.div`
-  position: relative;
-  top: -1px;
-  width: 27px;
-`;
-
-PinContainer.displayName = 'PinContainer';
-
-const SelectEventContainer = styled(EuiFlexItem)`
-  padding: 4px 0 0 7px;
-`;
-
-SelectEventContainer.displayName = 'SelectEventContainer';
-
-const NotesButtonContainer = styled(EuiFlexItem)`
-  position: relative;
-  top: -1px;
-`;
-
-NotesButtonContainer.displayName = 'NotesButtonContainer';
-
 const emptyNotes: string[] = [];
 
 export const Actions = React.memo<Props>(
@@ -97,48 +55,43 @@ export const Actions = React.memo<Props>(
     toggleShowNotes,
     updateNote,
   }) => (
-    <ActionsContainer
+    <EventsTdGroupActions
       actionsColumnWidth={actionsColumnWidth}
       data-test-subj="event-actions-container"
     >
-      <EuiFlexGroup
-        alignItems="flexStart"
-        data-test-subj="event-actions"
-        direction="row"
-        gutterSize="none"
-        justifyContent="spaceBetween"
-      >
-        {showCheckboxes && (
-          <SelectEventContainer data-test-subj="select-event-container" grow={false}>
+      {showCheckboxes && (
+        <EventsTd data-test-subj="select-event-container">
+          <EventsTdContent textAlign="center">
             <EuiCheckbox
               data-test-subj="select-event"
               id={eventId}
               checked={checked}
               onChange={noop}
             />
-          </SelectEventContainer>
-        )}
-
-        <EuiFlexItem grow={false}>
-          <div>
-            {loading && <ActionLoading size="m" />}
-            {!loading && (
-              <EuiButtonIcon
-                aria-label={expanded ? i18n.COLLAPSE : i18n.EXPAND}
-                color="subdued"
-                iconType={expanded ? 'arrowDown' : 'arrowRight'}
-                data-test-subj="expand-event"
-                id={eventId}
-                onClick={onEventToggled}
-                size="s"
-              />
-            )}
-          </div>
-        </EuiFlexItem>
-
-        {!isEventViewer && (
-          <>
-            <EuiFlexItem grow={false}>
+          </EventsTdContent>
+        </EventsTd>
+      )}
+
+      <EventsTd>
+        <EventsTdContent textAlign="center">
+          {loading && <EventsLoading />}
+
+          {!loading && (
+            <EuiButtonIcon
+              aria-label={expanded ? i18n.COLLAPSE : i18n.EXPAND}
+              data-test-subj="expand-event"
+              iconType={expanded ? 'arrowDown' : 'arrowRight'}
+              id={eventId}
+              onClick={onEventToggled}
+            />
+          )}
+        </EventsTdContent>
+      </EventsTd>
+
+      {!isEventViewer && (
+        <>
+          <EventsTd>
+            <EventsTdContent textAlign="center">
               <EuiToolTip
                 data-test-subj="timeline-action-pin-tool-tip"
                 content={getPinTooltip({
@@ -146,18 +99,18 @@ export const Actions = React.memo<Props>(
                   eventHasNotes: eventHasNotes(noteIds),
                 })}
               >
-                <PinContainer>
-                  <Pin
-                    allowUnpinning={!eventHasNotes(noteIds)}
-                    pinned={eventIsPinned}
-                    data-test-subj="pin-event"
-                    onClick={onPinClicked}
-                  />
-                </PinContainer>
+                <Pin
+                  allowUnpinning={!eventHasNotes(noteIds)}
+                  data-test-subj="pin-event"
+                  onClick={onPinClicked}
+                  pinned={eventIsPinned}
+                />
               </EuiToolTip>
-            </EuiFlexItem>
+            </EventsTdContent>
+          </EventsTd>
 
-            <NotesButtonContainer grow={false}>
+          <EventsTd>
+            <EventsTdContent textAlign="center">
               <NotesButton
                 animate={false}
                 associateNote={associateNote}
@@ -170,11 +123,11 @@ export const Actions = React.memo<Props>(
                 toolTip={i18n.NOTES_TOOLTIP}
                 updateNote={updateNote}
               />
-            </NotesButtonContainer>
-          </>
-        )}
-      </EuiFlexGroup>
-    </ActionsContainer>
+            </EventsTdContent>
+          </EventsTd>
+        </>
+      )}
+    </EventsTdGroupActions>
   ),
   (nextProps, prevProps) => {
     return (
@@ -190,5 +143,4 @@ export const Actions = React.memo<Props>(
     );
   }
 );
-
 Actions.displayName = 'Actions';
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/__snapshots__/index.test.tsx.snap
index c85440bb6526ac..dd90635d98aa1c 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/__snapshots__/index.test.tsx.snap
@@ -1,633 +1,493 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ColumnHeaders rendering renders correctly against snapshot 1`] = `
-<ColumnHeadersContainer
+<EventsThead
   data-test-subj="column-headers"
-  minWidth={1000}
 >
-  <ColumnHeadersFlexGroup
-    alignItems="center"
-    data-test-subj="column-headers-group"
-    gutterSize="none"
-  >
-    <EuiFlexItem
-      data-test-subj="actions-item"
-      grow={false}
+  <EventsTrHeader>
+    <EventsThGroupActions
+      actionsColumnWidth={115}
+      data-test-subj="actions-container"
     >
-      <ActionsContainer
-        actionsColumnWidth={115}
-        data-test-subj="actions-container"
-      >
-        <EuiFlexGroup
-          gutterSize="none"
+      <EventsTh>
+        <EventsThContent
+          textAlign="center"
         >
-          <EuiFlexItem
-            grow={true}
-          >
-            <Connect(StatefulFieldsBrowserComponent)
-              browserFields={
-                Object {
-                  "agent": Object {
-                    "fields": Object {
-                      "agent.ephemeral_id": Object {
-                        "aggregatable": true,
-                        "category": "agent",
-                        "description": "Ephemeral identifier of this agent (if one exists). This id normally changes across restarts, but \`agent.id\` does not.",
-                        "example": "8a4f500f",
-                        "format": "",
-                        "indexes": Array [
-                          "auditbeat",
-                          "filebeat",
-                          "packetbeat",
-                        ],
-                        "name": "agent.ephemeral_id",
-                        "searchable": true,
-                        "type": "string",
-                      },
-                      "agent.hostname": Object {
-                        "aggregatable": true,
-                        "category": "agent",
-                        "description": null,
-                        "example": null,
-                        "format": "",
-                        "indexes": Array [
-                          "auditbeat",
-                          "filebeat",
-                          "packetbeat",
-                        ],
-                        "name": "agent.hostname",
-                        "searchable": true,
-                        "type": "string",
-                      },
-                      "agent.id": Object {
-                        "aggregatable": true,
-                        "category": "agent",
-                        "description": "Unique identifier of this agent (if one exists). Example: For Beats this would be beat.id.",
-                        "example": "8a4f500d",
-                        "format": "",
-                        "indexes": Array [
-                          "auditbeat",
-                          "filebeat",
-                          "packetbeat",
-                        ],
-                        "name": "agent.id",
-                        "searchable": true,
-                        "type": "string",
-                      },
-                      "agent.name": Object {
-                        "aggregatable": true,
-                        "category": "agent",
-                        "description": "Name of the agent. This is a name that can be given to an agent. This can be helpful if for example two Filebeat instances are running on the same host but a human readable separation is needed on which Filebeat instance data is coming from. If no name is given, the name is often left empty.",
-                        "example": "foo",
-                        "format": "",
-                        "indexes": Array [
-                          "auditbeat",
-                          "filebeat",
-                          "packetbeat",
-                        ],
-                        "name": "agent.name",
-                        "searchable": true,
-                        "type": "string",
-                      },
+          <Connect(StatefulFieldsBrowserComponent)
+            browserFields={
+              Object {
+                "agent": Object {
+                  "fields": Object {
+                    "agent.ephemeral_id": Object {
+                      "aggregatable": true,
+                      "category": "agent",
+                      "description": "Ephemeral identifier of this agent (if one exists). This id normally changes across restarts, but \`agent.id\` does not.",
+                      "example": "8a4f500f",
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "agent.ephemeral_id",
+                      "searchable": true,
+                      "type": "string",
                     },
-                  },
-                  "auditd": Object {
-                    "fields": Object {
-                      "auditd.data.a0": Object {
-                        "aggregatable": true,
-                        "category": "auditd",
-                        "description": null,
-                        "example": null,
-                        "format": "",
-                        "indexes": Array [
-                          "auditbeat",
-                        ],
-                        "name": "auditd.data.a0",
-                        "searchable": true,
-                        "type": "string",
-                      },
-                      "auditd.data.a1": Object {
-                        "aggregatable": true,
-                        "category": "auditd",
-                        "description": null,
-                        "example": null,
-                        "format": "",
-                        "indexes": Array [
-                          "auditbeat",
-                        ],
-                        "name": "auditd.data.a1",
-                        "searchable": true,
-                        "type": "string",
-                      },
-                      "auditd.data.a2": Object {
-                        "aggregatable": true,
-                        "category": "auditd",
-                        "description": null,
-                        "example": null,
-                        "format": "",
-                        "indexes": Array [
-                          "auditbeat",
-                        ],
-                        "name": "auditd.data.a2",
-                        "searchable": true,
-                        "type": "string",
-                      },
+                    "agent.hostname": Object {
+                      "aggregatable": true,
+                      "category": "agent",
+                      "description": null,
+                      "example": null,
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "agent.hostname",
+                      "searchable": true,
+                      "type": "string",
                     },
-                  },
-                  "base": Object {
-                    "fields": Object {
-                      "@timestamp": Object {
-                        "aggregatable": true,
-                        "category": "base",
-                        "description": "Date/time when the event originated. For log events this is the date/time when the event was generated, and not when it was read. Required field for all events.",
-                        "example": "2016-05-23T08:05:34.853Z",
-                        "format": "",
-                        "indexes": Array [
-                          "auditbeat",
-                          "filebeat",
-                          "packetbeat",
-                        ],
-                        "name": "@timestamp",
-                        "searchable": true,
-                        "type": "date",
-                      },
+                    "agent.id": Object {
+                      "aggregatable": true,
+                      "category": "agent",
+                      "description": "Unique identifier of this agent (if one exists). Example: For Beats this would be beat.id.",
+                      "example": "8a4f500d",
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "agent.id",
+                      "searchable": true,
+                      "type": "string",
                     },
-                  },
-                  "client": Object {
-                    "fields": Object {
-                      "client.address": Object {
-                        "aggregatable": true,
-                        "category": "client",
-                        "description": "Some event client addresses are defined ambiguously. The event will sometimes list an IP, a domain or a unix socket.  You should always store the raw address in the \`.address\` field. Then it should be duplicated to \`.ip\` or \`.domain\`, depending on which one it is.",
-                        "example": null,
-                        "format": "",
-                        "indexes": Array [
-                          "auditbeat",
-                          "filebeat",
-                          "packetbeat",
-                        ],
-                        "name": "client.address",
-                        "searchable": true,
-                        "type": "string",
-                      },
-                      "client.bytes": Object {
-                        "aggregatable": true,
-                        "category": "client",
-                        "description": "Bytes sent from the client to the server.",
-                        "example": "184",
-                        "format": "",
-                        "indexes": Array [
-                          "auditbeat",
-                          "filebeat",
-                          "packetbeat",
-                        ],
-                        "name": "client.bytes",
-                        "searchable": true,
-                        "type": "number",
-                      },
-                      "client.domain": Object {
-                        "aggregatable": true,
-                        "category": "client",
-                        "description": "Client domain.",
-                        "example": null,
-                        "format": "",
-                        "indexes": Array [
-                          "auditbeat",
-                          "filebeat",
-                          "packetbeat",
-                        ],
-                        "name": "client.domain",
-                        "searchable": true,
-                        "type": "string",
-                      },
-                      "client.geo.country_iso_code": Object {
-                        "aggregatable": true,
-                        "category": "client",
-                        "description": "Country ISO code.",
-                        "example": "CA",
-                        "format": "",
-                        "indexes": Array [
-                          "auditbeat",
-                          "filebeat",
-                          "packetbeat",
-                        ],
-                        "name": "client.geo.country_iso_code",
-                        "searchable": true,
-                        "type": "string",
-                      },
+                    "agent.name": Object {
+                      "aggregatable": true,
+                      "category": "agent",
+                      "description": "Name of the agent. This is a name that can be given to an agent. This can be helpful if for example two Filebeat instances are running on the same host but a human readable separation is needed on which Filebeat instance data is coming from. If no name is given, the name is often left empty.",
+                      "example": "foo",
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "agent.name",
+                      "searchable": true,
+                      "type": "string",
                     },
                   },
-                  "cloud": Object {
-                    "fields": Object {
-                      "cloud.account.id": Object {
-                        "aggregatable": true,
-                        "category": "cloud",
-                        "description": "The cloud account or organization id used to identify different entities in a multi-tenant environment. Examples: AWS account id, Google Cloud ORG Id, or other unique identifier.",
-                        "example": "666777888999",
-                        "format": "",
-                        "indexes": Array [
-                          "auditbeat",
-                          "filebeat",
-                          "packetbeat",
-                        ],
-                        "name": "cloud.account.id",
-                        "searchable": true,
-                        "type": "string",
-                      },
-                      "cloud.availability_zone": Object {
-                        "aggregatable": true,
-                        "category": "cloud",
-                        "description": "Availability zone in which this host is running.",
-                        "example": "us-east-1c",
-                        "format": "",
-                        "indexes": Array [
-                          "auditbeat",
-                          "filebeat",
-                          "packetbeat",
-                        ],
-                        "name": "cloud.availability_zone",
-                        "searchable": true,
-                        "type": "string",
-                      },
+                },
+                "auditd": Object {
+                  "fields": Object {
+                    "auditd.data.a0": Object {
+                      "aggregatable": true,
+                      "category": "auditd",
+                      "description": null,
+                      "example": null,
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                      ],
+                      "name": "auditd.data.a0",
+                      "searchable": true,
+                      "type": "string",
                     },
-                  },
-                  "container": Object {
-                    "fields": Object {
-                      "container.id": Object {
-                        "aggregatable": true,
-                        "category": "container",
-                        "description": "Unique container id.",
-                        "example": null,
-                        "format": "",
-                        "indexes": Array [
-                          "auditbeat",
-                          "filebeat",
-                          "packetbeat",
-                        ],
-                        "name": "container.id",
-                        "searchable": true,
-                        "type": "string",
-                      },
-                      "container.image.name": Object {
-                        "aggregatable": true,
-                        "category": "container",
-                        "description": "Name of the image the container was built on.",
-                        "example": null,
-                        "format": "",
-                        "indexes": Array [
-                          "auditbeat",
-                          "filebeat",
-                          "packetbeat",
-                        ],
-                        "name": "container.image.name",
-                        "searchable": true,
-                        "type": "string",
-                      },
-                      "container.image.tag": Object {
-                        "aggregatable": true,
-                        "category": "container",
-                        "description": "Container image tag.",
-                        "example": null,
-                        "format": "",
-                        "indexes": Array [
-                          "auditbeat",
-                          "filebeat",
-                          "packetbeat",
-                        ],
-                        "name": "container.image.tag",
-                        "searchable": true,
-                        "type": "string",
-                      },
+                    "auditd.data.a1": Object {
+                      "aggregatable": true,
+                      "category": "auditd",
+                      "description": null,
+                      "example": null,
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                      ],
+                      "name": "auditd.data.a1",
+                      "searchable": true,
+                      "type": "string",
                     },
-                  },
-                  "destination": Object {
-                    "fields": Object {
-                      "destination.address": Object {
-                        "aggregatable": true,
-                        "category": "destination",
-                        "description": "Some event destination addresses are defined ambiguously. The event will sometimes list an IP, a domain or a unix socket.  You should always store the raw address in the \`.address\` field. Then it should be duplicated to \`.ip\` or \`.domain\`, depending on which one it is.",
-                        "example": null,
-                        "format": "",
-                        "indexes": Array [
-                          "auditbeat",
-                          "filebeat",
-                          "packetbeat",
-                        ],
-                        "name": "destination.address",
-                        "searchable": true,
-                        "type": "string",
-                      },
-                      "destination.bytes": Object {
-                        "aggregatable": true,
-                        "category": "destination",
-                        "description": "Bytes sent from the destination to the source.",
-                        "example": "184",
-                        "format": "",
-                        "indexes": Array [
-                          "auditbeat",
-                          "filebeat",
-                          "packetbeat",
-                        ],
-                        "name": "destination.bytes",
-                        "searchable": true,
-                        "type": "number",
-                      },
-                      "destination.domain": Object {
-                        "aggregatable": true,
-                        "category": "destination",
-                        "description": "Destination domain.",
-                        "example": null,
-                        "format": "",
-                        "indexes": Array [
-                          "auditbeat",
-                          "filebeat",
-                          "packetbeat",
-                        ],
-                        "name": "destination.domain",
-                        "searchable": true,
-                        "type": "string",
-                      },
-                      "destination.ip": Object {
-                        "aggregatable": true,
-                        "category": "destination",
-                        "description": "IP address of the destination. Can be one or multiple IPv4 or IPv6 addresses.",
-                        "example": "",
-                        "format": "",
-                        "indexes": Array [
-                          "auditbeat",
-                          "filebeat",
-                          "packetbeat",
-                        ],
-                        "name": "destination.ip",
-                        "searchable": true,
-                        "type": "ip",
-                      },
-                      "destination.port": Object {
-                        "aggregatable": true,
-                        "category": "destination",
-                        "description": "Port of the destination.",
-                        "example": "",
-                        "format": "",
-                        "indexes": Array [
-                          "auditbeat",
-                          "filebeat",
-                          "packetbeat",
-                        ],
-                        "name": "destination.port",
-                        "searchable": true,
-                        "type": "long",
-                      },
+                    "auditd.data.a2": Object {
+                      "aggregatable": true,
+                      "category": "auditd",
+                      "description": null,
+                      "example": null,
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                      ],
+                      "name": "auditd.data.a2",
+                      "searchable": true,
+                      "type": "string",
                     },
                   },
-                  "event": Object {
-                    "fields": Object {
-                      "event.end": Object {
-                        "aggregatable": true,
-                        "category": "event",
-                        "description": "event.end contains the date when the event ended or when the activity was last observed.",
-                        "example": null,
-                        "format": "",
-                        "indexes": Array [
-                          "auditbeat-*",
-                          "filebeat-*",
-                          "packetbeat-*",
-                          "winlogbeat-*",
-                        ],
-                        "name": "event.end",
-                        "searchable": true,
-                        "type": "date",
-                      },
+                },
+                "base": Object {
+                  "fields": Object {
+                    "@timestamp": Object {
+                      "aggregatable": true,
+                      "category": "base",
+                      "description": "Date/time when the event originated. For log events this is the date/time when the event was generated, and not when it was read. Required field for all events.",
+                      "example": "2016-05-23T08:05:34.853Z",
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "@timestamp",
+                      "searchable": true,
+                      "type": "date",
                     },
                   },
-                  "source": Object {
-                    "fields": Object {
-                      "source.ip": Object {
-                        "aggregatable": true,
-                        "category": "source",
-                        "description": "IP address of the source. Can be one or multiple IPv4 or IPv6 addresses.",
-                        "example": "",
-                        "format": "",
-                        "indexes": Array [
-                          "auditbeat",
-                          "filebeat",
-                          "packetbeat",
-                        ],
-                        "name": "source.ip",
-                        "searchable": true,
-                        "type": "ip",
-                      },
-                      "source.port": Object {
-                        "aggregatable": true,
-                        "category": "source",
-                        "description": "Port of the source.",
-                        "example": "",
-                        "format": "",
-                        "indexes": Array [
-                          "auditbeat",
-                          "filebeat",
-                          "packetbeat",
-                        ],
-                        "name": "source.port",
-                        "searchable": true,
-                        "type": "long",
-                      },
+                },
+                "client": Object {
+                  "fields": Object {
+                    "client.address": Object {
+                      "aggregatable": true,
+                      "category": "client",
+                      "description": "Some event client addresses are defined ambiguously. The event will sometimes list an IP, a domain or a unix socket.  You should always store the raw address in the \`.address\` field. Then it should be duplicated to \`.ip\` or \`.domain\`, depending on which one it is.",
+                      "example": null,
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "client.address",
+                      "searchable": true,
+                      "type": "string",
+                    },
+                    "client.bytes": Object {
+                      "aggregatable": true,
+                      "category": "client",
+                      "description": "Bytes sent from the client to the server.",
+                      "example": "184",
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "client.bytes",
+                      "searchable": true,
+                      "type": "number",
+                    },
+                    "client.domain": Object {
+                      "aggregatable": true,
+                      "category": "client",
+                      "description": "Client domain.",
+                      "example": null,
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "client.domain",
+                      "searchable": true,
+                      "type": "string",
+                    },
+                    "client.geo.country_iso_code": Object {
+                      "aggregatable": true,
+                      "category": "client",
+                      "description": "Country ISO code.",
+                      "example": "CA",
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "client.geo.country_iso_code",
+                      "searchable": true,
+                      "type": "string",
                     },
                   },
-                }
-              }
-              columnHeaders={
-                Array [
-                  Object {
-                    "columnHeaderType": "not-filtered",
-                    "id": "@timestamp",
-                    "width": 190,
-                  },
-                  Object {
-                    "columnHeaderType": "not-filtered",
-                    "id": "message",
-                    "width": 180,
-                  },
-                  Object {
-                    "columnHeaderType": "not-filtered",
-                    "id": "event.category",
-                    "width": 180,
-                  },
-                  Object {
-                    "columnHeaderType": "not-filtered",
-                    "id": "event.action",
-                    "width": 180,
+                },
+                "cloud": Object {
+                  "fields": Object {
+                    "cloud.account.id": Object {
+                      "aggregatable": true,
+                      "category": "cloud",
+                      "description": "The cloud account or organization id used to identify different entities in a multi-tenant environment. Examples: AWS account id, Google Cloud ORG Id, or other unique identifier.",
+                      "example": "666777888999",
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "cloud.account.id",
+                      "searchable": true,
+                      "type": "string",
+                    },
+                    "cloud.availability_zone": Object {
+                      "aggregatable": true,
+                      "category": "cloud",
+                      "description": "Availability zone in which this host is running.",
+                      "example": "us-east-1c",
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "cloud.availability_zone",
+                      "searchable": true,
+                      "type": "string",
+                    },
                   },
-                  Object {
-                    "columnHeaderType": "not-filtered",
-                    "id": "host.name",
-                    "width": 180,
+                },
+                "container": Object {
+                  "fields": Object {
+                    "container.id": Object {
+                      "aggregatable": true,
+                      "category": "container",
+                      "description": "Unique container id.",
+                      "example": null,
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "container.id",
+                      "searchable": true,
+                      "type": "string",
+                    },
+                    "container.image.name": Object {
+                      "aggregatable": true,
+                      "category": "container",
+                      "description": "Name of the image the container was built on.",
+                      "example": null,
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "container.image.name",
+                      "searchable": true,
+                      "type": "string",
+                    },
+                    "container.image.tag": Object {
+                      "aggregatable": true,
+                      "category": "container",
+                      "description": "Container image tag.",
+                      "example": null,
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "container.image.tag",
+                      "searchable": true,
+                      "type": "string",
+                    },
                   },
-                  Object {
-                    "columnHeaderType": "not-filtered",
-                    "id": "source.ip",
-                    "width": 180,
+                },
+                "destination": Object {
+                  "fields": Object {
+                    "destination.address": Object {
+                      "aggregatable": true,
+                      "category": "destination",
+                      "description": "Some event destination addresses are defined ambiguously. The event will sometimes list an IP, a domain or a unix socket.  You should always store the raw address in the \`.address\` field. Then it should be duplicated to \`.ip\` or \`.domain\`, depending on which one it is.",
+                      "example": null,
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "destination.address",
+                      "searchable": true,
+                      "type": "string",
+                    },
+                    "destination.bytes": Object {
+                      "aggregatable": true,
+                      "category": "destination",
+                      "description": "Bytes sent from the destination to the source.",
+                      "example": "184",
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "destination.bytes",
+                      "searchable": true,
+                      "type": "number",
+                    },
+                    "destination.domain": Object {
+                      "aggregatable": true,
+                      "category": "destination",
+                      "description": "Destination domain.",
+                      "example": null,
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "destination.domain",
+                      "searchable": true,
+                      "type": "string",
+                    },
+                    "destination.ip": Object {
+                      "aggregatable": true,
+                      "category": "destination",
+                      "description": "IP address of the destination. Can be one or multiple IPv4 or IPv6 addresses.",
+                      "example": "",
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "destination.ip",
+                      "searchable": true,
+                      "type": "ip",
+                    },
+                    "destination.port": Object {
+                      "aggregatable": true,
+                      "category": "destination",
+                      "description": "Port of the destination.",
+                      "example": "",
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "destination.port",
+                      "searchable": true,
+                      "type": "long",
+                    },
                   },
-                  Object {
-                    "columnHeaderType": "not-filtered",
-                    "id": "destination.ip",
-                    "width": 180,
+                },
+                "event": Object {
+                  "fields": Object {
+                    "event.end": Object {
+                      "aggregatable": true,
+                      "category": "event",
+                      "description": "event.end contains the date when the event ended or when the activity was last observed.",
+                      "example": null,
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat-*",
+                        "filebeat-*",
+                        "packetbeat-*",
+                        "winlogbeat-*",
+                      ],
+                      "name": "event.end",
+                      "searchable": true,
+                      "type": "date",
+                    },
                   },
-                  Object {
-                    "columnHeaderType": "not-filtered",
-                    "id": "user.name",
-                    "width": 180,
+                },
+                "source": Object {
+                  "fields": Object {
+                    "source.ip": Object {
+                      "aggregatable": true,
+                      "category": "source",
+                      "description": "IP address of the source. Can be one or multiple IPv4 or IPv6 addresses.",
+                      "example": "",
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "source.ip",
+                      "searchable": true,
+                      "type": "ip",
+                    },
+                    "source.port": Object {
+                      "aggregatable": true,
+                      "category": "source",
+                      "description": "Port of the source.",
+                      "example": "",
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "source.port",
+                      "searchable": true,
+                      "type": "long",
+                    },
                   },
-                ]
+                },
               }
-              data-test-subj="field-browser"
-              height={300}
-              isEventViewer={false}
-              onUpdateColumns={[MockFunction]}
-              timelineId="test"
-              toggleColumn={[MockFunction]}
-              width={900}
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </ActionsContainer>
-    </EuiFlexItem>
-    <EuiFlexItem
-      data-test-subj="headers-item"
-      grow={false}
+            }
+            columnHeaders={
+              Array [
+                Object {
+                  "columnHeaderType": "not-filtered",
+                  "id": "@timestamp",
+                  "width": 190,
+                },
+                Object {
+                  "columnHeaderType": "not-filtered",
+                  "id": "message",
+                  "width": 180,
+                },
+                Object {
+                  "columnHeaderType": "not-filtered",
+                  "id": "event.category",
+                  "width": 180,
+                },
+                Object {
+                  "columnHeaderType": "not-filtered",
+                  "id": "event.action",
+                  "width": 180,
+                },
+                Object {
+                  "columnHeaderType": "not-filtered",
+                  "id": "host.name",
+                  "width": 180,
+                },
+                Object {
+                  "columnHeaderType": "not-filtered",
+                  "id": "source.ip",
+                  "width": 180,
+                },
+                Object {
+                  "columnHeaderType": "not-filtered",
+                  "id": "destination.ip",
+                  "width": 180,
+                },
+                Object {
+                  "columnHeaderType": "not-filtered",
+                  "id": "user.name",
+                  "width": 180,
+                },
+              ]
+            }
+            data-test-subj="field-browser"
+            height={300}
+            isEventViewer={false}
+            onUpdateColumns={[MockFunction]}
+            timelineId="test"
+            toggleColumn={[MockFunction]}
+            width={900}
+          />
+        </EventsThContent>
+      </EventsTh>
+    </EventsThGroupActions>
+    <Connect(Droppable)
+      direction="horizontal"
+      droppableId="droppableId.timelineColumns.test"
+      ignoreContainerClipping={false}
+      isDropDisabled={false}
+      type="drag-type-field"
     >
-      <DroppableWrapper
-        droppableId="droppableId.timelineColumns.test"
-        height="39px"
-        isDropDisabled={false}
-        type="drag-type-field"
-      >
-        <EuiFlexGroup
-          data-test-subj="headers-group"
-          gutterSize="none"
-        >
-          <EuiFlexItem
-            grow={false}
-            key="@timestamp"
-          >
-            <Connect(Draggable)
-              data-test-subj="draggable"
-              disableInteractiveElementBlocking={false}
-              draggableId="draggableId.field.timeline-column-headers-test.@timestamp"
-              index={0}
-              isDragDisabled={true}
-              type="drag-type-field"
-            >
-              <Component />
-            </Connect(Draggable)>
-          </EuiFlexItem>
-          <EuiFlexItem
-            grow={false}
-            key="message"
-          >
-            <Connect(Draggable)
-              data-test-subj="draggable"
-              disableInteractiveElementBlocking={false}
-              draggableId="draggableId.field.timeline-column-headers-test.message"
-              index={1}
-              isDragDisabled={true}
-              type="drag-type-field"
-            >
-              <Component />
-            </Connect(Draggable)>
-          </EuiFlexItem>
-          <EuiFlexItem
-            grow={false}
-            key="event.category"
-          >
-            <Connect(Draggable)
-              data-test-subj="draggable"
-              disableInteractiveElementBlocking={false}
-              draggableId="draggableId.field.timeline-column-headers-test.event!!!DOT!!!category"
-              index={2}
-              isDragDisabled={true}
-              type="drag-type-field"
-            >
-              <Component />
-            </Connect(Draggable)>
-          </EuiFlexItem>
-          <EuiFlexItem
-            grow={false}
-            key="event.action"
-          >
-            <Connect(Draggable)
-              data-test-subj="draggable"
-              disableInteractiveElementBlocking={false}
-              draggableId="draggableId.field.timeline-column-headers-test.event!!!DOT!!!action"
-              index={3}
-              isDragDisabled={true}
-              type="drag-type-field"
-            >
-              <Component />
-            </Connect(Draggable)>
-          </EuiFlexItem>
-          <EuiFlexItem
-            grow={false}
-            key="host.name"
-          >
-            <Connect(Draggable)
-              data-test-subj="draggable"
-              disableInteractiveElementBlocking={false}
-              draggableId="draggableId.field.timeline-column-headers-test.host!!!DOT!!!name"
-              index={4}
-              isDragDisabled={true}
-              type="drag-type-field"
-            >
-              <Component />
-            </Connect(Draggable)>
-          </EuiFlexItem>
-          <EuiFlexItem
-            grow={false}
-            key="source.ip"
-          >
-            <Connect(Draggable)
-              data-test-subj="draggable"
-              disableInteractiveElementBlocking={false}
-              draggableId="draggableId.field.timeline-column-headers-test.source!!!DOT!!!ip"
-              index={5}
-              isDragDisabled={true}
-              type="drag-type-field"
-            >
-              <Component />
-            </Connect(Draggable)>
-          </EuiFlexItem>
-          <EuiFlexItem
-            grow={false}
-            key="destination.ip"
-          >
-            <Connect(Draggable)
-              data-test-subj="draggable"
-              disableInteractiveElementBlocking={false}
-              draggableId="draggableId.field.timeline-column-headers-test.destination!!!DOT!!!ip"
-              index={6}
-              isDragDisabled={true}
-              type="drag-type-field"
-            >
-              <Component />
-            </Connect(Draggable)>
-          </EuiFlexItem>
-          <EuiFlexItem
-            grow={false}
-            key="user.name"
-          >
-            <Connect(Draggable)
-              data-test-subj="draggable"
-              disableInteractiveElementBlocking={false}
-              draggableId="draggableId.field.timeline-column-headers-test.user!!!DOT!!!name"
-              index={7}
-              isDragDisabled={true}
-              type="drag-type-field"
-            >
-              <Component />
-            </Connect(Draggable)>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </DroppableWrapper>
-    </EuiFlexItem>
-  </ColumnHeadersFlexGroup>
-</ColumnHeadersContainer>
+      <Component />
+    </Connect(Droppable)>
+  </EventsTrHeader>
+</EventsThead>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/actions/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/actions/index.tsx
index 6e3409c46e4f22..03c8fd19517255 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/actions/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/actions/index.tsx
@@ -4,40 +4,20 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
+import { EuiButtonIcon } from '@elastic/eui';
 import * as React from 'react';
 import { pure } from 'recompose';
-import styled from 'styled-components';
 
 import { OnColumnRemoved } from '../../../events';
+import { EventsHeadingExtra, EventsLoading } from '../../../styles';
+import { useTimelineContext } from '../../../timeline_context';
 import { Sort } from '../../sort';
-import { SortIndicator } from '../../sort/sort_indicator';
 import { ColumnHeader } from '../column_header';
-import { getSortDirection } from '../header/helpers';
 import * as i18n from '../translations';
-import { useTimelineContext } from '../../../timeline_context';
-
-const CLOSE_BUTTON_SIZE = 25; // px
-const SORT_INDICATOR_SIZE = 25; // px
-export const ACTIONS_WIDTH = SORT_INDICATOR_SIZE + CLOSE_BUTTON_SIZE; // px
-
-const ActionsContainer = styled(EuiFlexGroup)`
-  height: 100%;
-  width: ${ACTIONS_WIDTH}px;
-`;
-
-ActionsContainer.displayName = 'ActionsContainer';
-
-const WrappedCloseButton = styled.div<{ show: boolean }>`
-  visibility: ${({ show }) => (show ? 'visible' : 'hidden')};
-`;
-
-WrappedCloseButton.displayName = 'WrappedCloseButton';
 
 interface Props {
   header: ColumnHeader;
   onColumnRemoved: OnColumnRemoved;
-  show: boolean;
   sort: Sort;
 }
 
@@ -46,53 +26,36 @@ interface Props {
 export const CloseButton = pure<{
   columnId: string;
   onColumnRemoved: OnColumnRemoved;
-  show: boolean;
-}>(({ columnId, onColumnRemoved, show }) => (
-  <WrappedCloseButton data-test-subj="wrapped-close-button" show={show}>
-    <EuiButtonIcon
-      aria-label={i18n.REMOVE_COLUMN}
-      color="subdued"
-      data-test-subj="remove-column"
-      iconType="cross"
-      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
-        // To avoid a re-sorting when you delete a column
-        event.preventDefault();
-        event.stopPropagation();
-        onColumnRemoved(columnId);
-      }}
-    />
-  </WrappedCloseButton>
+}>(({ columnId, onColumnRemoved }) => (
+  <EuiButtonIcon
+    aria-label={i18n.REMOVE_COLUMN}
+    color="text"
+    data-test-subj="remove-column"
+    iconType="cross"
+    onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+      // To avoid a re-sorting when you delete a column
+      event.preventDefault();
+      event.stopPropagation();
+      onColumnRemoved(columnId);
+    }}
+  />
 ));
-
 CloseButton.displayName = 'CloseButton';
 
-export const Actions = React.memo<Props>(({ header, onColumnRemoved, show, sort }) => {
+export const Actions = React.memo<Props>(({ header, onColumnRemoved, sort }) => {
   const isLoading = useTimelineContext();
   return (
-    <ActionsContainer
-      alignItems="center"
-      data-test-subj="header-actions"
-      justifyContent="center"
-      gutterSize="none"
-    >
-      <EuiFlexItem grow={false}>
-        <SortIndicator
-          data-test-subj="header-sort-indicator"
-          sortDirection={getSortDirection({ header, sort })}
-        />
-      </EuiFlexItem>
-
+    <>
       {sort.columnId === header.id && isLoading ? (
-        <EuiFlexItem grow={false}>
-          <EuiLoadingSpinner size="l" />
-        </EuiFlexItem>
+        <EventsHeadingExtra className="siemEventsHeading__extra--loading">
+          <EventsLoading />
+        </EventsHeadingExtra>
       ) : (
-        <EuiFlexItem grow={false}>
-          <CloseButton columnId={header.id} onColumnRemoved={onColumnRemoved} show={show} />
-        </EuiFlexItem>
+        <EventsHeadingExtra className="siemEventsHeading__extra--close">
+          <CloseButton columnId={header.id} onColumnRemoved={onColumnRemoved} />
+        </EventsHeadingExtra>
       )}
-    </ActionsContainer>
+    </>
   );
 });
-
 Actions.displayName = 'Actions';
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/common/styles.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/common/styles.tsx
index 4ea91796939dfb..54d5c6219abf24 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/common/styles.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/common/styles.tsx
@@ -10,11 +10,9 @@ import styled from 'styled-components';
 export const FullHeightFlexGroup = styled(EuiFlexGroup)`
   height: 100%;
 `;
-
 FullHeightFlexGroup.displayName = 'FullHeightFlexGroup';
 
 export const FullHeightFlexItem = styled(EuiFlexItem)`
   height: 100%;
 `;
-
 FullHeightFlexItem.displayName = 'FullHeightFlexItem';
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header/__snapshots__/index.test.tsx.snap
index f0e4bb992c5c45..b009ec78aac599 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header/__snapshots__/index.test.tsx.snap
@@ -1,24 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Header renders correctly against snapshot 1`] = `
-<HeaderContainer
-  data-test-subj="header-container"
-  gutterSize="none"
-  key="@timestamp"
-  width="190px"
->
-  <Resizeable
-    handle={
-      <FullHeightFlexItem
-        grow={false}
-      >
-        <ColumnHeaderResizeHandle />
-      </FullHeightFlexItem>
-    }
-    height="35px"
-    id="@timestamp"
-    onResize={[Function]}
-    render={[Function]}
-  />
-</HeaderContainer>
+<Resizeable
+  bottom={0}
+  handle={<EventsHeadingHandle />}
+  id="@timestamp"
+  onResize={[Function]}
+  positionAbsolute={true}
+  render={[Function]}
+  right="-1px"
+  top={0}
+/>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header/index.test.tsx
index 860f30ea8a9a8b..69899ece0cea88 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header/index.test.tsx
@@ -69,10 +69,11 @@ describe('Header', () => {
     });
 
     test('it renders a sort indicator', () => {
+      const headerSortable = { ...columnHeader, aggregatable: true };
       const wrapper = mount(
         <TestProviders>
           <Header
-            header={columnHeader}
+            header={headerSortable}
             onColumnRemoved={jest.fn()}
             onColumnResized={jest.fn()}
             onColumnSorted={jest.fn()}
@@ -85,10 +86,10 @@ describe('Header', () => {
 
       expect(
         wrapper
-          .find('[data-test-subj="sortIndicator"]')
+          .find('[data-test-subj="header-sort-indicator"]')
           .first()
-          .prop('type')
-      ).toEqual('sortDown');
+          .exists()
+      ).toEqual(true);
     });
 
     test('it renders a filter', () => {
@@ -118,34 +119,10 @@ describe('Header', () => {
           .props()
       ).toHaveProperty('placeholder');
     });
-
-    describe('minWidth', () => {
-      test('it applies the value of the width prop to the HeaderContainer', () => {
-        const wrapper = mount(
-          <TestProviders>
-            <Header
-              header={columnHeader}
-              onColumnRemoved={jest.fn()}
-              onColumnResized={jest.fn()}
-              onColumnSorted={jest.fn()}
-              setIsResizing={jest.fn()}
-              sort={sort}
-              timelineId={timelineId}
-            />
-          </TestProviders>
-        );
-        expect(
-          wrapper
-            .find('[data-test-subj="header-container"]')
-            .first()
-            .props()
-        ).toHaveProperty('width', `${columnHeader.width}px`);
-      });
-    });
   });
 
   describe('onColumnSorted', () => {
-    test('it invokes the onColumnSorted callback when the header is clicked', () => {
+    test('it invokes the onColumnSorted callback when the header sort button is clicked', () => {
       const mockOnColumnSorted = jest.fn();
       const headerSortable = { ...columnHeader, aggregatable: true };
       const wrapper = mount(
@@ -163,7 +140,7 @@ describe('Header', () => {
       );
 
       wrapper
-        .find('[data-test-subj="header"]')
+        .find('[data-test-subj="header-sort-button"]')
         .first()
         .simulate('click');
 
@@ -173,7 +150,7 @@ describe('Header', () => {
       });
     });
 
-    test('it does NOT invoke the onColumnSorted callback when the header is clicked and aggregatable is false', () => {
+    test('it does NOT render the header sort button when aggregatable is false', () => {
       const mockOnColumnSorted = jest.fn();
       const headerSortable = { ...columnHeader, aggregatable: false };
       const wrapper = mount(
@@ -190,15 +167,10 @@ describe('Header', () => {
         </TestProviders>
       );
 
-      wrapper
-        .find('[data-test-subj="header"]')
-        .first()
-        .simulate('click');
-
-      expect(mockOnColumnSorted).not.toHaveBeenCalled();
+      expect(wrapper.find('[data-test-subj="header-sort-button"]').length).toEqual(0);
     });
 
-    test('it does NOT invoke the onColumnSorted callback when the header is clicked and aggregatable is missing', () => {
+    test('it does NOT render the header sort button when aggregatable is missing', () => {
       const mockOnColumnSorted = jest.fn();
       const headerSortable = { ...columnHeader };
       const wrapper = mount(
@@ -215,12 +187,7 @@ describe('Header', () => {
         </TestProviders>
       );
 
-      wrapper
-        .find('[data-test-subj="header"]')
-        .first()
-        .simulate('click');
-
-      expect(mockOnColumnSorted).not.toHaveBeenCalled();
+      expect(wrapper.find('[data-test-subj="header-sort-button"]').length).toEqual(0);
     });
 
     test('it does NOT invoke the onColumnSorted callback when the header is clicked and aggregatable is undefined', () => {
@@ -254,7 +221,7 @@ describe('Header', () => {
       const mockOnColumnRemoved = jest.fn();
 
       const wrapper = mount(
-        <CloseButton columnId={columnHeader.id} show={true} onColumnRemoved={mockOnColumnRemoved} />
+        <CloseButton columnId={columnHeader.id} onColumnRemoved={mockOnColumnRemoved} />
       );
 
       wrapper
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header/index.tsx
index b87683cb343d12..1e603b0c157793 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header/index.tsx
@@ -4,86 +4,81 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
+import { EuiToolTip } from '@elastic/eui';
 import { noop } from 'lodash/fp';
-import * as React from 'react';
-import styled from 'styled-components';
+import React from 'react';
 
-import { FieldNameContainer } from '../../../../draggables/field_badge';
 import { OnResize, Resizeable } from '../../../../resize_handle';
-import {
-  CELL_RESIZE_HANDLE_WIDTH,
-  ColumnHeaderResizeHandle,
-} from '../../../../resize_handle/styled_handles';
 import { TruncatableText } from '../../../../truncatable_text';
-import { WithHoverActions } from '../../../../with_hover_actions';
 import { OnColumnRemoved, OnColumnResized, OnColumnSorted, OnFilterChange } from '../../../events';
+import {
+  EventsHeading,
+  EventsHeadingHandle,
+  EventsHeadingTitleButton,
+  EventsHeadingTitleSpan,
+} from '../../../styles';
+import { useTimelineContext } from '../../../timeline_context';
 import { Sort } from '../../sort';
-import { Actions, ACTIONS_WIDTH } from '../actions';
+import { SortIndicator } from '../../sort/sort_indicator';
+import { Actions } from '../actions';
 import { ColumnHeader } from '../column_header';
-import { FullHeightFlexGroup, FullHeightFlexItem } from '../common/styles';
 import { Filter } from '../filter';
 import { HeaderToolTipContent } from '../header_tooltip_content';
-
-import { getNewSortDirectionOnClick } from './helpers';
-import { useTimelineContext } from '../../../timeline_context';
-
-const TITLE_PADDING = 10; // px
-const RESIZE_HANDLE_HEIGHT = 35; // px
-
-const HeaderContainer = styled(EuiFlexGroup)<{ width: string }>`
-  display: flex;
-  height: 100%;
-  overflow: hidden;
-  width: ${({ width }) => width};
-`;
-
-HeaderContainer.displayName = 'HeaderContainer';
-
-const HeaderFlexItem = styled(EuiFlexItem)<{ width: string }>`
-  width: ${({ width }) => width};
-`;
-
-HeaderFlexItem.displayName = 'HeaderFlexItem';
-
-const HeaderDiv = styled.div<{ isLoading: boolean }>`
-  cursor: ${({ isLoading }) => (isLoading ? 'default' : 'grab')};
-  display: flex;
-  height: 100%;
-  flex-direction: row;
-  overflow: hidden;
-`;
-
-HeaderDiv.displayName = 'HeaderDiv';
+import { getNewSortDirectionOnClick, getSortDirection } from './helpers';
 
 interface HeaderCompProps {
   children: React.ReactNode;
+  header: ColumnHeader;
   isResizing: boolean;
   onClick: () => void;
+  sort: Sort;
 }
 
-const HeaderComp = React.memo<HeaderCompProps>(({ children, onClick, isResizing }) => {
-  const isLoading = useTimelineContext();
-  return (
-    <HeaderDiv
-      data-test-subj="header"
-      onClick={!isResizing && !isLoading ? onClick : noop}
-      isLoading={isLoading}
-    >
-      {children}
-    </HeaderDiv>
-  );
-});
+const HeaderComp = React.memo<HeaderCompProps>(
+  ({ children, header, isResizing, onClick, sort }) => {
+    const isLoading = useTimelineContext();
 
+    return (
+      <EventsHeading data-test-subj="header" isLoading={isLoading}>
+        {header.aggregatable ? (
+          <EventsHeadingTitleButton
+            data-test-subj="header-sort-button"
+            onClick={!isResizing && !isLoading ? onClick : noop}
+          >
+            <TruncatableText data-test-subj={`header-text-${header.id}`}>
+              <EuiToolTip
+                data-test-subj="header-tooltip"
+                content={<HeaderToolTipContent header={header} />}
+              >
+                <>{header.id}</>
+              </EuiToolTip>
+            </TruncatableText>
+
+            <SortIndicator
+              data-test-subj="header-sort-indicator"
+              sortDirection={getSortDirection({ header, sort })}
+            />
+          </EventsHeadingTitleButton>
+        ) : (
+          <EventsHeadingTitleSpan>
+            <TruncatableText data-test-subj={`header-text-${header.id}`}>
+              <EuiToolTip
+                data-test-subj="header-tooltip"
+                content={<HeaderToolTipContent header={header} />}
+              >
+                <>{header.id}</>
+              </EuiToolTip>
+            </TruncatableText>
+          </EventsHeadingTitleSpan>
+        )}
+
+        {children}
+      </EventsHeading>
+    );
+  }
+);
 HeaderComp.displayName = 'HeaderComp';
 
-const TruncatableHeaderText = styled(TruncatableText)`
-  font-weight: bold;
-  padding: 5px;
-`;
-
-TruncatableHeaderText.displayName = 'TruncatableHeaderText';
-
 interface Props {
   header: ColumnHeader;
   onColumnRemoved: OnColumnRemoved;
@@ -96,87 +91,17 @@ interface Props {
 }
 
 /** Renders a header */
-export class Header extends React.PureComponent<Props> {
-  public render() {
-    const { header } = this.props;
-
-    return (
-      <HeaderContainer
-        data-test-subj="header-container"
-        gutterSize="none"
-        key={header.id}
-        width={`${header.width}px`}
-      >
-        <Resizeable
-          handle={
-            <FullHeightFlexItem grow={false}>
-              <ColumnHeaderResizeHandle />
-            </FullHeightFlexItem>
-          }
-          height={`${RESIZE_HANDLE_HEIGHT}px`}
-          id={header.id}
-          render={this.renderActions}
-          onResize={this.onResize}
-        />
-      </HeaderContainer>
-    );
-  }
-
-  private renderActions = (isResizing: boolean) => {
-    const { header, onColumnRemoved, onFilterChange = noop, setIsResizing, sort } = this.props;
-
-    setIsResizing(isResizing);
-
-    return (
-      <HeaderFlexItem grow={false} width={`${header.width - CELL_RESIZE_HANDLE_WIDTH}px`}>
-        <WithHoverActions
-          render={showHoverContent => (
-            <>
-              <HeaderComp isResizing={isResizing} data-test-subj="header" onClick={this.onClick}>
-                <EuiToolTip
-                  data-test-subj="header-tooltip"
-                  content={<HeaderToolTipContent header={header} />}
-                >
-                  <FullHeightFlexGroup
-                    data-test-subj="header-items"
-                    alignItems="center"
-                    gutterSize="none"
-                  >
-                    <EuiFlexItem grow={false}>
-                      <FieldNameContainer>
-                        <TruncatableHeaderText
-                          data-test-subj={`header-text-${header.id}`}
-                          size="xs"
-                          width={`${header.width -
-                            (ACTIONS_WIDTH + CELL_RESIZE_HANDLE_WIDTH + TITLE_PADDING)}px`}
-                        >
-                          {header.id}
-                        </TruncatableHeaderText>
-                      </FieldNameContainer>
-                    </EuiFlexItem>
-                    <FullHeightFlexItem>
-                      <Actions
-                        header={header}
-                        onColumnRemoved={onColumnRemoved}
-                        show={header.id !== '@timestamp' ? showHoverContent : false}
-                        sort={sort}
-                      />
-                    </FullHeightFlexItem>
-                  </FullHeightFlexGroup>
-                </EuiToolTip>
-              </HeaderComp>
-              <Filter header={header} onFilterChange={onFilterChange} />
-            </>
-          )}
-        />
-      </HeaderFlexItem>
-    );
-  };
-
-  private onClick = () => {
-    const { header, onColumnSorted, sort } = this.props;
-
-    if (header.aggregatable) {
+export const Header = React.memo<Props>(
+  ({
+    header,
+    onColumnRemoved,
+    onColumnResized,
+    onColumnSorted,
+    onFilterChange = noop,
+    setIsResizing,
+    sort,
+  }) => {
+    const onClick = () => {
       onColumnSorted!({
         columnId: header.id,
         sortDirection: getNewSortDirectionOnClick({
@@ -184,10 +109,38 @@ export class Header extends React.PureComponent<Props> {
           currentSort: sort,
         }),
       });
-    }
-  };
+    };
 
-  private onResize: OnResize = ({ delta, id }) => {
-    this.props.onColumnResized({ columnId: id, delta });
-  };
-}
+    const onResize: OnResize = ({ delta, id }) => {
+      onColumnResized({ columnId: id, delta });
+    };
+
+    const renderActions = (isResizing: boolean) => {
+      setIsResizing(isResizing);
+      return (
+        <>
+          <HeaderComp header={header} isResizing={isResizing} onClick={onClick} sort={sort}>
+            <Actions header={header} onColumnRemoved={onColumnRemoved} sort={sort} />
+          </HeaderComp>
+
+          <Filter header={header} onFilterChange={onFilterChange} />
+        </>
+      );
+    };
+
+    return (
+      <Resizeable
+        bottom={0}
+        handle={<EventsHeadingHandle />}
+        id={header.id}
+        onResize={onResize}
+        positionAbsolute
+        render={renderActions}
+        right="-1px"
+        top={0}
+      />
+    );
+  }
+);
+
+Header.displayName = 'Header';
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header_tooltip_content/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header_tooltip_content/index.tsx
index 6c822a0761a383..4b56b9589f19e9 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header_tooltip_content/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header_tooltip_content/index.tsx
@@ -19,30 +19,26 @@ const IconType = styled(EuiIcon)`
   position: relative;
   top: -2px;
 `;
-
 IconType.displayName = 'IconType';
 
 const P = styled.p`
   margin-bottom: 5px;
 `;
-
 P.displayName = 'P';
 
 const ToolTipTableMetadata = styled.span`
   margin-right: 5px;
 `;
-
 ToolTipTableMetadata.displayName = 'ToolTipTableMetadata';
 
 const ToolTipTableValue = styled.span`
   word-wrap: break-word;
 `;
-
 ToolTipTableValue.displayName = 'ToolTipTableValue';
 
 export const HeaderToolTipContent = pure<{ header: ColumnHeader }>(({ header }) => (
   <>
-    {!isEmpty(header.category) ? (
+    {!isEmpty(header.category) && (
       <P>
         <ToolTipTableMetadata data-test-subj="category">
           {i18n.CATEGORY}
@@ -50,7 +46,7 @@ export const HeaderToolTipContent = pure<{ header: ColumnHeader }>(({ header })
         </ToolTipTableMetadata>
         <ToolTipTableValue data-test-subj="category-value">{header.category}</ToolTipTableValue>
       </P>
-    ) : null}
+    )}
     <P>
       <ToolTipTableMetadata data-test-subj="field">
         {i18n.FIELD}
@@ -68,7 +64,7 @@ export const HeaderToolTipContent = pure<{ header: ColumnHeader }>(({ header })
         <span data-test-subj="type-value">{header.type}</span>
       </ToolTipTableValue>
     </P>
-    {!isEmpty(header.description) ? (
+    {!isEmpty(header.description) && (
       <P>
         <ToolTipTableMetadata data-test-subj="description">
           {i18n.DESCRIPTION}
@@ -78,8 +74,7 @@ export const HeaderToolTipContent = pure<{ header: ColumnHeader }>(({ header })
           {header.description}
         </ToolTipTableValue>
       </P>
-    ) : null}
+    )}
   </>
 ));
-
 HeaderToolTipContent.displayName = 'HeaderToolTipContent';
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/index.test.tsx
index 5b453103f1eeb3..aec534dd8fc856 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/index.test.tsx
@@ -38,7 +38,6 @@ describe('ColumnHeaders', () => {
           actionsColumnWidth={DEFAULT_ACTIONS_COLUMN_WIDTH}
           browserFields={mockBrowserFields}
           columnHeaders={defaultHeaders}
-          minWidth={1000}
           onColumnSorted={jest.fn()}
           onColumnRemoved={jest.fn()}
           onColumnResized={jest.fn()}
@@ -59,7 +58,6 @@ describe('ColumnHeaders', () => {
             actionsColumnWidth={DEFAULT_ACTIONS_COLUMN_WIDTH}
             browserFields={mockBrowserFields}
             columnHeaders={defaultHeaders}
-            minWidth={1000}
             onColumnSorted={jest.fn()}
             onColumnRemoved={jest.fn()}
             onColumnResized={jest.fn()}
@@ -87,7 +85,6 @@ describe('ColumnHeaders', () => {
             actionsColumnWidth={DEFAULT_ACTIONS_COLUMN_WIDTH}
             browserFields={mockBrowserFields}
             columnHeaders={defaultHeaders}
-            minWidth={1000}
             onColumnSorted={jest.fn()}
             onColumnRemoved={jest.fn()}
             onColumnResized={jest.fn()}
@@ -117,7 +114,6 @@ describe('ColumnHeaders', () => {
             actionsColumnWidth={DEFAULT_ACTIONS_COLUMN_WIDTH}
             browserFields={mockBrowserFields}
             columnHeaders={defaultHeaders}
-            minWidth={1000}
             onColumnSorted={jest.fn()}
             onColumnRemoved={jest.fn()}
             onColumnResized={jest.fn()}
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/index.tsx
index aa477dab7048d9..4bd2bce0152520 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/index.tsx
@@ -4,15 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { noop } from 'lodash/fp';
 import * as React from 'react';
-import { Draggable } from 'react-beautiful-dnd';
-import styled, { css } from 'styled-components';
+import { Draggable, Droppable } from 'react-beautiful-dnd';
 
 import { BrowserFields } from '../../../../containers/source';
 import { DragEffects } from '../../../drag_and_drop/draggable_wrapper';
-import { DroppableWrapper } from '../../../drag_and_drop/droppable_wrapper';
 import {
   droppableTimelineColumnsPrefix,
   getDraggableFieldId,
@@ -20,6 +17,8 @@ import {
 } from '../../../drag_and_drop/helpers';
 import { DraggableFieldBadge } from '../../../draggables/field_badge';
 import { StatefulFieldsBrowser } from '../../../fields_browser';
+import { FIELD_BROWSER_HEIGHT, FIELD_BROWSER_WIDTH } from '../../../fields_browser/helpers';
+import { isContainerResizing } from '../../../resize_handle/is_resizing';
 import {
   OnColumnRemoved,
   OnColumnResized,
@@ -27,20 +26,18 @@ import {
   OnFilterChange,
   OnUpdateColumns,
 } from '../../events';
+import {
+  EventsTh,
+  EventsThContent,
+  EventsThead,
+  EventsThGroupActions,
+  EventsThGroupData,
+  EventsTrHeader,
+} from '../../styles';
 import { Sort } from '../sort';
-
 import { ColumnHeader } from './column_header';
 import { EventsSelect } from './events_select';
 import { Header } from './header';
-import { FIELD_BROWSER_HEIGHT, FIELD_BROWSER_WIDTH } from '../../../fields_browser/helpers';
-import { isContainerResizing } from '../../../resize_handle/is_resizing';
-
-const ActionsContainer = styled.div<{ actionsColumnWidth: number }>`
-  overflow: hidden;
-  width: ${({ actionsColumnWidth }) => actionsColumnWidth}px;
-`;
-
-ActionsContainer.displayName = 'ActionsContainer';
 
 interface Props {
   actionsColumnWidth: number;
@@ -56,83 +53,8 @@ interface Props {
   sort: Sort;
   timelineId: string;
   toggleColumn: (column: ColumnHeader) => void;
-  minWidth: number;
 }
 
-const COLUMN_HEADERS_HEIGHT = '39px';
-
-const ColumnHeadersContainer = styled.div<{
-  minWidth: number;
-}>`
-  border-bottom: 1px solid ${({ theme }) => `${theme.eui.euiColorLightShade};`}
-  display: block;
-  height: ${COLUMN_HEADERS_HEIGHT};
-  overflow: hidden;
-  min-width: ${({ minWidth }) => `${minWidth}px`};
-`;
-
-ColumnHeadersContainer.displayName = 'ColumnHeadersContainer';
-
-const ColumnHeadersFlexGroup = styled(EuiFlexGroup)`
-  height: ${COLUMN_HEADERS_HEIGHT};
-`;
-
-ColumnHeadersFlexGroup.displayName = 'ColumnHeadersFlexGroup';
-
-const EventsSelectContainer = styled(EuiFlexItem)`
-  margin-right: 4px;
-`;
-
-EventsSelectContainer.displayName = 'EventsSelectContainer';
-
-const HeaderContainer = styled.div<{ isDragging: boolean }>`
-  ${({ theme }) => css`
-  {
-    border-radius: 4px;
-    position: relative;
-
-    &::before {
-      background-image: linear-gradient(
-          135deg,
-          ${theme.eui.euiColorMediumShade} 25%,
-          transparent 25%
-        ),
-        linear-gradient(-135deg, ${theme.eui.euiColorMediumShade} 25%, transparent 25%),
-        linear-gradient(135deg, transparent 75%, ${theme.eui.euiColorMediumShade} 75%),
-        linear-gradient(-135deg, transparent 75%, ${theme.eui.euiColorMediumShade} 75%);
-      background-position: 0 0, 1px 0, 1px -1px, 0px 1px;
-      background-size: 2px 2px;
-      bottom: 2px;
-      content: '';
-      display: block;
-      left: 2px;
-      position: absolute;
-      top: 2px;
-      width: 4px;
-    }
-
-    &:hover,
-    &:focus {
-      transition: background-color 0.7s ease;
-      background-color: #000;
-      color: #fff;
-
-      &::before {
-        background-image: linear-gradient(
-            135deg,
-            ${theme.eui.euiColorEmptyShade} 25%,
-            transparent 25%
-          ),
-          linear-gradient(-135deg, ${theme.eui.euiColorEmptyShade} 25%, transparent 25%),
-          linear-gradient(135deg, transparent 75%, ${theme.eui.euiColorEmptyShade} 75%),
-          linear-gradient(-135deg, transparent 75%, ${theme.eui.euiColorEmptyShade} 75%);
-      }
-    }
-  `}
-`;
-
-HeaderContainer.displayName = 'HeaderContainer';
-
 /** Renders the timeline header columns */
 export const ColumnHeaders = React.memo<Props>(
   ({
@@ -149,73 +71,83 @@ export const ColumnHeaders = React.memo<Props>(
     sort,
     timelineId,
     toggleColumn,
-    minWidth,
   }) => {
     const { isResizing, setIsResizing } = isContainerResizing();
-    return (
-      <ColumnHeadersContainer data-test-subj="column-headers" minWidth={minWidth}>
-        <ColumnHeadersFlexGroup
-          alignItems="center"
-          data-test-subj="column-headers-group"
-          gutterSize="none"
-        >
-          <EuiFlexItem data-test-subj="actions-item" grow={false}>
-            <ActionsContainer
-              actionsColumnWidth={actionsColumnWidth}
-              data-test-subj="actions-container"
-            >
-              <EuiFlexGroup gutterSize="none">
-                {showEventsSelect && (
-                  <EventsSelectContainer grow={false}>
-                    <EventsSelect checkState="unchecked" timelineId={timelineId} />
-                  </EventsSelectContainer>
-                )}
-                <EuiFlexItem grow={true}>
-                  <StatefulFieldsBrowser
-                    browserFields={browserFields}
-                    columnHeaders={columnHeaders}
-                    data-test-subj="field-browser"
-                    height={FIELD_BROWSER_HEIGHT}
-                    isEventViewer={isEventViewer}
-                    onUpdateColumns={onUpdateColumns}
-                    timelineId={timelineId}
-                    toggleColumn={toggleColumn}
-                    width={FIELD_BROWSER_WIDTH}
-                  />
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </ActionsContainer>
-          </EuiFlexItem>
 
-          <EuiFlexItem data-test-subj="headers-item" grow={false}>
-            <DroppableWrapper
-              droppableId={`${droppableTimelineColumnsPrefix}${timelineId}`}
-              height={COLUMN_HEADERS_HEIGHT}
-              isDropDisabled={false}
-              type={DRAG_TYPE_FIELD}
-            >
-              <EuiFlexGroup data-test-subj="headers-group" gutterSize="none">
+    return (
+      <EventsThead data-test-subj="column-headers">
+        <EventsTrHeader>
+          <EventsThGroupActions
+            actionsColumnWidth={actionsColumnWidth}
+            data-test-subj="actions-container"
+          >
+            {showEventsSelect && (
+              <EventsTh>
+                <EventsThContent textAlign="center">
+                  <EventsSelect checkState="unchecked" timelineId={timelineId} />
+                </EventsThContent>
+              </EventsTh>
+            )}
+
+            <EventsTh>
+              <EventsThContent textAlign="center">
+                <StatefulFieldsBrowser
+                  browserFields={browserFields}
+                  columnHeaders={columnHeaders}
+                  data-test-subj="field-browser"
+                  height={FIELD_BROWSER_HEIGHT}
+                  isEventViewer={isEventViewer}
+                  onUpdateColumns={onUpdateColumns}
+                  timelineId={timelineId}
+                  toggleColumn={toggleColumn}
+                  width={FIELD_BROWSER_WIDTH}
+                />
+              </EventsThContent>
+            </EventsTh>
+          </EventsThGroupActions>
+
+          <Droppable
+            direction={'horizontal'}
+            droppableId={`${droppableTimelineColumnsPrefix}${timelineId}`}
+            isDropDisabled={false}
+            type={DRAG_TYPE_FIELD}
+          >
+            {dropProvided => (
+              <EventsThGroupData
+                data-test-subj="headers-group"
+                innerRef={dropProvided.innerRef}
+                {...dropProvided.droppableProps}
+              >
                 {columnHeaders.map((header, i) => (
-                  <EuiFlexItem grow={false} key={header.id}>
-                    <Draggable
-                      data-test-subj="draggable"
-                      draggableId={getDraggableFieldId({
-                        contextId: `timeline-column-headers-${timelineId}`,
-                        fieldId: header.id,
-                      })}
-                      index={i}
-                      type={DRAG_TYPE_FIELD}
-                      isDragDisabled={isResizing}
-                    >
-                      {(provided, snapshot) => (
-                        <HeaderContainer
-                          {...provided.draggableProps}
-                          {...provided.dragHandleProps}
-                          data-test-subj="draggable-header"
-                          innerRef={provided.innerRef}
-                          isDragging={snapshot.isDragging}
-                        >
-                          {!snapshot.isDragging ? (
+                  <Draggable
+                    data-test-subj="draggable"
+                    // Required for drag events while hovering the sort button to work: https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/draggable.md#interactive-child-elements-within-a-draggable-
+                    disableInteractiveElementBlocking
+                    draggableId={getDraggableFieldId({
+                      contextId: `timeline-column-headers-${timelineId}`,
+                      fieldId: header.id,
+                    })}
+                    index={i}
+                    isDragDisabled={isResizing}
+                    key={header.id}
+                    type={DRAG_TYPE_FIELD}
+                  >
+                    {(dragProvided, dragSnapshot) => (
+                      <EventsTh
+                        {...dragProvided.draggableProps}
+                        {...dragProvided.dragHandleProps}
+                        data-test-subj="draggable-header"
+                        innerRef={dragProvided.innerRef}
+                        isDragging={dragSnapshot.isDragging}
+                        position="relative"
+                        // Passing the styles directly to the component because the width is being calculated and is recommended by Styled Components for performance: https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
+                        style={{
+                          flexBasis: header.width + 'px',
+                          ...dragProvided.draggableProps.style,
+                        }}
+                      >
+                        {!dragSnapshot.isDragging ? (
+                          <EventsThContent>
                             <Header
                               timelineId={timelineId}
                               header={header}
@@ -226,23 +158,25 @@ export const ColumnHeaders = React.memo<Props>(
                               setIsResizing={setIsResizing}
                               sort={sort}
                             />
-                          ) : (
-                            <DragEffects>
-                              <DraggableFieldBadge fieldId={header.id} />
-                            </DragEffects>
-                          )}
-                        </HeaderContainer>
-                      )}
-                    </Draggable>
-                  </EuiFlexItem>
+                          </EventsThContent>
+                        ) : (
+                          <DragEffects>
+                            <DraggableFieldBadge
+                              fieldId={header.id}
+                              fieldWidth={header.width + 'px'}
+                            />
+                          </DragEffects>
+                        )}
+                      </EventsTh>
+                    )}
+                  </Draggable>
                 ))}
-              </EuiFlexGroup>
-            </DroppableWrapper>
-          </EuiFlexItem>
-        </ColumnHeadersFlexGroup>
-      </ColumnHeadersContainer>
+              </EventsThGroupData>
+            )}
+          </Droppable>
+        </EventsTrHeader>
+      </EventsThead>
     );
   }
 );
-
 ColumnHeaders.displayName = 'ColumnHeaders';
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/data_driven_columns/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/data_driven_columns/index.tsx
index 4feb2cc71a7a68..2b2401519eb322 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/data_driven_columns/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/data_driven_columns/index.tsx
@@ -4,16 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import * as React from 'react';
-import styled from 'styled-components';
 
 import { TimelineNonEcsData } from '../../../../graphql/types';
-import { OnResize, Resizeable } from '../../../resize_handle';
-import { CELL_RESIZE_HANDLE_WIDTH, CellResizeHandle } from '../../../resize_handle/styled_handles';
 import { OnColumnResized } from '../../events';
+import { EventsTd, EventsTdContent, EventsTdGroupData } from '../../styles';
 import { ColumnHeader } from '../column_headers/column_header';
-import { FullHeightFlexItem } from '../column_headers/common/styles';
 import { ColumnRenderer } from '../renderers/column_renderer';
 import { getColumnRenderer } from '../renderers/get_column_renderer';
 
@@ -26,96 +22,36 @@ interface Props {
   timelineId: string;
 }
 
-const Cell = styled.div<{
-  width: string;
-  index: number;
-}>`
-  background: ${({ index, theme }) =>
-    index % 2 === 0 && theme.darkMode
-      ? theme.eui.euiFormBackgroundColor
-      : index % 2 === 0 && !theme.darkMode
-      ? theme.eui.euiColorLightestShade
-      : 'inherit'};
-  height: 20px;
-  overflow: hidden;
-  user-select: none;
-  width: ${({ width }) => width};
-`;
-
-Cell.displayName = 'Cell';
-
-const CellContainer = styled(EuiFlexGroup)<{ width: string }>`
-  display: flex;
-  height: 100%;
-  overflow: hidden;
-  width: ${({ width }) => width};
-`;
-
-CellContainer.displayName = 'CellContainer';
-
-export class DataDrivenColumns extends React.PureComponent<Props> {
-  public render() {
-    const { columnHeaders } = this.props;
-
+export const DataDrivenColumns = React.memo<Props>(
+  ({ _id, columnHeaders, columnRenderers, data, timelineId }) => {
+    // Passing the styles directly to the component because the width is
+    // being calculated and is recommended by Styled Components for performance
+    // https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
     return (
-      <EuiFlexGroup data-test-subj="data-driven-columns" direction="row" gutterSize="none">
+      <EventsTdGroupData data-test-subj="data-driven-columns">
         {columnHeaders.map((header, index) => (
-          <EuiFlexItem grow={false} key={header.id}>
-            <CellContainer
-              data-test-subj="cell-container"
-              gutterSize="none"
-              key={header.id}
-              width={`${header.width}px`}
-            >
-              <Resizeable
-                handle={
-                  <FullHeightFlexItem grow={false}>
-                    <CellResizeHandle data-test-subj="cell-resize-handle" />
-                  </FullHeightFlexItem>
-                }
-                height="100%"
-                id={header.id}
-                key={header.id}
-                render={this.renderCell(header, index)}
-                onResize={this.onResize}
-              />
-            </CellContainer>
-          </EuiFlexItem>
+          <EventsTd key={header.id} style={{ flexBasis: header.width + 'px' }}>
+            <EventsTdContent data-test-subj="cell-container">
+              {getColumnRenderer(header.id, columnRenderers, data).renderColumn({
+                columnName: header.id,
+                eventId: _id,
+                field: header,
+                timelineId,
+                truncate: true,
+                values: getMappedNonEcsValue({
+                  data,
+                  fieldName: header.id,
+                }),
+              })}
+            </EventsTdContent>
+          </EventsTd>
         ))}
-      </EuiFlexGroup>
+      </EventsTdGroupData>
     );
   }
+);
 
-  private renderCell = (header: ColumnHeader, index: number) => () => {
-    const { columnRenderers, data, _id, timelineId } = this.props;
-
-    return (
-      <EuiFlexItem grow={false}>
-        <Cell
-          data-test-subj="column-cell"
-          index={index}
-          width={`${header.width - CELL_RESIZE_HANDLE_WIDTH}px`}
-        >
-          {getColumnRenderer(header.id, columnRenderers, data).renderColumn({
-            columnName: header.id,
-            eventId: _id,
-            values: getMappedNonEcsValue({
-              data,
-              fieldName: header.id,
-            }),
-            field: header,
-            width: `${header.width - CELL_RESIZE_HANDLE_WIDTH}px`,
-            timelineId,
-          })}
-        </Cell>
-      </EuiFlexItem>
-    );
-  };
-
-  private onResize: OnResize = ({ delta, id }) => {
-    this.props.onColumnResized({ columnId: id, delta });
-  };
-}
+DataDrivenColumns.displayName = 'DataDrivenColumns';
 
 const getMappedNonEcsValue = ({
   data,
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/events/event_column_view.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/events/event_column_view.tsx
index 7f16100d1e84b0..7afa6ca70ff9b1 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/events/event_column_view.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/events/event_column_view.tsx
@@ -4,15 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import * as React from 'react';
 import uuid from 'uuid';
-import styled from 'styled-components';
 
 import { TimelineNonEcsData } from '../../../../graphql/types';
 import { Note } from '../../../../lib/note';
 import { AssociateNote, UpdateNote } from '../../../notes/helpers';
 import { OnColumnResized, OnPinEvent, OnUnPinEvent } from '../../events';
+import { EventsTrData } from '../../styles';
 import { Actions } from '../actions';
 import { ColumnHeader } from '../column_headers/column_header';
 import { DataDrivenColumns } from '../data_driven_columns';
@@ -46,10 +45,6 @@ export const getNewNoteId = (): string => uuid.v4();
 
 const emptyNotes: string[] = [];
 
-const EventColumnViewFlexGroup = styled(EuiFlexGroup)`
-  border-top: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
-`;
-
 export const EventColumnView = React.memo<Props>(
   ({
     id,
@@ -73,53 +68,45 @@ export const EventColumnView = React.memo<Props>(
     toggleShowNotes,
     updateNote,
   }) => (
-    <EventColumnViewFlexGroup
-      alignItems="center"
-      data-test-subj="event-column-view"
-      gutterSize="none"
-    >
-      <EuiFlexItem data-test-subj="actions-column-item" grow={false}>
-        <Actions
-          actionsColumnWidth={actionsColumnWidth}
-          associateNote={associateNote}
-          checked={false}
-          expanded={expanded}
-          data-test-subj="actions"
-          eventId={id}
-          eventIsPinned={eventIsPinned({
-            eventId: id,
-            pinnedEventIds,
-          })}
-          getNotesByIds={getNotesByIds}
-          isEventViewer={isEventViewer}
-          loading={loading}
-          noteIds={eventIdToNoteIds[id] || emptyNotes}
-          onEventToggled={onEventToggled}
-          onPinClicked={getPinOnClick({
-            allowUnpinning: !eventHasNotes(eventIdToNoteIds[id]),
-            eventId: id,
-            onPinEvent,
-            onUnPinEvent,
-            pinnedEventIds,
-          })}
-          showCheckboxes={false}
-          showNotes={showNotes}
-          toggleShowNotes={toggleShowNotes}
-          updateNote={updateNote}
-        />
-      </EuiFlexItem>
+    <EventsTrData data-test-subj="event-column-view">
+      <Actions
+        actionsColumnWidth={actionsColumnWidth}
+        associateNote={associateNote}
+        checked={false}
+        expanded={expanded}
+        data-test-subj="actions"
+        eventId={id}
+        eventIsPinned={eventIsPinned({
+          eventId: id,
+          pinnedEventIds,
+        })}
+        getNotesByIds={getNotesByIds}
+        isEventViewer={isEventViewer}
+        loading={loading}
+        noteIds={eventIdToNoteIds[id] || emptyNotes}
+        onEventToggled={onEventToggled}
+        onPinClicked={getPinOnClick({
+          allowUnpinning: !eventHasNotes(eventIdToNoteIds[id]),
+          eventId: id,
+          onPinEvent,
+          onUnPinEvent,
+          pinnedEventIds,
+        })}
+        showCheckboxes={false}
+        showNotes={showNotes}
+        toggleShowNotes={toggleShowNotes}
+        updateNote={updateNote}
+      />
 
-      <EuiFlexItem data-test-subj="event-columns-item" grow={false}>
-        <DataDrivenColumns
-          _id={id}
-          columnHeaders={columnHeaders}
-          columnRenderers={columnRenderers}
-          data={data}
-          onColumnResized={onColumnResized}
-          timelineId={timelineId}
-        />
-      </EuiFlexItem>
-    </EventColumnViewFlexGroup>
+      <DataDrivenColumns
+        _id={id}
+        columnHeaders={columnHeaders}
+        columnRenderers={columnRenderers}
+        data={data}
+        onColumnResized={onColumnResized}
+        timelineId={timelineId}
+      />
+    </EventsTrData>
   ),
   (prevProps, nextProps) => {
     return (
@@ -137,5 +124,4 @@ export const EventColumnView = React.memo<Props>(
     );
   }
 );
-
 EventColumnView.displayName = 'EventColumnView';
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/events/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/events/index.tsx
index 3ec9f27e064a15..78992dceea4dcc 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/events/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/events/index.tsx
@@ -4,31 +4,19 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import * as React from 'react';
-import styled from 'styled-components';
 
 import { BrowserFields } from '../../../../containers/source';
 import { TimelineItem } from '../../../../graphql/types';
+import { maxDelay } from '../../../../lib/helpers/scheduler';
 import { Note } from '../../../../lib/note';
 import { AddNoteToEvent, UpdateNote } from '../../../notes/helpers';
 import { OnColumnResized, OnPinEvent, OnUnPinEvent, OnUpdateColumns } from '../../events';
+import { EventsTbody } from '../../styles';
 import { ColumnHeader } from '../column_headers/column_header';
-
-import { StatefulEvent } from './stateful_event';
 import { ColumnRenderer } from '../renderers/column_renderer';
 import { RowRenderer } from '../renderers/row_renderer';
-import { maxDelay } from '../../../../lib/helpers/scheduler';
-
-const EventsContainer = styled.div<{
-  minWidth: number;
-}>`
-  display: block;
-  overflow: hidden;
-  min-width: ${({ minWidth }) => `${minWidth}px`};
-`;
-
-EventsContainer.displayName = 'EventsContainer';
+import { StatefulEvent } from './stateful_event';
 
 interface Props {
   actionsColumnWidth: number;
@@ -45,13 +33,15 @@ interface Props {
   onPinEvent: OnPinEvent;
   onUpdateColumns: OnUpdateColumns;
   onUnPinEvent: OnUnPinEvent;
-  minWidth: number;
   pinnedEventIds: Readonly<Record<string, boolean>>;
   rowRenderers: RowRenderer[];
   toggleColumn: (column: ColumnHeader) => void;
   updateNote: UpdateNote;
 }
 
+// Passing the styles directly to the component because the width is
+// being calculated and is recommended by Styled Components for performance
+// https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
 export const Events = React.memo<Props>(
   ({
     actionsColumnWidth,
@@ -64,7 +54,6 @@ export const Events = React.memo<Props>(
     getNotesByIds,
     id,
     isEventViewer = false,
-    minWidth,
     onColumnResized,
     onPinEvent,
     onUpdateColumns,
@@ -74,36 +63,32 @@ export const Events = React.memo<Props>(
     toggleColumn,
     updateNote,
   }) => (
-    <EventsContainer data-test-subj="events" minWidth={minWidth}>
-      <EuiFlexGroup data-test-subj="events-flex-group" direction="column" gutterSize="none">
-        {data.map((event, i) => (
-          <EuiFlexItem data-test-subj="event-flex-item" key={event._id}>
-            <StatefulEvent
-              actionsColumnWidth={actionsColumnWidth}
-              addNoteToEvent={addNoteToEvent}
-              browserFields={browserFields}
-              columnHeaders={columnHeaders}
-              columnRenderers={columnRenderers}
-              event={event}
-              eventIdToNoteIds={eventIdToNoteIds}
-              getNotesByIds={getNotesByIds}
-              isEventViewer={isEventViewer}
-              onColumnResized={onColumnResized}
-              onPinEvent={onPinEvent}
-              onUpdateColumns={onUpdateColumns}
-              onUnPinEvent={onUnPinEvent}
-              pinnedEventIds={pinnedEventIds}
-              rowRenderers={rowRenderers}
-              timelineId={id}
-              toggleColumn={toggleColumn}
-              updateNote={updateNote}
-              maxDelay={maxDelay(i)}
-            />
-          </EuiFlexItem>
-        ))}
-      </EuiFlexGroup>
-    </EventsContainer>
+    <EventsTbody data-test-subj="events">
+      {data.map((event, i) => (
+        <StatefulEvent
+          actionsColumnWidth={actionsColumnWidth}
+          addNoteToEvent={addNoteToEvent}
+          browserFields={browserFields}
+          columnHeaders={columnHeaders}
+          columnRenderers={columnRenderers}
+          event={event}
+          eventIdToNoteIds={eventIdToNoteIds}
+          getNotesByIds={getNotesByIds}
+          isEventViewer={isEventViewer}
+          key={event._id}
+          maxDelay={maxDelay(i)}
+          onColumnResized={onColumnResized}
+          onPinEvent={onPinEvent}
+          onUnPinEvent={onUnPinEvent}
+          onUpdateColumns={onUpdateColumns}
+          pinnedEventIds={pinnedEventIds}
+          rowRenderers={rowRenderers}
+          timelineId={id}
+          toggleColumn={toggleColumn}
+          updateNote={updateNote}
+        />
+      ))}
+    </EventsTbody>
   )
 );
-
 Events.displayName = 'Events';
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/events/stateful_event.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/events/stateful_event.tsx
index 6ae6ca324b2aa8..766a75c05f17c6 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/events/stateful_event.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/events/stateful_event.tsx
@@ -4,27 +4,28 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiFlexItem } from '@elastic/eui';
-import * as React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import uuid from 'uuid';
-
 import VisibilitySensor from 'react-visibility-sensor';
-import styled from 'styled-components';
+
 import { BrowserFields } from '../../../../containers/source';
 import { TimelineDetailsComponentQuery } from '../../../../containers/timeline/details';
 import { TimelineItem, DetailItem } from '../../../../graphql/types';
+import { requestIdleCallbackViaScheduler } from '../../../../lib/helpers/scheduler';
 import { Note } from '../../../../lib/note';
 import { AddNoteToEvent, UpdateNote } from '../../../notes/helpers';
+import { SkeletonRow } from '../../../skeleton_row';
 import { OnColumnResized, OnPinEvent, OnUnPinEvent, OnUpdateColumns } from '../../events';
 import { ExpandableEvent } from '../../expandable_event';
-import { ColumnHeader } from '../column_headers/column_header';
 import { STATEFUL_EVENT_CSS_CLASS_NAME } from '../../helpers';
+import { EventsTrGroup, EventsTrSupplement, OFFSET_SCROLLBAR } from '../../styles';
+import { useTimelineWidthContext } from '../../timeline_context';
+import { ColumnHeader } from '../column_headers/column_header';
+import { eventIsPinned } from '../helpers';
 import { ColumnRenderer } from '../renderers/column_renderer';
-import { RowRenderer } from '../renderers/row_renderer';
 import { getRowRenderer } from '../renderers/get_row_renderer';
-import { requestIdleCallbackViaScheduler } from '../../../../lib/helpers/scheduler';
+import { RowRenderer } from '../renderers/row_renderer';
 import { StatefulEventChild } from './stateful_event_child';
-import { eventIsPinned } from '../helpers';
 
 interface Props {
   actionsColumnWidth: number;
@@ -34,24 +35,18 @@ interface Props {
   columnRenderers: ColumnRenderer[];
   event: TimelineItem;
   eventIdToNoteIds: Readonly<Record<string, string[]>>;
-  isEventViewer?: boolean;
   getNotesByIds: (noteIds: string[]) => Note[];
+  isEventViewer?: boolean;
+  maxDelay?: number;
   onColumnResized: OnColumnResized;
   onPinEvent: OnPinEvent;
-  onUpdateColumns: OnUpdateColumns;
   onUnPinEvent: OnUnPinEvent;
+  onUpdateColumns: OnUpdateColumns;
   pinnedEventIds: Readonly<Record<string, boolean>>;
   rowRenderers: RowRenderer[];
   timelineId: string;
   toggleColumn: (column: ColumnHeader) => void;
   updateNote: UpdateNote;
-  maxDelay?: number;
-}
-
-interface State {
-  expanded: { [eventId: string]: boolean };
-  showNotes: { [eventId: string]: boolean };
-  initialRender: boolean;
 }
 
 export const getNewNoteId = (): string => uuid.v4();
@@ -62,15 +57,7 @@ const emptyDetails: DetailItem[] = [];
  * This is the default row height whenever it is a plain row renderer and not a custom row height.
  * We use this value when we do not know the height of a particular row.
  */
-const DEFAULT_ROW_HEIGHT = '27px';
-
-/**
- * This is the default margin size from the EmptyRow below and is the top and bottom
- * margin added together.
- * If you change margin: 5px 0 5px 0; within EmptyRow styled component, then please
- * update this value
- */
-const EMPTY_ROW_MARGIN_TOP_BOTTOM = 10;
+const DEFAULT_ROW_HEIGHT = '32px';
 
 /**
  * This is the top offset in pixels of the top part of the timeline. The UI area where you do your
@@ -91,85 +78,108 @@ const TOP_OFFSET = 50;
  */
 const BOTTOM_OFFSET = -500;
 
-/**
- * This is missing the height props intentionally for performance reasons that
- * you can see here:
- * https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
- *
- * We inline the height style for performance reasons directly on the component.
- */
-export const EmptyRow = styled.div`
-  background-color: ${props => props.theme.eui.euiColorLightestShade};
-  width: 100%;
-  border: ${props => `1px solid ${props.theme.eui.euiColorLightShade}`};
-  border-radius: 5px;
-  margin: 5px 0 5px 0;
-`;
+interface AttributesProps {
+  children: React.ReactNode;
+}
 
-export class StatefulEvent extends React.Component<Props, State> {
-  private _isMounted: boolean = false;
+const Attributes = React.memo<AttributesProps>(({ children }) => {
+  const width = useTimelineWidthContext();
 
-  public readonly state: State = {
-    expanded: {},
-    showNotes: {},
-    initialRender: false,
-  };
+  // Passing the styles directly to the component because the width is
+  // being calculated and is recommended by Styled Components for performance
+  // https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
+  return (
+    <EventsTrSupplement
+      className="siemEventsTable__trSupplement--attributes"
+      data-test-subj="event-details"
+      style={{ width: `${width - OFFSET_SCROLLBAR}px` }}
+    >
+      {children}
+    </EventsTrSupplement>
+  );
+});
 
-  public divElement: HTMLDivElement | null = null;
+export const StatefulEvent = React.memo<Props>(
+  ({
+    actionsColumnWidth,
+    addNoteToEvent,
+    browserFields,
+    columnHeaders,
+    columnRenderers,
+    event,
+    eventIdToNoteIds,
+    getNotesByIds,
+    isEventViewer = false,
+    maxDelay = 0,
+    onColumnResized,
+    onPinEvent,
+    onUnPinEvent,
+    onUpdateColumns,
+    pinnedEventIds,
+    rowRenderers,
+    timelineId,
+    toggleColumn,
+    updateNote,
+  }) => {
+    const [expanded, setExpanded] = useState<{ [eventId: string]: boolean }>({});
+    const [initialRender, setInitialRender] = useState(false);
+    const [showNotes, setShowNotes] = useState<{ [eventId: string]: boolean }>({});
 
-  /**
-   * Incrementally loads the events when it mounts by trying to
-   * see if it resides within a window frame and if it is it will
-   * indicate to React that it should render its self by setting
-   * its initialRender to true.
-   */
-  public componentDidMount() {
-    this._isMounted = true;
+    const divElement = useRef<HTMLDivElement | null>(null);
 
-    requestIdleCallbackViaScheduler(
-      () => {
-        if (!this.state.initialRender && this._isMounted) {
-          this.setState({ initialRender: true });
-        }
-      },
-      { timeout: this.props.maxDelay ? this.props.maxDelay : 0 }
-    );
-  }
+    const onToggleShowNotes = (eventId: string): (() => void) => () => {
+      setShowNotes({ ...showNotes, [eventId]: !showNotes[eventId] });
+    };
 
-  componentWillUnmount() {
-    this._isMounted = false;
-  }
+    const onToggleExpanded = (eventId: string): (() => void) => () => {
+      setExpanded({
+        ...expanded,
+        [eventId]: !expanded[eventId],
+      });
+    };
+
+    const associateNote = (
+      eventId: string,
+      addNoteToEventChild: AddNoteToEvent,
+      onPinEventChild: OnPinEvent
+    ): ((noteId: string) => void) => (noteId: string) => {
+      addNoteToEventChild({ eventId, noteId });
+      if (!eventIsPinned({ eventId, pinnedEventIds })) {
+        onPinEventChild(eventId); // pin the event, because it has notes
+      }
+    };
 
-  public render() {
-    const {
-      actionsColumnWidth,
-      addNoteToEvent,
-      browserFields,
-      columnHeaders,
-      columnRenderers,
-      event,
-      eventIdToNoteIds,
-      getNotesByIds,
-      isEventViewer = false,
-      onColumnResized,
-      onPinEvent,
-      onUpdateColumns,
-      onUnPinEvent,
-      pinnedEventIds,
-      rowRenderers,
-      timelineId,
-      toggleColumn,
-      updateNote,
-    } = this.props;
+    /**
+     * Incrementally loads the events when it mounts by trying to
+     * see if it resides within a window frame and if it is it will
+     * indicate to React that it should render its self by setting
+     * its initialRender to true.
+     */
+
+    useEffect(() => {
+      let _isMounted = true;
+
+      requestIdleCallbackViaScheduler(
+        () => {
+          if (!initialRender && _isMounted) {
+            setInitialRender(true);
+          }
+        },
+        { timeout: maxDelay }
+      );
+      return () => {
+        _isMounted = false;
+      };
+    }, []);
+
+    // Number of current columns plus one for actions.
+    const columnCount = columnHeaders.length + 1;
 
     // If we are not ready to render yet, just return null
-    // see componentDidMount() for when it schedules the first
+    // see useEffect() for when it schedules the first
     // time this stateful component should be rendered.
-    if (!this.state.initialRender) {
-      // height is being inlined directly in here because of performance with StyledComponents
-      // involving quick and constant changes to the DOM.
-      // https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
-      return <EmptyRow style={{ height: DEFAULT_ROW_HEIGHT }}></EmptyRow>;
+    if (!initialRender) {
+      return <SkeletonRow cellCount={columnCount} />;
     }
 
     return (
@@ -185,15 +195,15 @@ export class StatefulEvent extends React.Component<Props, State> {
                 sourceId="default"
                 indexName={event._index!}
                 eventId={event._id}
-                executeQuery={!!this.state.expanded[event._id]}
+                executeQuery={!!expanded[event._id]}
               >
                 {({ detailsData, loading }) => (
-                  <div
+                  <EventsTrGroup
                     className={STATEFUL_EVENT_CSS_CLASS_NAME}
                     data-test-subj="event"
-                    ref={divElement => {
-                      if (divElement != null) {
-                        this.divElement = divElement;
+                    innerRef={c => {
+                      if (c != null) {
+                        divElement.current = c;
                       }
                     }}
                   >
@@ -202,90 +212,64 @@ export class StatefulEvent extends React.Component<Props, State> {
                       data: event.ecs,
                       children: (
                         <StatefulEventChild
-                          id={event._id}
                           actionsColumnWidth={actionsColumnWidth}
-                          associateNote={this.associateNote}
                           addNoteToEvent={addNoteToEvent}
-                          onPinEvent={onPinEvent}
+                          associateNote={associateNote}
                           columnHeaders={columnHeaders}
                           columnRenderers={columnRenderers}
-                          expanded={!!this.state.expanded[event._id]}
                           data={event.data}
                           eventIdToNoteIds={eventIdToNoteIds}
+                          expanded={!!expanded[event._id]}
                           getNotesByIds={getNotesByIds}
+                          id={event._id}
                           isEventViewer={isEventViewer}
                           loading={loading}
                           onColumnResized={onColumnResized}
-                          onToggleExpanded={this.onToggleExpanded}
+                          onPinEvent={onPinEvent}
+                          onToggleExpanded={onToggleExpanded}
+                          onToggleShowNotes={onToggleShowNotes}
                           onUnPinEvent={onUnPinEvent}
                           pinnedEventIds={pinnedEventIds}
-                          showNotes={!!this.state.showNotes[event._id]}
+                          showNotes={!!showNotes[event._id]}
                           timelineId={timelineId}
-                          onToggleShowNotes={this.onToggleShowNotes}
                           updateNote={updateNote}
                         />
                       ),
                       timelineId,
                     })}
-                    <EuiFlexItem data-test-subj="event-details" grow={true}>
+
+                    <Attributes>
                       <ExpandableEvent
                         browserFields={browserFields}
                         columnHeaders={columnHeaders}
-                        id={event._id}
                         event={detailsData || emptyDetails}
-                        forceExpand={!!this.state.expanded[event._id] && !loading}
+                        forceExpand={!!expanded[event._id] && !loading}
+                        id={event._id}
                         onUpdateColumns={onUpdateColumns}
                         timelineId={timelineId}
                         toggleColumn={toggleColumn}
                       />
-                    </EuiFlexItem>
-                  </div>
+                    </Attributes>
+                  </EventsTrGroup>
                 )}
               </TimelineDetailsComponentQuery>
             );
           } else {
             // Height place holder for visibility detection as well as re-rendering sections.
             const height =
-              this.divElement != null
-                ? `${this.divElement.clientHeight - EMPTY_ROW_MARGIN_TOP_BOTTOM}px`
+              divElement.current != null
+                ? `${divElement.current.clientHeight}px`
                 : DEFAULT_ROW_HEIGHT;
 
             // height is being inlined directly in here because of performance with StyledComponents
             // involving quick and constant changes to the DOM.
             // https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
-            return <EmptyRow style={{ height }}></EmptyRow>;
+            return <SkeletonRow cellCount={columnCount} style={{ height }} />;
           }
         }}
       </VisibilitySensor>
     );
   }
+);
 
-  private onToggleShowNotes = (eventId: string): (() => void) => () => {
-    this.setState(state => ({
-      showNotes: {
-        ...state.showNotes,
-        [eventId]: !state.showNotes[eventId],
-      },
-    }));
-  };
-
-  private onToggleExpanded = (eventId: string): (() => void) => () => {
-    this.setState(state => ({
-      expanded: {
-        ...state.expanded,
-        [eventId]: !state.expanded[eventId],
-      },
-    }));
-  };
-
-  private associateNote = (
-    eventId: string,
-    addNoteToEvent: AddNoteToEvent,
-    onPinEvent: OnPinEvent
-  ): ((noteId: string) => void) => (noteId: string) => {
-    addNoteToEvent({ eventId, noteId });
-    if (!eventIsPinned({ eventId, pinnedEventIds: this.props.pinnedEventIds })) {
-      onPinEvent(eventId); // pin the event, because it has notes
-    }
-  };
-}
+StatefulEvent.displayName = 'StatefulEvent';
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/events/stateful_event_child.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/events/stateful_event_child.tsx
index 394cc22027eadd..4a623ce99c9e99 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/events/stateful_event_child.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/events/stateful_event_child.tsx
@@ -5,16 +5,18 @@
  */
 
 import * as React from 'react';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import uuid from 'uuid';
-import { EventColumnView } from './event_column_view';
+
+import { TimelineNonEcsData } from '../../../../graphql/types';
+import { Note } from '../../../../lib/note';
 import { AddNoteToEvent, UpdateNote } from '../../../notes/helpers';
+import { NoteCards } from '../../../notes/note_cards';
 import { OnPinEvent, OnColumnResized, OnUnPinEvent } from '../../events';
+import { EventsTrSupplement, OFFSET_SCROLLBAR } from '../../styles';
+import { useTimelineWidthContext } from '../../timeline_context';
 import { ColumnHeader } from '../column_headers/column_header';
 import { ColumnRenderer } from '../renderers/column_renderer';
-import { TimelineNonEcsData } from '../../../../graphql/types';
-import { Note } from '../../../../lib/note';
-import { NoteCards } from '../../../notes/note_cards';
+import { EventColumnView } from './event_column_view';
 
 interface Props {
   id: string;
@@ -71,9 +73,14 @@ export const StatefulEventChild = React.memo<Props>(
     timelineId,
     onToggleShowNotes,
     updateNote,
-  }) => (
-    <EuiFlexGroup data-test-subj="event-rows" direction="column" gutterSize="none">
-      <EuiFlexItem data-test-subj="event-column-data" grow={false}>
+  }) => {
+    const width = useTimelineWidthContext();
+
+    // Passing the styles directly to the component because the width is
+    // being calculated and is recommended by Styled Components for performance
+    // https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
+    return (
+      <>
         <EventColumnView
           id={id}
           actionsColumnWidth={actionsColumnWidth}
@@ -96,22 +103,25 @@ export const StatefulEventChild = React.memo<Props>(
           toggleShowNotes={onToggleShowNotes(id)}
           updateNote={updateNote}
         />
-      </EuiFlexItem>
 
-      <EuiFlexItem data-test-subj="event-notes-flex-item" grow={false}>
-        <NoteCards
-          associateNote={associateNote(id, addNoteToEvent, onPinEvent)}
-          data-test-subj="note-cards"
-          getNewNoteId={getNewNoteId}
-          getNotesByIds={getNotesByIds}
-          noteIds={eventIdToNoteIds[id] || emptyNotes}
-          showAddNote={showNotes}
-          toggleShowAddNote={onToggleShowNotes(id)}
-          updateNote={updateNote}
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  )
+        <EventsTrSupplement
+          className="siemEventsTable__trSupplement--notes"
+          data-test-subj="event-notes-flex-item"
+          style={{ width: `${width - OFFSET_SCROLLBAR}px` }}
+        >
+          <NoteCards
+            associateNote={associateNote(id, addNoteToEvent, onPinEvent)}
+            data-test-subj="note-cards"
+            getNewNoteId={getNewNoteId}
+            getNotesByIds={getNotesByIds}
+            noteIds={eventIdToNoteIds[id] || emptyNotes}
+            showAddNote={showNotes}
+            toggleShowAddNote={onToggleShowNotes(id)}
+            updateNote={updateNote}
+          />
+        </EventsTrSupplement>
+      </>
+    );
+  }
 );
-
 StatefulEventChild.displayName = 'StatefulEventChild';
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/helpers.ts b/x-pack/legacy/plugins/siem/public/components/timeline/body/helpers.ts
index cb6217b3753db4..1cd83cb5560eaa 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/helpers.ts
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/helpers.ts
@@ -8,7 +8,6 @@ import { get, isEmpty, noop } from 'lodash/fp';
 import { BrowserFields } from '../../../containers/source';
 import { Ecs } from '../../../graphql/types';
 import { OnPinEvent, OnUnPinEvent } from '../events';
-
 import { ColumnHeader } from './column_headers/column_header';
 import * as i18n from './translations';
 
@@ -18,7 +17,7 @@ export const DEFAULT_ACTIONS_COLUMN_WIDTH = 115; // px;
  * The (fixed) width of the Actions column when the timeline body is used as
  * an events viewer, which has fewer actions than a regular events viewer
  */
-export const EVENTS_VIEWER_ACTIONS_COLUMN_WIDTH = 25; // px;
+export const EVENTS_VIEWER_ACTIONS_COLUMN_WIDTH = 32; // px;
 /** The default minimum width of a column (when a width for the column type is not specified) */
 export const DEFAULT_COLUMN_MIN_WIDTH = 180; // px
 /** The default minimum width of a column of type `date` */
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/index.test.tsx
index 5389a3de2583b2..73b208757c7ad8 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/index.test.tsx
@@ -80,7 +80,7 @@ describe('Body', () => {
       ).toEqual(true);
     });
 
-    test('it renders the vertical scroll container', () => {
+    test('it renders the scroll container', () => {
       const wrapper = mount(
         <TestProviders>
           <Body
@@ -112,7 +112,7 @@ describe('Body', () => {
 
       expect(
         wrapper
-          .find('[data-test-subj="vertical-scroll-container"]')
+          .find('[data-test-subj="timeline-body"]')
           .first()
           .exists()
       ).toEqual(true);
@@ -208,8 +208,9 @@ describe('Body', () => {
 
     const addaNoteToEvent = (wrapper: ReactWrapper, note: string) => {
       wrapper
-        .find('[data-test-subj="timeline-notes-icon"]')
+        .find('[data-test-subj="add-note"]')
         .first()
+        .find('button')
         .simulate('click');
       wrapper.update();
       wrapper
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/index.tsx
index 30cfb54ea2c388..47fbcec4aab23a 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/index.tsx
@@ -4,9 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiText } from '@elastic/eui';
 import * as React from 'react';
-import styled from 'styled-components';
 
 import { BrowserFields } from '../../../containers/source';
 import { TimelineItem } from '../../../graphql/types';
@@ -21,15 +19,14 @@ import {
   OnUnPinEvent,
   OnUpdateColumns,
 } from '../events';
-import { footerHeight } from '../footer';
-
+import { EventsTable, TimelineBody } from '../styles';
 import { ColumnHeaders } from './column_headers';
 import { ColumnHeader } from './column_headers/column_header';
 import { Events } from './events';
 import { getActionsColumnWidth } from './helpers';
-import { Sort } from './sort';
 import { ColumnRenderer } from './renderers/column_renderer';
 import { RowRenderer } from './renderers/row_renderer';
+import { Sort } from './sort';
 
 export interface BodyProps {
   addNoteToEvent: AddNoteToEvent;
@@ -57,31 +54,6 @@ export interface BodyProps {
   updateNote: UpdateNote;
 }
 
-const HorizontalScroll = styled.div<{
-  height: number;
-}>`
-  display: block;
-  height: ${({ height }) => `${height}px`};
-  overflow: hidden;
-  overflow-x: auto;
-  min-height: 0px;
-`;
-
-HorizontalScroll.displayName = 'HorizontalScroll';
-
-const VerticalScrollContainer = styled.div<{
-  height: number;
-  minWidth: number;
-}>`
-  display: block;
-  height: ${({ height }) => `${height - footerHeight - 12}px`};
-  overflow: hidden;
-  overflow-y: auto;
-  min-width: ${({ minWidth }) => `${minWidth}px`};
-`;
-
-VerticalScrollContainer.displayName = 'VerticalScrollContainer';
-
 /** Renders the timeline body */
 export const Body = React.memo<BodyProps>(
   ({
@@ -114,8 +86,12 @@ export const Body = React.memo<BodyProps>(
     );
 
     return (
-      <HorizontalScroll data-test-subj="horizontal-scroll" height={height}>
-        <EuiText size="s">
+      <TimelineBody data-test-subj="timeline-body" bodyHeight={height}>
+        <EventsTable
+          data-test-subj="events-table"
+          // Passing the styles directly to the component because the width is being calculated and is recommended by Styled Components for performance: https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
+          style={{ minWidth: columnWidths + 'px' }}
+        >
           <ColumnHeaders
             actionsColumnWidth={getActionsColumnWidth(isEventViewer)}
             browserFields={browserFields}
@@ -130,40 +106,31 @@ export const Body = React.memo<BodyProps>(
             sort={sort}
             timelineId={id}
             toggleColumn={toggleColumn}
-            minWidth={columnWidths}
           />
 
-          <VerticalScrollContainer
-            data-test-subj="vertical-scroll-container"
-            height={height}
-            minWidth={columnWidths}
-          >
-            <Events
-              actionsColumnWidth={getActionsColumnWidth(isEventViewer)}
-              addNoteToEvent={addNoteToEvent}
-              browserFields={browserFields}
-              columnHeaders={columnHeaders}
-              columnRenderers={columnRenderers}
-              data={data}
-              eventIdToNoteIds={eventIdToNoteIds}
-              getNotesByIds={getNotesByIds}
-              id={id}
-              isEventViewer={isEventViewer}
-              onColumnResized={onColumnResized}
-              onPinEvent={onPinEvent}
-              onUpdateColumns={onUpdateColumns}
-              onUnPinEvent={onUnPinEvent}
-              pinnedEventIds={pinnedEventIds}
-              rowRenderers={rowRenderers}
-              toggleColumn={toggleColumn}
-              updateNote={updateNote}
-              minWidth={columnWidths}
-            />
-          </VerticalScrollContainer>
-        </EuiText>
-      </HorizontalScroll>
+          <Events
+            actionsColumnWidth={getActionsColumnWidth(isEventViewer)}
+            addNoteToEvent={addNoteToEvent}
+            browserFields={browserFields}
+            columnHeaders={columnHeaders}
+            columnRenderers={columnRenderers}
+            data={data}
+            eventIdToNoteIds={eventIdToNoteIds}
+            getNotesByIds={getNotesByIds}
+            id={id}
+            isEventViewer={isEventViewer}
+            onColumnResized={onColumnResized}
+            onPinEvent={onPinEvent}
+            onUpdateColumns={onUpdateColumns}
+            onUnPinEvent={onUnPinEvent}
+            pinnedEventIds={pinnedEventIds}
+            rowRenderers={rowRenderers}
+            toggleColumn={toggleColumn}
+            updateNote={updateNote}
+          />
+        </EventsTable>
+      </TimelineBody>
     );
   }
 );
-
 Body.displayName = 'Body';
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/get_row_renderer.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/get_row_renderer.test.tsx.snap
index 8723afd42393d3..dd12c162e1003f 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/get_row_renderer.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/get_row_renderer.test.tsx.snap
@@ -2,12 +2,8 @@
 
 exports[`get_column_renderer renders correctly against snapshot 1`] = `
 <span>
-  <Row
-    className="euiTableRow"
-  >
-    <span>
-      some child
-    </span>
-  </Row>
+  <span>
+    some child
+  </span>
 </span>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/plain_row_renderer.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/plain_row_renderer.test.tsx.snap
index 54e4c1e6f7593f..5731921907fc84 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/plain_row_renderer.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/plain_row_renderer.test.tsx.snap
@@ -2,12 +2,8 @@
 
 exports[`plain_row_renderer renders correctly against snapshot 1`] = `
 <span>
-  <Row
-    className="euiTableRow"
-  >
-    <span>
-      some children
-    </span>
-  </Row>
+  <span>
+    some children
+  </span>
 </span>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/__snapshots__/generic_row_renderer.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/__snapshots__/generic_row_renderer.test.tsx.snap
index 3f820b56ecf503..0b2a1b2f2a0ae6 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/__snapshots__/generic_row_renderer.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/__snapshots__/generic_row_renderer.test.tsx.snap
@@ -2,280 +2,272 @@
 
 exports[`GenericRowRenderer #createGenericAuditRowRenderer renders correctly against snapshot 1`] = `
 <span>
-  <Row
-    className="euiTableRow"
-  >
-    <span>
-      some children
-    </span>
-    <RowRendererContainer>
-      <AuditdGenericDetails
-        browserFields={Object {}}
-        contextId="connected-to-test"
-        data={
-          Object {
-            "_id": "27",
-            "auditd": Object {
-              "data": null,
-              "result": Array [
-                "success",
-              ],
-              "session": Array [
-                "246",
-              ],
-              "summary": Object {
-                "actor": Object {
-                  "primary": Array [
-                    "alice",
-                  ],
-                  "secondary": Array [
-                    "alice",
-                  ],
-                },
-                "how": Array [
-                  "/usr/bin/wget",
+  <span>
+    some children
+  </span>
+  <RowRendererContainer>
+    <AuditdGenericDetails
+      browserFields={Object {}}
+      contextId="connected-to-test"
+      data={
+        Object {
+          "_id": "27",
+          "auditd": Object {
+            "data": null,
+            "result": Array [
+              "success",
+            ],
+            "session": Array [
+              "246",
+            ],
+            "summary": Object {
+              "actor": Object {
+                "primary": Array [
+                  "alice",
+                ],
+                "secondary": Array [
+                  "alice",
                 ],
-                "message_type": null,
-                "object": Object {
-                  "primary": Array [
-                    "93.184.216.34",
-                  ],
-                  "secondary": Array [
-                    "80",
-                  ],
-                  "type": Array [
-                    "socket",
-                  ],
-                },
-                "sequence": null,
               },
-            },
-            "destination": Object {
-              "ip": Array [
-                "93.184.216.34",
-              ],
-              "port": Array [
-                80,
-              ],
-            },
-            "event": Object {
-              "action": Array [
-                "connected-to",
-              ],
-              "category": Array [
-                "audit-rule",
-              ],
-              "dataset": null,
-              "id": null,
-              "module": Array [
-                "auditd",
-              ],
-              "severity": null,
-            },
-            "geo": null,
-            "host": Object {
-              "id": Array [
-                "7c21f5ed03b04d0299569d221fe18bbc",
-              ],
-              "ip": Array [
-                "46.101.3.136",
-                "10.16.0.5",
-                "fe80::4066:42ff:fe19:b3b9",
-              ],
-              "name": Array [
-                "zeek-london",
-              ],
-            },
-            "http": null,
-            "network": null,
-            "process": Object {
-              "args": null,
-              "executable": Array [
+              "how": Array [
                 "/usr/bin/wget",
               ],
-              "name": Array [
-                "wget",
-              ],
-              "pid": Array [
-                1490,
-              ],
-              "ppid": Array [
-                1476,
-              ],
-              "title": Array [
-                "wget www.example.com",
-              ],
-              "working_directory": null,
-            },
-            "source": null,
-            "suricata": null,
-            "timestamp": "2019-03-22T19:13:11.026Z",
-            "url": null,
-            "user": Object {
-              "name": Array [
-                "alice",
-              ],
+              "message_type": null,
+              "object": Object {
+                "primary": Array [
+                  "93.184.216.34",
+                ],
+                "secondary": Array [
+                  "80",
+                ],
+                "type": Array [
+                  "socket",
+                ],
+              },
+              "sequence": null,
             },
-            "zeek": null,
-          }
+          },
+          "destination": Object {
+            "ip": Array [
+              "93.184.216.34",
+            ],
+            "port": Array [
+              80,
+            ],
+          },
+          "event": Object {
+            "action": Array [
+              "connected-to",
+            ],
+            "category": Array [
+              "audit-rule",
+            ],
+            "dataset": null,
+            "id": null,
+            "module": Array [
+              "auditd",
+            ],
+            "severity": null,
+          },
+          "geo": null,
+          "host": Object {
+            "id": Array [
+              "7c21f5ed03b04d0299569d221fe18bbc",
+            ],
+            "ip": Array [
+              "46.101.3.136",
+              "10.16.0.5",
+              "fe80::4066:42ff:fe19:b3b9",
+            ],
+            "name": Array [
+              "zeek-london",
+            ],
+          },
+          "http": null,
+          "network": null,
+          "process": Object {
+            "args": null,
+            "executable": Array [
+              "/usr/bin/wget",
+            ],
+            "name": Array [
+              "wget",
+            ],
+            "pid": Array [
+              1490,
+            ],
+            "ppid": Array [
+              1476,
+            ],
+            "title": Array [
+              "wget www.example.com",
+            ],
+            "working_directory": null,
+          },
+          "source": null,
+          "suricata": null,
+          "timestamp": "2019-03-22T19:13:11.026Z",
+          "url": null,
+          "user": Object {
+            "name": Array [
+              "alice",
+            ],
+          },
+          "zeek": null,
         }
-        text="some text"
-        timelineId="test"
-      />
-    </RowRendererContainer>
-  </Row>
+      }
+      text="some text"
+      timelineId="test"
+    />
+  </RowRendererContainer>
 </span>
 `;
 
 exports[`GenericRowRenderer #createGenericFileRowRenderer renders correctly against snapshot 1`] = `
 <span>
-  <Row
-    className="euiTableRow"
-  >
-    <span>
-      some children
-    </span>
-    <RowRendererContainer>
-      <AuditdGenericFileDetails
-        browserFields={Object {}}
-        contextId="opened-file-test"
-        data={
-          Object {
-            "_id": "28",
-            "auditd": Object {
-              "data": null,
-              "result": Array [
-                "success",
-              ],
-              "session": Array [
-                "unset",
-              ],
-              "summary": Object {
-                "actor": Object {
-                  "primary": Array [
-                    "unset",
-                  ],
-                  "secondary": Array [
-                    "root",
-                  ],
-                },
-                "how": Array [
-                  "/lib/systemd/systemd-journald",
+  <span>
+    some children
+  </span>
+  <RowRendererContainer>
+    <AuditdGenericFileDetails
+      browserFields={Object {}}
+      contextId="opened-file-test"
+      data={
+        Object {
+          "_id": "28",
+          "auditd": Object {
+            "data": null,
+            "result": Array [
+              "success",
+            ],
+            "session": Array [
+              "unset",
+            ],
+            "summary": Object {
+              "actor": Object {
+                "primary": Array [
+                  "unset",
+                ],
+                "secondary": Array [
+                  "root",
                 ],
-                "message_type": null,
-                "object": Object {
-                  "primary": Array [
-                    "/proc/15990/attr/current",
-                  ],
-                  "secondary": null,
-                  "type": Array [
-                    "file",
-                  ],
-                },
-                "sequence": null,
               },
-            },
-            "destination": null,
-            "event": Object {
-              "action": Array [
-                "opened-file",
-              ],
-              "category": Array [
-                "audit-rule",
-              ],
-              "dataset": null,
-              "id": null,
-              "module": Array [
-                "auditd",
-              ],
-              "severity": null,
-            },
-            "file": Object {
-              "ctime": null,
-              "device": Array [
-                "00:00",
-              ],
-              "extension": null,
-              "gid": Array [
-                "0",
-              ],
-              "group": Array [
-                "root",
-              ],
-              "inode": Array [
-                "27672309",
-              ],
-              "mode": Array [
-                "0666",
-              ],
-              "mtime": null,
-              "owner": Array [
-                "root",
-              ],
-              "path": Array [
-                "/proc/15990/attr/current",
-              ],
-              "size": null,
-              "target_path": null,
-              "type": null,
-              "uid": Array [
-                "0",
-              ],
-            },
-            "geo": null,
-            "host": Object {
-              "id": Array [
-                "7c21f5ed03b04d0299569d221fe18bbc",
-              ],
-              "ip": Array [
-                "46.101.3.136",
-                "10.16.0.5",
-                "fe80::4066:42ff:fe19:b3b9",
-              ],
-              "name": Array [
-                "zeek-london",
-              ],
-            },
-            "http": null,
-            "network": null,
-            "process": Object {
-              "args": null,
-              "executable": Array [
-                "/lib/systemd/systemd-journald",
-              ],
-              "name": Array [
-                "systemd-journal",
-              ],
-              "pid": Array [
-                27244,
-              ],
-              "ppid": Array [
-                1,
-              ],
-              "title": Array [
+              "how": Array [
                 "/lib/systemd/systemd-journald",
               ],
-              "working_directory": Array [
-                "/",
-              ],
-            },
-            "source": null,
-            "suricata": null,
-            "timestamp": "2019-03-26T22:12:18.609Z",
-            "url": null,
-            "user": Object {
-              "name": Array [
-                "root",
-              ],
+              "message_type": null,
+              "object": Object {
+                "primary": Array [
+                  "/proc/15990/attr/current",
+                ],
+                "secondary": null,
+                "type": Array [
+                  "file",
+                ],
+              },
+              "sequence": null,
             },
-            "zeek": null,
-          }
+          },
+          "destination": null,
+          "event": Object {
+            "action": Array [
+              "opened-file",
+            ],
+            "category": Array [
+              "audit-rule",
+            ],
+            "dataset": null,
+            "id": null,
+            "module": Array [
+              "auditd",
+            ],
+            "severity": null,
+          },
+          "file": Object {
+            "ctime": null,
+            "device": Array [
+              "00:00",
+            ],
+            "extension": null,
+            "gid": Array [
+              "0",
+            ],
+            "group": Array [
+              "root",
+            ],
+            "inode": Array [
+              "27672309",
+            ],
+            "mode": Array [
+              "0666",
+            ],
+            "mtime": null,
+            "owner": Array [
+              "root",
+            ],
+            "path": Array [
+              "/proc/15990/attr/current",
+            ],
+            "size": null,
+            "target_path": null,
+            "type": null,
+            "uid": Array [
+              "0",
+            ],
+          },
+          "geo": null,
+          "host": Object {
+            "id": Array [
+              "7c21f5ed03b04d0299569d221fe18bbc",
+            ],
+            "ip": Array [
+              "46.101.3.136",
+              "10.16.0.5",
+              "fe80::4066:42ff:fe19:b3b9",
+            ],
+            "name": Array [
+              "zeek-london",
+            ],
+          },
+          "http": null,
+          "network": null,
+          "process": Object {
+            "args": null,
+            "executable": Array [
+              "/lib/systemd/systemd-journald",
+            ],
+            "name": Array [
+              "systemd-journal",
+            ],
+            "pid": Array [
+              27244,
+            ],
+            "ppid": Array [
+              1,
+            ],
+            "title": Array [
+              "/lib/systemd/systemd-journald",
+            ],
+            "working_directory": Array [
+              "/",
+            ],
+          },
+          "source": null,
+          "suricata": null,
+          "timestamp": "2019-03-26T22:12:18.609Z",
+          "url": null,
+          "user": Object {
+            "name": Array [
+              "root",
+            ],
+          },
+          "zeek": null,
         }
-        fileIcon="document"
-        text="some text"
-        timelineId="test"
-      />
-    </RowRendererContainer>
-  </Row>
+      }
+      fileIcon="document"
+      text="some text"
+      timelineId="test"
+    />
+  </RowRendererContainer>
 </span>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/generic_row_renderer.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/generic_row_renderer.tsx
index 540ea0709630a3..71d56d641037d8 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/generic_row_renderer.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/generic_row_renderer.tsx
@@ -8,11 +8,10 @@ import { IconType } from '@elastic/eui';
 import { get } from 'lodash/fp';
 import React from 'react';
 
-import * as i18n from './translations';
 import { RowRenderer, RowRendererContainer } from '../row_renderer';
-import { Row } from '../helpers';
 import { AuditdGenericDetails } from './generic_details';
 import { AuditdGenericFileDetails } from './generic_file_details';
+import * as i18n from './translations';
 
 export const createGenericAuditRowRenderer = ({
   actionName,
@@ -32,7 +31,7 @@ export const createGenericAuditRowRenderer = ({
     );
   },
   renderRow: ({ browserFields, data, children, timelineId }) => (
-    <Row className="euiTableRow">
+    <>
       {children}
       <RowRendererContainer>
         <AuditdGenericDetails
@@ -43,7 +42,7 @@ export const createGenericAuditRowRenderer = ({
           timelineId={timelineId}
         />
       </RowRendererContainer>
-    </Row>
+    </>
   ),
 });
 
@@ -67,7 +66,7 @@ export const createGenericFileRowRenderer = ({
     );
   },
   renderRow: ({ browserFields, data, children, timelineId }) => (
-    <Row className="euiTableRow">
+    <>
       {children}
       <RowRendererContainer>
         <AuditdGenericFileDetails
@@ -79,7 +78,7 @@ export const createGenericFileRowRenderer = ({
           timelineId={timelineId}
         />
       </RowRendererContainer>
-    </Row>
+    </>
   ),
 });
 
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/column_renderer.ts b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/column_renderer.ts
index 9c3e251385c7cd..f64d0f39e3b291 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/column_renderer.ts
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/column_renderer.ts
@@ -12,16 +12,16 @@ export interface ColumnRenderer {
   renderColumn: ({
     columnName,
     eventId,
-    values,
     field,
-    width,
     timelineId,
+    truncate,
+    values,
   }: {
     columnName: string;
     eventId: string;
-    values: string[] | null | undefined;
     field: ColumnHeader;
-    width?: string;
     timelineId: string;
+    truncate?: boolean;
+    values: string[] | null | undefined;
   }) => React.ReactNode;
 }
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/empty_column_renderer.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/empty_column_renderer.tsx
index a30c0228de95b7..67554cc764486f 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/empty_column_renderer.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/empty_column_renderer.tsx
@@ -6,15 +6,15 @@
 
 import * as React from 'react';
 
-import { ColumnHeader } from '../column_headers/column_header';
-import { ColumnRenderer } from './column_renderer';
+import { TimelineNonEcsData } from '../../../../graphql/types';
 import { DraggableWrapper, DragEffects } from '../../../drag_and_drop/draggable_wrapper';
 import { escapeDataProviderId } from '../../../drag_and_drop/helpers';
-import { parseQueryValue } from './parse_query_value';
+import { getEmptyValue } from '../../../empty_value';
 import { EXISTS_OPERATOR } from '../../data_providers/data_provider';
 import { Provider } from '../../data_providers/provider';
-import { TimelineNonEcsData } from '../../../../graphql/types';
-import { getEmptyValue } from '../../../empty_value';
+import { ColumnHeader } from '../column_headers/column_header';
+import { ColumnRenderer } from './column_renderer';
+import { parseQueryValue } from './parse_query_value';
 
 export const dataNotExistsAtColumn = (columnName: string, data: TimelineNonEcsData[]): boolean =>
   data.findIndex(item => item.field === columnName) === -1;
@@ -26,17 +26,16 @@ export const emptyColumnRenderer: ColumnRenderer = {
     columnName,
     eventId,
     field,
-    width,
     timelineId,
+    truncate,
   }: {
     columnName: string;
     eventId: string;
     field: ColumnHeader;
-    width?: string;
     timelineId: string;
+    truncate?: boolean;
   }) => (
     <DraggableWrapper
-      key={`empty-column-renderer-draggable-wrapper-${timelineId}-${columnName}-${eventId}-${field.id}`}
       dataProvider={{
         enabled: true,
         id: escapeDataProviderId(
@@ -53,6 +52,7 @@ export const emptyColumnRenderer: ColumnRenderer = {
         kqlQuery: '',
         and: [],
       }}
+      key={`empty-column-renderer-draggable-wrapper-${timelineId}-${columnName}-${eventId}-${field.id}`}
       render={(dataProvider, _, snapshot) =>
         snapshot.isDragging ? (
           <DragEffects>
@@ -62,7 +62,7 @@ export const emptyColumnRenderer: ColumnRenderer = {
           <span>{getEmptyValue()}</span>
         )
       }
-      width={width}
+      truncate={truncate}
     />
   ),
 };
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/formatted_field.test.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/formatted_field.test.tsx
index 23a5f0cba23c66..1b0f35af6d8991 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/formatted_field.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/formatted_field.test.tsx
@@ -112,27 +112,30 @@ describe('Events', () => {
     expect(wrapper.text()).toEqual(getEmptyValue());
   });
 
-  test('it renders tooltip for message when it exists', () => {
+  test('it renders tooltip for truncatable message when it exists', () => {
     const wrapper = mount(
       <FormattedFieldValue
-        eventId={mockTimelineData[0].ecs._id}
         contextId="test"
+        eventId={mockTimelineData[0].ecs._id}
         fieldName="message"
         fieldType="text"
+        truncate
         value={'some message'}
       />
     );
+
     expect(wrapper.find('[data-test-subj="message-tool-tip"]').exists()).toEqual(true);
   });
 
-  test('it does NOT render a tooltip for message when it is null', () => {
+  test('it does NOT render a tooltip for truncatable message when it is null', () => {
     const wrapper = mount(
       <TestProviders>
         <FormattedFieldValue
-          eventId={mockTimelineData[0].ecs._id}
           contextId="test"
+          eventId={mockTimelineData[0].ecs._id}
           fieldName="message"
           fieldType="text"
+          truncate
           value={null}
         />
       </TestProviders>
@@ -140,14 +143,15 @@ describe('Events', () => {
     expect(wrapper.find('[data-test-subj="message-tool-tip"]').exists()).toEqual(false);
   });
 
-  test('it does NOT render a tooltip for message when it is undefined', () => {
+  test('it does NOT render a tooltip for truncatable message when it is undefined', () => {
     const wrapper = mount(
       <TestProviders>
         <FormattedFieldValue
-          eventId={mockTimelineData[0].ecs._id}
           contextId="test"
+          eventId={mockTimelineData[0].ecs._id}
           fieldName="message"
           fieldType="text"
+          truncate
           value={undefined}
         />
       </TestProviders>
@@ -155,14 +159,15 @@ describe('Events', () => {
     expect(wrapper.find('[data-test-subj="message-tool-tip"]').exists()).toEqual(false);
   });
 
-  test('it does NOT render a tooltip for message when it is an empty string', () => {
+  test('it does NOT render a tooltip for truncatable message when it is an empty string', () => {
     const wrapper = mount(
       <TestProviders>
         <FormattedFieldValue
-          eventId={mockTimelineData[0].ecs._id}
           contextId="test"
+          eventId={mockTimelineData[0].ecs._id}
           fieldName="message"
           fieldType="text"
+          truncate
           value={''}
         />
       </TestProviders>
@@ -183,13 +188,14 @@ describe('Events', () => {
     expect(wrapper.text()).toEqual('some message');
   });
 
-  test('it renders truncatable message text when fieldName is message', () => {
+  test('it renders truncatable message text when fieldName is message with truncate prop', () => {
     const wrapper = mount(
       <FormattedFieldValue
-        eventId={mockTimelineData[0].ecs._id}
         contextId="test"
+        eventId={mockTimelineData[0].ecs._id}
         fieldName="message"
         fieldType="text"
+        truncate
         value={'some message'}
       />
     );
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/formatted_field.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/formatted_field.tsx
index 848ef080b3e31b..aaa252fd651f81 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/formatted_field.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/formatted_field.tsx
@@ -4,10 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
+import { isNumber, isString } from 'lodash/fp';
 import * as React from 'react';
 import { pure } from 'recompose';
-import { isNumber, isString } from 'lodash/fp';
-import { EuiToolTip, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
 
 import { Bytes, BYTES_FORMAT } from '../../../bytes';
 import { Duration, EVENT_DURATION_FIELD_NAME } from '../../../duration';
@@ -16,7 +16,7 @@ import { FormattedDate } from '../../../formatted_date';
 import { FormattedIp } from '../../../formatted_ip';
 import { HostDetailsLink } from '../../../links';
 import { Port, PORT_NAMES } from '../../../port';
-
+import { TruncatableText } from '../../../truncatable_text';
 import {
   DATE_FIELD_TYPE,
   HOST_NAME_FIELD_NAME,
@@ -30,9 +30,9 @@ export const FormattedFieldValue = pure<{
   fieldFormat?: string;
   fieldName: string;
   fieldType: string;
+  truncate?: boolean;
   value: string | number | undefined | null;
-  width?: string;
-}>(({ eventId, contextId, fieldFormat, fieldName, fieldType, value, width }) => {
+}>(({ contextId, eventId, fieldFormat, fieldName, fieldType, truncate, value }) => {
   if (fieldType === IP_FIELD_TYPE) {
     return (
       <FormattedIp
@@ -70,22 +70,29 @@ export const FormattedFieldValue = pure<{
     );
   } else if (fieldName === MESSAGE_FIELD_NAME && value != null && value !== '') {
     return (
-      <EuiToolTip
-        position="left"
-        data-test-subj="message-tool-tip"
-        content={
-          <EuiFlexGroup direction="column" gutterSize="none">
-            <EuiFlexItem grow={false}>
-              <span>{fieldName}</span>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <span>{value}</span>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        }
-      >
-        <span data-test-subj="truncatable-message">{value}</span>
-      </EuiToolTip>
+      <>
+        {truncate ? (
+          <TruncatableText data-test-subj="truncatable-message">
+            <EuiToolTip
+              data-test-subj="message-tool-tip"
+              content={
+                <EuiFlexGroup direction="column" gutterSize="none">
+                  <EuiFlexItem grow={false}>
+                    <span>{fieldName}</span>
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    <span>{value}</span>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              }
+            >
+              <>{value}</>
+            </EuiToolTip>
+          </TruncatableText>
+        ) : (
+          <>{value}</>
+        )}
+      </>
     );
   } else {
     return getOrEmptyTagFromValue(value);
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/helpers.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/helpers.tsx
index 56a8674f04223e..92c7207257a147 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/helpers.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/helpers.tsx
@@ -28,18 +28,9 @@ export const getValues = (field: string, data: TimelineNonEcsData[]): string[] |
 export const Details = styled.div`
   margin: 5px 0 5px 10px;
 `;
-
 Details.displayName = 'Details';
 
 export const TokensFlexItem = styled(EuiFlexItem)`
   margin-left: 3px;
 `;
-
 TokensFlexItem.displayName = 'TokensFlexItem';
-
-export const Row = styled.div`
-  width: 100%;
-  overflow: hidden;
-`;
-
-Row.displayName = 'Row';
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap
index 8bc8aa4f028ae0..4326b7372604dd 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap
@@ -2,180 +2,176 @@
 
 exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
 <span>
-  <Row
-    className="euiTableRow"
-  >
-    <span>
-      some children
-    </span>
-    <RowRendererContainer>
-      <Details>
-        <Netflow
-          contextId="netflow-row-renderer-render-row-test-abcd"
-          destinationBytes={
-            Array [
-              40,
-            ]
-          }
-          destinationGeoCityName={
-            Array [
-              "New York",
-            ]
-          }
-          destinationGeoContinentName={
-            Array [
-              "North America",
-            ]
-          }
-          destinationGeoCountryIsoCode={
-            Array [
-              "US",
-            ]
-          }
-          destinationGeoCountryName={
-            Array [
-              "United States",
-            ]
-          }
-          destinationGeoRegionName={
-            Array [
-              "New York",
-            ]
-          }
-          destinationIp={
-            Array [
-              "10.1.2.3",
-            ]
-          }
-          destinationPackets={
-            Array [
-              1,
-            ]
-          }
-          destinationPort={
-            Array [
-              80,
-            ]
-          }
-          eventDuration={
-            Array [
-              1000000,
-            ]
-          }
-          eventEnd={
-            Array [
-              "2018-11-12T19:03:25.936Z",
-            ]
-          }
-          eventId="abcd"
-          eventStart={
-            Array [
-              "2018-11-12T19:03:25.836Z",
-            ]
-          }
-          networkBytes={
-            Array [
-              100,
-            ]
-          }
-          networkCommunityId={
-            Array [
-              "we.live.in.a",
-            ]
-          }
-          networkDirection={
-            Array [
-              "outgoing",
-            ]
-          }
-          networkPackets={
-            Array [
-              3,
-            ]
-          }
-          networkProtocol={
-            Array [
-              "http",
-            ]
-          }
-          processName={
-            Array [
-              "rat",
-            ]
-          }
-          sourceBytes={
-            Array [
-              60,
-            ]
-          }
-          sourceGeoCityName={
-            Array [
-              "Atlanta",
-            ]
-          }
-          sourceGeoContinentName={
-            Array [
-              "North America",
-            ]
-          }
-          sourceGeoCountryIsoCode={
-            Array [
-              "US",
-            ]
-          }
-          sourceGeoCountryName={
-            Array [
-              "United States",
-            ]
-          }
-          sourceGeoRegionName={
-            Array [
-              "Georgia",
-            ]
-          }
-          sourceIp={
-            Array [
-              "192.168.1.2",
-            ]
-          }
-          sourcePackets={
-            Array [
-              2,
-            ]
-          }
-          sourcePort={
-            Array [
-              9987,
-            ]
-          }
-          tlsClientCertificateFingerprintSha1={
-            Array [
-              "tls.client_certificate.fingerprint.sha1-value",
-            ]
-          }
-          tlsFingerprintsJa3Hash={
-            Array [
-              "tls.fingerprints.ja3.hash-value",
-            ]
-          }
-          tlsServerCertificateFingerprintSha1={
-            Array [
-              "tls.server_certificate.fingerprint.sha1-value",
-            ]
-          }
-          transport={
-            Array [
-              "tcp",
-            ]
-          }
-          userName={
-            Array [
-              "first.last",
-            ]
-          }
-        />
-      </Details>
-    </RowRendererContainer>
-  </Row>
+  <span>
+    some children
+  </span>
+  <RowRendererContainer>
+    <Details>
+      <Netflow
+        contextId="netflow-row-renderer-render-row-test-abcd"
+        destinationBytes={
+          Array [
+            40,
+          ]
+        }
+        destinationGeoCityName={
+          Array [
+            "New York",
+          ]
+        }
+        destinationGeoContinentName={
+          Array [
+            "North America",
+          ]
+        }
+        destinationGeoCountryIsoCode={
+          Array [
+            "US",
+          ]
+        }
+        destinationGeoCountryName={
+          Array [
+            "United States",
+          ]
+        }
+        destinationGeoRegionName={
+          Array [
+            "New York",
+          ]
+        }
+        destinationIp={
+          Array [
+            "10.1.2.3",
+          ]
+        }
+        destinationPackets={
+          Array [
+            1,
+          ]
+        }
+        destinationPort={
+          Array [
+            80,
+          ]
+        }
+        eventDuration={
+          Array [
+            1000000,
+          ]
+        }
+        eventEnd={
+          Array [
+            "2018-11-12T19:03:25.936Z",
+          ]
+        }
+        eventId="abcd"
+        eventStart={
+          Array [
+            "2018-11-12T19:03:25.836Z",
+          ]
+        }
+        networkBytes={
+          Array [
+            100,
+          ]
+        }
+        networkCommunityId={
+          Array [
+            "we.live.in.a",
+          ]
+        }
+        networkDirection={
+          Array [
+            "outgoing",
+          ]
+        }
+        networkPackets={
+          Array [
+            3,
+          ]
+        }
+        networkProtocol={
+          Array [
+            "http",
+          ]
+        }
+        processName={
+          Array [
+            "rat",
+          ]
+        }
+        sourceBytes={
+          Array [
+            60,
+          ]
+        }
+        sourceGeoCityName={
+          Array [
+            "Atlanta",
+          ]
+        }
+        sourceGeoContinentName={
+          Array [
+            "North America",
+          ]
+        }
+        sourceGeoCountryIsoCode={
+          Array [
+            "US",
+          ]
+        }
+        sourceGeoCountryName={
+          Array [
+            "United States",
+          ]
+        }
+        sourceGeoRegionName={
+          Array [
+            "Georgia",
+          ]
+        }
+        sourceIp={
+          Array [
+            "192.168.1.2",
+          ]
+        }
+        sourcePackets={
+          Array [
+            2,
+          ]
+        }
+        sourcePort={
+          Array [
+            9987,
+          ]
+        }
+        tlsClientCertificateFingerprintSha1={
+          Array [
+            "tls.client_certificate.fingerprint.sha1-value",
+          ]
+        }
+        tlsFingerprintsJa3Hash={
+          Array [
+            "tls.fingerprints.ja3.hash-value",
+          ]
+        }
+        tlsServerCertificateFingerprintSha1={
+          Array [
+            "tls.server_certificate.fingerprint.sha1-value",
+          ]
+        }
+        transport={
+          Array [
+            "tcp",
+          ]
+        }
+        userName={
+          Array [
+            "first.last",
+          ]
+        }
+      />
+    </Details>
+  </RowRendererContainer>
 </span>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/netflow/netflow_row_renderer.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/netflow/netflow_row_renderer.tsx
index ace0e3fac677e0..3ae154a14aaf53 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/netflow/netflow_row_renderer.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/netflow/netflow_row_renderer.tsx
@@ -27,6 +27,14 @@ import {
   USER_NAME_FIELD_NAME,
 } from '../../../../netflow/netflow_columns/user_process';
 import { DESTINATION_PORT_FIELD_NAME, SOURCE_PORT_FIELD_NAME } from '../../../../port';
+import {
+  NETWORK_BYTES_FIELD_NAME,
+  NETWORK_COMMUNITY_ID_FIELD_NAME,
+  NETWORK_DIRECTION_FIELD_NAME,
+  NETWORK_PACKETS_FIELD_NAME,
+  NETWORK_PROTOCOL_FIELD_NAME,
+  NETWORK_TRANSPORT_FIELD_NAME,
+} from '../../../../source_destination/field_names';
 import {
   DESTINATION_GEO_CITY_NAME_FIELD_NAME,
   DESTINATION_GEO_CONTINENT_NAME_FIELD_NAME,
@@ -46,20 +54,10 @@ import {
   SOURCE_PACKETS_FIELD_NAME,
 } from '../../../../source_destination/source_destination_arrows';
 import { RowRenderer, RowRendererContainer } from '../row_renderer';
-import { Row } from '../helpers';
-import {
-  NETWORK_BYTES_FIELD_NAME,
-  NETWORK_COMMUNITY_ID_FIELD_NAME,
-  NETWORK_DIRECTION_FIELD_NAME,
-  NETWORK_PACKETS_FIELD_NAME,
-  NETWORK_PROTOCOL_FIELD_NAME,
-  NETWORK_TRANSPORT_FIELD_NAME,
-} from '../../../../source_destination/field_names';
 
 const Details = styled.div`
   margin: 5px 0;
 `;
-
 Details.displayName = 'Details';
 
 const EVENT_CATEGORY_FIELD = 'event.category';
@@ -85,7 +83,7 @@ export const netflowRowRenderer: RowRenderer = {
     );
   },
   renderRow: ({ data, children, timelineId }) => (
-    <Row className="euiTableRow">
+    <>
       {children}
       <RowRendererContainer>
         <Details>
@@ -145,6 +143,6 @@ export const netflowRowRenderer: RowRenderer = {
           />
         </Details>
       </RowRendererContainer>
-    </Row>
+    </>
   ),
 };
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/plain_column_renderer.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/plain_column_renderer.tsx
index 6541c1da5debff..25a70502e3e457 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/plain_column_renderer.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/plain_column_renderer.tsx
@@ -7,7 +7,6 @@
 import { isNumber } from 'lodash/fp';
 import React from 'react';
 
-import { EuiText } from '@elastic/eui';
 import { TimelineNonEcsData } from '../../../../graphql/types';
 import { DragEffects, DraggableWrapper } from '../../../drag_and_drop/draggable_wrapper';
 import { escapeDataProviderId } from '../../../drag_and_drop/helpers';
@@ -16,13 +15,11 @@ import { FormattedIp } from '../../../formatted_ip';
 import { IS_OPERATOR, DataProvider } from '../../data_providers/data_provider';
 import { Provider } from '../../data_providers/provider';
 import { ColumnHeader } from '../column_headers/column_header';
-import { FormattedFieldValue } from './formatted_field';
 import { ColumnRenderer } from './column_renderer';
+import { IP_FIELD_TYPE, MESSAGE_FIELD_NAME } from './constants';
+import { FormattedFieldValue } from './formatted_field';
 import { parseQueryValue } from './parse_query_value';
 import { parseValue } from './parse_value';
-import { TruncatableText } from '../../../truncatable_text';
-
-import { IP_FIELD_TYPE, MESSAGE_FIELD_NAME } from './constants';
 
 export const dataExistsAtColumn = (columnName: string, data: TimelineNonEcsData[]): boolean =>
   data.findIndex(item => item.field === columnName) !== -1;
@@ -37,17 +34,17 @@ export const plainColumnRenderer: ColumnRenderer = {
   renderColumn: ({
     columnName,
     eventId,
-    values,
     field,
-    width,
     timelineId,
+    truncate,
+    values,
   }: {
     columnName: string;
     eventId: string;
-    values: string[] | undefined | null;
     field: ColumnHeader;
-    width?: string;
     timelineId: string;
+    truncate?: boolean;
+    values: string[] | undefined | null;
   }) =>
     values != null
       ? values.map(value => {
@@ -75,47 +72,38 @@ export const plainColumnRenderer: ColumnRenderer = {
                 fieldName={field.id}
                 key={`plain-column-renderer-formatted-ip-${timelineId}-${columnName}-${eventId}-${field.id}-${value}`}
                 value={!isNumber(value) ? value : String(value)}
-                width={width}
+                truncate={truncate}
               />
             );
           }
 
           if (columnNamesNotDraggable.includes(columnName)) {
-            if (width != null) {
+            if (truncate) {
               return (
-                <TruncatableText
-                  size="xs"
-                  width={width}
+                <FormattedFieldValue
+                  contextId={`plain-column-renderer-truncatable-formatted-field-value-${timelineId}`}
+                  eventId={eventId}
+                  fieldFormat={field.format || ''}
+                  fieldName={columnName}
+                  fieldType={field.type || ''}
                   key={`plain-column-renderer-truncatable-formatted-field-value-${timelineId}-${columnName}-${eventId}-${field.id}-${value}`}
-                >
-                  <FormattedFieldValue
-                    contextId={`plain-column-renderer-truncatable-formatted-field-value-${timelineId}`}
-                    eventId={eventId}
-                    fieldFormat={field.format || ''}
-                    fieldName={columnName}
-                    fieldType={field.type || ''}
-                    value={parseValue(value)}
-                    width={width}
-                  />
-                </TruncatableText>
+                  truncate={truncate}
+                  value={parseValue(value)}
+                />
               );
             } else {
               return (
-                <EuiText
+                <FormattedFieldValue
+                  contextId={`plain-column-renderer-text-formatted-field-value-${timelineId}`}
                   data-test-subj="draggable-content"
-                  size="xs"
+                  eventId={eventId}
+                  fieldFormat={field.format || ''}
+                  fieldName={columnName}
+                  fieldType={field.type || ''}
                   key={`plain-column-renderer-text-${timelineId}-${columnName}-${eventId}-${field.id}-${value}`}
-                >
-                  <FormattedFieldValue
-                    contextId={`plain-column-renderer-text-formatted-field-value-${timelineId}`}
-                    eventId={eventId}
-                    fieldFormat={field.format || ''}
-                    fieldName={columnName}
-                    fieldType={field.type || ''}
-                    value={parseValue(value)}
-                    width={width}
-                  />
-                </EuiText>
+                  truncate={truncate}
+                  value={parseValue(value)}
+                />
               );
             }
           }
@@ -123,8 +111,8 @@ export const plainColumnRenderer: ColumnRenderer = {
           // because we pass a width to enable text truncation, and we will show empty values
           return (
             <DraggableWrapper
-              key={`plain-column-renderer-draggable-wrapper-${timelineId}-${columnName}-${eventId}-${field.id}-${value}`}
               dataProvider={itemDataProvider}
+              key={`plain-column-renderer-draggable-wrapper-${timelineId}-${columnName}-${eventId}-${field.id}-${value}`}
               render={(dataProvider, _, snapshot) =>
                 snapshot.isDragging ? (
                   <DragEffects>
@@ -138,11 +126,10 @@ export const plainColumnRenderer: ColumnRenderer = {
                     fieldName={columnName}
                     fieldType={field.type || ''}
                     value={parseValue(value)}
-                    width={width}
                   />
                 )
               }
-              width={width}
+              truncate={truncate}
             />
           );
         })
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/plain_row_renderer.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/plain_row_renderer.tsx
index bea17deb0edadf..1eed05e6d2a7e9 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/plain_row_renderer.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/plain_row_renderer.tsx
@@ -5,10 +5,10 @@
  */
 
 import React from 'react';
+
 import { RowRenderer } from './row_renderer';
-import { Row } from './helpers';
 
 export const plainRowRenderer: RowRenderer = {
   isInstance: _ => true,
-  renderRow: ({ children }) => <Row className="euiTableRow">{children}</Row>,
+  renderRow: ({ children }) => <>{children}</>,
 };
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/row_renderer.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/row_renderer.tsx
index 4fdd409ce30d59..df92fc1e9f6342 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/row_renderer.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/row_renderer.tsx
@@ -5,8 +5,10 @@
  */
 
 import React from 'react';
+
 import { BrowserFields } from '../../../../containers/source';
 import { Ecs } from '../../../../graphql/types';
+import { EventsTrSupplement, OFFSET_SCROLLBAR } from '../../styles';
 import { useTimelineWidthContext } from '../../timeline_context';
 
 interface RowRendererContainerProps {
@@ -19,9 +21,15 @@ export const RowRendererContainer = React.memo<RowRendererContainerProps>(({ chi
   // Passing the styles directly to the component because the width is
   // being calculated and is recommended by Styled Components for performance
   // https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
-  return <div style={{ width: `${width}px` }}>{children}</div>;
+  return (
+    <EventsTrSupplement
+      className="siemEventsTable__trSupplement--summary"
+      style={{ width: `${width - OFFSET_SCROLLBAR}px` }}
+    >
+      {children}
+    </EventsTrSupplement>
+  );
 });
-
 RowRendererContainer.displayName = 'RowRendererContainer';
 
 export interface RowRenderer {
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/__snapshots__/suricata_row_renderer.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/__snapshots__/suricata_row_renderer.test.tsx.snap
index 6f747fff83b563..f96276bbcff1b3 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/__snapshots__/suricata_row_renderer.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/__snapshots__/suricata_row_renderer.test.tsx.snap
@@ -2,490 +2,486 @@
 
 exports[`suricata_row_renderer renders correctly against snapshot 1`] = `
 <span>
-  <Row
-    className="euiTableRow"
-  >
-    <span>
-      some children
-    </span>
-    <RowRendererContainer>
-      <SuricataDetails
-        browserFields={
-          Object {
-            "agent": Object {
-              "fields": Object {
-                "agent.ephemeral_id": Object {
-                  "aggregatable": true,
-                  "category": "agent",
-                  "description": "Ephemeral identifier of this agent (if one exists). This id normally changes across restarts, but \`agent.id\` does not.",
-                  "example": "8a4f500f",
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "agent.ephemeral_id",
-                  "searchable": true,
-                  "type": "string",
-                },
-                "agent.hostname": Object {
-                  "aggregatable": true,
-                  "category": "agent",
-                  "description": null,
-                  "example": null,
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "agent.hostname",
-                  "searchable": true,
-                  "type": "string",
-                },
-                "agent.id": Object {
-                  "aggregatable": true,
-                  "category": "agent",
-                  "description": "Unique identifier of this agent (if one exists). Example: For Beats this would be beat.id.",
-                  "example": "8a4f500d",
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "agent.id",
-                  "searchable": true,
-                  "type": "string",
-                },
-                "agent.name": Object {
-                  "aggregatable": true,
-                  "category": "agent",
-                  "description": "Name of the agent. This is a name that can be given to an agent. This can be helpful if for example two Filebeat instances are running on the same host but a human readable separation is needed on which Filebeat instance data is coming from. If no name is given, the name is often left empty.",
-                  "example": "foo",
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "agent.name",
-                  "searchable": true,
-                  "type": "string",
-                },
+  <span>
+    some children
+  </span>
+  <RowRendererContainer>
+    <SuricataDetails
+      browserFields={
+        Object {
+          "agent": Object {
+            "fields": Object {
+              "agent.ephemeral_id": Object {
+                "aggregatable": true,
+                "category": "agent",
+                "description": "Ephemeral identifier of this agent (if one exists). This id normally changes across restarts, but \`agent.id\` does not.",
+                "example": "8a4f500f",
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "agent.ephemeral_id",
+                "searchable": true,
+                "type": "string",
+              },
+              "agent.hostname": Object {
+                "aggregatable": true,
+                "category": "agent",
+                "description": null,
+                "example": null,
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "agent.hostname",
+                "searchable": true,
+                "type": "string",
+              },
+              "agent.id": Object {
+                "aggregatable": true,
+                "category": "agent",
+                "description": "Unique identifier of this agent (if one exists). Example: For Beats this would be beat.id.",
+                "example": "8a4f500d",
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "agent.id",
+                "searchable": true,
+                "type": "string",
+              },
+              "agent.name": Object {
+                "aggregatable": true,
+                "category": "agent",
+                "description": "Name of the agent. This is a name that can be given to an agent. This can be helpful if for example two Filebeat instances are running on the same host but a human readable separation is needed on which Filebeat instance data is coming from. If no name is given, the name is often left empty.",
+                "example": "foo",
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "agent.name",
+                "searchable": true,
+                "type": "string",
               },
             },
-            "auditd": Object {
-              "fields": Object {
-                "auditd.data.a0": Object {
-                  "aggregatable": true,
-                  "category": "auditd",
-                  "description": null,
-                  "example": null,
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                  ],
-                  "name": "auditd.data.a0",
-                  "searchable": true,
-                  "type": "string",
-                },
-                "auditd.data.a1": Object {
-                  "aggregatable": true,
-                  "category": "auditd",
-                  "description": null,
-                  "example": null,
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                  ],
-                  "name": "auditd.data.a1",
-                  "searchable": true,
-                  "type": "string",
-                },
-                "auditd.data.a2": Object {
-                  "aggregatable": true,
-                  "category": "auditd",
-                  "description": null,
-                  "example": null,
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                  ],
-                  "name": "auditd.data.a2",
-                  "searchable": true,
-                  "type": "string",
-                },
+          },
+          "auditd": Object {
+            "fields": Object {
+              "auditd.data.a0": Object {
+                "aggregatable": true,
+                "category": "auditd",
+                "description": null,
+                "example": null,
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                ],
+                "name": "auditd.data.a0",
+                "searchable": true,
+                "type": "string",
+              },
+              "auditd.data.a1": Object {
+                "aggregatable": true,
+                "category": "auditd",
+                "description": null,
+                "example": null,
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                ],
+                "name": "auditd.data.a1",
+                "searchable": true,
+                "type": "string",
+              },
+              "auditd.data.a2": Object {
+                "aggregatable": true,
+                "category": "auditd",
+                "description": null,
+                "example": null,
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                ],
+                "name": "auditd.data.a2",
+                "searchable": true,
+                "type": "string",
               },
             },
-            "base": Object {
-              "fields": Object {
-                "@timestamp": Object {
-                  "aggregatable": true,
-                  "category": "base",
-                  "description": "Date/time when the event originated. For log events this is the date/time when the event was generated, and not when it was read. Required field for all events.",
-                  "example": "2016-05-23T08:05:34.853Z",
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "@timestamp",
-                  "searchable": true,
-                  "type": "date",
-                },
+          },
+          "base": Object {
+            "fields": Object {
+              "@timestamp": Object {
+                "aggregatable": true,
+                "category": "base",
+                "description": "Date/time when the event originated. For log events this is the date/time when the event was generated, and not when it was read. Required field for all events.",
+                "example": "2016-05-23T08:05:34.853Z",
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "@timestamp",
+                "searchable": true,
+                "type": "date",
               },
             },
-            "client": Object {
-              "fields": Object {
-                "client.address": Object {
-                  "aggregatable": true,
-                  "category": "client",
-                  "description": "Some event client addresses are defined ambiguously. The event will sometimes list an IP, a domain or a unix socket.  You should always store the raw address in the \`.address\` field. Then it should be duplicated to \`.ip\` or \`.domain\`, depending on which one it is.",
-                  "example": null,
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "client.address",
-                  "searchable": true,
-                  "type": "string",
-                },
-                "client.bytes": Object {
-                  "aggregatable": true,
-                  "category": "client",
-                  "description": "Bytes sent from the client to the server.",
-                  "example": "184",
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "client.bytes",
-                  "searchable": true,
-                  "type": "number",
-                },
-                "client.domain": Object {
-                  "aggregatable": true,
-                  "category": "client",
-                  "description": "Client domain.",
-                  "example": null,
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "client.domain",
-                  "searchable": true,
-                  "type": "string",
-                },
-                "client.geo.country_iso_code": Object {
-                  "aggregatable": true,
-                  "category": "client",
-                  "description": "Country ISO code.",
-                  "example": "CA",
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "client.geo.country_iso_code",
-                  "searchable": true,
-                  "type": "string",
-                },
+          },
+          "client": Object {
+            "fields": Object {
+              "client.address": Object {
+                "aggregatable": true,
+                "category": "client",
+                "description": "Some event client addresses are defined ambiguously. The event will sometimes list an IP, a domain or a unix socket.  You should always store the raw address in the \`.address\` field. Then it should be duplicated to \`.ip\` or \`.domain\`, depending on which one it is.",
+                "example": null,
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "client.address",
+                "searchable": true,
+                "type": "string",
+              },
+              "client.bytes": Object {
+                "aggregatable": true,
+                "category": "client",
+                "description": "Bytes sent from the client to the server.",
+                "example": "184",
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "client.bytes",
+                "searchable": true,
+                "type": "number",
+              },
+              "client.domain": Object {
+                "aggregatable": true,
+                "category": "client",
+                "description": "Client domain.",
+                "example": null,
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "client.domain",
+                "searchable": true,
+                "type": "string",
+              },
+              "client.geo.country_iso_code": Object {
+                "aggregatable": true,
+                "category": "client",
+                "description": "Country ISO code.",
+                "example": "CA",
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "client.geo.country_iso_code",
+                "searchable": true,
+                "type": "string",
               },
             },
-            "cloud": Object {
-              "fields": Object {
-                "cloud.account.id": Object {
-                  "aggregatable": true,
-                  "category": "cloud",
-                  "description": "The cloud account or organization id used to identify different entities in a multi-tenant environment. Examples: AWS account id, Google Cloud ORG Id, or other unique identifier.",
-                  "example": "666777888999",
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "cloud.account.id",
-                  "searchable": true,
-                  "type": "string",
-                },
-                "cloud.availability_zone": Object {
-                  "aggregatable": true,
-                  "category": "cloud",
-                  "description": "Availability zone in which this host is running.",
-                  "example": "us-east-1c",
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "cloud.availability_zone",
-                  "searchable": true,
-                  "type": "string",
-                },
+          },
+          "cloud": Object {
+            "fields": Object {
+              "cloud.account.id": Object {
+                "aggregatable": true,
+                "category": "cloud",
+                "description": "The cloud account or organization id used to identify different entities in a multi-tenant environment. Examples: AWS account id, Google Cloud ORG Id, or other unique identifier.",
+                "example": "666777888999",
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "cloud.account.id",
+                "searchable": true,
+                "type": "string",
+              },
+              "cloud.availability_zone": Object {
+                "aggregatable": true,
+                "category": "cloud",
+                "description": "Availability zone in which this host is running.",
+                "example": "us-east-1c",
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "cloud.availability_zone",
+                "searchable": true,
+                "type": "string",
               },
             },
-            "container": Object {
-              "fields": Object {
-                "container.id": Object {
-                  "aggregatable": true,
-                  "category": "container",
-                  "description": "Unique container id.",
-                  "example": null,
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "container.id",
-                  "searchable": true,
-                  "type": "string",
-                },
-                "container.image.name": Object {
-                  "aggregatable": true,
-                  "category": "container",
-                  "description": "Name of the image the container was built on.",
-                  "example": null,
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "container.image.name",
-                  "searchable": true,
-                  "type": "string",
-                },
-                "container.image.tag": Object {
-                  "aggregatable": true,
-                  "category": "container",
-                  "description": "Container image tag.",
-                  "example": null,
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "container.image.tag",
-                  "searchable": true,
-                  "type": "string",
-                },
+          },
+          "container": Object {
+            "fields": Object {
+              "container.id": Object {
+                "aggregatable": true,
+                "category": "container",
+                "description": "Unique container id.",
+                "example": null,
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "container.id",
+                "searchable": true,
+                "type": "string",
+              },
+              "container.image.name": Object {
+                "aggregatable": true,
+                "category": "container",
+                "description": "Name of the image the container was built on.",
+                "example": null,
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "container.image.name",
+                "searchable": true,
+                "type": "string",
+              },
+              "container.image.tag": Object {
+                "aggregatable": true,
+                "category": "container",
+                "description": "Container image tag.",
+                "example": null,
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "container.image.tag",
+                "searchable": true,
+                "type": "string",
               },
             },
-            "destination": Object {
-              "fields": Object {
-                "destination.address": Object {
-                  "aggregatable": true,
-                  "category": "destination",
-                  "description": "Some event destination addresses are defined ambiguously. The event will sometimes list an IP, a domain or a unix socket.  You should always store the raw address in the \`.address\` field. Then it should be duplicated to \`.ip\` or \`.domain\`, depending on which one it is.",
-                  "example": null,
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "destination.address",
-                  "searchable": true,
-                  "type": "string",
-                },
-                "destination.bytes": Object {
-                  "aggregatable": true,
-                  "category": "destination",
-                  "description": "Bytes sent from the destination to the source.",
-                  "example": "184",
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "destination.bytes",
-                  "searchable": true,
-                  "type": "number",
-                },
-                "destination.domain": Object {
-                  "aggregatable": true,
-                  "category": "destination",
-                  "description": "Destination domain.",
-                  "example": null,
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "destination.domain",
-                  "searchable": true,
-                  "type": "string",
-                },
-                "destination.ip": Object {
-                  "aggregatable": true,
-                  "category": "destination",
-                  "description": "IP address of the destination. Can be one or multiple IPv4 or IPv6 addresses.",
-                  "example": "",
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "destination.ip",
-                  "searchable": true,
-                  "type": "ip",
-                },
-                "destination.port": Object {
-                  "aggregatable": true,
-                  "category": "destination",
-                  "description": "Port of the destination.",
-                  "example": "",
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "destination.port",
-                  "searchable": true,
-                  "type": "long",
-                },
+          },
+          "destination": Object {
+            "fields": Object {
+              "destination.address": Object {
+                "aggregatable": true,
+                "category": "destination",
+                "description": "Some event destination addresses are defined ambiguously. The event will sometimes list an IP, a domain or a unix socket.  You should always store the raw address in the \`.address\` field. Then it should be duplicated to \`.ip\` or \`.domain\`, depending on which one it is.",
+                "example": null,
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "destination.address",
+                "searchable": true,
+                "type": "string",
+              },
+              "destination.bytes": Object {
+                "aggregatable": true,
+                "category": "destination",
+                "description": "Bytes sent from the destination to the source.",
+                "example": "184",
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "destination.bytes",
+                "searchable": true,
+                "type": "number",
+              },
+              "destination.domain": Object {
+                "aggregatable": true,
+                "category": "destination",
+                "description": "Destination domain.",
+                "example": null,
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "destination.domain",
+                "searchable": true,
+                "type": "string",
+              },
+              "destination.ip": Object {
+                "aggregatable": true,
+                "category": "destination",
+                "description": "IP address of the destination. Can be one or multiple IPv4 or IPv6 addresses.",
+                "example": "",
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "destination.ip",
+                "searchable": true,
+                "type": "ip",
+              },
+              "destination.port": Object {
+                "aggregatable": true,
+                "category": "destination",
+                "description": "Port of the destination.",
+                "example": "",
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "destination.port",
+                "searchable": true,
+                "type": "long",
               },
             },
-            "event": Object {
-              "fields": Object {
-                "event.end": Object {
-                  "aggregatable": true,
-                  "category": "event",
-                  "description": "event.end contains the date when the event ended or when the activity was last observed.",
-                  "example": null,
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat-*",
-                    "filebeat-*",
-                    "packetbeat-*",
-                    "winlogbeat-*",
-                  ],
-                  "name": "event.end",
-                  "searchable": true,
-                  "type": "date",
-                },
+          },
+          "event": Object {
+            "fields": Object {
+              "event.end": Object {
+                "aggregatable": true,
+                "category": "event",
+                "description": "event.end contains the date when the event ended or when the activity was last observed.",
+                "example": null,
+                "format": "",
+                "indexes": Array [
+                  "auditbeat-*",
+                  "filebeat-*",
+                  "packetbeat-*",
+                  "winlogbeat-*",
+                ],
+                "name": "event.end",
+                "searchable": true,
+                "type": "date",
               },
             },
-            "source": Object {
-              "fields": Object {
-                "source.ip": Object {
-                  "aggregatable": true,
-                  "category": "source",
-                  "description": "IP address of the source. Can be one or multiple IPv4 or IPv6 addresses.",
-                  "example": "",
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "source.ip",
-                  "searchable": true,
-                  "type": "ip",
-                },
-                "source.port": Object {
-                  "aggregatable": true,
-                  "category": "source",
-                  "description": "Port of the source.",
-                  "example": "",
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "source.port",
-                  "searchable": true,
-                  "type": "long",
-                },
+          },
+          "source": Object {
+            "fields": Object {
+              "source.ip": Object {
+                "aggregatable": true,
+                "category": "source",
+                "description": "IP address of the source. Can be one or multiple IPv4 or IPv6 addresses.",
+                "example": "",
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "source.ip",
+                "searchable": true,
+                "type": "ip",
+              },
+              "source.port": Object {
+                "aggregatable": true,
+                "category": "source",
+                "description": "Port of the source.",
+                "example": "",
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "source.port",
+                "searchable": true,
+                "type": "long",
               },
             },
-          }
+          },
         }
-        data={
-          Object {
-            "_id": "1",
-            "destination": Object {
-              "ip": Array [
-                "192.168.0.3",
-              ],
-              "port": Array [
-                6343,
-              ],
-            },
-            "event": Object {
-              "action": Array [
-                "Action",
-              ],
-              "category": Array [
-                "Access",
-              ],
-              "id": Array [
-                "1",
-              ],
-              "module": Array [
-                "nginx",
-              ],
-              "severity": Array [
-                3,
-              ],
-            },
-            "geo": Object {
-              "country_iso_code": Array [
-                "xx",
-              ],
-              "region_name": Array [
-                "xx",
-              ],
-            },
-            "host": Object {
-              "ip": Array [
-                "192.168.0.1",
-              ],
-              "name": Array [
-                "apache",
-              ],
-            },
-            "source": Object {
-              "ip": Array [
-                "192.168.0.1",
-              ],
-              "port": Array [
-                80,
-              ],
-            },
-            "timestamp": "2018-11-05T19:03:25.937Z",
-            "user": Object {
-              "id": Array [
-                "1",
-              ],
-              "name": Array [
-                "john.dee",
-              ],
-            },
-          }
+      }
+      data={
+        Object {
+          "_id": "1",
+          "destination": Object {
+            "ip": Array [
+              "192.168.0.3",
+            ],
+            "port": Array [
+              6343,
+            ],
+          },
+          "event": Object {
+            "action": Array [
+              "Action",
+            ],
+            "category": Array [
+              "Access",
+            ],
+            "id": Array [
+              "1",
+            ],
+            "module": Array [
+              "nginx",
+            ],
+            "severity": Array [
+              3,
+            ],
+          },
+          "geo": Object {
+            "country_iso_code": Array [
+              "xx",
+            ],
+            "region_name": Array [
+              "xx",
+            ],
+          },
+          "host": Object {
+            "ip": Array [
+              "192.168.0.1",
+            ],
+            "name": Array [
+              "apache",
+            ],
+          },
+          "source": Object {
+            "ip": Array [
+              "192.168.0.1",
+            ],
+            "port": Array [
+              80,
+            ],
+          },
+          "timestamp": "2018-11-05T19:03:25.937Z",
+          "user": Object {
+            "id": Array [
+              "1",
+            ],
+            "name": Array [
+              "john.dee",
+            ],
+          },
         }
-        timelineId="test"
-      />
-    </RowRendererContainer>
-  </Row>
+      }
+      timelineId="test"
+    />
+  </RowRendererContainer>
 </span>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_row_renderer.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_row_renderer.tsx
index 2218b2479d32fd..0bafe54b715fd6 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_row_renderer.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_row_renderer.tsx
@@ -8,7 +8,6 @@ import { get } from 'lodash/fp';
 import React from 'react';
 
 import { RowRenderer, RowRendererContainer } from '../row_renderer';
-import { Row } from '../helpers';
 import { SuricataDetails } from './suricata_details';
 
 export const suricataRowRenderer: RowRenderer = {
@@ -18,12 +17,13 @@ export const suricataRowRenderer: RowRenderer = {
   },
   renderRow: ({ browserFields, data, children, timelineId }) => {
     return (
-      <Row className="euiTableRow">
+      <>
         {children}
+
         <RowRendererContainer>
           <SuricataDetails data={data} browserFields={browserFields} timelineId={timelineId} />
         </RowRendererContainer>
-      </Row>
+      </>
     );
   },
 };
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/__snapshots__/generic_row_renderer.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/__snapshots__/generic_row_renderer.test.tsx.snap
index 2cc01daf997b3d..9ed65871455840 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/__snapshots__/generic_row_renderer.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/__snapshots__/generic_row_renderer.test.tsx.snap
@@ -2,208 +2,200 @@
 
 exports[`GenericRowRenderer #createGenericFileRowRenderer renders correctly against snapshot 1`] = `
 <span>
-  <Row
-    className="euiTableRow"
-  >
-    <span>
-      some children
-    </span>
-    <RowRendererContainer>
-      <SystemGenericFileDetails
-        browserFields={Object {}}
-        contextId="user_login-test"
-        data={
-          Object {
-            "_id": "29",
-            "auditd": null,
-            "destination": null,
-            "event": Object {
-              "action": Array [
-                "user_login",
-              ],
-              "category": null,
-              "created": null,
-              "dataset": Array [
-                "login",
-              ],
-              "duration": null,
-              "end": null,
-              "hash": null,
-              "id": null,
-              "kind": Array [
-                "event",
-              ],
-              "module": Array [
-                "system",
-              ],
-              "original": null,
-              "outcome": Array [
-                "failure",
-              ],
-              "risk_score": null,
-              "risk_score_norm": null,
-              "severity": null,
-              "start": null,
-              "timezone": null,
-              "type": null,
-            },
-            "file": null,
+  <span>
+    some children
+  </span>
+  <RowRendererContainer>
+    <SystemGenericFileDetails
+      browserFields={Object {}}
+      contextId="user_login-test"
+      data={
+        Object {
+          "_id": "29",
+          "auditd": null,
+          "destination": null,
+          "event": Object {
+            "action": Array [
+              "user_login",
+            ],
+            "category": null,
+            "created": null,
+            "dataset": Array [
+              "login",
+            ],
+            "duration": null,
+            "end": null,
+            "hash": null,
+            "id": null,
+            "kind": Array [
+              "event",
+            ],
+            "module": Array [
+              "system",
+            ],
+            "original": null,
+            "outcome": Array [
+              "failure",
+            ],
+            "risk_score": null,
+            "risk_score_norm": null,
+            "severity": null,
+            "start": null,
+            "timezone": null,
+            "type": null,
+          },
+          "file": null,
+          "geo": null,
+          "host": Object {
+            "id": Array [
+              "7c21f5ed03b04d0299569d221fe18bbc",
+            ],
+            "ip": Array [
+              "46.101.3.136",
+              "10.16.0.5",
+              "fe80::4066:42ff:fe19:b3b9",
+            ],
+            "name": Array [
+              "zeek-london",
+            ],
+          },
+          "http": null,
+          "network": null,
+          "process": Object {
+            "args": null,
+            "executable": null,
+            "name": null,
+            "pid": Array [
+              6278,
+            ],
+            "ppid": null,
+            "title": null,
+            "working_directory": null,
+          },
+          "source": Object {
+            "bytes": null,
             "geo": null,
-            "host": Object {
-              "id": Array [
-                "7c21f5ed03b04d0299569d221fe18bbc",
-              ],
-              "ip": Array [
-                "46.101.3.136",
-                "10.16.0.5",
-                "fe80::4066:42ff:fe19:b3b9",
-              ],
-              "name": Array [
-                "zeek-london",
-              ],
-            },
-            "http": null,
-            "network": null,
-            "process": Object {
-              "args": null,
-              "executable": null,
-              "name": null,
-              "pid": Array [
-                6278,
-              ],
-              "ppid": null,
-              "title": null,
-              "working_directory": null,
-            },
-            "source": Object {
-              "bytes": null,
-              "geo": null,
-              "ip": Array [
-                "128.199.212.120",
-              ],
-              "packets": null,
-              "port": null,
-            },
-            "suricata": null,
-            "system": null,
-            "tls": null,
-            "url": null,
-            "user": Object {
-              "name": Array [
-                "Braden",
-              ],
-            },
-            "zeek": null,
-          }
+            "ip": Array [
+              "128.199.212.120",
+            ],
+            "packets": null,
+            "port": null,
+          },
+          "suricata": null,
+          "system": null,
+          "tls": null,
+          "url": null,
+          "user": Object {
+            "name": Array [
+              "Braden",
+            ],
+          },
+          "zeek": null,
         }
-        text="some text"
-        timelineId="test"
-      />
-    </RowRendererContainer>
-  </Row>
+      }
+      text="some text"
+      timelineId="test"
+    />
+  </RowRendererContainer>
 </span>
 `;
 
 exports[`GenericRowRenderer #createGenericSystemRowRenderer renders correctly against snapshot 1`] = `
 <span>
-  <Row
-    className="euiTableRow"
-  >
-    <span>
-      some children
-    </span>
-    <RowRendererContainer>
-      <SystemGenericDetails
-        browserFields={Object {}}
-        contextId="process_started-test"
-        data={
-          Object {
-            "_id": "30",
-            "auditd": null,
-            "destination": null,
-            "event": Object {
-              "action": Array [
-                "process_started",
-              ],
-              "category": null,
-              "created": null,
-              "dataset": Array [
-                "login",
-              ],
-              "duration": null,
-              "end": null,
-              "hash": null,
-              "id": null,
-              "kind": Array [
-                "event",
-              ],
-              "module": Array [
-                "system",
-              ],
-              "original": null,
-              "outcome": Array [
-                "failure",
-              ],
-              "risk_score": null,
-              "risk_score_norm": null,
-              "severity": null,
-              "start": null,
-              "timezone": null,
-              "type": null,
-            },
-            "file": null,
+  <span>
+    some children
+  </span>
+  <RowRendererContainer>
+    <SystemGenericDetails
+      browserFields={Object {}}
+      contextId="process_started-test"
+      data={
+        Object {
+          "_id": "30",
+          "auditd": null,
+          "destination": null,
+          "event": Object {
+            "action": Array [
+              "process_started",
+            ],
+            "category": null,
+            "created": null,
+            "dataset": Array [
+              "login",
+            ],
+            "duration": null,
+            "end": null,
+            "hash": null,
+            "id": null,
+            "kind": Array [
+              "event",
+            ],
+            "module": Array [
+              "system",
+            ],
+            "original": null,
+            "outcome": Array [
+              "failure",
+            ],
+            "risk_score": null,
+            "risk_score_norm": null,
+            "severity": null,
+            "start": null,
+            "timezone": null,
+            "type": null,
+          },
+          "file": null,
+          "geo": null,
+          "host": Object {
+            "id": Array [
+              "7c21f5ed03b04d0299569d221fe18bbc",
+            ],
+            "ip": Array [
+              "46.101.3.136",
+              "10.16.0.5",
+              "fe80::4066:42ff:fe19:b3b9",
+            ],
+            "name": Array [
+              "zeek-london",
+            ],
+          },
+          "http": null,
+          "network": null,
+          "process": Object {
+            "args": null,
+            "executable": null,
+            "name": null,
+            "pid": Array [
+              6278,
+            ],
+            "ppid": null,
+            "title": null,
+            "working_directory": null,
+          },
+          "source": Object {
+            "bytes": null,
             "geo": null,
-            "host": Object {
-              "id": Array [
-                "7c21f5ed03b04d0299569d221fe18bbc",
-              ],
-              "ip": Array [
-                "46.101.3.136",
-                "10.16.0.5",
-                "fe80::4066:42ff:fe19:b3b9",
-              ],
-              "name": Array [
-                "zeek-london",
-              ],
-            },
-            "http": null,
-            "network": null,
-            "process": Object {
-              "args": null,
-              "executable": null,
-              "name": null,
-              "pid": Array [
-                6278,
-              ],
-              "ppid": null,
-              "title": null,
-              "working_directory": null,
-            },
-            "source": Object {
-              "bytes": null,
-              "geo": null,
-              "ip": Array [
-                "128.199.212.120",
-              ],
-              "packets": null,
-              "port": null,
-            },
-            "suricata": null,
-            "system": null,
-            "tls": null,
-            "url": null,
-            "user": Object {
-              "name": Array [
-                "Evan",
-              ],
-            },
-            "zeek": null,
-          }
+            "ip": Array [
+              "128.199.212.120",
+            ],
+            "packets": null,
+            "port": null,
+          },
+          "suricata": null,
+          "system": null,
+          "tls": null,
+          "url": null,
+          "user": Object {
+            "name": Array [
+              "Evan",
+            ],
+          },
+          "zeek": null,
         }
-        text="some text"
-        timelineId="test"
-      />
-    </RowRendererContainer>
-  </Row>
+      }
+      text="some text"
+      timelineId="test"
+    />
+  </RowRendererContainer>
 </span>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/generic_row_renderer.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/generic_row_renderer.tsx
index 5f0b451d038b7c..1b3e415fa4ccb2 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/generic_row_renderer.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/generic_row_renderer.tsx
@@ -7,11 +7,10 @@
 import { get } from 'lodash/fp';
 import React from 'react';
 
-import * as i18n from './translations';
 import { RowRenderer, RowRendererContainer } from '../row_renderer';
-import { Row } from '../helpers';
 import { SystemGenericDetails } from './generic_details';
 import { SystemGenericFileDetails } from './generic_file_details';
+import * as i18n from './translations';
 
 export const createGenericSystemRowRenderer = ({
   actionName,
@@ -31,7 +30,7 @@ export const createGenericSystemRowRenderer = ({
     );
   },
   renderRow: ({ browserFields, data, children, timelineId }) => (
-    <Row className="euiTableRow">
+    <>
       {children}
       <RowRendererContainer>
         <SystemGenericDetails
@@ -42,7 +41,7 @@ export const createGenericSystemRowRenderer = ({
           timelineId={timelineId}
         />
       </RowRendererContainer>
-    </Row>
+    </>
   ),
 });
 
@@ -64,7 +63,7 @@ export const createGenericFileRowRenderer = ({
     );
   },
   renderRow: ({ browserFields, data, children, timelineId }) => (
-    <Row className="euiTableRow">
+    <>
       {children}
       <RowRendererContainer>
         <SystemGenericFileDetails
@@ -75,7 +74,7 @@ export const createGenericFileRowRenderer = ({
           timelineId={timelineId}
         />
       </RowRendererContainer>
-    </Row>
+    </>
   ),
 });
 
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/__snapshots__/zeek_row_renderer.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/__snapshots__/zeek_row_renderer.test.tsx.snap
index 016668ed0d94e2..5595ad5642b88c 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/__snapshots__/zeek_row_renderer.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/__snapshots__/zeek_row_renderer.test.tsx.snap
@@ -2,490 +2,486 @@
 
 exports[`zeek_row_renderer renders correctly against snapshot 1`] = `
 <span>
-  <Row
-    className="euiTableRow"
-  >
-    <span>
-      some children
-    </span>
-    <RowRendererContainer>
-      <ZeekDetails
-        browserFields={
-          Object {
-            "agent": Object {
-              "fields": Object {
-                "agent.ephemeral_id": Object {
-                  "aggregatable": true,
-                  "category": "agent",
-                  "description": "Ephemeral identifier of this agent (if one exists). This id normally changes across restarts, but \`agent.id\` does not.",
-                  "example": "8a4f500f",
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "agent.ephemeral_id",
-                  "searchable": true,
-                  "type": "string",
-                },
-                "agent.hostname": Object {
-                  "aggregatable": true,
-                  "category": "agent",
-                  "description": null,
-                  "example": null,
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "agent.hostname",
-                  "searchable": true,
-                  "type": "string",
-                },
-                "agent.id": Object {
-                  "aggregatable": true,
-                  "category": "agent",
-                  "description": "Unique identifier of this agent (if one exists). Example: For Beats this would be beat.id.",
-                  "example": "8a4f500d",
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "agent.id",
-                  "searchable": true,
-                  "type": "string",
-                },
-                "agent.name": Object {
-                  "aggregatable": true,
-                  "category": "agent",
-                  "description": "Name of the agent. This is a name that can be given to an agent. This can be helpful if for example two Filebeat instances are running on the same host but a human readable separation is needed on which Filebeat instance data is coming from. If no name is given, the name is often left empty.",
-                  "example": "foo",
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "agent.name",
-                  "searchable": true,
-                  "type": "string",
-                },
+  <span>
+    some children
+  </span>
+  <RowRendererContainer>
+    <ZeekDetails
+      browserFields={
+        Object {
+          "agent": Object {
+            "fields": Object {
+              "agent.ephemeral_id": Object {
+                "aggregatable": true,
+                "category": "agent",
+                "description": "Ephemeral identifier of this agent (if one exists). This id normally changes across restarts, but \`agent.id\` does not.",
+                "example": "8a4f500f",
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "agent.ephemeral_id",
+                "searchable": true,
+                "type": "string",
+              },
+              "agent.hostname": Object {
+                "aggregatable": true,
+                "category": "agent",
+                "description": null,
+                "example": null,
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "agent.hostname",
+                "searchable": true,
+                "type": "string",
+              },
+              "agent.id": Object {
+                "aggregatable": true,
+                "category": "agent",
+                "description": "Unique identifier of this agent (if one exists). Example: For Beats this would be beat.id.",
+                "example": "8a4f500d",
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "agent.id",
+                "searchable": true,
+                "type": "string",
+              },
+              "agent.name": Object {
+                "aggregatable": true,
+                "category": "agent",
+                "description": "Name of the agent. This is a name that can be given to an agent. This can be helpful if for example two Filebeat instances are running on the same host but a human readable separation is needed on which Filebeat instance data is coming from. If no name is given, the name is often left empty.",
+                "example": "foo",
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "agent.name",
+                "searchable": true,
+                "type": "string",
               },
             },
-            "auditd": Object {
-              "fields": Object {
-                "auditd.data.a0": Object {
-                  "aggregatable": true,
-                  "category": "auditd",
-                  "description": null,
-                  "example": null,
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                  ],
-                  "name": "auditd.data.a0",
-                  "searchable": true,
-                  "type": "string",
-                },
-                "auditd.data.a1": Object {
-                  "aggregatable": true,
-                  "category": "auditd",
-                  "description": null,
-                  "example": null,
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                  ],
-                  "name": "auditd.data.a1",
-                  "searchable": true,
-                  "type": "string",
-                },
-                "auditd.data.a2": Object {
-                  "aggregatable": true,
-                  "category": "auditd",
-                  "description": null,
-                  "example": null,
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                  ],
-                  "name": "auditd.data.a2",
-                  "searchable": true,
-                  "type": "string",
-                },
+          },
+          "auditd": Object {
+            "fields": Object {
+              "auditd.data.a0": Object {
+                "aggregatable": true,
+                "category": "auditd",
+                "description": null,
+                "example": null,
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                ],
+                "name": "auditd.data.a0",
+                "searchable": true,
+                "type": "string",
+              },
+              "auditd.data.a1": Object {
+                "aggregatable": true,
+                "category": "auditd",
+                "description": null,
+                "example": null,
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                ],
+                "name": "auditd.data.a1",
+                "searchable": true,
+                "type": "string",
+              },
+              "auditd.data.a2": Object {
+                "aggregatable": true,
+                "category": "auditd",
+                "description": null,
+                "example": null,
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                ],
+                "name": "auditd.data.a2",
+                "searchable": true,
+                "type": "string",
               },
             },
-            "base": Object {
-              "fields": Object {
-                "@timestamp": Object {
-                  "aggregatable": true,
-                  "category": "base",
-                  "description": "Date/time when the event originated. For log events this is the date/time when the event was generated, and not when it was read. Required field for all events.",
-                  "example": "2016-05-23T08:05:34.853Z",
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "@timestamp",
-                  "searchable": true,
-                  "type": "date",
-                },
+          },
+          "base": Object {
+            "fields": Object {
+              "@timestamp": Object {
+                "aggregatable": true,
+                "category": "base",
+                "description": "Date/time when the event originated. For log events this is the date/time when the event was generated, and not when it was read. Required field for all events.",
+                "example": "2016-05-23T08:05:34.853Z",
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "@timestamp",
+                "searchable": true,
+                "type": "date",
               },
             },
-            "client": Object {
-              "fields": Object {
-                "client.address": Object {
-                  "aggregatable": true,
-                  "category": "client",
-                  "description": "Some event client addresses are defined ambiguously. The event will sometimes list an IP, a domain or a unix socket.  You should always store the raw address in the \`.address\` field. Then it should be duplicated to \`.ip\` or \`.domain\`, depending on which one it is.",
-                  "example": null,
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "client.address",
-                  "searchable": true,
-                  "type": "string",
-                },
-                "client.bytes": Object {
-                  "aggregatable": true,
-                  "category": "client",
-                  "description": "Bytes sent from the client to the server.",
-                  "example": "184",
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "client.bytes",
-                  "searchable": true,
-                  "type": "number",
-                },
-                "client.domain": Object {
-                  "aggregatable": true,
-                  "category": "client",
-                  "description": "Client domain.",
-                  "example": null,
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "client.domain",
-                  "searchable": true,
-                  "type": "string",
-                },
-                "client.geo.country_iso_code": Object {
-                  "aggregatable": true,
-                  "category": "client",
-                  "description": "Country ISO code.",
-                  "example": "CA",
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "client.geo.country_iso_code",
-                  "searchable": true,
-                  "type": "string",
-                },
+          },
+          "client": Object {
+            "fields": Object {
+              "client.address": Object {
+                "aggregatable": true,
+                "category": "client",
+                "description": "Some event client addresses are defined ambiguously. The event will sometimes list an IP, a domain or a unix socket.  You should always store the raw address in the \`.address\` field. Then it should be duplicated to \`.ip\` or \`.domain\`, depending on which one it is.",
+                "example": null,
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "client.address",
+                "searchable": true,
+                "type": "string",
+              },
+              "client.bytes": Object {
+                "aggregatable": true,
+                "category": "client",
+                "description": "Bytes sent from the client to the server.",
+                "example": "184",
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "client.bytes",
+                "searchable": true,
+                "type": "number",
+              },
+              "client.domain": Object {
+                "aggregatable": true,
+                "category": "client",
+                "description": "Client domain.",
+                "example": null,
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "client.domain",
+                "searchable": true,
+                "type": "string",
+              },
+              "client.geo.country_iso_code": Object {
+                "aggregatable": true,
+                "category": "client",
+                "description": "Country ISO code.",
+                "example": "CA",
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "client.geo.country_iso_code",
+                "searchable": true,
+                "type": "string",
               },
             },
-            "cloud": Object {
-              "fields": Object {
-                "cloud.account.id": Object {
-                  "aggregatable": true,
-                  "category": "cloud",
-                  "description": "The cloud account or organization id used to identify different entities in a multi-tenant environment. Examples: AWS account id, Google Cloud ORG Id, or other unique identifier.",
-                  "example": "666777888999",
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "cloud.account.id",
-                  "searchable": true,
-                  "type": "string",
-                },
-                "cloud.availability_zone": Object {
-                  "aggregatable": true,
-                  "category": "cloud",
-                  "description": "Availability zone in which this host is running.",
-                  "example": "us-east-1c",
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "cloud.availability_zone",
-                  "searchable": true,
-                  "type": "string",
-                },
+          },
+          "cloud": Object {
+            "fields": Object {
+              "cloud.account.id": Object {
+                "aggregatable": true,
+                "category": "cloud",
+                "description": "The cloud account or organization id used to identify different entities in a multi-tenant environment. Examples: AWS account id, Google Cloud ORG Id, or other unique identifier.",
+                "example": "666777888999",
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "cloud.account.id",
+                "searchable": true,
+                "type": "string",
+              },
+              "cloud.availability_zone": Object {
+                "aggregatable": true,
+                "category": "cloud",
+                "description": "Availability zone in which this host is running.",
+                "example": "us-east-1c",
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "cloud.availability_zone",
+                "searchable": true,
+                "type": "string",
               },
             },
-            "container": Object {
-              "fields": Object {
-                "container.id": Object {
-                  "aggregatable": true,
-                  "category": "container",
-                  "description": "Unique container id.",
-                  "example": null,
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "container.id",
-                  "searchable": true,
-                  "type": "string",
-                },
-                "container.image.name": Object {
-                  "aggregatable": true,
-                  "category": "container",
-                  "description": "Name of the image the container was built on.",
-                  "example": null,
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "container.image.name",
-                  "searchable": true,
-                  "type": "string",
-                },
-                "container.image.tag": Object {
-                  "aggregatable": true,
-                  "category": "container",
-                  "description": "Container image tag.",
-                  "example": null,
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "container.image.tag",
-                  "searchable": true,
-                  "type": "string",
-                },
+          },
+          "container": Object {
+            "fields": Object {
+              "container.id": Object {
+                "aggregatable": true,
+                "category": "container",
+                "description": "Unique container id.",
+                "example": null,
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "container.id",
+                "searchable": true,
+                "type": "string",
+              },
+              "container.image.name": Object {
+                "aggregatable": true,
+                "category": "container",
+                "description": "Name of the image the container was built on.",
+                "example": null,
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "container.image.name",
+                "searchable": true,
+                "type": "string",
+              },
+              "container.image.tag": Object {
+                "aggregatable": true,
+                "category": "container",
+                "description": "Container image tag.",
+                "example": null,
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "container.image.tag",
+                "searchable": true,
+                "type": "string",
               },
             },
-            "destination": Object {
-              "fields": Object {
-                "destination.address": Object {
-                  "aggregatable": true,
-                  "category": "destination",
-                  "description": "Some event destination addresses are defined ambiguously. The event will sometimes list an IP, a domain or a unix socket.  You should always store the raw address in the \`.address\` field. Then it should be duplicated to \`.ip\` or \`.domain\`, depending on which one it is.",
-                  "example": null,
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "destination.address",
-                  "searchable": true,
-                  "type": "string",
-                },
-                "destination.bytes": Object {
-                  "aggregatable": true,
-                  "category": "destination",
-                  "description": "Bytes sent from the destination to the source.",
-                  "example": "184",
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "destination.bytes",
-                  "searchable": true,
-                  "type": "number",
-                },
-                "destination.domain": Object {
-                  "aggregatable": true,
-                  "category": "destination",
-                  "description": "Destination domain.",
-                  "example": null,
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "destination.domain",
-                  "searchable": true,
-                  "type": "string",
-                },
-                "destination.ip": Object {
-                  "aggregatable": true,
-                  "category": "destination",
-                  "description": "IP address of the destination. Can be one or multiple IPv4 or IPv6 addresses.",
-                  "example": "",
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "destination.ip",
-                  "searchable": true,
-                  "type": "ip",
-                },
-                "destination.port": Object {
-                  "aggregatable": true,
-                  "category": "destination",
-                  "description": "Port of the destination.",
-                  "example": "",
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "destination.port",
-                  "searchable": true,
-                  "type": "long",
-                },
+          },
+          "destination": Object {
+            "fields": Object {
+              "destination.address": Object {
+                "aggregatable": true,
+                "category": "destination",
+                "description": "Some event destination addresses are defined ambiguously. The event will sometimes list an IP, a domain or a unix socket.  You should always store the raw address in the \`.address\` field. Then it should be duplicated to \`.ip\` or \`.domain\`, depending on which one it is.",
+                "example": null,
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "destination.address",
+                "searchable": true,
+                "type": "string",
+              },
+              "destination.bytes": Object {
+                "aggregatable": true,
+                "category": "destination",
+                "description": "Bytes sent from the destination to the source.",
+                "example": "184",
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "destination.bytes",
+                "searchable": true,
+                "type": "number",
+              },
+              "destination.domain": Object {
+                "aggregatable": true,
+                "category": "destination",
+                "description": "Destination domain.",
+                "example": null,
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "destination.domain",
+                "searchable": true,
+                "type": "string",
+              },
+              "destination.ip": Object {
+                "aggregatable": true,
+                "category": "destination",
+                "description": "IP address of the destination. Can be one or multiple IPv4 or IPv6 addresses.",
+                "example": "",
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "destination.ip",
+                "searchable": true,
+                "type": "ip",
+              },
+              "destination.port": Object {
+                "aggregatable": true,
+                "category": "destination",
+                "description": "Port of the destination.",
+                "example": "",
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "destination.port",
+                "searchable": true,
+                "type": "long",
               },
             },
-            "event": Object {
-              "fields": Object {
-                "event.end": Object {
-                  "aggregatable": true,
-                  "category": "event",
-                  "description": "event.end contains the date when the event ended or when the activity was last observed.",
-                  "example": null,
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat-*",
-                    "filebeat-*",
-                    "packetbeat-*",
-                    "winlogbeat-*",
-                  ],
-                  "name": "event.end",
-                  "searchable": true,
-                  "type": "date",
-                },
+          },
+          "event": Object {
+            "fields": Object {
+              "event.end": Object {
+                "aggregatable": true,
+                "category": "event",
+                "description": "event.end contains the date when the event ended or when the activity was last observed.",
+                "example": null,
+                "format": "",
+                "indexes": Array [
+                  "auditbeat-*",
+                  "filebeat-*",
+                  "packetbeat-*",
+                  "winlogbeat-*",
+                ],
+                "name": "event.end",
+                "searchable": true,
+                "type": "date",
               },
             },
-            "source": Object {
-              "fields": Object {
-                "source.ip": Object {
-                  "aggregatable": true,
-                  "category": "source",
-                  "description": "IP address of the source. Can be one or multiple IPv4 or IPv6 addresses.",
-                  "example": "",
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "source.ip",
-                  "searchable": true,
-                  "type": "ip",
-                },
-                "source.port": Object {
-                  "aggregatable": true,
-                  "category": "source",
-                  "description": "Port of the source.",
-                  "example": "",
-                  "format": "",
-                  "indexes": Array [
-                    "auditbeat",
-                    "filebeat",
-                    "packetbeat",
-                  ],
-                  "name": "source.port",
-                  "searchable": true,
-                  "type": "long",
-                },
+          },
+          "source": Object {
+            "fields": Object {
+              "source.ip": Object {
+                "aggregatable": true,
+                "category": "source",
+                "description": "IP address of the source. Can be one or multiple IPv4 or IPv6 addresses.",
+                "example": "",
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "source.ip",
+                "searchable": true,
+                "type": "ip",
+              },
+              "source.port": Object {
+                "aggregatable": true,
+                "category": "source",
+                "description": "Port of the source.",
+                "example": "",
+                "format": "",
+                "indexes": Array [
+                  "auditbeat",
+                  "filebeat",
+                  "packetbeat",
+                ],
+                "name": "source.port",
+                "searchable": true,
+                "type": "long",
               },
             },
-          }
+          },
         }
-        data={
-          Object {
-            "_id": "1",
-            "destination": Object {
-              "ip": Array [
-                "192.168.0.3",
-              ],
-              "port": Array [
-                6343,
-              ],
-            },
-            "event": Object {
-              "action": Array [
-                "Action",
-              ],
-              "category": Array [
-                "Access",
-              ],
-              "id": Array [
-                "1",
-              ],
-              "module": Array [
-                "nginx",
-              ],
-              "severity": Array [
-                3,
-              ],
-            },
-            "geo": Object {
-              "country_iso_code": Array [
-                "xx",
-              ],
-              "region_name": Array [
-                "xx",
-              ],
-            },
-            "host": Object {
-              "ip": Array [
-                "192.168.0.1",
-              ],
-              "name": Array [
-                "apache",
-              ],
-            },
-            "source": Object {
-              "ip": Array [
-                "192.168.0.1",
-              ],
-              "port": Array [
-                80,
-              ],
-            },
-            "timestamp": "2018-11-05T19:03:25.937Z",
-            "user": Object {
-              "id": Array [
-                "1",
-              ],
-              "name": Array [
-                "john.dee",
-              ],
-            },
-          }
+      }
+      data={
+        Object {
+          "_id": "1",
+          "destination": Object {
+            "ip": Array [
+              "192.168.0.3",
+            ],
+            "port": Array [
+              6343,
+            ],
+          },
+          "event": Object {
+            "action": Array [
+              "Action",
+            ],
+            "category": Array [
+              "Access",
+            ],
+            "id": Array [
+              "1",
+            ],
+            "module": Array [
+              "nginx",
+            ],
+            "severity": Array [
+              3,
+            ],
+          },
+          "geo": Object {
+            "country_iso_code": Array [
+              "xx",
+            ],
+            "region_name": Array [
+              "xx",
+            ],
+          },
+          "host": Object {
+            "ip": Array [
+              "192.168.0.1",
+            ],
+            "name": Array [
+              "apache",
+            ],
+          },
+          "source": Object {
+            "ip": Array [
+              "192.168.0.1",
+            ],
+            "port": Array [
+              80,
+            ],
+          },
+          "timestamp": "2018-11-05T19:03:25.937Z",
+          "user": Object {
+            "id": Array [
+              "1",
+            ],
+            "name": Array [
+              "john.dee",
+            ],
+          },
         }
-        timelineId="test"
-      />
-    </RowRendererContainer>
-  </Row>
+      }
+      timelineId="test"
+    />
+  </RowRendererContainer>
 </span>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_row_renderer.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_row_renderer.tsx
index c0c25b625ab875..83d1c4347f57cf 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_row_renderer.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_row_renderer.tsx
@@ -7,7 +7,6 @@
 import { get } from 'lodash/fp';
 import React from 'react';
 
-import { Row } from '../helpers';
 import { RowRenderer, RowRendererContainer } from '../row_renderer';
 import { ZeekDetails } from './zeek_details';
 
@@ -17,11 +16,11 @@ export const zeekRowRenderer: RowRenderer = {
     return module != null && module.toLowerCase() === 'zeek';
   },
   renderRow: ({ browserFields, data, children, timelineId }) => (
-    <Row className="euiTableRow">
+    <>
       {children}
       <RowRendererContainer>
         <ZeekDetails data={data} browserFields={browserFields} timelineId={timelineId} />
       </RowRendererContainer>
-    </Row>
+    </>
   ),
 };
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/stateful_body.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/stateful_body.tsx
index 871a60d18404ad..d93446b2af95b3 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/stateful_body.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/stateful_body.tsx
@@ -84,8 +84,10 @@ type StatefulBodyComponentProps = OwnProps & ReduxProps & DispatchProps;
 
 export const emptyColumnHeaders: ColumnHeader[] = [];
 
-class StatefulBodyComponent extends React.Component<StatefulBodyComponentProps> {
-  public shouldComponentUpdate({
+const StatefulBodyComponent = React.memo<StatefulBodyComponentProps>(
+  ({
+    addNoteToEvent,
+    applyDeltaToColumnWidth,
     browserFields,
     columnHeaders,
     data,
@@ -93,45 +95,46 @@ class StatefulBodyComponent extends React.Component<StatefulBodyComponentProps>
     getNotesByIds,
     height,
     id,
-    isEventViewer,
+    isEventViewer = false,
+    pinEvent,
     pinnedEventIds,
     range,
+    removeColumn,
     sort,
-  }: StatefulBodyComponentProps) {
-    return (
-      browserFields !== this.props.browserFields ||
-      columnHeaders !== this.props.columnHeaders ||
-      data !== this.props.data ||
-      eventIdToNoteIds !== this.props.eventIdToNoteIds ||
-      getNotesByIds !== this.props.getNotesByIds ||
-      height !== this.props.height ||
-      id !== this.props.id ||
-      isEventViewer !== this.props.isEventViewer ||
-      pinnedEventIds !== this.props.pinnedEventIds ||
-      range !== this.props.range ||
-      sort !== this.props.sort
-    );
-  }
+    toggleColumn,
+    unPinEvent,
+    updateColumns,
+    updateNote,
+    updateSort,
+  }) => {
+    const onAddNoteToEvent: AddNoteToEvent = ({
+      eventId,
+      noteId,
+    }: {
+      eventId: string;
+      noteId: string;
+    }) => addNoteToEvent!({ id, eventId, noteId });
+
+    const onColumnSorted: OnColumnSorted = sorted => {
+      updateSort!({ id, sort: sorted });
+    };
 
-  public render() {
-    const {
-      browserFields,
-      columnHeaders,
-      data,
-      eventIdToNoteIds,
-      getNotesByIds,
-      height,
-      id,
-      isEventViewer = false,
-      pinnedEventIds,
-      range,
-      sort,
-      toggleColumn,
-    } = this.props;
+    const onColumnRemoved: OnColumnRemoved = columnId => removeColumn!({ id, columnId });
+
+    const onColumnResized: OnColumnResized = ({ columnId, delta }) =>
+      applyDeltaToColumnWidth!({ id, columnId, delta });
+
+    const onPinEvent: OnPinEvent = eventId => pinEvent!({ id, eventId });
+
+    const onUnPinEvent: OnUnPinEvent = eventId => unPinEvent!({ id, eventId });
+
+    const onUpdateNote: UpdateNote = (note: Note) => updateNote!({ note });
+
+    const onUpdateColumns: OnUpdateColumns = columns => updateColumns!({ id, columns });
 
     return (
       <Body
-        addNoteToEvent={this.onAddNoteToEvent}
+        addNoteToEvent={onAddNoteToEvent}
         browserFields={browserFields}
         columnHeaders={columnHeaders || emptyColumnHeaders}
         columnRenderers={columnRenderers}
@@ -141,51 +144,40 @@ class StatefulBodyComponent extends React.Component<StatefulBodyComponentProps>
         height={height}
         id={id}
         isEventViewer={isEventViewer}
-        onColumnResized={this.onColumnResized}
-        onColumnRemoved={this.onColumnRemoved}
-        onColumnSorted={this.onColumnSorted}
+        onColumnRemoved={onColumnRemoved}
+        onColumnResized={onColumnResized}
+        onColumnSorted={onColumnSorted}
         onFilterChange={noop} // TODO: this is the callback for column filters, which is out scope for this phase of delivery
-        onPinEvent={this.onPinEvent}
-        onUpdateColumns={this.onUpdateColumns}
-        onUnPinEvent={this.onUnPinEvent}
+        onPinEvent={onPinEvent}
+        onUnPinEvent={onUnPinEvent}
+        onUpdateColumns={onUpdateColumns}
         pinnedEventIds={pinnedEventIds}
         range={range!}
         rowRenderers={rowRenderers}
         sort={sort}
         toggleColumn={toggleColumn}
-        updateNote={this.onUpdateNote}
+        updateNote={onUpdateNote}
       />
     );
+  },
+  (prevProps, nextProps) => {
+    return (
+      prevProps.browserFields === nextProps.browserFields &&
+      prevProps.columnHeaders === nextProps.columnHeaders &&
+      prevProps.data === nextProps.data &&
+      prevProps.eventIdToNoteIds === nextProps.eventIdToNoteIds &&
+      prevProps.getNotesByIds === nextProps.getNotesByIds &&
+      prevProps.height === nextProps.height &&
+      prevProps.id === nextProps.id &&
+      prevProps.isEventViewer === nextProps.isEventViewer &&
+      prevProps.pinnedEventIds === nextProps.pinnedEventIds &&
+      prevProps.range === nextProps.range &&
+      prevProps.sort === nextProps.sort
+    );
   }
+);
 
-  private onAddNoteToEvent: AddNoteToEvent = ({
-    eventId,
-    noteId,
-  }: {
-    eventId: string;
-    noteId: string;
-  }) => this.props.addNoteToEvent!({ id: this.props.id, eventId, noteId });
-
-  private onColumnSorted: OnColumnSorted = sorted => {
-    this.props.updateSort!({ id: this.props.id, sort: sorted });
-  };
-
-  private onColumnRemoved: OnColumnRemoved = columnId =>
-    this.props.removeColumn!({ id: this.props.id, columnId });
-
-  private onColumnResized: OnColumnResized = ({ columnId, delta }) =>
-    this.props.applyDeltaToColumnWidth!({ id: this.props.id, columnId, delta });
-
-  private onPinEvent: OnPinEvent = eventId => this.props.pinEvent!({ id: this.props.id, eventId });
-
-  private onUnPinEvent: OnUnPinEvent = eventId =>
-    this.props.unPinEvent!({ id: this.props.id, eventId });
-
-  private onUpdateNote: UpdateNote = (note: Note) => this.props.updateNote!({ note });
-
-  private onUpdateColumns: OnUpdateColumns = columns =>
-    this.props.updateColumns!({ id: this.props.id, columns });
-}
+StatefulBodyComponent.displayName = 'StatefulBodyComponent';
 
 const makeMapStateToProps = () => {
   const memoizedColumnHeaders: (
@@ -201,9 +193,9 @@ const makeMapStateToProps = () => {
 
     return {
       columnHeaders: memoizedColumnHeaders(columns, browserFields),
-      id,
       eventIdToNoteIds,
       getNotesByIds: getNotesByIds(state),
+      id,
       pinnedEventIds,
     };
   };
@@ -215,12 +207,12 @@ export const StatefulBody = connect(
   {
     addNoteToEvent: timelineActions.addNoteToEvent,
     applyDeltaToColumnWidth: timelineActions.applyDeltaToColumnWidth,
-    unPinEvent: timelineActions.unPinEvent,
-    updateColumns: timelineActions.updateColumns,
-    updateSort: timelineActions.updateSort,
     pinEvent: timelineActions.pinEvent,
     removeColumn: timelineActions.removeColumn,
     removeProvider: timelineActions.removeProvider,
+    unPinEvent: timelineActions.unPinEvent,
+    updateColumns: timelineActions.updateColumns,
     updateNote: appActions.updateNote,
+    updateSort: timelineActions.updateSort,
   }
 )(StatefulBodyComponent);
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/index.tsx
index f07cf9339be6b0..57c6d9abad0e81 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/index.tsx
@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { rgba } from 'polished';
 import * as React from 'react';
 import { pure } from 'recompose';
 import styled from 'styled-components';
@@ -13,7 +14,6 @@ import { DroppableWrapper } from '../../drag_and_drop/droppable_wrapper';
 import {
   droppableTimelineProvidersPrefix,
   IS_DRAGGING_CLASS_NAME,
-  TEN_PERCENT_ALPHA_HEX_SUFFIX,
 } from '../../drag_and_drop/helpers';
 import {
   OnChangeDataProviderKqlQuery,
@@ -44,7 +44,7 @@ interface Props {
 
 const DropTargetDataProvidersContainer = styled.div`
   .${IS_DRAGGING_CLASS_NAME} & .drop-target-data-providers {
-    background: ${({ theme }) => `${theme.eui.euiColorSuccess}${TEN_PERCENT_ALPHA_HEX_SUFFIX}`};
+    background: ${({ theme }) => rgba(theme.eui.euiColorSuccess, 0.1)};
     border: 0.2rem dashed ${({ theme }) => theme.eui.euiColorSuccess};
 
     & .euiTextColor--subdued {
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/provider_item_and_drag_drop.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/provider_item_and_drag_drop.tsx
index 61812265e827ba..0d3874943d2ed6 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/provider_item_and_drag_drop.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/provider_item_and_drag_drop.tsx
@@ -5,6 +5,7 @@
  */
 
 import { EuiBadge, EuiBadgeProps, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import { rgba } from 'polished';
 import * as React from 'react';
 import { pure } from 'recompose';
 import styled from 'styled-components';
@@ -20,7 +21,6 @@ import {
 } from '../events';
 
 import { BrowserFields } from '../../../containers/source';
-import { TWENTY_PERCENT_ALPHA_HEX_SUFFIX } from '../../drag_and_drop/helpers';
 
 import { DataProvider } from './data_provider';
 import { ProviderItemAnd } from './provider_item_and';
@@ -47,7 +47,7 @@ const DropAndTargetDataProviders = styled.div<{ hasAndItem: boolean }>`
     props.hasAndItem
       ? `&:hover {
     transition: background-color 0.7s ease;
-    background-color: ${() => props.theme.eui.euiColorSuccess}${TWENTY_PERCENT_ALPHA_HEX_SUFFIX};
+    background-color: ${() => rgba(props.theme.eui.euiColorSuccess, 0.2)};
   }`
       : ''};
   cursor: ${({ hasAndItem }) => (!hasAndItem ? `default` : 'inherit')};
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/provider_item_badge.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/provider_item_badge.tsx
index 29417bd0b578b4..98cf0a78b1d1f8 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/provider_item_badge.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/provider_item_badge.tsx
@@ -5,7 +5,7 @@
  */
 
 import { noop } from 'lodash/fp';
-import React, { PureComponent } from 'react';
+import React, { useState } from 'react';
 
 import { BrowserFields } from '../../../containers/source';
 
@@ -32,30 +32,42 @@ interface ProviderItemBadgeProps {
   val: string | number;
 }
 
-interface OwnState {
-  isPopoverOpen: boolean;
-}
+export const ProviderItemBadge = React.memo<ProviderItemBadgeProps>(
+  ({
+    andProviderId,
+    browserFields,
+    deleteProvider,
+    field,
+    kqlQuery,
+    isEnabled,
+    isExcluded,
+    onDataProviderEdited,
+    operator,
+    providerId,
+    timelineId,
+    toggleEnabledProvider,
+    toggleExcludedProvider,
+    val,
+  }) => {
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+    function togglePopover() {
+      setIsPopoverOpen(!isPopoverOpen);
+    }
 
-export class ProviderItemBadge extends PureComponent<ProviderItemBadgeProps, OwnState> {
-  public readonly state = {
-    isPopoverOpen: false,
-  };
+    function closePopover() {
+      setIsPopoverOpen(false);
+    }
 
-  public render() {
-    const {
-      andProviderId,
-      browserFields,
-      deleteProvider,
-      field,
-      kqlQuery,
-      isEnabled,
-      isExcluded,
-      onDataProviderEdited,
-      operator,
-      providerId,
-      timelineId,
-      val,
-    } = this.props;
+    function onToggleEnabledProvider() {
+      toggleEnabledProvider();
+      closePopover();
+    }
+
+    function onToggleExcludedProvider() {
+      toggleExcludedProvider();
+      closePopover();
+    }
 
     return (
       <TimelineContext.Consumer>
@@ -71,51 +83,31 @@ export class ProviderItemBadge extends PureComponent<ProviderItemBadgeProps, Own
                 isEnabled={isEnabled}
                 isExcluded={isExcluded}
                 providerId={providerId}
-                togglePopover={this.togglePopover}
+                togglePopover={togglePopover}
                 val={val}
                 operator={operator}
               />
             }
-            closePopover={this.closePopover}
+            closePopover={closePopover}
             deleteProvider={deleteProvider}
             field={field}
             kqlQuery={kqlQuery}
             isEnabled={isEnabled}
             isExcluded={isExcluded}
             isLoading={isLoading}
-            isOpen={this.state.isPopoverOpen}
+            isOpen={isPopoverOpen}
             onDataProviderEdited={onDataProviderEdited}
             operator={operator}
             providerId={providerId}
             timelineId={timelineId}
-            toggleEnabledProvider={this.toggleEnabledProvider}
-            toggleExcludedProvider={this.toggleExcludedProvider}
+            toggleEnabledProvider={onToggleEnabledProvider}
+            toggleExcludedProvider={onToggleExcludedProvider}
             value={val}
           />
         )}
       </TimelineContext.Consumer>
     );
   }
+);
 
-  private togglePopover = () => {
-    this.setState(prevState => ({
-      isPopoverOpen: !prevState.isPopoverOpen,
-    }));
-  };
-
-  private closePopover = () => {
-    this.setState({
-      isPopoverOpen: false,
-    });
-  };
-
-  private toggleEnabledProvider = () => {
-    this.props.toggleEnabledProvider();
-    this.closePopover();
-  };
-
-  private toggleExcludedProvider = () => {
-    this.props.toggleExcludedProvider();
-    this.closePopover();
-  };
-}
+ProviderItemBadge.displayName = 'ProviderItemBadge';
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/footer/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/footer/index.test.tsx
index 79f85103077b70..6e8a0e8cfb17fc 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/footer/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/footer/index.test.tsx
@@ -11,7 +11,7 @@ import * as React from 'react';
 
 import { TestProviders } from '../../../mock/test_providers';
 
-import { Footer } from './index';
+import { Footer, PagingControl } from './index';
 import { mockData } from './mock';
 
 describe('Footer Timeline Component', () => {
@@ -93,38 +93,36 @@ describe('Footer Timeline Component', () => {
     });
 
     test('it renders the Loading... in the more load button when fetching new data', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <Footer
-            serverSideEventCount={mockData.Events.totalCount}
-            hasNextPage={getOr(false, 'hasNextPage', mockData.Events.pageInfo)!}
-            height={100}
-            isLive={false}
-            isLoading={true}
-            itemsCount={mockData.Events.edges.length}
-            itemsPerPage={2}
-            itemsPerPageOptions={[1, 5, 10, 20]}
-            onChangeItemsPerPage={onChangeItemsPerPage}
-            onLoadMore={loadMore}
-            nextCursor={getOr(null, 'endCursor.value', mockData.Events.pageInfo)!}
-            tieBreaker={getOr(null, 'endCursor.tiebreaker', mockData.Events.pageInfo)}
-            getUpdatedAt={getUpdatedAt}
-            compact={compact}
-          />
-        </TestProviders>
+      const wrapper = shallow(
+        <PagingControl
+          hasNextPage={getOr(false, 'hasNextPage', mockData.Events.pageInfo)!}
+          loadMore={loadMore}
+          isLoading={true}
+        />
       );
-      wrapper
-        .find(Footer)
-        .instance()
-        .setState({ paginationLoading: true });
-      wrapper.update();
+
+      const loadButton = wrapper
+        .find('[data-test-subj="TimelineMoreButton"]')
+        .dive()
+        .text();
       expect(wrapper.find('[data-test-subj="LoadingPanelTimeline"]').exists()).toBeFalsy();
-      expect(
-        wrapper
-          .find('[data-test-subj="TimelineMoreButton"]')
-          .first()
-          .text()
-      ).toContain('Loading...');
+      expect(loadButton).toContain('Loading...');
+    });
+
+    test('it renders the Load More in the more load button when fetching new data', () => {
+      const wrapper = shallow(
+        <PagingControl
+          hasNextPage={getOr(false, 'hasNextPage', mockData.Events.pageInfo)!}
+          loadMore={loadMore}
+          isLoading={false}
+        />
+      );
+
+      const loadButton = wrapper
+        .find('[data-test-subj="TimelineMoreButton"]')
+        .dive()
+        .text();
+      expect(loadButton).toContain('Load More');
     });
 
     test('it does NOT render the loadMore button because there is nothing else to fetch', () => {
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/footer/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/footer/index.tsx
index 104c8c9c03ddfd..c1772d9e555771 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/footer/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/footer/index.tsx
@@ -18,7 +18,7 @@ import {
   EuiToolTip,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-import * as React from 'react';
+import React, { useEffect, useState } from 'react';
 import { pure } from 'recompose';
 import styled from 'styled-components';
 
@@ -73,27 +73,21 @@ ServerSideEventCount.displayName = 'ServerSideEventCount';
 export const footerHeight = 40; // px
 
 interface FooterProps {
-  itemsCount: number;
+  compact: boolean;
+  getUpdatedAt: () => number;
+  hasNextPage: boolean;
+  height: number;
   isEventViewer?: boolean;
   isLive: boolean;
   isLoading: boolean;
+  itemsCount: number;
   itemsPerPage: number;
   itemsPerPageOptions: number[];
-  hasNextPage: boolean;
-  height: number;
   nextCursor: string;
   onChangeItemsPerPage: OnChangeItemsPerPage;
   onLoadMore: OnLoadMore;
   serverSideEventCount: number;
   tieBreaker: string;
-  getUpdatedAt: () => number;
-  compact: boolean;
-}
-
-interface FooterState {
-  isPopoverOpen: boolean;
-  paginationLoading: boolean;
-  updatedAt: number | null;
 }
 
 /** Displays the server-side count of events */
@@ -144,7 +138,7 @@ export const EventsCount = pure<{
 
 EventsCount.displayName = 'EventsCount';
 
-export const PagingControl = pure<{
+export const PagingControl = React.memo<{
   hasNextPage: boolean;
   isLoading: boolean;
   loadMore: () => void;
@@ -166,81 +160,49 @@ export const PagingControl = pure<{
 PagingControl.displayName = 'PagingControl';
 
 /** Renders a loading indicator and paging controls */
-export class Footer extends React.Component<FooterProps, FooterState> {
-  public readonly state = {
-    isPopoverOpen: false,
-    paginationLoading: false,
-    updatedAt: null,
-  };
-
-  public shouldComponentUpdate(
-    {
-      compact,
-      hasNextPage,
-      height,
-      isEventViewer,
-      isLive,
-      isLoading,
-      itemsCount,
-      itemsPerPage,
-      itemsPerPageOptions,
-      serverSideEventCount,
-    }: FooterProps,
-    { isPopoverOpen, paginationLoading, updatedAt }: FooterState
-  ) {
-    return (
-      compact !== this.props.compact ||
-      hasNextPage !== this.props.hasNextPage ||
-      height !== this.props.height ||
-      isEventViewer !== this.props.isEventViewer ||
-      isLive !== this.props.isLive ||
-      isLoading !== this.props.isLoading ||
-      isPopoverOpen !== this.state.isPopoverOpen ||
-      itemsCount !== this.props.itemsCount ||
-      itemsPerPage !== this.props.itemsPerPage ||
-      itemsPerPageOptions !== this.props.itemsPerPageOptions ||
-      paginationLoading !== this.state.paginationLoading ||
-      serverSideEventCount !== this.props.serverSideEventCount ||
-      updatedAt !== this.state.updatedAt
-    );
-  }
-
-  public componentDidUpdate(prevProps: FooterProps) {
-    const { paginationLoading, updatedAt } = this.state;
-    const { isLoading, getUpdatedAt } = this.props;
-    if (paginationLoading && prevProps.isLoading && !isLoading) {
-      this.setState(prevState => ({
-        ...prevState,
-        paginationLoading: false,
-        updatedAt: getUpdatedAt(),
-      }));
-    }
+export const Footer = React.memo<FooterProps>(
+  ({
+    compact,
+    getUpdatedAt,
+    hasNextPage,
+    height,
+    isEventViewer,
+    isLive,
+    isLoading,
+    itemsCount,
+    itemsPerPage,
+    itemsPerPageOptions,
+    nextCursor,
+    onChangeItemsPerPage,
+    onLoadMore,
+    serverSideEventCount,
+    tieBreaker,
+  }) => {
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    const [paginationLoading, setPaginationLoading] = useState(false);
+    const [updatedAt, setUpdatedAt] = useState<number | null>(null);
+
+    const loadMore = () => {
+      setPaginationLoading(true);
+      onLoadMore(nextCursor, tieBreaker);
+    };
+
+    const onButtonClick = () => setIsPopoverOpen(!isPopoverOpen);
+
+    const closePopover = () => setIsPopoverOpen(false);
+
+    useEffect(() => {
+      if (paginationLoading && !isLoading) {
+        setPaginationLoading(false);
+        setUpdatedAt(getUpdatedAt());
+      }
 
-    if (updatedAt === null || (prevProps.isLoading && !isLoading)) {
-      this.setState(prevState => ({
-        ...prevState,
-        updatedAt: getUpdatedAt(),
-      }));
-    }
-  }
+      if (updatedAt === null || !isLoading) {
+        setUpdatedAt(getUpdatedAt());
+      }
+    }, [isLoading]);
 
-  public render() {
-    const {
-      height,
-      isEventViewer,
-      isLive,
-      isLoading,
-      itemsCount,
-      itemsPerPage,
-      itemsPerPageOptions,
-      onChangeItemsPerPage,
-      serverSideEventCount,
-      hasNextPage,
-      getUpdatedAt,
-      compact,
-    } = this.props;
-
-    if (isLoading && !this.state.paginationLoading) {
+    if (isLoading && !paginationLoading) {
       return (
         <LoadingPanelContainer>
           <LoadingPanel
@@ -261,20 +223,21 @@ export class Footer extends React.Component<FooterProps, FooterState> {
           key={item}
           icon={itemsPerPage === item ? 'check' : 'empty'}
           onClick={() => {
-            this.closePopover();
+            closePopover();
             onChangeItemsPerPage(item);
           }}
         >
           {`${item} ${i18n.ROWS}`}
         </EuiContextMenuItem>
       ));
+
     return (
       <>
         <FooterContainer
           data-test-subj="timeline-footer"
           direction="column"
-          height={height}
           gutterSize="none"
+          height={height}
           justifyContent="spaceAround"
         >
           <FooterFlexGroup
@@ -292,11 +255,11 @@ export class Footer extends React.Component<FooterProps, FooterState> {
                 gutterSize="none"
               >
                 <EventsCount
-                  closePopover={this.closePopover}
-                  isOpen={this.state.isPopoverOpen}
+                  closePopover={closePopover}
+                  isOpen={isPopoverOpen}
                   items={rowItems}
                   itemsCount={itemsCount}
-                  onClick={this.onButtonClick}
+                  onClick={onButtonClick}
                   serverSideEventCount={serverSideEventCount}
                 />
               </EuiFlexGroup>
@@ -327,44 +290,35 @@ export class Footer extends React.Component<FooterProps, FooterState> {
                   data-test-subj="paging-control"
                   hasNextPage={hasNextPage}
                   isLoading={isLoading}
-                  loadMore={this.loadMore}
+                  loadMore={loadMore}
                 />
               )}
             </EuiFlexItem>
 
             <EuiFlexItem data-test-subj="last-updated-container" grow={false}>
               <FixedWidthLastUpdated data-test-subj="fixed-width-last-updated" compact={compact}>
-                <LastUpdatedAt
-                  updatedAt={this.state.updatedAt || getUpdatedAt()}
-                  compact={compact}
-                />
+                <LastUpdatedAt updatedAt={updatedAt || getUpdatedAt()} compact={compact} />
               </FixedWidthLastUpdated>
             </EuiFlexItem>
           </FooterFlexGroup>
         </FooterContainer>
       </>
     );
+  },
+  (prevProps, nextProps) => {
+    return (
+      prevProps.compact === nextProps.compact &&
+      prevProps.hasNextPage === nextProps.hasNextPage &&
+      prevProps.height === nextProps.height &&
+      prevProps.isEventViewer === nextProps.isEventViewer &&
+      prevProps.isLive === nextProps.isLive &&
+      prevProps.isLoading === nextProps.isLoading &&
+      prevProps.itemsCount === nextProps.itemsCount &&
+      prevProps.itemsPerPage === nextProps.itemsPerPage &&
+      prevProps.itemsPerPageOptions === nextProps.itemsPerPageOptions &&
+      prevProps.serverSideEventCount === nextProps.serverSideEventCount
+    );
   }
+);
 
-  private loadMore = () => {
-    this.setState(prevState => ({
-      ...prevState,
-      paginationLoading: true,
-    }));
-    this.props.onLoadMore(this.props.nextCursor, this.props.tieBreaker);
-  };
-
-  private onButtonClick = () => {
-    this.setState(prevState => ({
-      ...prevState,
-      isPopoverOpen: !prevState.isPopoverOpen,
-    }));
-  };
-
-  private closePopover = () => {
-    this.setState(prevState => ({
-      ...prevState,
-      isPopoverOpen: false,
-    }));
-  };
-}
+Footer.displayName = 'Footer';
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/footer/last_updated.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/footer/last_updated.tsx
index 0953341fe8a905..a17e5a6da6331c 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/footer/last_updated.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/footer/last_updated.tsx
@@ -6,7 +6,7 @@
 
 import { EuiIcon, EuiText, EuiToolTip } from '@elastic/eui';
 import { FormattedRelative } from '@kbn/i18n/react';
-import * as React from 'react';
+import React, { useEffect, useState } from 'react';
 import { pure } from 'recompose';
 
 import * as i18n from './translations';
@@ -16,10 +16,6 @@ interface LastUpdatedAtProps {
   updatedAt: number;
 }
 
-interface LastUpdatedAtState {
-  date: number;
-}
-
 export const Updated = pure<{ date: number; prefix: string; updatedAt: number }>(
   ({ date, prefix, updatedAt }) => (
     <>
@@ -37,46 +33,37 @@ export const Updated = pure<{ date: number; prefix: string; updatedAt: number }>
 
 Updated.displayName = 'Updated';
 
-export class LastUpdatedAt extends React.PureComponent<LastUpdatedAtProps, LastUpdatedAtState> {
-  public readonly state = {
-    date: Date.now(),
-  };
-  private timerID?: NodeJS.Timeout;
+const prefix = ` ${i18n.UPDATED} `;
 
-  public componentDidMount() {
-    this.timerID = setInterval(() => this.tick(), 10000);
-  }
+export const LastUpdatedAt = React.memo<LastUpdatedAtProps>(({ compact = false, updatedAt }) => {
+  const [date, setDate] = useState(Date.now());
 
-  public componentWillUnmount() {
-    clearInterval(this.timerID!);
+  function tick() {
+    setDate(Date.now());
   }
 
-  public tick() {
-    this.setState({
-      date: Date.now(),
-    });
-  }
+  useEffect(() => {
+    const timerID = setInterval(() => tick(), 10000);
+    return () => {
+      clearInterval(timerID);
+    };
+  }, []);
 
-  public render() {
-    const { compact = false } = this.props;
-    const prefix = ` ${i18n.UPDATED} `;
+  return (
+    <EuiToolTip
+      data-test-subj="timeline-stream-tool-tip"
+      content={
+        <>
+          <Updated date={date} prefix={prefix} updatedAt={updatedAt} />
+        </>
+      }
+    >
+      <EuiText size="s">
+        <EuiIcon data-test-subj="last-updated-at-clock-icon" type="clock" />
+        {!compact ? <Updated date={date} prefix={prefix} updatedAt={updatedAt} /> : null}
+      </EuiText>
+    </EuiToolTip>
+  );
+});
 
-    return (
-      <EuiToolTip
-        data-test-subj="timeline-stream-tool-tip"
-        content={
-          <>
-            <Updated date={this.state.date} prefix={prefix} updatedAt={this.props.updatedAt} />
-          </>
-        }
-      >
-        <EuiText size="s">
-          <EuiIcon data-test-subj="last-updated-at-clock-icon" type="clock" />
-          {!compact ? (
-            <Updated date={this.state.date} prefix={prefix} updatedAt={this.props.updatedAt} />
-          ) : null}
-        </EuiText>
-      </EuiToolTip>
-    );
-  }
-}
+LastUpdatedAt.displayName = 'LastUpdatedAt';
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/index.tsx
index 153ca2abd24d10..ab92f22a4c89fb 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/index.tsx
@@ -5,7 +5,7 @@
  */
 
 import { isEqual } from 'lodash/fp';
-import * as React from 'react';
+import React, { useEffect } from 'react';
 import { connect } from 'react-redux';
 import { ActionCreator } from 'typescript-fsa';
 
@@ -131,70 +131,113 @@ interface DispatchProps {
 
 type Props = OwnProps & StateReduxProps & DispatchProps;
 
-class StatefulTimelineComponent extends React.Component<Props> {
-  public shouldComponentUpdate = ({
-    id,
-    flyoutHeaderHeight,
-    flyoutHeight,
-    activePage,
+const StatefulTimelineComponent = React.memo<Props>(
+  ({
     columns,
+    createTimeline,
     dataProviders,
     end,
+    flyoutHeaderHeight,
+    flyoutHeight,
+    id,
     isLive,
     itemsPerPage,
     itemsPerPageOptions,
     kqlMode,
     kqlQueryExpression,
-    pageCount,
-    sort,
-    start,
+    onDataProviderEdited,
+    removeColumn,
+    removeProvider,
     show,
     showCallOutUnauthorizedMsg,
-  }: Props) =>
-    id !== this.props.id ||
-    flyoutHeaderHeight !== this.props.flyoutHeaderHeight ||
-    flyoutHeight !== this.props.flyoutHeight ||
-    activePage !== this.props.activePage ||
-    !isEqual(columns, this.props.columns) ||
-    !isEqual(dataProviders, this.props.dataProviders) ||
-    end !== this.props.end ||
-    isLive !== this.props.isLive ||
-    itemsPerPage !== this.props.itemsPerPage ||
-    !isEqual(itemsPerPageOptions, this.props.itemsPerPageOptions) ||
-    kqlMode !== this.props.kqlMode ||
-    kqlQueryExpression !== this.props.kqlQueryExpression ||
-    pageCount !== this.props.pageCount ||
-    !isEqual(sort, this.props.sort) ||
-    start !== this.props.start ||
-    show !== this.props.show ||
-    showCallOutUnauthorizedMsg !== this.props.showCallOutUnauthorizedMsg;
+    sort,
+    start,
+    updateDataProviderEnabled,
+    updateDataProviderExcluded,
+    updateDataProviderKqlQuery,
+    updateHighlightedDropAndProviderId,
+    updateItemsPerPage,
+    upsertColumn,
+  }) => {
+    const onDataProviderRemoved: OnDataProviderRemoved = (
+      providerId: string,
+      andProviderId?: string
+    ) => removeProvider!({ id, providerId, andProviderId });
 
-  public componentDidMount() {
-    const { createTimeline, id } = this.props;
+    const onToggleDataProviderEnabled: OnToggleDataProviderEnabled = ({
+      providerId,
+      enabled,
+      andProviderId,
+    }) =>
+      updateDataProviderEnabled!({
+        id,
+        enabled,
+        providerId,
+        andProviderId,
+      });
 
-    if (createTimeline != null) {
-      createTimeline({ id, columns: defaultHeaders, show: false });
-    }
-  }
+    const onToggleDataProviderExcluded: OnToggleDataProviderExcluded = ({
+      providerId,
+      excluded,
+      andProviderId,
+    }) =>
+      updateDataProviderExcluded!({
+        id,
+        excluded,
+        providerId,
+        andProviderId,
+      });
 
-  public render() {
-    const {
-      columns,
-      dataProviders,
-      end,
-      flyoutHeight,
-      flyoutHeaderHeight,
-      id,
-      isLive,
-      itemsPerPage,
-      itemsPerPageOptions,
-      kqlMode,
-      kqlQueryExpression,
-      show,
-      showCallOutUnauthorizedMsg,
-      start,
-      sort,
-    } = this.props;
+    const onDataProviderEditedLocal: OnDataProviderEdited = ({
+      andProviderId,
+      excluded,
+      field,
+      operator,
+      providerId,
+      value,
+    }) =>
+      onDataProviderEdited!({
+        andProviderId,
+        excluded,
+        field,
+        id,
+        operator,
+        providerId,
+        value,
+      });
+    const onChangeDataProviderKqlQuery: OnChangeDataProviderKqlQuery = ({ providerId, kqlQuery }) =>
+      updateDataProviderKqlQuery!({ id, kqlQuery, providerId });
+
+    const onChangeItemsPerPage: OnChangeItemsPerPage = itemsChangedPerPage =>
+      updateItemsPerPage!({ id, itemsPerPage: itemsChangedPerPage });
+
+    const onChangeDroppableAndProvider: OnChangeDroppableAndProvider = providerId =>
+      updateHighlightedDropAndProviderId!({ id, providerId });
+
+    const toggleColumn = (column: ColumnHeader) => {
+      const exists = columns.findIndex(c => c.id === column.id) !== -1;
+
+      if (!exists && upsertColumn != null) {
+        upsertColumn({
+          column,
+          id,
+          index: 1,
+        });
+      }
+
+      if (exists && removeColumn != null) {
+        removeColumn({
+          columnId: column.id,
+          id,
+        });
+      }
+    };
+
+    useEffect(() => {
+      if (createTimeline != null) {
+        createTimeline({ id, columns: defaultHeaders, show: false });
+      }
+    }, []);
 
     return (
       <WithSource sourceId="default">
@@ -202,111 +245,58 @@ class StatefulTimelineComponent extends React.Component<Props> {
           <Timeline
             browserFields={browserFields}
             columns={columns}
-            id={id}
             dataProviders={dataProviders!}
             end={end}
             flyoutHeaderHeight={flyoutHeaderHeight}
             flyoutHeight={flyoutHeight}
+            id={id}
             indexPattern={indexPattern}
             isLive={isLive}
             itemsPerPage={itemsPerPage!}
             itemsPerPageOptions={itemsPerPageOptions!}
             kqlMode={kqlMode}
             kqlQueryExpression={kqlQueryExpression}
-            onChangeDataProviderKqlQuery={this.onChangeDataProviderKqlQuery}
-            onChangeDroppableAndProvider={this.onChangeDroppableAndProvider}
-            onChangeItemsPerPage={this.onChangeItemsPerPage}
-            onDataProviderEdited={this.onDataProviderEdited}
-            onDataProviderRemoved={this.onDataProviderRemoved}
-            onToggleDataProviderEnabled={this.onToggleDataProviderEnabled}
-            onToggleDataProviderExcluded={this.onToggleDataProviderExcluded}
+            onChangeDataProviderKqlQuery={onChangeDataProviderKqlQuery}
+            onChangeDroppableAndProvider={onChangeDroppableAndProvider}
+            onChangeItemsPerPage={onChangeItemsPerPage}
+            onDataProviderEdited={onDataProviderEditedLocal}
+            onDataProviderRemoved={onDataProviderRemoved}
+            onToggleDataProviderEnabled={onToggleDataProviderEnabled}
+            onToggleDataProviderExcluded={onToggleDataProviderExcluded}
             show={show!}
             showCallOutUnauthorizedMsg={showCallOutUnauthorizedMsg}
-            start={start}
             sort={sort!}
-            toggleColumn={this.toggleColumn}
+            start={start}
+            toggleColumn={toggleColumn}
           />
         )}
       </WithSource>
     );
+  },
+  (prevProps, nextProps) => {
+    return (
+      prevProps.activePage === nextProps.activePage &&
+      prevProps.end === nextProps.end &&
+      prevProps.flyoutHeaderHeight === nextProps.flyoutHeaderHeight &&
+      prevProps.flyoutHeight === nextProps.flyoutHeight &&
+      prevProps.id === nextProps.id &&
+      prevProps.isLive === nextProps.isLive &&
+      prevProps.itemsPerPage === nextProps.itemsPerPage &&
+      prevProps.kqlMode === nextProps.kqlMode &&
+      prevProps.kqlQueryExpression === nextProps.kqlQueryExpression &&
+      prevProps.pageCount === nextProps.pageCount &&
+      prevProps.show === nextProps.show &&
+      prevProps.showCallOutUnauthorizedMsg === nextProps.showCallOutUnauthorizedMsg &&
+      prevProps.start === nextProps.start &&
+      isEqual(prevProps.columns, nextProps.columns) &&
+      isEqual(prevProps.dataProviders, nextProps.dataProviders) &&
+      isEqual(prevProps.itemsPerPageOptions, nextProps.itemsPerPageOptions) &&
+      isEqual(prevProps.sort, nextProps.sort)
+    );
   }
+);
 
-  private onDataProviderRemoved: OnDataProviderRemoved = (
-    providerId: string,
-    andProviderId?: string
-  ) => this.props.removeProvider!({ id: this.props.id, providerId, andProviderId });
-
-  private onToggleDataProviderEnabled: OnToggleDataProviderEnabled = ({
-    providerId,
-    enabled,
-    andProviderId,
-  }) =>
-    this.props.updateDataProviderEnabled!({
-      id: this.props.id,
-      enabled,
-      providerId,
-      andProviderId,
-    });
-
-  private onToggleDataProviderExcluded: OnToggleDataProviderExcluded = ({
-    providerId,
-    excluded,
-    andProviderId,
-  }) =>
-    this.props.updateDataProviderExcluded!({
-      id: this.props.id,
-      excluded,
-      providerId,
-      andProviderId,
-    });
-
-  private onDataProviderEdited: OnDataProviderEdited = ({
-    andProviderId,
-    excluded,
-    field,
-    operator,
-    providerId,
-    value,
-  }) =>
-    this.props.onDataProviderEdited!({
-      andProviderId,
-      excluded,
-      field,
-      id: this.props.id,
-      operator,
-      providerId,
-      value,
-    });
-
-  private onChangeDataProviderKqlQuery: OnChangeDataProviderKqlQuery = ({ providerId, kqlQuery }) =>
-    this.props.updateDataProviderKqlQuery!({ id: this.props.id, kqlQuery, providerId });
-
-  private onChangeItemsPerPage: OnChangeItemsPerPage = itemsChangedPerPage =>
-    this.props.updateItemsPerPage!({ id: this.props.id, itemsPerPage: itemsChangedPerPage });
-
-  private onChangeDroppableAndProvider: OnChangeDroppableAndProvider = providerId =>
-    this.props.updateHighlightedDropAndProviderId!({ id: this.props.id, providerId });
-
-  private toggleColumn = (column: ColumnHeader) => {
-    const { columns, removeColumn, id, upsertColumn } = this.props;
-    const exists = columns.findIndex(c => c.id === column.id) !== -1;
-
-    if (!exists && upsertColumn != null) {
-      upsertColumn({
-        column,
-        id,
-        index: 1,
-      });
-    }
-
-    if (exists && removeColumn != null) {
-      removeColumn({
-        columnId: column.id,
-        id,
-      });
-    }
-  };
-}
+StatefulTimelineComponent.displayName = 'StatefulTimelineComponent';
 
 const makeMapStateToProps = () => {
   const getShowCallOutUnauthorizedMsg = timelineSelectors.getShowCallOutUnauthorizedMsg();
@@ -322,8 +312,8 @@ const makeMapStateToProps = () => {
       itemsPerPage,
       itemsPerPageOptions,
       kqlMode,
-      sort,
       show,
+      sort,
     } = timeline;
     const kqlQueryExpression = getKqlQueryTimeline(state, id);
 
@@ -337,10 +327,10 @@ const makeMapStateToProps = () => {
       itemsPerPageOptions,
       kqlMode,
       kqlQueryExpression,
+      show,
+      showCallOutUnauthorizedMsg: getShowCallOutUnauthorizedMsg(state),
       sort,
       start: input.timerange.from,
-      showCallOutUnauthorizedMsg: getShowCallOutUnauthorizedMsg(state),
-      show,
     };
   };
   return mapStateToProps;
@@ -352,6 +342,8 @@ export const StatefulTimeline = connect(
     addProvider: timelineActions.addProvider,
     createTimeline: timelineActions.createTimeline,
     onDataProviderEdited: timelineActions.dataProviderEdited,
+    removeColumn: timelineActions.removeColumn,
+    removeProvider: timelineActions.removeProvider,
     updateColumns: timelineActions.updateColumns,
     updateDataProviderEnabled: timelineActions.updateDataProviderEnabled,
     updateDataProviderExcluded: timelineActions.updateDataProviderExcluded,
@@ -360,8 +352,6 @@ export const StatefulTimeline = connect(
     updateItemsPerPage: timelineActions.updateItemsPerPage,
     updateItemsPerPageOptions: timelineActions.updateItemsPerPageOptions,
     updateSort: timelineActions.updateSort,
-    removeProvider: timelineActions.removeProvider,
-    removeColumn: timelineActions.removeColumn,
     upsertColumn: timelineActions.upsertColumn,
   }
 )(StatefulTimelineComponent);
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/properties/helpers.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/properties/helpers.tsx
index 44fdcbd5e97888..c60410bbd28639 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/properties/helpers.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/properties/helpers.tsx
@@ -21,22 +21,13 @@ import {
 import * as React from 'react';
 import { pure } from 'recompose';
 import uuid from 'uuid';
-import styled from 'styled-components';
 
 import { Note } from '../../../lib/note';
 import { Notes } from '../../notes';
 import { AssociateNote, UpdateNote } from '../../notes/helpers';
-
-import {
-  ButtonContainer,
-  DescriptionContainer,
-  LabelText,
-  NameField,
-  SmallNotesButtonContainer,
-  StyledStar,
-} from './styles';
-import * as i18n from './translations';
 import { NOTES_PANEL_WIDTH } from './notes_size';
+import { ButtonContainer, DescriptionContainer, LabelText, NameField, StyledStar } from './styles';
+import * as i18n from './translations';
 
 export const historyToolTip = 'The chronological history of actions related to this timeline';
 export const streamLiveToolTip = 'Update the Timeline as new data arrives';
@@ -49,7 +40,6 @@ export const newTimelineToolTip = 'Create a new timeline';
 const NotesCountBadge = (props: EuiBadgeProps) => (
   <EuiBadge {...props} style={{ marginLeft: '5px' }} />
 );
-
 NotesCountBadge.displayName = 'NotesCountBadge';
 
 type CreateTimeline = ({ id, show }: { id: string; show?: boolean }) => void;
@@ -78,7 +68,6 @@ export const StarIcon = pure<{
     )}
   </div>
 ));
-
 StarIcon.displayName = 'StarIcon';
 
 export const Description = pure<{
@@ -100,7 +89,6 @@ export const Description = pure<{
     </DescriptionContainer>
   </EuiToolTip>
 ));
-
 Description.displayName = 'Description';
 
 export const Name = pure<{ timelineId: string; title: string; updateTitle: UpdateTitle }>(
@@ -117,7 +105,6 @@ export const Name = pure<{ timelineId: string; title: string; updateTitle: Updat
     </EuiToolTip>
   )
 );
-
 Name.displayName = 'Name';
 
 export const NewTimeline = pure<{
@@ -138,7 +125,6 @@ export const NewTimeline = pure<{
     {i18n.NEW_TIMELINE}
   </EuiButtonEmpty>
 ));
-
 NewTimeline.displayName = 'NewTimeline';
 
 interface NotesButtonProps {
@@ -156,25 +142,6 @@ interface NotesButtonProps {
 
 const getNewNoteId = (): string => uuid.v4();
 
-const NotesButtonIcon = styled(EuiButtonIcon)`
-  svg {
-    height: 19px;
-    width: 19px;
-  }
-`;
-
-const NotesIcon = pure<{ count: number }>(({ count }) => (
-  <NotesButtonIcon
-    aria-label={i18n.NOTES}
-    color={count > 0 ? 'primary' : 'subdued'}
-    data-test-subj="timeline-notes-icon"
-    size="m"
-    iconType="editorComment"
-  />
-));
-
-NotesIcon.displayName = 'NotesIcon';
-
 const LargeNotesButton = pure<{ noteIds: string[]; text?: string; toggleShowNotes: () => void }>(
   ({ noteIds, text, toggleShowNotes }) => (
     <EuiButton
@@ -198,21 +165,18 @@ const LargeNotesButton = pure<{ noteIds: string[]; text?: string; toggleShowNote
     </EuiButton>
   )
 );
-
 LargeNotesButton.displayName = 'LargeNotesButton';
 
 const SmallNotesButton = pure<{ noteIds: string[]; toggleShowNotes: () => void }>(
   ({ noteIds, toggleShowNotes }) => (
-    <SmallNotesButtonContainer
+    <EuiButtonIcon
+      aria-label={i18n.NOTES}
       data-test-subj="timeline-notes-button-small"
+      iconType="editorComment"
       onClick={() => toggleShowNotes()}
-      role="button"
-    >
-      <NotesIcon count={noteIds.length} />
-    </SmallNotesButtonContainer>
+    />
   )
 );
-
 SmallNotesButton.displayName = 'SmallNotesButton';
 
 /**
@@ -254,7 +218,6 @@ const NotesButtonComponent = pure<NotesButtonProps>(
     </ButtonContainer>
   )
 );
-
 NotesButtonComponent.displayName = 'NotesButtonComponent';
 
 export const NotesButton = pure<NotesButtonProps>(
@@ -298,5 +261,4 @@ export const NotesButton = pure<NotesButtonProps>(
       </EuiToolTip>
     )
 );
-
 NotesButton.displayName = 'NotesButton';
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/properties/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/properties/index.tsx
index b5daad42f7c3a3..b983963c34f55e 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/properties/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/properties/index.tsx
@@ -5,7 +5,7 @@
  */
 
 import { EuiAvatar, EuiFlexItem, EuiIcon } from '@elastic/eui';
-import * as React from 'react';
+import React, { useState } from 'react';
 import styled, { injectGlobal } from 'styled-components';
 
 import { Note } from '../../../lib/note';
@@ -62,28 +62,23 @@ HiddenFlexItem.displayName = 'HiddenFlexItem';
 interface Props {
   associateNote: AssociateNote;
   createTimeline: CreateTimeline;
+  description: string;
+  getNotesByIds: (noteIds: string[]) => Note[];
   isDataInTimeline: boolean;
   isDatepickerLocked: boolean;
   isFavorite: boolean;
-  title: string;
-  description: string;
-  getNotesByIds: (noteIds: string[]) => Note[];
   noteIds: string[];
   timelineId: string;
+  title: string;
   toggleLock: ToggleLock;
   updateDescription: UpdateDescription;
   updateIsFavorite: UpdateIsFavorite;
-  updateTitle: UpdateTitle;
   updateNote: UpdateNote;
+  updateTitle: UpdateTitle;
   usersViewing: string[];
   width: number;
 }
 
-interface State {
-  showActions: boolean;
-  showNotes: boolean;
-}
-
 const rightGutter = 60; // px
 export const datePickerThreshold = 600;
 export const showNotesThreshold = 810;
@@ -96,51 +91,40 @@ const noteWidth = 130;
 const settingsWidth = 50;
 
 /** Displays the properties of a timeline, i.e. name, description, notes, etc */
-export class Properties extends React.PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props);
+export const Properties = React.memo<Props>(
+  ({
+    associateNote,
+    createTimeline,
+    description,
+    getNotesByIds,
+    isDataInTimeline,
+    isDatepickerLocked,
+    isFavorite,
+    noteIds,
+    timelineId,
+    title,
+    toggleLock,
+    updateDescription,
+    updateIsFavorite,
+    updateNote,
+    updateTitle,
+    usersViewing,
+    width,
+  }) => {
+    const [showActions, setShowActions] = useState(false);
+    const [showNotes, setShowNotes] = useState(false);
+
+    const onButtonClick = () => {
+      setShowActions(!showActions);
+    };
 
-    this.state = {
-      showActions: false,
-      showNotes: false,
+    const onToggleShowNotes = () => {
+      setShowNotes(!showNotes);
     };
-  }
 
-  public onButtonClick = () => {
-    this.setState(prevState => ({
-      showActions: !prevState.showActions,
-    }));
-  };
-
-  public onToggleShowNotes = () => {
-    this.setState(state => ({ showNotes: !state.showNotes }));
-  };
-
-  public onClosePopover = () => {
-    this.setState({
-      showActions: false,
-    });
-  };
-
-  public render() {
-    const {
-      associateNote,
-      createTimeline,
-      description,
-      getNotesByIds,
-      isFavorite,
-      isDataInTimeline,
-      isDatepickerLocked,
-      title,
-      noteIds,
-      timelineId,
-      updateDescription,
-      updateIsFavorite,
-      updateTitle,
-      updateNote,
-      usersViewing,
-      width,
-    } = this.props;
+    const onClosePopover = () => {
+      setShowActions(false);
+    };
 
     const datePickerWidth =
       width -
@@ -157,52 +141,52 @@ export class Properties extends React.PureComponent<Props, State> {
     return (
       <TimelineProperties style={{ width }} data-test-subj="timeline-properties">
         <PropertiesLeft
+          associateNote={associateNote}
+          datePickerWidth={
+            datePickerWidth > datePickerThreshold ? datePickerThreshold : datePickerWidth
+          }
+          description={description}
+          getNotesByIds={getNotesByIds}
+          isDatepickerLocked={isDatepickerLocked}
           isFavorite={isFavorite}
-          timelineId={timelineId}
-          updateIsFavorite={updateIsFavorite}
+          noteIds={noteIds}
+          onToggleShowNotes={onToggleShowNotes}
           showDescription={width >= showDescriptionThreshold}
-          description={description}
+          showNotes={showNotes}
+          showNotesFromWidth={width >= showNotesThreshold}
+          timelineId={timelineId}
           title={title}
-          updateTitle={updateTitle}
+          toggleLock={() => {
+            toggleLock({ linkToId: 'timeline' });
+          }}
           updateDescription={updateDescription}
-          showNotes={this.state.showNotes}
-          showNotesFromWidth={width >= showNotesThreshold}
-          associateNote={associateNote}
-          getNotesByIds={getNotesByIds}
-          noteIds={noteIds}
-          onToggleShowNotes={this.onToggleShowNotes}
+          updateIsFavorite={updateIsFavorite}
           updateNote={updateNote}
-          isDatepickerLocked={isDatepickerLocked}
-          toggleLock={this.toggleLock}
-          datePickerWidth={
-            datePickerWidth > datePickerThreshold ? datePickerThreshold : datePickerWidth
-          }
+          updateTitle={updateTitle}
         />
         <PropertiesRight
-          onButtonClick={this.onButtonClick}
-          onClosePopover={this.onClosePopover}
-          showActions={this.state.showActions}
+          associateNote={associateNote}
           createTimeline={createTimeline}
-          timelineId={timelineId}
+          description={description}
+          getNotesByIds={getNotesByIds}
           isDataInTimeline={isDataInTimeline}
-          showNotesFromWidth={width < showNotesThreshold}
-          showNotes={this.state.showNotes}
+          noteIds={noteIds}
+          onButtonClick={onButtonClick}
+          onClosePopover={onClosePopover}
+          onToggleShowNotes={onToggleShowNotes}
+          showActions={showActions}
           showDescription={width < showDescriptionThreshold}
+          showNotes={showNotes}
+          showNotesFromWidth={width < showNotesThreshold}
           showUsersView={title.length > 0}
-          usersViewing={usersViewing}
-          description={description}
+          timelineId={timelineId}
           updateDescription={updateDescription}
-          associateNote={associateNote}
-          getNotesByIds={getNotesByIds}
-          noteIds={noteIds}
-          onToggleShowNotes={this.onToggleShowNotes}
           updateNote={updateNote}
+          usersViewing={usersViewing}
         />
       </TimelineProperties>
     );
   }
+);
 
-  private toggleLock = () => {
-    this.props.toggleLock({ linkToId: 'timeline' });
-  };
-}
+Properties.displayName = 'Properties';
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/properties/styles.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/properties/styles.tsx
index 81060a10b0d49d..3444875282ae75 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/properties/styles.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/properties/styles.tsx
@@ -19,7 +19,6 @@ export const TimelineProperties = styled.div`
   justify-content: space-between;
   user-select: none;
 `;
-
 TimelineProperties.displayName = 'TimelineProperties';
 
 export const DatePicker = styled(EuiFlexItem)<{ width: number }>`
@@ -29,14 +28,12 @@ export const DatePicker = styled(EuiFlexItem)<{ width: number }>`
     width: auto;
   }
 `;
-
 DatePicker.displayName = 'DatePicker';
 
 export const NameField = styled(EuiFieldText)`
   width: 150px;
   margin-right: 5px;
 `;
-
 NameField.displayName = 'NameField';
 
 export const DescriptionContainer = styled.div`
@@ -44,33 +41,22 @@ export const DescriptionContainer = styled.div`
   margin-right: 5px;
   min-width: 150px;
 `;
-
 DescriptionContainer.displayName = 'DescriptionContainer';
 
-export const SmallNotesButtonContainer = styled.div`
-  cursor: pointer;
-  width: 35px;
-`;
-
-SmallNotesButtonContainer.displayName = 'SmallNotesButtonContainer';
-
 export const ButtonContainer = styled.div<{ animate: boolean }>`
   animation: ${fadeInEffect} ${({ animate }) => (animate ? '0.3s' : '0s')};
 `;
-
 ButtonContainer.displayName = 'ButtonContainer';
 
 export const LabelText = styled.div`
   margin-left: 10px;
 `;
-
 LabelText.displayName = 'LabelText';
 
 export const StyledStar = styled(EuiIcon)`
   margin-right: 5px;
   cursor: pointer;
 `;
-
 StyledStar.displayName = 'StyledStar';
 
 export const Facet = styled.div`
@@ -88,11 +74,9 @@ export const Facet = styled.div`
   padding-right: 8px;
   user-select: none;
 `;
-
 Facet.displayName = 'Facet';
 
 export const LockIconContainer = styled(EuiFlexItem)`
   margin-right: 2px;
 `;
-
 LockIconContainer.displayName = 'LockIconContainer';
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/search_or_filter/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/search_or_filter/index.tsx
index 9213ff79ccc509..91113a545821df 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/search_or_filter/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/search_or_filter/index.tsx
@@ -45,19 +45,17 @@ interface DispatchProps {
 
 type Props = OwnProps & StateReduxProps & DispatchProps;
 
-class StatefulSearchOrFilterComponent extends React.PureComponent<Props> {
-  public render() {
-    const {
-      applyKqlFilterQuery,
-      indexPattern,
-      filterQueryDraft,
-      isFilterQueryDraftValid,
-      kqlMode,
-      timelineId,
-      setKqlFilterQueryDraft,
-      updateKqlMode,
-    } = this.props;
-
+const StatefulSearchOrFilterComponent = React.memo<Props>(
+  ({
+    applyKqlFilterQuery,
+    filterQueryDraft,
+    indexPattern,
+    isFilterQueryDraftValid,
+    kqlMode,
+    setKqlFilterQueryDraft,
+    timelineId,
+    updateKqlMode,
+  }) => {
     const applyFilterQueryFromKueryExpression = (expression: string) =>
       applyKqlFilterQuery({
         id: timelineId,
@@ -86,13 +84,14 @@ class StatefulSearchOrFilterComponent extends React.PureComponent<Props> {
         indexPattern={indexPattern}
         isFilterQueryDraftValid={isFilterQueryDraftValid}
         kqlMode={kqlMode!}
+        setKqlFilterQueryDraft={setFilterQueryDraftFromKueryExpression!}
         timelineId={timelineId}
         updateKqlMode={updateKqlMode!}
-        setKqlFilterQueryDraft={setFilterQueryDraftFromKueryExpression!}
       />
     );
   }
-}
+);
+StatefulSearchOrFilterComponent.displayName = 'StatefulSearchOrFilterComponent';
 
 const makeMapStateToProps = () => {
   const getTimeline = timelineSelectors.getTimelineByIdSelector();
@@ -101,9 +100,9 @@ const makeMapStateToProps = () => {
   const mapStateToProps = (state: State, { timelineId }: OwnProps) => {
     const timeline: TimelineModel | {} = getTimeline(state, timelineId);
     return {
-      kqlMode: getOr('filter', 'kqlMode', timeline),
       filterQueryDraft: getKqlFilterQueryDraft(state, timelineId),
       isFilterQueryDraftValid: isFilterQueryDraftValid(state, timelineId),
+      kqlMode: getOr('filter', 'kqlMode', timeline),
     };
   };
   return mapStateToProps;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/styles.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/styles.tsx
new file mode 100644
index 00000000000000..86c470ef4d3a56
--- /dev/null
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/styles.tsx
@@ -0,0 +1,325 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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 { EuiLoadingSpinner } from '@elastic/eui';
+import { rgba } from 'polished';
+import styled, { css } from 'styled-components';
+
+/**
+ * OFFSET PIXEL VALUES
+ */
+
+export const OFFSET_SCROLLBAR = 17;
+
+/**
+ * TIMELINE BODY
+ */
+
+export const TimelineBody = styled.div.attrs({
+  className: 'siemTimeline__body',
+})<{ bodyHeight: number }>`
+  ${({ bodyHeight, theme }) => css`
+    height: ${bodyHeight + 'px'};
+    overflow: auto;
+    scrollbar-width: thin;
+
+    &::-webkit-scrollbar {
+      height: ${theme.eui.euiScrollBar};
+      width: ${theme.eui.euiScrollBar};
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-clip: content-box;
+      background-color: ${rgba(theme.eui.euiColorDarkShade, 0.5)};
+      border: ${theme.eui.euiScrollBarCorner} solid transparent;
+    }
+
+    &::-webkit-scrollbar-corner,
+    &::-webkit-scrollbar-track {
+      background-color: transparent;
+    }
+  `}
+`;
+TimelineBody.displayName = 'TimelineBody';
+
+/**
+ * EVENTS TABLE
+ */
+
+export const EventsTable = styled.div.attrs({
+  className: 'siemEventsTable',
+  role: 'table',
+})``;
+EventsTable.displayName = 'EventsTable';
+
+/* EVENTS HEAD */
+
+export const EventsThead = styled.div.attrs({
+  className: 'siemEventsTable__thead',
+  role: 'rowgroup',
+})`
+  ${({ theme }) => css`
+    background-color: ${theme.eui.euiColorEmptyShade};
+    border-bottom: ${theme.eui.euiBorderWidthThick} solid ${theme.eui.euiColorLightShade};
+    position: sticky;
+    top: 0;
+    z-index: ${theme.eui.euiZLevel1};
+  `}
+`;
+EventsThead.displayName = 'EventsThead';
+
+export const EventsTrHeader = styled.div.attrs({
+  className: 'siemEventsTable__trHeader',
+  role: 'row',
+})`
+  display: flex;
+`;
+EventsTrHeader.displayName = 'EventsTrHeader';
+
+export const EventsThGroupActions = styled.div.attrs({
+  className: 'siemEventsTable__thGroupActions',
+})<{ actionsColumnWidth: number }>`
+  display: flex;
+  flex: 0 0 ${({ actionsColumnWidth }) => actionsColumnWidth + 'px'};
+  justify-content: space-between;
+  min-width: 0;
+`;
+EventsThGroupActions.displayName = 'EventsThGroupActions';
+
+export const EventsThGroupData = styled.div.attrs({
+  className: 'siemEventsTable__thGroupData',
+})`
+  display: flex;
+`;
+EventsThGroupData.displayName = 'EventsThGroupData';
+
+export const EventsTh = styled.div.attrs({
+  className: 'siemEventsTable__th',
+  role: 'columnheader',
+})<{ isDragging?: boolean; position?: string }>`
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  min-width: 0;
+  position: ${({ position }) => position};
+
+  .siemEventsTable__thGroupActions &:first-child:last-child {
+    flex: 1;
+  }
+
+  .siemEventsTable__thGroupData &:hover {
+    background-color: ${({ theme }) => theme.eui.euiTableHoverColor};
+    cursor: move; //Fallback for IE11
+    cursor: grab;
+  }
+`;
+EventsTh.displayName = 'EventsTh';
+
+export const EventsThContent = styled.div.attrs({
+  className: 'siemEventsTable__thContent',
+})<{ textAlign?: string }>`
+  ${({ textAlign, theme }) => css`
+    font-size: ${theme.eui.euiFontSizeXS};
+    font-weight: ${theme.eui.euiFontWeightSemiBold};
+    line-height: ${theme.eui.euiLineHeight};
+    min-width: 0;
+    padding: ${theme.eui.paddingSizes.xs};
+    text-align: ${textAlign};
+    width: 100%; //Using width: 100% instead of flex: 1 and max-width: 100% for IE11
+  `}
+`;
+EventsThContent.displayName = 'EventsThContent';
+
+/* EVENTS BODY */
+
+export const EventsTbody = styled.div.attrs({
+  className: 'siemEventsTable__tbody',
+  role: 'rowgroup',
+})`
+  overflow-x: hidden;
+`;
+EventsTbody.displayName = 'EventsTbody';
+
+export const EventsTrGroup = styled.div.attrs({
+  className: 'siemEventsTable__trGroup',
+})<{ className?: string }>`
+  ${({ theme }) => css`
+    border-bottom: ${theme.eui.euiBorderWidthThin} solid ${theme.eui.euiColorLightShade};
+
+    &:hover {
+      background-color: ${theme.eui.euiTableHoverColor};
+    }
+  `}
+`;
+EventsTrGroup.displayName = 'EventsTrGroup';
+
+export const EventsTrData = styled.div.attrs({
+  className: 'siemEventsTable__trData',
+  role: 'row',
+})`
+  display: flex;
+`;
+EventsTrData.displayName = 'EventsTrData';
+
+export const EventsTrSupplement = styled.div.attrs({
+  className: 'siemEventsTable__trSupplement',
+})<{ className: string }>`
+  ${({ theme }) => css`
+    font-size: ${theme.eui.euiFontSizeXS};
+    line-height: ${theme.eui.euiLineHeight};
+    padding: 0 ${theme.eui.paddingSizes.xs} 0 ${theme.eui.paddingSizes.xl};
+  `}
+`;
+EventsTrSupplement.displayName = 'EventsTrSupplement';
+
+export const EventsTdGroupActions = styled.div.attrs({
+  className: 'siemEventsTable__tdGroupActions',
+})<{ actionsColumnWidth: number }>`
+  display: flex;
+  justify-content: space-between;
+  flex: 0 0 ${({ actionsColumnWidth }) => actionsColumnWidth + 'px'};
+  min-width: 0;
+`;
+EventsTdGroupActions.displayName = 'EventsTdGroupActions';
+
+export const EventsTdGroupData = styled.div.attrs({
+  className: 'siemEventsTable__tdGroupData',
+})`
+  display: flex;
+`;
+EventsTdGroupData.displayName = 'EventsTdGroupData';
+
+export const EventsTd = styled.div.attrs({
+  className: 'siemEventsTable__td',
+  role: 'cell',
+})`
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  min-width: 0;
+
+  .siemEventsTable__tdGroupActions &:first-child:last-child {
+    flex: 1;
+  }
+`;
+EventsTd.displayName = 'EventsTd';
+
+export const EventsTdContent = styled.div.attrs({
+  className: 'siemEventsTable__tdContent',
+})<{ textAlign?: string }>`
+  ${({ textAlign, theme }) => css`
+    font-size: ${theme.eui.euiFontSizeXS};
+    line-height: ${theme.eui.euiLineHeight};
+    min-width: 0;
+    padding: ${theme.eui.paddingSizes.xs};
+    text-align: ${textAlign};
+    width: 100%; //Using width: 100% instead of flex: 1 and max-width: 100% for IE11
+  `}
+`;
+EventsTdContent.displayName = 'EventsTdContent';
+
+/**
+ * EVENTS HEADING
+ */
+
+export const EventsHeading = styled.div.attrs({
+  className: 'siemEventsHeading',
+})<{ isLoading: boolean }>`
+  align-items: center;
+  display: flex;
+
+  &:hover {
+    cursor: ${({ isLoading }) => (isLoading ? 'wait' : 'grab')};
+  }
+`;
+EventsHeading.displayName = 'EventsHeading';
+
+export const EventsHeadingTitleButton = styled.button.attrs({
+  className: 'siemEventsHeading__title siemEventsHeading__title--aggregatable',
+  type: 'button',
+})`
+  ${({ theme }) => css`
+    align-items: center;
+    display: flex;
+    font-weight: inherit;
+    min-width: 0;
+
+    &:hover,
+    &:focus {
+      color: ${theme.eui.euiColorPrimary};
+      text-decoration: underline;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    & > * + * {
+      margin-left: ${theme.eui.euiSizeXS};
+    }
+  `}
+`;
+EventsHeadingTitleButton.displayName = 'EventsHeadingTitleButton';
+
+export const EventsHeadingTitleSpan = styled.span.attrs({
+  className: 'siemEventsHeading__title siemEventsHeading__title--notAggregatable',
+})`
+  min-width: 0;
+`;
+EventsHeadingTitleSpan.displayName = 'EventsHeadingTitleSpan';
+
+export const EventsHeadingExtra = styled.div.attrs({
+  className: 'siemEventsHeading__extra',
+})<{ className?: string }>`
+  ${({ theme }) => css`
+    margin-left: auto;
+
+    &.siemEventsHeading__extra--close {
+      opacity: 0;
+      transition: all ${theme.eui.euiAnimSpeedNormal} ease;
+      visibility: hidden;
+
+      .siemEventsTable__th:hover & {
+        opacity: 1;
+        visibility: visible;
+      }
+    }
+  `}
+`;
+EventsHeadingExtra.displayName = 'EventsHeadingExtra';
+
+export const EventsHeadingHandle = styled.div.attrs({
+  className: 'siemEventsHeading__handle',
+})`
+  ${({ theme }) => css`
+    background-color: ${theme.eui.euiBorderColor};
+    height: 100%;
+    opacity: 0;
+    transition: all ${theme.eui.euiAnimSpeedNormal} ease;
+    visibility: hidden;
+    width: ${theme.eui.euiBorderWidthThick};
+
+    .siemEventsTable__thead:hover & {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    &:hover {
+      background-color: ${theme.eui.euiColorPrimary};
+      cursor: col-resize;
+    }
+  `}
+`;
+EventsHeadingHandle.displayName = 'EventsHeadingHandle';
+
+/**
+ * EVENTS LOADING
+ */
+
+export const EventsLoading = styled(EuiLoadingSpinner)`
+  margin: ${({ theme }) => theme.eui.euiSizeXS};
+  vertical-align: top;
+`;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/timeline.test.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/timeline.test.tsx
index 2617f9a957dd24..85986d2ed471c1 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/timeline.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/timeline.test.tsx
@@ -113,7 +113,7 @@ describe('Timeline', () => {
       expect(wrapper.find('[data-test-subj="timelineHeader"]').exists()).toEqual(true);
     });
 
-    test('it renders the timeline body', () => {
+    test('it renders the timeline table', () => {
       const wrapper = mount(
         <TestProviders>
           <MockedProvider mocks={mocks}>
@@ -148,7 +148,7 @@ describe('Timeline', () => {
         </TestProviders>
       );
 
-      expect(wrapper.find('[data-test-subj="horizontal-scroll"]').exists()).toEqual(true);
+      expect(wrapper.find('[data-test-subj="events-table"]').exists()).toEqual(true);
     });
 
     test('it does NOT render the paging footer when you do NOT have any data providers', () => {
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/timeline.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/timeline.tsx
index ded0209cef35d0..5101d557923698 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/timeline.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/timeline.tsx
@@ -15,7 +15,6 @@ import { TimelineQuery } from '../../containers/timeline';
 import { Direction } from '../../graphql/types';
 import { KqlMode } from '../../store/timeline/model';
 import { AutoSizer } from '../auto_sizer';
-
 import { ColumnHeader } from './body/column_headers/column_header';
 import { defaultHeaders } from './body/column_headers/default_headers';
 import { Sort } from './body/sort';
@@ -30,12 +29,12 @@ import {
   OnToggleDataProviderEnabled,
   OnToggleDataProviderExcluded,
 } from './events';
+import { TimelineKqlFetch } from './fetch_kql_timeline';
 import { Footer, footerHeight } from './footer';
 import { TimelineHeader } from './header';
 import { calculateBodyHeight, combineQueries } from './helpers';
 import { TimelineRefetch } from './refetch_timeline';
 import { ManageTimelineContext } from './timeline_context';
-import { TimelineKqlFetch } from './fetch_kql_timeline';
 
 const WrappedByAutoSizer = styled.div`
   width: 100%;
diff --git a/x-pack/legacy/plugins/siem/public/components/truncatable_text/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/truncatable_text/__snapshots__/index.test.tsx.snap
index d17982cd26ae24..23b930c7a114b6 100644
--- a/x-pack/legacy/plugins/siem/public/components/truncatable_text/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/truncatable_text/__snapshots__/index.test.tsx.snap
@@ -1,17 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TruncatableText renders correctly against snapshot 1`] = `
-.c0 {
+.c0,
+.c0 * {
+  display: inline-block;
+  max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
+  vertical-align: top;
   white-space: nowrap;
-  width: 50px;
 }
 
-<EuiText
+<span
   className="c0"
-  width="50px"
 >
   Hiding in plain sight
-</EuiText>
+</span>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/truncatable_text/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/truncatable_text/index.test.tsx
index c1bc485e21f2ab..51ffdb43fd4677 100644
--- a/x-pack/legacy/plugins/siem/public/components/truncatable_text/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/truncatable_text/index.test.tsx
@@ -12,42 +12,26 @@ import * as React from 'react';
 import { TruncatableText } from '.';
 
 describe('TruncatableText', () => {
-  const width = '50px';
-
   test('renders correctly against snapshot', () => {
-    const wrapper = shallow(
-      <TruncatableText width={width}>{'Hiding in plain sight'}</TruncatableText>
-    );
+    const wrapper = shallow(<TruncatableText>{'Hiding in plain sight'}</TruncatableText>);
     expect(toJson(wrapper)).toMatchSnapshot();
   });
 
   test('it adds the hidden overflow style', () => {
-    const wrapper = mount(
-      <TruncatableText width={width}>{'Hiding in plain sight'}</TruncatableText>
-    );
+    const wrapper = mount(<TruncatableText>{'Hiding in plain sight'}</TruncatableText>);
 
     expect(wrapper).toHaveStyleRule('overflow', 'hidden');
   });
 
   test('it adds the ellipsis text-overflow style', () => {
-    const wrapper = mount(<TruncatableText width={width}>{'Dramatic pause'}</TruncatableText>);
+    const wrapper = mount(<TruncatableText>{'Dramatic pause'}</TruncatableText>);
 
     expect(wrapper).toHaveStyleRule('text-overflow', 'ellipsis');
   });
 
   test('it adds the nowrap white-space style', () => {
-    const wrapper = mount(
-      <TruncatableText width={width}>{'Who stopped the beats?'}</TruncatableText>
-    );
+    const wrapper = mount(<TruncatableText>{'Who stopped the beats?'}</TruncatableText>);
 
     expect(wrapper).toHaveStyleRule('white-space', 'nowrap');
   });
-
-  test('it forwards the width prop as a style', () => {
-    const wrapper = mount(
-      <TruncatableText width={width}>{'width or without you'}</TruncatableText>
-    );
-
-    expect(wrapper).toHaveStyleRule('width', width);
-  });
 });
diff --git a/x-pack/legacy/plugins/siem/public/components/truncatable_text/index.tsx b/x-pack/legacy/plugins/siem/public/components/truncatable_text/index.tsx
index 7cf91ce35cd43b..ff8307666275d1 100644
--- a/x-pack/legacy/plugins/siem/public/components/truncatable_text/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/truncatable_text/index.tsx
@@ -4,21 +4,24 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiText } from '@elastic/eui';
 import styled from 'styled-components';
 
 /**
  * Applies CSS styling to enable text to be truncated with an ellipsis.
  * Example: "Don't leave me hanging..."
  *
- * Width is required, because CSS will not truncate the text unless a width is
- * specified.
+ * Note: Requires a parent container with a defined width or max-width.
  */
-export const TruncatableText = styled(EuiText)<{ width: string }>`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: ${({ width }) => width};
-`;
 
+export const TruncatableText = styled.span`
+  &,
+  & * {
+    display: inline-block;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: top;
+    white-space: nowrap;
+  }
+`;
 TruncatableText.displayName = 'TruncatableText';
diff --git a/x-pack/legacy/plugins/siem/public/components/url_state/use_url_state.tsx b/x-pack/legacy/plugins/siem/public/components/url_state/use_url_state.tsx
index 78c3850057fc10..26826ace6fcfd7 100644
--- a/x-pack/legacy/plugins/siem/public/components/url_state/use_url_state.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/url_state/use_url_state.tsx
@@ -33,7 +33,7 @@ import {
 } from './types';
 
 function usePrevious(value: PreviousLocationUrlState) {
-  const ref = useRef(value);
+  const ref = useRef<PreviousLocationUrlState>(value);
   useEffect(() => {
     ref.current = value;
   });
diff --git a/x-pack/legacy/plugins/siem/public/components/with_hover_actions/index.tsx b/x-pack/legacy/plugins/siem/public/components/with_hover_actions/index.tsx
index 972ace6870d147..2569e8d303b69b 100644
--- a/x-pack/legacy/plugins/siem/public/components/with_hover_actions/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/with_hover_actions/index.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import * as React from 'react';
+import React, { useState } from 'react';
 import { pure } from 'recompose';
 import styled from 'styled-components';
 
@@ -28,10 +28,6 @@ interface Props {
   render: (showHoverContent: boolean) => JSX.Element;
 }
 
-interface State {
-  showHoverContent: boolean;
-}
-
 const HoverActionsPanelContainer = styled.div`
   color: ${props => props.theme.eui.textColors.default}
   height: 100%;
@@ -67,31 +63,25 @@ WithHoverActionsContainer.displayName = 'WithHoverActionsContainer';
  * component also passes `showHoverContent` as a render prop, which
  * provides a signal to the content that the user is in a hover state.
  */
-export class WithHoverActions extends React.PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = { showHoverContent: false };
-  }
-
-  public render() {
-    const { alwaysShow = false, hoverContent, render } = this.props;
+export const WithHoverActions = React.memo<Props>(
+  ({ alwaysShow = false, hoverContent, render }) => {
+    const [showHoverContent, setShowHoverContent] = useState(false);
+    function onMouseEnter() {
+      setShowHoverContent(true);
+    }
 
+    function onMouseLeave() {
+      setShowHoverContent(false);
+    }
     return (
-      <WithHoverActionsContainer onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
-        <>{render(this.state.showHoverContent)}</>
-        <HoverActionsPanel show={this.state.showHoverContent || alwaysShow}>
+      <WithHoverActionsContainer onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+        <>{render(showHoverContent)}</>
+        <HoverActionsPanel show={showHoverContent || alwaysShow}>
           {hoverContent != null ? hoverContent : <></>}
         </HoverActionsPanel>
       </WithHoverActionsContainer>
     );
   }
+);
 
-  private onMouseEnter = () => {
-    this.setState({ showHoverContent: true });
-  };
-
-  private onMouseLeave = () => {
-    this.setState({ showHoverContent: false });
-  };
-}
+WithHoverActions.displayName = 'WithHoverActions';
diff --git a/x-pack/legacy/plugins/siem/public/containers/hosts/filter.tsx b/x-pack/legacy/plugins/siem/public/containers/hosts/filter.tsx
index 5a5d25e699528c..4bacb2f87c4581 100644
--- a/x-pack/legacy/plugins/siem/public/containers/hosts/filter.tsx
+++ b/x-pack/legacy/plugins/siem/public/containers/hosts/filter.tsx
@@ -4,9 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { isEqual } from 'lodash/fp';
+import React, { useEffect } from 'react';
 import memoizeOne from 'memoize-one';
-import React from 'react';
 import { connect } from 'react-redux';
 import { ActionCreator } from 'typescript-fsa';
 import { StaticIndexPattern } from 'ui/index_patterns';
@@ -61,80 +60,72 @@ interface HostsFilterDispatchProps {
 
 export type HostsFilterProps = OwnProps & HostsFilterReduxProps & HostsFilterDispatchProps;
 
-class HostsFilterComponent extends React.PureComponent<HostsFilterProps> {
-  private memoizedApplyFilterQueryFromKueryExpression: (expression: string) => void;
-  private memoizedSetFilterQueryDraftFromKueryExpression: (expression: string) => void;
-
-  constructor(props: HostsFilterProps) {
-    super(props);
-    this.memoizedApplyFilterQueryFromKueryExpression = memoizeOne(
-      this.applyFilterQueryFromKueryExpression
-    );
-    this.memoizedSetFilterQueryDraftFromKueryExpression = memoizeOne(
-      this.setFilterQueryDraftFromKueryExpression
-    );
-  }
+const HostsFilterComponent = React.memo<HostsFilterProps>(
+  ({
+    applyHostsFilterQuery,
+    children,
+    hostsFilterQueryDraft,
+    indexPattern,
+    isHostFilterQueryDraftValid,
+    kueryFilterQuery,
+    setHostsFilterQueryDraft,
+    setQuery,
+    type,
+  }) => {
+    const applyFilterQueryFromKueryExpression = (expression: string) =>
+      applyHostsFilterQuery({
+        filterQuery: {
+          kuery: {
+            kind: 'kuery',
+            expression,
+          },
+          serializedQuery: convertKueryToElasticSearchQuery(expression, indexPattern),
+        },
+        hostsType: type,
+      });
 
-  public componentDidUpdate(prevProps: HostsFilterProps) {
-    const { indexPattern, hostsFilterQueryDraft, kueryFilterQuery, setQuery, type } = this.props;
-    if (
-      setQuery &&
-      (!isEqual(prevProps.hostsFilterQueryDraft, hostsFilterQueryDraft) ||
-        !isEqual(prevProps.kueryFilterQuery, kueryFilterQuery) ||
-        prevProps.type !== type)
-    ) {
-      setQuery({
-        id: 'kql',
-        inspect: null,
-        loading: false,
-        refetch: useUpdateKql({
-          indexPattern,
-          kueryFilterQuery,
-          kueryFilterQueryDraft: hostsFilterQueryDraft,
-          storeType: 'hostsType',
-          type,
-        }),
+    const setFilterQueryDraftFromKueryExpression = (expression: string) =>
+      setHostsFilterQueryDraft({
+        filterQueryDraft: {
+          kind: 'kuery',
+          expression,
+        },
+        hostsType: type,
       });
-    }
-  }
 
-  public render() {
-    const { children, hostsFilterQueryDraft, isHostFilterQueryDraftValid } = this.props;
+    const memoizedApplyFilter = memoizeOne(applyFilterQueryFromKueryExpression);
+    const memoizedSetFilter = memoizeOne(setFilterQueryDraftFromKueryExpression);
+    useEffect(() => {
+      if (setQuery) {
+        setQuery({
+          id: 'kql',
+          inspect: null,
+          loading: false,
+          refetch: useUpdateKql({
+            indexPattern,
+            kueryFilterQuery,
+            kueryFilterQueryDraft: hostsFilterQueryDraft,
+            storeType: 'hostsType',
+            type,
+          }),
+        });
+      }
+    }, [hostsFilterQueryDraft, kueryFilterQuery, type]);
 
     return (
       <>
         {children({
-          applyFilterQueryFromKueryExpression: this.memoizedApplyFilterQueryFromKueryExpression,
+          applyFilterQueryFromKueryExpression: memoizedApplyFilter,
           filterQueryDraft: hostsFilterQueryDraft,
           isFilterQueryDraftValid: isHostFilterQueryDraftValid,
-          setFilterQueryDraftFromKueryExpression: this
-            .memoizedSetFilterQueryDraftFromKueryExpression,
+          setFilterQueryDraftFromKueryExpression: memoizedSetFilter,
         })}
       </>
     );
   }
+);
 
-  private applyFilterQueryFromKueryExpression = (expression: string) =>
-    this.props.applyHostsFilterQuery({
-      filterQuery: {
-        kuery: {
-          kind: 'kuery',
-          expression,
-        },
-        serializedQuery: convertKueryToElasticSearchQuery(expression, this.props.indexPattern),
-      },
-      hostsType: this.props.type,
-    });
-
-  private setFilterQueryDraftFromKueryExpression = (expression: string) =>
-    this.props.setHostsFilterQueryDraft({
-      filterQueryDraft: {
-        kind: 'kuery',
-        expression,
-      },
-      hostsType: this.props.type,
-    });
-}
+HostsFilterComponent.displayName = 'HostsFilterComponent';
 
 const makeMapStateToProps = () => {
   const getHostsFilterQueryDraft = hostsSelectors.hostsFilterQueryDraft();
diff --git a/x-pack/legacy/plugins/siem/public/containers/hosts/first_last_seen/index.ts b/x-pack/legacy/plugins/siem/public/containers/hosts/first_last_seen/index.ts
index 7d0451adcd18f0..042de56fbd99d9 100644
--- a/x-pack/legacy/plugins/siem/public/containers/hosts/first_last_seen/index.ts
+++ b/x-pack/legacy/plugins/siem/public/containers/hosts/first_last_seen/index.ts
@@ -36,9 +36,9 @@ export function useFirstLastSeenHostQuery<TCache = object>(
   apolloClient: ApolloClient<TCache>
 ) {
   const [loading, updateLoading] = useState(false);
-  const [firstSeen, updateFirstSeen] = useState(null);
-  const [lastSeen, updateLastSeen] = useState(null);
-  const [errorMessage, updateErrorMessage] = useState(null);
+  const [firstSeen, updateFirstSeen] = useState<Date | null>(null);
+  const [lastSeen, updateLastSeen] = useState<Date | null>(null);
+  const [errorMessage, updateErrorMessage] = useState<string | null>(null);
 
   async function fetchFirstLastSeenHost(signal: AbortSignal) {
     updateLoading(true);
diff --git a/x-pack/legacy/plugins/siem/public/containers/kuery_autocompletion/index.tsx b/x-pack/legacy/plugins/siem/public/containers/kuery_autocompletion/index.tsx
index 9235580563a533..9cf7331441da5e 100644
--- a/x-pack/legacy/plugins/siem/public/containers/kuery_autocompletion/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/containers/kuery_autocompletion/index.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { npStart } from 'ui/new_platform';
 import { StaticIndexPattern } from 'ui/index_patterns';
 import { AutocompleteSuggestion } from '../../../../../../../src/plugins/data/public';
@@ -26,78 +26,65 @@ interface KueryAutocompletionCurrentRequest {
   cursorPosition: number;
 }
 
-interface KueryAutocompletionLifecycleState {
-  // lacking cancellation support in the autocompletion api,
-  // this is used to keep older, slower requests from clobbering newer ones
-  currentRequest: KueryAutocompletionCurrentRequest | null;
-  suggestions: AutocompleteSuggestion[];
-}
-
 const getAutocompleteProvider = (language: string) =>
   npStart.plugins.data.autocomplete.getProvider(language);
 
-export class KueryAutocompletion extends React.PureComponent<
-  KueryAutocompletionLifecycleProps,
-  KueryAutocompletionLifecycleState
-> {
-  public readonly state: KueryAutocompletionLifecycleState = {
-    currentRequest: null,
-    suggestions: [],
-  };
-
-  public render() {
-    const { currentRequest, suggestions } = this.state;
-    return this.props.children({
-      isLoadingSuggestions: currentRequest !== null,
-      loadSuggestions: this.loadSuggestions,
-      suggestions,
-    });
-  }
+export const KueryAutocompletion = React.memo<KueryAutocompletionLifecycleProps>(
+  ({ children, indexPattern }) => {
+    const [currentRequest, setCurrentRequest] = useState<KueryAutocompletionCurrentRequest | null>(
+      null
+    );
 
-  private loadSuggestions = async (
-    expression: string,
-    cursorPosition: number,
-    maxSuggestions?: number
-  ) => {
-    const { indexPattern } = this.props;
-    const autocompletionProvider = getAutocompleteProvider('kuery');
-    const config = {
-      get: () => true,
-    };
-    if (!autocompletionProvider) {
-      return;
-    }
+    const [suggestions, setSuggestions] = useState<AutocompleteSuggestion[]>([]);
 
-    const getSuggestions = autocompletionProvider({
-      config,
-      indexPatterns: [indexPattern],
-      boolFilter: [],
-    });
+    const loadSuggestions = async (
+      expression: string,
+      cursorPosition: number,
+      maxSuggestions?: number
+    ) => {
+      const autocompletionProvider = getAutocompleteProvider('kuery');
+      const config = {
+        get: () => true,
+      };
+      if (!autocompletionProvider) {
+        return;
+      }
 
-    this.setState({
-      currentRequest: {
+      const getSuggestions = autocompletionProvider({
+        config,
+        indexPatterns: [indexPattern],
+        boolFilter: [],
+      });
+      const futureRequest = {
         expression,
         cursorPosition,
-      },
-      suggestions: [],
-    });
+      };
+      setCurrentRequest({
+        expression,
+        cursorPosition,
+      });
+      setSuggestions([]);
+      const newSuggestions = await getSuggestions({
+        query: expression,
+        selectionStart: cursorPosition,
+        selectionEnd: cursorPosition,
+      });
+      if (
+        futureRequest &&
+        futureRequest.expression !== (currentRequest && currentRequest.expression) &&
+        futureRequest.cursorPosition !== (currentRequest && currentRequest.cursorPosition)
+      ) {
+        setCurrentRequest(null);
+        setSuggestions(maxSuggestions ? newSuggestions.slice(0, maxSuggestions) : newSuggestions);
+      }
+    };
 
-    const suggestions = await getSuggestions({
-      query: expression,
-      selectionStart: cursorPosition,
-      selectionEnd: cursorPosition,
+    return children({
+      isLoadingSuggestions: currentRequest !== null,
+      loadSuggestions,
+      suggestions,
     });
+  }
+);
 
-    this.setState(state =>
-      state.currentRequest &&
-      state.currentRequest.expression !== expression &&
-      state.currentRequest.cursorPosition !== cursorPosition
-        ? state // ignore this result, since a newer request is in flight
-        : {
-            ...state,
-            currentRequest: null,
-            suggestions: maxSuggestions ? suggestions.slice(0, maxSuggestions) : suggestions,
-          }
-    );
-  };
-}
+KueryAutocompletion.displayName = 'KueryAutocompletion';
diff --git a/x-pack/legacy/plugins/siem/public/containers/network/filter.tsx b/x-pack/legacy/plugins/siem/public/containers/network/filter.tsx
index cb2fb12a0ca52b..6ae2f3ef777e84 100644
--- a/x-pack/legacy/plugins/siem/public/containers/network/filter.tsx
+++ b/x-pack/legacy/plugins/siem/public/containers/network/filter.tsx
@@ -4,13 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { isEqual } from 'lodash/fp';
-import React from 'react';
+import React, { useEffect } from 'react';
+import memoizeOne from 'memoize-one';
 import { connect } from 'react-redux';
 import { ActionCreator } from 'typescript-fsa';
 import { StaticIndexPattern } from 'ui/index_patterns';
 
-import memoizeOne from 'memoize-one';
 import { convertKueryToElasticSearchQuery } from '../../lib/keury';
 import {
   KueryFilterQuery,
@@ -33,13 +32,13 @@ export interface NetworkFilterArgs {
 interface OwnProps {
   children: (args: NetworkFilterArgs) => React.ReactNode;
   indexPattern: StaticIndexPattern;
-  type: networkModel.NetworkType;
   setQuery?: (params: {
     id: string;
     inspect: null;
     loading: boolean;
     refetch: inputsModel.Refetch | inputsModel.RefetchKql;
   }) => void;
+  type: networkModel.NetworkType;
 }
 
 interface NetworkFilterReduxProps {
@@ -61,80 +60,71 @@ interface NetworkFilterDispatchProps {
 
 export type NetworkFilterProps = OwnProps & NetworkFilterReduxProps & NetworkFilterDispatchProps;
 
-class NetworkFilterComponent extends React.PureComponent<NetworkFilterProps> {
-  private memoizedApplyFilterQueryFromKueryExpression: (expression: string) => void;
-  private memoizedSetFilterQueryDraftFromKueryExpression: (expression: string) => void;
-
-  constructor(props: NetworkFilterProps) {
-    super(props);
-    this.memoizedApplyFilterQueryFromKueryExpression = memoizeOne(
-      this.applyFilterQueryFromKueryExpression
-    );
-    this.memoizedSetFilterQueryDraftFromKueryExpression = memoizeOne(
-      this.setFilterQueryDraftFromKueryExpression
-    );
-  }
-
-  public componentDidUpdate(prevProps: NetworkFilterProps) {
-    const { indexPattern, networkFilterQueryDraft, kueryFilterQuery, setQuery, type } = this.props;
-
-    if (
-      setQuery &&
-      (!isEqual(prevProps.networkFilterQueryDraft, networkFilterQueryDraft) ||
-        !isEqual(prevProps.kueryFilterQuery, kueryFilterQuery) ||
-        prevProps.type !== type)
-    ) {
-      setQuery({
-        id: 'kql',
-        inspect: null,
-        loading: false,
-        refetch: useUpdateKql({
-          indexPattern,
-          kueryFilterQuery,
-          kueryFilterQueryDraft: networkFilterQueryDraft,
-          storeType: 'networkType',
-          type,
-        }),
+const NetworkFilterComponent = React.memo<NetworkFilterProps>(
+  ({
+    applyNetworkFilterQuery,
+    children,
+    indexPattern,
+    isNetworkFilterQueryDraftValid,
+    kueryFilterQuery,
+    networkFilterQueryDraft,
+    setNetworkFilterQueryDraft,
+    setQuery,
+    type,
+  }) => {
+    const applyFilterQueryFromKueryExpression = (expression: string) =>
+      applyNetworkFilterQuery({
+        filterQuery: {
+          kuery: {
+            kind: 'kuery',
+            expression,
+          },
+          serializedQuery: convertKueryToElasticSearchQuery(expression, indexPattern),
+        },
+        networkType: type,
       });
-    }
-  }
-
-  public render() {
-    const { children, networkFilterQueryDraft, isNetworkFilterQueryDraftValid } = this.props;
 
+    const setFilterQueryDraftFromKueryExpression = (expression: string) =>
+      setNetworkFilterQueryDraft({
+        filterQueryDraft: {
+          kind: 'kuery',
+          expression,
+        },
+        networkType: type,
+      });
+    const memoizedApplyFilter = memoizeOne(applyFilterQueryFromKueryExpression);
+    const memoizedSetFilter = memoizeOne(setFilterQueryDraftFromKueryExpression);
+
+    useEffect(() => {
+      if (setQuery) {
+        setQuery({
+          id: 'kql',
+          inspect: null,
+          loading: false,
+          refetch: useUpdateKql({
+            indexPattern,
+            kueryFilterQuery,
+            kueryFilterQueryDraft: networkFilterQueryDraft,
+            storeType: 'networkType',
+            type,
+          }),
+        });
+      }
+    }, [networkFilterQueryDraft, kueryFilterQuery, type]);
     return (
       <>
         {children({
-          applyFilterQueryFromKueryExpression: this.memoizedApplyFilterQueryFromKueryExpression,
+          applyFilterQueryFromKueryExpression: memoizedApplyFilter,
           filterQueryDraft: networkFilterQueryDraft,
           isFilterQueryDraftValid: isNetworkFilterQueryDraftValid,
-          setFilterQueryDraftFromKueryExpression: this
-            .memoizedSetFilterQueryDraftFromKueryExpression,
+          setFilterQueryDraftFromKueryExpression: memoizedSetFilter,
         })}
       </>
     );
   }
-  private applyFilterQueryFromKueryExpression = (expression: string) =>
-    this.props.applyNetworkFilterQuery({
-      filterQuery: {
-        kuery: {
-          kind: 'kuery',
-          expression,
-        },
-        serializedQuery: convertKueryToElasticSearchQuery(expression, this.props.indexPattern),
-      },
-      networkType: this.props.type,
-    });
+);
 
-  private setFilterQueryDraftFromKueryExpression = (expression: string) =>
-    this.props.setNetworkFilterQueryDraft({
-      filterQueryDraft: {
-        kind: 'kuery',
-        expression,
-      },
-      networkType: this.props.type,
-    });
-}
+NetworkFilterComponent.displayName = 'NetworkFilterComponent';
 
 const makeMapStateToProps = () => {
   const getNetworkFilterQueryDraft = networkSelectors.networkFilterQueryDraft();
@@ -142,9 +132,9 @@ const makeMapStateToProps = () => {
   const getNetworkKueryFilterQuery = networkSelectors.networkFilterQueryAsKuery();
   const mapStateToProps = (state: State, { type }: OwnProps) => {
     return {
-      networkFilterQueryDraft: getNetworkFilterQueryDraft(state, type),
       isNetworkFilterQueryDraftValid: getIsNetworkFilterQueryDraftValid(state, type),
       kueryFilterQuery: getNetworkKueryFilterQuery(state, type),
+      networkFilterQueryDraft: getNetworkFilterQueryDraft(state, type),
     };
   };
   return mapStateToProps;
diff --git a/x-pack/legacy/plugins/siem/public/containers/source/index.tsx b/x-pack/legacy/plugins/siem/public/containers/source/index.tsx
index 18b2641a160082..ead483baab43e2 100644
--- a/x-pack/legacy/plugins/siem/public/containers/source/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/containers/source/index.tsx
@@ -8,10 +8,10 @@ import { isUndefined } from 'lodash';
 import { get, keyBy, pick, set } from 'lodash/fp';
 import { Query } from 'react-apollo';
 import React from 'react';
+import memoizeOne from 'memoize-one';
 import { StaticIndexPattern } from 'ui/index_patterns';
 import chrome from 'ui/chrome';
 
-import memoizeOne from 'memoize-one';
 import { DEFAULT_INDEX_KEY } from '../../../common/constants';
 import { IndexField, SourceQuery } from '../../graphql/types';
 
@@ -57,47 +57,8 @@ interface WithSourceProps {
   sourceId: string;
 }
 
-export class WithSource extends React.PureComponent<WithSourceProps> {
-  private memoizedIndexFields: (title: string, fields: IndexField[]) => StaticIndexPattern;
-  private memoizedBrowserFields: (fields: IndexField[]) => BrowserFields;
-
-  constructor(props: WithSourceProps) {
-    super(props);
-    this.memoizedIndexFields = memoizeOne(this.getIndexFields);
-    this.memoizedBrowserFields = memoizeOne(this.getBrowserFields);
-  }
-
-  public render() {
-    const { children, sourceId } = this.props;
-
-    return (
-      <Query<SourceQuery.Query, SourceQuery.Variables>
-        query={sourceQuery}
-        fetchPolicy="cache-first"
-        notifyOnNetworkStatusChange
-        variables={{
-          sourceId,
-          defaultIndex: chrome.getUiSettingsClient().get(DEFAULT_INDEX_KEY),
-        }}
-      >
-        {({ data }) => {
-          return children({
-            indicesExist: get('source.status.indicesExist', data),
-            browserFields: this.memoizedBrowserFields(get('source.status.indexFields', data)),
-            indexPattern: this.memoizedIndexFields(
-              chrome
-                .getUiSettingsClient()
-                .get(DEFAULT_INDEX_KEY)
-                .join(),
-              get('source.status.indexFields', data)
-            ),
-          });
-        }}
-      </Query>
-    );
-  }
-
-  private getIndexFields = (title: string, fields: IndexField[]): StaticIndexPattern =>
+export const WithSource = React.memo<WithSourceProps>(({ children, sourceId }) => {
+  const getIndexFields = (title: string, fields: IndexField[]): StaticIndexPattern =>
     fields && fields.length > 0
       ? {
           fields: fields.map(field => pick(['name', 'searchable', 'type', 'aggregatable'], field)),
@@ -105,7 +66,7 @@ export class WithSource extends React.PureComponent<WithSourceProps> {
         }
       : { fields: [], title };
 
-  private getBrowserFields = (fields: IndexField[]): BrowserFields =>
+  const getBrowserFields = (fields: IndexField[]): BrowserFields =>
     fields && fields.length > 0
       ? fields.reduce<BrowserFields>(
           (accumulator: BrowserFields, field: IndexField) =>
@@ -113,7 +74,39 @@ export class WithSource extends React.PureComponent<WithSourceProps> {
           {}
         )
       : {};
-}
+  const getBrowserFieldsMemo: (fields: IndexField[]) => BrowserFields = memoizeOne(
+    getBrowserFields
+  );
+  const getIndexFieldsMemo: (
+    title: string,
+    fields: IndexField[]
+  ) => StaticIndexPattern = memoizeOne(getIndexFields);
+  return (
+    <Query<SourceQuery.Query, SourceQuery.Variables>
+      query={sourceQuery}
+      fetchPolicy="cache-first"
+      notifyOnNetworkStatusChange
+      variables={{
+        sourceId,
+        defaultIndex: chrome.getUiSettingsClient().get(DEFAULT_INDEX_KEY),
+      }}
+    >
+      {({ data }) =>
+        children({
+          indicesExist: get('source.status.indicesExist', data),
+          browserFields: getBrowserFieldsMemo(get('source.status.indexFields', data)),
+          indexPattern: getIndexFieldsMemo(
+            chrome
+              .getUiSettingsClient()
+              .get(DEFAULT_INDEX_KEY)
+              .join(),
+            get('source.status.indexFields', data)
+          ),
+        })
+      }
+    </Query>
+  );
+});
 
 export const indicesExistOrDataTemporarilyUnavailable = (indicesExist: boolean | undefined) =>
   indicesExist || isUndefined(indicesExist);
diff --git a/x-pack/legacy/plugins/siem/public/containers/timeline/all/index.tsx b/x-pack/legacy/plugins/siem/public/containers/timeline/all/index.tsx
index 88bc333b66e97d..c3bff998fdefdf 100644
--- a/x-pack/legacy/plugins/siem/public/containers/timeline/all/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/containers/timeline/all/index.tsx
@@ -6,9 +6,10 @@
 
 import { getOr } from 'lodash/fp';
 import React from 'react';
+import memoizeOne from 'memoize-one';
+
 import { Query } from 'react-apollo';
 
-import memoizeOne from 'memoize-one';
 import { OpenTimelineResult } from '../../../components/open_timeline/types';
 import {
   GetAllTimeline,
@@ -35,19 +36,43 @@ interface OwnProps extends AllTimelinesVariables {
   children?: (args: AllTimelinesArgs) => React.ReactNode;
 }
 
-export class AllTimelinesQuery extends React.PureComponent<OwnProps> {
-  private memoizedAllTimeline: (
-    variables: string,
-    timelines: TimelineResult[]
-  ) => OpenTimelineResult[];
+const getAllTimeline = (variables: string, timelines: TimelineResult[]): OpenTimelineResult[] =>
+  timelines.map(timeline => ({
+    created: timeline.created,
+    description: timeline.description,
+    eventIdToNoteIds:
+      timeline.eventIdToNoteIds != null
+        ? timeline.eventIdToNoteIds.reduce((acc, note) => {
+            if (note.eventId != null) {
+              const notes = getOr([], note.eventId, acc);
+              return { ...acc, [note.eventId]: [...notes, note.noteId] };
+            }
+            return acc;
+          }, {})
+        : null,
+    favorite: timeline.favorite,
+    noteIds: timeline.noteIds,
+    notes:
+      timeline.notes != null
+        ? timeline.notes.map(note => ({ ...note, savedObjectId: note.noteId }))
+        : null,
+    pinnedEventIds:
+      timeline.pinnedEventIds != null
+        ? timeline.pinnedEventIds.reduce(
+            (acc, pinnedEventId) => ({ ...acc, [pinnedEventId]: true }),
+            {}
+          )
+        : null,
+    savedObjectId: timeline.savedObjectId,
+    title: timeline.title,
+    updated: timeline.updated,
+    updatedBy: timeline.updatedBy,
+  }));
 
-  constructor(props: OwnProps) {
-    super(props);
-    this.memoizedAllTimeline = memoizeOne(this.getAllTimeline);
-  }
+export const AllTimelinesQuery = React.memo<OwnProps>(
+  ({ children, onlyUserFavorite, pageInfo, search, sort }) => {
+    const memoizedAllTimeline = memoizeOne(getAllTimeline);
 
-  public render() {
-    const { children, onlyUserFavorite, pageInfo, search, sort } = this.props;
     const variables: GetAllTimeline.Variables = {
       onlyUserFavorite,
       pageInfo,
@@ -65,7 +90,7 @@ export class AllTimelinesQuery extends React.PureComponent<OwnProps> {
           return children!({
             loading,
             totalCount: getOr(0, 'getAllTimeline.totalCount', data),
-            timelines: this.memoizedAllTimeline(
+            timelines: memoizedAllTimeline(
               JSON.stringify(variables),
               getOr([], 'getAllTimeline.timeline', data)
             ),
@@ -74,41 +99,4 @@ export class AllTimelinesQuery extends React.PureComponent<OwnProps> {
       </Query>
     );
   }
-
-  private getAllTimeline = (
-    variables: string,
-    timelines: TimelineResult[]
-  ): OpenTimelineResult[] => {
-    return timelines.map(timeline => ({
-      created: timeline.created,
-      description: timeline.description,
-      eventIdToNoteIds:
-        timeline.eventIdToNoteIds != null
-          ? timeline.eventIdToNoteIds.reduce((acc, note) => {
-              if (note.eventId != null) {
-                const notes = getOr([], note.eventId, acc);
-                return { ...acc, [note.eventId]: [...notes, note.noteId] };
-              }
-              return acc;
-            }, {})
-          : null,
-      favorite: timeline.favorite,
-      noteIds: timeline.noteIds,
-      notes:
-        timeline.notes != null
-          ? timeline.notes.map(note => ({ ...note, savedObjectId: note.noteId }))
-          : null,
-      pinnedEventIds:
-        timeline.pinnedEventIds != null
-          ? timeline.pinnedEventIds.reduce(
-              (acc, pinnedEventId) => ({ ...acc, [pinnedEventId]: true }),
-              {}
-            )
-          : null,
-      savedObjectId: timeline.savedObjectId,
-      title: timeline.title,
-      updated: timeline.updated,
-      updatedBy: timeline.updatedBy,
-    }));
-  };
-}
+);
diff --git a/x-pack/legacy/plugins/siem/public/containers/timeline/details/index.tsx b/x-pack/legacy/plugins/siem/public/containers/timeline/details/index.tsx
index 9a038a61c9f883..54dd44063f5da6 100644
--- a/x-pack/legacy/plugins/siem/public/containers/timeline/details/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/containers/timeline/details/index.tsx
@@ -21,30 +21,24 @@ export interface EventsArgs {
 }
 
 export interface TimelineDetailsProps {
-  children?: (args: EventsArgs) => React.ReactNode;
+  children?: (args: EventsArgs) => React.ReactElement;
   indexName: string;
   eventId: string;
   executeQuery: boolean;
   sourceId: string;
 }
 
-export class TimelineDetailsComponentQuery extends React.PureComponent<TimelineDetailsProps> {
-  private memoizedDetailsEvents: (variables: string, detail: DetailItem[]) => DetailItem[];
+export const TimelineDetailsComponentQuery = React.memo<TimelineDetailsProps>(
+  ({ children, indexName, eventId, executeQuery, sourceId }) => {
+    const getDetailsEvent = (variables: string, detail: DetailItem[]): DetailItem[] => detail;
+    const getDetailsEventMemo = memoizeOne(getDetailsEvent);
 
-  constructor(props: TimelineDetailsProps) {
-    super(props);
-    this.memoizedDetailsEvents = memoizeOne(this.getDetailsEvent);
-  }
-
-  public render() {
-    const { children, indexName, eventId, executeQuery, sourceId } = this.props;
     const variables: GetTimelineDetailsQuery.Variables = {
       sourceId,
       indexName,
       eventId,
       defaultIndex: chrome.getUiSettingsClient().get(DEFAULT_INDEX_KEY),
     };
-
     return executeQuery ? (
       <Query<GetTimelineDetailsQuery.Query, GetTimelineDetailsQuery.Variables>
         query={timelineDetailsQuery}
@@ -55,7 +49,7 @@ export class TimelineDetailsComponentQuery extends React.PureComponent<TimelineD
         {({ data, loading, refetch }) => {
           return children!({
             loading,
-            detailsData: this.memoizedDetailsEvents(
+            detailsData: getDetailsEventMemo(
               JSON.stringify(variables),
               getOr([], 'source.TimelineDetails.data', data)
             ),
@@ -66,6 +60,4 @@ export class TimelineDetailsComponentQuery extends React.PureComponent<TimelineD
       children!({ loading: false, detailsData: null })
     );
   }
-
-  private getDetailsEvent = (variables: string, detail: DetailItem[]): DetailItem[] => detail;
-}
+);
diff --git a/x-pack/legacy/plugins/siem/public/pages/hosts/hosts_navigations.tsx b/x-pack/legacy/plugins/siem/public/pages/hosts/hosts_navigations.tsx
deleted file mode 100644
index 37283b7d4aa8ed..00000000000000
--- a/x-pack/legacy/plugins/siem/public/pages/hosts/hosts_navigations.tsx
+++ /dev/null
@@ -1,387 +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 { StaticIndexPattern } from 'ui/index_patterns';
-import { getOr, omit } from 'lodash/fp';
-import React from 'react';
-import { EuiSpacer } from '@elastic/eui';
-import * as i18n from './translations';
-
-import { HostsTable, UncommonProcessTable } from '../../components/page/hosts';
-
-import { HostsQuery } from '../../containers/hosts';
-import { AuthenticationTable } from '../../components/page/hosts/authentications_table';
-import { AnomaliesHostTable } from '../../components/ml/tables/anomalies_host_table';
-import { UncommonProcessesQuery } from '../../containers/uncommon_processes';
-import { InspectQuery, Refetch } from '../../store/inputs/model';
-import { NarrowDateRange } from '../../components/ml/types';
-import { hostsModel } from '../../store';
-import { manageQuery } from '../../components/page/manage_query';
-import { AuthenticationsQuery } from '../../containers/authentications';
-import { ESTermQuery } from '../../../common/typed_json';
-import { HostsTableType } from '../../store/hosts/model';
-import { StatefulEventsViewer } from '../../components/events_viewer';
-import { NavTab } from '../../components/navigation/types';
-import { EventsOverTimeQuery } from '../../containers/events/events_over_time';
-import { EventsOverTimeHistogram } from '../../components/page/hosts/events_over_time';
-import { UpdateDateRange } from '../../components/charts/common';
-
-const getTabsOnHostsUrl = (tabName: HostsTableType) => `#/hosts/${tabName}`;
-const getTabsOnHostDetailsUrl = (hostName: string, tabName: HostsTableType) => {
-  return `#/hosts/${hostName}/${tabName}`;
-};
-
-type KeyHostsNavTabWithoutMlPermission = HostsTableType.hosts &
-  HostsTableType.authentications &
-  HostsTableType.uncommonProcesses &
-  HostsTableType.events;
-
-type KeyHostsNavTabWithMlPermission = KeyHostsNavTabWithoutMlPermission & HostsTableType.anomalies;
-
-export type KeyHostsNavTab = KeyHostsNavTabWithoutMlPermission | KeyHostsNavTabWithMlPermission;
-
-type KeyHostDetailsNavTabWithoutMlPermission = HostsTableType.authentications &
-  HostsTableType.uncommonProcesses &
-  HostsTableType.events;
-
-type KeyHostDetailsNavTabWithMlPermission = KeyHostsNavTabWithoutMlPermission &
-  HostsTableType.anomalies;
-
-export type KeyHostDetailsNavTab =
-  | KeyHostDetailsNavTabWithoutMlPermission
-  | KeyHostDetailsNavTabWithMlPermission;
-
-export type HostsNavTab = Record<KeyHostsNavTab, NavTab>;
-
-export const navTabsHosts = (hasMlUserPermissions: boolean): HostsNavTab => {
-  const hostsNavTabs = {
-    [HostsTableType.hosts]: {
-      id: HostsTableType.hosts,
-      name: i18n.NAVIGATION_ALL_HOSTS_TITLE,
-      href: getTabsOnHostsUrl(HostsTableType.hosts),
-      disabled: false,
-      urlKey: 'host',
-    },
-    [HostsTableType.authentications]: {
-      id: HostsTableType.authentications,
-      name: i18n.NAVIGATION_AUTHENTICATIONS_TITLE,
-      href: getTabsOnHostsUrl(HostsTableType.authentications),
-      disabled: false,
-      urlKey: 'host',
-    },
-    [HostsTableType.uncommonProcesses]: {
-      id: HostsTableType.uncommonProcesses,
-      name: i18n.NAVIGATION_UNCOMMON_PROCESSES_TITLE,
-      href: getTabsOnHostsUrl(HostsTableType.uncommonProcesses),
-      disabled: false,
-      urlKey: 'host',
-    },
-    [HostsTableType.anomalies]: {
-      id: HostsTableType.anomalies,
-      name: i18n.NAVIGATION_ANOMALIES_TITLE,
-      href: getTabsOnHostsUrl(HostsTableType.anomalies),
-      disabled: false,
-      urlKey: 'host',
-    },
-    [HostsTableType.events]: {
-      id: HostsTableType.events,
-      name: i18n.NAVIGATION_EVENTS_TITLE,
-      href: getTabsOnHostsUrl(HostsTableType.events),
-      disabled: false,
-      urlKey: 'host',
-    },
-  };
-
-  return hasMlUserPermissions ? hostsNavTabs : omit([HostsTableType.anomalies], hostsNavTabs);
-};
-
-export const navTabsHostDetails = (
-  hostName: string,
-  hasMlUserPermissions: boolean
-): Record<KeyHostDetailsNavTab, NavTab> => {
-  const hostDetailsNavTabs = {
-    [HostsTableType.authentications]: {
-      id: HostsTableType.authentications,
-      name: i18n.NAVIGATION_AUTHENTICATIONS_TITLE,
-      href: getTabsOnHostDetailsUrl(hostName, HostsTableType.authentications),
-      disabled: false,
-      urlKey: 'host',
-      isDetailPage: true,
-    },
-    [HostsTableType.uncommonProcesses]: {
-      id: HostsTableType.uncommonProcesses,
-      name: i18n.NAVIGATION_UNCOMMON_PROCESSES_TITLE,
-      href: getTabsOnHostDetailsUrl(hostName, HostsTableType.uncommonProcesses),
-      disabled: false,
-      urlKey: 'host',
-      isDetailPage: true,
-    },
-    [HostsTableType.anomalies]: {
-      id: HostsTableType.anomalies,
-      name: i18n.NAVIGATION_ANOMALIES_TITLE,
-      href: getTabsOnHostDetailsUrl(hostName, HostsTableType.anomalies),
-      disabled: false,
-      urlKey: 'host',
-      isDetailPage: true,
-    },
-    [HostsTableType.events]: {
-      id: HostsTableType.events,
-      name: i18n.NAVIGATION_EVENTS_TITLE,
-      href: getTabsOnHostDetailsUrl(hostName, HostsTableType.events),
-      disabled: false,
-      urlKey: 'host',
-      isDetailPage: true,
-    },
-  };
-
-  return hasMlUserPermissions
-    ? hostDetailsNavTabs
-    : omit(HostsTableType.anomalies, hostDetailsNavTabs);
-};
-
-interface OwnProps {
-  type: hostsModel.HostsType;
-  startDate: number;
-  endDate: number;
-  filterQuery?: string | ESTermQuery;
-  kqlQueryExpression: string;
-}
-export type HostsComponentsQueryProps = OwnProps & {
-  deleteQuery?: ({ id }: { id: string }) => void;
-  indexPattern: StaticIndexPattern;
-  skip: boolean;
-  setQuery: ({
-    id,
-    inspect,
-    loading,
-    refetch,
-  }: {
-    id: string;
-    inspect: InspectQuery | null;
-    loading: boolean;
-    refetch: Refetch;
-  }) => void;
-  updateDateRange?: UpdateDateRange;
-  filterQueryExpression?: string;
-  hostName?: string;
-};
-
-export type AnomaliesQueryTabBodyProps = OwnProps & {
-  skip: boolean;
-  narrowDateRange: NarrowDateRange;
-  hostName?: string;
-};
-
-const AuthenticationTableManage = manageQuery(AuthenticationTable);
-const HostsTableManage = manageQuery(HostsTable);
-const UncommonProcessTableManage = manageQuery(UncommonProcessTable);
-
-export const HostsQueryTabBody = ({
-  deleteQuery,
-  endDate,
-  filterQuery,
-  indexPattern,
-  skip,
-  setQuery,
-  startDate,
-  type,
-}: HostsComponentsQueryProps) => {
-  return (
-    <HostsQuery
-      endDate={endDate}
-      filterQuery={filterQuery}
-      skip={skip}
-      sourceId="default"
-      startDate={startDate}
-      type={type}
-    >
-      {({ hosts, totalCount, loading, pageInfo, loadPage, id, inspect, isInspected, refetch }) => (
-        <HostsTableManage
-          deleteQuery={deleteQuery}
-          data={hosts}
-          fakeTotalCount={getOr(50, 'fakeTotalCount', pageInfo)}
-          id={id}
-          indexPattern={indexPattern}
-          inspect={inspect}
-          isInspect={isInspected}
-          loading={loading}
-          loadPage={loadPage}
-          refetch={refetch}
-          setQuery={setQuery}
-          showMorePagesIndicator={getOr(false, 'showMorePagesIndicator', pageInfo)}
-          totalCount={totalCount}
-          type={type}
-        />
-      )}
-    </HostsQuery>
-  );
-};
-
-export const AuthenticationsQueryTabBody = ({
-  deleteQuery,
-  endDate,
-  filterQuery,
-  skip,
-  setQuery,
-  startDate,
-  type,
-}: HostsComponentsQueryProps) => {
-  return (
-    <AuthenticationsQuery
-      endDate={endDate}
-      filterQuery={filterQuery}
-      skip={skip}
-      sourceId="default"
-      startDate={startDate}
-      type={type}
-    >
-      {({
-        authentications,
-        totalCount,
-        loading,
-        pageInfo,
-        loadPage,
-        id,
-        inspect,
-        isInspected,
-        refetch,
-      }) => {
-        return (
-          <AuthenticationTableManage
-            data={authentications}
-            deleteQuery={deleteQuery}
-            fakeTotalCount={getOr(50, 'fakeTotalCount', pageInfo)}
-            id={id}
-            inspect={inspect}
-            isInspect={isInspected}
-            loading={loading}
-            loadPage={loadPage}
-            refetch={refetch}
-            showMorePagesIndicator={getOr(false, 'showMorePagesIndicator', pageInfo)}
-            setQuery={setQuery}
-            totalCount={totalCount}
-            type={type}
-          />
-        );
-      }}
-    </AuthenticationsQuery>
-  );
-};
-
-export const UncommonProcessTabBody = ({
-  deleteQuery,
-  endDate,
-  filterQuery,
-  skip,
-  setQuery,
-  startDate,
-  type,
-}: HostsComponentsQueryProps) => {
-  return (
-    <UncommonProcessesQuery
-      endDate={endDate}
-      filterQuery={filterQuery}
-      skip={skip}
-      sourceId="default"
-      startDate={startDate}
-      type={type}
-    >
-      {({
-        uncommonProcesses,
-        totalCount,
-        loading,
-        pageInfo,
-        loadPage,
-        id,
-        inspect,
-        isInspected,
-        refetch,
-      }) => (
-        <UncommonProcessTableManage
-          deleteQuery={deleteQuery}
-          data={uncommonProcesses}
-          fakeTotalCount={getOr(50, 'fakeTotalCount', pageInfo)}
-          id={id}
-          inspect={inspect}
-          isInspect={isInspected}
-          loading={loading}
-          loadPage={loadPage}
-          refetch={refetch}
-          setQuery={setQuery}
-          showMorePagesIndicator={getOr(false, 'showMorePagesIndicator', pageInfo)}
-          totalCount={totalCount}
-          type={type}
-        />
-      )}
-    </UncommonProcessesQuery>
-  );
-};
-
-export const AnomaliesTabBody = ({
-  endDate,
-  skip,
-  startDate,
-  type,
-  narrowDateRange,
-  hostName,
-}: AnomaliesQueryTabBodyProps) => {
-  return (
-    <AnomaliesHostTable
-      startDate={startDate}
-      endDate={endDate}
-      skip={skip}
-      type={type}
-      hostName={hostName}
-      narrowDateRange={narrowDateRange}
-    />
-  );
-};
-const EventsOverTimeManage = manageQuery(EventsOverTimeHistogram);
-
-export const EventsTabBody = ({
-  endDate,
-  kqlQueryExpression,
-  startDate,
-  setQuery,
-  filterQuery,
-  updateDateRange = () => {},
-}: HostsComponentsQueryProps) => {
-  const HOSTS_PAGE_TIMELINE_ID = 'hosts-page';
-
-  return (
-    <>
-      <EventsOverTimeQuery
-        endDate={endDate}
-        filterQuery={filterQuery}
-        sourceId="default"
-        startDate={startDate}
-        type={hostsModel.HostsType.page}
-      >
-        {({ eventsOverTime, loading, id, inspect, refetch, totalCount }) => (
-          <EventsOverTimeManage
-            data={eventsOverTime!}
-            endDate={endDate}
-            id={id}
-            inspect={inspect}
-            loading={loading}
-            updateDateRange={updateDateRange}
-            refetch={refetch}
-            setQuery={setQuery}
-            startDate={startDate}
-            totalCount={totalCount}
-          />
-        )}
-      </EventsOverTimeQuery>
-      <EuiSpacer size="l" />
-      <StatefulEventsViewer
-        end={endDate}
-        id={HOSTS_PAGE_TIMELINE_ID}
-        kqlQueryExpression={kqlQueryExpression}
-        start={startDate}
-      />
-    </>
-  );
-};
diff --git a/x-pack/legacy/plugins/siem/public/pages/network/network.tsx b/x-pack/legacy/plugins/siem/public/pages/network/network.tsx
index 3ee0cd23d56437..de75edfb33a4a9 100644
--- a/x-pack/legacy/plugins/siem/public/pages/network/network.tsx
+++ b/x-pack/legacy/plugins/siem/public/pages/network/network.tsx
@@ -5,42 +5,51 @@
  */
 
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
-import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
 import { getOr } from 'lodash/fp';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
+import { RouteComponentProps } from 'react-router-dom';
 import { StickyContainer } from 'react-sticky';
-
+import styled, { css } from 'styled-components';
 import { ActionCreator } from 'typescript-fsa';
-import { RouteComponentProps } from 'react-router-dom';
+
+import { EmbeddedMap } from '../../components/embeddables/embedded_map';
 import { FiltersGlobal } from '../../components/filters_global';
 import { HeaderPage } from '../../components/header_page';
 import { LastEventTime } from '../../components/last_event_time';
+import { AnomaliesNetworkTable } from '../../components/ml/tables/anomalies_network_table';
+import { scoreIntervalToDateTime } from '../../components/ml/score/score_interval_to_datetime';
 import { manageQuery } from '../../components/page/manage_query';
 import { KpiNetworkComponent, NetworkTopNFlowTable } from '../../components/page/network';
 import { NetworkDnsTable } from '../../components/page/network/network_dns_table';
 import { GlobalTime } from '../../containers/global_time';
 import { KpiNetworkQuery } from '../../containers/kpi_network';
+import { NetworkFilter } from '../../containers/network';
 import { NetworkDnsQuery } from '../../containers/network_dns';
 import { NetworkTopNFlowQuery } from '../../containers/network_top_n_flow';
 import { indicesExistOrDataTemporarilyUnavailable, WithSource } from '../../containers/source';
 import { FlowTargetNew, LastEventIndexKey } from '../../graphql/types';
 import { networkModel, networkSelectors, State } from '../../store';
-
-import { NetworkKql } from './kql';
-import { NetworkEmptyPage } from './network_empty_page';
-import * as i18n from './translations';
-import { AnomaliesNetworkTable } from '../../components/ml/tables/anomalies_network_table';
-import { scoreIntervalToDateTime } from '../../components/ml/score/score_interval_to_datetime';
 import { setAbsoluteRangeDatePicker as dispatchSetAbsoluteRangeDatePicker } from '../../store/inputs/actions';
 import { InputsModelId } from '../../store/inputs/constants';
-import { EmbeddedMap } from '../../components/embeddables/embedded_map';
-import { NetworkFilter } from '../../containers/network';
 import { SpyRoute } from '../../utils/route/spy_routes';
+import { NetworkKql } from './kql';
+import { NetworkEmptyPage } from './network_empty_page';
+import * as i18n from './translations';
 
 const NetworkTopNFlowTableManage = manageQuery(NetworkTopNFlowTable);
 const NetworkDnsTableManage = manageQuery(NetworkDnsTable);
 const KpiNetworkComponentManage = manageQuery(KpiNetworkComponent);
+
+const ConditionalFlexGroup = styled(EuiFlexGroup)`
+  ${({ theme }) => css`
+    @media only screen and (min-width: 1441px) {
+      flex-direction: row;
+    }
+  `}
+`;
+ConditionalFlexGroup.displayName = 'ConditionalFlexGroup';
+
 interface NetworkComponentReduxProps {
   filterQuery: string;
   queryExpression: string;
@@ -52,27 +61,6 @@ interface NetworkComponentReduxProps {
 }
 
 type NetworkComponentProps = NetworkComponentReduxProps & Partial<RouteComponentProps<{}>>;
-const mediaMatch = window.matchMedia(
-  'screen and (min-width: ' + euiLightVars.euiBreakpoints.xl + ')'
-);
-const getFlexDirectionByMediaMatch = (): 'row' | 'column' => {
-  const { matches } = mediaMatch;
-  return matches ? 'row' : 'column';
-};
-export const getFlexDirection = () => {
-  const [display, setDisplay] = useState(getFlexDirectionByMediaMatch());
-
-  useEffect(() => {
-    const setFromEvent = () => setDisplay(getFlexDirectionByMediaMatch());
-    window.addEventListener('resize', setFromEvent);
-
-    return () => {
-      window.removeEventListener('resize', setFromEvent);
-    };
-  }, []);
-
-  return display;
-};
 
 const NetworkComponent = React.memo<NetworkComponentProps>(
   ({ filterQuery, queryExpression, setAbsoluteRangeDatePicker }) => (
@@ -108,6 +96,7 @@ const NetworkComponent = React.memo<NetworkComponentProps>(
                         />
                       )}
                     </NetworkFilter>
+
                     <KpiNetworkQuery
                       endDate={to}
                       filterQuery={filterQuery}
@@ -134,7 +123,7 @@ const NetworkComponent = React.memo<NetworkComponentProps>(
 
                     <EuiSpacer />
 
-                    <EuiFlexGroup direction={getFlexDirection()}>
+                    <ConditionalFlexGroup direction="column">
                       <EuiFlexItem>
                         <NetworkTopNFlowQuery
                           endDate={to}
@@ -224,7 +213,7 @@ const NetworkComponent = React.memo<NetworkComponentProps>(
                           )}
                         </NetworkTopNFlowQuery>
                       </EuiFlexItem>
-                    </EuiFlexGroup>
+                    </ConditionalFlexGroup>
 
                     <EuiSpacer />
 
diff --git a/x-pack/legacy/plugins/siem/public/pages/timelines/timelines_page.tsx b/x-pack/legacy/plugins/siem/public/pages/timelines/timelines_page.tsx
index adc5471cc37a7a..90eae605de4b7e 100644
--- a/x-pack/legacy/plugins/siem/public/pages/timelines/timelines_page.tsx
+++ b/x-pack/legacy/plugins/siem/public/pages/timelines/timelines_page.tsx
@@ -28,22 +28,18 @@ type OwnProps = TimelinesProps;
 
 export const DEFAULT_SEARCH_RESULTS_PER_PAGE = 10;
 
-export class TimelinesPage extends React.PureComponent<OwnProps> {
-  public render() {
-    return (
-      <>
-        <HeaderPage title={i18n.PAGE_TITLE} />
-
-        <TimelinesContainer>
-          <StatefulOpenTimeline
-            apolloClient={this.props.apolloClient}
-            defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
-            isModal={false}
-            title={i18n.ALL_TIMELINES_PANEL_TITLE}
-          />
-        </TimelinesContainer>
-        <SpyRoute />
-      </>
-    );
-  }
-}
+export const TimelinesPage = React.memo<OwnProps>(({ apolloClient }) => (
+  <>
+    <HeaderPage title={i18n.PAGE_TITLE} />
+
+    <TimelinesContainer>
+      <StatefulOpenTimeline
+        apolloClient={apolloClient}
+        defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
+        isModal={false}
+        title={i18n.ALL_TIMELINES_PANEL_TITLE}
+      />
+    </TimelinesContainer>
+    <SpyRoute />
+  </>
+));
diff --git a/x-pack/legacy/plugins/siem/public/store/store.ts b/x-pack/legacy/plugins/siem/public/store/store.ts
index ce1e37569fff19..b56132967d1e3a 100644
--- a/x-pack/legacy/plugins/siem/public/store/store.ts
+++ b/x-pack/legacy/plugins/siem/public/store/store.ts
@@ -16,9 +16,10 @@ import { inputsSelectors } from './inputs';
 import { State, initialState, reducer } from './reducer';
 import { createRootEpic } from './epic';
 
+type ComposeType = typeof compose;
 declare global {
   interface Window {
-    __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: typeof compose;
+    __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: ComposeType;
   }
 }
 let store: Store<State, Action> | null = null;
diff --git a/x-pack/legacy/plugins/siem/server/graphql/source_status/resolvers.ts b/x-pack/legacy/plugins/siem/server/graphql/source_status/resolvers.ts
index e0597d19a59daf..24589822f0250e 100644
--- a/x-pack/legacy/plugins/siem/server/graphql/source_status/resolvers.ts
+++ b/x-pack/legacy/plugins/siem/server/graphql/source_status/resolvers.ts
@@ -31,9 +31,21 @@ export const createSourceStatusResolvers = (libs: {
 } => ({
   SourceStatus: {
     async indicesExist(source, args, { req }) {
+      if (
+        args.defaultIndex.length === 1 &&
+        (args.defaultIndex[0] === '' || args.defaultIndex[0] === '_all')
+      ) {
+        return false;
+      }
       return libs.sourceStatus.hasIndices(req, args.defaultIndex);
     },
     async indexFields(source, args, { req }) {
+      if (
+        args.defaultIndex.length === 1 &&
+        (args.defaultIndex[0] === '' || args.defaultIndex[0] === '_all')
+      ) {
+        return [];
+      }
       return libs.fields.getFields(req, args.defaultIndex);
     },
   },
diff --git a/x-pack/legacy/plugins/siem/server/lib/detection_engine/README.md b/x-pack/legacy/plugins/siem/server/lib/detection_engine/README.md
new file mode 100644
index 00000000000000..063e7c1975b25b
--- /dev/null
+++ b/x-pack/legacy/plugins/siem/server/lib/detection_engine/README.md
@@ -0,0 +1,126 @@
+Temporary README.md for developers working on the backend detection engine
+for how to get started.
+
+See these two other pages for references:
+https://github.com/elastic/kibana/blob/master/x-pack/legacy/plugins/alerting/README.md
+https://github.com/elastic/kibana/tree/master/x-pack/legacy/plugins/actions
+
+Since there is no UI yet and a lot of backend areas that are not created, you 
+should install the kbn-action and kbn-alert project from here:
+https://github.com/pmuellr/kbn-action
+
+Add your signal mappings into your Kibana instance manually by opening
+
+```
+x-pack/legacy/plugins/siem/server/lib/detection_engine/signals_mapping.json
+```
+
+And copying that to your DEV tools so it looks something like:
+```
+PUT /.siem-signals-10-01-2019
+{
+  "mappings": {
+    "dynamic": false,
+...
+```
+
+We will solve the above issue here:
+https://github.com/elastic/kibana/issues/47002
+
+Add these lines to your `kibana.dev.yml` to turn on the feature toggles of alerting and actions:
+```
+# Feature flag to turn on alerting
+xpack.alerting.enabled: true
+
+# Feature flag to turn on actions which goes with alerting
+xpack.actions.enabled: true
+
+# White list everything for ease of development (do not do in production)
+xpack.actions.whitelistedHosts: ['*']
+```
+
+Open `x-pack/legacy/plugins/siem/index.ts` and find these lines and add the require statement
+while commenting out the other require statement:
+
+```
+// Uncomment these lines to turn on alerting and action for detection engine and comment the other
+// require statement out. These are hidden behind feature flags at the moment so if you turn
+// these on without the feature flags turned on then Kibana will crash since we are a legacy plugin
+// and legacy plugins cannot have optional requirements.
+// require: ['kibana', 'elasticsearch', 'alerting', 'actions'],
+```
+
+Restart Kibana and you should see alerting and actions starting up
+```
+server    log   [22:05:22.277] [info][status][plugin:alerting@8.0.0] Status changed from uninitialized to green - Ready
+server    log   [22:05:22.270] [info][status][plugin:actions@8.0.0] Status changed from uninitialized to green - Ready
+```
+
+Open a terminal and run
+
+```sh
+kbn-alert ls-types
+```
+
+You should see the new alert type of:
+
+```ts
+[
+    {
+        "id": "siem.signals",
+        "name": "SIEM Signals"
+    }
+]
+```
+
+Setup SIEM Alerts Log action through
+
+```ts
+kbn-action create .server-log "SIEM Alerts Log" {} {}
+{
+    "id": "7edd7e98-9286-4fdb-a5c5-16de776bc7c7",
+    "actionTypeId": ".server-log",
+    "description": "SIEM Alerts Log",
+    "config": {}
+}
+```
+
+Take note of the `id` GUID above and copy and paste that into a create alert like so
+
+```ts
+kbn-alert create siem.signals 5m '{}' "[{group:default id:'7edd7e98-9286-4fdb-a5c5-16de776bc7c7' params:{message: 'SIEM Alert Fired'}}]"
+```
+
+You should get back a response like so
+```ts
+{
+    "id": "908a6af1-ac63-4d52-a856-fc635a00db0f",
+    "alertTypeId": "siem.signals",
+    "interval": "5m",
+    "actions": [
+        {
+            "group": "default",
+            "params": {
+                "message": "SIEM Alert Fired"
+            },
+            "id": "7edd7e98-9286-4fdb-a5c5-16de776bc7c7"
+        }
+    ],
+    "alertTypeParams": {},
+    "enabled": true,
+    "throttle": null,
+    "createdBy": "elastic",
+    "updatedBy": "elastic",
+    "apiKeyOwner": "elastic",
+    "scheduledTaskId": "4f401ca0-e402-11e9-94ed-051d758a6c79"
+}
+```
+
+Every 5 minutes you should see this message in your terminal now:
+
+```
+server    log   [22:17:33.945] [info][alerting] SIEM Alert Fired
+```
+
+Add the `.siem-signals-10-01-2019` to your advanced SIEM settings to see any signals
+created which should update once every 5 minutes at this point.
\ No newline at end of file
diff --git a/x-pack/legacy/plugins/siem/server/lib/detection_engine/alerts/build_events_query.ts b/x-pack/legacy/plugins/siem/server/lib/detection_engine/alerts/build_events_query.ts
new file mode 100644
index 00000000000000..6f780744b17b69
--- /dev/null
+++ b/x-pack/legacy/plugins/siem/server/lib/detection_engine/alerts/build_events_query.ts
@@ -0,0 +1,88 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+// TODO: See build_events_reindex.ts for all the spots to make things "configurable"
+// here but this is intended to replace the build_events_reindex.ts
+export const buildEventsQuery = () => {
+  return {
+    allowNoIndices: true,
+    index: ['auditbeat-*', 'filebeat-*', 'packetbeat-*', 'winlogbeat-*'],
+    ignoreUnavailable: true,
+    body: {
+      query: {
+        bool: {
+          filter: [
+            {
+              bool: {
+                filter: [
+                  {
+                    bool: {
+                      should: [
+                        {
+                          match_phrase: {
+                            'user.name': 'root',
+                          },
+                        },
+                      ],
+                      minimum_should_match: 1,
+                    },
+                  },
+                  {
+                    bool: {
+                      filter: [
+                        {
+                          bool: {
+                            should: [
+                              {
+                                range: {
+                                  '@timestamp': {
+                                    gte: 1567317600000,
+                                  },
+                                },
+                              },
+                            ],
+                            minimum_should_match: 1,
+                          },
+                        },
+                        {
+                          bool: {
+                            should: [
+                              {
+                                range: {
+                                  '@timestamp': {
+                                    lte: 1569909599999,
+                                  },
+                                },
+                              },
+                            ],
+                            minimum_should_match: 1,
+                          },
+                        },
+                      ],
+                    },
+                  },
+                ],
+              },
+            },
+            {
+              match_all: {},
+            },
+          ],
+        },
+      },
+      size: 26,
+      track_total_hits: true,
+      sort: [
+        {
+          '@timestamp': 'desc',
+        },
+        {
+          _doc: 'desc',
+        },
+      ],
+    },
+  };
+};
diff --git a/x-pack/legacy/plugins/siem/server/lib/detection_engine/alerts/build_events_reindex.ts b/x-pack/legacy/plugins/siem/server/lib/detection_engine/alerts/build_events_reindex.ts
new file mode 100644
index 00000000000000..84cedca0855e0d
--- /dev/null
+++ b/x-pack/legacy/plugins/siem/server/lib/detection_engine/alerts/build_events_reindex.ts
@@ -0,0 +1,141 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+// TODO: Re-index is just a temporary solution in order to speed up development
+// of any front end pieces. This should be replaced with a combination of the file
+// build_events_query.ts and any scrolling/scaling solutions from that particular
+// file.
+
+interface BuildEventsReIndexParams {
+  index: string[];
+  from: number;
+  to: number;
+  signalsIndex: string;
+  maxDocs: number;
+  kqlFilter: {};
+  severity: number;
+  description: string;
+  name: string;
+  timeDetected: number;
+  ruleRevision: number;
+  ruleId: string;
+  ruleType: string;
+  references: string[];
+}
+
+export const buildEventsReIndex = ({
+  index,
+  from,
+  to,
+  signalsIndex,
+  maxDocs,
+  kqlFilter,
+  severity,
+  description,
+  name,
+  timeDetected,
+  ruleRevision,
+  ruleId,
+  ruleType,
+  references,
+}: BuildEventsReIndexParams) => {
+  const indexPatterns = index.map(element => `"${element}"`).join(',');
+  const refs = references.map(element => `"${element}"`).join(',');
+  const filter = [
+    kqlFilter,
+    {
+      bool: {
+        filter: [
+          {
+            bool: {
+              should: [
+                {
+                  range: {
+                    '@timestamp': {
+                      gte: from,
+                    },
+                  },
+                },
+              ],
+              minimum_should_match: 1,
+            },
+          },
+          {
+            bool: {
+              should: [
+                {
+                  range: {
+                    '@timestamp': {
+                      lte: to,
+                    },
+                  },
+                },
+              ],
+              minimum_should_match: 1,
+            },
+          },
+        ],
+      },
+    },
+  ];
+  return {
+    body: {
+      source: {
+        index,
+        sort: [
+          {
+            '@timestamp': 'desc',
+          },
+          {
+            _doc: 'desc',
+          },
+        ],
+        query: {
+          bool: {
+            filter: [
+              ...filter,
+              {
+                match_all: {},
+              },
+            ],
+          },
+        },
+      },
+      dest: {
+        index: signalsIndex,
+      },
+      script: {
+        source: `
+          String[] indexPatterns = new String[] {${indexPatterns}};
+          String[] references = new String[] {${refs}};
+
+          def parent = [
+            "id": ctx._id,
+            "type": "event",
+            "depth": 1
+          ];
+
+          def signal = [
+            "rule_revision": "${ruleRevision}",
+            "rule_id": "${ruleId}",
+            "rule_type": "${ruleType}",
+            "parent": parent,
+            "name": "${name}",
+            "severity": ${severity},
+            "description": "${description}",
+            "time_detected": "${timeDetected}",
+            "index_patterns": indexPatterns,
+            "references": references
+          ];
+
+          ctx._source.signal = signal;
+        `,
+        lang: 'painless',
+      },
+      max_docs: maxDocs,
+    },
+  };
+};
diff --git a/x-pack/legacy/plugins/siem/server/lib/detection_engine/alerts/signals_alert_type.ts b/x-pack/legacy/plugins/siem/server/lib/detection_engine/alerts/signals_alert_type.ts
new file mode 100644
index 00000000000000..d0b631f66d54d7
--- /dev/null
+++ b/x-pack/legacy/plugins/siem/server/lib/detection_engine/alerts/signals_alert_type.ts
@@ -0,0 +1,82 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import moment from 'moment';
+import { APP_ID } from '../../../../common/constants';
+import { AlertType, AlertExecutorOptions } from '../../../../../alerting';
+
+// TODO: Remove this for the build_events_query call eventually
+import { buildEventsReIndex } from './build_events_reindex';
+
+// TODO: Comment this in and use this instead of the reIndex API
+// once scrolling and other things are done with it.
+// import { buildEventsQuery } from './build_events_query';
+
+export const signalsAlertType: AlertType = {
+  id: `${APP_ID}.signals`,
+  name: 'SIEM Signals',
+  actionGroups: ['default'],
+  async executor({ services, params, state }: AlertExecutorOptions) {
+    // TODO: We need to swap out this arbitrary number of siem-signal id for an injected
+    // data driven instance id through passed in parameters.
+    const instance = services.alertInstanceFactory('siem-signals');
+
+    // TODO: Comment this in eventually and use the buildEventsQuery()
+    // for scrolling and other fun stuff instead of using the buildEventsReIndex()
+    // const query = buildEventsQuery();
+
+    // TODO: Turn these options being sent in into a template for the alert type
+    const reIndex = buildEventsReIndex({
+      index: ['auditbeat-*', 'filebeat-*', 'packetbeat-*', 'winlogbeat-*'],
+      from: moment()
+        .subtract(5, 'minutes')
+        .valueOf(),
+      to: Date.now(),
+      signalsIndex: '.siem-signals-10-01-2019',
+      severity: 2,
+      description: 'User root activity',
+      name: 'User Rule',
+      timeDetected: Date.now(),
+      kqlFilter: {
+        bool: {
+          should: [
+            {
+              match_phrase: {
+                'user.name': 'root',
+              },
+            },
+          ],
+          minimum_should_match: 1,
+        },
+      },
+      maxDocs: 100,
+      ruleRevision: 1,
+      ruleId: '1',
+      ruleType: 'KQL',
+      references: ['https://www.elastic.co', 'https://example.com'],
+    });
+
+    try {
+      services.log(['info', 'SIEM'], 'Starting SIEM signal job');
+
+      // TODO: Comment this in eventually and use this for manual insertion of the
+      // signals instead of the ReIndex() api
+      // const result = await services.callCluster('search', query);
+      // eslint-disable-next-line
+      const result = await services.callCluster('reindex', reIndex);
+
+      // TODO: Error handling here and writing of any errors that come back from ES by
+      services.log(['info', 'SIEM'], `Result of reindex: ${JSON.stringify(result, null, 2)}`);
+    } catch (err) {
+      // TODO: Error handling and writing of errors into a signal that has error
+      // handling/conditions
+      services.log(['error', 'SIEM'], `You encountered an error of: ${err.message}`);
+    }
+
+    // Schedule the default action which is nothing if it's a plain signal.
+    instance.scheduleActions('default');
+  },
+};
diff --git a/x-pack/legacy/plugins/siem/server/lib/detection_engine/signals_mapping.json b/x-pack/legacy/plugins/siem/server/lib/detection_engine/signals_mapping.json
new file mode 100644
index 00000000000000..4f1e07e2f5d762
--- /dev/null
+++ b/x-pack/legacy/plugins/siem/server/lib/detection_engine/signals_mapping.json
@@ -0,0 +1,1644 @@
+{
+  "mappings": {
+    "dynamic": false,
+    "properties": {
+      "@timestamp": {
+        "type": "date"
+      },
+      "signal": {
+        "properties": {
+          "parent": {
+            "properties": {
+              "id": {
+                "type": "keyword"
+              },
+              "type": {
+                "type": "keyword"
+              },
+              "depth": {
+                "type": "long"
+              }
+            }
+          },
+          "time_detected": {
+            "type": "date"
+          },
+          "rule_revision": {
+            "type": "long"
+          },
+          "rule_id": {
+            "type": "keyword"
+          },
+          "rule_type": {
+            "type": "keyword"
+          },
+          "rule_query": {
+            "type": "keyword"
+          },
+          "index_patterns": {
+            "type": "keyword"
+          },
+          "name": {
+            "type": "keyword"
+          },
+          "description": {
+            "type": "text"
+          },
+          "severity": {
+            "type": "long"
+          },
+          "references": {
+            "type": "text"
+          },
+          "error": {
+            "properties": {
+              "code": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "id": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "message": {
+                "type": "text",
+                "norms": false
+              },
+              "type": {
+                "type": "keyword",
+                "ignore_above": 1024
+              }
+            }
+          }
+        }
+      },
+      "agent": {
+        "properties": {
+          "ephemeral_id": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "hostname": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "id": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "name": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "type": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "version": {
+            "type": "keyword",
+            "ignore_above": 1024
+          }
+        }
+      },
+      "client": {
+        "properties": {
+          "address": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "bytes": {
+            "type": "long"
+          },
+          "domain": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "geo": {
+            "properties": {
+              "city_name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "continent_name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "country_iso_code": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "country_name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "location": {
+                "type": "geo_point"
+              },
+              "name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "region_iso_code": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "region_name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              }
+            }
+          },
+          "ip": {
+            "type": "ip"
+          },
+          "mac": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "packets": {
+            "type": "long"
+          },
+          "port": {
+            "type": "long"
+          },
+          "user": {
+            "properties": {
+              "email": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "full_name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "group": {
+                "properties": {
+                  "id": {
+                    "type": "keyword",
+                    "ignore_above": 1024
+                  },
+                  "name": {
+                    "type": "keyword",
+                    "ignore_above": 1024
+                  }
+                }
+              },
+              "hash": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "id": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              }
+            }
+          }
+        }
+      },
+      "cloud": {
+        "properties": {
+          "account": {
+            "properties": {
+              "id": {
+                "type": "keyword",
+                "ignore_above": 1024
+              }
+            }
+          },
+          "availability_zone": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "instance": {
+            "properties": {
+              "id": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              }
+            }
+          },
+          "machine": {
+            "properties": {
+              "type": {
+                "type": "keyword",
+                "ignore_above": 1024
+              }
+            }
+          },
+          "project": {
+            "properties": {
+              "id": {
+                "type": "keyword",
+                "ignore_above": 1024
+              }
+            }
+          },
+          "provider": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "region": {
+            "type": "keyword",
+            "ignore_above": 1024
+          }
+        }
+      },
+      "container": {
+        "properties": {
+          "id": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "image": {
+            "properties": {
+              "name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "tag": {
+                "type": "keyword",
+                "ignore_above": 1024
+              }
+            }
+          },
+          "labels": {
+            "type": "object"
+          },
+          "name": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "runtime": {
+            "type": "keyword",
+            "ignore_above": 1024
+          }
+        }
+      },
+      "destination": {
+        "properties": {
+          "address": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "bytes": {
+            "type": "long"
+          },
+          "domain": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "geo": {
+            "properties": {
+              "city_name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "continent_name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "country_iso_code": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "country_name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "location": {
+                "type": "geo_point"
+              },
+              "name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "region_iso_code": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "region_name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              }
+            }
+          },
+          "ip": {
+            "type": "ip"
+          },
+          "mac": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "packets": {
+            "type": "long"
+          },
+          "path": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "port": {
+            "type": "long"
+          },
+          "user": {
+            "properties": {
+              "email": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "full_name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "group": {
+                "properties": {
+                  "id": {
+                    "type": "keyword",
+                    "ignore_above": 1024
+                  },
+                  "name": {
+                    "type": "keyword",
+                    "ignore_above": 1024
+                  }
+                }
+              },
+              "hash": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "id": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              }
+            }
+          }
+        }
+      },
+      "ecs": {
+        "properties": {
+          "version": {
+            "type": "keyword",
+            "ignore_above": 1024
+          }
+        }
+      },
+      "error": {
+        "properties": {
+          "code": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "id": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "message": {
+            "type": "text",
+            "norms": false
+          },
+          "type": {
+            "type": "keyword",
+            "ignore_above": 1024
+          }
+        }
+      },
+      "event": {
+        "properties": {
+          "action": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "category": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "created": {
+            "type": "date"
+          },
+          "dataset": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "duration": {
+            "type": "long"
+          },
+          "end": {
+            "type": "date"
+          },
+          "hash": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "id": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "kind": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "module": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "origin": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "original": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "outcome": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "risk_score": {
+            "type": "float"
+          },
+          "risk_score_norm": {
+            "type": "float"
+          },
+          "severity": {
+            "type": "long"
+          },
+          "start": {
+            "type": "date"
+          },
+          "timezone": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "type": {
+            "type": "keyword",
+            "ignore_above": 1024
+          }
+        }
+      },
+      "file": {
+        "properties": {
+          "ctime": {
+            "type": "date"
+          },
+          "device": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "extension": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "gid": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "group": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "inode": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "mode": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "mtime": {
+            "type": "date"
+          },
+          "origin": {
+            "type": "keyword",
+            "fields": {
+              "raw": {
+                "type": "keyword",
+                "ignore_above": 1024
+              }
+            },
+            "ignore_above": 1024
+          },
+          "owner": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "path": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "selinux": {
+            "properties": {
+              "domain": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "level": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "role": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "user": {
+                "type": "keyword",
+                "ignore_above": 1024
+              }
+            }
+          },
+          "setgid": {
+            "type": "boolean"
+          },
+          "setuid": {
+            "type": "boolean"
+          },
+          "size": {
+            "type": "long"
+          },
+          "target_path": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "type": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "uid": {
+            "type": "keyword",
+            "ignore_above": 1024
+          }
+        }
+      },
+      "geo": {
+        "properties": {
+          "city_name": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "continent_name": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "country_iso_code": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "country_name": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "location": {
+            "type": "geo_point"
+          },
+          "name": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "region_iso_code": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "region_name": {
+            "type": "keyword",
+            "ignore_above": 1024
+          }
+        }
+      },
+      "group": {
+        "properties": {
+          "id": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "name": {
+            "type": "keyword",
+            "ignore_above": 1024
+          }
+        }
+      },
+      "hash": {
+        "properties": {
+          "blake2b_256": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "blake2b_384": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "blake2b_512": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "md5": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "sha1": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "sha224": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "sha256": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "sha384": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "sha3_224": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "sha3_256": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "sha3_384": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "sha3_512": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "sha512": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "sha512_224": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "sha512_256": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "xxh64": {
+            "type": "keyword",
+            "ignore_above": 1024
+          }
+        }
+      },
+      "host": {
+        "properties": {
+          "architecture": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "containerized": {
+            "type": "boolean"
+          },
+          "geo": {
+            "properties": {
+              "city_name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "continent_name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "country_iso_code": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "country_name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "location": {
+                "type": "geo_point"
+              },
+              "name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "region_iso_code": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "region_name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              }
+            }
+          },
+          "hostname": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "id": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "ip": {
+            "type": "ip"
+          },
+          "mac": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "name": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "os": {
+            "properties": {
+              "build": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "codename": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "family": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "full": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "kernel": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "platform": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "version": {
+                "type": "keyword",
+                "ignore_above": 1024
+              }
+            }
+          },
+          "type": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "user": {
+            "properties": {
+              "email": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "full_name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "group": {
+                "properties": {
+                  "id": {
+                    "type": "keyword",
+                    "ignore_above": 1024
+                  },
+                  "name": {
+                    "type": "keyword",
+                    "ignore_above": 1024
+                  }
+                }
+              },
+              "hash": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "id": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              }
+            }
+          }
+        }
+      },
+      "http": {
+        "properties": {
+          "request": {
+            "properties": {
+              "body": {
+                "properties": {
+                  "bytes": {
+                    "type": "long"
+                  },
+                  "content": {
+                    "type": "keyword",
+                    "ignore_above": 1024
+                  }
+                }
+              },
+              "bytes": {
+                "type": "long"
+              },
+              "method": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "referrer": {
+                "type": "keyword",
+                "ignore_above": 1024
+              }
+            }
+          },
+          "response": {
+            "properties": {
+              "body": {
+                "properties": {
+                  "bytes": {
+                    "type": "long"
+                  },
+                  "content": {
+                    "type": "keyword",
+                    "ignore_above": 1024
+                  }
+                }
+              },
+              "bytes": {
+                "type": "long"
+              },
+              "status_code": {
+                "type": "long"
+              }
+            }
+          },
+          "version": {
+            "type": "keyword",
+            "ignore_above": 1024
+          }
+        }
+      },
+      "labels": {
+        "type": "object"
+      },
+      "log": {
+        "properties": {
+          "level": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "original": {
+            "type": "keyword",
+            "ignore_above": 1024
+          }
+        }
+      },
+      "message": {
+        "type": "text",
+        "norms": false
+      },
+      "network": {
+        "properties": {
+          "application": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "bytes": {
+            "type": "long"
+          },
+          "community_id": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "direction": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "forwarded_ip": {
+            "type": "ip"
+          },
+          "iana_number": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "name": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "packets": {
+            "type": "long"
+          },
+          "protocol": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "transport": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "type": {
+            "type": "keyword",
+            "ignore_above": 1024
+          }
+        }
+      },
+      "observer": {
+        "properties": {
+          "geo": {
+            "properties": {
+              "city_name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "continent_name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "country_iso_code": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "country_name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "location": {
+                "type": "geo_point"
+              },
+              "name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "region_iso_code": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "region_name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              }
+            }
+          },
+          "hostname": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "ip": {
+            "type": "ip"
+          },
+          "mac": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "os": {
+            "properties": {
+              "family": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "full": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "kernel": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "platform": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "version": {
+                "type": "keyword",
+                "ignore_above": 1024
+              }
+            }
+          },
+          "serial_number": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "type": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "vendor": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "version": {
+            "type": "keyword",
+            "ignore_above": 1024
+          }
+        }
+      },
+      "organization": {
+        "properties": {
+          "id": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "name": {
+            "type": "keyword",
+            "ignore_above": 1024
+          }
+        }
+      },
+      "os": {
+        "properties": {
+          "family": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "full": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "kernel": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "name": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "platform": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "version": {
+            "type": "keyword",
+            "ignore_above": 1024
+          }
+        }
+      },
+      "process": {
+        "properties": {
+          "args": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "created": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "entity_id": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "executable": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "hash": {
+            "properties": {
+              "sha1": {
+                "type": "keyword",
+                "ignore_above": 1024
+              }
+            }
+          },
+          "name": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "pid": {
+            "type": "long"
+          },
+          "ppid": {
+            "type": "long"
+          },
+          "start": {
+            "type": "date"
+          },
+          "thread": {
+            "properties": {
+              "id": {
+                "type": "long"
+              }
+            }
+          },
+          "title": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "working_directory": {
+            "type": "keyword",
+            "ignore_above": 1024
+          }
+        }
+      },
+      "related": {
+        "properties": {
+          "ip": {
+            "type": "ip"
+          }
+        }
+      },
+      "server": {
+        "properties": {
+          "address": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "bytes": {
+            "type": "long"
+          },
+          "domain": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "geo": {
+            "properties": {
+              "city_name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "continent_name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "country_iso_code": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "country_name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "location": {
+                "type": "geo_point"
+              },
+              "name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "region_iso_code": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "region_name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              }
+            }
+          },
+          "ip": {
+            "type": "ip"
+          },
+          "mac": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "packets": {
+            "type": "long"
+          },
+          "port": {
+            "type": "long"
+          },
+          "user": {
+            "properties": {
+              "email": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "full_name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "group": {
+                "properties": {
+                  "id": {
+                    "type": "keyword",
+                    "ignore_above": 1024
+                  },
+                  "name": {
+                    "type": "keyword",
+                    "ignore_above": 1024
+                  }
+                }
+              },
+              "hash": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "id": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              }
+            }
+          }
+        }
+      },
+      "service": {
+        "properties": {
+          "ephemeral_id": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "id": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "name": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "state": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "type": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "version": {
+            "type": "keyword",
+            "ignore_above": 1024
+          }
+        }
+      },
+      "source": {
+        "properties": {
+          "address": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "bytes": {
+            "type": "long"
+          },
+          "domain": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "geo": {
+            "properties": {
+              "city_name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "continent": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "continent_name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "country_iso_code": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "country_name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "location": {
+                "type": "geo_point"
+              },
+              "name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "region_iso_code": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "region_name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              }
+            }
+          },
+          "ip": {
+            "type": "ip"
+          },
+          "mac": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "packets": {
+            "type": "long"
+          },
+          "path": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "port": {
+            "type": "long"
+          },
+          "user": {
+            "properties": {
+              "email": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "full_name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "group": {
+                "properties": {
+                  "id": {
+                    "type": "keyword",
+                    "ignore_above": 1024
+                  },
+                  "name": {
+                    "type": "keyword",
+                    "ignore_above": 1024
+                  }
+                }
+              },
+              "hash": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "id": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              }
+            }
+          }
+        }
+      },
+      "tags": {
+        "type": "keyword",
+        "ignore_above": 1024
+      },
+      "url": {
+        "properties": {
+          "domain": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "fragment": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "full": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "original": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "password": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "path": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "port": {
+            "type": "long"
+          },
+          "query": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "scheme": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "username": {
+            "type": "keyword",
+            "ignore_above": 1024
+          }
+        }
+      },
+      "user": {
+        "properties": {
+          "audit": {
+            "properties": {
+              "id": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              }
+            }
+          },
+          "effective": {
+            "properties": {
+              "group": {
+                "properties": {
+                  "id": {
+                    "type": "keyword",
+                    "ignore_above": 1024
+                  },
+                  "name": {
+                    "type": "keyword",
+                    "ignore_above": 1024
+                  }
+                }
+              },
+              "id": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              }
+            }
+          },
+          "email": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "entity_id": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "filesystem": {
+            "properties": {
+              "group": {
+                "properties": {
+                  "id": {
+                    "type": "keyword",
+                    "ignore_above": 1024
+                  },
+                  "name": {
+                    "type": "keyword",
+                    "ignore_above": 1024
+                  }
+                }
+              },
+              "id": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              }
+            }
+          },
+          "full_name": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "group": {
+            "properties": {
+              "id": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              }
+            }
+          },
+          "hash": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "id": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "name": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "name_map": {
+            "type": "object"
+          },
+          "saved": {
+            "properties": {
+              "group": {
+                "properties": {
+                  "id": {
+                    "type": "keyword",
+                    "ignore_above": 1024
+                  },
+                  "name": {
+                    "type": "keyword",
+                    "ignore_above": 1024
+                  }
+                }
+              },
+              "id": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              }
+            }
+          },
+          "selinux": {
+            "properties": {
+              "category": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "domain": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "level": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "role": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "user": {
+                "type": "keyword",
+                "ignore_above": 1024
+              }
+            }
+          },
+          "terminal": {
+            "type": "keyword",
+            "ignore_above": 1024
+          }
+        }
+      },
+      "user_agent": {
+        "properties": {
+          "device": {
+            "properties": {
+              "name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              }
+            }
+          },
+          "name": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "original": {
+            "type": "keyword",
+            "ignore_above": 1024
+          },
+          "os": {
+            "properties": {
+              "family": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "full": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "kernel": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "name": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "platform": {
+                "type": "keyword",
+                "ignore_above": 1024
+              },
+              "version": {
+                "type": "keyword",
+                "ignore_above": 1024
+              }
+            }
+          },
+          "version": {
+            "type": "keyword",
+            "ignore_above": 1024
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/helpers/constant.ts b/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/helpers/constant.ts
index 372b5bc6f65296..1fb6aa8686b7e1 100644
--- a/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/helpers/constant.ts
+++ b/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/helpers/constant.ts
@@ -4,7 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { getRepository } from '../../../test/fixtures';
+import { getRepository, getPolicy } from '../../../test/fixtures';
+
 export const REPOSITORY_NAME = 'my-test-repository';
 
 export const REPOSITORY_EDIT = getRepository({ name: REPOSITORY_NAME });
+
+export const POLICY_NAME = 'my-test-policy';
+
+export const POLICY_EDIT = getPolicy({ name: POLICY_NAME });
diff --git a/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/helpers/http_requests.ts b/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/helpers/http_requests.ts
index dd9d51a9990cc4..d9f2c1b510a145 100644
--- a/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/helpers/http_requests.ts
+++ b/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/helpers/http_requests.ts
@@ -72,6 +72,37 @@ const registerHttpRequestMockHelpers = (server: SinonFakeServer) => {
     );
   };
 
+  const setLoadIndicesResponse = (response: HttpResponse = {}) => {
+    const defaultResponse = { indices: [] };
+
+    server.respondWith(
+      'GET',
+      `${API_BASE_PATH}policies/indices`,
+      response
+        ? mockResponse(defaultResponse, response)
+        : [200, { 'Content-Type': 'application/json' }, '']
+    );
+  };
+
+  const setAddPolicyResponse = (response?: HttpResponse, error?: any) => {
+    const status = error ? error.status || 400 : 200;
+    const body = error ? JSON.stringify(error.body) : JSON.stringify(response);
+
+    server.respondWith('PUT', `${API_BASE_PATH}policies`, [
+      status,
+      { 'Content-Type': 'application/json' },
+      body,
+    ]);
+  };
+
+  const setGetPolicyResponse = (response?: HttpResponse) => {
+    server.respondWith('GET', `${API_BASE_PATH}policy/:name`, [
+      200,
+      { 'Content-Type': 'application/json' },
+      JSON.stringify(response),
+    ]);
+  };
+
   return {
     setLoadRepositoriesResponse,
     setLoadRepositoryTypesResponse,
@@ -79,6 +110,9 @@ const registerHttpRequestMockHelpers = (server: SinonFakeServer) => {
     setSaveRepositoryResponse,
     setLoadSnapshotsResponse,
     setGetSnapshotResponse,
+    setLoadIndicesResponse,
+    setAddPolicyResponse,
+    setGetPolicyResponse,
   };
 };
 
diff --git a/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/helpers/index.ts b/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/helpers/index.ts
index d8bb3d4c25e102..e6fea41d869286 100644
--- a/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/helpers/index.ts
+++ b/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/helpers/index.ts
@@ -7,6 +7,8 @@
 import { setup as homeSetup } from './home.helpers';
 import { setup as repositoryAddSetup } from './repository_add.helpers';
 import { setup as repositoryEditSetup } from './repository_edit.helpers';
+import { setup as policyAddSetup } from './policy_add.helpers';
+import { setup as policyEditSetup } from './policy_edit.helpers';
 
 export { nextTick, getRandomString, findTestSubject, TestBed } from '../../../../../../test_utils';
 
@@ -16,4 +18,6 @@ export const pageHelpers = {
   home: { setup: homeSetup },
   repositoryAdd: { setup: repositoryAddSetup },
   repositoryEdit: { setup: repositoryEditSetup },
+  policyAdd: { setup: policyAddSetup },
+  policyEdit: { setup: policyEditSetup },
 };
diff --git a/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/helpers/policy_add.helpers.ts b/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/helpers/policy_add.helpers.ts
new file mode 100644
index 00000000000000..ff59bd83dc1e83
--- /dev/null
+++ b/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/helpers/policy_add.helpers.ts
@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { registerTestBed, TestBedConfig } from '../../../../../../test_utils';
+import { PolicyAdd } from '../../../public/app/sections/policy_add';
+import { WithProviders } from './providers';
+import { formSetup, PolicyFormTestSubjects } from './policy_form.helpers';
+
+const testBedConfig: TestBedConfig = {
+  memoryRouter: {
+    initialEntries: ['/add_policy'],
+    componentRoutePath: '/add_policy',
+  },
+  doMountAsync: true,
+};
+
+const initTestBed = registerTestBed<PolicyFormTestSubjects>(
+  WithProviders(PolicyAdd),
+  testBedConfig
+);
+
+export const setup = formSetup.bind(null, initTestBed);
diff --git a/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/helpers/policy_edit.helpers.ts b/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/helpers/policy_edit.helpers.ts
new file mode 100644
index 00000000000000..b2c0e4242a3fd4
--- /dev/null
+++ b/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/helpers/policy_edit.helpers.ts
@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { registerTestBed, TestBedConfig } from '../../../../../../test_utils';
+import { PolicyEdit } from '../../../public/app/sections/policy_edit';
+import { WithProviders } from './providers';
+import { POLICY_NAME } from './constant';
+import { formSetup, PolicyFormTestSubjects } from './policy_form.helpers';
+
+const testBedConfig: TestBedConfig = {
+  memoryRouter: {
+    initialEntries: [`/edit_policy/${POLICY_NAME}`],
+    componentRoutePath: '/edit_policy/:name',
+  },
+  doMountAsync: true,
+};
+
+const initTestBed = registerTestBed<PolicyFormTestSubjects>(
+  WithProviders(PolicyEdit),
+  testBedConfig
+);
+
+export const setup = formSetup.bind(null, initTestBed);
diff --git a/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/helpers/policy_form.helpers.ts b/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/helpers/policy_form.helpers.ts
new file mode 100644
index 00000000000000..302af7a1ec7f04
--- /dev/null
+++ b/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/helpers/policy_form.helpers.ts
@@ -0,0 +1,56 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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 { TestBed, SetupFunc } from '../../../../../../test_utils';
+
+export interface PolicyFormTestBed extends TestBed<PolicyFormTestSubjects> {
+  actions: {
+    clickNextButton: () => void;
+    clickSubmitButton: () => void;
+  };
+}
+
+export const formSetup = async (
+  initTestBed: SetupFunc<PolicyFormTestSubjects>
+): Promise<PolicyFormTestBed> => {
+  const testBed = await initTestBed();
+
+  // User actions
+  const clickNextButton = () => {
+    testBed.find('nextButton').simulate('click');
+  };
+
+  const clickSubmitButton = () => {
+    testBed.find('submitButton').simulate('click');
+  };
+
+  return {
+    ...testBed,
+    actions: {
+      clickNextButton,
+      clickSubmitButton,
+    },
+  };
+};
+
+export type PolicyFormTestSubjects =
+  | 'advancedCronInput'
+  | 'allIndicesToggle'
+  | 'backButton'
+  | 'deselectIndicesLink'
+  | 'expireAfterValueInput'
+  | 'expireAfterUnitSelect'
+  | 'ignoreUnavailableIndicesToggle'
+  | 'nameInput'
+  | 'maxCountInput'
+  | 'minCountInput'
+  | 'nextButton'
+  | 'pageTitle'
+  | 'savePolicyApiError'
+  | 'selectIndicesLink'
+  | 'showAdvancedCronLink'
+  | 'snapshotNameInput'
+  | 'submitButton';
diff --git a/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/helpers/providers.tsx b/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/helpers/providers.tsx
index 5257c030518bae..187d2da0d7a3db 100644
--- a/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/helpers/providers.tsx
+++ b/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/helpers/providers.tsx
@@ -10,7 +10,15 @@ import { setAppDependencies } from '../../../public/app/index';
 
 const { core, plugins } = createShim();
 const appDependencies = {
-  core,
+  core: {
+    ...core,
+    chrome: {
+      ...core.chrome,
+      // mock getInjected() to return true
+      // this is used so the policy tab renders (slmUiEnabled config)
+      getInjected: () => true,
+    },
+  },
   plugins,
 };
 
diff --git a/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/helpers/setup_environment.ts b/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/helpers/setup_environment.ts
index dcfcdb1031dd50..e914f06d8e16f2 100644
--- a/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/helpers/setup_environment.ts
+++ b/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/helpers/setup_environment.ts
@@ -9,11 +9,15 @@ import axiosXhrAdapter from 'axios/lib/adapters/xhr';
 
 import { i18n } from '@kbn/i18n';
 
+import { docTitle } from 'ui/doc_title/doc_title';
 import { httpService } from '../../../public/app/services/http';
-import { breadcrumbService } from '../../../public/app/services/navigation';
+import { breadcrumbService, docTitleService } from '../../../public/app/services/navigation';
 import { textService } from '../../../public/app/services/text';
 import { chrome } from '../../../public/test/mocks';
 import { init as initHttpRequests } from './http_requests';
+import { uiMetricService } from '../../../public/app/services/ui_metric';
+import { documentationLinksService } from '../../../public/app/services/documentation';
+import { createUiStatsReporter } from '../../../../../../../src/legacy/core_plugins/ui_metric/public';
 
 export const setupEnvironment = () => {
   httpService.init(axios.create({ adapter: axiosXhrAdapter }), {
@@ -21,6 +25,9 @@ export const setupEnvironment = () => {
   });
   breadcrumbService.init(chrome, {});
   textService.init(i18n);
+  uiMetricService.init(createUiStatsReporter);
+  documentationLinksService.init('', '');
+  docTitleService.init(docTitle.change);
 
   const { server, httpRequestsMockHelpers } = initHttpRequests();
 
diff --git a/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/home.test.ts b/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/home.test.ts
index 1cbafab69da7c7..7f4860e74bafea 100644
--- a/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/home.test.ts
+++ b/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/home.test.ts
@@ -17,6 +17,7 @@ import {
 } from './helpers';
 import { HomeTestBed } from './helpers/home.helpers';
 import { REPOSITORY_NAME } from './helpers/constant';
+import moment from 'moment-timezone';
 
 const { setup } = pageHelpers.home;
 
@@ -51,7 +52,7 @@ describe.skip('<SnapshotRestoreHome />', () => {
     test('should set the correct app title', () => {
       const { exists, find } = testBed;
       expect(exists('appTitle')).toBe(true);
-      expect(find('appTitle').text()).toEqual('Snapshot Repositories');
+      expect(find('appTitle').text()).toEqual('Snapshot and Restore');
     });
 
     test('should display a loading while fetching the repositories', () => {
@@ -63,7 +64,7 @@ describe.skip('<SnapshotRestoreHome />', () => {
     test('should have a link to the documentation', () => {
       const { exists, find } = testBed;
       expect(exists('documentationLink')).toBe(true);
-      expect(find('documentationLink').text()).toBe('Snapshot docs');
+      expect(find('documentationLink').text()).toBe('Snapshot and Restore docs');
     });
 
     describe('tabs', () => {
@@ -77,14 +78,19 @@ describe.skip('<SnapshotRestoreHome />', () => {
         });
       });
 
-      test('should have 2 tabs', () => {
+      test('should have 4 tabs', () => {
         const { find } = testBed;
 
-        expect(find('tab').length).toBe(2);
-        expect(find('tab').map(t => t.text())).toEqual(['Snapshots', 'Repositories']);
+        expect(find('tab').length).toBe(4);
+        expect(find('tab').map(t => t.text())).toEqual([
+          'Snapshots',
+          'Repositories',
+          'Policies',
+          'Restore Status',
+        ]);
       });
 
-      test('should navigate to snapshot list tab', () => {
+      test('should navigate to snapshot list tab', async () => {
         const { exists, actions } = testBed;
 
         expect(exists('repositoryList')).toBe(true);
@@ -92,6 +98,12 @@ describe.skip('<SnapshotRestoreHome />', () => {
 
         actions.selectTab('snapshots');
 
+        // @ts-ignore (remove when react 16.9.0 is released)
+        await act(async () => {
+          await nextTick();
+          testBed.component.update();
+        });
+
         expect(exists('repositoryList')).toBe(false);
         expect(exists('snapshotList')).toBe(true);
       });
@@ -264,6 +276,11 @@ describe.skip('<SnapshotRestoreHome />', () => {
           expect(exists('repositoryDetail')).toBe(false);
 
           await actions.clickRepositoryAt(0);
+          // @ts-ignore (remove when react 16.9.0 is released)
+          await act(async () => {
+            await nextTick();
+            testBed.component.update();
+          });
 
           expect(exists('repositoryDetail')).toBe(true);
         });
@@ -454,14 +471,19 @@ describe.skip('<SnapshotRestoreHome />', () => {
         const { tableCellsValues } = table.getMetaData('snapshotTable');
         tableCellsValues.forEach((row, i) => {
           const snapshot = snapshots[i];
+          const startTime = moment(new Date(snapshot.startTimeInMillis));
+          const timezone = moment.tz.guess();
+
           expect(row).toEqual([
+            '', // Checkbox
             snapshot.snapshot, // Snapshot
             REPOSITORY_NAME, // Repository
-            'foo', // TODO: fix this with FormattedDateTime value
-            `${Math.ceil(snapshot.durationInMillis / 1000).toString()}s`, // Duration
             snapshot.indices.length.toString(), // Indices
             snapshot.shards.total.toString(), // Shards
             snapshot.shards.failed.toString(), // Failed shards
+            startTime.tz(timezone).format('MMMM D, YYYY h:mm A z'), // Start time
+            `${Math.ceil(snapshot.durationInMillis / 1000).toString()}s`, // Duration
+            '',
           ]);
         });
       });
@@ -590,22 +612,38 @@ describe.skip('<SnapshotRestoreHome />', () => {
 
             describe('summary tab', () => {
               test('should set the correct summary values', () => {
+                const {
+                  version,
+                  versionId,
+                  uuid,
+                  indices,
+                  endTimeInMillis,
+                  startTimeInMillis,
+                } = snapshot1;
+
                 const { find } = testBed;
+                const startTime = moment(new Date(startTimeInMillis));
+                const endTime = moment(new Date(endTimeInMillis));
+                const timezone = moment.tz.guess();
 
                 expect(find('snapshotDetail.version.value').text()).toBe(
-                  `${snapshot1.version} / ${snapshot1.versionId}`
+                  `${version} / ${versionId}`
                 );
-                expect(find('snapshotDetail.uuid.value').text()).toBe(snapshot1.uuid);
+                expect(find('snapshotDetail.uuid.value').text()).toBe(uuid);
                 expect(find('snapshotDetail.state.value').text()).toBe('Snapshot complete');
                 expect(find('snapshotDetail.includeGlobalState.value').text()).toBe('Yes');
                 expect(find('snapshotDetail.indices.title').text()).toBe(
-                  `Indices (${snapshot1.indices.length})`
+                  `Indices (${indices.length})`
+                );
+                expect(find('snapshotDetail.indices.value').text()).toContain(
+                  indices.splice(0, 10).join('')
+                );
+                expect(find('snapshotDetail.startTime.value').text()).toBe(
+                  startTime.tz(timezone).format('MMMM D, YYYY h:mm A z')
                 );
-                expect(find('snapshotDetail.indices.value').text()).toBe(
-                  snapshot1.indices.join('')
+                expect(find('snapshotDetail.endTime.value').text()).toBe(
+                  endTime.tz(timezone).format('MMMM D, YYYY h:mm A z')
                 );
-                expect(find('snapshotDetail.startTime.value').text()).toBe('foo'); // TODO: fix this with FormattedDateTime value
-                expect(find('snapshotDetail.endTime.value').text()).toBe('foo'); // TODO: fix this with FormattedDateTime value
               });
 
               test('should indicate the different snapshot states', async () => {
@@ -647,7 +685,7 @@ describe.skip('<SnapshotRestoreHome />', () => {
                   [SNAPSHOT_STATE.INCOMPATIBLE]: 'Incompatible version ',
                 };
 
-                // Call sequencially each state and verify that the message is ok
+                // Call sequentially each state and verify that the message is ok
                 return Object.entries(mapStateToMessage).reduce((promise, [state, message]) => {
                   return promise.then(async () => expectMessageForSnapshotState(state, message));
                 }, Promise.resolve());
diff --git a/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/policy_add.test.ts b/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/policy_add.test.ts
new file mode 100644
index 00000000000000..19feb85e4f04ee
--- /dev/null
+++ b/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/policy_add.test.ts
@@ -0,0 +1,215 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { act } from 'react-dom/test-utils';
+
+import * as fixtures from '../../test/fixtures';
+
+import { setupEnvironment, pageHelpers, nextTick, getRandomString } from './helpers';
+import { PolicyFormTestBed } from './helpers/policy_form.helpers';
+import { DEFAULT_POLICY_SCHEDULE } from '../../public/app/constants';
+
+const { setup } = pageHelpers.policyAdd;
+
+jest.mock('ui/i18n', () => {
+  const I18nContext = ({ children }: any) => children;
+  return { I18nContext };
+});
+
+const POLICY_NAME = 'my_policy';
+const SNAPSHOT_NAME = 'my_snapshot';
+const MIN_COUNT = '5';
+const MAX_COUNT = '10';
+const EXPIRE_AFTER_VALUE = '30';
+const repository = fixtures.getRepository({ name: `a${getRandomString()}`, type: 'fs' });
+
+// We need to skip the tests until react 16.9.0 is released
+// which supports asynchronous code inside act()
+describe.skip('<PolicyAdd />', () => {
+  let testBed: PolicyFormTestBed;
+
+  const { server, httpRequestsMockHelpers } = setupEnvironment();
+
+  afterAll(() => {
+    server.restore();
+  });
+
+  describe('on component mount', () => {
+    beforeEach(async () => {
+      httpRequestsMockHelpers.setLoadRepositoriesResponse({ repositories: [repository] });
+      httpRequestsMockHelpers.setLoadIndicesResponse({ indices: ['my_index'] });
+
+      testBed = await setup();
+      await nextTick();
+      testBed.component.update();
+    });
+
+    test('should set the correct page title', () => {
+      const { exists, find } = testBed;
+      expect(exists('pageTitle')).toBe(true);
+      expect(find('pageTitle').text()).toEqual('Create policy');
+    });
+
+    test('should not let the user go to the next step if required fields are missing', () => {
+      const { find } = testBed;
+
+      expect(find('nextButton').props().disabled).toBe(true);
+    });
+
+    describe('form validation', () => {
+      describe('logistics (step 1)', () => {
+        test('should require a policy name', async () => {
+          const { form, find } = testBed;
+
+          form.setInputValue('nameInput', '');
+          find('nameInput').simulate('blur');
+
+          expect(form.getErrorsMessages()).toEqual(['Policy name is required.']);
+        });
+
+        test('should require a snapshot name', () => {
+          const { form, find } = testBed;
+
+          form.setInputValue('snapshotNameInput', '');
+          find('snapshotNameInput').simulate('blur');
+
+          expect(form.getErrorsMessages()).toEqual(['Snapshot name is required.']);
+        });
+
+        it('should require a schedule', () => {
+          const { form, find } = testBed;
+
+          find('showAdvancedCronLink').simulate('click');
+          form.setInputValue('advancedCronInput', '');
+          find('advancedCronInput').simulate('blur');
+
+          expect(form.getErrorsMessages()).toEqual(['Schedule is required.']);
+        });
+      });
+
+      describe('snapshot settings (step 2)', () => {
+        beforeEach(() => {
+          const { form, actions } = testBed;
+          // Complete step 1
+          form.setInputValue('nameInput', POLICY_NAME);
+          form.setInputValue('snapshotNameInput', SNAPSHOT_NAME);
+          actions.clickNextButton();
+        });
+
+        test('should require at least one index', async () => {
+          const { find, form, component } = testBed;
+
+          // @ts-ignore (remove when react 16.9.0 is released)
+          await act(async () => {
+            // Toggle "All indices" switch
+            form.toggleEuiSwitch('allIndicesToggle', false);
+            await nextTick();
+            component.update();
+          });
+
+          // Deselect all indices from list
+          find('deselectIndicesLink').simulate('click');
+
+          expect(form.getErrorsMessages()).toEqual(['You must select at least one index.']);
+        });
+      });
+
+      describe('retention (step 3)', () => {
+        beforeEach(() => {
+          const { form, actions } = testBed;
+          // Complete step 1
+          form.setInputValue('nameInput', POLICY_NAME);
+          form.setInputValue('snapshotNameInput', SNAPSHOT_NAME);
+          actions.clickNextButton();
+
+          // Complete step 2
+          actions.clickNextButton();
+        });
+
+        test('should not allow the minimum count be greater than the maximum count', () => {
+          const { find, form } = testBed;
+
+          form.setInputValue('minCountInput', MAX_COUNT + 1);
+          find('minCountInput').simulate('blur');
+
+          form.setInputValue('maxCountInput', MAX_COUNT);
+          find('maxCountInput').simulate('blur');
+
+          expect(form.getErrorsMessages()).toEqual(['Min count cannot be greater than max count.']);
+        });
+      });
+    });
+
+    describe('form payload & api errors', () => {
+      beforeEach(async () => {
+        const { actions, form } = testBed;
+
+        // Complete step 1
+        form.setInputValue('nameInput', POLICY_NAME);
+        form.setInputValue('snapshotNameInput', SNAPSHOT_NAME);
+        actions.clickNextButton();
+
+        // Complete step 2
+        actions.clickNextButton();
+
+        // Complete step 3
+        form.setInputValue('expireAfterValueInput', EXPIRE_AFTER_VALUE);
+        form.setInputValue('minCountInput', MIN_COUNT);
+        form.setInputValue('maxCountInput', MAX_COUNT);
+        actions.clickNextButton();
+      });
+
+      it('should send the correct payload', async () => {
+        const { actions } = testBed;
+
+        // @ts-ignore (remove when react 16.9.0 is released)
+        await act(async () => {
+          actions.clickSubmitButton();
+          await nextTick();
+        });
+
+        const latestRequest = server.requests[server.requests.length - 1];
+
+        const expected = {
+          config: {},
+          name: POLICY_NAME,
+          repository: repository.name,
+          retention: {
+            expireAfterUnit: 'd', // default
+            expireAfterValue: Number(EXPIRE_AFTER_VALUE),
+            maxCount: Number(MAX_COUNT),
+            minCount: Number(MIN_COUNT),
+          },
+          schedule: DEFAULT_POLICY_SCHEDULE,
+          snapshotName: SNAPSHOT_NAME,
+        };
+
+        expect(JSON.parse(latestRequest.requestBody)).toEqual(expected);
+      });
+
+      it('should surface the API errors from the put HTTP request', async () => {
+        const { component, actions, find, exists } = testBed;
+
+        const error = {
+          status: 409,
+          error: 'Conflict',
+          message: `There is already a policy with name '${POLICY_NAME}'`,
+        };
+
+        httpRequestsMockHelpers.setAddPolicyResponse(undefined, { body: error });
+
+        // @ts-ignore (remove when react 16.9.0 is released)
+        await act(async () => {
+          actions.clickSubmitButton();
+          await nextTick();
+          component.update();
+        });
+
+        expect(exists('savePolicyApiError')).toBe(true);
+        expect(find('savePolicyApiError').text()).toContain(error.message);
+      });
+    });
+  });
+});
diff --git a/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/policy_edit.test.ts b/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/policy_edit.test.ts
new file mode 100644
index 00000000000000..efcb338e6d2684
--- /dev/null
+++ b/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/policy_edit.test.ts
@@ -0,0 +1,136 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { act } from 'react-dom/test-utils';
+
+import { setupEnvironment, pageHelpers, nextTick } from './helpers';
+import { PolicyForm } from '../../public/app/components/policy_form';
+import { PolicyFormTestBed } from './helpers/policy_form.helpers';
+import { POLICY_EDIT } from './helpers/constant';
+
+const { setup } = pageHelpers.policyEdit;
+const { setup: setupPolicyAdd } = pageHelpers.policyAdd;
+
+const EXPIRE_AFTER_VALUE = '5';
+const EXPIRE_AFTER_UNIT = 'm';
+
+jest.mock('ui/i18n', () => {
+  const I18nContext = ({ children }: any) => children;
+  return { I18nContext };
+});
+
+// We need to skip the tests until react 16.9.0 is released
+// which supports asynchronous code inside act()
+describe.skip('<PolicyEdit />', () => {
+  let testBed: PolicyFormTestBed;
+  let testBedPolicyAdd: PolicyFormTestBed;
+  const { server, httpRequestsMockHelpers } = setupEnvironment();
+
+  afterAll(() => {
+    server.restore();
+  });
+
+  describe('on component mount', () => {
+    beforeEach(async () => {
+      httpRequestsMockHelpers.setGetPolicyResponse({ policy: POLICY_EDIT });
+      httpRequestsMockHelpers.setLoadIndicesResponse({ indices: ['my_index'] });
+      httpRequestsMockHelpers.setLoadRepositoriesResponse({
+        repositories: [{ name: POLICY_EDIT.repository }],
+      });
+
+      testBed = await setup();
+
+      // @ts-ignore (remove when react 16.9.0 is released)
+      await act(async () => {
+        await nextTick();
+        testBed.component.update();
+      });
+    });
+
+    test('should set the correct page title', () => {
+      const { exists, find } = testBed;
+      expect(exists('pageTitle')).toBe(true);
+      expect(find('pageTitle').text()).toEqual('Edit policy');
+    });
+
+    /**
+     * As the "edit" policy component uses the same form underneath that
+     * the "create" policy, we won't test it again but simply make sure that
+     * the same form component is indeed shared between the 2 app sections.
+     */
+    test('should use the same Form component as the "<PolicyAdd />" section', async () => {
+      testBedPolicyAdd = await setupPolicyAdd();
+
+      // @ts-ignore (remove when react 16.9.0 is released)
+      await act(async () => {
+        await nextTick();
+        testBedPolicyAdd.component.update();
+      });
+
+      const formEdit = testBed.component.find(PolicyForm);
+      const formAdd = testBedPolicyAdd.component.find(PolicyForm);
+
+      expect(formEdit.length).toBe(1);
+      expect(formAdd.length).toBe(1);
+    });
+
+    test('should disable the policy name field', () => {
+      const { find } = testBed;
+
+      const nameInput = find('nameInput');
+      expect(nameInput.props().disabled).toEqual(true);
+    });
+
+    describe('form payload', () => {
+      beforeEach(async () => {
+        const { form, actions } = testBed;
+
+        const { snapshotName } = POLICY_EDIT;
+
+        // Complete step 1
+        form.setInputValue('snapshotNameInput', `${snapshotName}-edited`);
+        actions.clickNextButton();
+
+        // Complete step 2
+        // console.log(testBed.component.debug());
+        form.toggleEuiSwitch('ignoreUnavailableIndicesToggle');
+        actions.clickNextButton();
+
+        // Complete step 3
+        form.setInputValue('expireAfterValueInput', EXPIRE_AFTER_VALUE);
+        form.setInputValue('expireAfterUnitSelect', EXPIRE_AFTER_UNIT);
+        actions.clickNextButton();
+      });
+
+      it('should send the correct payload with changed values', async () => {
+        const { actions } = testBed;
+
+        // @ts-ignore (remove when react 16.9.0 is released)
+        await act(async () => {
+          actions.clickSubmitButton();
+          await nextTick();
+        });
+
+        const latestRequest = server.requests[server.requests.length - 1];
+
+        const expected = {
+          ...POLICY_EDIT,
+          ...{
+            config: {
+              ignoreUnavailable: true,
+            },
+            retention: {
+              expireAfterValue: Number(EXPIRE_AFTER_VALUE),
+              expireAfterUnit: EXPIRE_AFTER_UNIT,
+            },
+            snapshotName: `${POLICY_EDIT.snapshotName}-edited`,
+          },
+        };
+        expect(JSON.parse(latestRequest.requestBody)).toEqual(expected);
+      });
+    });
+  });
+});
diff --git a/x-pack/legacy/plugins/snapshot_restore/common/constants.ts b/x-pack/legacy/plugins/snapshot_restore/common/constants.ts
index a881bf3081c5e6..f04a5d6dc6e75b 100644
--- a/x-pack/legacy/plugins/snapshot_restore/common/constants.ts
+++ b/x-pack/legacy/plugins/snapshot_restore/common/constants.ts
@@ -54,3 +54,10 @@ export const APP_REQUIRED_CLUSTER_PRIVILEGES = [
 ];
 export const APP_RESTORE_INDEX_PRIVILEGES = ['monitor'];
 export const APP_SLM_CLUSTER_PRIVILEGES = ['manage_slm'];
+
+export const TIME_UNITS: { [key: string]: 'd' | 'h' | 'm' | 's' } = {
+  DAY: 'd',
+  HOUR: 'h',
+  MINUTE: 'm',
+  SECOND: 's',
+};
diff --git a/x-pack/legacy/plugins/snapshot_restore/common/lib/index.ts b/x-pack/legacy/plugins/snapshot_restore/common/lib/index.ts
index bede2689bb855c..579dae02659392 100644
--- a/x-pack/legacy/plugins/snapshot_restore/common/lib/index.ts
+++ b/x-pack/legacy/plugins/snapshot_restore/common/lib/index.ts
@@ -12,5 +12,7 @@ export {
   deserializeSnapshotDetails,
   deserializeSnapshotConfig,
   serializeSnapshotConfig,
+  deserializeSnapshotRetention,
+  serializeSnapshotRetention,
 } from './snapshot_serialization';
 export { deserializePolicy, serializePolicy } from './policy_serialization';
diff --git a/x-pack/legacy/plugins/snapshot_restore/common/lib/policy_serialization.test.ts b/x-pack/legacy/plugins/snapshot_restore/common/lib/policy_serialization.test.ts
index 86adde4db7f999..9ce9367bc0e0ea 100644
--- a/x-pack/legacy/plugins/snapshot_restore/common/lib/policy_serialization.test.ts
+++ b/x-pack/legacy/plugins/snapshot_restore/common/lib/policy_serialization.test.ts
@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { deserializePolicy } from './policy_serialization';
+import { deserializePolicy, serializePolicy } from './policy_serialization';
 
 describe('repository_serialization', () => {
   describe('deserializePolicy()', () => {
@@ -25,6 +25,11 @@ describe('repository_serialization', () => {
                 foo: 'bar',
               },
             },
+            retention: {
+              expire_after: '14d',
+              max_count: 30,
+              min_count: 4,
+            },
           },
           next_execution: '2019-07-11T01:30:00.000Z',
           next_execution_millis: 1562722200000,
@@ -45,6 +50,12 @@ describe('repository_serialization', () => {
             foo: 'bar',
           },
         },
+        retention: {
+          expireAfterValue: 14,
+          expireAfterUnit: 'd',
+          maxCount: 30,
+          minCount: 4,
+        },
         nextExecution: '2019-07-11T01:30:00.000Z',
         nextExecutionMillis: 1562722200000,
       });
@@ -112,4 +123,48 @@ describe('repository_serialization', () => {
       });
     });
   });
+
+  describe('serializePolicy()', () => {
+    it('should serialize a slm policy', () => {
+      expect(
+        serializePolicy({
+          name: 'my-snapshot-policy',
+          snapshotName: 'my-backups-snapshots',
+          schedule: '0 30 1 * * ?',
+          repository: 'my-backups',
+          config: {
+            indices: ['kibana-*'],
+            includeGlobalState: false,
+            ignoreUnavailable: false,
+            metadata: {
+              foo: 'bar',
+            },
+          },
+          retention: {
+            expireAfterValue: 14,
+            expireAfterUnit: 'd',
+            maxCount: 30,
+            minCount: 4,
+          },
+        })
+      ).toEqual({
+        name: 'my-backups-snapshots',
+        schedule: '0 30 1 * * ?',
+        repository: 'my-backups',
+        config: {
+          indices: ['kibana-*'],
+          include_global_state: false,
+          ignore_unavailable: false,
+          metadata: {
+            foo: 'bar',
+          },
+        },
+        retention: {
+          expire_after: '14d',
+          max_count: 30,
+          min_count: 4,
+        },
+      });
+    });
+  });
 });
diff --git a/x-pack/legacy/plugins/snapshot_restore/common/lib/policy_serialization.ts b/x-pack/legacy/plugins/snapshot_restore/common/lib/policy_serialization.ts
index dc527656705406..4652ac4bc5cc45 100644
--- a/x-pack/legacy/plugins/snapshot_restore/common/lib/policy_serialization.ts
+++ b/x-pack/legacy/plugins/snapshot_restore/common/lib/policy_serialization.ts
@@ -4,19 +4,25 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { SlmPolicy, SlmPolicyEs, SlmPolicyPayload } from '../types';
-import { deserializeSnapshotConfig, serializeSnapshotConfig } from './';
+import {
+  deserializeSnapshotConfig,
+  serializeSnapshotConfig,
+  deserializeSnapshotRetention,
+  serializeSnapshotRetention,
+} from './';
 
 export const deserializePolicy = (name: string, esPolicy: SlmPolicyEs): SlmPolicy => {
   const {
     version,
     modified_date: modifiedDate,
     modified_date_millis: modifiedDateMillis,
-    policy: { name: snapshotName, schedule, repository, config },
+    policy: { name: snapshotName, schedule, repository, config, retention },
     next_execution: nextExecution,
     next_execution_millis: nextExecutionMillis,
     last_failure: lastFailure,
     last_success: lastSuccess,
     in_progress: inProgress,
+    stats,
   } = esPolicy;
 
   const policy: SlmPolicy = {
@@ -35,6 +41,10 @@ export const deserializePolicy = (name: string, esPolicy: SlmPolicyEs): SlmPolic
     policy.config = deserializeSnapshotConfig(config);
   }
 
+  if (retention) {
+    policy.retention = deserializeSnapshotRetention(retention);
+  }
+
   if (lastFailure) {
     const {
       snapshot_name: failureSnapshotName,
@@ -82,11 +92,27 @@ export const deserializePolicy = (name: string, esPolicy: SlmPolicyEs): SlmPolic
     };
   }
 
+  if (stats) {
+    const {
+      snapshots_taken: snapshotsTaken,
+      snapshots_failed: snapshotsFailed,
+      snapshots_deleted: snapshotsDeleted,
+      snapshot_deletion_failures: snapshotDeletionFailures,
+    } = stats;
+
+    policy.stats = {
+      snapshotsTaken,
+      snapshotsFailed,
+      snapshotsDeleted,
+      snapshotDeletionFailures,
+    };
+  }
+
   return policy;
 };
 
 export const serializePolicy = (policy: SlmPolicyPayload): SlmPolicyEs['policy'] => {
-  const { snapshotName: name, schedule, repository, config } = policy;
+  const { snapshotName: name, schedule, repository, config, retention } = policy;
   const policyEs: SlmPolicyEs['policy'] = {
     name,
     schedule,
@@ -97,5 +123,13 @@ export const serializePolicy = (policy: SlmPolicyPayload): SlmPolicyEs['policy']
     policyEs.config = serializeSnapshotConfig(config);
   }
 
+  if (retention) {
+    const serializedRetention = serializeSnapshotRetention(retention);
+
+    if (serializedRetention) {
+      policyEs.retention = serializeSnapshotRetention(retention);
+    }
+  }
+
   return policyEs;
 };
diff --git a/x-pack/legacy/plugins/snapshot_restore/common/lib/snapshot_serialization.ts b/x-pack/legacy/plugins/snapshot_restore/common/lib/snapshot_serialization.ts
index b1f6d2005a2e3c..50fdef4175787c 100644
--- a/x-pack/legacy/plugins/snapshot_restore/common/lib/snapshot_serialization.ts
+++ b/x-pack/legacy/plugins/snapshot_restore/common/lib/snapshot_serialization.ts
@@ -6,7 +6,16 @@
 
 import { sortBy } from 'lodash';
 
-import { SnapshotDetails, SnapshotDetailsEs, SnapshotConfig, SnapshotConfigEs } from '../types';
+import {
+  SnapshotDetails,
+  SnapshotDetailsEs,
+  SnapshotConfig,
+  SnapshotConfigEs,
+  SnapshotRetention,
+  SnapshotRetentionEs,
+} from '../types';
+
+import { deserializeTime, serializeTime } from './time_serialization';
 
 export function deserializeSnapshotDetails(
   repository: string,
@@ -128,3 +137,68 @@ export function serializeSnapshotConfig(snapshotConfig: SnapshotConfig): Snapsho
     return config;
   }, {});
 }
+
+export function deserializeSnapshotRetention(
+  snapshotRetentionEs: SnapshotRetentionEs
+): SnapshotRetention {
+  const {
+    expire_after: expireAfter,
+    max_count: maxCount,
+    min_count: minCount,
+  } = snapshotRetentionEs;
+
+  let expireAfterValue;
+  let expireAfterUnit;
+
+  if (expireAfter) {
+    const { timeValue, timeUnit } = deserializeTime(expireAfter);
+
+    if (timeValue && timeUnit) {
+      expireAfterValue = timeValue;
+      expireAfterUnit = timeUnit;
+    }
+  }
+
+  const snapshotRetention: SnapshotRetention = {
+    expireAfterValue,
+    expireAfterUnit,
+    maxCount,
+    minCount,
+  };
+
+  return Object.entries(snapshotRetention).reduce((retention: any, [key, value]) => {
+    if (value !== undefined) {
+      retention[key] = value;
+    }
+    return retention;
+  }, {});
+}
+
+export function serializeSnapshotRetention(
+  snapshotRetention: SnapshotRetention
+): SnapshotRetentionEs | undefined {
+  const { expireAfterValue, expireAfterUnit, minCount, maxCount } = snapshotRetention;
+
+  const snapshotRetentionEs: SnapshotRetentionEs = {
+    expire_after:
+      expireAfterValue && expireAfterUnit
+        ? serializeTime(expireAfterValue, expireAfterUnit)
+        : undefined,
+    min_count: !minCount ? undefined : minCount,
+    max_count: !maxCount ? undefined : maxCount,
+  };
+
+  const flattenedSnapshotRetentionEs = Object.entries(snapshotRetentionEs).reduce(
+    (retention: any, [key, value]) => {
+      if (value !== undefined) {
+        retention[key] = value;
+      }
+      return retention;
+    },
+    {}
+  );
+
+  return Object.entries(flattenedSnapshotRetentionEs).length
+    ? flattenedSnapshotRetentionEs
+    : undefined;
+}
diff --git a/x-pack/legacy/plugins/snapshot_restore/common/lib/time_serialization.test.ts b/x-pack/legacy/plugins/snapshot_restore/common/lib/time_serialization.test.ts
new file mode 100644
index 00000000000000..f661c0c585852e
--- /dev/null
+++ b/x-pack/legacy/plugins/snapshot_restore/common/lib/time_serialization.test.ts
@@ -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 { deserializeTime, serializeTime } from './time_serialization';
+import { TIME_UNITS } from '../constants';
+
+describe('time_serialization', () => {
+  describe('deserializeTime()', () => {
+    it('should deserialize valid ES time', () => {
+      Object.values(TIME_UNITS).forEach(unit => {
+        expect(deserializeTime(`15${unit}`)).toEqual({
+          timeValue: 15,
+          timeUnit: unit,
+        });
+      });
+    });
+    it('should return an empty object if time unit is invalid', () => {
+      expect(deserializeTime('15foobar')).toEqual({});
+      expect(deserializeTime('15minutes')).toEqual({});
+    });
+  });
+  describe('serializeTime()', () => {
+    it('should serialize ES time', () => {
+      expect(serializeTime(15, 'd')).toEqual('15d');
+    });
+  });
+});
diff --git a/x-pack/legacy/plugins/snapshot_restore/common/lib/time_serialization.ts b/x-pack/legacy/plugins/snapshot_restore/common/lib/time_serialization.ts
new file mode 100644
index 00000000000000..5f65ec861e81b1
--- /dev/null
+++ b/x-pack/legacy/plugins/snapshot_restore/common/lib/time_serialization.ts
@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { TIME_UNITS } from '../constants';
+
+export const deserializeTime = (time: string) => {
+  const timeUnits = Object.values(TIME_UNITS);
+
+  const timeUnit = timeUnits.find(unit => {
+    const unitIndex = time.indexOf(unit);
+    return unitIndex !== -1 && unitIndex === time.length - 1;
+  });
+
+  if (timeUnit) {
+    const timeValue = Number(time.replace(timeUnit, ''));
+
+    if (!isNaN(timeValue)) {
+      return {
+        timeValue,
+        timeUnit,
+      };
+    }
+  }
+
+  return {};
+};
+
+export const serializeTime = (timeValue: number, timeUnit: string) => {
+  return `${timeValue}${timeUnit}`; // e.g., '15d'
+};
diff --git a/x-pack/legacy/plugins/snapshot_restore/common/types/policy.ts b/x-pack/legacy/plugins/snapshot_restore/common/types/policy.ts
index 888cad13d213b7..ed67b1eb77063d 100644
--- a/x-pack/legacy/plugins/snapshot_restore/common/types/policy.ts
+++ b/x-pack/legacy/plugins/snapshot_restore/common/types/policy.ts
@@ -4,14 +4,19 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { SnapshotConfig, SnapshotConfigEs } from './snapshot';
-
+import {
+  SnapshotConfig,
+  SnapshotConfigEs,
+  SnapshotRetention,
+  SnapshotRetentionEs,
+} from './snapshot';
 export interface SlmPolicyPayload {
   name: string;
   snapshotName: string;
   schedule: string;
   repository: string;
   config?: SnapshotConfig;
+  retention?: SnapshotRetention;
 }
 
 export interface SlmPolicy extends SlmPolicyPayload {
@@ -34,6 +39,12 @@ export interface SlmPolicy extends SlmPolicyPayload {
   inProgress?: {
     snapshotName: string;
   };
+  stats?: {
+    snapshotsTaken: number;
+    snapshotsFailed: number;
+    snapshotsDeleted: number;
+    snapshotDeletionFailures: number;
+  };
 }
 
 export interface SlmPolicyEs {
@@ -45,6 +56,7 @@ export interface SlmPolicyEs {
     schedule: string;
     repository: string;
     config?: SnapshotConfigEs;
+    retention?: SnapshotRetentionEs;
   };
   next_execution: string;
   next_execution_millis: number;
@@ -66,4 +78,10 @@ export interface SlmPolicyEs {
     start_time: string;
     start_time_millis: number;
   };
+  stats?: {
+    snapshots_taken: number;
+    snapshots_failed: number;
+    snapshots_deleted: number;
+    snapshot_deletion_failures: number;
+  };
 }
diff --git a/x-pack/legacy/plugins/snapshot_restore/common/types/snapshot.ts b/x-pack/legacy/plugins/snapshot_restore/common/types/snapshot.ts
index dd561bd50d352c..46713c937fd3f0 100644
--- a/x-pack/legacy/plugins/snapshot_restore/common/types/snapshot.ts
+++ b/x-pack/legacy/plugins/snapshot_restore/common/types/snapshot.ts
@@ -79,3 +79,16 @@ interface SnapshotDetailsShardsStatusEs {
   failed: number;
   successful: number;
 }
+
+export interface SnapshotRetention {
+  expireAfterValue?: number | '';
+  expireAfterUnit?: string;
+  maxCount?: number | '';
+  minCount?: number | '';
+}
+
+export interface SnapshotRetentionEs {
+  expire_after?: string;
+  max_count?: number;
+  min_count?: number;
+}
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/index.ts b/x-pack/legacy/plugins/snapshot_restore/public/app/components/index.ts
index 85d543642a92bf..e94aa9287e0dd3 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/components/index.ts
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/components/index.ts
@@ -16,4 +16,8 @@ export { SnapshotDeleteProvider } from './snapshot_delete_provider';
 export { RestoreSnapshotForm } from './restore_snapshot_form';
 export { PolicyExecuteProvider } from './policy_execute_provider';
 export { PolicyDeleteProvider } from './policy_delete_provider';
+export {
+  UpdateRetentionModalProvider,
+  UpdateRetentionSetting,
+} from './update_retention_modal_provider';
 export { PolicyForm } from './policy_form';
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/navigation.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/navigation.tsx
index ba9877a9e9f411..6bb376b9298ed2 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/navigation.tsx
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/navigation.tsx
@@ -41,14 +41,23 @@ export const PolicyNavigation: React.FunctionComponent<Props> = ({
       onClick: () => updateCurrentStep(2),
     },
     {
-      title: i18n.translate('xpack.snapshotRestore.policyForm.navigation.stepReviewName', {
-        defaultMessage: 'Review',
+      title: i18n.translate('xpack.snapshotRestore.policyForm.navigation.stepRetentionName', {
+        defaultMessage: 'Snapshot retention',
       }),
-      isComplete: maxCompletedStep >= 2,
+      isComplete: maxCompletedStep >= 3,
       isSelected: currentStep === 3,
       disabled: maxCompletedStep < 2,
       onClick: () => updateCurrentStep(3),
     },
+    {
+      title: i18n.translate('xpack.snapshotRestore.policyForm.navigation.stepReviewName', {
+        defaultMessage: 'Review',
+      }),
+      isComplete: maxCompletedStep >= 3,
+      isSelected: currentStep === 4,
+      disabled: maxCompletedStep < 3,
+      onClick: () => updateCurrentStep(4),
+    },
   ];
 
   return <EuiStepsHorizontal steps={steps} />;
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/policy_form.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/policy_form.tsx
index 6c631ab8e6c69b..7e55cee63a0ac4 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/policy_form.tsx
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/policy_form.tsx
@@ -13,9 +13,15 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 import { SlmPolicyPayload } from '../../../../common/types';
+import { TIME_UNITS } from '../../../../common/constants';
 import { PolicyValidation, validatePolicy } from '../../services/validation';
 import { useAppDependencies } from '../../index';
-import { PolicyStepLogistics, PolicyStepSettings, PolicyStepReview } from './steps';
+import {
+  PolicyStepLogistics,
+  PolicyStepSettings,
+  PolicyStepRetention,
+  PolicyStepReview,
+} from './steps';
 import { PolicyNavigation } from './navigation';
 
 interface Props {
@@ -53,7 +59,8 @@ export const PolicyForm: React.FunctionComponent<Props> = ({
   const stepMap: { [key: number]: any } = {
     1: PolicyStepLogistics,
     2: PolicyStepSettings,
-    3: PolicyStepReview,
+    3: PolicyStepRetention,
+    4: PolicyStepReview,
   };
   const CurrentStepForm = stepMap[currentStep];
 
@@ -63,6 +70,11 @@ export const PolicyForm: React.FunctionComponent<Props> = ({
     config: {
       ...(originalPolicy.config || {}),
     },
+    retention: {
+      ...(originalPolicy.retention || {
+        expireAfterUnit: TIME_UNITS.DAY,
+      }),
+    },
   });
 
   // Policy validation state
@@ -161,7 +173,9 @@ export const PolicyForm: React.FunctionComponent<Props> = ({
                     fill
                     iconType="arrowRight"
                     onClick={() => onNext()}
+                    iconSide="right"
                     disabled={!validation.isValid}
+                    data-test-subj="nextButton"
                   >
                     <FormattedMessage
                       id="xpack.snapshotRestore.policyForm.nextButtonLabel"
@@ -178,6 +192,7 @@ export const PolicyForm: React.FunctionComponent<Props> = ({
                     iconType="check"
                     onClick={() => savePolicy()}
                     isLoading={isSaving}
+                    data-test-subj="submitButton"
                   >
                     {isSaving ? (
                       <FormattedMessage
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/index.ts b/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/index.ts
index 10dd696e3424f8..839df50f79a6fa 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/index.ts
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/index.ts
@@ -19,4 +19,5 @@ export interface StepProps {
 
 export { PolicyStepLogistics } from './step_logistics';
 export { PolicyStepSettings } from './step_settings';
+export { PolicyStepRetention } from './step_retention';
 export { PolicyStepReview } from './step_review';
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_logistics.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_logistics.tsx
index 85307ae47b832f..007d9bd78e4a61 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_logistics.tsx
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_logistics.tsx
@@ -401,7 +401,7 @@ export const PolicyStepLogistics: React.FunctionComponent<StepProps> = ({
               }}
               onBlur={() => setTouched({ ...touched, schedule: true })}
               placeholder={DEFAULT_POLICY_SCHEDULE}
-              data-test-subj="snapshotNameInput"
+              data-test-subj="advancedCronInput"
             />
           </EuiFormRow>
 
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_retention.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_retention.tsx
new file mode 100644
index 00000000000000..b32d5796501342
--- /dev/null
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_retention.tsx
@@ -0,0 +1,238 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React, { Fragment, useState } from 'react';
+
+import {
+  EuiDescribedFormGroup,
+  EuiTitle,
+  EuiFormRow,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonEmpty,
+  EuiFieldNumber,
+  EuiSelect,
+} from '@elastic/eui';
+
+import { SlmPolicyPayload } from '../../../../../common/types';
+import { TIME_UNITS } from '../../../../../common/constants';
+import { documentationLinksService } from '../../../services/documentation';
+import { useAppDependencies } from '../../../index';
+import { StepProps } from './';
+import { textService } from '../../../services/text';
+
+const getExpirationTimeOptions = (unitSize = '0') =>
+  Object.entries(TIME_UNITS).map(([_key, value]) => ({
+    text: textService.getTimeUnitLabel(value, unitSize),
+    value,
+  }));
+
+export const PolicyStepRetention: React.FunctionComponent<StepProps> = ({
+  policy,
+  updatePolicy,
+  errors,
+}) => {
+  const {
+    core: { i18n },
+  } = useAppDependencies();
+  const { FormattedMessage } = i18n;
+
+  const { retention = {} } = policy;
+
+  const updatePolicyRetention = (updatedFields: Partial<SlmPolicyPayload['retention']>): void => {
+    const newRetention = { ...retention, ...updatedFields };
+    updatePolicy({
+      retention: newRetention,
+    });
+  };
+
+  // State for touched inputs
+  const [touched, setTouched] = useState({
+    expireAfterValue: false,
+    minCount: false,
+    maxCount: false,
+  });
+
+  const renderExpireAfterField = () => (
+    <EuiDescribedFormGroup
+      title={
+        <EuiTitle size="s">
+          <h3>
+            <FormattedMessage
+              id="xpack.snapshotRestore.policyForm.stepRetention.expirationTitle"
+              defaultMessage="Expiration"
+            />
+          </h3>
+        </EuiTitle>
+      }
+      description={
+        <FormattedMessage
+          id="xpack.snapshotRestore.policyForm.stepRetention.expirationDescription"
+          defaultMessage="Time period before a snapshot should be deleted."
+        />
+      }
+      idAria="expirationDescription"
+      fullWidth
+    >
+      <EuiFormRow
+        label={
+          <FormattedMessage
+            id="xpack.snapshotRestore.policyForm.stepRetention.expireAfterLabel"
+            defaultMessage="Delete after"
+          />
+        }
+        describedByIds={['expirationDescription']}
+        isInvalid={touched.expireAfterValue && Boolean(errors.expireAfterValue)}
+        error={errors.expireAfter}
+        fullWidth
+      >
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiFieldNumber
+              value={retention.expireAfterValue || ''}
+              onBlur={() => setTouched({ ...touched, expireAfterValue: true })}
+              onChange={e => {
+                const value = e.target.value;
+                updatePolicyRetention({
+                  expireAfterValue: value !== '' ? Number(value) : value,
+                });
+              }}
+              data-test-subj="expireAfterValueInput"
+            />
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiSelect
+              value={retention.expireAfterUnit}
+              options={getExpirationTimeOptions(
+                retention.expireAfterValue ? retention.expireAfterValue.toString() : undefined
+              )}
+              onChange={e => {
+                updatePolicyRetention({
+                  expireAfterUnit: e.target.value,
+                });
+              }}
+              data-test-subj="expireAfterUnitSelect"
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFormRow>
+    </EuiDescribedFormGroup>
+  );
+
+  const renderCountFields = () => (
+    <EuiDescribedFormGroup
+      title={
+        <EuiTitle size="s">
+          <h3>
+            <FormattedMessage
+              id="xpack.snapshotRestore.policyForm.stepRetention.countTitle"
+              defaultMessage="Snapshots to retain"
+            />
+          </h3>
+        </EuiTitle>
+      }
+      description={
+        <FormattedMessage
+          id="xpack.snapshotRestore.policyForm.stepRetention.countDescription"
+          defaultMessage="Configure the minimum and maximum number of snapshots to retain."
+        />
+      }
+      idAria="countDescription"
+      fullWidth
+    >
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <EuiFormRow
+            label={
+              <FormattedMessage
+                id="xpack.snapshotRestore.policyForm.stepRetention.minCountLabel"
+                defaultMessage="Mininum count"
+              />
+            }
+            describedByIds={['countDescription']}
+            isInvalid={touched.minCount && Boolean(errors.minCount)}
+            error={errors.minCount}
+            fullWidth
+          >
+            <EuiFieldNumber
+              fullWidth
+              value={retention.minCount || ''}
+              onBlur={() => setTouched({ ...touched, minCount: true })}
+              onChange={e => {
+                const value = e.target.value;
+                updatePolicyRetention({
+                  minCount: value !== '' ? Number(value) : value,
+                });
+              }}
+              data-test-subj="minCountInput"
+            />
+          </EuiFormRow>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiFormRow
+            label={
+              <FormattedMessage
+                id="xpack.snapshotRestore.policyForm.stepRetention.maxCountLabel"
+                defaultMessage="Maximum count"
+              />
+            }
+            describedByIds={['countDescription']}
+            error={errors.maxCount}
+            fullWidth
+          >
+            <EuiFieldNumber
+              fullWidth
+              value={retention.maxCount || ''}
+              onBlur={() => setTouched({ ...touched, maxCount: true })}
+              onChange={e => {
+                const value = e.target.value;
+                updatePolicyRetention({
+                  maxCount: value !== '' ? Number(value) : value,
+                });
+              }}
+              data-test-subj="maxCountInput"
+            />
+          </EuiFormRow>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiDescribedFormGroup>
+  );
+
+  return (
+    <Fragment>
+      {/* Step title and doc link */}
+      <EuiFlexGroup justifyContent="spaceBetween">
+        <EuiFlexItem grow={false}>
+          <EuiTitle>
+            <h3>
+              <FormattedMessage
+                id="xpack.snapshotRestore.policyForm.stepRetentionTitle"
+                defaultMessage="Snapshot retention (optional)"
+              />
+            </h3>
+          </EuiTitle>
+        </EuiFlexItem>
+
+        <EuiFlexItem grow={false}>
+          <EuiButtonEmpty
+            size="s"
+            flush="right"
+            href={documentationLinksService.getSlmUrl()}
+            target="_blank"
+            iconType="help"
+          >
+            <FormattedMessage
+              id="xpack.snapshotRestore.policyForm.stepRetention.docsButtonLabel"
+              defaultMessage="Snapshot retention docs"
+            />
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+
+      {renderExpireAfterField()}
+      {renderCountFields()}
+    </Fragment>
+  );
+};
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_review.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_review.tsx
index 2599aa4b19bb1c..b2f9a4231e8539 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_review.tsx
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_review.tsx
@@ -13,11 +13,11 @@ import {
   EuiDescriptionListDescription,
   EuiSpacer,
   EuiTabbedContent,
+  EuiText,
   EuiTitle,
   EuiLink,
   EuiIcon,
   EuiToolTip,
-  EuiText,
 } from '@elastic/eui';
 import { serializePolicy } from '../../../../../common/lib';
 import { useAppDependencies } from '../../../index';
@@ -31,7 +31,7 @@ export const PolicyStepReview: React.FunctionComponent<StepProps> = ({
     core: { i18n },
   } = useAppDependencies();
   const { FormattedMessage } = i18n;
-  const { name, snapshotName, schedule, repository, config } = policy;
+  const { name, snapshotName, schedule, repository, config, retention } = policy;
   const { indices, includeGlobalState, ignoreUnavailable, partial } = config || {
     indices: undefined,
     includeGlobalState: undefined,
@@ -48,8 +48,27 @@ export const PolicyStepReview: React.FunctionComponent<StepProps> = ({
   const hiddenIndicesCount =
     displayIndices && displayIndices.length > 10 ? displayIndices.length - 10 : 0;
 
+  const serializedPolicy = serializePolicy(policy);
+  const { retention: serializedRetention } = serializedPolicy;
+
+  const EditStepTooltip = ({ step }: { step: number }) => (
+    <EuiToolTip
+      content={
+        <FormattedMessage
+          id="xpack.snapshotRestore.policyForm.stepReview.summaryTab.editStepTooltip"
+          defaultMessage="Edit"
+        />
+      }
+    >
+      <EuiLink onClick={() => updateCurrentStep(step)}>
+        <EuiIcon type="pencil" />
+      </EuiLink>
+    </EuiToolTip>
+  );
+
   const renderSummaryTab = () => (
     <Fragment>
+      {/* Logistics summary */}
       <EuiSpacer size="m" />
       <EuiTitle size="s">
         <h3>
@@ -57,18 +76,7 @@ export const PolicyStepReview: React.FunctionComponent<StepProps> = ({
             id="xpack.snapshotRestore.policyForm.stepReview.summaryTab.sectionLogisticsTitle"
             defaultMessage="Logistics"
           />{' '}
-          <EuiToolTip
-            content={
-              <FormattedMessage
-                id="xpack.snapshotRestore.policyForm.stepReview.summaryTab.editStepTooltip"
-                defaultMessage="Edit"
-              />
-            }
-          >
-            <EuiLink onClick={() => updateCurrentStep(1)}>
-              <EuiIcon type="pencil" />
-            </EuiLink>
-          </EuiToolTip>
+          <EditStepTooltip step={1} />
         </h3>
       </EuiTitle>
       <EuiSpacer size="s" />
@@ -125,24 +133,15 @@ export const PolicyStepReview: React.FunctionComponent<StepProps> = ({
       </EuiFlexGroup>
 
       <EuiSpacer size="m" />
+
+      {/* Snapshot settings summary */}
       <EuiTitle size="s">
         <h3>
           <FormattedMessage
             id="xpack.snapshotRestore.policyForm.stepReview.summaryTab.sectionSettingsTitle"
             defaultMessage="Snapshot settings"
           />{' '}
-          <EuiToolTip
-            content={
-              <FormattedMessage
-                id="xpack.snapshotRestore.policyForm.stepReview.summaryTab.editStepTooltip"
-                defaultMessage="Edit"
-              />
-            }
-          >
-            <EuiLink onClick={() => updateCurrentStep(2)}>
-              <EuiIcon type="pencil" />
-            </EuiLink>
-          </EuiToolTip>
+          <EditStepTooltip step={2} />
         </h3>
       </EuiTitle>
       <EuiSpacer size="s" />
@@ -279,12 +278,69 @@ export const PolicyStepReview: React.FunctionComponent<StepProps> = ({
           </EuiDescriptionList>
         </EuiFlexItem>
       </EuiFlexGroup>
+
+      {/* Retention summary */}
+      {serializedRetention ? (
+        <Fragment>
+          <EuiSpacer size="m" />
+          <EuiTitle size="s">
+            <h3>
+              <FormattedMessage
+                id="xpack.snapshotRestore.policyForm.stepReview.retentionTab.sectionRetentionTitle"
+                defaultMessage="Snapshot retention"
+              />{' '}
+              <EditStepTooltip step={3} />
+            </h3>
+          </EuiTitle>
+          <EuiSpacer size="s" />
+
+          <EuiDescriptionList textStyle="reverse">
+            {retention!.expireAfterValue && (
+              <Fragment>
+                <EuiDescriptionListTitle>
+                  <FormattedMessage
+                    id="xpack.snapshotRestore.policyForm.stepReview.retentionTab.expireAfterLabel"
+                    defaultMessage="Delete after"
+                  />
+                </EuiDescriptionListTitle>
+                <EuiDescriptionListDescription>
+                  {retention!.expireAfterValue}
+                  {retention!.expireAfterUnit}
+                </EuiDescriptionListDescription>
+              </Fragment>
+            )}
+            {retention!.minCount && (
+              <Fragment>
+                <EuiDescriptionListTitle>
+                  <FormattedMessage
+                    id="xpack.snapshotRestore.policyForm.stepReview.retentionTab.minCountLabel"
+                    defaultMessage="Min count"
+                  />
+                </EuiDescriptionListTitle>
+                <EuiDescriptionListDescription>{retention!.minCount}</EuiDescriptionListDescription>
+              </Fragment>
+            )}
+            {retention!.maxCount && (
+              <Fragment>
+                <EuiDescriptionListTitle>
+                  <FormattedMessage
+                    id="xpack.snapshotRestore.policyForm.stepReview.retentionTab.maxCountLabel"
+                    defaultMessage="Max count"
+                  />
+                </EuiDescriptionListTitle>
+                <EuiDescriptionListDescription>{retention!.maxCount}</EuiDescriptionListDescription>
+              </Fragment>
+            )}
+          </EuiDescriptionList>
+        </Fragment>
+      ) : null}
     </Fragment>
   );
 
   const renderRequestTab = () => {
     const endpoint = `PUT _slm/policy/${name}`;
-    const json = JSON.stringify(serializePolicy(policy), null, 2);
+    const json = JSON.stringify(serializedPolicy, null, 2);
+
     return (
       <Fragment>
         <EuiSpacer size="m" />
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_settings.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_settings.tsx
index 642440a8c5e911..6f1b2ed2cef4dc 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_settings.tsx
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_settings.tsx
@@ -109,6 +109,7 @@ export const PolicyStepSettings: React.FunctionComponent<StepProps> = ({
               />
             }
             checked={isAllIndices}
+            data-test-subj="allIndicesToggle"
             onChange={e => {
               const isChecked = e.target.checked;
               setIsAllIndices(isChecked);
@@ -162,6 +163,7 @@ export const PolicyStepSettings: React.FunctionComponent<StepProps> = ({
                       </EuiFlexItem>
                       <EuiFlexItem grow={false}>
                         <EuiLink
+                          data-test-subj="selectIndicesLink"
                           onClick={() => {
                             setSelectIndicesMode('list');
                             updatePolicyConfig({ indices: indicesSelection });
@@ -186,6 +188,7 @@ export const PolicyStepSettings: React.FunctionComponent<StepProps> = ({
                         selectOrDeselectAllLink:
                           config.indices && config.indices.length > 0 ? (
                             <EuiLink
+                              data-test-subj="deselectIndicesLink"
                               onClick={() => {
                                 // TODO: Change this to setIndicesOptions() when https://github.com/elastic/eui/issues/2071 is fixed
                                 indicesOptions.forEach((option: Option) => {
@@ -313,6 +316,7 @@ export const PolicyStepSettings: React.FunctionComponent<StepProps> = ({
         fullWidth
       >
         <EuiSwitch
+          data-test-subj="ignoreUnavailableIndicesToggle"
           label={
             <FormattedMessage
               id="xpack.snapshotRestore.policyForm.stepSettings.ignoreUnavailableLabel"
@@ -353,9 +357,10 @@ export const PolicyStepSettings: React.FunctionComponent<StepProps> = ({
     >
       <EuiFormRow hasEmptyLabelSpace describedByIds={['policyPartialDescription']} fullWidth>
         <EuiSwitch
+          data-test-subj="partialIndicesToggle"
           label={
             <FormattedMessage
-              id="xpack.snapshotRestore.policyForm.stepSettings.partialLabel"
+              id="xpack.snapshotRestore.policyForm.stepSettings.partialIndicesToggleSwitch"
               defaultMessage="Allow partial indices"
             />
           }
@@ -397,6 +402,7 @@ export const PolicyStepSettings: React.FunctionComponent<StepProps> = ({
         fullWidth
       >
         <EuiSwitch
+          data-test-subj="globalStateToggle"
           label={
             <FormattedMessage
               id="xpack.snapshotRestore.policyForm.stepSettings.policyIncludeGlobalStateLabel"
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/update_retention_modal_provider.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/components/update_retention_modal_provider.tsx
new file mode 100644
index 00000000000000..654fd288ea8a4b
--- /dev/null
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/components/update_retention_modal_provider.tsx
@@ -0,0 +1,297 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { Fragment, useRef, useState } from 'react';
+import {
+  EuiOverlayMask,
+  EuiModal,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiButtonEmpty,
+  EuiButton,
+  EuiLink,
+  EuiFormRow,
+  EuiFieldText,
+  EuiSpacer,
+  EuiText,
+  EuiCallOut,
+} from '@elastic/eui';
+import { useAppDependencies } from '../index';
+import { documentationLinksService } from '../services/documentation';
+import { CronEditor } from '../../shared_imports';
+import { DEFAULT_RETENTION_SCHEDULE, DEFAULT_RETENTION_FREQUENCY } from '../constants';
+import { updateRetentionSchedule } from '../services/http';
+
+interface Props {
+  children: (updateRetention: UpdateRetentionSetting) => React.ReactElement;
+}
+
+export type UpdateRetentionSetting = (
+  retentionSchedule?: string,
+  onSuccess?: OnSuccessCallback
+) => void;
+
+type OnSuccessCallback = () => void;
+
+export const UpdateRetentionModalProvider: React.FunctionComponent<Props> = ({ children }) => {
+  const {
+    core: {
+      i18n,
+      notification: { toastNotifications },
+    },
+  } = useAppDependencies();
+  const { FormattedMessage } = i18n;
+
+  const [retentionSchedule, setRetentionSchedule] = useState<string>(DEFAULT_RETENTION_SCHEDULE);
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+  const [isEditing, setIsEditing] = useState<boolean>(false);
+  const [isSaving, setIsSaving] = useState<boolean>(false);
+  const [saveError, setSaveError] = useState<any>(null);
+  const [isAdvancedCronVisible, setIsAdvancedCronVisible] = useState<boolean>(false);
+
+  const onSuccessCallback = useRef<OnSuccessCallback | null>(null);
+
+  const [simpleCron, setSimpleCron] = useState<{
+    expression: string;
+    frequency: string;
+  }>({
+    expression: DEFAULT_RETENTION_SCHEDULE,
+    frequency: DEFAULT_RETENTION_FREQUENCY,
+  });
+
+  const [fieldToPreferredValueMap, setFieldToPreferredValueMap] = useState<any>({});
+
+  const [isInvalid, setIsInvalid] = useState<boolean>(false);
+
+  const updateRetentionPrompt: UpdateRetentionSetting = (
+    originalRetentionSchedule,
+    onSuccess = () => undefined
+  ) => {
+    setIsModalOpen(true);
+
+    setIsAdvancedCronVisible(
+      Boolean(originalRetentionSchedule && originalRetentionSchedule !== DEFAULT_RETENTION_SCHEDULE)
+    );
+
+    if (originalRetentionSchedule) {
+      setIsEditing(true);
+      setRetentionSchedule(originalRetentionSchedule);
+    }
+
+    onSuccessCallback.current = onSuccess;
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  const updateRetentionSetting = async () => {
+    if (!retentionSchedule) {
+      setIsInvalid(true);
+      return;
+    }
+
+    setIsSaving(true);
+    setSaveError(null);
+
+    const { error } = await updateRetentionSchedule(retentionSchedule);
+
+    setIsSaving(false);
+
+    if (error) {
+      setSaveError(error);
+    } else {
+      closeModal();
+
+      toastNotifications.addSuccess(
+        i18n.translate(
+          'xpack.snapshotRestore.policyForm.stepRetention.policyUpdateRetentionSuccessMessage',
+          {
+            defaultMessage: 'Updated retention schedule',
+          }
+        )
+      );
+
+      if (onSuccessCallback.current) {
+        onSuccessCallback.current();
+      }
+    }
+  };
+
+  const renderModal = () => {
+    if (!isModalOpen) {
+      return null;
+    }
+
+    return (
+      <EuiOverlayMask>
+        <EuiModal onClose={closeModal}>
+          <EuiModalHeader>
+            <EuiModalHeaderTitle>
+              {isEditing ? (
+                <FormattedMessage
+                  id="xpack.snapshotRestore.policyForm.stepRetention.policyUpdateRetentionEditTitle"
+                  defaultMessage="Edit retention schedule"
+                />
+              ) : (
+                <FormattedMessage
+                  id="xpack.snapshotRestore.policyForm.stepRetention.policyUpdateRetentionAddTitle"
+                  defaultMessage="Add retention schedule"
+                />
+              )}
+            </EuiModalHeaderTitle>
+          </EuiModalHeader>
+
+          <EuiModalBody>
+            {saveError && (
+              <Fragment>
+                <EuiCallOut
+                  title={
+                    <FormattedMessage
+                      id="xpack.snapshotRestore.policyForm.stepRetention.policyUpdateRetentionErrorTitle"
+                      defaultMessage="Error saving retention schedule"
+                    />
+                  }
+                  color="danger"
+                  iconType="alert"
+                >
+                  {saveError.data && saveError.data.message ? (
+                    <p>{saveError.data.message}</p>
+                  ) : null}
+                </EuiCallOut>
+                <EuiSpacer size="m" />
+              </Fragment>
+            )}
+            {isAdvancedCronVisible ? (
+              <Fragment>
+                <EuiFormRow
+                  label={
+                    <FormattedMessage
+                      id="xpack.snapshotRestore.policyForm.stepRetention.policyUpdateRetentionScheduleLabel"
+                      defaultMessage="Retention schedule"
+                    />
+                  }
+                  isInvalid={isInvalid}
+                  error={i18n.translate(
+                    'xpack.snapshotRestore.policyForm.stepRetention.policyUpdateRetentionScheduleFieldErrorMessage',
+                    {
+                      defaultMessage: 'Retention schedule is required.',
+                    }
+                  )}
+                  helpText={
+                    <FormattedMessage
+                      id="xpack.snapshotRestore.policyForm.stepRetention.policyUpdateRetentionHelpText"
+                      defaultMessage="Use cron expression. {docLink}"
+                      values={{
+                        docLink: (
+                          <EuiLink href={documentationLinksService.getCronUrl()} target="_blank">
+                            <FormattedMessage
+                              id="xpack.snapshotRestore.policyForm.stepRetention.policyUpdateRetentionHelpTextDocLinkText"
+                              defaultMessage="Learn more"
+                            />
+                          </EuiLink>
+                        ),
+                      }}
+                    />
+                  }
+                  fullWidth
+                >
+                  <EuiFieldText
+                    defaultValue={retentionSchedule}
+                    fullWidth
+                    onChange={e => setRetentionSchedule(e.target.value)}
+                  />
+                </EuiFormRow>
+
+                <EuiSpacer size="m" />
+
+                <EuiText size="s">
+                  <EuiLink
+                    onClick={() => {
+                      setIsAdvancedCronVisible(false);
+                      setRetentionSchedule(simpleCron.expression);
+                    }}
+                    data-test-subj="showBasicCronLink"
+                  >
+                    <FormattedMessage
+                      id="xpack.snapshotRestore.policyForm.stepRetention.policyUpdateRetentionBasicLabel"
+                      defaultMessage="Create basic interval"
+                    />
+                  </EuiLink>
+                </EuiText>
+              </Fragment>
+            ) : (
+              <Fragment>
+                <CronEditor
+                  fieldToPreferredValueMap={fieldToPreferredValueMap}
+                  cronExpression={simpleCron.expression}
+                  frequency={simpleCron.frequency}
+                  onChange={({
+                    cronExpression: expression,
+                    frequency,
+                    fieldToPreferredValueMap: newFieldToPreferredValueMap,
+                  }: {
+                    cronExpression: string;
+                    frequency: string;
+                    fieldToPreferredValueMap: any;
+                  }) => {
+                    setSimpleCron({
+                      expression,
+                      frequency,
+                    });
+                    setFieldToPreferredValueMap(newFieldToPreferredValueMap);
+                    setRetentionSchedule(expression);
+                  }}
+                />
+
+                <EuiSpacer size="m" />
+
+                <EuiText size="s">
+                  <EuiLink
+                    onClick={() => {
+                      setIsAdvancedCronVisible(true);
+                    }}
+                    data-test-subj="showAdvancedCronLink"
+                  >
+                    <FormattedMessage
+                      id="xpack.snapshotRestore.policyForm.stepRetention.policyUpdateRetentionAdvancedLabel"
+                      defaultMessage="Create cron expression"
+                    />
+                  </EuiLink>
+                </EuiText>
+              </Fragment>
+            )}
+          </EuiModalBody>
+
+          <EuiModalFooter>
+            <EuiButtonEmpty onClick={closeModal}>
+              <FormattedMessage
+                id="xpack.snapshotRestore.policyForm.stepRetention.policyUpdateRetentionCancelButtonLabel"
+                defaultMessage="Cancel"
+              />
+            </EuiButtonEmpty>
+
+            <EuiButton onClick={updateRetentionSetting} fill isLoading={isSaving}>
+              <FormattedMessage
+                id="xpack.snapshotRestore.policyForm.stepRetention.policyUpdateRetentionSaveButtonLabel"
+                defaultMessage="Save"
+              />
+            </EuiButton>
+          </EuiModalFooter>
+        </EuiModal>
+      </EuiOverlayMask>
+    );
+  };
+
+  return (
+    <Fragment>
+      {children(updateRetentionPrompt)}
+      {renderModal()}
+    </Fragment>
+  );
+};
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/constants/index.ts b/x-pack/legacy/plugins/snapshot_restore/public/app/constants/index.ts
index d95c243aeed628..56da4d8a50972c 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/constants/index.ts
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/constants/index.ts
@@ -91,6 +91,9 @@ export const REMOVE_INDEX_SETTINGS_SUGGESTIONS: string[] = INDEX_SETTING_SUGGEST
 export const DEFAULT_POLICY_SCHEDULE = '0 30 1 * * ?';
 export const DEFAULT_POLICY_FREQUENCY = DAY;
 
+export const DEFAULT_RETENTION_SCHEDULE = '0 30 1 * * ?';
+export const DEFAULT_RETENTION_FREQUENCY = DAY;
+
 // UI Metric constants
 export const UIM_APP_NAME = 'snapshot_restore';
 export const UIM_REPOSITORY_LIST_LOAD = 'repository_list_load';
@@ -119,3 +122,4 @@ export const UIM_POLICY_DELETE = 'policy_delete';
 export const UIM_POLICY_DELETE_MANY = 'policy_delete_many';
 export const UIM_POLICY_CREATE = 'policy_create';
 export const UIM_POLICY_UPDATE = 'policy_update';
+export const UIM_POLICY_RETENTION_SETTINGS_UPDATE = 'policy_retention_settings_update';
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/_home.scss b/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/_home.scss
index c714222daa98b5..741ee76985937e 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/_home.scss
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/_home.scss
@@ -28,4 +28,19 @@
   .euiToolTipAnchor {
     display: flex;
   }
-}
\ No newline at end of file
+}
+
+/*
+ * Wraps long snapshot name with ellipsis when it is rendered with an icon
+ */
+.snapshotRestorePolicyTableSnapshotFailureContainer {
+  max-width: 200px;
+  > .euiFlexItem:last-child {
+      min-width: 0;
+      .euiText {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+  }
+}
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/policy_list/policy_details/tabs/tab_summary.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/policy_list/policy_details/tabs/tab_summary.tsx
index ea29d6492cb4b5..68dc9fb164c706 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/policy_list/policy_details/tabs/tab_summary.tsx
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/policy_list/policy_details/tabs/tab_summary.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, { useState, useEffect } from 'react';
+import React, { useState, useEffect, Fragment } from 'react';
 import {
   EuiFlexGroup,
   EuiFlexItem,
@@ -14,6 +14,10 @@ import {
   EuiDescriptionListDescription,
   EuiIcon,
   EuiText,
+  EuiPanel,
+  EuiStat,
+  EuiSpacer,
+  EuiHorizontalRule,
 } from '@elastic/eui';
 
 import { SlmPolicy } from '../../../../../../../common/types';
@@ -40,6 +44,8 @@ export const TabSummary: React.FunctionComponent<Props> = ({ policy }) => {
     schedule,
     nextExecutionMillis,
     config,
+    stats,
+    retention,
   } = policy;
   const { includeGlobalState, ignoreUnavailable, indices, partial } = config || {
     includeGlobalState: undefined,
@@ -123,176 +129,306 @@ export const TabSummary: React.FunctionComponent<Props> = ({ policy }) => {
   }, []);
 
   return (
-    <EuiDescriptionList textStyle="reverse">
-      <EuiFlexGroup>
-        <EuiFlexItem data-test-subj="version">
-          <EuiDescriptionListTitle data-test-subj="title">
-            <FormattedMessage
-              id="xpack.snapshotRestore.policyDetails.versionLabel"
-              defaultMessage="Version"
-            />
-          </EuiDescriptionListTitle>
-
-          <EuiDescriptionListDescription className="eui-textBreakWord" data-test-subj="value">
-            {version}
-          </EuiDescriptionListDescription>
-        </EuiFlexItem>
-
-        <EuiFlexItem data-test-subj="modified">
-          <EuiDescriptionListTitle data-test-subj="title">
-            <FormattedMessage
-              id="xpack.snapshotRestore.policyDetails.modifiedDateLabel"
-              defaultMessage="Last modified"
-            />
-          </EuiDescriptionListTitle>
-
-          <EuiDescriptionListDescription className="eui-textBreakWord" data-test-subj="value">
-            <FormattedDateTime epochMs={modifiedDateMillis} />
-          </EuiDescriptionListDescription>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-
-      <EuiFlexGroup>
-        <EuiFlexItem data-test-subj="name">
-          <EuiDescriptionListTitle data-test-subj="title">
-            <FormattedMessage
-              id="xpack.snapshotRestore.policyDetails.snapshotNameLabel"
-              defaultMessage="Snapshot name"
-            />
-          </EuiDescriptionListTitle>
-
-          <EuiDescriptionListDescription className="eui-textBreakWord" data-test-subj="value">
-            <EuiLink href={linkToSnapshots(undefined, name)}>{snapshotName}</EuiLink>
-          </EuiDescriptionListDescription>
-        </EuiFlexItem>
-
-        <EuiFlexItem data-test-subj="repository">
-          <EuiDescriptionListTitle data-test-subj="title">
-            <FormattedMessage
-              id="xpack.snapshotRestore.policyDetails.repositoryLabel"
-              defaultMessage="Repository"
-            />
-          </EuiDescriptionListTitle>
-
-          <EuiDescriptionListDescription className="eui-textBreakWord" data-test-subj="value">
-            <EuiLink href={linkToRepository(repository)}>{repository}</EuiLink>
-          </EuiDescriptionListDescription>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-
-      <EuiFlexGroup>
-        <EuiFlexItem data-test-subj="schedule">
-          <EuiDescriptionListTitle data-test-subj="title">
-            <FormattedMessage
-              id="xpack.snapshotRestore.policyDetails.scheduleLabel"
-              defaultMessage="Schedule"
-            />
-          </EuiDescriptionListTitle>
-
-          <EuiDescriptionListDescription className="eui-textBreakWord" data-test-subj="value">
-            {schedule}
-          </EuiDescriptionListDescription>
-        </EuiFlexItem>
-
-        <EuiFlexItem data-test-subj="execution">
-          <EuiDescriptionListTitle data-test-subj="title">
-            <FormattedMessage
-              id="xpack.snapshotRestore.policyDetails.nextExecutionLabel"
-              defaultMessage="Next snapshot"
-            />
-          </EuiDescriptionListTitle>
-
-          <EuiDescriptionListDescription className="eui-textBreakWord" data-test-subj="value">
-            <FormattedDateTime epochMs={nextExecutionMillis} />
-          </EuiDescriptionListDescription>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-
-      <EuiFlexGroup>
-        <EuiFlexItem data-test-subj="indices">
-          <EuiDescriptionListTitle data-test-subj="title">
-            <FormattedMessage
-              id="xpack.snapshotRestore.policyDetails.indicesLabel"
-              defaultMessage="Indices"
-            />
-          </EuiDescriptionListTitle>
-
-          <EuiDescriptionListDescription className="eui-textBreakWord" data-test-subj="value">
-            {isShowingFullIndicesList ? fullIndicesList : shortIndicesList}
-          </EuiDescriptionListDescription>
-        </EuiFlexItem>
-
-        <EuiFlexItem data-test-subj="includeGlobalState">
-          <EuiDescriptionListTitle data-test-subj="title">
-            <FormattedMessage
-              id="xpack.snapshotRestore.policyDetails.ignoreUnavailableLabel"
-              defaultMessage="Ignore unavailable indices"
-            />
-          </EuiDescriptionListTitle>
-
-          <EuiDescriptionListDescription className="eui-textBreakWord" data-test-subj="value">
-            {ignoreUnavailable ? (
+    <Fragment>
+      {/** Stats panel */}
+      {stats && (
+        <Fragment>
+          <EuiPanel>
+            <EuiFlexGroup justifyContent="spaceBetween">
+              <EuiFlexItem grow={false}>
+                <EuiStat
+                  title={stats.snapshotsTaken}
+                  description={i18n.translate(
+                    'xpack.snapshotRestore.policyDetails.snapshotsTakenStat',
+                    {
+                      defaultMessage: 'Snapshots',
+                    }
+                  )}
+                  titleSize="s"
+                />
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiStat
+                  title={stats.snapshotsFailed}
+                  description={i18n.translate(
+                    'xpack.snapshotRestore.policyDetails.snapshotsFailedStat',
+                    {
+                      defaultMessage: 'Failures',
+                    }
+                  )}
+                  titleSize="s"
+                />
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiStat
+                  title={stats.snapshotsDeleted}
+                  description={i18n.translate(
+                    'xpack.snapshotRestore.policyDetails.snapshotsDeletedStat',
+                    {
+                      defaultMessage: 'Deletions',
+                    }
+                  )}
+                  titleSize="s"
+                />
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiStat
+                  title={stats.snapshotDeletionFailures}
+                  description={i18n.translate(
+                    'xpack.snapshotRestore.policyDetails.snapshotDeletionFailuresStat',
+                    {
+                      defaultMessage: 'Deletion failures',
+                    }
+                  )}
+                  titleSize="s"
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiPanel>
+
+          <EuiSpacer />
+        </Fragment>
+      )}
+
+      {/** General description list */}
+      <EuiTitle size="s">
+        <h3>
+          <FormattedMessage
+            id="xpack.snapshotRestore.policyDetails.generalTitle"
+            defaultMessage="General"
+          />
+        </h3>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+
+      <EuiDescriptionList textStyle="reverse">
+        <EuiFlexGroup>
+          <EuiFlexItem data-test-subj="version">
+            <EuiDescriptionListTitle data-test-subj="title">
               <FormattedMessage
-                id="xpack.snapshotRestore.policyDetails.ignoreUnavailableTrueLabel"
-                defaultMessage="Yes"
+                id="xpack.snapshotRestore.policyDetails.versionLabel"
+                defaultMessage="Version"
               />
-            ) : (
+            </EuiDescriptionListTitle>
+
+            <EuiDescriptionListDescription className="eui-textBreakWord" data-test-subj="value">
+              {version}
+            </EuiDescriptionListDescription>
+          </EuiFlexItem>
+
+          <EuiFlexItem data-test-subj="modified">
+            <EuiDescriptionListTitle data-test-subj="title">
               <FormattedMessage
-                id="xpack.snapshotRestore.policyDetails.ignoreUnavailableFalseLabel"
-                defaultMessage="No"
+                id="xpack.snapshotRestore.policyDetails.modifiedDateLabel"
+                defaultMessage="Last modified"
               />
-            )}
-          </EuiDescriptionListDescription>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-
-      <EuiFlexGroup>
-        <EuiFlexItem data-test-subj="partial">
-          <EuiDescriptionListTitle data-test-subj="title">
-            <FormattedMessage
-              id="xpack.snapshotRestore.policyDetails.partialLabel"
-              defaultMessage="Allow partial shards"
-            />
-          </EuiDescriptionListTitle>
-
-          <EuiDescriptionListDescription className="eui-textBreakWord" data-test-subj="value">
-            {partial ? (
+            </EuiDescriptionListTitle>
+
+            <EuiDescriptionListDescription className="eui-textBreakWord" data-test-subj="value">
+              <FormattedDateTime epochMs={modifiedDateMillis} />
+            </EuiDescriptionListDescription>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+
+        <EuiFlexGroup>
+          <EuiFlexItem data-test-subj="name">
+            <EuiDescriptionListTitle data-test-subj="title">
               <FormattedMessage
-                id="xpack.snapshotRestore.policyDetails.partialTrueLabel"
-                defaultMessage="Yes"
+                id="xpack.snapshotRestore.policyDetails.snapshotNameLabel"
+                defaultMessage="Snapshot name"
               />
-            ) : (
+            </EuiDescriptionListTitle>
+
+            <EuiDescriptionListDescription className="eui-textBreakWord" data-test-subj="value">
+              <EuiLink href={linkToSnapshots(undefined, name)}>{snapshotName}</EuiLink>
+            </EuiDescriptionListDescription>
+          </EuiFlexItem>
+
+          <EuiFlexItem data-test-subj="repository">
+            <EuiDescriptionListTitle data-test-subj="title">
               <FormattedMessage
-                id="xpack.snapshotRestore.policyDetails.partialFalseLabel"
-                defaultMessage="No"
+                id="xpack.snapshotRestore.policyDetails.repositoryLabel"
+                defaultMessage="Repository"
               />
-            )}
-          </EuiDescriptionListDescription>
-        </EuiFlexItem>
-
-        <EuiFlexItem data-test-subj="includeGlobalState">
-          <EuiDescriptionListTitle data-test-subj="title">
-            <FormattedMessage
-              id="xpack.snapshotRestore.policyDetails.includeGlobalStateLabel"
-              defaultMessage="Include global state"
-            />
-          </EuiDescriptionListTitle>
-
-          <EuiDescriptionListDescription className="eui-textBreakWord" data-test-subj="value">
-            {includeGlobalState === false ? (
+            </EuiDescriptionListTitle>
+
+            <EuiDescriptionListDescription className="eui-textBreakWord" data-test-subj="value">
+              <EuiLink href={linkToRepository(repository)}>{repository}</EuiLink>
+            </EuiDescriptionListDescription>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+
+        <EuiFlexGroup>
+          <EuiFlexItem data-test-subj="schedule">
+            <EuiDescriptionListTitle data-test-subj="title">
+              <FormattedMessage
+                id="xpack.snapshotRestore.policyDetails.scheduleLabel"
+                defaultMessage="Schedule"
+              />
+            </EuiDescriptionListTitle>
+
+            <EuiDescriptionListDescription className="eui-textBreakWord" data-test-subj="value">
+              {schedule}
+            </EuiDescriptionListDescription>
+          </EuiFlexItem>
+
+          <EuiFlexItem data-test-subj="execution">
+            <EuiDescriptionListTitle data-test-subj="title">
+              <FormattedMessage
+                id="xpack.snapshotRestore.policyDetails.nextExecutionLabel"
+                defaultMessage="Next snapshot"
+              />
+            </EuiDescriptionListTitle>
+
+            <EuiDescriptionListDescription className="eui-textBreakWord" data-test-subj="value">
+              <FormattedDateTime epochMs={nextExecutionMillis} />
+            </EuiDescriptionListDescription>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+
+        <EuiFlexGroup>
+          <EuiFlexItem data-test-subj="indices">
+            <EuiDescriptionListTitle data-test-subj="title">
               <FormattedMessage
-                id="xpack.snapshotRestore.policyDetails.includeGlobalStateFalseLabel"
-                defaultMessage="No"
+                id="xpack.snapshotRestore.policyDetails.indicesLabel"
+                defaultMessage="Indices"
               />
-            ) : (
+            </EuiDescriptionListTitle>
+
+            <EuiDescriptionListDescription className="eui-textBreakWord" data-test-subj="value">
+              {isShowingFullIndicesList ? fullIndicesList : shortIndicesList}
+            </EuiDescriptionListDescription>
+          </EuiFlexItem>
+
+          <EuiFlexItem data-test-subj="includeGlobalState">
+            <EuiDescriptionListTitle data-test-subj="title">
+              <FormattedMessage
+                id="xpack.snapshotRestore.policyDetails.ignoreUnavailableLabel"
+                defaultMessage="Ignore unavailable indices"
+              />
+            </EuiDescriptionListTitle>
+
+            <EuiDescriptionListDescription className="eui-textBreakWord" data-test-subj="value">
+              {ignoreUnavailable ? (
+                <FormattedMessage
+                  id="xpack.snapshotRestore.policyDetails.ignoreUnavailableTrueLabel"
+                  defaultMessage="Yes"
+                />
+              ) : (
+                <FormattedMessage
+                  id="xpack.snapshotRestore.policyDetails.ignoreUnavailableFalseLabel"
+                  defaultMessage="No"
+                />
+              )}
+            </EuiDescriptionListDescription>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+
+        <EuiFlexGroup>
+          <EuiFlexItem data-test-subj="partial">
+            <EuiDescriptionListTitle data-test-subj="title">
               <FormattedMessage
-                id="xpack.snapshotRestore.policyDetails.includeGlobalStateTrueLabel"
-                defaultMessage="Yes"
+                id="xpack.snapshotRestore.policyDetails.partialLabel"
+                defaultMessage="Allow partial shards"
               />
+            </EuiDescriptionListTitle>
+
+            <EuiDescriptionListDescription className="eui-textBreakWord" data-test-subj="value">
+              {partial ? (
+                <FormattedMessage
+                  id="xpack.snapshotRestore.policyDetails.partialTrueLabel"
+                  defaultMessage="Yes"
+                />
+              ) : (
+                <FormattedMessage
+                  id="xpack.snapshotRestore.policyDetails.partialFalseLabel"
+                  defaultMessage="No"
+                />
+              )}
+            </EuiDescriptionListDescription>
+          </EuiFlexItem>
+
+          <EuiFlexItem data-test-subj="includeGlobalState">
+            <EuiDescriptionListTitle data-test-subj="title">
+              <FormattedMessage
+                id="xpack.snapshotRestore.policyDetails.includeGlobalStateLabel"
+                defaultMessage="Include global state"
+              />
+            </EuiDescriptionListTitle>
+
+            <EuiDescriptionListDescription className="eui-textBreakWord" data-test-subj="value">
+              {includeGlobalState === false ? (
+                <FormattedMessage
+                  id="xpack.snapshotRestore.policyDetails.includeGlobalStateFalseLabel"
+                  defaultMessage="No"
+                />
+              ) : (
+                <FormattedMessage
+                  id="xpack.snapshotRestore.policyDetails.includeGlobalStateTrueLabel"
+                  defaultMessage="Yes"
+                />
+              )}
+            </EuiDescriptionListDescription>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiDescriptionList>
+
+      {retention && (
+        <Fragment>
+          <EuiSpacer size="s" />
+          <EuiHorizontalRule />
+
+          {/** Retention description list */}
+          <EuiTitle size="s">
+            <h3>
+              <FormattedMessage
+                id="xpack.snapshotRestore.policyDetails.retentionTitle"
+                defaultMessage="Retention"
+              />
+            </h3>
+          </EuiTitle>
+          <EuiSpacer size="s" />
+
+          <EuiDescriptionList textStyle="reverse">
+            {retention.expireAfterValue && (
+              <Fragment>
+                <EuiDescriptionListTitle>
+                  <FormattedMessage
+                    id="xpack.snapshotRestore.policyDetails.expireAfterLabel"
+                    defaultMessage="Delete after"
+                  />
+                </EuiDescriptionListTitle>
+                <EuiDescriptionListDescription>
+                  {retention.expireAfterValue}
+                  {retention.expireAfterUnit}
+                </EuiDescriptionListDescription>
+              </Fragment>
+            )}
+            {retention.minCount && (
+              <Fragment>
+                <EuiDescriptionListTitle>
+                  <FormattedMessage
+                    id="xpack.snapshotRestore.policyDetails.minCountLabel"
+                    defaultMessage="Min count"
+                  />
+                </EuiDescriptionListTitle>
+                <EuiDescriptionListDescription>{retention.minCount}</EuiDescriptionListDescription>
+              </Fragment>
+            )}
+            {retention.maxCount && (
+              <Fragment>
+                <EuiDescriptionListTitle>
+                  <FormattedMessage
+                    id="xpack.snapshotRestore.policyDetails.maxCountLabel"
+                    defaultMessage="Max count"
+                  />
+                </EuiDescriptionListTitle>
+                <EuiDescriptionListDescription>{retention.maxCount}</EuiDescriptionListDescription>
+              </Fragment>
             )}
-          </EuiDescriptionListDescription>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiDescriptionList>
+          </EuiDescriptionList>
+        </Fragment>
+      )}
+    </Fragment>
   );
 };
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/policy_list/policy_list.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/policy_list/policy_list.tsx
index 270eb8d43aa99c..a1688b8e35486f 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/policy_list/policy_list.tsx
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/policy_list/policy_list.tsx
@@ -13,13 +13,14 @@ import { APP_SLM_CLUSTER_PRIVILEGES } from '../../../../../common/constants';
 import { SectionError, SectionLoading, Error } from '../../../components';
 import { BASE_PATH, UIM_POLICY_LIST_LOAD } from '../../../constants';
 import { useAppDependencies } from '../../../index';
-import { useLoadPolicies } from '../../../services/http';
+import { useLoadPolicies, useLoadRetentionSettings } from '../../../services/http';
 import { uiMetricService } from '../../../services/ui_metric';
 import { linkToAddPolicy, linkToPolicy } from '../../../services/navigation';
 import { WithPrivileges, NotAuthorizedSection } from '../../../lib/authorization';
 
 import { PolicyDetails } from './policy_details';
 import { PolicyTable } from './policy_table';
+import { PolicyRetentionSchedule } from './policy_retention_schedule';
 
 interface MatchParams {
   policyName?: SlmPolicy['name'];
@@ -46,6 +47,14 @@ export const PolicyList: React.FunctionComponent<RouteComponentProps<MatchParams
     sendRequest: reload,
   } = useLoadPolicies();
 
+  // Load retention cluster settings
+  const {
+    isLoading: isLoadingRetentionSettings,
+    error: retentionSettingsError,
+    data: retentionSettings,
+    sendRequest: reloadRetentionSettings,
+  } = useLoadRetentionSettings();
+
   const openPolicyDetailsUrl = (newPolicyName: SlmPolicy['name']): string => {
     return linkToPolicy(newPolicyName);
   };
@@ -137,6 +146,8 @@ export const PolicyList: React.FunctionComponent<RouteComponentProps<MatchParams
   } else {
     const policySchedules = policies.map((policy: SlmPolicy) => policy.schedule);
     const hasDuplicateSchedules = policySchedules.length > new Set(policySchedules).size;
+    const hasRetention = Boolean(policies.find((policy: SlmPolicy) => policy.retention));
+
     content = (
       <Fragment>
         {hasDuplicateSchedules ? (
@@ -159,6 +170,16 @@ export const PolicyList: React.FunctionComponent<RouteComponentProps<MatchParams
             <EuiSpacer />
           </Fragment>
         ) : null}
+
+        {hasRetention ? (
+          <PolicyRetentionSchedule
+            retentionSettings={retentionSettings}
+            onRetentionScheduleUpdated={reloadRetentionSettings}
+            isLoading={isLoadingRetentionSettings}
+            error={retentionSettingsError}
+          />
+        ) : null}
+
         <PolicyTable
           policies={policies || []}
           reload={reload}
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/policy_list/policy_retention_schedule/index.ts b/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/policy_list/policy_retention_schedule/index.ts
new file mode 100644
index 00000000000000..78fd0610be7234
--- /dev/null
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/policy_list/policy_retention_schedule/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { PolicyRetentionSchedule } from './policy_retention_schedule';
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/policy_list/policy_retention_schedule/policy_retention_schedule.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/policy_list/policy_retention_schedule/policy_retention_schedule.tsx
new file mode 100644
index 00000000000000..6f50abe8d41953
--- /dev/null
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/policy_list/policy_retention_schedule/policy_retention_schedule.tsx
@@ -0,0 +1,175 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { Fragment } from 'react';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLoadingContent,
+  EuiPanel,
+  EuiText,
+  EuiButton,
+  EuiButtonIcon,
+  EuiSpacer,
+  EuiToolTip,
+  EuiCallOut,
+} from '@elastic/eui';
+
+import { useAppDependencies } from '../../../../index';
+import { UpdateRetentionModalProvider, UpdateRetentionSetting } from '../../../../components';
+
+interface Props {
+  retentionSettings: {
+    retentionSchedule: string;
+  };
+  onRetentionScheduleUpdated: () => void;
+  isLoading: boolean;
+  error: any;
+}
+
+export const PolicyRetentionSchedule: React.FunctionComponent<Props> = ({
+  retentionSettings,
+  onRetentionScheduleUpdated,
+  isLoading,
+  error,
+}) => {
+  const {
+    core: { i18n },
+  } = useAppDependencies();
+
+  const { FormattedMessage } = i18n;
+
+  if (isLoading) {
+    return (
+      <Fragment>
+        <EuiPanel>
+          <EuiLoadingContent lines={1} />
+        </EuiPanel>
+        <EuiSpacer />
+      </Fragment>
+    );
+  }
+
+  if (error) {
+    return (
+      <Fragment>
+        <EuiCallOut
+          title={
+            <FormattedMessage
+              id="xpack.snapshotRestore.policyRetentionSchedulePanel.errorFetchingRetentionScheduleTitle"
+              defaultMessage="Error fetching retention schedule"
+            />
+          }
+          color="danger"
+          iconType="alert"
+        >
+          {error.data && error.data.message ? <p>{error.data.message}</p> : null}
+          <EuiButton iconType="refresh" color="danger" onClick={onRetentionScheduleUpdated}>
+            <FormattedMessage
+              id="xpack.snapshotRestore.policyRetentionSchedulePanel.errorFetchingRetentionScheduleReloadButtonLabel"
+              defaultMessage="Reload"
+            />
+          </EuiButton>
+        </EuiCallOut>
+        <EuiSpacer />
+      </Fragment>
+    );
+  }
+
+  if (retentionSettings && retentionSettings.retentionSchedule) {
+    const { retentionSchedule } = retentionSettings;
+
+    return (
+      <Fragment>
+        <EuiPanel>
+          <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+            <EuiFlexItem grow={false}>
+              <EuiText>
+                <p>
+                  <FormattedMessage
+                    id="xpack.snapshotRestore.policyRetentionSchedulePanel.retentionScheduleDescription"
+                    defaultMessage="Snapshot retention will run on the cron schedule: {cronSchedule}."
+                    values={{ cronSchedule: <strong>{retentionSchedule}</strong> }}
+                  />
+                </p>
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <UpdateRetentionModalProvider>
+                {(updateRetentionPrompt: UpdateRetentionSetting) => {
+                  return (
+                    <EuiToolTip
+                      position="top"
+                      content={
+                        <FormattedMessage
+                          id="xpack.snapshotRestore.policyRetentionSchedulePanel.retentionScheduleEditLinkTooltip"
+                          defaultMessage="Edit retention schedule"
+                        />
+                      }
+                    >
+                      <EuiButtonIcon
+                        iconType="pencil"
+                        onClick={() =>
+                          updateRetentionPrompt(retentionSchedule, onRetentionScheduleUpdated)
+                        }
+                        aria-label={i18n.translate(
+                          'xpack.snapshotRestore.policyRetentionSchedulePanel.retentionScheduleEditLinkAriaLabel',
+                          {
+                            defaultMessage: 'Edit retention schedule',
+                          }
+                        )}
+                      />
+                    </EuiToolTip>
+                  );
+                }}
+              </UpdateRetentionModalProvider>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiPanel>
+        <EuiSpacer />
+      </Fragment>
+    );
+  } else {
+    return (
+      <Fragment>
+        <EuiCallOut
+          title={
+            <FormattedMessage
+              id="xpack.snapshotRestore.policyRetentionSchedulePanel.noScheduleConfiguredWarningTitle"
+              defaultMessage="Retention schedule not configured"
+            />
+          }
+          color="warning"
+          iconType="alert"
+        >
+          <p>
+            <FormattedMessage
+              id="xpack.snapshotRestore.policyRetentionSchedulePanel.noScheduleConfiguredWarningDescription"
+              defaultMessage="You have one or more policies with retention, but you do not have a retention schedule configured."
+            />
+          </p>
+          <UpdateRetentionModalProvider>
+            {(updateRetentionPrompt: UpdateRetentionSetting) => {
+              return (
+                <EuiButton
+                  iconType="plusInCircle"
+                  color="warning"
+                  onClick={() => updateRetentionPrompt(undefined, onRetentionScheduleUpdated)}
+                >
+                  <FormattedMessage
+                    id="xpack.snapshotRestore.policyRetentionSchedulePanel.retentionScheduleAddButtonLabel"
+                    defaultMessage="Add retention schedule"
+                  />
+                </EuiButton>
+              );
+            }}
+          </UpdateRetentionModalProvider>
+        </EuiCallOut>
+        <EuiSpacer />
+      </Fragment>
+    );
+  }
+};
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/policy_list/policy_table/policy_table.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/policy_list/policy_table/policy_table.tsx
index a47b670177ca83..ee906eb9f87473 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/policy_list/policy_table/policy_table.tsx
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/policy_list/policy_table/policy_table.tsx
@@ -14,6 +14,8 @@ import {
   EuiToolTip,
   EuiButtonIcon,
   EuiLoadingSpinner,
+  EuiText,
+  EuiIcon,
 } from '@elastic/eui';
 
 import { SlmPolicy } from '../../../../../../common/types';
@@ -94,8 +96,40 @@ export const PolicyTable: React.FunctionComponent<Props> = ({
       name: i18n.translate('xpack.snapshotRestore.policyList.table.snapshotNameColumnTitle', {
         defaultMessage: 'Snapshot name',
       }),
-      truncateText: true,
       sortable: true,
+      render: (
+        snapshotName: SlmPolicy['snapshotName'],
+        { lastFailure, lastSuccess }: SlmPolicy
+      ) => {
+        // Alert user if last snapshot failed
+        if (lastSuccess && lastFailure && lastFailure.time > lastSuccess.time) {
+          return (
+            <EuiFlexGroup
+              gutterSize="s"
+              alignItems="center"
+              className="snapshotRestorePolicyTableSnapshotFailureContainer"
+            >
+              <EuiFlexItem grow={false}>
+                <EuiToolTip
+                  position="top"
+                  content={i18n.translate(
+                    'xpack.snapshotRestore.policyList.table.lastSnapshotFailedTooltip',
+                    {
+                      defaultMessage: 'Last snapshot failed',
+                    }
+                  )}
+                >
+                  <EuiIcon type="alert" color="danger" />
+                </EuiToolTip>
+              </EuiFlexItem>
+              <EuiFlexItem grow={1}>
+                <EuiText size="s">{snapshotName}</EuiText>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          );
+        }
+        return snapshotName;
+      },
     },
     {
       field: 'repository',
@@ -113,6 +147,24 @@ export const PolicyTable: React.FunctionComponent<Props> = ({
       truncateText: true,
       sortable: true,
     },
+    {
+      field: 'retention',
+      name: i18n.translate('xpack.snapshotRestore.policyList.table.retentionColumnTitle', {
+        defaultMessage: 'Retention',
+      }),
+      render: (retention: SlmPolicy['retention']) =>
+        retention ? (
+          <EuiIcon
+            type="check"
+            aria-label={i18n.translate(
+              'xpack.snapshotRestore.policyList.table.retentionColumnAriaLabel',
+              {
+                defaultMessage: 'Retention configured',
+              }
+            )}
+          />
+        ) : null,
+    },
     {
       field: 'nextExecutionMillis',
       name: i18n.translate('xpack.snapshotRestore.policyList.table.nextExecutionColumnTitle', {
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/snapshot_list/snapshot_details/tabs/tab_failures.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/snapshot_list/snapshot_details/tabs/tab_failures.tsx
index 1af3cfb4d133e5..ea2b8b9904d8f8 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/snapshot_list/snapshot_details/tabs/tab_failures.tsx
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/snapshot_list/snapshot_details/tabs/tab_failures.tsx
@@ -70,8 +70,8 @@ export const TabFailures: React.SFC<Props> = ({ indexFailures, snapshotState })
                 </p>
               </EuiText>
 
-              <EuiCodeBlock paddingSize="s" data-test-subj="reason">
-                {status}: {reason}
+              <EuiCodeBlock paddingSize="s" data-test-subj="reason" language="text">
+                {`${status}: ${reason}`}
               </EuiCodeBlock>
 
               {failuresCount < failures.length - 1 ? <EuiSpacer size="s" /> : undefined}
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/sections/policy_add/policy_add.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/sections/policy_add/policy_add.tsx
index 30a4c337fb9ba3..191d31cfba6293 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/sections/policy_add/policy_add.tsx
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/sections/policy_add/policy_add.tsx
@@ -8,12 +8,13 @@ import { RouteComponentProps } from 'react-router-dom';
 
 import { EuiPageBody, EuiPageContent, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { SlmPolicyPayload } from '../../../../common/types';
+import { TIME_UNITS } from '../../../../common/constants';
 
 import { PolicyForm, SectionError, SectionLoading, Error } from '../../components';
 import { useAppDependencies } from '../../index';
 import { BASE_PATH, DEFAULT_POLICY_SCHEDULE } from '../../constants';
 import { breadcrumbService, docTitleService } from '../../services/navigation';
-import { addPolicy, useLoadIndicies } from '../../services/http';
+import { addPolicy, useLoadIndices } from '../../services/http';
 
 export const PolicyAdd: React.FunctionComponent<RouteComponentProps> = ({
   history,
@@ -33,7 +34,7 @@ export const PolicyAdd: React.FunctionComponent<RouteComponentProps> = ({
     data: { indices } = {
       indices: [],
     },
-  } = useLoadIndicies();
+  } = useLoadIndices();
 
   // Set breadcrumb and page title
   useEffect(() => {
@@ -64,6 +65,12 @@ export const PolicyAdd: React.FunctionComponent<RouteComponentProps> = ({
     schedule: DEFAULT_POLICY_SCHEDULE,
     repository: '',
     config: {},
+    retention: {
+      expireAfterValue: '',
+      expireAfterUnit: TIME_UNITS.DAY,
+      maxCount: '',
+      minCount: '',
+    },
   };
 
   const renderSaveError = () => {
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/sections/policy_edit/policy_edit.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/sections/policy_edit/policy_edit.tsx
index 8ecee219b66b92..0bfb84cef93b47 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/sections/policy_edit/policy_edit.tsx
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/sections/policy_edit/policy_edit.tsx
@@ -3,17 +3,18 @@
  * 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, { useEffect, useState, Fragment } from 'react';
+import React, { useEffect, useState } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 
 import { EuiPageBody, EuiPageContent, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { SlmPolicyPayload } from '../../../../common/types';
+import { TIME_UNITS } from '../../../../common/constants';
 
 import { SectionError, SectionLoading, PolicyForm, Error } from '../../components';
 import { BASE_PATH } from '../../constants';
 import { useAppDependencies } from '../../index';
 import { breadcrumbService, docTitleService } from '../../services/navigation';
-import { editPolicy, useLoadPolicy, useLoadIndicies } from '../../services/http';
+import { editPolicy, useLoadPolicy, useLoadIndices } from '../../services/http';
 
 interface MatchParams {
   name: string;
@@ -44,6 +45,12 @@ export const PolicyEdit: React.FunctionComponent<RouteComponentProps<MatchParams
     schedule: '',
     repository: '',
     config: {},
+    retention: {
+      expireAfterValue: '',
+      expireAfterUnit: TIME_UNITS.DAY,
+      maxCount: '',
+      minCount: '',
+    },
   });
 
   const {
@@ -52,7 +59,7 @@ export const PolicyEdit: React.FunctionComponent<RouteComponentProps<MatchParams
     data: { indices } = {
       indices: [],
     },
-  } = useLoadIndicies();
+  } = useLoadIndices();
 
   // Load policy
   const { error: errorLoadingPolicy, isLoading: isLoadingPolicy, data: policyData } = useLoadPolicy(
@@ -175,19 +182,17 @@ export const PolicyEdit: React.FunctionComponent<RouteComponentProps<MatchParams
     }
 
     return (
-      <Fragment>
-        <PolicyForm
-          policy={policy}
-          indices={indices}
-          currentUrl={pathname}
-          isEditing={true}
-          isSaving={isSaving}
-          saveError={renderSaveError()}
-          clearSaveError={clearSaveError}
-          onSave={onSave}
-          onCancel={onCancel}
-        />
-      </Fragment>
+      <PolicyForm
+        policy={policy}
+        indices={indices}
+        currentUrl={pathname}
+        isEditing={true}
+        isSaving={isSaving}
+        saveError={renderSaveError()}
+        clearSaveError={clearSaveError}
+        onSave={onSave}
+        onCancel={onCancel}
+      />
     );
   };
 
@@ -195,7 +200,7 @@ export const PolicyEdit: React.FunctionComponent<RouteComponentProps<MatchParams
     <EuiPageBody>
       <EuiPageContent>
         <EuiTitle size="l">
-          <h1>
+          <h1 data-test-subj="pageTitle">
             <FormattedMessage
               id="xpack.snapshotRestore.editPolicyTitle"
               defaultMessage="Edit policy"
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/services/documentation/documentation_links.ts b/x-pack/legacy/plugins/snapshot_restore/public/app/services/documentation/documentation_links.ts
index 219292e7b08134..b6807c88d0657f 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/services/documentation/documentation_links.ts
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/services/documentation/documentation_links.ts
@@ -10,16 +10,10 @@ import { REPOSITORY_DOC_PATHS } from '../../constants';
 class DocumentationLinksService {
   private esDocBasePath: string = '';
   private esPluginDocBasePath: string = '';
-  private esStackOverviewDocBasePath: string = '';
 
-  public init(
-    esDocBasePath: string,
-    esPluginDocBasePath: string,
-    esStackOverviewDocBasePath: string
-  ): void {
+  public init(esDocBasePath: string, esPluginDocBasePath: string): void {
     this.esDocBasePath = esDocBasePath;
     this.esPluginDocBasePath = esPluginDocBasePath;
-    this.esStackOverviewDocBasePath = esStackOverviewDocBasePath;
   }
 
   public getRepositoryPluginDocUrl() {
@@ -48,31 +42,31 @@ class DocumentationLinksService {
   }
 
   public getSnapshotDocUrl() {
-    return `${this.esDocBasePath}/modules-snapshots.html#snapshots-take-snapshot`;
+    return `${this.esDocBasePath}modules-snapshots.html#snapshots-take-snapshot`;
   }
 
   public getRestoreDocUrl() {
-    return `${this.esDocBasePath}/modules-snapshots.html#restore-snapshot`;
+    return `${this.esDocBasePath}modules-snapshots.html#restore-snapshot`;
   }
 
   public getRestoreIndexSettingsUrl() {
-    return `${this.esDocBasePath}/modules-snapshots.html#_changing_index_settings_during_restore`;
+    return `${this.esDocBasePath}modules-snapshots.html#_changing_index_settings_during_restore`;
   }
 
   public getIndexSettingsUrl() {
-    return `${this.esDocBasePath}/index-modules.html`;
+    return `${this.esDocBasePath}index-modules.html`;
   }
 
   public getDateMathIndexNamesUrl() {
-    return `${this.esDocBasePath}/date-math-index-names.html`;
+    return `${this.esDocBasePath}date-math-index-names.html`;
   }
 
   public getSlmUrl() {
-    return `${this.esDocBasePath}/slm-api-put.html`;
+    return `${this.esDocBasePath}slm-api-put.html`;
   }
 
   public getCronUrl() {
-    return `${this.esStackOverviewDocBasePath}/trigger-schedule.html#schedule-cron`;
+    return `${this.esDocBasePath}trigger-schedule.html#schedule-cron`;
   }
 }
 
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/services/http/policy_requests.ts b/x-pack/legacy/plugins/snapshot_restore/public/app/services/http/policy_requests.ts
index f8266833ec3e60..1f6c08d59ee69b 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/services/http/policy_requests.ts
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/services/http/policy_requests.ts
@@ -11,6 +11,7 @@ import {
   UIM_POLICY_DELETE_MANY,
   UIM_POLICY_CREATE,
   UIM_POLICY_UPDATE,
+  UIM_POLICY_RETENTION_SETTINGS_UPDATE,
 } from '../../constants';
 import { uiMetricService } from '../ui_metric';
 import { httpService } from './http';
@@ -30,7 +31,7 @@ export const useLoadPolicy = (name: SlmPolicy['name']) => {
   });
 };
 
-export const useLoadIndicies = () => {
+export const useLoadIndices = () => {
   return useRequest({
     path: httpService.addBasePath(`${API_BASE_PATH}policies/indices`),
     method: 'get',
@@ -86,3 +87,24 @@ export const editPolicy = async (editedPolicy: SlmPolicyPayload) => {
   trackUiMetric(UIM_POLICY_UPDATE);
   return result;
 };
+
+export const useLoadRetentionSettings = () => {
+  return useRequest({
+    path: httpService.addBasePath(`${API_BASE_PATH}policies/retention_settings`),
+    method: 'get',
+  });
+};
+
+export const updateRetentionSchedule = (retentionSchedule: string) => {
+  const result = sendRequest({
+    path: httpService.addBasePath(`${API_BASE_PATH}policies/retention_settings`),
+    method: 'put',
+    body: {
+      retentionSchedule,
+    },
+  });
+
+  const { trackUiMetric } = uiMetricService;
+  trackUiMetric(UIM_POLICY_RETENTION_SETTINGS_UPDATE);
+  return result;
+};
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/services/text/text.ts b/x-pack/legacy/plugins/snapshot_restore/public/app/services/text/text.ts
index ec92250373a05e..e3b5b0115d687a 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/services/text/text.ts
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/services/text/text.ts
@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { REPOSITORY_TYPES } from '../../../../common/constants';
+import { REPOSITORY_TYPES, TIME_UNITS } from '../../../../common/constants';
 
 class TextService {
   public breadcrumbs: { [key: string]: string } = {};
@@ -112,6 +112,31 @@ class TextService {
       },
     });
   }
+
+  public getTimeUnitLabel(timeUnit: 'd' | 'h' | 'm' | 's', timeValue: string) {
+    switch (timeUnit) {
+      case TIME_UNITS.SECOND:
+        return this.i18n.translate('xpack.snapshotRestore.policyForm.timeUnits.secondLabel', {
+          defaultMessage: '{timeValue, plural, one {second} other {seconds}}',
+          values: { timeValue },
+        });
+      case TIME_UNITS.MINUTE:
+        return this.i18n.translate('xpack.snapshotRestore.policyForm.timeUnits.minuteLabel', {
+          defaultMessage: '{timeValue, plural, one {minute} other {minutes}}',
+          values: { timeValue },
+        });
+      case TIME_UNITS.HOUR:
+        return this.i18n.translate('xpack.snapshotRestore.policyForm.timeUnits.hourLabel', {
+          defaultMessage: '{timeValue, plural, one {hour} other {hours}}',
+          values: { timeValue },
+        });
+      case TIME_UNITS.DAY:
+        return this.i18n.translate('xpack.snapshotRestore.policyForm.timeUnits.dayLabel', {
+          defaultMessage: '{timeValue, plural, one {day} other {days}}',
+          values: { timeValue },
+        });
+    }
+  }
 }
 
 export const textService = new TextService();
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/services/validation/validate_policy.ts b/x-pack/legacy/plugins/snapshot_restore/public/app/services/validation/validate_policy.ts
index 53c62da97bdacd..8a60740b1610c7 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/services/validation/validate_policy.ts
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/services/validation/validate_policy.ts
@@ -18,7 +18,7 @@ const isStringEmpty = (str: string | null): boolean => {
 export const validatePolicy = (policy: SlmPolicyPayload): PolicyValidation => {
   const i18n = textService.i18n;
 
-  const { name, snapshotName, schedule, repository, config } = policy;
+  const { name, snapshotName, schedule, repository, config, retention } = policy;
 
   const validation: PolicyValidation = {
     isValid: true,
@@ -28,12 +28,13 @@ export const validatePolicy = (policy: SlmPolicyPayload): PolicyValidation => {
       schedule: [],
       repository: [],
       indices: [],
+      minCount: [],
     },
   };
 
   if (isStringEmpty(name)) {
     validation.errors.name.push(
-      i18n.translate('xpack.snapshotRestore.policyValidation.nameRequiredError', {
+      i18n.translate('xpack.snapshotRestore.policyValidation.nameRequiredErroMessage', {
         defaultMessage: 'Policy name is required.',
       })
     );
@@ -41,7 +42,7 @@ export const validatePolicy = (policy: SlmPolicyPayload): PolicyValidation => {
 
   if (isStringEmpty(snapshotName)) {
     validation.errors.snapshotName.push(
-      i18n.translate('xpack.snapshotRestore.policyValidation.snapshotNameRequiredError', {
+      i18n.translate('xpack.snapshotRestore.policyValidation.snapshotNameRequiredErrorMessage', {
         defaultMessage: 'Snapshot name is required.',
       })
     );
@@ -49,7 +50,7 @@ export const validatePolicy = (policy: SlmPolicyPayload): PolicyValidation => {
 
   if (isStringEmpty(schedule)) {
     validation.errors.schedule.push(
-      i18n.translate('xpack.snapshotRestore.policyValidation.scheduleRequiredError', {
+      i18n.translate('xpack.snapshotRestore.policyValidation.scheduleRequiredErrorMessage', {
         defaultMessage: 'Schedule is required.',
       })
     );
@@ -57,7 +58,7 @@ export const validatePolicy = (policy: SlmPolicyPayload): PolicyValidation => {
 
   if (isStringEmpty(repository)) {
     validation.errors.repository.push(
-      i18n.translate('xpack.snapshotRestore.policyValidation.repositoryRequiredError', {
+      i18n.translate('xpack.snapshotRestore.policyValidation.repositoryRequiredErrorMessage', {
         defaultMessage: 'Repository is required.',
       })
     );
@@ -65,7 +66,7 @@ export const validatePolicy = (policy: SlmPolicyPayload): PolicyValidation => {
 
   if (config && typeof config.indices === 'string' && config.indices.trim().length === 0) {
     validation.errors.indices.push(
-      i18n.translate('xpack.snapshotRestore.policyValidation.indexPatternRequiredError', {
+      i18n.translate('xpack.snapshotRestore.policyValidation.indexPatternRequiredErrorMessage', {
         defaultMessage: 'At least one index pattern is required.',
       })
     );
@@ -73,12 +74,24 @@ export const validatePolicy = (policy: SlmPolicyPayload): PolicyValidation => {
 
   if (config && Array.isArray(config.indices) && config.indices.length === 0) {
     validation.errors.indices.push(
-      i18n.translate('xpack.snapshotRestore.policyValidation.indicesRequiredError', {
+      i18n.translate('xpack.snapshotRestore.policyValidation.indicesRequiredErrorMessage', {
         defaultMessage: 'You must select at least one index.',
       })
     );
   }
 
+  if (
+    retention &&
+    retention.minCount &&
+    retention.maxCount &&
+    retention.minCount > retention.maxCount
+  ) {
+    validation.errors.minCount.push(
+      i18n.translate('xpack.snapshotRestore.policyValidation.invalidMinCountErrorMessage', {
+        defaultMessage: 'Min count cannot be greater than max count.',
+      })
+    );
+  }
   // Remove fields with no errors
   validation.errors = Object.entries(validation.errors)
     .filter(([key, value]) => value.length > 0)
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/plugin.ts b/x-pack/legacy/plugins/snapshot_restore/public/plugin.ts
index 10c7a86d640e6c..77db8dd993c2e7 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/plugin.ts
+++ b/x-pack/legacy/plugins/snapshot_restore/public/plugin.ts
@@ -39,11 +39,7 @@ export class Plugin {
     textService.init(i18n);
     breadcrumbService.init(chrome, management.constants.BREADCRUMB);
     uiMetricService.init(uiMetric.createUiStatsReporter);
-    documentationLinksService.init(
-      documentation.esDocBasePath,
-      documentation.esPluginDocBasePath,
-      documentation.esStackOverviewDocBasePath
-    );
+    documentationLinksService.init(documentation.esDocBasePath, documentation.esPluginDocBasePath);
     docTitleService.init(docTitle.change);
 
     const unmountReactApp = (): void => {
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/shim.ts b/x-pack/legacy/plugins/snapshot_restore/public/shim.ts
index 02574890afffd0..595edbfd1cea4c 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/shim.ts
+++ b/x-pack/legacy/plugins/snapshot_restore/public/shim.ts
@@ -53,7 +53,6 @@ export interface Core extends AppCore {
   documentation: {
     esDocBasePath: string;
     esPluginDocBasePath: string;
-    esStackOverviewDocBasePath: string;
   };
   docTitle: {
     change: typeof docTitle.change;
@@ -113,7 +112,6 @@ export function createShim(): { core: Core; plugins: Plugins } {
       documentation: {
         esDocBasePath: `${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/reference/${DOC_LINK_VERSION}/`,
         esPluginDocBasePath: `${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/plugins/${DOC_LINK_VERSION}/`,
-        esStackOverviewDocBasePath: `${ELASTIC_WEBSITE_URL}guide/en/elastic-stack-overview/${DOC_LINK_VERSION}/`,
       },
       docTitle: {
         change: docTitle.change,
diff --git a/x-pack/legacy/plugins/snapshot_restore/server/routes/api/policy.test.ts b/x-pack/legacy/plugins/snapshot_restore/server/routes/api/policy.test.ts
index 52e6449559bcc1..c0016a4f643cd2 100644
--- a/x-pack/legacy/plugins/snapshot_restore/server/routes/api/policy.test.ts
+++ b/x-pack/legacy/plugins/snapshot_restore/server/routes/api/policy.test.ts
@@ -12,9 +12,10 @@ import {
   createHandler,
   updateHandler,
   getIndicesHandler,
+  updateRetentionSettingsHandler,
 } from './policy';
 
-describe('[Snapshot and Restore API Routes] Restore', () => {
+describe('[Snapshot and Restore API Routes] Policy', () => {
   const mockRequest = {} as Request;
   const mockResponseToolkit = {} as ResponseToolkit;
   const mockEsPolicy = {
@@ -25,6 +26,11 @@ describe('[Snapshot and Restore API Routes] Restore', () => {
       schedule: '0 30 1 * * ?',
       repository: 'my-backups',
       config: {},
+      retention: {
+        expire_after: '15d',
+        min_count: 5,
+        max_count: 10,
+      },
     },
     next_execution_millis: 1562722200000,
   };
@@ -35,6 +41,12 @@ describe('[Snapshot and Restore API Routes] Restore', () => {
     schedule: '0 30 1 * * ?',
     repository: 'my-backups',
     config: {},
+    retention: {
+      expireAfterValue: 15,
+      expireAfterUnit: 'd',
+      minCount: 5,
+      maxCount: 10,
+    },
     nextExecutionMillis: 1562722200000,
   };
 
@@ -323,4 +335,29 @@ describe('[Snapshot and Restore API Routes] Restore', () => {
       ).rejects.toThrow();
     });
   });
+
+  describe('updateRetentionSettingsHandler()', () => {
+    const retentionSettings = {
+      retentionSchedule: '0 30 1 * * ?',
+    };
+    const mockCreateRequest = ({
+      payload: retentionSettings,
+    } as unknown) as Request;
+
+    it('should return successful ES response', async () => {
+      const mockEsResponse = { acknowledged: true };
+      const callWithRequest = jest.fn().mockReturnValueOnce(mockEsResponse);
+      const expectedResponse = { ...mockEsResponse };
+      await expect(
+        updateRetentionSettingsHandler(mockCreateRequest, callWithRequest, mockResponseToolkit)
+      ).resolves.toEqual(expectedResponse);
+    });
+
+    it('should throw if ES error', async () => {
+      const callWithRequest = jest.fn().mockRejectedValueOnce(new Error());
+      await expect(
+        updateRetentionSettingsHandler(mockCreateRequest, callWithRequest, mockResponseToolkit)
+      ).rejects.toThrow();
+    });
+  });
 });
diff --git a/x-pack/legacy/plugins/snapshot_restore/server/routes/api/policy.ts b/x-pack/legacy/plugins/snapshot_restore/server/routes/api/policy.ts
index ed16a44bccdc6b..ef9e48190a5b7c 100644
--- a/x-pack/legacy/plugins/snapshot_restore/server/routes/api/policy.ts
+++ b/x-pack/legacy/plugins/snapshot_restore/server/routes/api/policy.ts
@@ -10,8 +10,12 @@ import {
 } from '../../../../../server/lib/create_router/error_wrappers';
 import { SlmPolicyEs, SlmPolicy, SlmPolicyPayload } from '../../../common/types';
 import { deserializePolicy, serializePolicy } from '../../../common/lib';
+import { Plugins } from '../../../shim';
 
-export function registerPolicyRoutes(router: Router) {
+let callWithInternalUser: any;
+
+export function registerPolicyRoutes(router: Router, plugins: Plugins) {
+  callWithInternalUser = plugins.elasticsearch.getCluster('data').callWithInternalUser;
   router.get('policies', getAllHandler);
   router.get('policy/{name}', getOneHandler);
   router.post('policy/{name}/run', executeHandler);
@@ -19,10 +23,12 @@ export function registerPolicyRoutes(router: Router) {
   router.put('policies', createHandler);
   router.put('policies/{name}', updateHandler);
   router.get('policies/indices', getIndicesHandler);
+  router.get('policies/retention_settings', getRetentionSettingsHandler);
+  router.put('policies/retention_settings', updateRetentionSettingsHandler);
 }
 
 export const getAllHandler: RouterRouteHandler = async (
-  req,
+  _req,
   callWithRequest
 ): Promise<{
   policies: SlmPolicy[];
@@ -144,7 +150,7 @@ export const updateHandler: RouterRouteHandler = async (req, callWithRequest) =>
 };
 
 export const getIndicesHandler: RouterRouteHandler = async (
-  req,
+  _req,
   callWithRequest
 ): Promise<{
   indices: string[];
@@ -161,3 +167,38 @@ export const getIndicesHandler: RouterRouteHandler = async (
     indices: indices.map(({ index }) => index).sort(),
   };
 };
+
+export const getRetentionSettingsHandler: RouterRouteHandler = async (): Promise<
+  | {
+      [key: string]: string;
+    }
+  | undefined
+> => {
+  const { persistent, transient, defaults } = await callWithInternalUser('cluster.getSettings', {
+    filterPath: '**.slm.retention*',
+    includeDefaults: true,
+  });
+  const { slm: retentionSettings = undefined } = {
+    ...defaults,
+    ...persistent,
+    ...transient,
+  };
+
+  const { retention_schedule: retentionSchedule } = retentionSettings;
+
+  return { retentionSchedule };
+};
+
+export const updateRetentionSettingsHandler: RouterRouteHandler = async (req, callWithRequest) => {
+  const { retentionSchedule } = req.payload as { retentionSchedule: string };
+
+  return await callWithRequest('cluster.putSettings', {
+    body: {
+      persistent: {
+        slm: {
+          retention_schedule: retentionSchedule,
+        },
+      },
+    },
+  });
+};
diff --git a/x-pack/legacy/plugins/snapshot_restore/server/routes/api/register_routes.ts b/x-pack/legacy/plugins/snapshot_restore/server/routes/api/register_routes.ts
index 5a76f1c2681382..11a6cad86640e4 100644
--- a/x-pack/legacy/plugins/snapshot_restore/server/routes/api/register_routes.ts
+++ b/x-pack/legacy/plugins/snapshot_restore/server/routes/api/register_routes.ts
@@ -20,6 +20,6 @@ export const registerRoutes = (router: Router, plugins: Plugins): void => {
   registerRestoreRoutes(router);
 
   if (isSlmEnabled) {
-    registerPolicyRoutes(router);
+    registerPolicyRoutes(router, plugins);
   }
 };
diff --git a/x-pack/legacy/plugins/snapshot_restore/test/fixtures/index.ts b/x-pack/legacy/plugins/snapshot_restore/test/fixtures/index.ts
index 1e744a96d81cfc..f3f2f0faa744df 100644
--- a/x-pack/legacy/plugins/snapshot_restore/test/fixtures/index.ts
+++ b/x-pack/legacy/plugins/snapshot_restore/test/fixtures/index.ts
@@ -6,3 +6,4 @@
 
 export * from './repository';
 export * from './snapshot';
+export * from './policy';
diff --git a/x-pack/legacy/plugins/snapshot_restore/test/fixtures/policy.ts b/x-pack/legacy/plugins/snapshot_restore/test/fixtures/policy.ts
new file mode 100644
index 00000000000000..3dc5f78c42457e
--- /dev/null
+++ b/x-pack/legacy/plugins/snapshot_restore/test/fixtures/policy.ts
@@ -0,0 +1,48 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { getRandomString, getRandomNumber } from '../../../../../test_utils';
+import { SlmPolicy } from '../../common/types';
+import { DEFAULT_POLICY_SCHEDULE } from '../../public/app/constants';
+
+const dateNow = new Date();
+const randomModifiedDateMillis = new Date().setDate(dateNow.getDate() - 1);
+const randomExecutionDateMillis = new Date().setDate(dateNow.getDate() + 1);
+
+const DEFAULT_STATS: SlmPolicy['stats'] = {
+  snapshotsTaken: 0,
+  snapshotsFailed: 0,
+  snapshotsDeleted: 0,
+  snapshotDeletionFailures: 0,
+};
+
+export const getPolicy = ({
+  name = `policy-${getRandomString()}`,
+  config = {},
+  modifiedDate = new Date(randomModifiedDateMillis).toString(),
+  modifiedDateMillis = randomModifiedDateMillis,
+  nextExecution = new Date(randomExecutionDateMillis).toString(),
+  nextExecutionMillis = randomExecutionDateMillis,
+  repository = `repo-${getRandomString()}`,
+  retention = {},
+  schedule = DEFAULT_POLICY_SCHEDULE,
+  snapshotName = `snapshot-${getRandomString()}`,
+  stats = DEFAULT_STATS,
+  version = getRandomNumber(),
+}: Partial<SlmPolicy> = {}): SlmPolicy => ({
+  name,
+  config,
+  modifiedDate,
+  modifiedDateMillis,
+  nextExecution,
+  nextExecutionMillis,
+  repository,
+  retention,
+  schedule,
+  snapshotName,
+  stats,
+  version,
+});
diff --git a/x-pack/legacy/plugins/spaces/common/constants.ts b/x-pack/legacy/plugins/spaces/common/constants.ts
index 50423517bc9184..11882ca2f1b3a8 100644
--- a/x-pack/legacy/plugins/spaces/common/constants.ts
+++ b/x-pack/legacy/plugins/spaces/common/constants.ts
@@ -21,3 +21,8 @@ export const MAX_SPACE_INITIALS = 2;
  * @type {string}
  */
 export const KIBANA_SPACES_STATS_TYPE = 'spaces';
+
+/**
+ * The path to enter a space.
+ */
+export const ENTER_SPACE_PATH = '/spaces/enter';
diff --git a/x-pack/legacy/plugins/spaces/common/index.ts b/x-pack/legacy/plugins/spaces/common/index.ts
index 0e605562ea3ea4..a0842201e0f083 100644
--- a/x-pack/legacy/plugins/spaces/common/index.ts
+++ b/x-pack/legacy/plugins/spaces/common/index.ts
@@ -7,4 +7,4 @@
 export { isReservedSpace } from './is_reserved_space';
 export { MAX_SPACE_INITIALS } from './constants';
 
-export { getSpaceInitials, getSpaceColor } from './space_attributes';
+export { getSpaceIdFromPath, addSpaceIdToPath } from './lib/spaces_url_parser';
diff --git a/x-pack/legacy/plugins/spaces/server/lib/__snapshots__/spaces_url_parser.test.ts.snap b/x-pack/legacy/plugins/spaces/common/lib/__snapshots__/spaces_url_parser.test.ts.snap
similarity index 100%
rename from x-pack/legacy/plugins/spaces/server/lib/__snapshots__/spaces_url_parser.test.ts.snap
rename to x-pack/legacy/plugins/spaces/common/lib/__snapshots__/spaces_url_parser.test.ts.snap
diff --git a/x-pack/legacy/plugins/spaces/server/lib/spaces_url_parser.test.ts b/x-pack/legacy/plugins/spaces/common/lib/spaces_url_parser.test.ts
similarity index 97%
rename from x-pack/legacy/plugins/spaces/server/lib/spaces_url_parser.test.ts
rename to x-pack/legacy/plugins/spaces/common/lib/spaces_url_parser.test.ts
index 5878272c849246..b25d79c0a69076 100644
--- a/x-pack/legacy/plugins/spaces/server/lib/spaces_url_parser.test.ts
+++ b/x-pack/legacy/plugins/spaces/common/lib/spaces_url_parser.test.ts
@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { DEFAULT_SPACE_ID } from '../../common/constants';
+import { DEFAULT_SPACE_ID } from '../constants';
 import { addSpaceIdToPath, getSpaceIdFromPath } from './spaces_url_parser';
 
 describe('getSpaceIdFromPath', () => {
diff --git a/x-pack/legacy/plugins/spaces/server/lib/spaces_url_parser.ts b/x-pack/legacy/plugins/spaces/common/lib/spaces_url_parser.ts
similarity index 95%
rename from x-pack/legacy/plugins/spaces/server/lib/spaces_url_parser.ts
rename to x-pack/legacy/plugins/spaces/common/lib/spaces_url_parser.ts
index 14113cbf9d8070..994ec7c59cb6e0 100644
--- a/x-pack/legacy/plugins/spaces/server/lib/spaces_url_parser.ts
+++ b/x-pack/legacy/plugins/spaces/common/lib/spaces_url_parser.ts
@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { DEFAULT_SPACE_ID } from '../../common/constants';
+import { DEFAULT_SPACE_ID } from '../constants';
 
 export function getSpaceIdFromPath(
   requestBasePath: string = '/',
diff --git a/x-pack/legacy/plugins/spaces/index.ts b/x-pack/legacy/plugins/spaces/index.ts
index 6f9397233d1d0c..a287aa2fcbb3f7 100644
--- a/x-pack/legacy/plugins/spaces/index.ts
+++ b/x-pack/legacy/plugins/spaces/index.ts
@@ -14,12 +14,11 @@ import { AuditLogger } from '../../server/lib/audit_logger';
 import mappings from './mappings.json';
 import { wrapError } from './server/lib/errors';
 import { getActiveSpace } from './server/lib/get_active_space';
-import { getSpaceSelectorUrl } from './server/lib/get_space_selector_url';
 import { migrateToKibana660 } from './server/lib/migrations';
 import { plugin } from './server/new_platform';
 import { SecurityPlugin } from '../security';
 import { SpacesServiceSetup } from './server/new_platform/spaces_service/spaces_service';
-import { initSpaceSelectorView } from './server/routes/views';
+import { initSpaceSelectorView, initEnterSpaceView } from './server/routes/views';
 
 export interface SpacesPlugin {
   getSpaceId: SpacesServiceSetup['getSpaceId'];
@@ -88,7 +87,7 @@ export const spaces = (kibana: Record<string, any>) =>
         return {
           spaces: [],
           activeSpace: null,
-          spaceSelectorURL: getSpaceSelectorUrl(server.config()),
+          serverBasePath: server.config().get('server.basePath'),
         };
       },
       async replaceInjectedVars(
@@ -181,6 +180,7 @@ export const spaces = (kibana: Record<string, any>) =>
         },
       });
 
+      initEnterSpaceView(server);
       initSpaceSelectorView(server);
 
       server.expose('getSpaceId', (request: any) => spacesService.getSpaceId(request));
diff --git a/x-pack/legacy/plugins/spaces/public/components/space_avatar.tsx b/x-pack/legacy/plugins/spaces/public/components/space_avatar.tsx
index ee3755b8df5fa7..0211fe7e82643d 100644
--- a/x-pack/legacy/plugins/spaces/public/components/space_avatar.tsx
+++ b/x-pack/legacy/plugins/spaces/public/components/space_avatar.tsx
@@ -6,9 +6,9 @@
 
 import { EuiAvatar, isValidHex } from '@elastic/eui';
 import React, { SFC } from 'react';
-import { getSpaceColor, getSpaceInitials, MAX_SPACE_INITIALS } from '../../common';
+import { MAX_SPACE_INITIALS } from '../../common';
 import { Space } from '../../common/model/space';
-import { getSpaceImageUrl } from '../../common/space_attributes';
+import { getSpaceColor, getSpaceInitials, getSpaceImageUrl } from '../lib/space_attributes';
 
 interface Props {
   space: Partial<Space>;
diff --git a/x-pack/legacy/plugins/spaces/public/lib/index.ts b/x-pack/legacy/plugins/spaces/public/lib/index.ts
index 538dd77e053f57..56ac7b8ff37f4f 100644
--- a/x-pack/legacy/plugins/spaces/public/lib/index.ts
+++ b/x-pack/legacy/plugins/spaces/public/lib/index.ts
@@ -5,3 +5,4 @@
  */
 
 export { SpacesManager } from './spaces_manager';
+export { getSpaceInitials, getSpaceColor, getSpaceImageUrl } from './space_attributes';
diff --git a/x-pack/legacy/plugins/spaces/common/space_attributes.test.ts b/x-pack/legacy/plugins/spaces/public/lib/space_attributes.test.ts
similarity index 100%
rename from x-pack/legacy/plugins/spaces/common/space_attributes.test.ts
rename to x-pack/legacy/plugins/spaces/public/lib/space_attributes.test.ts
diff --git a/x-pack/legacy/plugins/spaces/common/space_attributes.ts b/x-pack/legacy/plugins/spaces/public/lib/space_attributes.ts
similarity index 94%
rename from x-pack/legacy/plugins/spaces/common/space_attributes.ts
rename to x-pack/legacy/plugins/spaces/public/lib/space_attributes.ts
index f943dcf4af105b..dbb1e8fed2d0b6 100644
--- a/x-pack/legacy/plugins/spaces/common/space_attributes.ts
+++ b/x-pack/legacy/plugins/spaces/public/lib/space_attributes.ts
@@ -5,8 +5,8 @@
  */
 
 import { VISUALIZATION_COLORS } from '@elastic/eui';
-import { MAX_SPACE_INITIALS } from './constants';
-import { Space } from './model/space';
+import { Space } from '../../common/model/space';
+import { MAX_SPACE_INITIALS } from '../../common';
 
 // code point for lowercase "a"
 const FALLBACK_CODE_POINT = 97;
diff --git a/x-pack/legacy/plugins/spaces/public/lib/spaces_manager.ts b/x-pack/legacy/plugins/spaces/public/lib/spaces_manager.ts
index d39b751e30a8aa..e40e247e405fb9 100644
--- a/x-pack/legacy/plugins/spaces/public/lib/spaces_manager.ts
+++ b/x-pack/legacy/plugins/spaces/public/lib/spaces_manager.ts
@@ -3,21 +3,18 @@
  * 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 { toastNotifications } from 'ui/notify';
 import { EventEmitter } from 'events';
 import { kfetch } from 'ui/kfetch';
 import { SavedObjectsManagementRecord } from 'ui/management/saved_objects_management';
 import { Space } from '../../common/model/space';
 import { GetSpacePurpose } from '../../common/model/types';
 import { CopySavedObjectsToSpaceResponse } from './copy_saved_objects_to_space/types';
+import { ENTER_SPACE_PATH } from '../../common/constants';
+import { addSpaceIdToPath } from '../../common';
 
 export class SpacesManager extends EventEmitter {
-  private spaceSelectorURL: string;
-
-  constructor(spaceSelectorURL: string) {
+  constructor(private readonly serverBasePath: string) {
     super();
-    this.spaceSelectorURL = spaceSelectorURL;
   }
 
   public async getSpaces(purpose?: GetSpacePurpose): Promise<Space[]> {
@@ -89,36 +86,14 @@ export class SpacesManager extends EventEmitter {
   }
 
   public async changeSelectedSpace(space: Space) {
-    await kfetch({
-      pathname: `/api/spaces/v1/space/${encodeURIComponent(space.id)}/select`,
-      method: 'POST',
-    })
-      .then(response => {
-        if (response.location) {
-          window.location = response.location;
-        } else {
-          this._displayError();
-        }
-      })
-      .catch(() => this._displayError());
+    window.location.href = addSpaceIdToPath(this.serverBasePath, space.id, ENTER_SPACE_PATH);
   }
 
   public redirectToSpaceSelector() {
-    window.location.href = this.spaceSelectorURL;
+    window.location.href = `${this.serverBasePath}/spaces/space_selector`;
   }
 
   public async requestRefresh() {
     this.emit('request_refresh');
   }
-
-  public _displayError() {
-    toastNotifications.addDanger({
-      title: i18n.translate('xpack.spaces.spacesManager.unableToChangeSpaceWarningTitle', {
-        defaultMessage: 'Unable to change your Space',
-      }),
-      text: i18n.translate('xpack.spaces.spacesManager.unableToChangeSpaceWarningDescription', {
-        defaultMessage: 'please try again later',
-      }),
-    });
-  }
 }
diff --git a/x-pack/legacy/plugins/spaces/public/views/management/edit_space/customize_space/customize_space_avatar.tsx b/x-pack/legacy/plugins/spaces/public/views/management/edit_space/customize_space/customize_space_avatar.tsx
index 2f179083d7b90a..12fa0193b59a4e 100644
--- a/x-pack/legacy/plugins/spaces/public/views/management/edit_space/customize_space/customize_space_avatar.tsx
+++ b/x-pack/legacy/plugins/spaces/public/views/management/edit_space/customize_space/customize_space_avatar.tsx
@@ -18,11 +18,11 @@ import {
 } from '@elastic/eui';
 import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
 
+import { getSpaceColor, getSpaceInitials } from '../../../../lib/space_attributes';
 import { encode, imageTypes } from '../../../../../common/lib/dataurl';
 
 import { MAX_SPACE_INITIALS } from '../../../../../common/constants';
 import { Space } from '../../../../../common/model/space';
-import { getSpaceColor, getSpaceInitials } from '../../../../../common/space_attributes';
 
 interface Props {
   space: Partial<Space>;
diff --git a/x-pack/legacy/plugins/spaces/public/views/management/index.tsx b/x-pack/legacy/plugins/spaces/public/views/management/index.tsx
index 46a718bbc6f35d..179665ed11111c 100644
--- a/x-pack/legacy/plugins/spaces/public/views/management/index.tsx
+++ b/x-pack/legacy/plugins/spaces/public/views/management/index.tsx
@@ -24,7 +24,7 @@ const MANAGE_SPACES_KEY = 'spaces';
 
 routes.defaults(/\/management/, {
   resolve: {
-    spacesManagementSection(activeSpace: any, spaceSelectorURL: string) {
+    spacesManagementSection(activeSpace: any, serverBasePath: string) {
       function getKibanaSection() {
         return management.getSection('kibana');
       }
@@ -49,7 +49,7 @@ routes.defaults(/\/management/, {
 
         // Customize Saved Objects Management
         const action = new CopyToSpaceSavedObjectsManagementAction(
-          new SpacesManager(spaceSelectorURL),
+          new SpacesManager(serverBasePath),
           activeSpace.space
         );
         // This route resolve function executes any time the management screen is loaded, and we want to ensure
diff --git a/x-pack/legacy/plugins/spaces/public/views/management/page_routes.tsx b/x-pack/legacy/plugins/spaces/public/views/management/page_routes.tsx
index d38c5c1998b3a4..66cdb0d276e94b 100644
--- a/x-pack/legacy/plugins/spaces/public/views/management/page_routes.tsx
+++ b/x-pack/legacy/plugins/spaces/public/views/management/page_routes.tsx
@@ -22,11 +22,11 @@ routes.when('/management/spaces/list', {
   template,
   k7Breadcrumbs: getListBreadcrumbs,
   requireUICapability: 'management.kibana.spaces',
-  controller($scope: any, spacesNavState: SpacesNavState, spaceSelectorURL: string) {
+  controller($scope: any, spacesNavState: SpacesNavState, serverBasePath: string) {
     $scope.$$postDigest(async () => {
       const domNode = document.getElementById(reactRootNodeId);
 
-      const spacesManager = new SpacesManager(spaceSelectorURL);
+      const spacesManager = new SpacesManager(serverBasePath);
 
       render(
         <I18nContext>
@@ -49,11 +49,11 @@ routes.when('/management/spaces/create', {
   template,
   k7Breadcrumbs: getCreateBreadcrumbs,
   requireUICapability: 'management.kibana.spaces',
-  controller($scope: any, spacesNavState: SpacesNavState, spaceSelectorURL: string) {
+  controller($scope: any, spacesNavState: SpacesNavState, serverBasePath: string) {
     $scope.$$postDigest(async () => {
       const domNode = document.getElementById(reactRootNodeId);
 
-      const spacesManager = new SpacesManager(spaceSelectorURL);
+      const spacesManager = new SpacesManager(serverBasePath);
 
       render(
         <I18nContext>
@@ -85,14 +85,14 @@ routes.when('/management/spaces/edit/:spaceId', {
     $route: any,
     chrome: any,
     spacesNavState: SpacesNavState,
-    spaceSelectorURL: string
+    serverBasePath: string
   ) {
     $scope.$$postDigest(async () => {
       const domNode = document.getElementById(reactRootNodeId);
 
       const { spaceId } = $route.current.params;
 
-      const spacesManager = new SpacesManager(spaceSelectorURL);
+      const spacesManager = new SpacesManager(serverBasePath);
 
       render(
         <I18nContext>
diff --git a/x-pack/legacy/plugins/spaces/public/views/nav_control/nav_control.tsx b/x-pack/legacy/plugins/spaces/public/views/nav_control/nav_control.tsx
index ad2ae08374708a..bac95bbf22099e 100644
--- a/x-pack/legacy/plugins/spaces/public/views/nav_control/nav_control.tsx
+++ b/x-pack/legacy/plugins/spaces/public/views/nav_control/nav_control.tsx
@@ -54,9 +54,9 @@ chromeHeaderNavControlsRegistry.register((chrome: any, activeSpace: any) => ({
       return;
     }
 
-    const spaceSelectorURL = chrome.getInjected('spaceSelectorURL');
+    const serverBasePath = chrome.getInjected('serverBasePath');
 
-    spacesManager = new SpacesManager(spaceSelectorURL);
+    spacesManager = new SpacesManager(serverBasePath);
 
     ReactDOM.render(
       <I18nContext>
diff --git a/x-pack/legacy/plugins/spaces/public/views/space_selector/index.tsx b/x-pack/legacy/plugins/spaces/public/views/space_selector/index.tsx
index 935e79e73517e3..8c650fa778bdd4 100644
--- a/x-pack/legacy/plugins/spaces/public/views/space_selector/index.tsx
+++ b/x-pack/legacy/plugins/spaces/public/views/space_selector/index.tsx
@@ -21,10 +21,10 @@ import { SpaceSelector } from './space_selector';
 const module = uiModules.get('spaces_selector', []);
 module.controller(
   'spacesSelectorController',
-  ($scope: any, spaces: Space[], spaceSelectorURL: string) => {
+  ($scope: any, spaces: Space[], serverBasePath: string) => {
     const domNode = document.getElementById('spaceSelectorRoot');
 
-    const spacesManager = new SpacesManager(spaceSelectorURL);
+    const spacesManager = new SpacesManager(serverBasePath);
 
     render(
       <I18nContext>
diff --git a/x-pack/legacy/plugins/spaces/server/lib/copy_to_spaces/copy_to_spaces.test.ts b/x-pack/legacy/plugins/spaces/server/lib/copy_to_spaces/copy_to_spaces.test.ts
index 3128165d78c7e1..10e427a29e4429 100644
--- a/x-pack/legacy/plugins/spaces/server/lib/copy_to_spaces/copy_to_spaces.test.ts
+++ b/x-pack/legacy/plugins/spaces/server/lib/copy_to_spaces/copy_to_spaces.test.ts
@@ -5,7 +5,7 @@
  */
 import {
   SavedObjectsSchema,
-  SavedObjectsService,
+  SavedObjectsLegacyService,
   SavedObjectsClientContract,
   SavedObjectsImportResponse,
   SavedObjectsImportOptions,
@@ -42,7 +42,7 @@ describe('copySavedObjectsToSpaces', () => {
   const setup = (setupOpts: SetupOpts) => {
     const savedObjectsClient = (null as unknown) as SavedObjectsClientContract;
 
-    const savedObjectsService: SavedObjectsService = ({
+    const savedObjectsService: SavedObjectsLegacyService = ({
       importExport: {
         objectLimit: 1000,
         getSortedObjectsForExport:
@@ -73,7 +73,7 @@ describe('copySavedObjectsToSpaces', () => {
       schema: new SavedObjectsSchema({
         globalType: { isNamespaceAgnostic: true },
       }),
-    } as unknown) as SavedObjectsService;
+    } as unknown) as SavedObjectsLegacyService;
 
     return {
       savedObjectsClient,
diff --git a/x-pack/legacy/plugins/spaces/server/lib/copy_to_spaces/copy_to_spaces.ts b/x-pack/legacy/plugins/spaces/server/lib/copy_to_spaces/copy_to_spaces.ts
index 40acf8fc32cba1..608d57d8736870 100644
--- a/x-pack/legacy/plugins/spaces/server/lib/copy_to_spaces/copy_to_spaces.ts
+++ b/x-pack/legacy/plugins/spaces/server/lib/copy_to_spaces/copy_to_spaces.ts
@@ -4,7 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { SavedObjectsClientContract, SavedObjectsService, SavedObject } from 'src/core/server';
+import {
+  SavedObjectsClientContract,
+  SavedObjectsLegacyService,
+  SavedObject,
+} from 'src/core/server';
 import { Readable } from 'stream';
 import { SavedObjectsClientProviderOptions } from 'src/core/server';
 import { spaceIdToNamespace } from '../utils/namespace';
@@ -20,7 +24,7 @@ export const COPY_TO_SPACES_SAVED_OBJECTS_CLIENT_OPTS: SavedObjectsClientProvide
 
 export function copySavedObjectsToSpacesFactory(
   savedObjectsClient: SavedObjectsClientContract,
-  savedObjectsService: SavedObjectsService
+  savedObjectsService: SavedObjectsLegacyService
 ) {
   const { importExport, types, schema } = savedObjectsService;
   const eligibleTypes = getEligibleTypes({ types, schema });
diff --git a/x-pack/legacy/plugins/spaces/server/lib/copy_to_spaces/lib/get_eligible_types.ts b/x-pack/legacy/plugins/spaces/server/lib/copy_to_spaces/lib/get_eligible_types.ts
index 203f41860ba3ea..76bb374f9eb6d4 100644
--- a/x-pack/legacy/plugins/spaces/server/lib/copy_to_spaces/lib/get_eligible_types.ts
+++ b/x-pack/legacy/plugins/spaces/server/lib/copy_to_spaces/lib/get_eligible_types.ts
@@ -4,8 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { SavedObjectsService } from 'src/core/server';
+import { SavedObjectsLegacyService } from 'src/core/server';
 
-export function getEligibleTypes({ types, schema }: Pick<SavedObjectsService, 'schema' | 'types'>) {
+export function getEligibleTypes({
+  types,
+  schema,
+}: Pick<SavedObjectsLegacyService, 'schema' | 'types'>) {
   return types.filter(type => !schema.isNamespaceAgnostic(type));
 }
diff --git a/x-pack/legacy/plugins/spaces/server/lib/copy_to_spaces/resolve_copy_conflicts.test.ts b/x-pack/legacy/plugins/spaces/server/lib/copy_to_spaces/resolve_copy_conflicts.test.ts
index 8fa0d03283f9c9..fbafb18699081e 100644
--- a/x-pack/legacy/plugins/spaces/server/lib/copy_to_spaces/resolve_copy_conflicts.test.ts
+++ b/x-pack/legacy/plugins/spaces/server/lib/copy_to_spaces/resolve_copy_conflicts.test.ts
@@ -5,7 +5,7 @@
  */
 import {
   SavedObjectsSchema,
-  SavedObjectsService,
+  SavedObjectsLegacyService,
   SavedObjectsClientContract,
   SavedObjectsImportResponse,
   SavedObjectsResolveImportErrorsOptions,
@@ -42,7 +42,7 @@ const expectStreamToContainObjects = async (
 
 describe('resolveCopySavedObjectsToSpacesConflicts', () => {
   const setup = (setupOpts: SetupOpts) => {
-    const savedObjectsService: SavedObjectsService = ({
+    const savedObjectsService: SavedObjectsLegacyService = ({
       importExport: {
         objectLimit: 1000,
         getSortedObjectsForExport:
@@ -76,7 +76,7 @@ describe('resolveCopySavedObjectsToSpacesConflicts', () => {
       schema: new SavedObjectsSchema({
         globalType: { isNamespaceAgnostic: true },
       }),
-    } as unknown) as SavedObjectsService;
+    } as unknown) as SavedObjectsLegacyService;
 
     const savedObjectsClient = (null as unknown) as SavedObjectsClientContract;
 
diff --git a/x-pack/legacy/plugins/spaces/server/lib/copy_to_spaces/resolve_copy_conflicts.ts b/x-pack/legacy/plugins/spaces/server/lib/copy_to_spaces/resolve_copy_conflicts.ts
index 38c7b068d57298..d7c602c28b253c 100644
--- a/x-pack/legacy/plugins/spaces/server/lib/copy_to_spaces/resolve_copy_conflicts.ts
+++ b/x-pack/legacy/plugins/spaces/server/lib/copy_to_spaces/resolve_copy_conflicts.ts
@@ -4,7 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { SavedObjectsClientContract, SavedObjectsService, SavedObject } from 'src/core/server';
+import {
+  SavedObjectsClientContract,
+  SavedObjectsLegacyService,
+  SavedObject,
+} from 'src/core/server';
 import { Readable } from 'stream';
 import { spaceIdToNamespace } from '../utils/namespace';
 import { CopyOptions, ResolveConflictsOptions, CopyResponse } from './types';
@@ -15,7 +19,7 @@ import { createReadableStreamFromArray } from './lib/readable_stream_from_array'
 
 export function resolveCopySavedObjectsToSpacesConflictsFactory(
   savedObjectsClient: SavedObjectsClientContract,
-  savedObjectsService: SavedObjectsService
+  savedObjectsService: SavedObjectsLegacyService
 ) {
   const { importExport, types, schema } = savedObjectsService;
   const eligibleTypes = getEligibleTypes({ types, schema });
diff --git a/x-pack/legacy/plugins/spaces/server/lib/create_default_space.test.ts b/x-pack/legacy/plugins/spaces/server/lib/create_default_space.test.ts
index 0476bf9ba929b6..cd0ecdea97fb2c 100644
--- a/x-pack/legacy/plugins/spaces/server/lib/create_default_space.test.ts
+++ b/x-pack/legacy/plugins/spaces/server/lib/create_default_space.test.ts
@@ -10,7 +10,7 @@ import * as Rx from 'rxjs';
 import Boom from 'boom';
 import { getClient } from '../../../../server/lib/get_client_shield';
 import { createDefaultSpace } from './create_default_space';
-import { SavedObjectsService } from 'src/core/server';
+import { SavedObjectsLegacyService } from 'src/core/server';
 import { ElasticsearchServiceSetup } from 'src/core/server';
 
 let mockCallWithRequest;
@@ -83,7 +83,7 @@ const createMockDeps = (settings: MockServerSettings = {}) => {
 
   return {
     config: mockServer.config(),
-    savedObjects: (mockServer.savedObjects as unknown) as SavedObjectsService,
+    savedObjects: (mockServer.savedObjects as unknown) as SavedObjectsLegacyService,
     elasticsearch: ({
       dataClient$: Rx.of({
         callAsInternalUser: jest.fn(),
diff --git a/x-pack/legacy/plugins/spaces/server/lib/create_default_space.ts b/x-pack/legacy/plugins/spaces/server/lib/create_default_space.ts
index bde9a5132182b8..9e574c19c987f1 100644
--- a/x-pack/legacy/plugins/spaces/server/lib/create_default_space.ts
+++ b/x-pack/legacy/plugins/spaces/server/lib/create_default_space.ts
@@ -7,12 +7,12 @@
 import { i18n } from '@kbn/i18n';
 
 import { first } from 'rxjs/operators';
-import { SavedObjectsService, CoreSetup } from 'src/core/server';
+import { SavedObjectsLegacyService, CoreSetup } from 'src/core/server';
 import { DEFAULT_SPACE_ID } from '../../common/constants';
 
 interface Deps {
   elasticsearch: CoreSetup['elasticsearch'];
-  savedObjects: SavedObjectsService;
+  savedObjects: SavedObjectsLegacyService;
 }
 
 export async function createDefaultSpace({ elasticsearch, savedObjects }: Deps) {
diff --git a/x-pack/legacy/plugins/spaces/server/lib/get_active_space.ts b/x-pack/legacy/plugins/spaces/server/lib/get_active_space.ts
index 907b7b164b69b3..a77a945239100b 100644
--- a/x-pack/legacy/plugins/spaces/server/lib/get_active_space.ts
+++ b/x-pack/legacy/plugins/spaces/server/lib/get_active_space.ts
@@ -7,7 +7,7 @@
 import { Space } from '../../common/model/space';
 import { wrapError } from './errors';
 import { SpacesClient } from './spaces_client';
-import { getSpaceIdFromPath } from './spaces_url_parser';
+import { getSpaceIdFromPath } from '../../common';
 
 export async function getActiveSpace(
   spacesClient: SpacesClient,
diff --git a/x-pack/legacy/plugins/spaces/server/lib/request_interceptors/on_post_auth_interceptor.test.ts b/x-pack/legacy/plugins/spaces/server/lib/request_interceptors/on_post_auth_interceptor.test.ts
index 06aed92b4edaf9..511af53c13ab46 100644
--- a/x-pack/legacy/plugins/spaces/server/lib/request_interceptors/on_post_auth_interceptor.test.ts
+++ b/x-pack/legacy/plugins/spaces/server/lib/request_interceptors/on_post_auth_interceptor.test.ts
@@ -12,7 +12,7 @@ import { initSpacesOnRequestInterceptor } from './on_request_interceptor';
 import {
   HttpServiceSetup,
   CoreSetup,
-  SavedObjectsService,
+  SavedObjectsLegacyService,
   SavedObjectsErrorHelpers,
 } from '../../../../../../../src/core/server';
 import {
@@ -168,7 +168,7 @@ describe('onPostAuthInterceptor', () => {
         serverDefaultRoute: defaultRoute,
         serverBasePath: '',
       },
-      savedObjects: (savedObjectsService as unknown) as SavedObjectsService,
+      savedObjects: (savedObjectsService as unknown) as SavedObjectsLegacyService,
     } as LegacyAPI;
 
     const service = new SpacesService(loggingMock, () => legacyAPI);
@@ -428,7 +428,7 @@ describe('onPostAuthInterceptor', () => {
     );
   }, 30000);
 
-  it('allows the request to continue when accessing the root of a non-default space', async () => {
+  it('redirects to the "enter space" endpoint when accessing the root of a non-default space', async () => {
     const spaces = [
       {
         id: 'default',
@@ -449,9 +449,8 @@ describe('onPostAuthInterceptor', () => {
 
     const { response, spacesService } = await request('/s/a-space', spaces);
 
-    // OSS handles this redirection for us
     expect(response.status).toEqual(302);
-    expect(response.header.location).toEqual(`/s/a-space${defaultRoute}`);
+    expect(response.header.location).toEqual(`/s/a-space/spaces/enter`);
 
     expect(spacesService.scopedClient).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -463,7 +462,7 @@ describe('onPostAuthInterceptor', () => {
   }, 30000);
 
   describe('with a single available space', () => {
-    it('it redirects to the defaultRoute within the context of the single Space when navigating to Kibana root', async () => {
+    it('it redirects to the "enter space" endpoint within the context of the single Space when navigating to Kibana root', async () => {
       const spaces = [
         {
           id: 'a-space',
@@ -477,7 +476,7 @@ describe('onPostAuthInterceptor', () => {
       const { response, spacesService } = await request('/', spaces);
 
       expect(response.status).toEqual(302);
-      expect(response.header.location).toEqual(`/s/a-space${defaultRoute}`);
+      expect(response.header.location).toEqual(`/s/a-space/spaces/enter`);
 
       expect(spacesService.scopedClient).toHaveBeenCalledWith(
         expect.objectContaining({
@@ -488,7 +487,7 @@ describe('onPostAuthInterceptor', () => {
       );
     });
 
-    it('it redirects to the defaultRoute within the context of the Default Space when navigating to Kibana root', async () => {
+    it('it redirects to the "enter space" endpoint within the context of the Default Space when navigating to Kibana root', async () => {
       // This is very similar to the test above, but this handles the condition where the only available space is the Default Space,
       // which does not have a URL Context. In this scenario, the end result is the same as the other test, but the final URL the user
       // is redirected to does not contain a space identifier (e.g., /s/foo)
@@ -506,7 +505,7 @@ describe('onPostAuthInterceptor', () => {
       const { response, spacesService } = await request('/', spaces);
 
       expect(response.status).toEqual(302);
-      expect(response.header.location).toEqual(defaultRoute);
+      expect(response.header.location).toEqual('/spaces/enter');
       expect(spacesService.scopedClient).toHaveBeenCalledWith(
         expect.objectContaining({
           headers: expect.objectContaining({
diff --git a/x-pack/legacy/plugins/spaces/server/lib/request_interceptors/on_post_auth_interceptor.ts b/x-pack/legacy/plugins/spaces/server/lib/request_interceptors/on_post_auth_interceptor.ts
index 7cd3114ced2fab..e02677d94a8da4 100644
--- a/x-pack/legacy/plugins/spaces/server/lib/request_interceptors/on_post_auth_interceptor.ts
+++ b/x-pack/legacy/plugins/spaces/server/lib/request_interceptors/on_post_auth_interceptor.ts
@@ -6,12 +6,12 @@
 import { Logger, CoreSetup } from 'src/core/server';
 import { Space } from '../../../common/model/space';
 import { wrapError } from '../errors';
-import { addSpaceIdToPath } from '../spaces_url_parser';
 import { XPackMainPlugin } from '../../../../xpack_main/xpack_main';
 import { SpacesServiceSetup } from '../../new_platform/spaces_service/spaces_service';
 import { LegacyAPI } from '../../new_platform/plugin';
 import { getSpaceSelectorUrl } from '../get_space_selector_url';
-import { DEFAULT_SPACE_ID } from '../../../common/constants';
+import { DEFAULT_SPACE_ID, ENTER_SPACE_PATH } from '../../../common/constants';
+import { addSpaceIdToPath } from '../../../common';
 
 export interface OnPostAuthInterceptorDeps {
   getLegacyAPI(): LegacyAPI;
@@ -28,7 +28,7 @@ export function initSpacesOnPostAuthRequestInterceptor({
   log,
   http,
 }: OnPostAuthInterceptorDeps) {
-  const { serverBasePath, serverDefaultRoute } = getLegacyAPI().legacyConfig;
+  const { serverBasePath } = getLegacyAPI().legacyConfig;
 
   http.registerOnPostAuth(async (request, response, toolkit) => {
     const path = request.url.pathname!;
@@ -38,6 +38,7 @@ export function initSpacesOnPostAuthRequestInterceptor({
     // The root of kibana is also the root of the defaut space,
     // since the default space does not have a URL Identifier (i.e., `/s/foo`).
     const isRequestingKibanaRoot = path === '/' && spaceId === DEFAULT_SPACE_ID;
+    const isRequestingSpaceRoot = path === '/' && spaceId !== DEFAULT_SPACE_ID;
     const isRequestingApplication = path.startsWith('/app');
 
     const spacesClient = await spacesService.scopedClient(request);
@@ -54,7 +55,7 @@ export function initSpacesOnPostAuthRequestInterceptor({
           // No need for an interstitial screen where there is only one possible outcome.
           const space = spaces[0];
 
-          const destination = addSpaceIdToPath(serverBasePath, space.id, serverDefaultRoute);
+          const destination = addSpaceIdToPath(serverBasePath, space.id, ENTER_SPACE_PATH);
           return response.redirected({ headers: { location: destination } });
         }
 
@@ -72,6 +73,9 @@ export function initSpacesOnPostAuthRequestInterceptor({
           statusCode: wrappedError.output.statusCode,
         });
       }
+    } else if (isRequestingSpaceRoot) {
+      const destination = addSpaceIdToPath(serverBasePath, spaceId, ENTER_SPACE_PATH);
+      return response.redirected({ headers: { location: destination } });
     }
 
     // This condition should only happen after selecting a space, or when transitioning from one application to another
diff --git a/x-pack/legacy/plugins/spaces/server/lib/request_interceptors/on_request_interceptor.ts b/x-pack/legacy/plugins/spaces/server/lib/request_interceptors/on_request_interceptor.ts
index 5da9bdbe6543f1..114cc9bf86d467 100644
--- a/x-pack/legacy/plugins/spaces/server/lib/request_interceptors/on_request_interceptor.ts
+++ b/x-pack/legacy/plugins/spaces/server/lib/request_interceptors/on_request_interceptor.ts
@@ -11,9 +11,9 @@ import {
 } from 'src/core/server';
 import { format } from 'url';
 import { DEFAULT_SPACE_ID } from '../../../common/constants';
-import { getSpaceIdFromPath } from '../spaces_url_parser';
 import { modifyUrl } from '../utils/url';
 import { LegacyAPI } from '../../new_platform/plugin';
+import { getSpaceIdFromPath } from '../../../common';
 
 export interface OnRequestInterceptorDeps {
   getLegacyAPI(): LegacyAPI;
diff --git a/x-pack/legacy/plugins/spaces/server/lib/spaces_tutorial_context_factory.test.ts b/x-pack/legacy/plugins/spaces/server/lib/spaces_tutorial_context_factory.test.ts
index eed72ec744e0f7..725b4cdc6bbad9 100644
--- a/x-pack/legacy/plugins/spaces/server/lib/spaces_tutorial_context_factory.test.ts
+++ b/x-pack/legacy/plugins/spaces/server/lib/spaces_tutorial_context_factory.test.ts
@@ -8,7 +8,7 @@ import * as Rx from 'rxjs';
 import { DEFAULT_SPACE_ID } from '../../common/constants';
 import { createSpacesTutorialContextFactory } from './spaces_tutorial_context_factory';
 import { SpacesService } from '../new_platform/spaces_service';
-import { SavedObjectsService } from 'src/core/server';
+import { SavedObjectsLegacyService } from 'src/core/server';
 import { SpacesAuditLogger } from './audit_logger';
 import { elasticsearchServiceMock, coreMock } from '../../../../../../src/core/server/mocks';
 import { spacesServiceMock } from '../new_platform/spaces_service/spaces_service.mock';
@@ -29,7 +29,7 @@ const legacyAPI: LegacyAPI = {
   legacyConfig: {
     serverBasePath: '/foo',
   },
-  savedObjects: {} as SavedObjectsService,
+  savedObjects: {} as SavedObjectsLegacyService,
 } as LegacyAPI;
 
 const service = new SpacesService(log, () => legacyAPI);
diff --git a/x-pack/legacy/plugins/spaces/server/new_platform/plugin.ts b/x-pack/legacy/plugins/spaces/server/new_platform/plugin.ts
index 382227a4f1cec7..ed11e6da317fa1 100644
--- a/x-pack/legacy/plugins/spaces/server/new_platform/plugin.ts
+++ b/x-pack/legacy/plugins/spaces/server/new_platform/plugin.ts
@@ -5,7 +5,7 @@
  */
 
 import { Observable } from 'rxjs';
-import { SavedObjectsService, CoreSetup } from 'src/core/server';
+import { SavedObjectsLegacyService, CoreSetup } from 'src/core/server';
 import { Logger, PluginInitializerContext } from 'src/core/server';
 import { CapabilitiesModifier } from 'src/legacy/server/capabilities';
 import { Legacy } from 'kibana';
@@ -20,7 +20,6 @@ import { checkLicense } from '../lib/check_license';
 import { spacesSavedObjectsClientWrapperFactory } from '../lib/saved_objects_client/saved_objects_client_wrapper_factory';
 import { SpacesAuditLogger } from '../lib/audit_logger';
 import { createSpacesTutorialContextFactory } from '../lib/spaces_tutorial_context_factory';
-import { initInternalApis } from '../routes/api/v1';
 import { initExternalSpacesApi } from '../routes/api/external';
 import { getSpacesUsageCollector } from '../lib/get_spaces_usage_collector';
 import { SpacesService } from './spaces_service';
@@ -36,7 +35,7 @@ import { initSpacesRequestInterceptors } from '../lib/request_interceptors';
  * to function properly.
  */
 export interface LegacyAPI {
-  savedObjects: SavedObjectsService;
+  savedObjects: SavedObjectsLegacyService;
   usage: {
     collectorSet: {
       register: (collector: any) => void;
@@ -178,13 +177,6 @@ export class Plugin {
       })
     );
 
-    initInternalApis({
-      legacyRouter: legacyAPI.router,
-      getLegacyAPI: this.getLegacyAPI,
-      spacesService,
-      xpackMain: xpackMainPlugin,
-    });
-
     initExternalSpacesApi({
       legacyRouter: legacyAPI.router,
       log: this.log,
diff --git a/x-pack/legacy/plugins/spaces/server/new_platform/spaces_service/spaces_service.test.ts b/x-pack/legacy/plugins/spaces/server/new_platform/spaces_service/spaces_service.test.ts
index 809c118b8368d8..817474dc0fb3a0 100644
--- a/x-pack/legacy/plugins/spaces/server/new_platform/spaces_service/spaces_service.test.ts
+++ b/x-pack/legacy/plugins/spaces/server/new_platform/spaces_service/spaces_service.test.ts
@@ -7,11 +7,15 @@ import * as Rx from 'rxjs';
 import { SpacesService } from './spaces_service';
 import { coreMock, elasticsearchServiceMock } from 'src/core/server/mocks';
 import { SpacesAuditLogger } from '../../lib/audit_logger';
-import { KibanaRequest, SavedObjectsService, SavedObjectsErrorHelpers } from 'src/core/server';
+import {
+  KibanaRequest,
+  SavedObjectsLegacyService,
+  SavedObjectsErrorHelpers,
+} from 'src/core/server';
 import { DEFAULT_SPACE_ID } from '../../../common/constants';
-import { getSpaceIdFromPath } from '../../lib/spaces_url_parser';
 import { createOptionalPlugin } from '../../../../../server/lib/optional_plugin';
 import { LegacyAPI } from '../plugin';
+import { getSpaceIdFromPath } from '../../../common';
 
 const mockLogger = {
   trace: jest.fn(),
@@ -53,7 +57,7 @@ const createService = async (serverBasePath: string = '') => {
           throw SavedObjectsErrorHelpers.createGenericNotFoundError(type, id);
         }),
       }),
-    } as unknown) as SavedObjectsService,
+    } as unknown) as SavedObjectsLegacyService,
   } as LegacyAPI;
 
   const spacesService = new SpacesService(mockLogger, () => legacyAPI);
diff --git a/x-pack/legacy/plugins/spaces/server/new_platform/spaces_service/spaces_service.ts b/x-pack/legacy/plugins/spaces/server/new_platform/spaces_service/spaces_service.ts
index 623e6c43b16e8c..08ebc2cb317482 100644
--- a/x-pack/legacy/plugins/spaces/server/new_platform/spaces_service/spaces_service.ts
+++ b/x-pack/legacy/plugins/spaces/server/new_platform/spaces_service/spaces_service.ts
@@ -12,11 +12,11 @@ import { OptionalPlugin } from '../../../../../server/lib/optional_plugin';
 import { DEFAULT_SPACE_ID } from '../../../common/constants';
 import { SecurityPlugin } from '../../../../security';
 import { SpacesClient } from '../../lib/spaces_client';
-import { getSpaceIdFromPath, addSpaceIdToPath } from '../../lib/spaces_url_parser';
 import { SpacesConfigType } from '../config';
 import { namespaceToSpaceId, spaceIdToNamespace } from '../../lib/utils/namespace';
 import { LegacyAPI } from '../plugin';
 import { Space } from '../../../common/model/space';
+import { getSpaceIdFromPath, addSpaceIdToPath } from '../../../common';
 
 type RequestFacade = KibanaRequest | Legacy.Request;
 
diff --git a/x-pack/legacy/plugins/spaces/server/routes/api/__fixtures__/create_test_handler.ts b/x-pack/legacy/plugins/spaces/server/routes/api/__fixtures__/create_test_handler.ts
index d84c79c3d78b7d..405a3dd34e7fc6 100644
--- a/x-pack/legacy/plugins/spaces/server/routes/api/__fixtures__/create_test_handler.ts
+++ b/x-pack/legacy/plugins/spaces/server/routes/api/__fixtures__/create_test_handler.ts
@@ -9,7 +9,7 @@ import { Server } from 'hapi';
 import { Legacy } from 'kibana';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { elasticsearchServiceMock, coreMock } from 'src/core/server/mocks';
-import { SavedObjectsSchema, SavedObjectsService } from 'src/core/server';
+import { SavedObjectsSchema, SavedObjectsLegacyService } from 'src/core/server';
 import { Readable } from 'stream';
 import { createPromiseFromStreams, createConcatStream } from 'src/legacy/utils/streams';
 import { createOptionalPlugin } from '../../../../../../server/lib/optional_plugin';
@@ -18,7 +18,6 @@ import { createSpaces } from './create_spaces';
 import { ExternalRouteDeps } from '../external';
 import { SpacesService } from '../../../new_platform/spaces_service';
 import { SpacesAuditLogger } from '../../../lib/audit_logger';
-import { InternalRouteDeps } from '../v1';
 import { LegacyAPI } from '../../../new_platform/plugin';
 
 interface KibanaServer extends Legacy.Server {
@@ -44,13 +43,19 @@ export interface RequestRunnerResult {
   server: any;
   mockSavedObjectsRepository: any;
   mockSavedObjectsService: {
-    getScopedSavedObjectsClient: jest.Mock<SavedObjectsService['getScopedSavedObjectsClient']>;
+    getScopedSavedObjectsClient: jest.Mock<
+      SavedObjectsLegacyService['getScopedSavedObjectsClient']
+    >;
     importExport: {
       getSortedObjectsForExport: jest.Mock<
-        SavedObjectsService['importExport']['getSortedObjectsForExport']
+        SavedObjectsLegacyService['importExport']['getSortedObjectsForExport']
+      >;
+      importSavedObjects: jest.Mock<
+        SavedObjectsLegacyService['importExport']['importSavedObjects']
+      >;
+      resolveImportErrors: jest.Mock<
+        SavedObjectsLegacyService['importExport']['resolveImportErrors']
       >;
-      importSavedObjects: jest.Mock<SavedObjectsService['importExport']['importSavedObjects']>;
-      resolveImportErrors: jest.Mock<SavedObjectsService['importExport']['resolveImportErrors']>;
     };
   };
   headers: Record<string, unknown>;
@@ -73,9 +78,7 @@ async function readStreamToCompletion(stream: Readable) {
   return (createPromiseFromStreams([stream, createConcatStream([])]) as unknown) as any[];
 }
 
-export function createTestHandler(
-  initApiFn: (deps: ExternalRouteDeps & InternalRouteDeps) => void
-) {
+export function createTestHandler(initApiFn: (deps: ExternalRouteDeps) => void) {
   const teardowns: TeardownFn[] = [];
 
   const spaces = createSpaces();
@@ -248,7 +251,6 @@ export function createTestHandler(
     });
 
     initApiFn({
-      getLegacyAPI: () => legacyAPI,
       routePreCheckLicenseFn: pre,
       savedObjects: server.savedObjects,
       spacesService,
diff --git a/x-pack/legacy/plugins/spaces/server/routes/api/external/index.ts b/x-pack/legacy/plugins/spaces/server/routes/api/external/index.ts
index 72ddc193e5c9f3..7828a6b59d5667 100644
--- a/x-pack/legacy/plugins/spaces/server/routes/api/external/index.ts
+++ b/x-pack/legacy/plugins/spaces/server/routes/api/external/index.ts
@@ -5,7 +5,7 @@
  */
 
 import { Legacy } from 'kibana';
-import { Logger, SavedObjectsService } from 'src/core/server';
+import { Logger, SavedObjectsLegacyService } from 'src/core/server';
 import { XPackMainPlugin } from '../../../../../xpack_main/xpack_main';
 import { routePreCheckLicense } from '../../../lib/route_pre_check_license';
 import { initDeleteSpacesApi } from './delete';
@@ -20,7 +20,7 @@ type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 interface RouteDeps {
   xpackMain: XPackMainPlugin;
   legacyRouter: Legacy.Server['route'];
-  savedObjects: SavedObjectsService;
+  savedObjects: SavedObjectsLegacyService;
   spacesService: SpacesServiceSetup;
   log: Logger;
 }
diff --git a/x-pack/legacy/plugins/spaces/server/routes/api/v1/index.ts b/x-pack/legacy/plugins/spaces/server/routes/api/v1/index.ts
deleted file mode 100644
index ddbca3e8e3d71d..00000000000000
--- a/x-pack/legacy/plugins/spaces/server/routes/api/v1/index.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { Legacy } from 'kibana';
-import { XPackMainPlugin } from '../../../../../xpack_main/xpack_main';
-import { routePreCheckLicense } from '../../../lib/route_pre_check_license';
-import { initInternalSpacesApi } from './spaces';
-import { SpacesServiceSetup } from '../../../new_platform/spaces_service/spaces_service';
-import { LegacyAPI } from '../../../new_platform/plugin';
-
-type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
-
-interface RouteDeps {
-  xpackMain: XPackMainPlugin;
-  spacesService: SpacesServiceSetup;
-  getLegacyAPI(): LegacyAPI;
-  legacyRouter: Legacy.Server['route'];
-}
-
-export interface InternalRouteDeps extends Omit<RouteDeps, 'xpackMain'> {
-  routePreCheckLicenseFn: any;
-}
-
-export function initInternalApis({ xpackMain, ...rest }: RouteDeps) {
-  const routePreCheckLicenseFn = routePreCheckLicense({ xpackMain });
-
-  const deps: InternalRouteDeps = {
-    ...rest,
-    routePreCheckLicenseFn,
-  };
-
-  initInternalSpacesApi(deps);
-}
diff --git a/x-pack/legacy/plugins/spaces/server/routes/api/v1/spaces.test.ts b/x-pack/legacy/plugins/spaces/server/routes/api/v1/spaces.test.ts
deleted file mode 100644
index 4d9952f4ab3dcc..00000000000000
--- a/x-pack/legacy/plugins/spaces/server/routes/api/v1/spaces.test.ts
+++ /dev/null
@@ -1,93 +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.
- */
-
-jest.mock('../../../lib/route_pre_check_license', () => {
-  return {
-    routePreCheckLicense: () => (request: any, h: any) => h.continue,
-  };
-});
-
-jest.mock('../../../../../../server/lib/get_client_shield', () => {
-  return {
-    getClient: () => {
-      return {
-        callWithInternalUser: jest.fn(() => {
-          return;
-        }),
-      };
-    },
-  };
-});
-
-import Boom from 'boom';
-import { createTestHandler, RequestRunner, TeardownFn } from '../__fixtures__';
-import { initInternalSpacesApi } from './spaces';
-
-describe('Spaces API', () => {
-  let request: RequestRunner;
-  let teardowns: TeardownFn[];
-
-  beforeEach(() => {
-    const setup = createTestHandler(initInternalSpacesApi);
-
-    request = setup.request;
-    teardowns = setup.teardowns;
-  });
-
-  afterEach(async () => {
-    await Promise.all(teardowns.splice(0).map(fn => fn()));
-  });
-
-  test('POST space/{id}/select should respond with the new space location', async () => {
-    const { response } = await request('POST', '/api/spaces/v1/space/a-space/select');
-
-    const { statusCode, payload } = response;
-
-    expect(statusCode).toEqual(200);
-
-    const result = JSON.parse(payload);
-    expect(result.location).toEqual('/s/a-space');
-  });
-
-  test(`returns result of routePreCheckLicense`, async () => {
-    const { response } = await request('POST', '/api/spaces/v1/space/a-space/select', {
-      preCheckLicenseImpl: () => Boom.forbidden('test forbidden message'),
-      expectSpacesClientCall: false,
-    });
-
-    const { statusCode, payload } = response;
-
-    expect(statusCode).toEqual(403);
-    expect(JSON.parse(payload)).toMatchObject({
-      message: 'test forbidden message',
-    });
-  });
-
-  test('POST space/{id}/select should respond with 404 when the space is not found', async () => {
-    const { response } = await request('POST', '/api/spaces/v1/space/not-a-space/select');
-
-    const { statusCode } = response;
-
-    expect(statusCode).toEqual(404);
-  });
-
-  test('POST space/{id}/select should respond with the new space location when a server.basePath is in use', async () => {
-    const testConfig = {
-      'server.basePath': '/my/base/path',
-    };
-
-    const { response } = await request('POST', '/api/spaces/v1/space/a-space/select', {
-      testConfig,
-    });
-
-    const { statusCode, payload } = response;
-
-    expect(statusCode).toEqual(200);
-
-    const result = JSON.parse(payload);
-    expect(result.location).toEqual('/my/base/path/s/a-space');
-  });
-});
diff --git a/x-pack/legacy/plugins/spaces/server/routes/api/v1/spaces.ts b/x-pack/legacy/plugins/spaces/server/routes/api/v1/spaces.ts
deleted file mode 100644
index 3d15044d129e93..00000000000000
--- a/x-pack/legacy/plugins/spaces/server/routes/api/v1/spaces.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import Boom from 'boom';
-import { Space } from '../../../../common/model/space';
-import { wrapError } from '../../../lib/errors';
-import { SpacesClient } from '../../../lib/spaces_client';
-import { addSpaceIdToPath } from '../../../lib/spaces_url_parser';
-import { getSpaceById } from '../../lib';
-import { InternalRouteDeps } from '.';
-
-export function initInternalSpacesApi(deps: InternalRouteDeps) {
-  const { legacyRouter, spacesService, getLegacyAPI, routePreCheckLicenseFn } = deps;
-
-  legacyRouter({
-    method: 'POST',
-    path: '/api/spaces/v1/space/{id}/select',
-    async handler(request: any) {
-      const { savedObjects, legacyConfig } = getLegacyAPI();
-
-      const { SavedObjectsClient } = savedObjects;
-      const spacesClient: SpacesClient = await spacesService.scopedClient(request);
-      const id = request.params.id;
-
-      const basePath = legacyConfig.serverBasePath;
-      const defaultRoute = legacyConfig.serverDefaultRoute;
-      try {
-        const existingSpace: Space | null = await getSpaceById(
-          spacesClient,
-          id,
-          SavedObjectsClient.errors
-        );
-        if (!existingSpace) {
-          return Boom.notFound();
-        }
-
-        return {
-          location: addSpaceIdToPath(basePath, existingSpace.id, defaultRoute),
-        };
-      } catch (error) {
-        return wrapError(error);
-      }
-    },
-    options: {
-      pre: [routePreCheckLicenseFn],
-    },
-  });
-}
diff --git a/x-pack/legacy/plugins/spaces/server/routes/views/enter_space.ts b/x-pack/legacy/plugins/spaces/server/routes/views/enter_space.ts
new file mode 100644
index 00000000000000..e560d4278b4079
--- /dev/null
+++ b/x-pack/legacy/plugins/spaces/server/routes/views/enter_space.ts
@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { Legacy } from 'kibana';
+import { ENTER_SPACE_PATH } from '../../../common/constants';
+import { wrapError } from '../../lib/errors';
+
+export function initEnterSpaceView(server: Legacy.Server) {
+  server.route({
+    method: 'GET',
+    path: ENTER_SPACE_PATH,
+    async handler(request, h) {
+      try {
+        return h.redirect(await request.getDefaultRoute());
+      } catch (e) {
+        server.log(['spaces', 'error'], `Error navigating to space: ${e}`);
+        return wrapError(e);
+      }
+    },
+  });
+}
diff --git a/x-pack/legacy/plugins/spaces/server/routes/views/index.ts b/x-pack/legacy/plugins/spaces/server/routes/views/index.ts
index a0f72886940a4a..d7637e299652fe 100644
--- a/x-pack/legacy/plugins/spaces/server/routes/views/index.ts
+++ b/x-pack/legacy/plugins/spaces/server/routes/views/index.ts
@@ -5,3 +5,4 @@
  */
 
 export { initSpaceSelectorView } from './space_selector';
+export { initEnterSpaceView } from './enter_space';
diff --git a/x-pack/legacy/plugins/task_manager/index.ts b/x-pack/legacy/plugins/task_manager/index.ts
index 832c859e6d67cf..192c8a309b0ea6 100644
--- a/x-pack/legacy/plugins/task_manager/index.ts
+++ b/x-pack/legacy/plugins/task_manager/index.ts
@@ -73,7 +73,7 @@ export function taskManager(kibana: any) {
           // executing. Saved objects repository waits for migrations to finish before
           // finishing the request. To avoid this, we'll await within a separate
           // function block.
-          await this.kbnServer.server.kibanaMigrator.awaitMigration();
+          await this.kbnServer.server.kibanaMigrator.runMigrations();
           plugin.start();
         })();
       });
diff --git a/x-pack/legacy/plugins/upgrade_assistant/public/components/tabs/checkup/__snapshots__/checkup_tab.test.tsx.snap b/x-pack/legacy/plugins/upgrade_assistant/public/components/tabs/checkup/__snapshots__/checkup_tab.test.tsx.snap
index 5f826ba30262c0..6f92d475ae6c50 100644
--- a/x-pack/legacy/plugins/upgrade_assistant/public/components/tabs/checkup/__snapshots__/checkup_tab.test.tsx.snap
+++ b/x-pack/legacy/plugins/upgrade_assistant/public/components/tabs/checkup/__snapshots__/checkup_tab.test.tsx.snap
@@ -457,7 +457,6 @@ exports[`CheckupTab render without deprecations 1`] = `
             </p>
           </React.Fragment>
         }
-        iconColor="subdued"
         iconType="faceHappy"
         title={
           <h2>
diff --git a/x-pack/legacy/plugins/uptime/common/constants/client_defaults.ts b/x-pack/legacy/plugins/uptime/common/constants/client_defaults.ts
index 21e866e9919444..66ac571e2b7a5e 100644
--- a/x-pack/legacy/plugins/uptime/common/constants/client_defaults.ts
+++ b/x-pack/legacy/plugins/uptime/common/constants/client_defaults.ts
@@ -31,6 +31,6 @@ export const CLIENT_DEFAULTS = {
   MONITOR_LIST_SORT_DIRECTION: 'asc',
   MONITOR_LIST_SORT_FIELD: 'monitor_id',
   SEARCH: '',
-  SELECTED_PING_LIST_STATUS: 'down',
+  SELECTED_PING_LIST_STATUS: '',
   STATUS_FILTER: '',
 };
diff --git a/x-pack/legacy/plugins/uptime/common/constants/plugin.ts b/x-pack/legacy/plugins/uptime/common/constants/plugin.ts
index 01f38d37189d1b..47f77ea985f322 100644
--- a/x-pack/legacy/plugins/uptime/common/constants/plugin.ts
+++ b/x-pack/legacy/plugins/uptime/common/constants/plugin.ts
@@ -5,6 +5,7 @@
  */
 
 export const PLUGIN = {
+  APP_ROOT_ID: 'react-uptime-root',
   ID: 'uptime',
   ROUTER_BASE_NAME: '/app/uptime#/',
   LOCAL_STORAGE_KEY: 'xpack.uptime',
diff --git a/x-pack/legacy/plugins/uptime/public/app.ts b/x-pack/legacy/plugins/uptime/public/app.ts
index 255c51c9e48cea..b068f8a9becda5 100644
--- a/x-pack/legacy/plugins/uptime/public/app.ts
+++ b/x-pack/legacy/plugins/uptime/public/app.ts
@@ -4,4 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import './apps/kibana_app';
+import './apps/index';
diff --git a/x-pack/legacy/plugins/uptime/public/apps/index.ts b/x-pack/legacy/plugins/uptime/public/apps/index.ts
new file mode 100644
index 00000000000000..2fa548c3c27174
--- /dev/null
+++ b/x-pack/legacy/plugins/uptime/public/apps/index.ts
@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import chrome from 'ui/chrome';
+import { npStart } from 'ui/new_platform';
+import { Plugin } from './plugin';
+
+new Plugin({ opaqueId: Symbol('uptime') }, chrome).start(npStart);
diff --git a/x-pack/legacy/plugins/uptime/public/apps/plugin.ts b/x-pack/legacy/plugins/uptime/public/apps/plugin.ts
new file mode 100644
index 00000000000000..bc4e30b79cb157
--- /dev/null
+++ b/x-pack/legacy/plugins/uptime/public/apps/plugin.ts
@@ -0,0 +1,58 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { LegacyCoreStart, PluginInitializerContext } from 'src/core/public';
+import { PluginsStart } from 'ui/new_platform/new_platform';
+import { Chrome } from 'ui/chrome';
+import { UMFrontendLibs } from '../lib/lib';
+import { PLUGIN } from '../../common/constants';
+import { getKibanaFrameworkAdapter } from '../lib/adapters/framework/new_platform_adapter';
+import template from './template.html';
+import { UptimeApp } from '../uptime_app';
+import { createApolloClient } from '../lib/adapters/framework/apollo_client_adapter';
+
+export interface StartObject {
+  core: LegacyCoreStart;
+  plugins: PluginsStart;
+}
+
+export class Plugin {
+  constructor(
+    // @ts-ignore this is added to satisfy the New Platform typing constraint,
+    // but we're not leveraging any of its functionality yet.
+    private readonly initializerContext: PluginInitializerContext,
+    private readonly chrome: Chrome
+  ) {
+    this.chrome = chrome;
+  }
+
+  public start(start: StartObject): void {
+    const {
+      core,
+      plugins: {
+        data: { autocomplete },
+      },
+    } = start;
+    const libs: UMFrontendLibs = {
+      framework: getKibanaFrameworkAdapter(core, autocomplete),
+    };
+    // @ts-ignore improper type description
+    this.chrome.setRootTemplate(template);
+    const checkForRoot = () => {
+      return new Promise(resolve => {
+        const ready = !!document.getElementById(PLUGIN.APP_ROOT_ID);
+        if (ready) {
+          resolve();
+        } else {
+          setTimeout(() => resolve(checkForRoot()), 10);
+        }
+      });
+    };
+    checkForRoot().then(() => {
+      libs.framework.render(UptimeApp, createApolloClient);
+    });
+  }
+}
diff --git a/x-pack/legacy/plugins/uptime/public/apps/start_app.tsx b/x-pack/legacy/plugins/uptime/public/apps/start_app.tsx
deleted file mode 100644
index 4b07f936ae3635..00000000000000
--- a/x-pack/legacy/plugins/uptime/public/apps/start_app.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import 'react-vis/dist/style.css';
-import 'ui/angular-bootstrap';
-import 'ui/autoload/all';
-import 'ui/autoload/styles';
-import 'ui/courier';
-import 'ui/persisted_log';
-import { createApolloClient } from '../lib/adapters/framework/apollo_client_adapter';
-import { UMFrontendLibs } from '../lib/lib';
-import { UptimeApp } from '../uptime_app';
-
-export async function startApp(libs: UMFrontendLibs) {
-  libs.framework.render(UptimeApp, createApolloClient);
-}
diff --git a/x-pack/legacy/plugins/uptime/public/apps/template.html b/x-pack/legacy/plugins/uptime/public/apps/template.html
new file mode 100644
index 00000000000000..a6fb47048a9b1d
--- /dev/null
+++ b/x-pack/legacy/plugins/uptime/public/apps/template.html
@@ -0,0 +1 @@
+<div id="react-uptime-root"></div>
\ No newline at end of file
diff --git a/x-pack/legacy/plugins/uptime/public/badge.ts b/x-pack/legacy/plugins/uptime/public/badge.ts
index 76c2b72f5ead63..a1b4f85348f06b 100644
--- a/x-pack/legacy/plugins/uptime/public/badge.ts
+++ b/x-pack/legacy/plugins/uptime/public/badge.ts
@@ -4,5 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Badge } from 'ui/chrome/api/badge';
-export type UMBadge = Badge | undefined;
+import { ChromeBadge } from 'src/core/public';
+export type UMBadge = ChromeBadge | undefined;
diff --git a/x-pack/legacy/plugins/uptime/public/breadcrumbs.ts b/x-pack/legacy/plugins/uptime/public/breadcrumbs.ts
index 31aa1e491a9996..ff0dca3887ff2c 100644
--- a/x-pack/legacy/plugins/uptime/public/breadcrumbs.ts
+++ b/x-pack/legacy/plugins/uptime/public/breadcrumbs.ts
@@ -5,24 +5,20 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { ChromeBreadcrumb } from 'src/core/public';
 
-export interface UMBreadcrumb {
-  text: string;
-  href?: string;
-}
-
-const makeOverviewBreadcrumb = (search?: string): UMBreadcrumb => ({
+const makeOverviewBreadcrumb = (search?: string): ChromeBreadcrumb => ({
   text: i18n.translate('xpack.uptime.breadcrumbs.overviewBreadcrumbText', {
     defaultMessage: 'Uptime',
   }),
   href: `#/${search ? search : ''}`,
 });
 
-export const getOverviewPageBreadcrumbs = (search?: string): UMBreadcrumb[] => [
+export const getOverviewPageBreadcrumbs = (search?: string): ChromeBreadcrumb[] => [
   makeOverviewBreadcrumb(search),
 ];
 
-export const getMonitorPageBreadcrumb = (name: string, search?: string): UMBreadcrumb[] => [
+export const getMonitorPageBreadcrumb = (name: string, search?: string): ChromeBreadcrumb[] => [
   makeOverviewBreadcrumb(search),
   { text: name },
 ];
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/monitor_charts.test.tsx.snap b/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/monitor_charts.test.tsx.snap
index 1272e939e4b43e..d915bcb72e05eb 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/monitor_charts.test.tsx.snap
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/monitor_charts.test.tsx.snap
@@ -67,9 +67,7 @@ exports[`MonitorCharts component renders the component without errors 1`] = `
       <withApollo(Component)
         absoluteEndDate={20}
         absoluteStartDate={20}
-        dangerColor="#bd271e"
         height="400px"
-        successColor="#017d73"
         variables={
           Object {
             "dateRangeEnd": "2011-12-03T10:15:30+01:00",
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/charts/__tests__/snapshot_histogram.test.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/charts/__tests__/snapshot_histogram.test.tsx
index 6892329e42fbcf..bad6c5e2a2ba1d 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/charts/__tests__/snapshot_histogram.test.tsx
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/charts/__tests__/snapshot_histogram.test.tsx
@@ -12,8 +12,6 @@ describe('SnapshotHistogram component', () => {
   const props: SnapshotHistogramProps = {
     absoluteStartDate: 1548697920000,
     absoluteEndDate: 1548700920000,
-    successColor: '#FEFEFE',
-    dangerColor: '#FF00FF',
   };
 
   it('renders the component without errors', () => {
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/charts/chart_wrapper/chart_wrapper.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/charts/chart_wrapper/chart_wrapper.tsx
index 44b3cfba5d764f..deeb1411052c3d 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/charts/chart_wrapper/chart_wrapper.tsx
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/charts/chart_wrapper/chart_wrapper.tsx
@@ -4,15 +4,30 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FC, Fragment } from 'react';
+import React, { FC, Fragment, HTMLAttributes } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiLoadingChart } from '@elastic/eui';
 
 interface Props {
+  /**
+   * Height for the chart
+   */
   height?: string;
+  /**
+   * if chart data source is still loading
+   */
   loading?: boolean;
+  /**
+   * aria-label for accessibility
+   */
+  'aria-label'?: string;
 }
 
-export const ChartWrapper: FC<Props> = ({ loading = false, height = '100%', children }) => {
+export const ChartWrapper: FC<Props> = ({
+  loading = false,
+  height = '100%',
+  children,
+  ...rest
+}) => {
   const opacity = loading === true ? 0.3 : 1;
 
   return (
@@ -23,6 +38,7 @@ export const ChartWrapper: FC<Props> = ({ loading = false, height = '100%', chil
           opacity,
           transition: 'opacity 0.2s',
         }}
+        {...(rest as HTMLAttributes<HTMLDivElement>)}
       >
         {children}
       </div>
@@ -30,7 +46,7 @@ export const ChartWrapper: FC<Props> = ({ loading = false, height = '100%', chil
         <EuiFlexGroup
           justifyContent="spaceAround"
           alignItems="center"
-          style={{ height, marginTop: `-${height}` }}
+          style={{ height, marginTop: `-${height}`, marginBottom: 0 }}
         >
           <EuiFlexItem grow={false}>
             <EuiLoadingChart size="xl" />
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/charts/snapshot_histogram.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/charts/snapshot_histogram.tsx
index 6d16526f3ac476..50ae8e49fe86b3 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/charts/snapshot_histogram.tsx
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/charts/snapshot_histogram.tsx
@@ -16,14 +16,16 @@ import {
 } from '@elastic/charts';
 import { EuiEmptyPrompt, EuiTitle, EuiPanel } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React, { Fragment } from 'react';
+import React, { useContext } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
+import moment from 'moment';
 import { HistogramDataPoint } from '../../../../common/graphql/types';
 import { getColorsMap } from './get_colors_map';
 import { getChartDateLabel } from '../../../lib/helper';
 import { withUptimeGraphQL, UptimeGraphQLQueryProps } from '../../higher_order';
 import { snapshotHistogramQuery } from '../../../queries/snapshot_histogram_query';
 import { ChartWrapper } from './chart_wrapper';
+import { UptimeSettingsContext } from '../../../contexts';
 
 export interface SnapshotHistogramProps {
   /**
@@ -34,17 +36,9 @@ export interface SnapshotHistogramProps {
    * The date/time for the end of the timespan.
    */
   absoluteEndDate: number;
-  /**
-   * The color value that is used to represent up checks.
-   */
-  successColor: string;
-  /**
-   * The color value that is used to represent down checks.
-   */
-  dangerColor: string;
 
   /**
-   * Height is needed, since by defauly charts takes height of 100%
+   * Height is needed, since by default charts takes height of 100%
    */
   height?: string;
 }
@@ -58,19 +52,17 @@ type Props = UptimeGraphQLQueryProps<SnapshotHistogramQueryResult> & SnapshotHis
 export const SnapshotHistogramComponent = ({
   absoluteStartDate,
   absoluteEndDate,
-  dangerColor,
-  successColor,
   data,
   loading = false,
   height,
 }: Props) => {
   if (!data || !data.histogram)
     /**
-     * TODO: the Fragment, EuiTitle, and EuiPanel should be extractec to a dumb component
+     * TODO: the Fragment, EuiTitle, and EuiPanel should be extracted to a dumb component
      * that we can reuse in the subsequent return statement at the bottom of this function.
      */
     return (
-      <Fragment>
+      <>
         <EuiTitle size="xs">
           <h5>
             <FormattedMessage
@@ -101,12 +93,15 @@ export const SnapshotHistogramComponent = ({
             }
           />
         </EuiPanel>
-      </Fragment>
+      </>
     );
   const { histogram } = data;
   const downMonitorsName = i18n.translate('xpack.uptime.snapshotHistogram.downMonitorsId', {
     defaultMessage: 'Down Monitors',
   });
+
+  const { colors } = useContext(UptimeSettingsContext);
+
   const downSpecId = getSpecId(downMonitorsName);
 
   const upMonitorsId = i18n.translate('xpack.uptime.snapshotHistogram.series.upLabel', {
@@ -114,7 +109,7 @@ export const SnapshotHistogramComponent = ({
   });
   const upSpecId = getSpecId(upMonitorsId);
   return (
-    <Fragment>
+    <>
       <EuiPanel paddingSize="m">
         <EuiTitle size="xs">
           <h5>
@@ -124,7 +119,18 @@ export const SnapshotHistogramComponent = ({
             />
           </h5>
         </EuiTitle>
-        <ChartWrapper height={height} loading={loading}>
+        <ChartWrapper
+          height={height}
+          loading={loading}
+          aria-label={i18n.translate('xpack.uptime.snapshotHistogram.description', {
+            defaultMessage:
+              'Bar Chart showing uptime status over time from {startTime} to {endTime}.',
+            values: {
+              startTime: moment(new Date(absoluteStartDate).valueOf()).fromNow(),
+              endTime: moment(new Date(absoluteEndDate).valueOf()).fromNow(),
+            },
+          })}
+        >
           <Chart>
             <Settings
               xDomain={{ min: absoluteStartDate, max: absoluteEndDate }}
@@ -154,10 +160,12 @@ export const SnapshotHistogramComponent = ({
               })}
             />
             <BarSeries
-              customSeriesColors={getColorsMap(successColor, upSpecId)}
-              data={histogram.map(({ x, upCount }) => [x, upCount || 0])}
-              id={upSpecId}
-              name={upMonitorsId}
+              customSeriesColors={getColorsMap(colors.danger, downSpecId)}
+              data={histogram.map(({ x, downCount }) => [x, downCount || 0])}
+              id={downSpecId}
+              name={i18n.translate('xpack.uptime.snapshotHistogram.series.downLabel', {
+                defaultMessage: 'Down',
+              })}
               stackAccessors={[0]}
               timeZone="local"
               xAccessor={0}
@@ -166,12 +174,10 @@ export const SnapshotHistogramComponent = ({
               yScaleType="linear"
             />
             <BarSeries
-              customSeriesColors={getColorsMap(dangerColor, downSpecId)}
-              data={histogram.map(({ x, downCount }) => [x, downCount || 0])}
-              id={downSpecId}
-              name={i18n.translate('xpack.uptime.snapshotHistogram.series.downLabel', {
-                defaultMessage: 'Down',
-              })}
+              customSeriesColors={getColorsMap(colors.gray, upSpecId)}
+              data={histogram.map(({ x, upCount }) => [x, upCount || 0])}
+              id={upSpecId}
+              name={upMonitorsId}
               stackAccessors={[0]}
               timeZone="local"
               xAccessor={0}
@@ -182,7 +188,7 @@ export const SnapshotHistogramComponent = ({
           </Chart>
         </ChartWrapper>
       </EuiPanel>
-    </Fragment>
+    </>
   );
 };
 
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/empty_state/__tests__/__snapshots__/data_missing.test.tsx.snap b/x-pack/legacy/plugins/uptime/public/components/functional/empty_state/__tests__/__snapshots__/data_missing.test.tsx.snap
index 30b2e7204e4047..b17d28f19335b5 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/empty_state/__tests__/__snapshots__/data_missing.test.tsx.snap
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/empty_state/__tests__/__snapshots__/data_missing.test.tsx.snap
@@ -36,7 +36,6 @@ exports[`DataMissing component renders basePath and headingMessage 1`] = `
             />
           </p>
         }
-        iconColor="subdued"
         iconType="uptimeApp"
         title={
           <EuiTitle
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/empty_state/__tests__/__snapshots__/empty_state.test.tsx.snap b/x-pack/legacy/plugins/uptime/public/components/functional/empty_state/__tests__/__snapshots__/empty_state.test.tsx.snap
index 95606fb912a4c0..4783806340f076 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/empty_state/__tests__/__snapshots__/empty_state.test.tsx.snap
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/empty_state/__tests__/__snapshots__/empty_state.test.tsx.snap
@@ -169,7 +169,6 @@ exports[`EmptyState component does not render empty state with appropriate base
                       />
                     </p>
                   }
-                  iconColor="subdued"
                   iconType="uptimeApp"
                   title={
                     <EuiTitle
@@ -426,7 +425,6 @@ exports[`EmptyState component doesn't render child components when count is fals
           </EuiTitle>
         </React.Fragment>
       }
-      iconColor="subdued"
     >
       <div
         className="euiEmptyPrompt"
@@ -641,7 +639,6 @@ exports[`EmptyState component notifies when index does not exist 1`] = `
                       />
                     </p>
                   }
-                  iconColor="subdued"
                   iconType="uptimeApp"
                   title={
                     <EuiTitle
@@ -1168,7 +1165,6 @@ exports[`EmptyState component renders loading state if no errors or doc count 1`
           </EuiTitle>
         </React.Fragment>
       }
-      iconColor="subdued"
     >
       <div
         className="euiEmptyPrompt"
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/kuery_bar/index.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/kuery_bar/index.tsx
index b979cbf2456bd2..f529c9cd9d53fc 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/kuery_bar/index.tsx
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/kuery_bar/index.tsx
@@ -6,18 +6,17 @@
 
 import React, { useState, useEffect, useContext } from 'react';
 import { uniqueId, startsWith } from 'lodash';
-import { npStart } from 'ui/new_platform';
 import { EuiCallOut } from '@elastic/eui';
 import styled from 'styled-components';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { StaticIndexPattern } from 'ui/index_patterns';
 import { fromKueryExpression, toElasticsearchQuery } from '@kbn/es-query';
+import { AutocompleteProviderRegister, AutocompleteSuggestion } from 'src/plugins/data/public';
+import { StaticIndexPattern } from 'src/legacy/core_plugins/data/public/index_patterns/index_patterns';
 import { Typeahead } from './typeahead';
 import { getIndexPattern } from '../../../lib/adapters/index_pattern';
 import { UptimeSettingsContext } from '../../../contexts';
 import { useUrlParams } from '../../../hooks';
 import { toStaticIndexPattern } from '../../../lib/helper';
-import { AutocompleteSuggestion } from '../../../../../../../../src/plugins/data/public';
 
 const Container = styled.div`
   margin-bottom: 10px;
@@ -28,10 +27,7 @@ interface State {
   isLoadingIndexPattern: boolean;
 }
 
-const getAutocompleteProvider = (language: string) =>
-  npStart.plugins.data.autocomplete.getProvider(language);
-
-function convertKueryToEsQuery(kuery: string, indexPattern: StaticIndexPattern) {
+function convertKueryToEsQuery(kuery: string, indexPattern: unknown) {
   const ast = fromKueryExpression(kuery);
   return toElasticsearchQuery(ast, indexPattern);
 }
@@ -39,9 +35,10 @@ function convertKueryToEsQuery(kuery: string, indexPattern: StaticIndexPattern)
 function getSuggestions(
   query: string,
   selectionStart: number,
-  apmIndexPattern: StaticIndexPattern
+  apmIndexPattern: StaticIndexPattern,
+  autocomplete: Pick<AutocompleteProviderRegister, 'getProvider'>
 ) {
-  const autocompleteProvider = getAutocompleteProvider('kuery');
+  const autocompleteProvider = autocomplete.getProvider('kuery');
   if (!autocompleteProvider) {
     return [];
   }
@@ -62,7 +59,11 @@ function getSuggestions(
   return suggestions;
 }
 
-export function KueryBar() {
+interface Props {
+  autocomplete: Pick<AutocompleteProviderRegister, 'getProvider'>;
+}
+
+export function KueryBar({ autocomplete }: Props) {
   const [state, setState] = useState<State>({
     suggestions: [],
     isLoadingIndexPattern: true,
@@ -94,7 +95,12 @@ export function KueryBar() {
     currentRequestCheck = currentRequest;
 
     try {
-      let suggestions = await getSuggestions(inputValue, selectionStart, indexPattern);
+      let suggestions = await getSuggestions(
+        inputValue,
+        selectionStart,
+        indexPattern,
+        autocomplete
+      );
       suggestions = suggestions
         .filter((suggestion: AutocompleteSuggestion) => !startsWith(suggestion.text, 'span.'))
         .slice(0, 15);
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_charts.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_charts.tsx
index 1d18919d5c473c..51c58a871d0e7a 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_charts.tsx
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_charts.tsx
@@ -6,12 +6,11 @@
 
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React, { Fragment, useContext } from 'react';
+import React, { Fragment } from 'react';
 import { MonitorChart } from '../../../common/graphql/types';
 import { UptimeGraphQLQueryProps, withUptimeGraphQL } from '../higher_order';
 import { monitorChartsQuery } from '../../queries';
 import { DurationChart } from './charts';
-import { UptimeSettingsContext } from '../../contexts';
 import { SnapshotHistogram } from './charts/snapshot_histogram';
 import { useUrlParams } from '../../hooks';
 
@@ -45,7 +44,6 @@ export const MonitorChartsComponent = ({
       monitorChartsData: { locationDurationLines },
     } = data;
 
-    const { colors } = useContext(UptimeSettingsContext);
     const [getUrlParams] = useUrlParams();
     const { absoluteDateRangeStart, absoluteDateRangeEnd } = getUrlParams();
 
@@ -64,8 +62,6 @@ export const MonitorChartsComponent = ({
             <SnapshotHistogram
               absoluteStartDate={absoluteDateRangeStart}
               absoluteEndDate={absoluteDateRangeEnd}
-              successColor={colors.success}
-              dangerColor={colors.danger}
               variables={{ dateRangeStart, dateRangeEnd, monitorId }}
               height="400px"
             />
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list.tsx
index 8c232580bbcbd8..0df545951a721d 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list.tsx
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list.tsx
@@ -111,7 +111,10 @@ export const MonitorListComponent = (props: Props) => {
             values: { length: items.length },
           })}
           error={errors ? formatUptimeGraphQLErrorList(errors) : errors}
-          loading={loading}
+          // Only set loading to true when there are no items present to prevent the bug outlined in
+          // in https://github.com/elastic/eui/issues/2393 . Once that is fixed we can simply set the value here to
+          // loading={loading}
+          loading={loading && (!items || items.length < 1)}
           isExpandable={true}
           hasActions={true}
           itemId="monitor_id"
diff --git a/x-pack/legacy/plugins/uptime/public/contexts/uptime_settings_context.ts b/x-pack/legacy/plugins/uptime/public/contexts/uptime_settings_context.ts
index 97b1555efdd1e8..0fd9be952ed401 100644
--- a/x-pack/legacy/plugins/uptime/public/contexts/uptime_settings_context.ts
+++ b/x-pack/legacy/plugins/uptime/public/contexts/uptime_settings_context.ts
@@ -54,6 +54,7 @@ const defaultContext: UMSettingsContextValues = {
     range: euiLightVars.euiFocusBackgroundColor,
     success: euiLightVars.euiColorSuccess,
     warning: euiLightVars.euiColorWarning,
+    gray: euiLightVars.euiColorLightShade,
   },
   dateRangeStart: DATE_RANGE_START,
   dateRangeEnd: DATE_RANGE_END,
diff --git a/x-pack/legacy/plugins/uptime/public/hooks/__tests__/__snapshots__/use_url_params.test.tsx.snap b/x-pack/legacy/plugins/uptime/public/hooks/__tests__/__snapshots__/use_url_params.test.tsx.snap
index 4b45ed20d5d838..5794169d755975 100644
--- a/x-pack/legacy/plugins/uptime/public/hooks/__tests__/__snapshots__/use_url_params.test.tsx.snap
+++ b/x-pack/legacy/plugins/uptime/public/hooks/__tests__/__snapshots__/use_url_params.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`useUrlParams gets the expected values using the context 1`] = `
   hook={[Function]}
 >
   <div>
-    {"absoluteDateRangeStart":20,"absoluteDateRangeEnd":20,"autorefreshInterval":60000,"autorefreshIsPaused":false,"dateRangeStart":"now-19d","dateRangeEnd":"now-1m","filters":"","search":"","selectedPingStatus":"down","statusFilter":""}
+    {"absoluteDateRangeStart":20,"absoluteDateRangeEnd":20,"autorefreshInterval":60000,"autorefreshIsPaused":false,"dateRangeStart":"now-19d","dateRangeEnd":"now-1m","filters":"","search":"","selectedPingStatus":"","statusFilter":""}
   </div>
   <button
     id="setUrlParams"
diff --git a/x-pack/legacy/plugins/uptime/public/lib/adapters/framework/capabilities_adapter.ts b/x-pack/legacy/plugins/uptime/public/lib/adapters/framework/capabilities_adapter.ts
index 135648d7b6fa31..e3faf34b7696d7 100644
--- a/x-pack/legacy/plugins/uptime/public/lib/adapters/framework/capabilities_adapter.ts
+++ b/x-pack/legacy/plugins/uptime/public/lib/adapters/framework/capabilities_adapter.ts
@@ -4,16 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { capabilities as uiCapabilities } from 'ui/capabilities';
-
 interface IntegratedAppsAvailability {
   [key: string]: boolean;
 }
 
 export const getIntegratedAppAvailability = (
+  capabilities: any,
   integratedApps: string[]
 ): IntegratedAppsAvailability => {
-  const capabilities = uiCapabilities.get();
   return integratedApps.reduce((supportedSolutions: IntegratedAppsAvailability, solutionName) => {
     supportedSolutions[solutionName] =
       capabilities[solutionName] && capabilities[solutionName].show === true;
diff --git a/x-pack/legacy/plugins/uptime/public/lib/adapters/framework/kibana_framework_adapter.ts b/x-pack/legacy/plugins/uptime/public/lib/adapters/framework/kibana_framework_adapter.ts
deleted file mode 100644
index dee8a957e54dab..00000000000000
--- a/x-pack/legacy/plugins/uptime/public/lib/adapters/framework/kibana_framework_adapter.ts
+++ /dev/null
@@ -1,140 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import ReactDOM from 'react-dom';
-import { unmountComponentAtNode } from 'react-dom';
-import chrome from 'ui/chrome';
-import { ELASTIC_WEBSITE_URL, DOC_LINK_VERSION } from 'ui/documentation_links';
-import { PLUGIN, INTEGRATED_SOLUTIONS } from '../../../../common/constants';
-import { BootstrapUptimeApp, UMFrameworkAdapter } from '../../lib';
-import { CreateGraphQLClient } from './framework_adapter_types';
-import { renderUptimeKibanaGlobalHelp } from './kibana_global_help';
-import { getTelemetryMonitorPageLogger, getTelemetryOverviewPageLogger } from '../telemetry';
-import { getIntegratedAppAvailability } from './capabilities_adapter';
-
-export class UMKibanaFrameworkAdapter implements UMFrameworkAdapter {
-  private uiRoutes: any;
-  private xsrfHeader: string;
-  private uriPath: string;
-
-  constructor(uiRoutes: any) {
-    this.uiRoutes = uiRoutes;
-    this.xsrfHeader = chrome.getXsrfToken();
-    this.uriPath = `${chrome.getBasePath()}/api/uptime/graphql`;
-  }
-
-  /**
-   * This function will acquire all the existing data from Kibana
-   * services and persisted state expected by the plugin's props
-   * interface. It then renders the plugin.
-   */
-  public render = (
-    renderComponent: BootstrapUptimeApp,
-    createGraphQLClient: CreateGraphQLClient
-  ) => {
-    const route = {
-      controllerAs: 'uptime',
-      // @ts-ignore angular
-      controller: ($scope, $route, config, $location, $window) => {
-        const graphQLClient = createGraphQLClient(this.uriPath, this.xsrfHeader);
-        $scope.$$postDigest(() => {
-          const elem = document.getElementById('uptimeReactRoot');
-
-          // set up route with current base path
-          const basePath = chrome.getBasePath();
-          const routerBasename = basePath.endsWith('/')
-            ? `${basePath}/${PLUGIN.ROUTER_BASE_NAME}`
-            : basePath + PLUGIN.ROUTER_BASE_NAME;
-
-          /**
-           * TODO: this is a redirect hack to deal with a problem that largely
-           * in testing but rarely occurs in the real world, where the specified
-           * URL contains `.../app/uptime{SOME_URL_PARAM_TEXT}#` instead of
-           * a path like `.../app/uptime#{SOME_URL_PARAM_TEXT}`.
-           *
-           * This redirect will almost never be triggered in practice, but it makes more
-           * sense to include it here rather than altering the existing testing
-           * infrastructure underlying the rest of Kibana.
-           *
-           * We welcome a more permanent solution that will result in the deletion of the
-           * block below.
-           */
-          if ($location.absUrl().indexOf(PLUGIN.ROUTER_BASE_NAME) === -1) {
-            $window.location.replace(routerBasename);
-          }
-
-          // determine whether dark mode is enabled
-          const darkMode = config.get('theme:darkMode', false) || false;
-
-          /**
-           * We pass this global help setup as a prop to the app, because for
-           * localization it's necessary to have the provider mounted before
-           * we can render our help links, as they rely on i18n.
-           */
-          const renderGlobalHelpControls = () =>
-            // render Uptime feedback link in global help menu
-            chrome.helpExtension.set((element: HTMLDivElement) => {
-              ReactDOM.render(
-                renderUptimeKibanaGlobalHelp(ELASTIC_WEBSITE_URL, DOC_LINK_VERSION),
-                element
-              );
-              return () => ReactDOM.unmountComponentAtNode(element);
-            });
-
-          /**
-           * These values will let Uptime know if the integrated solutions
-           * are available. If any/all of them are unavaialble, we should not show
-           * links/integrations to those apps.
-           */
-          const {
-            apm: isApmAvailable,
-            infrastructure: isInfraAvailable,
-            logs: isLogsAvailable,
-          } = getIntegratedAppAvailability(INTEGRATED_SOLUTIONS);
-
-          ReactDOM.render(
-            renderComponent({
-              basePath,
-              client: graphQLClient,
-              darkMode,
-              isApmAvailable,
-              isInfraAvailable,
-              isLogsAvailable,
-              logMonitorPageLoad: getTelemetryMonitorPageLogger(this.xsrfHeader, basePath),
-              logOverviewPageLoad: getTelemetryOverviewPageLogger(this.xsrfHeader, basePath),
-              renderGlobalHelpControls,
-              routerBasename,
-              setBadge: chrome.badge.set,
-              setBreadcrumbs: chrome.breadcrumbs.set,
-            }),
-            elem
-          );
-          this.manageAngularLifecycle($scope, $route, elem);
-        });
-      },
-      template:
-        '<uptime-app section="kibana" id="uptimeReactRoot" class="app-wrapper-panel"></uptime-app>',
-    };
-    this.uiRoutes.enable();
-    // TODO: hack to refer all routes to same endpoint, use a more proper way of achieving this
-    this.uiRoutes.otherwise(route);
-  };
-
-  // @ts-ignore angular params
-  private manageAngularLifecycle = ($scope, $route, elem) => {
-    const lastRoute = $route.current;
-    const deregister = $scope.$on('$locationChangeSuccess', () => {
-      const currentRoute = $route.current;
-      if (lastRoute.$$route && lastRoute.$$route.template === currentRoute.$$route.template) {
-        $route.current = lastRoute;
-      }
-    });
-    $scope.$on('$destroy', () => {
-      deregister();
-      unmountComponentAtNode(elem);
-    });
-  };
-}
diff --git a/x-pack/legacy/plugins/uptime/public/lib/adapters/framework/new_platform_adapter.tsx b/x-pack/legacy/plugins/uptime/public/lib/adapters/framework/new_platform_adapter.tsx
new file mode 100644
index 00000000000000..e35d8e93ca4a72
--- /dev/null
+++ b/x-pack/legacy/plugins/uptime/public/lib/adapters/framework/new_platform_adapter.tsx
@@ -0,0 +1,76 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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 { ChromeBreadcrumb, CoreStart } from 'src/core/public';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { get } from 'lodash';
+import { AutocompleteProviderRegister } from 'src/plugins/data/public';
+import { CreateGraphQLClient } from './framework_adapter_types';
+import { UptimeApp, UptimeAppProps } from '../../../uptime_app';
+import { getIntegratedAppAvailability } from './capabilities_adapter';
+import { INTEGRATED_SOLUTIONS, PLUGIN } from '../../../../common/constants';
+import { getTelemetryMonitorPageLogger, getTelemetryOverviewPageLogger } from '../telemetry';
+import { renderUptimeKibanaGlobalHelp } from './kibana_global_help';
+import { UMFrameworkAdapter, BootstrapUptimeApp } from '../../lib';
+import { createApolloClient } from './apollo_client_adapter';
+
+export const getKibanaFrameworkAdapter = (
+  core: CoreStart,
+  autocomplete: Pick<AutocompleteProviderRegister, 'getProvider'>
+): UMFrameworkAdapter => {
+  const {
+    application: { capabilities },
+    chrome: { setBadge, setHelpExtension },
+    docLinks: { DOC_LINK_VERSION, ELASTIC_WEBSITE_URL },
+    http: { basePath },
+    i18n,
+  } = core;
+  let breadcrumbs: ChromeBreadcrumb[] = [];
+  core.chrome.getBreadcrumbs$().subscribe((nextBreadcrumbs?: ChromeBreadcrumb[]) => {
+    breadcrumbs = nextBreadcrumbs || [];
+  });
+  const { apm, infrastructure, logs } = getIntegratedAppAvailability(
+    capabilities,
+    INTEGRATED_SOLUTIONS
+  );
+  const canSave = get(capabilities, 'uptime.save', false);
+  const props: UptimeAppProps = {
+    basePath: basePath.get(),
+    canSave,
+    client: createApolloClient(`${basePath.get()}/api/uptime/graphql`, 'true'),
+    darkMode: core.uiSettings.get('theme:darkMode'),
+    autocomplete,
+    i18n,
+    isApmAvailable: apm,
+    isInfraAvailable: infrastructure,
+    isLogsAvailable: logs,
+    kibanaBreadcrumbs: breadcrumbs,
+    logMonitorPageLoad: getTelemetryMonitorPageLogger('true', basePath.get()),
+    logOverviewPageLoad: getTelemetryOverviewPageLogger('true', basePath.get()),
+    renderGlobalHelpControls: () =>
+      setHelpExtension((element: HTMLElement) => {
+        ReactDOM.render(
+          renderUptimeKibanaGlobalHelp(ELASTIC_WEBSITE_URL, DOC_LINK_VERSION),
+          element
+        );
+        return () => ReactDOM.unmountComponentAtNode(element);
+      }),
+    routerBasename: basePath.prepend(PLUGIN.ROUTER_BASE_NAME),
+    setBadge,
+    setBreadcrumbs: core.chrome.setBreadcrumbs,
+  };
+
+  return {
+    // TODO: these parameters satisfy the interface but are no longer needed
+    render: async (createComponent: BootstrapUptimeApp, cgc: CreateGraphQLClient) => {
+      const node = await document.getElementById('react-uptime-root');
+      if (node) {
+        ReactDOM.render(<UptimeApp {...props} />, node);
+      }
+    },
+  };
+};
diff --git a/x-pack/legacy/plugins/uptime/public/lib/compose/kibana_compose.ts b/x-pack/legacy/plugins/uptime/public/lib/compose/kibana_compose.ts
deleted file mode 100644
index 759c161d32cdd7..00000000000000
--- a/x-pack/legacy/plugins/uptime/public/lib/compose/kibana_compose.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import uiRoutes from 'ui/routes';
-import { UMKibanaFrameworkAdapter } from '../adapters/framework/kibana_framework_adapter';
-import { UMFrontendLibs } from '../lib';
-
-export function compose(): UMFrontendLibs {
-  const libs: UMFrontendLibs = {
-    framework: new UMKibanaFrameworkAdapter(uiRoutes),
-  };
-
-  return libs;
-}
diff --git a/x-pack/legacy/plugins/uptime/public/lib/helper/url_params/__tests__/__snapshots__/get_supported_url_params.test.ts.snap b/x-pack/legacy/plugins/uptime/public/lib/helper/url_params/__tests__/__snapshots__/get_supported_url_params.test.ts.snap
index 9e4d67b2f70a9e..26a408c63419fe 100644
--- a/x-pack/legacy/plugins/uptime/public/lib/helper/url_params/__tests__/__snapshots__/get_supported_url_params.test.ts.snap
+++ b/x-pack/legacy/plugins/uptime/public/lib/helper/url_params/__tests__/__snapshots__/get_supported_url_params.test.ts.snap
@@ -10,7 +10,7 @@ Object {
   "dateRangeStart": "now-15m",
   "filters": "",
   "search": "",
-  "selectedPingStatus": "down",
+  "selectedPingStatus": "",
   "statusFilter": "",
 }
 `;
@@ -25,7 +25,7 @@ Object {
   "dateRangeStart": "now-15m",
   "filters": "",
   "search": "",
-  "selectedPingStatus": "down",
+  "selectedPingStatus": "",
   "statusFilter": "",
 }
 `;
@@ -55,7 +55,7 @@ Object {
   "dateRangeStart": "now-15m",
   "filters": "",
   "search": "",
-  "selectedPingStatus": "down",
+  "selectedPingStatus": "",
   "statusFilter": "",
 }
 `;
@@ -70,7 +70,7 @@ Object {
   "dateRangeStart": "now-18d",
   "filters": "",
   "search": "",
-  "selectedPingStatus": "down",
+  "selectedPingStatus": "",
   "statusFilter": "",
 }
 `;
diff --git a/x-pack/legacy/plugins/uptime/public/lib/lib.ts b/x-pack/legacy/plugins/uptime/public/lib/lib.ts
index 65a7f18711fd0f..0a744bff815c78 100644
--- a/x-pack/legacy/plugins/uptime/public/lib/lib.ts
+++ b/x-pack/legacy/plugins/uptime/public/lib/lib.ts
@@ -7,8 +7,8 @@
 import { NormalizedCacheObject } from 'apollo-cache-inmemory';
 import ApolloClient from 'apollo-client';
 import React from 'react';
+import { ChromeBreadcrumb } from 'src/core/public';
 import { UMBadge } from '../badge';
-import { UMBreadcrumb } from '../breadcrumbs';
 import { UptimeAppProps } from '../uptime_app';
 import { CreateGraphQLClient } from './adapters/framework/framework_adapter_types';
 
@@ -16,7 +16,7 @@ export interface UMFrontendLibs {
   framework: UMFrameworkAdapter;
 }
 
-export type UMUpdateBreadcrumbs = (breadcrumbs: UMBreadcrumb[]) => void;
+export type UMUpdateBreadcrumbs = (breadcrumbs: ChromeBreadcrumb[]) => void;
 
 export type UMUpdateBadge = (badge: UMBadge) => void;
 
diff --git a/x-pack/legacy/plugins/uptime/public/pages/overview.tsx b/x-pack/legacy/plugins/uptime/public/pages/overview.tsx
index 86bd98195ca886..7c1b81b0e15c86 100644
--- a/x-pack/legacy/plugins/uptime/public/pages/overview.tsx
+++ b/x-pack/legacy/plugins/uptime/public/pages/overview.tsx
@@ -9,6 +9,7 @@ import { i18n } from '@kbn/i18n';
 import { fromKueryExpression, toElasticsearchQuery } from '@kbn/es-query';
 import React, { Fragment, useContext, useEffect, useState } from 'react';
 import styled from 'styled-components';
+import { AutocompleteProviderRegister } from 'src/plugins/data/public';
 import { getOverviewPageBreadcrumbs } from '../breadcrumbs';
 import {
   EmptyState,
@@ -29,12 +30,13 @@ import { combineFiltersAndUserSearch, stringifyKueries, toStaticIndexPattern } f
 
 interface OverviewPageProps {
   basePath: string;
-  logOverviewPageLoad: () => void;
+  autocomplete: Pick<AutocompleteProviderRegister, 'getProvider'>;
   history: any;
   location: {
     pathname: string;
     search: string;
   };
+  logOverviewPageLoad: () => void;
   setBreadcrumbs: UMUpdateBreadcrumbs;
 }
 
@@ -54,7 +56,12 @@ const EuiFlexItemStyled = styled(EuiFlexItem)`
   }
 `;
 
-export const OverviewPage = ({ basePath, logOverviewPageLoad, setBreadcrumbs }: Props) => {
+export const OverviewPage = ({
+  basePath,
+  autocomplete,
+  logOverviewPageLoad,
+  setBreadcrumbs,
+}: Props) => {
   const { colors, setHeadingText } = useContext(UptimeSettingsContext);
   const [getUrlParams, updateUrl] = useUrlParams();
   const { absoluteDateRangeStart, absoluteDateRangeEnd, ...params } = getUrlParams();
@@ -129,7 +136,7 @@ export const OverviewPage = ({ basePath, logOverviewPageLoad, setBreadcrumbs }:
       <EmptyState basePath={basePath} implementsCustomErrorState={true} variables={{}}>
         <EuiFlexGroup gutterSize="xs" wrap responsive>
           <EuiFlexItem grow={1} style={{ flexBasis: 500 }}>
-            <KueryBar />
+            <KueryBar autocomplete={autocomplete} />
           </EuiFlexItem>
           <EuiFlexItemStyled grow={true}>
             <FilterGroup
@@ -153,8 +160,6 @@ export const OverviewPage = ({ basePath, logOverviewPageLoad, setBreadcrumbs }:
             <SnapshotHistogram
               absoluteStartDate={absoluteDateRangeStart}
               absoluteEndDate={absoluteDateRangeEnd}
-              successColor={colors.success}
-              dangerColor={colors.danger}
               variables={sharedProps}
               height="120px"
             />
diff --git a/x-pack/legacy/plugins/uptime/public/uptime_app.tsx b/x-pack/legacy/plugins/uptime/public/uptime_app.tsx
index 4255fdf99aa5cc..9a9c1737261159 100644
--- a/x-pack/legacy/plugins/uptime/public/uptime_app.tsx
+++ b/x-pack/legacy/plugins/uptime/public/uptime_app.tsx
@@ -13,8 +13,8 @@ import React, { useEffect, useState } from 'react';
 import { ApolloProvider } from 'react-apollo';
 import { Provider as ReduxProvider } from 'react-redux';
 import { BrowserRouter as Router, Route, RouteComponentProps, Switch } from 'react-router-dom';
-import { capabilities } from 'ui/capabilities';
-import { I18nContext } from 'ui/i18n';
+import { I18nStart, ChromeBreadcrumb } from 'src/core/public';
+import { AutocompleteProviderRegister } from 'src/plugins/data/public';
 import { UMGraphQLClient, UMUpdateBreadcrumbs, UMUpdateBadge } from './lib/lib';
 import { MonitorPage, OverviewPage, NotFoundPage } from './pages';
 import { UptimeRefreshContext, UptimeSettingsContext, UMSettingsContextValues } from './contexts';
@@ -26,6 +26,7 @@ import { store } from './state';
 export interface UptimeAppColors {
   danger: string;
   success: string;
+  gray: string;
   range: string;
   mean: string;
   warning: string;
@@ -33,11 +34,15 @@ export interface UptimeAppColors {
 
 export interface UptimeAppProps {
   basePath: string;
+  canSave: boolean;
   client: UMGraphQLClient;
   darkMode: boolean;
+  autocomplete: Pick<AutocompleteProviderRegister, 'getProvider'>;
+  i18n: I18nStart;
   isApmAvailable: boolean;
   isInfraAvailable: boolean;
   isLogsAvailable: boolean;
+  kibanaBreadcrumbs: ChromeBreadcrumb[];
   logMonitorPageLoad: () => void;
   logOverviewPageLoad: () => void;
   routerBasename: string;
@@ -49,8 +54,11 @@ export interface UptimeAppProps {
 const Application = (props: UptimeAppProps) => {
   const {
     basePath,
+    canSave,
     client,
     darkMode,
+    autocomplete,
+    i18n: i18nCore,
     isApmAvailable,
     isInfraAvailable,
     isLogsAvailable,
@@ -67,6 +75,7 @@ const Application = (props: UptimeAppProps) => {
     colors = {
       danger: euiDarkVars.euiColorDanger,
       mean: euiDarkVars.euiColorPrimary,
+      gray: euiDarkVars.euiColorLightShade,
       range: euiDarkVars.euiFocusBackgroundColor,
       success: euiDarkVars.euiColorSuccess,
       warning: euiDarkVars.euiColorWarning,
@@ -75,6 +84,7 @@ const Application = (props: UptimeAppProps) => {
     colors = {
       danger: euiLightVars.euiColorDanger,
       mean: euiLightVars.euiColorPrimary,
+      gray: euiLightVars.euiColorLightShade,
       range: euiLightVars.euiFocusBackgroundColor,
       success: euiLightVars.euiColorSuccess,
       warning: euiLightVars.euiColorWarning,
@@ -86,7 +96,7 @@ const Application = (props: UptimeAppProps) => {
   useEffect(() => {
     renderGlobalHelpControls();
     setBadge(
-      !capabilities.get().uptime.save
+      !canSave
         ? {
             text: i18n.translate('xpack.uptime.badge.readOnly.text', {
               defaultMessage: 'Read only',
@@ -137,7 +147,7 @@ const Application = (props: UptimeAppProps) => {
   };
 
   return (
-    <I18nContext>
+    <i18nCore.Context>
       <ReduxProvider store={store}>
         <Router basename={routerBasename}>
           <Route
@@ -171,6 +181,7 @@ const Application = (props: UptimeAppProps) => {
                               render={routerProps => (
                                 <OverviewPage
                                   basePath={basePath}
+                                  autocomplete={autocomplete}
                                   logOverviewPageLoad={logOverviewPageLoad}
                                   setBreadcrumbs={setBreadcrumbs}
                                   {...routerProps}
@@ -200,7 +211,7 @@ const Application = (props: UptimeAppProps) => {
           />
         </Router>
       </ReduxProvider>
-    </I18nContext>
+    </i18nCore.Context>
   );
 };
 
diff --git a/x-pack/legacy/plugins/uptime/server/lib/adapters/monitor_states/__tests__/elasticsearch_monitor_states_adapter.test.ts b/x-pack/legacy/plugins/uptime/server/lib/adapters/monitor_states/__tests__/elasticsearch_monitor_states_adapter.test.ts
index 67a66362e4cc50..1a90699090b29f 100644
--- a/x-pack/legacy/plugins/uptime/server/lib/adapters/monitor_states/__tests__/elasticsearch_monitor_states_adapter.test.ts
+++ b/x-pack/legacy/plugins/uptime/server/lib/adapters/monitor_states/__tests__/elasticsearch_monitor_states_adapter.test.ts
@@ -8,6 +8,8 @@ import { DatabaseAdapter } from '../../database';
 import exampleFilter from './example_filter.json';
 import monitorState from './monitor_states_docs.json';
 import { ElasticsearchMonitorStatesAdapter } from '../elasticsearch_monitor_states_adapter';
+import { get, set } from 'lodash';
+import { assertCloseTo } from '../../../helper';
 
 describe('ElasticsearchMonitorStatesAdapter', () => {
   let database: DatabaseAdapter;
@@ -37,6 +39,7 @@ describe('ElasticsearchMonitorStatesAdapter', () => {
   });
 
   it('applies an appropriate filter section to the query based on filters', async () => {
+    expect.assertions(3);
     const adapter = new ElasticsearchMonitorStatesAdapter(database);
     await adapter.legacyGetMonitorStates(
       {},
@@ -45,6 +48,28 @@ describe('ElasticsearchMonitorStatesAdapter', () => {
       JSON.stringify(exampleFilter),
       'down'
     );
+    expect(searchMock).toHaveBeenCalledTimes(3);
+    const fixedInterval = parseInt(
+      get(
+        searchMock.mock.calls[2][1],
+        'body.aggs.by_id.aggs.histogram.date_histogram.fixed_interval',
+        ''
+      ).split('ms')[0],
+      10
+    );
+    expect(fixedInterval).not.toBeNaN();
+    /**
+     * This value can sometimes be off by 1 as a result of fuzzy calculation.
+     *
+     * It had no implications in practice, but from a test standpoint can cause flaky
+     * snapshot failures.
+     */
+    assertCloseTo(fixedInterval, 36000, 100);
+    set(
+      searchMock.mock.calls[2][1],
+      'body.aggs.by_id.aggs.histogram.date_histogram.fixed_interval',
+      '36000ms'
+    );
     expect(searchMock.mock.calls).toMatchSnapshot();
   });
 });
diff --git a/x-pack/legacy/plugins/uptime/server/lib/adapters/monitors/__tests__/elasticsearch_monitors_adapter.test.ts b/x-pack/legacy/plugins/uptime/server/lib/adapters/monitors/__tests__/elasticsearch_monitors_adapter.test.ts
index 9fce667adf613c..b21fb982bfb3bb 100644
--- a/x-pack/legacy/plugins/uptime/server/lib/adapters/monitors/__tests__/elasticsearch_monitors_adapter.test.ts
+++ b/x-pack/legacy/plugins/uptime/server/lib/adapters/monitors/__tests__/elasticsearch_monitors_adapter.test.ts
@@ -8,12 +8,7 @@ import { get, set } from 'lodash';
 import { ElasticsearchMonitorsAdapter } from '../elasticsearch_monitors_adapter';
 import { CountParams, CountResponse } from 'elasticsearch';
 import mockChartsData from './monitor_charts_mock.json';
-
-const assertCloseTo = (actual: number, expected: number, precision: number) => {
-  if (Math.abs(expected - actual) > precision) {
-    throw new Error(`expected [${actual}] to be within ${precision} of ${actual}`);
-  }
-};
+import { assertCloseTo } from '../../../helper';
 
 // FIXME: there are many untested functions in this adapter. They should be tested.
 describe('ElasticsearchMonitorsAdapter', () => {
diff --git a/x-pack/legacy/plugins/uptime/server/lib/helper/__test__/__snapshots__/assert_close_to.test.ts.snap b/x-pack/legacy/plugins/uptime/server/lib/helper/__test__/__snapshots__/assert_close_to.test.ts.snap
new file mode 100644
index 00000000000000..7dfb8c88be1ca4
--- /dev/null
+++ b/x-pack/legacy/plugins/uptime/server/lib/helper/__test__/__snapshots__/assert_close_to.test.ts.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`assertCloseTo throws an error when expected value is outside of precision range 1`] = `"expected [12500] to be within 100 of 10000"`;
diff --git a/x-pack/legacy/plugins/uptime/server/lib/helper/__test__/assert_close_to.test.ts b/x-pack/legacy/plugins/uptime/server/lib/helper/__test__/assert_close_to.test.ts
new file mode 100644
index 00000000000000..6ccedcf7153dc4
--- /dev/null
+++ b/x-pack/legacy/plugins/uptime/server/lib/helper/__test__/assert_close_to.test.ts
@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { assertCloseTo } from '../assert_close_to';
+
+describe('assertCloseTo', () => {
+  it('does not throw an error when expected value is correct', () => {
+    assertCloseTo(10000, 10001, 100);
+  });
+
+  it('does not throw an error when expected value is under actual, but within precision threshold', () => {
+    assertCloseTo(10000, 9875, 300);
+  });
+
+  it('throws an error when expected value is outside of precision range', () => {
+    expect(() => assertCloseTo(10000, 12500, 100)).toThrowErrorMatchingSnapshot();
+  });
+});
diff --git a/x-pack/legacy/plugins/uptime/server/lib/helper/assert_close_to.ts b/x-pack/legacy/plugins/uptime/server/lib/helper/assert_close_to.ts
new file mode 100644
index 00000000000000..13b6f3688809c5
--- /dev/null
+++ b/x-pack/legacy/plugins/uptime/server/lib/helper/assert_close_to.ts
@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export const assertCloseTo = (actual: number, expected: number, precision: number) => {
+  if (Math.abs(expected - actual) > precision) {
+    throw new Error(`expected [${expected}] to be within ${precision} of ${actual}`);
+  }
+};
diff --git a/x-pack/legacy/plugins/uptime/server/lib/helper/index.ts b/x-pack/legacy/plugins/uptime/server/lib/helper/index.ts
index 19d5a3b00237df..a2a72825c6b98d 100644
--- a/x-pack/legacy/plugins/uptime/server/lib/helper/index.ts
+++ b/x-pack/legacy/plugins/uptime/server/lib/helper/index.ts
@@ -9,3 +9,4 @@ export { formatEsBucketsForHistogram } from './format_es_buckets_for_histogram';
 export { getFilterClause } from './get_filter_clause';
 export { getHistogramInterval } from './get_histogram_interval';
 export { parseFilterQuery } from './parse_filter_query';
+export { assertCloseTo } from './assert_close_to';
diff --git a/x-pack/package.json b/x-pack/package.json
index ac83bb3229c79f..5a27764bdf9eea 100644
--- a/x-pack/package.json
+++ b/x-pack/package.json
@@ -27,6 +27,7 @@
     "**/@types/node": "10.12.27"
   },
   "devDependencies": {
+    "@cypress/webpack-preprocessor": "^4.1.0",
     "@kbn/dev-utils": "1.0.0",
     "@kbn/es": "1.0.0",
     "@kbn/expect": "1.0.0",
@@ -135,7 +136,7 @@
     "graphql-codegen-typescript-resolvers-template": "^0.13.0",
     "graphql-codegen-typescript-template": "^0.13.0",
     "gulp": "3.9.1",
-    "gulp-mocha": "2.2.0",
+    "gulp-mocha": "^7.0.1",
     "gulp-multi-process": "1.3.1",
     "hapi": "^17.5.3",
     "jest": "^24.9.0",
@@ -143,10 +144,10 @@
     "jest-styled-components": "^6.3.3",
     "jsdom": "^12.2.0",
     "madge": "3.4.4",
-    "mocha": "3.5.3",
+    "mocha": "6.2.1",
     "mocha-junit-reporter": "^1.23.1",
     "mocha-multi-reporters": "^1.1.7",
-    "mochawesome": "^4.0.1",
+    "mochawesome": "^4.1.0",
     "mochawesome-merge": "^2.0.1",
     "mochawesome-report-generator": "^4.0.1",
     "mustache": "^2.3.0",
@@ -184,7 +185,7 @@
     "@babel/runtime": "^7.5.5",
     "@elastic/ctags-langserver": "^0.1.10",
     "@elastic/datemath": "5.0.2",
-    "@elastic/eui": "14.3.0",
+    "@elastic/eui": "14.4.0",
     "@elastic/javascript-typescript-langserver": "^0.3.3",
     "@elastic/lsp-extension": "^0.1.2",
     "@elastic/maki": "6.1.0",
@@ -240,6 +241,7 @@
     "file-type": "^10.9.0",
     "font-awesome": "4.7.0",
     "formsy-react": "^1.1.5",
+    "fp-ts": "^2.0.5",
     "geojson-rewind": "^0.3.1",
     "get-port": "4.2.0",
     "getos": "^3.1.0",
@@ -261,6 +263,7 @@
     "immer": "^1.5.0",
     "inline-style": "^2.0.0",
     "intl": "^1.2.5",
+    "io-ts": "^2.0.1",
     "isbinaryfile": "4.0.2",
     "isomorphic-git": "0.55.5",
     "joi": "^13.5.2",
diff --git a/x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/kibana.json b/x-pack/plugins/advanced_ui_actions/kibana.json
similarity index 68%
rename from x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/kibana.json
rename to x-pack/plugins/advanced_ui_actions/kibana.json
index fd2c7ad1130c1f..515c4749de2128 100644
--- a/x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/kibana.json
+++ b/x-pack/plugins/advanced_ui_actions/kibana.json
@@ -1,9 +1,9 @@
 {
-  "id": "advanced_ui_actions",
+  "id": "advancedUiActions",
   "version": "kibana",
   "requiredPlugins": [
     "embeddable",
-    "ui_actions"
+    "uiActions"
   ],
   "server": false,
   "ui": true
diff --git a/x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/can_inherit_time_range.test.ts b/x-pack/plugins/advanced_ui_actions/public/can_inherit_time_range.test.ts
similarity index 95%
rename from x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/can_inherit_time_range.test.ts
rename to x-pack/plugins/advanced_ui_actions/public/can_inherit_time_range.test.ts
index a0a550da1d24c9..03c096c8c178f4 100644
--- a/x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/can_inherit_time_range.test.ts
+++ b/x-pack/plugins/advanced_ui_actions/public/can_inherit_time_range.test.ts
@@ -8,7 +8,7 @@ import { canInheritTimeRange } from './can_inherit_time_range';
 import {
   HelloWorldEmbeddable,
   HelloWorldContainer,
-} from '../../../../../../../src/plugins/embeddable/public/lib/test_samples';
+} from '../../../../src/plugins/embeddable/public/lib/test_samples';
 /** eslint-enable */
 import { TimeRangeEmbeddable, TimeRangeContainer } from './test_helpers';
 
diff --git a/x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/can_inherit_time_range.ts b/x-pack/plugins/advanced_ui_actions/public/can_inherit_time_range.ts
similarity index 80%
rename from x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/can_inherit_time_range.ts
rename to x-pack/plugins/advanced_ui_actions/public/can_inherit_time_range.ts
index 09d8d26998e95e..2294c9be40e17d 100644
--- a/x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/can_inherit_time_range.ts
+++ b/x-pack/plugins/advanced_ui_actions/public/can_inherit_time_range.ts
@@ -4,8 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Embeddable, IContainer, ContainerInput } from 'src/plugins/embeddable/public';
-import { TimeRange } from '../../../../../../../src/plugins/data/public';
+import { Embeddable, IContainer, ContainerInput } from '../../../../src/plugins/embeddable/public';
+import { TimeRange } from '../../../../src/plugins/data/public';
 import { TimeRangeInput } from './custom_time_range_action';
 
 interface ContainerTimeRangeInput extends ContainerInput<TimeRangeInput> {
diff --git a/x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/custom_time_range_action.test.ts b/x-pack/plugins/advanced_ui_actions/public/custom_time_range_action.test.ts
similarity index 97%
rename from x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/custom_time_range_action.test.ts
rename to x-pack/plugins/advanced_ui_actions/public/custom_time_range_action.test.ts
index 1a5b26134ff5a3..bbdcf99495288b 100644
--- a/x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/custom_time_range_action.test.ts
+++ b/x-pack/plugins/advanced_ui_actions/public/custom_time_range_action.test.ts
@@ -10,18 +10,18 @@ import { skip } from 'rxjs/operators';
 import * as Rx from 'rxjs';
 import { mount } from 'enzyme';
 
-import { EmbeddableFactory } from '../../../../../../../src/plugins/embeddable/public';
+import { EmbeddableFactory } from '../../../../src/plugins/embeddable/public';
 import { TimeRangeEmbeddable, TimeRangeContainer, TIME_RANGE_EMBEDDABLE } from './test_helpers';
 import { TimeRangeEmbeddableFactory } from './test_helpers/time_range_embeddable_factory';
 import { CustomTimeRangeAction } from './custom_time_range_action';
-import { coreMock } from '../../../../../../../src/core/public/mocks';
+import { coreMock } from '../../../../src/core/public/mocks';
 /* eslint-disable */
 import {
   HelloWorldEmbeddableFactory,
   HELLO_WORLD_EMBEDDABLE_TYPE,
   HelloWorldEmbeddable,
   HelloWorldContainer,
-} from '../../../../../../../src/plugins/embeddable/public/lib/test_samples';
+} from '../../../../src/plugins/embeddable/public/lib/test_samples';
 /* eslint-enable */
 
 import { nextTick } from 'test_utils/enzyme_helpers';
diff --git a/x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/custom_time_range_action.tsx b/x-pack/plugins/advanced_ui_actions/public/custom_time_range_action.tsx
similarity index 84%
rename from x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/custom_time_range_action.tsx
rename to x-pack/plugins/advanced_ui_actions/public/custom_time_range_action.tsx
index a9ab5edea4a25c..ca11fe91abdbf7 100644
--- a/x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/custom_time_range_action.tsx
+++ b/x-pack/plugins/advanced_ui_actions/public/custom_time_range_action.tsx
@@ -7,19 +7,13 @@
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { IEmbeddable, Embeddable, EmbeddableInput } from 'src/plugins/embeddable/public';
-import {
-  IAction,
-  IncompatibleActionError,
-} from '../../../../../../../src/plugins/ui_actions/public';
-import { TimeRange } from '../../../../../../../src/plugins/data/public';
-import { SEARCH_EMBEDDABLE_TYPE } from '../../../../../../../src/legacy/core_plugins/kibana/public/discover/embeddable/search_embeddable';
-import { VisualizeEmbeddable } from '../../../../../../../src/legacy/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable';
-import { VISUALIZE_EMBEDDABLE_TYPE } from '../../../../../../../src/legacy/core_plugins/kibana/public/visualize/embeddable/constants';
-
+import { IAction, IncompatibleActionError } from '../../../../src/plugins/ui_actions/public';
+import { TimeRange } from '../../../../src/plugins/data/public';
 import { CustomizeTimeRangeModal } from './customize_time_range_modal';
 import { OpenModal, CommonlyUsedRange } from './types';
 
 const CUSTOM_TIME_RANGE = 'CUSTOM_TIME_RANGE';
+const SEARCH_EMBEDDABLE_TYPE = 'search';
 
 export interface TimeRangeInput extends EmbeddableInput {
   timeRange: TimeRange;
@@ -31,6 +25,9 @@ function hasTimeRange(
   return (embeddable as Embeddable<TimeRangeInput>).getInput().timeRange !== undefined;
 }
 
+const VISUALIZE_EMBEDDABLE_TYPE = 'visualization';
+type VisualizeEmbeddable = any;
+
 function isVisualizeEmbeddable(
   embeddable: IEmbeddable | VisualizeEmbeddable
 ): embeddable is VisualizeEmbeddable {
diff --git a/x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/custom_time_range_badge.test.ts b/x-pack/plugins/advanced_ui_actions/public/custom_time_range_badge.test.ts
similarity index 97%
rename from x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/custom_time_range_badge.test.ts
rename to x-pack/plugins/advanced_ui_actions/public/custom_time_range_badge.test.ts
index 9b13e5b03cf10d..c6046c02f0833d 100644
--- a/x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/custom_time_range_badge.test.ts
+++ b/x-pack/plugins/advanced_ui_actions/public/custom_time_range_badge.test.ts
@@ -9,12 +9,11 @@ import { findTestSubject } from '@elastic/eui/lib/test';
 import { skip } from 'rxjs/operators';
 import * as Rx from 'rxjs';
 import { mount } from 'enzyme';
-
-import { EmbeddableFactory } from '../../../../../../../src/plugins/embeddable/public';
+import { EmbeddableFactory } from '../../../../src/plugins/embeddable/public';
 import { TimeRangeEmbeddable, TimeRangeContainer, TIME_RANGE_EMBEDDABLE } from './test_helpers';
 import { TimeRangeEmbeddableFactory } from './test_helpers/time_range_embeddable_factory';
 import { CustomTimeRangeBadge } from './custom_time_range_badge';
-import { coreMock } from '../../../../../../../src/core/public/mocks';
+import { coreMock } from '../../../../src/core/public/mocks';
 import { ReactElement } from 'react';
 import { nextTick } from 'test_utils/enzyme_helpers';
 
diff --git a/x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/custom_time_range_badge.tsx b/x-pack/plugins/advanced_ui_actions/public/custom_time_range_badge.tsx
similarity index 93%
rename from x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/custom_time_range_badge.tsx
rename to x-pack/plugins/advanced_ui_actions/public/custom_time_range_badge.tsx
index 13fdbb17e1070f..78fe8e01e599e0 100644
--- a/x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/custom_time_range_badge.tsx
+++ b/x-pack/plugins/advanced_ui_actions/public/custom_time_range_badge.tsx
@@ -6,14 +6,9 @@
 
 import React from 'react';
 import { prettyDuration, commonDurationRanges } from '@elastic/eui';
-
 import { IEmbeddable, Embeddable, EmbeddableInput } from 'src/plugins/embeddable/public';
-import {
-  IAction,
-  IncompatibleActionError,
-} from '../../../../../../../src/plugins/ui_actions/public';
-import { TimeRange } from '../../../../../../../src/plugins/data/public';
-
+import { IAction, IncompatibleActionError } from '../../../../src/plugins/ui_actions/public';
+import { TimeRange } from '../../../../src/plugins/data/public';
 import { CustomizeTimeRangeModal } from './customize_time_range_modal';
 import { doesInheritTimeRange } from './does_inherit_time_range';
 import { OpenModal, CommonlyUsedRange } from './types';
diff --git a/x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/customize_time_range_modal.tsx b/x-pack/plugins/advanced_ui_actions/public/customize_time_range_modal.tsx
similarity index 97%
rename from x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/customize_time_range_modal.tsx
rename to x-pack/plugins/advanced_ui_actions/public/customize_time_range_modal.tsx
index 4dabf28538668e..90393f9f4ff6f1 100644
--- a/x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/customize_time_range_modal.tsx
+++ b/x-pack/plugins/advanced_ui_actions/public/customize_time_range_modal.tsx
@@ -19,8 +19,8 @@ import {
   EuiFlexItem,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { Embeddable, IContainer, ContainerInput } from 'src/plugins/embeddable/public';
-import { TimeRange } from '../../../../../../../src/plugins/data/public';
+import { Embeddable, IContainer, ContainerInput } from '../../../../src/plugins/embeddable/public';
+import { TimeRange } from '../../../../src/plugins/data/public';
 import { TimeRangeInput } from './custom_time_range_action';
 import { doesInheritTimeRange } from './does_inherit_time_range';
 import { CommonlyUsedRange } from './types';
diff --git a/x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/does_inherit_time_range.ts b/x-pack/plugins/advanced_ui_actions/public/does_inherit_time_range.ts
similarity index 90%
rename from x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/does_inherit_time_range.ts
rename to x-pack/plugins/advanced_ui_actions/public/does_inherit_time_range.ts
index 6b4033db345806..4cfe581b7eac55 100644
--- a/x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/does_inherit_time_range.ts
+++ b/x-pack/plugins/advanced_ui_actions/public/does_inherit_time_range.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Embeddable, IContainer, ContainerInput } from 'src/plugins/embeddable/public';
+import { Embeddable, IContainer, ContainerInput } from '../../../../src/plugins/embeddable/public';
 import { TimeRangeInput } from './custom_time_range_action';
 
 export function doesInheritTimeRange(embeddable: Embeddable<TimeRangeInput>) {
diff --git a/x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/index.ts b/x-pack/plugins/advanced_ui_actions/public/index.ts
similarity index 87%
rename from x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/index.ts
rename to x-pack/plugins/advanced_ui_actions/public/index.ts
index 5dd807ba2442d7..c11c1119a9b130 100644
--- a/x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/index.ts
+++ b/x-pack/plugins/advanced_ui_actions/public/index.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { PluginInitializerContext } from 'src/core/public';
+import { PluginInitializerContext } from '../../../../src/core/public';
 import { AdvancedUiActionsPublicPlugin } from './plugin';
 
 export function plugin(initializerContext: PluginInitializerContext) {
diff --git a/x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/plugin.ts b/x-pack/plugins/advanced_ui_actions/public/plugin.ts
similarity index 88%
rename from x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/plugin.ts
rename to x-pack/plugins/advanced_ui_actions/public/plugin.ts
index f1b87f6c694a19..fc106cc8ec26b9 100644
--- a/x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/plugin.ts
+++ b/x-pack/plugins/advanced_ui_actions/public/plugin.ts
@@ -4,14 +4,19 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { PluginInitializerContext, CoreSetup, CoreStart, Plugin } from 'src/core/public';
-import { IUiActionsStart, IUiActionsSetup } from 'src/plugins/ui_actions/public';
+import {
+  PluginInitializerContext,
+  CoreSetup,
+  CoreStart,
+  Plugin,
+} from '../../../../src/core/public';
+import { IUiActionsStart, IUiActionsSetup } from '../../../../src/plugins/ui_actions/public';
 import {
   CONTEXT_MENU_TRIGGER,
   PANEL_BADGE_TRIGGER,
   Setup as EmbeddableSetup,
   Start as EmbeddableStart,
-} from '../../../../../../../src/plugins/embeddable/public';
+} from '../../../../src/plugins/embeddable/public';
 import { CustomTimeRangeAction } from './custom_time_range_action';
 
 import { CustomTimeRangeBadge } from './custom_time_range_badge';
diff --git a/x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/test_helpers/index.ts b/x-pack/plugins/advanced_ui_actions/public/test_helpers/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/test_helpers/index.ts
rename to x-pack/plugins/advanced_ui_actions/public/test_helpers/index.ts
diff --git a/x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/test_helpers/time_range_container.ts b/x-pack/plugins/advanced_ui_actions/public/test_helpers/time_range_container.ts
similarity index 90%
rename from x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/test_helpers/time_range_container.ts
rename to x-pack/plugins/advanced_ui_actions/public/test_helpers/time_range_container.ts
index a916f40160c591..657ecf1fcee99b 100644
--- a/x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/test_helpers/time_range_container.ts
+++ b/x-pack/plugins/advanced_ui_actions/public/test_helpers/time_range_container.ts
@@ -9,8 +9,8 @@ import {
   Container,
   ContainerOutput,
   GetEmbeddableFactory,
-} from '../../../../../../../../src/plugins/embeddable/public';
-import { TimeRange } from '../../../../../../../../src/plugins/data/public';
+} from '../../../../../src/plugins/embeddable/public';
+import { TimeRange } from '../../../../../src/plugins/data/public';
 
 /**
  * interfaces are not allowed to specify a sub-set of the required types until
diff --git a/x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/test_helpers/time_range_embeddable.ts b/x-pack/plugins/advanced_ui_actions/public/test_helpers/time_range_embeddable.ts
similarity index 84%
rename from x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/test_helpers/time_range_embeddable.ts
rename to x-pack/plugins/advanced_ui_actions/public/test_helpers/time_range_embeddable.ts
index 0ca8a0ad9391f2..b768113f8b6c42 100644
--- a/x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/test_helpers/time_range_embeddable.ts
+++ b/x-pack/plugins/advanced_ui_actions/public/test_helpers/time_range_embeddable.ts
@@ -9,8 +9,8 @@ import {
   Embeddable,
   EmbeddableInput,
   IContainer,
-} from '../../../../../../../../src/plugins/embeddable/public';
-import { TimeRange } from '../../../../../../../../src/plugins/data/public';
+} from '../../../../../src/plugins/embeddable/public';
+import { TimeRange } from '../../../../../src/plugins/data/public';
 
 interface EmbeddableTimeRangeInput extends EmbeddableInput {
   timeRange: TimeRange;
diff --git a/x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/test_helpers/time_range_embeddable_factory.ts b/x-pack/plugins/advanced_ui_actions/public/test_helpers/time_range_embeddable_factory.ts
similarity index 86%
rename from x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/test_helpers/time_range_embeddable_factory.ts
rename to x-pack/plugins/advanced_ui_actions/public/test_helpers/time_range_embeddable_factory.ts
index 225bf3420faa19..efbf7a3bd2dc65 100644
--- a/x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/test_helpers/time_range_embeddable_factory.ts
+++ b/x-pack/plugins/advanced_ui_actions/public/test_helpers/time_range_embeddable_factory.ts
@@ -8,8 +8,8 @@ import {
   EmbeddableInput,
   IContainer,
   EmbeddableFactory,
-} from '../../../../../../../../src/plugins/embeddable/public';
-import { TimeRange } from '../../../../../../../../src/plugins/data/public';
+} from '../../../../../src/plugins/embeddable/public';
+import { TimeRange } from '../../../../../src/plugins/data/public';
 import { TIME_RANGE_EMBEDDABLE, TimeRangeEmbeddable } from './time_range_embeddable';
 
 interface EmbeddableTimeRangeInput extends EmbeddableInput {
diff --git a/x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/types.ts b/x-pack/plugins/advanced_ui_actions/public/types.ts
similarity index 89%
rename from x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/types.ts
rename to x-pack/plugins/advanced_ui_actions/public/types.ts
index 626782ba372ce4..bbd7c5528276f1 100644
--- a/x-pack/legacy/plugins/advanced_ui_actions/public/np_ready/public/types.ts
+++ b/x-pack/plugins/advanced_ui_actions/public/types.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { OverlayRef } from 'src/core/public';
+import { OverlayRef } from '../../../../src/core/public';
 
 export interface CommonlyUsedRange {
   from: string;
diff --git a/x-pack/plugins/code/kibana.json b/x-pack/plugins/code/kibana.json
new file mode 100644
index 00000000000000..2aed61eda96693
--- /dev/null
+++ b/x-pack/plugins/code/kibana.json
@@ -0,0 +1,9 @@
+{
+  "id": "code",
+  "version": "8.0.0",
+  "kibanaVersion": "kibana",
+  "configPath": ["x-pack", "code"],
+  "server": true,
+  "ui": false,
+  "requiredPlugins": ["features"]
+}
diff --git a/x-pack/plugins/code/server/config.ts b/x-pack/plugins/code/server/config.ts
new file mode 100644
index 00000000000000..97b9ded08525ee
--- /dev/null
+++ b/x-pack/plugins/code/server/config.ts
@@ -0,0 +1,112 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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 '@kbn/config-schema';
+import moment from 'moment';
+
+// TODO: update these legacy imports to new ones.
+import {
+  LanguageServers,
+  LanguageServersDeveloping,
+} from '../../../legacy/plugins/code/server/lsp/language_servers';
+import { DEFAULT_WATERMARK_LOW_PERCENTAGE } from '../../../legacy/plugins/code/server/disk_watermark';
+
+const createCodeConfigSchema = () => {
+  const langSwitches: any = {};
+  LanguageServers.forEach(lang => {
+    langSwitches[lang.name] = schema.object({
+      enabled: schema.boolean({ defaultValue: true }),
+    });
+  });
+  LanguageServersDeveloping.forEach(lang => {
+    langSwitches[lang.name] = schema.object({
+      enabled: schema.boolean({ defaultValue: false }),
+    });
+  });
+
+  return schema.object({
+    ui: schema.object({
+      enabled: schema.boolean({ defaultValue: true }),
+    }),
+    enabled: schema.boolean({ defaultValue: true }),
+    queueIndex: schema.string({ defaultValue: '.code_internal-worker-queue' }),
+    // 1 hour by default.
+    queueTimeoutMs: schema.number({
+      defaultValue: moment.duration(1, 'hour').asMilliseconds(),
+    }),
+    // The frequency which update scheduler executes. 1 minute by default.
+    updateFrequencyMs: schema.number({
+      defaultValue: moment.duration(1, 'minute').asMilliseconds(),
+    }),
+    // The frequency which index scheduler executes. 1 day by default.
+    indexFrequencyMs: schema.number({
+      defaultValue: moment.duration(1, 'day').asMilliseconds(),
+    }),
+    // The frequency which each repo tries to update. 5 minutes by default.
+    updateRepoFrequencyMs: schema.number({
+      defaultValue: moment.duration(5, 'minute').asMilliseconds(),
+    }),
+    // The frequency which each repo tries to index. 1 day by default.
+    indexRepoFrequencyMs: schema.number({
+      defaultValue: moment.duration(1, 'day').asMilliseconds(),
+    }),
+    // whether we want to show more logs
+    verbose: schema.boolean({ defaultValue: false }),
+    lsp: schema.object({
+      ...langSwitches,
+      // timeout of a request
+      requestTimeoutMs: schema.number({
+        defaultValue: moment.duration(10, 'second').asMilliseconds(),
+      }),
+      // if we want the language server run in seperately
+      detach: schema.boolean({ defaultValue: false }),
+      // enable oom_score_adj on linux
+      oomScoreAdj: schema.boolean({ defaultValue: true }),
+    }),
+    repos: schema.arrayOf(schema.string(), { defaultValue: [] }),
+    security: schema.object({
+      enableMavenImport: schema.boolean({ defaultValue: true }),
+      enableGradleImport: schema.boolean({ defaultValue: false }),
+      installGoDependency: schema.boolean({ defaultValue: false }),
+      installNodeDependency: schema.boolean({ defaultValue: true }),
+      gitHostWhitelist: schema.arrayOf(schema.string(), {
+        defaultValue: [
+          'github.com',
+          'gitlab.com',
+          'bitbucket.org',
+          'gitbox.apache.org',
+          'eclipse.org',
+        ],
+      }),
+      gitProtocolWhitelist: schema.arrayOf(schema.string(), {
+        defaultValue: ['https', 'git', 'ssh'],
+      }),
+      enableGitCertCheck: schema.boolean({ defaultValue: true }),
+    }),
+    disk: schema.object({
+      thresholdEnabled: schema.boolean({ defaultValue: true }),
+      watermarkLow: schema.string({ defaultValue: `${DEFAULT_WATERMARK_LOW_PERCENTAGE}%` }),
+    }),
+    maxWorkspace: schema.number({ defaultValue: 5 }), // max workspace folder for each language server
+    enableGlobalReference: schema.boolean({ defaultValue: false }), // Global reference as optional feature for now
+    enableCommitIndexing: schema.boolean({ defaultValue: false }),
+    codeNodeUrl: schema.maybe(schema.string()),
+    clustering: schema.object({
+      enabled: schema.boolean({ defaultValue: false }),
+      codeNodes: schema.arrayOf(
+        schema.object({
+          id: schema.string(),
+          address: schema.string(),
+        }),
+        {
+          defaultValue: [],
+        }
+      ),
+    }),
+  });
+};
+
+export const CodeConfigSchema = createCodeConfigSchema();
diff --git a/x-pack/plugins/code/server/index.ts b/x-pack/plugins/code/server/index.ts
new file mode 100644
index 00000000000000..554974349f2fe7
--- /dev/null
+++ b/x-pack/plugins/code/server/index.ts
@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { PluginInitializerContext } from 'src/core/server';
+import { CodeConfigSchema } from './config';
+import { CodePlugin } from './plugin';
+
+export { PluginSetupContract } from './plugin';
+
+export const config = { schema: CodeConfigSchema };
+export const plugin = (initializerContext: PluginInitializerContext) =>
+  new CodePlugin(initializerContext);
diff --git a/x-pack/plugins/code/server/plugin.ts b/x-pack/plugins/code/server/plugin.ts
new file mode 100644
index 00000000000000..63948ee48501d4
--- /dev/null
+++ b/x-pack/plugins/code/server/plugin.ts
@@ -0,0 +1,92 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+import { first } from 'rxjs/operators';
+import { TypeOf } from '@kbn/config-schema';
+import {
+  CoreSetup,
+  LoggerFactory,
+  PluginInitializerContext,
+  RecursiveReadonly,
+} from 'src/core/server';
+import { deepFreeze } from '../../../../src/core/utils';
+import { PluginSetupContract as FeaturesSetupContract } from '../../features/server';
+import { CodeConfigSchema } from './config';
+
+/**
+ * Describes public Code plugin contract returned at the `setup` stage.
+ */
+export interface PluginSetupContract {
+  /** @deprecated */
+  legacy: {
+    config: TypeOf<typeof CodeConfigSchema>;
+    logger: LoggerFactory;
+  };
+}
+
+/**
+ * Represents Code Plugin instance that will be managed by the Kibana plugin system.
+ */
+export class CodePlugin {
+  constructor(private readonly initializerContext: PluginInitializerContext) {}
+
+  public async setup(
+    coreSetup: CoreSetup,
+    { features }: { features: FeaturesSetupContract }
+  ): Promise<RecursiveReadonly<PluginSetupContract>> {
+    const config = await this.initializerContext.config
+      .create<TypeOf<typeof CodeConfigSchema>>()
+      .pipe(first())
+      .toPromise();
+
+    features.registerFeature({
+      id: 'code',
+      name: i18n.translate('xpack.code.featureRegistry.codeFeatureName', {
+        defaultMessage: 'Code',
+      }),
+      icon: 'codeApp',
+      navLinkId: 'code',
+      app: ['code', 'kibana'],
+      catalogue: [], // TODO add catalogue here
+      privileges: {
+        all: {
+          excludeFromBasePrivileges: true,
+          api: ['code_user', 'code_admin'],
+          savedObject: {
+            all: [],
+            read: ['config'],
+          },
+          ui: ['show', 'user', 'admin'],
+        },
+        read: {
+          api: ['code_user'],
+          savedObject: {
+            all: [],
+            read: ['config'],
+          },
+          ui: ['show', 'user'],
+        },
+      },
+    });
+
+    return deepFreeze({
+      /** @deprecated */
+      legacy: {
+        config,
+        logger: this.initializerContext.logger,
+      },
+    });
+  }
+
+  public start() {
+    this.initializerContext.logger.get().debug('Starting Code plugin');
+  }
+
+  public stop() {
+    this.initializerContext.logger.get().debug('Stopping Code plugin');
+  }
+}
diff --git a/x-pack/plugins/licensing/server/licensing_route_handler_context.test.ts b/x-pack/plugins/licensing/server/licensing_route_handler_context.test.ts
new file mode 100644
index 00000000000000..81ad9715da784b
--- /dev/null
+++ b/x-pack/plugins/licensing/server/licensing_route_handler_context.test.ts
@@ -0,0 +1,36 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { BehaviorSubject } from 'rxjs';
+import { ILicense } from './types';
+import { setup } from './__fixtures__/setup';
+import { createRouteHandlerContext } from './licensing_route_handler_context';
+
+describe('licensingRouteHandlerContext', () => {
+  it('provides the initial license value', async () => {
+    const { license$, license } = await setup();
+
+    const context = createRouteHandlerContext(license$);
+
+    const { license: contextResult } = await context({}, {} as any, {} as any);
+
+    expect(contextResult).toBe(license);
+  });
+
+  it('provides the latest license value', async () => {
+    const { license } = await setup();
+    const license$ = new BehaviorSubject<ILicense>(license);
+
+    const context = createRouteHandlerContext(license$);
+
+    const latestLicense = (Symbol() as unknown) as ILicense;
+    license$.next(latestLicense);
+
+    const { license: contextResult } = await context({}, {} as any, {} as any);
+
+    expect(contextResult).toBe(latestLicense);
+  });
+});
diff --git a/x-pack/plugins/licensing/server/licensing_route_handler_context.ts b/x-pack/plugins/licensing/server/licensing_route_handler_context.ts
new file mode 100644
index 00000000000000..8ee49e9aa084f8
--- /dev/null
+++ b/x-pack/plugins/licensing/server/licensing_route_handler_context.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { IContextProvider, RequestHandler } from 'src/core/server';
+import { Observable } from 'rxjs';
+import { take } from 'rxjs/operators';
+import { ILicense } from './types';
+
+export function createRouteHandlerContext(
+  license$: Observable<ILicense>
+): IContextProvider<RequestHandler<any, any, any>, 'licensing'> {
+  return async function licensingRouteHandlerContext() {
+    const license = await license$.pipe(take(1)).toPromise();
+    return { license };
+  };
+}
diff --git a/x-pack/plugins/licensing/server/plugin.test.ts b/x-pack/plugins/licensing/server/plugin.test.ts
index e8d3b651620ba8..355aeef7f20c79 100644
--- a/x-pack/plugins/licensing/server/plugin.test.ts
+++ b/x-pack/plugins/licensing/server/plugin.test.ts
@@ -80,4 +80,21 @@ describe('licensing plugin', () => {
 
     expect(licenseTypes).toEqual(['basic', 'gold', 'platinum']);
   });
+
+  test('provides a licensing context to http routes', async () => {
+    const { coreSetup, plugin: _plugin } = await setupOnly();
+
+    plugin = _plugin;
+
+    await plugin.setup(coreSetup);
+
+    expect(coreSetup.http.registerRouteHandlerContext.mock.calls).toMatchInlineSnapshot(`
+      Array [
+        Array [
+          "licensing",
+          [Function],
+        ],
+      ]
+    `);
+  });
 });
diff --git a/x-pack/plugins/licensing/server/plugin.ts b/x-pack/plugins/licensing/server/plugin.ts
index 7c9a0df15229f3..4cd40379b8592f 100644
--- a/x-pack/plugins/licensing/server/plugin.ts
+++ b/x-pack/plugins/licensing/server/plugin.ts
@@ -18,6 +18,15 @@ import { Poller } from '../../../../src/core/utils/poller';
 import { LicensingConfigType, LicensingPluginSetup, ILicense } from './types';
 import { LicensingConfig } from './licensing_config';
 import { License } from './license';
+import { createRouteHandlerContext } from './licensing_route_handler_context';
+
+declare module 'src/core/server' {
+  interface RequestHandlerContext {
+    licensing: {
+      license: ILicense;
+    };
+  }
+}
 
 export class Plugin implements CorePlugin<LicensingPluginSetup> {
   private readonly logger: Logger;
@@ -120,9 +129,12 @@ export class Plugin implements CorePlugin<LicensingPluginSetup> {
   public async setup(core: CoreSetup) {
     const config = await this.config$.pipe(first()).toPromise();
     const poller = this.create(config, core);
+    const license$ = poller.subject$.asObservable();
+
+    core.http.registerRouteHandlerContext('licensing', createRouteHandlerContext(license$));
 
     return {
-      license$: poller.subject$.asObservable(),
+      license$,
     };
   }
 
diff --git a/x-pack/plugins/licensing/server/types.ts b/x-pack/plugins/licensing/server/types.ts
index a3ceea327c7b08..27d3502b447795 100644
--- a/x-pack/plugins/licensing/server/types.ts
+++ b/x-pack/plugins/licensing/server/types.ts
@@ -118,3 +118,14 @@ export type LicensingConfigType = TypeOf<typeof schema>;
 export type LicenseType = keyof typeof LICENSE_TYPE;
 /** @public */
 export type LicenseFeatureSerializer = (licensing: ILicense) => any;
+
+/** @public */
+export interface LicensingRequestContext {
+  license: ILicense;
+}
+
+declare module 'src/core/server' {
+  interface RequestHandlerContext {
+    licensing: LicensingRequestContext;
+  }
+}
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index d656ff273a4c67..b7a6b242429243 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -835,7 +835,6 @@
     "data.query.queryBar.luceneLanguageName": "Lucene",
     "data.query.queryBar.luceneSyntaxWarningMessage": "Lucene クエリ構文を使用しているようですが、Kibana クエリ言語 (KQL) が選択されています。KQL ドキュメント {link} を確認してください。",
     "data.query.queryBar.luceneSyntaxWarningTitle": "Lucene 構文警告",
-    "data.query.queryBar.searchInputAriaLabel": "{previouslyTranslatedPageTitle} ページの検索ボックスです。{pageType} の検索とフィルタリングを行うには入力を開始してください",
     "data.query.queryBar.searchInputPlaceholder": "検索",
     "data.query.queryBar.syntaxOptionsDescription": "{docsLink} (KQL) は、シンプルなクエリ構文とスクリプトフィールドのサポートを提供します。また、KQL はベーシックライセンス以上をご利用の場合、自動入力も提供します。KQL をオフにすると、Kibana は Lucene を使用します。",
     "data.query.queryBar.syntaxOptionsDescription.docsLinkText": "こちら",
@@ -889,7 +888,6 @@
     "embeddableApi.customizeTitle.optionsMenuForm.resetCustomDashboardButtonLabel": "タイトルをリセット",
     "embeddableApi.errors.embeddableFactoryNotFound": "{type} を読み込めません。Elasticsearch と Kibana のデフォルトのディストリビューションを適切なライセンスでアップグレードしてください。",
     "embeddableApi.errors.paneldoesNotExist": "パネルが見つかりません",
-    "embeddableApi.panel.dashboardPanelAriaLabel": "ダッシュボードパネル: {title}",
     "embeddableApi.panel.editPanel.displayName": "{value} を編集",
     "embeddableApi.panel.inspectPanel.displayName": "検査",
     "embeddableApi.panel.optionsMenu.panelOptionsButtonAriaLabel": "パネルオプション",
@@ -1535,7 +1533,6 @@
     "kbn.discover.fieldChooser.fieldCalculator.fieldIsNotPresentInDocumentsErrorMessage": "このフィールドは Elasticsearch マッピングに表示されますが、ドキュメントテーブルの {hitsLength} 件のドキュメントには含まれません。可視化や検索は可能な場合があります。",
     "kbn.discover.fieldChooser.filter.aggregatableLabel": "集約可能",
     "kbn.discover.fieldChooser.filter.availableFieldsTitle": "利用可能なフィールド",
-    "kbn.discover.fieldChooser.filter.fieldNameLabel": "フィールド名",
     "kbn.discover.fieldChooser.filter.hideMissingFieldsLabel": "未入力のフィールドを非表示",
     "kbn.discover.fieldChooser.filter.indexAndFieldsSectionAriaLabel": "インデックスとフィールド",
     "kbn.discover.fieldChooser.filter.popularTitle": "人気",
@@ -1581,7 +1578,6 @@
     "kbn.discover.notifications.savedSearchTitle": "検索「{savedSearchTitle}」が保存されました。",
     "kbn.discover.painlessError.painlessScriptedFieldErrorMessage": "Painless スクリプトのフィールド「{script}」のエラー.",
     "kbn.discover.rootBreadcrumb": "ディスカバリ",
-    "kbn.discover.savedSearch.newSavedSearchTitle": "新しく保存された検索",
     "kbn.discover.savedSearch.savedObjectName": "保存された検索",
     "kbn.discover.scaledToDescription": "{bucketIntervalDescription} にスケーリング済み",
     "kbn.discover.searchingTitle": "検索中",
@@ -2426,7 +2422,6 @@
     "kbn.visualize.badge.readOnly.text": "読み込み専用",
     "kbn.visualize.badge.readOnly.tooltip": "ビジュアライゼーションを保存できません",
     "kbn.visualize.createVisualization.noIndexPatternOrSavedSearchIdErrorMessage": "indexPattern または savedSearchId が必要です",
-    "kbn.visualize.defaultVisualizationTitle": "新規ビジュアライゼーション",
     "kbn.visualize.disabledLabVisualizationMessage": "ラボビジュアライゼーションを表示するには、高度な設定でラボモードをオンにしてください。",
     "kbn.visualize.disabledLabVisualizationTitle": "{title} はラボビジュアライゼーションです。",
     "kbn.visualize.editor.createBreadcrumb": "作成",
@@ -4522,7 +4517,6 @@
     "xpack.graph.savedWorkspace.workspaceNameTitle": "新規グラフワークスペース",
     "xpack.graph.savedWorkspaces.graphWorkspaceLabel": "グラフワークスペース",
     "xpack.graph.savedWorkspaces.graphWorkspacesLabel": "グラフワークスペース",
-    "xpack.graph.saveWorkspace.disabledWarning": "保存が無効になっています",
     "xpack.graph.saveWorkspace.successNotification.noDataSavedText": "構成が保存されましたが、データは保存されませんでした",
     "xpack.graph.saveWorkspace.successNotificationTitle": "「{workspaceTitle}」が保存されました",
     "xpack.graph.serverSideErrors.expiredLicenseErrorMessage": "グラフを利用できません。ライセンスが期限切れです。",
@@ -5321,18 +5315,8 @@
     "xpack.infra.header.logsTitle": "ログ",
     "xpack.infra.homePage.settingsTabTitle": "設定",
     "xpack.infra.kibanaMetrics.cloudIdMissingErrorMessage": "{metricId} のモデルには cloudId が必要ですが、{nodeId} に cloudId が指定されていません。",
-    "xpack.infra.logs.analysis.logRateSection.table.actualLogEntryRateLabel": "実際のレート",
-    "xpack.infra.logs.analysis.logRateSection.table.anomalyScoreLabel": "異常スコア",
-    "xpack.infra.logs.analysis.logRateSection.table.startTimeLabel": "開始時刻",
-    "xpack.infra.logs.analysis.logRateSection.table.typicalLogEntryRateLabel": "平均レート",
-    "xpack.infra.logs.analysis.logRateSection.viewSwitcher.chartLabel": "レートチャート",
-    "xpack.infra.logs.analysis.logRateSection.viewSwitcher.legendLabel": "ログレートチャートと異常表ビューを切り替えます",
-    "xpack.infra.logs.analysis.logRateSection.viewSwitcher.tableLabel": "異常表",
-    "xpack.infra.logs.analysis.logRateSectionAnomalySeriesName": "異常",
-    "xpack.infra.logs.analysis.logRateSectionAreaSeriesName": "期待値",
     "xpack.infra.logs.analysis.logRateSectionLineSeriesName": "15 分ごとのログエントリー (平均)",
     "xpack.infra.logs.analysis.logRateSectionLoadingAriaLabel": "ログレートの結果を読み込み中",
-    "xpack.infra.logs.analysis.logRateSectionModelBoundsCheckboxLabel": "モデルバウンドを表示",
     "xpack.infra.logs.analysis.logRateSectionNoDataBody": "時間範囲を調整する必要があるかもしれません。",
     "xpack.infra.logs.analysis.logRateSectionNoDataTitle": "表示するデータがありません。",
     "xpack.infra.logs.analysis.logRateSectionTitle": "ログレート",
@@ -5882,9 +5866,7 @@
     "xpack.maps.source.wms.attributionText": "属性 URL にはテキストが必要です",
     "xpack.maps.style.customColorRampLabel": "カスタマカラーランプ",
     "xpack.maps.toolbarOverlay.drawBounds.initialGeometryLabel": "境界",
-    "xpack.maps.toolbarOverlay.drawBounds.onSubmitButtonLabel": "境界を描く",
     "xpack.maps.toolbarOverlay.drawShape.initialGeometryLabel": "図形",
-    "xpack.maps.toolbarOverlay.drawShape.onSubmitButtonLabel": "図形を描く",
     "xpack.maps.tooltip.geometryFilterForm.createFilterButtonLabel": "フィルターを作成",
     "xpack.maps.tooltip.pageNumerText": "{total} 個中 {pageNumber} 個の機能",
     "xpack.maps.tooltip.showGeometryFilterViewLinkLabel": "ジオメトリでフィルタリング",
@@ -7187,8 +7169,6 @@
     "xpack.ml.newJob.simple.watcher.email.timeLabel": "時間",
     "xpack.ml.newJob.simple.watcher.email.topInfluencersLabel": "トップ影響因子:",
     "xpack.ml.newJob.simple.watcher.email.topRecordsLabel": "トップの記録:",
-    "xpack.ml.newJob.wizard.createFromNewSearchTitle": "新規検索からインデックスを選択",
-    "xpack.ml.newJob.wizard.createFromSavedSearchTitle": "または保存された検索から",
     "xpack.ml.newJob.wizard.jobType.advancedAriaLabel": "高度なジョブ",
     "xpack.ml.newJob.wizard.jobType.advancedDescription": "より高度なユースケースでは、ジョブの作成にすべてのオプションを使用します。",
     "xpack.ml.newJob.wizard.jobType.advancedTitle": "高度な設定",
@@ -7217,7 +7197,6 @@
     "xpack.ml.newJob.wizard.jobType.useSuppliedConfigurationTitle": "提供された構成を使用",
     "xpack.ml.newJob.wizard.jobType.useWizardDescription": "ウィザードの 1 つを使用し、データの異常を検知する機械学習ジョブを作成します。",
     "xpack.ml.newJob.wizard.jobType.useWizardTitle": "ウィザードを使用",
-    "xpack.ml.newJob.wizard.savedSearchesTooltip": "保存された検索",
     "xpack.ml.privilege.licenseHasExpiredTooltip": "ご使用のライセンスは期限切れです。",
     "xpack.ml.privilege.noPermission.createCalendarsTooltip": "カレンダーを作成するパーミッションがありません。",
     "xpack.ml.privilege.noPermission.createDataFrameTransformTooltip": "データフレーム変換を作成するパーミッションがありません。",
@@ -8183,9 +8162,6 @@
     "xpack.monitoring.elasticsearch.nodes.diskFreeSpaceColumnTitle": "ディスクの空き容量",
     "xpack.monitoring.elasticsearch.nodes.jvmMemoryColumnTitle": "{javaVirtualMachine} メモリー",
     "xpack.monitoring.elasticsearch.nodes.loadAverageColumnTitle": "平均負荷",
-    "xpack.monitoring.elasticsearch.nodes.metribeatMigration.disableInternalCollectionDescription": "ご使用の Elasticsearch サーバーはすべて Metricbeat により監視されています。\n                但し、移行を完了させるには内部収集を無効にする必要があります。",
-    "xpack.monitoring.elasticsearch.nodes.metribeatMigration.disableInternalCollectionMigrationButtonLabel": "無効にして移行を完了させる",
-    "xpack.monitoring.elasticsearch.nodes.metribeatMigration.disableInternalCollectionTitle": "内部収集を無効にして移行を完了させる",
     "xpack.monitoring.elasticsearch.nodes.monitoringTablePlaceholder": "ノードをフィルタリング…",
     "xpack.monitoring.elasticsearch.nodes.nameColumnTitle": "名前",
     "xpack.monitoring.elasticsearch.nodes.routeTitle": "Elasticsearch - ノード",
@@ -8253,10 +8229,6 @@
     "xpack.monitoring.euiTable.isFullyMigratedLabel": "Metricbeat 収集",
     "xpack.monitoring.euiTable.isInternalCollectorLabel": "内部収集",
     "xpack.monitoring.euiTable.isPartiallyMigratedLabel": "内部収集と Metricbeat 収集",
-    "xpack.monitoring.euiTable.migrateButtonLabel": "移行",
-    "xpack.monitoring.euiTable.migrationStatusUnknown": "N/A",
-    "xpack.monitoring.euiTable.setupActionTitle": "セットアップアクション",
-    "xpack.monitoring.euiTable.setupStatusTitle": "セットアップステータス",
     "xpack.monitoring.feature.reserved.description": "ユーザーアクセスを許可するには、monitoring_user ロールも割り当てる必要があります。",
     "xpack.monitoring.featureRegistry.monitoringFeatureName": "スタック監視",
     "xpack.monitoring.formatNumbers.notAvailableLabel": "N/A",
@@ -8378,58 +8350,32 @@
     "xpack.monitoring.logstashNavigation.pipelineVersionDescription": "バージョンは {relativeLastSeen} 時点でアクティブ、初回検知 {relativeFirstSeen}",
     "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.configureMetricbeatDescription": "{file} にこれらの変更を加えます。",
     "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.configureMetricbeatTitle": "Metricbeat を構成して監視クラスターに送ります",
-    "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.disableInternalCollection.fullyMigratedStatusDescription": "内部収集からのドキュメントがありません。移行完了！",
-    "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.disableInternalCollection.fullyMigratedStatusTitle": "お疲れさまでした！",
-    "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.disableInternalCollection.partiallyMigratedStatusDescription": "最後の内部収集は {secondsSinceLastInternalCollectionLabel} 前に行われました。",
     "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.disableInternalCollectionDescription": "Elasticsearch 監視メトリックの内部収集を無効にします。本番クラスターの各サーバーの {monospace} を false に設定します。",
     "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.disableInternalCollectionTitle": "Elasticsearch 監視メトリックの内部収集を無効にする",
     "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.enableMetricbeatModuleDescription": "モジュールはデフォルトで {url} から Elasticsearch 監視メトリックを収集します。ローカル Elasticsearch サーバーのアドレスが異なる場合は、{module} ファイルのホスト設定で指定する必要があります。",
     "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.enableMetricbeatModuleTitle": "Metricbeat の Elasticsearch X-Pack モジュールの有効化と構成",
-    "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.fullyMigratedStatusDescription": "Metricbeat から監視データが送信され始めました！",
-    "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.fullyMigratedStatusTitle": "お疲れさまでした！",
     "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.installMetricbeatLinkText": "こちらの手順に従ってください",
     "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.installMetricbeatTitle": "Metricbeat を Elasticsearch と同じサーバーにインストール",
-    "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.metricbeatSecuritySetup": "セキュリティ機能が有効な場合、追加セットアップが必要な可能性があります。{link}",
-    "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.metricbeatSecuritySetupLinkText": "詳細をご覧ください。",
-    "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.partiallyMigratedStatusTitle": "現在も Elasticsearch の内部収集からデータが送信されています。",
     "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.startMetricbeatLinkText": "こちらの手順に従ってください",
     "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.startMetricbeatTitle": "Metricbeat を起動します",
-    "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.statusTitle": "移行ステータス",
     "xpack.monitoring.metricbeatMigration.flyout.closeButtonLabel": "閉じる",
     "xpack.monitoring.metricbeatMigration.flyout.doneButtonLabel": "完了",
-    "xpack.monitoring.metricbeatMigration.flyout.elasticsearchNode": "ノード",
-    "xpack.monitoring.metricbeatMigration.flyout.elasticsearchNodesTitle": "Elasticsearch ノード",
-    "xpack.monitoring.metricbeatMigration.flyout.flyoutTitle": "{instanceName} {instanceType} の Metricbeat への移行",
-    "xpack.monitoring.metricbeatMigration.flyout.kibanaInstance": "インスタンス",
     "xpack.monitoring.metricbeatMigration.flyout.nextButtonLabel": "次へ",
     "xpack.monitoring.metricbeatMigration.flyout.step1.monitoringUrlHelpText": "これは通常単一のインスタンスですが、複数ある場合は、すべてのインスタンス URL をコンマ区切りで入力します。\n                Metricbeat インスタンスの実行には、Elasticsearch サーバーとの通信が必要です。",
     "xpack.monitoring.metricbeatMigration.flyout.step1.monitoringUrlLabel": "監視クラスター URL",
     "xpack.monitoring.metricbeatMigration.kibanaInstructions.configureMetricbeatDescription": "{file} にこれらの変更を加えます。",
     "xpack.monitoring.metricbeatMigration.kibanaInstructions.configureMetricbeatTitle": "Metricbeat を構成して監視クラスターに送ります",
-    "xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.checkingStatusButtonLabel": "確認中...",
-    "xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.checkStatusButtonLabel": "確認",
     "xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.description": "Kibana 構成ファイル ({file}) に次の設定を追加します:",
-    "xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.fullyMigratedStatusDescription": "内部収集からのドキュメントがありません。移行完了！",
-    "xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.fullyMigratedStatusTitle": "お疲れさまでした！",
     "xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.note": "{config} をデフォルト値のままにします ({defaultValue})。",
-    "xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.partiallyMigratedStatusDescription": "最後の内部収集は {secondsSinceLastInternalCollectionLabel} 前に行われました。",
     "xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.restartNote": "このステップには Kibana サーバーの再起動が必要です。サーバーの再起動が完了するまでエラーが表示されます。",
     "xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.restartWarningTitle": "警告",
-    "xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.statusDescription": "内部収集からのドキュメントがないことを確認してください。",
     "xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.title": "Kibana 監視メトリックの内部収集を無効にする",
     "xpack.monitoring.metricbeatMigration.kibanaInstructions.enableMetricbeatModuleDescription": "モジュールはデフォルトで http://localhost:5601 から Kibana 監視メトリックを収集します。ローカル Kibana インスタンスのアドレスが異なる場合は、{file} ファイルの {hosts} 設定で指定する必要があります。",
     "xpack.monitoring.metricbeatMigration.kibanaInstructions.enableMetricbeatModuleTitle": "Metricbeat の Kibana X-Pack もウールの有効化と構成",
-    "xpack.monitoring.metricbeatMigration.kibanaInstructions.fullyMigratedStatusDescription": "Metricbeat から監視データが送信され始めました！",
-    "xpack.monitoring.metricbeatMigration.kibanaInstructions.fullyMigratedStatusTitle": "お疲れさまでした！",
     "xpack.monitoring.metricbeatMigration.kibanaInstructions.installMetricbeatLinkText": "こちらの手順に従ってください",
     "xpack.monitoring.metricbeatMigration.kibanaInstructions.installMetricbeatTitle": "Metricbeat を Kibana と同じサーバーにインストール",
-    "xpack.monitoring.metricbeatMigration.kibanaInstructions.metricbeatSecuritySetup": "セキュリティ機能が有効な場合、追加セットアップが必要な可能性があります。{link}",
-    "xpack.monitoring.metricbeatMigration.kibanaInstructions.metricbeatSecuritySetupLinkText": "詳細をご覧ください。",
-    "xpack.monitoring.metricbeatMigration.kibanaInstructions.partiallyMigratedStatusDescription": "検出には最長 {secondsAgo} 秒かかる場合がありますが、引き続きバックグラウンドで {timePeriod} 秒ごとに確認します。",
-    "xpack.monitoring.metricbeatMigration.kibanaInstructions.partiallyMigratedStatusTitle": "現在も Kibana の内部収集からデータが送信されています。",
     "xpack.monitoring.metricbeatMigration.kibanaInstructions.startMetricbeatLinkText": "こちらの手順に従ってください",
     "xpack.monitoring.metricbeatMigration.kibanaInstructions.startMetricbeatTitle": "Metricbeat を起動します",
-    "xpack.monitoring.metricbeatMigration.kibanaInstructions.statusTitle": "移行ステータス",
     "xpack.monitoring.metrics.apm.outputAckedEventsRate.ackedDescription": "アウトプットにより処理されたイベントです (再試行を含む)",
     "xpack.monitoring.metrics.apm.outputAckedEventsRate.ackedLabel": "承認済み",
     "xpack.monitoring.metrics.apm.outputAckedEventsRateTitle": "アウトプット承認イベントレート",
@@ -8969,131 +8915,52 @@
     "xpack.monitoring.summaryStatus.statusIconLabel": "ステータス: {status}",
     "xpack.monitoring.summaryStatus.statusIconTitle": "ステータス: {statusIcon}",
     "xpack.monitoring.uiExportsDescription": "Elastic Stack の監視です",
-    "xpack.monitoring.apm.instances.metricbeatMigration.detectedInstanceDescription": "インデックスによると、APM サーバーがあると思われます。下の「監視をセットアップ」をクリックして\n              この APM サーバーの監視を開始してください。",
-    "xpack.monitoring.apm.instances.metricbeatMigration.detectedInstanceTitle": "APM サーバーが検出されました",
-    "xpack.monitoring.apm.metricbeatMigration.setupNewButtonLabel": "新規 APM サーバーの監視をセットアップ",
-    "xpack.monitoring.beats.instances.metricbeatMigration.detectedInstanceDescription": "インデックスによると、Beats インスタンスがあると思われます。下の「監視をセットアップ」をクリックして\n                このインスタンスの監視を開始してください。",
-    "xpack.monitoring.beats.instances.metricbeatMigration.detectedInstanceTitle": "Beats インスタンスが検出されました",
-    "xpack.monitoring.beats.metricbeatMigration.setupNewButtonLabel": "新規 Beats インスタンスの監視をセットアップ",
     "xpack.monitoring.chart.timeSeries.zoomOut": "ズームアウト",
-    "xpack.monitoring.cluster.overview.apmPanel.setupModeNodesTooltip.disableInternal": "すべてのサーバーが Metricbeat によって監視されていますが、内部収集を\n          オフにする必要があります。フラッグアイコンをクリックして、サーバーリストページにアクセスし、内部収集を無効にしてください。",
-    "xpack.monitoring.cluster.overview.apmPanel.setupModeNodesTooltip.oneInternal": "Metricbeat により監視されていないサーバーが少なくとも 1 つあります。フラッグ\n          アイコンをクリックして、サーバーリストページにアクセスし、各サーバーの詳細なステータスを確認してください。",
-    "xpack.monitoring.cluster.overview.beatsPanel.setupModeNodesTooltip.disableInternal": "すべてのインスタンスが Metricbeat によって監視されていますが、内部収集を\n          オフにする必要があります。フラッグアイコンをクリックして、インスタンスリストページにアクセスし、内部収集を無効にしてください。",
-    "xpack.monitoring.cluster.overview.beatsPanel.setupModeNodesTooltip.oneInternal": "Metricbeat により監視されていないインスタンスが少なくとも 1 つあります。フラッグ\n          アイコンをクリックして、インスタンスリストページにアクセスし、各インスタンスの詳細なステータスを確認してください。",
-    "xpack.monitoring.cluster.overview.elasticsearchPanel.setupModeNodesTooltip.disableInternal": "すべてのノードが Metricbeat によって監視されていますが、内部収集を上のメニューバーの\n          フラッグアイコンをクリックして、ノードリストページにアクセスし、内部収集を無効にしてください。",
-    "xpack.monitoring.cluster.overview.elasticsearchPanel.setupModeNodesTooltip.oneInternal": "Metricbeat により監視されていないノードが少なくとも 1 つあります。フラッグアイコンをクリックして、ノード\n          リストページにアクセスし、各ノードの詳細なステータスを確認してください。",
-    "xpack.monitoring.cluster.overview.kibanaPanel.setupModeNodesTooltip.disableInternal": "すべてのインスタンスが Metricbeat によって監視されていますが、内部収集を\n          オフにする必要があります。フラッグアイコンをクリックして、インスタンスリストページにアクセスし、内部収集を無効にしてください。",
-    "xpack.monitoring.cluster.overview.kibanaPanel.setupModeNodesTooltip.oneInternal": "Metricbeat により監視されていないインスタンスが少なくとも 1 つあります。フラッグ\n          アイコンをクリックして、インスタンスリストページにアクセスし、各インスタンスの詳細なステータスを確認してください。",
-    "xpack.monitoring.cluster.overview.logstashPanel.setupModeNodesTooltip.disableInternal": "すべてのノードが Metricbeat によって監視されていますが、内部収集を\n          オフにする必要があります。フラッグアイコンをクリックして、ノードリストページにアクセスし、内部収集を無効にしてください。",
-    "xpack.monitoring.cluster.overview.logstashPanel.setupModeNodesTooltip.oneInternal": "Metricbeat により監視されていないノードが少なくとも 1 つあります。フラッグ\n          アイコンをクリックして、ノードリストページにアクセスし、各ノードの詳細なステータスを確認してください。",
-    "xpack.monitoring.elasticsearch.metricbeatMigration.setupNewButtonLabel": "新規 Elasticsearch ノードの監視をセットアップ",
-    "xpack.monitoring.elasticsearch.nodes.metribeatMigration.netNewUserDescription": "監視データは検出されませんでしたが、次の Elasticsearch ノードが検出されました。\n                検出された各ノードとセットアップボタンが下に表示されます。このボタンをクリックすると、\n                各ノードの監視を有効にするプロセスをご案内します。",
-    "xpack.monitoring.elasticsearch.nodes.metribeatMigration.netNewUserTitle": "監視データが検出されませんでした",
     "xpack.monitoring.errors.monitoringLicenseErrorDescription": "クラスター = 「{clusterId}」のライセンス情報が見つかりませんでした。クラスターのマスターノードサーバーログにエラーや警告がないか確認してください。",
     "xpack.monitoring.errors.monitoringLicenseErrorTitle": "監視ライセンスエラー",
-    "xpack.monitoring.euiTable.isNetNewUserLabel": "監視が検出されませんでした",
-    "xpack.monitoring.euiTable.setupButtonLabel": "セットアップ",
-    "xpack.monitoring.kibana.metricbeatMigration.setupNewButtonLabel": "新規 Kibana インスタンスの監視をセットアップ",
-    "xpack.monitoring.kibana.nodes.metribeatMigration.netNewUserDescription": "監視データは検出されませんでしたが、次の Kibana インスタンスが検出されました。\n                  検出されたインスタンスとセットアップボタンが下に表示されます。このボタンをクリックすると、\n                  このインスタンスの監視を有効にするプロセスをご案内します。",
-    "xpack.monitoring.kibana.nodes.metribeatMigration.netNewUserTitle": "監視データが検出されませんでした",
     "xpack.monitoring.logs.reason.defaultMessage": "ログデータが見つからず、理由を診断することができません。{link}",
     "xpack.monitoring.logs.reason.defaultMessageLink": "正しくセットアップされていることを確認してください。",
     "xpack.monitoring.logs.reason.defaultTitle": "ログデータが見つかりませんでした",
-    "xpack.monitoring.logstash.metricbeatMigration.setupNewButtonLabel": "新規 Logstash サーバーの監視をセットアップ",
-    "xpack.monitoring.logstash.nodes.metribeatMigration.netNewUserDescription": "インデックスによると、Logstash ノードがあると思われます。下の「監視をセットアップ」をクリックして\n                このノードの監視を開始してください。",
-    "xpack.monitoring.logstash.nodes.metribeatMigration.netNewUserTitle": "監視データが検出されませんでした",
     "xpack.monitoring.metricbeatMigration.apmInstructions.configureMetricbeatDescription": "{file} にこれらの変更を加えます。",
     "xpack.monitoring.metricbeatMigration.apmInstructions.configureMetricbeatTitle": "Metricbeat を構成して監視クラスターに送ります",
-    "xpack.monitoring.metricbeatMigration.apmInstructions.disableInternalCollection.checkingStatusButtonLabel": "確認中...",
-    "xpack.monitoring.metricbeatMigration.apmInstructions.disableInternalCollection.checkStatusButtonLabel": "確認",
     "xpack.monitoring.metricbeatMigration.apmInstructions.disableInternalCollection.description": "APM サーバーの構成ファイル ({file}) に次の設定を追加します:",
-    "xpack.monitoring.metricbeatMigration.apmInstructions.disableInternalCollection.fullyMigratedStatusDescription": "内部収集からのドキュメントがありません。移行完了！",
-    "xpack.monitoring.metricbeatMigration.apmInstructions.disableInternalCollection.fullyMigratedStatusTitle": "お疲れさまでした！",
     "xpack.monitoring.metricbeatMigration.apmInstructions.disableInternalCollection.note": "この変更後、APM サーバーの再起動が必要です。",
-    "xpack.monitoring.metricbeatMigration.apmInstructions.disableInternalCollection.partiallyMigratedStatusDescription": "最後の内部収集は {secondsSinceLastInternalCollectionLabel} 前に行われました。",
-    "xpack.monitoring.metricbeatMigration.apmInstructions.disableInternalCollection.statusDescription": "内部収集からのドキュメントがないことを確認してください。",
     "xpack.monitoring.metricbeatMigration.apmInstructions.disableInternalCollection.title": "APM サーバーの監視メトリックの内部収集を無効にする",
     "xpack.monitoring.metricbeatMigration.apmInstructions.enableMetricbeatModuleDescription": "モジュールはデフォルトで http://localhost:5066 から APM サーバーの監視メトリックを収集します。ローカル APM サーバーのアドレスが異なる場合は、{file} ファイルの {hosts} 設定で指定する必要があります。",
     "xpack.monitoring.metricbeatMigration.apmInstructions.enableMetricbeatModuleTitle": "Metricbeat の Beat X-Pack モジュールの有効化と構成",
-    "xpack.monitoring.metricbeatMigration.apmInstructions.fullyMigratedStatusDescription": "Metricbeat から監視データが送信され始めました！",
-    "xpack.monitoring.metricbeatMigration.apmInstructions.fullyMigratedStatusTitle": "お疲れさまでした！",
     "xpack.monitoring.metricbeatMigration.apmInstructions.installMetricbeatLinkText": "こちらの手順に従ってください",
     "xpack.monitoring.metricbeatMigration.apmInstructions.installMetricbeatTitle": "Metricbeat を APM サーバーと同じサーバーにインストール",
-    "xpack.monitoring.metricbeatMigration.apmInstructions.isInternalCollectorStatusTitle": "この APM サーバーの Metricbeat からの監視データが検出されていません。\n            引き続きバックグラウンドで確認を続けます。",
-    "xpack.monitoring.metricbeatMigration.apmInstructions.metricbeatSecuritySetup": "セキュリティ機能が有効な場合、追加セットアップが必要な可能性があります。{link}",
-    "xpack.monitoring.metricbeatMigration.apmInstructions.metricbeatSecuritySetupLinkText": "詳細をご覧ください。",
-    "xpack.monitoring.metricbeatMigration.apmInstructions.partiallyMigratedStatusDescription": "検出には最長 {secondsAgo} 秒かかる場合がありますが、引き続きバックグラウンドで {timePeriod} 秒ごとに確認します。",
-    "xpack.monitoring.metricbeatMigration.apmInstructions.partiallyMigratedStatusTitle": "現在も APM サーバーの内部収集からデータが送信されています。",
     "xpack.monitoring.metricbeatMigration.apmInstructions.startMetricbeatLinkText": "こちらの手順に従ってください",
     "xpack.monitoring.metricbeatMigration.apmInstructions.startMetricbeatTitle": "Metricbeat を起動します",
-    "xpack.monitoring.metricbeatMigration.apmInstructions.statusTitle": "移行ステータス",
     "xpack.monitoring.metricbeatMigration.beatsInstructions.configureMetricbeatDescription": "{file} にこれらの変更を加えます。",
     "xpack.monitoring.metricbeatMigration.beatsInstructions.configureMetricbeatTitle": "Metricbeat を構成して監視クラスターに送ります",
-    "xpack.monitoring.metricbeatMigration.beatsInstructions.disableInternalCollection.checkingStatusButtonLabel": "確認中...",
-    "xpack.monitoring.metricbeatMigration.beatsInstructions.disableInternalCollection.checkStatusButtonLabel": "確認",
     "xpack.monitoring.metricbeatMigration.beatsInstructions.disableInternalCollection.description": "{beatType} の構成ファイル ({file}) に次の設定を追加します:",
-    "xpack.monitoring.metricbeatMigration.beatsInstructions.disableInternalCollection.fullyMigratedStatusDescription": "内部収集からのドキュメントがありません。移行完了！",
-    "xpack.monitoring.metricbeatMigration.beatsInstructions.disableInternalCollection.fullyMigratedStatusTitle": "お疲れさまでした！",
     "xpack.monitoring.metricbeatMigration.beatsInstructions.disableInternalCollection.note": "この変更後、{beatType} の再起動が必要です。",
-    "xpack.monitoring.metricbeatMigration.beatsInstructions.disableInternalCollection.partiallyMigratedStatusDescription": "最後の内部収集は {secondsSinceLastInternalCollectionLabel} 前に行われました。",
-    "xpack.monitoring.metricbeatMigration.beatsInstructions.disableInternalCollection.statusDescription": "内部収集からのドキュメントがないことを確認してください。",
     "xpack.monitoring.metricbeatMigration.beatsInstructions.disableInternalCollection.title": "{beatType} の監視メトリックの内部収集を無効にする",
     "xpack.monitoring.metricbeatMigration.beatsInstructions.enableMetricbeatModuleDescription": "モジュールはデフォルトで http://localhost:5066 から {beatType} 監視メトリックを収集します。監視されている {beatType} インスタンスのアドレスが異なる場合は、{file} ファイルの {hosts} 設定で指定する必要があります。",
     "xpack.monitoring.metricbeatMigration.beatsInstructions.enableMetricbeatModuleHttpEnabledDirections": "Metricbeat が実行中の {beatType} からメトリックを収集するには、{link} 必要があります。",
     "xpack.monitoring.metricbeatMigration.beatsInstructions.enableMetricbeatModuleHttpEnabledDirectionsLinkText": "監視されている {beatType} の HTTP エンドポイントを有効にする",
     "xpack.monitoring.metricbeatMigration.beatsInstructions.enableMetricbeatModuleTitle": "Metricbeat の Beat X-Pack モジュールの有効化と構成",
-    "xpack.monitoring.metricbeatMigration.beatsInstructions.fullyMigratedStatusDescription": "Metricbeat から監視データが送信され始めました！",
-    "xpack.monitoring.metricbeatMigration.beatsInstructions.fullyMigratedStatusTitle": "お疲れさまでした！",
     "xpack.monitoring.metricbeatMigration.beatsInstructions.installMetricbeatLinkText": "こちらの手順に従ってください",
     "xpack.monitoring.metricbeatMigration.beatsInstructions.installMetricbeatTitle": "Metricbeat を {beatType} と同じサーバーにインストール",
-    "xpack.monitoring.metricbeatMigration.beatsInstructions.isInternalCollectorStatusTitle": "この Beat の Metricbeat からの監視データが検出されていません。\n            引き続きバックグラウンドで確認を続けます。",
-    "xpack.monitoring.metricbeatMigration.beatsInstructions.metricbeatSecuritySetup": "セキュリティ機能が有効な場合、追加セットアップが必要な可能性があります。{link}",
-    "xpack.monitoring.metricbeatMigration.beatsInstructions.metricbeatSecuritySetupLinkText": "詳細をご覧ください。",
-    "xpack.monitoring.metricbeatMigration.beatsInstructions.partiallyMigratedStatusDescription": "検出には最長 {secondsAgo} 秒かかる場合がありますが、引き続きバックグラウンドで {timePeriod} 秒ごとに確認します。",
-    "xpack.monitoring.metricbeatMigration.beatsInstructions.partiallyMigratedStatusTitle": "現在も Beat の内部収集からデータが送信されています。",
     "xpack.monitoring.metricbeatMigration.beatsInstructions.startMetricbeatLinkText": "こちらの手順に従ってください",
     "xpack.monitoring.metricbeatMigration.beatsInstructions.startMetricbeatTitle": "Metricbeat を起動します",
-    "xpack.monitoring.metricbeatMigration.beatsInstructions.statusTitle": "移行ステータス",
-    "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.statusTitleNewUser": "監視ステータス",
-    "xpack.monitoring.metricbeatMigration.flyout.flyoutTitleNewUser": "Metricbeat で {instanceName} {instanceType} を監視",
-    "xpack.monitoring.metricbeatMigration.flyout.instance": "インスタンス",
-    "xpack.monitoring.metricbeatMigration.flyout.noClusterUuidCheckboxLabel": "はい、\n                  この {productName} {typeText} スタンドアロンクラスターを調べる必要があることを理解しています。",
-    "xpack.monitoring.metricbeatMigration.flyout.noClusterUuidDescription": "この {productName} {typeText} は Elasticsearch クラスターに接続されていないため、完全に移行された時点で、この {productName} {typeText} はこのクラスターではなくスタンドアロンクラスターに表示されます。 {link}",
     "xpack.monitoring.metricbeatMigration.flyout.noClusterUuidTitle": "クラスターが検出されてませんでした",
-    "xpack.monitoring.metricbeatMigration.flyout.node": "ノード",
-    "xpack.monitoring.metricbeatMigration.kibanaInstructions.statusTitleNewUser": "監視ステータス",
     "xpack.monitoring.metricbeatMigration.logstashInstructions.configureMetricbeatDescription": "{file} にこれらの変更を加えます。",
     "xpack.monitoring.metricbeatMigration.logstashInstructions.configureMetricbeatTitle": "Metricbeat を構成して監視クラスターに送ります",
-    "xpack.monitoring.metricbeatMigration.logstashInstructions.disableInternalCollection.checkingStatusButtonLabel": "確認中...",
-    "xpack.monitoring.metricbeatMigration.logstashInstructions.disableInternalCollection.checkStatusButtonLabel": "確認",
     "xpack.monitoring.metricbeatMigration.logstashInstructions.disableInternalCollection.description": "Logstash 構成ファイル ({file}) に次の設定を追加します:",
-    "xpack.monitoring.metricbeatMigration.logstashInstructions.disableInternalCollection.fullyMigratedStatusDescription": "内部収集からのドキュメントがありません。移行完了！",
-    "xpack.monitoring.metricbeatMigration.logstashInstructions.disableInternalCollection.fullyMigratedStatusTitle": "お疲れさまでした！",
     "xpack.monitoring.metricbeatMigration.logstashInstructions.disableInternalCollection.note": "この変更後、Logstash の再起動が必要です。",
-    "xpack.monitoring.metricbeatMigration.logstashInstructions.disableInternalCollection.partiallyMigratedStatusDescription": "最後の内部収集は {secondsSinceLastInternalCollectionLabel} 前に行われました。",
-    "xpack.monitoring.metricbeatMigration.logstashInstructions.disableInternalCollection.statusDescription": "内部収集からのドキュメントがないことを確認してください。",
     "xpack.monitoring.metricbeatMigration.logstashInstructions.disableInternalCollection.title": "Logstash 監視メトリックの内部収集を無効にする",
     "xpack.monitoring.metricbeatMigration.logstashInstructions.enableMetricbeatModuleDescription": "モジュールはデフォルトで http://localhost:9600 から Logstash 監視メトリックを収集します。ローカル Logstash インスタンスのアドレスが異なる場合は、{file} ファイルの {hosts} 設定で指定する必要があります。",
     "xpack.monitoring.metricbeatMigration.logstashInstructions.enableMetricbeatModuleTitle": "Metricbeat の Logstash X-Pack もウールの有効化と構成",
-    "xpack.monitoring.metricbeatMigration.logstashInstructions.fullyMigratedStatusDescription": "Metricbeat から監視データが送信され始めました！",
-    "xpack.monitoring.metricbeatMigration.logstashInstructions.fullyMigratedStatusTitle": "お疲れさまでした！",
     "xpack.monitoring.metricbeatMigration.logstashInstructions.installMetricbeatLinkText": "こちらの手順に従ってください",
     "xpack.monitoring.metricbeatMigration.logstashInstructions.installMetricbeatTitle": "Metricbeat を Logstash と同じサーバーにインストール",
-    "xpack.monitoring.metricbeatMigration.logstashInstructions.isInternalCollectorStatusTitle": "この Metricbeat ノードの Metricbeat からの監視データが検出されていません。\n            引き続きバックグラウンドで確認を続けます。",
-    "xpack.monitoring.metricbeatMigration.logstashInstructions.metricbeatSecuritySetup": "セキュリティ機能が有効な場合、追加セットアップが必要な可能性があります。{link}",
-    "xpack.monitoring.metricbeatMigration.logstashInstructions.metricbeatSecuritySetupLinkText": "詳細をご覧ください。",
-    "xpack.monitoring.metricbeatMigration.logstashInstructions.partiallyMigratedStatusDescription": "検出には最長 {secondsAgo} 秒かかる場合がありますが、引き続きバックグラウンドで {timePeriod} 秒ごとに確認します。",
-    "xpack.monitoring.metricbeatMigration.logstashInstructions.partiallyMigratedStatusTitle": "現在も Logstash の内部収集からデータが送信されています。",
     "xpack.monitoring.metricbeatMigration.logstashInstructions.startMetricbeatLinkText": "こちらの手順に従ってください",
     "xpack.monitoring.metricbeatMigration.logstashInstructions.startMetricbeatTitle": "Metricbeat を起動します",
-    "xpack.monitoring.metricbeatMigration.logstashInstructions.statusTitle": "移行ステータス",
     "xpack.monitoring.noData.blurbs.cloudDeploymentDescription": "次の場所に戻ってください: ",
     "xpack.monitoring.noData.blurbs.cloudDeploymentDescriptionMore": "Elastic Cloud での監視の詳細は、 ",
     "xpack.monitoring.noData.blurbs.cloudDeploymentTitle": "監視データはこちらに表示されません。",
     "xpack.monitoring.noData.explanations.exportersCloudDescription": "Elastic Cloud では、監視データが専用の監視クラスターに格納されます。",
-    "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.isInternalCollectorStatusTitle": "この Elasticsearch ノードの Metricbeat からの監視データが検出されていません。\n            引き続きバックグラウンドで確認を続けます。",
-    "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.partiallyMigratedStatusDescription": "検出には最長 {secondsAgo} 秒かかる場合がありますが、引き続きバックグラウンドで確認します。",
-    "xpack.monitoring.metricbeatMigration.kibanaInstructions.isInternalCollectorStatusTitle": "この Kibana インスタンスの Metricbeat からの監視データが検出されていません。\n            引き続きバックグラウンドで確認を続けます。",
     "xpack.remoteClusters.addAction.clusterNameAlreadyExistsErrorMessage": "「{clusterName}」という名前のクラスターが既に存在します。",
     "xpack.remoteClusters.addAction.errorTitle": "クラスターの追加中にエラーが発生",
     "xpack.remoteClusters.addAction.failedDefaultErrorMessage": "{statusCode} エラーでリクエスト失敗: {message}",
@@ -9553,7 +9420,7 @@
     "xpack.security.loginPage.requiresSecureConnectionTitle": "ログインにはセキュアな接続が必要です",
     "xpack.security.loginPage.unknownLayoutMessage": "詳細は Kibana ログを確認し、ページを更新して再試行してください。",
     "xpack.security.loginPage.unknownLayoutTitle": "サポートされていないログインフォームレイアウト。",
-    "xpack.security.loginPage.welcomeDescription": "Elastic Stack へのi入口",
+    "xpack.security.loginPage.welcomeDescription": "Elastic Stack への入口",
     "xpack.security.loginPage.welcomeTitle": "Kibana へようこそ",
     "xpack.security.loginPage.xpackUnavailableMessage": "この Kibana ディストリビューションの無料の機能をすべて使用するには、デフォルトの Elasticsearch をアップデートしてください。",
     "xpack.security.loginPage.xpackUnavailableTitle": "現在 Kibana に構成されている Elasticsearch クラスターへの接続をキャンセルします。",
@@ -10383,10 +10250,6 @@
     "xpack.siem.kpiNetwork.uniquePrivateIps.sourceChartLabel": "Src.",
     "xpack.siem.kpiNetwork.uniquePrivateIps.sourceUnitLabel": "ソース",
     "xpack.siem.kpiNetwork.uniquePrivateIps.title": "固有のプライベート IP",
-    "xpack.siem.loadMoreTable.loadingButtonLabel": "読み込み中…",
-    "xpack.siem.loadMoreTable.loadMoreButtonLabel": "さらに読み込む",
-    "xpack.siem.loadMoreTable.rowsButtonLabel": "ページごとの行数",
-    "xpack.siem.loadMoreTable.showingSubtitle": "表示中",
     "xpack.siem.ml.score.anomalousEntityTitle": "異常エンティティ",
     "xpack.siem.ml.table.timestampTitle": "タイムスタンプ",
     "xpack.siem.modalAllErrors.close.button": "閉じる",
@@ -10924,7 +10787,6 @@
     "xpack.snapshotRestore.policyForm.stepSettings.indicesToggleListLink": "インデックスを選択",
     "xpack.snapshotRestore.policyForm.stepSettings.partialDescription": "利用不可能なプライマリシャードのインデックスのスナップショットを許可します。これが設定されていない場合、スナップショット全体がエラーになります。",
     "xpack.snapshotRestore.policyForm.stepSettings.partialDescriptionTitle": "部分インデックスを許可",
-    "xpack.snapshotRestore.policyForm.stepSettings.partialLabel": "部分インデックスを許可",
     "xpack.snapshotRestore.policyForm.stepSettings.policyIncludeGlobalStateLabel": "グローバルステータスを含める",
     "xpack.snapshotRestore.policyForm.stepSettings.selectAllIndicesLink": "すべて選択",
     "xpack.snapshotRestore.policyForm.stepSettings.selectIndicesHelpText": "{count} 件の{count, plural, one {インデックス} other {インデックス}}がバックアップされます。{selectOrDeselectAllLink}",
@@ -10956,12 +10818,6 @@
     "xpack.snapshotRestore.policyList.table.snapshotNameColumnTitle": "スナップショット名",
     "xpack.snapshotRestore.policyScheduleWarningDescription": "一度に 1 つのスナップショットしか撮影できません。スナップショットのエラーを避けるために、ポリシーを編集または削除してください。",
     "xpack.snapshotRestore.policyScheduleWarningTitle": "2 つ以上のポリシーに同じスケジュールが設定されています",
-    "xpack.snapshotRestore.policyValidation.indexPatternRequiredError": "インデックスパターンが最低 1 つ必要です。",
-    "xpack.snapshotRestore.policyValidation.indicesRequiredError": "1 つ以上のインデックスを選択する必要があります。",
-    "xpack.snapshotRestore.policyValidation.nameRequiredError": "ポリシー名が必要です。",
-    "xpack.snapshotRestore.policyValidation.repositoryRequiredError": "レポジトリが必要です。",
-    "xpack.snapshotRestore.policyValidation.scheduleRequiredError": "スケジュールが必要です。",
-    "xpack.snapshotRestore.policyValidation.snapshotNameRequiredError": "スナップショット名が必要です。",
     "xpack.snapshotRestore.repositories.breadcrumbTitle": "レポジトリ",
     "xpack.snapshotRestore.repositoryList.table.typeFilterLabel": "タイプ",
     "xpack.snapshotRestore.restoreForm.stepLogistics.indicesPatternLabel": "インデックスパターン",
@@ -11086,8 +10942,6 @@
     "xpack.spaces.spaceSelector.findSpacePlaceholder": "スペースを検索",
     "xpack.spaces.spaceSelector.noSpacesMatchSearchCriteriaDescription": "検索条件に一致するスペースがありません",
     "xpack.spaces.spaceSelector.selectSpacesTitle": "スペースの選択",
-    "xpack.spaces.spacesManager.unableToChangeSpaceWarningDescription": "後程再試行してください",
-    "xpack.spaces.spacesManager.unableToChangeSpaceWarningTitle": "スペースを変更できません",
     "xpack.spaces.spacesTitle": "スペース",
     "xpack.spaces.management.copyToSpace.actionDescription": "この保存されたオブジェクトを 1 つまたは複数のスペースにコピーします。",
     "xpack.spaces.management.copyToSpace.actionTitle": "スペースにコピー",
@@ -11534,4 +11388,4 @@
     "xpack.fileUpload.fileParser.noFileProvided": "エラー、ファイルが提供されていません",
     "xpack.fileUpload.jsonIndexFilePicker.errorGettingIndexName": "インデックス名の取得中にエラーが発生: {errorMessage}"
   }
-}
+}
\ No newline at end of file
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index 7bcabe581fe771..79cba3ee696be8 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -836,7 +836,6 @@
     "data.query.queryBar.luceneLanguageName": "Lucene",
     "data.query.queryBar.luceneSyntaxWarningMessage": "尽管您选择了 Kibana 查询语言 (KQL)，但似乎您正在尝试使用 Lucene 查询语法。请查看 KQL 文档 {link}。",
     "data.query.queryBar.luceneSyntaxWarningTitle": "Lucene 语法警告",
-    "data.query.queryBar.searchInputAriaLabel": "您位于 {previouslyTranslatedPageTitle} 页面的搜索框中。开始键入，以搜索并筛选 {pageType}",
     "data.query.queryBar.searchInputPlaceholder": "搜索",
     "data.query.queryBar.syntaxOptionsDescription": "{docsLink} (KQL) 提供简化查询语法并支持脚本字段。如果您具有基本许可或更高级别的许可，KQL 还提供自动填充功能。如果关闭 KQL，Kibana 将使用 Lucene。",
     "data.query.queryBar.syntaxOptionsDescription.docsLinkText": "此处",
@@ -890,7 +889,6 @@
     "embeddableApi.customizeTitle.optionsMenuForm.resetCustomDashboardButtonLabel": "重置标题",
     "embeddableApi.errors.embeddableFactoryNotFound": "{type} 无法加载。请升级到具有适当许可的默认 Elasticsearch 和 Kibana 分发。",
     "embeddableApi.errors.paneldoesNotExist": "未找到面板",
-    "embeddableApi.panel.dashboardPanelAriaLabel": "仪表板面板：{title}",
     "embeddableApi.panel.editPanel.displayName": "编辑 {value}",
     "embeddableApi.panel.inspectPanel.displayName": "检查",
     "embeddableApi.panel.optionsMenu.panelOptionsButtonAriaLabel": "面板选项",
@@ -1536,7 +1534,6 @@
     "kbn.discover.fieldChooser.fieldCalculator.fieldIsNotPresentInDocumentsErrorMessage": "此字段在您的 Elasticsearch 映射中，但不在文档表中显示的 {hitsLength} 个文档中。您可能仍能够基于其进行可视化或搜索。",
     "kbn.discover.fieldChooser.filter.aggregatableLabel": "可聚合",
     "kbn.discover.fieldChooser.filter.availableFieldsTitle": "可用字段",
-    "kbn.discover.fieldChooser.filter.fieldNameLabel": "字段名称",
     "kbn.discover.fieldChooser.filter.hideMissingFieldsLabel": "隐藏缺失字段",
     "kbn.discover.fieldChooser.filter.indexAndFieldsSectionAriaLabel": "索引和字段",
     "kbn.discover.fieldChooser.filter.popularTitle": "常用",
@@ -1582,7 +1579,6 @@
     "kbn.discover.notifications.savedSearchTitle": "搜索 “{savedSearchTitle}” 已保存",
     "kbn.discover.painlessError.painlessScriptedFieldErrorMessage": "Painless 脚本字段 “{script}” 有错误。",
     "kbn.discover.rootBreadcrumb": "Discover",
-    "kbn.discover.savedSearch.newSavedSearchTitle": "新保存的搜索",
     "kbn.discover.savedSearch.savedObjectName": "已保存搜索",
     "kbn.discover.scaledToDescription": "已缩放至 {bucketIntervalDescription}",
     "kbn.discover.searchingTitle": "正在搜索",
@@ -2427,7 +2423,6 @@
     "kbn.visualize.badge.readOnly.text": "只读",
     "kbn.visualize.badge.readOnly.tooltip": "无法保存可视化",
     "kbn.visualize.createVisualization.noIndexPatternOrSavedSearchIdErrorMessage": "必须提供 indexPattern 或 savedSearchId",
-    "kbn.visualize.defaultVisualizationTitle": "新建可视化",
     "kbn.visualize.disabledLabVisualizationMessage": "请在高级设置中打开实验室模式，以查看实验室可视化。",
     "kbn.visualize.disabledLabVisualizationTitle": "{title} 为实验室可视化。",
     "kbn.visualize.editor.createBreadcrumb": "创建",
@@ -4525,7 +4520,6 @@
     "xpack.graph.savedWorkspace.workspaceNameTitle": "新建 Graph 工作空间",
     "xpack.graph.savedWorkspaces.graphWorkspaceLabel": "Graph 工作空间",
     "xpack.graph.savedWorkspaces.graphWorkspacesLabel": "Graph 工作空间",
-    "xpack.graph.saveWorkspace.disabledWarning": "已禁用保存",
     "xpack.graph.saveWorkspace.successNotification.noDataSavedText": "配置会被保存，但不保存数据",
     "xpack.graph.saveWorkspace.successNotificationTitle": "已保存“{workspaceTitle}”",
     "xpack.graph.serverSideErrors.expiredLicenseErrorMessage": "Graph 不可用 - 许可已过期。",
@@ -5324,18 +5318,8 @@
     "xpack.infra.header.logsTitle": "Logs",
     "xpack.infra.homePage.settingsTabTitle": "设置",
     "xpack.infra.kibanaMetrics.cloudIdMissingErrorMessage": "{metricId} 的模型需要云 ID，但没有为 {nodeId} 提供。",
-    "xpack.infra.logs.analysis.logRateSection.table.actualLogEntryRateLabel": "实际速率",
-    "xpack.infra.logs.analysis.logRateSection.table.anomalyScoreLabel": "异常分数",
-    "xpack.infra.logs.analysis.logRateSection.table.startTimeLabel": "开始时间",
-    "xpack.infra.logs.analysis.logRateSection.table.typicalLogEntryRateLabel": "通常速率",
-    "xpack.infra.logs.analysis.logRateSection.viewSwitcher.chartLabel": "速率图表",
-    "xpack.infra.logs.analysis.logRateSection.viewSwitcher.legendLabel": "在日志速率图表和异常表视图间切换",
-    "xpack.infra.logs.analysis.logRateSection.viewSwitcher.tableLabel": "异常表",
-    "xpack.infra.logs.analysis.logRateSectionAnomalySeriesName": "异常",
-    "xpack.infra.logs.analysis.logRateSectionAreaSeriesName": "预期",
     "xpack.infra.logs.analysis.logRateSectionLineSeriesName": "每 15 分钟日志条目数（平均值）",
     "xpack.infra.logs.analysis.logRateSectionLoadingAriaLabel": "正在加载日志速率结果",
-    "xpack.infra.logs.analysis.logRateSectionModelBoundsCheckboxLabel": "显示模型边界",
     "xpack.infra.logs.analysis.logRateSectionNoDataBody": "您可能想调整时间范围。",
     "xpack.infra.logs.analysis.logRateSectionNoDataTitle": "没有可显示的数据。",
     "xpack.infra.logs.analysis.logRateSectionTitle": "日志速率",
@@ -5885,9 +5869,7 @@
     "xpack.maps.source.wms.attributionText": "属性 url 必须附带文本",
     "xpack.maps.style.customColorRampLabel": "定制颜色渐变",
     "xpack.maps.toolbarOverlay.drawBounds.initialGeometryLabel": "边界",
-    "xpack.maps.toolbarOverlay.drawBounds.onSubmitButtonLabel": "绘制边界",
     "xpack.maps.toolbarOverlay.drawShape.initialGeometryLabel": "形状",
-    "xpack.maps.toolbarOverlay.drawShape.onSubmitButtonLabel": "绘制形状",
     "xpack.maps.tooltip.geometryFilterForm.createFilterButtonLabel": "创建筛选",
     "xpack.maps.tooltip.pageNumerText": "第 {pageNumber} 项功能，总计 {total} 项",
     "xpack.maps.tooltip.showGeometryFilterViewLinkLabel": "按几何筛选",
@@ -7189,8 +7171,6 @@
     "xpack.ml.newJob.simple.watcher.email.timeLabel": "时间",
     "xpack.ml.newJob.simple.watcher.email.topInfluencersLabel": "排在前面的影响因素：",
     "xpack.ml.newJob.simple.watcher.email.topRecordsLabel": "排在前面的记录：",
-    "xpack.ml.newJob.wizard.createFromNewSearchTitle": "基于“新搜索”，选择“索引”",
-    "xpack.ml.newJob.wizard.createFromSavedSearchTitle": "或者，基于“已保存的搜索”",
     "xpack.ml.newJob.wizard.jobType.advancedAriaLabel": "高级作业",
     "xpack.ml.newJob.wizard.jobType.advancedDescription": "使用全部选项为更高级的用例创建作业。",
     "xpack.ml.newJob.wizard.jobType.advancedTitle": "高级",
@@ -7219,7 +7199,6 @@
     "xpack.ml.newJob.wizard.jobType.useSuppliedConfigurationTitle": "使用提供的配置",
     "xpack.ml.newJob.wizard.jobType.useWizardDescription": "使用其中一个向导创建 Machine Learning 作业，以查找数据中的异常。",
     "xpack.ml.newJob.wizard.jobType.useWizardTitle": "使用向导",
-    "xpack.ml.newJob.wizard.savedSearchesTooltip": "已保存的搜索",
     "xpack.ml.privilege.licenseHasExpiredTooltip": "您的许可证已过期。",
     "xpack.ml.privilege.noPermission.createCalendarsTooltip": "您没有权限创建日历。",
     "xpack.ml.privilege.noPermission.createDataFrameTransformTooltip": "您无权创建数据帧转换。",
@@ -8185,9 +8164,6 @@
     "xpack.monitoring.elasticsearch.nodes.diskFreeSpaceColumnTitle": "磁盘可用空间",
     "xpack.monitoring.elasticsearch.nodes.jvmMemoryColumnTitle": "{javaVirtualMachine} 内存",
     "xpack.monitoring.elasticsearch.nodes.loadAverageColumnTitle": "负载平均值",
-    "xpack.monitoring.elasticsearch.nodes.metribeatMigration.disableInternalCollectionDescription": "系统将使用 Metricbeat 监测所有 Elasticsearch 服务器，\n                但您需要禁用内部收集以完成迁移。",
-    "xpack.monitoring.elasticsearch.nodes.metribeatMigration.disableInternalCollectionMigrationButtonLabel": "禁用并完成迁移",
-    "xpack.monitoring.elasticsearch.nodes.metribeatMigration.disableInternalCollectionTitle": "禁用内部收集以完成迁移",
     "xpack.monitoring.elasticsearch.nodes.monitoringTablePlaceholder": "筛选节点……",
     "xpack.monitoring.elasticsearch.nodes.nameColumnTitle": "名称",
     "xpack.monitoring.elasticsearch.nodes.routeTitle": "Elasticsearch - 节点",
@@ -8255,10 +8231,6 @@
     "xpack.monitoring.euiTable.isFullyMigratedLabel": "Metricbeat 收集",
     "xpack.monitoring.euiTable.isInternalCollectorLabel": "内部收集",
     "xpack.monitoring.euiTable.isPartiallyMigratedLabel": "内部收集和 Metricbeat 收集",
-    "xpack.monitoring.euiTable.migrateButtonLabel": "迁移",
-    "xpack.monitoring.euiTable.migrationStatusUnknown": "不适用",
-    "xpack.monitoring.euiTable.setupActionTitle": "设置操作",
-    "xpack.monitoring.euiTable.setupStatusTitle": "设置状态",
     "xpack.monitoring.feature.reserved.description": "要向用户授予访问权限，还应分配 monitoring_user 角色。",
     "xpack.monitoring.featureRegistry.monitoringFeatureName": "堆栈监测",
     "xpack.monitoring.formatNumbers.notAvailableLabel": "不适用",
@@ -8380,58 +8352,32 @@
     "xpack.monitoring.logstashNavigation.pipelineVersionDescription": "活动版本 {relativeLastSeen} 和首次看到 {relativeFirstSeen}",
     "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.configureMetricbeatDescription": "在 {file} 文件中进行这些更改。",
     "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.configureMetricbeatTitle": "配置 Metricbeat 以发送至监测集群",
-    "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.disableInternalCollection.fullyMigratedStatusDescription": "我们未看到任何来自内部收集的文档。迁移完成！",
-    "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.disableInternalCollection.fullyMigratedStatusTitle": "恭喜您！",
-    "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.disableInternalCollection.partiallyMigratedStatusDescription": "上次内部收集发生于 {secondsSinceLastInternalCollectionLabel}前。",
     "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.disableInternalCollectionDescription": "禁用 Elasticsearch 监测指标的内部收集。在生产集群中的每个服务器上将 {monospace} 设置为 false。",
     "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.disableInternalCollectionTitle": "禁用 Elasticsearch 监测指标的内部收集",
     "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.enableMetricbeatModuleDescription": "默认情况下，该模块将从 {url} 收集 Elasticsearch 监测指标。如果本地 Elasticsearch 服务器有不同的地址，则必须通过 {module} 文件中的 hosts 设置来进行指定。",
     "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.enableMetricbeatModuleTitle": "在 Metricbeat 中启用并配置 Elasticsearch x-pack 模块",
-    "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.fullyMigratedStatusDescription": "我们现在看到来自 Metricbeat 的监测数据传送！",
-    "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.fullyMigratedStatusTitle": "恭喜您！",
     "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.installMetricbeatLinkText": "按照此处的说明执行操作",
     "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.installMetricbeatTitle": "在安装 Elasticsearch 的同一台服务器上安装 Metricbeat",
-    "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.metricbeatSecuritySetup": "如果已启用安全功能，则可能需要更多的设置。{link}",
-    "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.metricbeatSecuritySetupLinkText": "查看更多信息。",
-    "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.partiallyMigratedStatusTitle": "我们仍看到数据来自 Elasticsearch 的内部收集。",
     "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.startMetricbeatLinkText": "按照此处的说明执行操作",
     "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.startMetricbeatTitle": "启动 Metricbeat",
-    "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.statusTitle": "迁移状态",
     "xpack.monitoring.metricbeatMigration.flyout.closeButtonLabel": "关闭",
     "xpack.monitoring.metricbeatMigration.flyout.doneButtonLabel": "完成",
-    "xpack.monitoring.metricbeatMigration.flyout.elasticsearchNode": "节点",
-    "xpack.monitoring.metricbeatMigration.flyout.elasticsearchNodesTitle": "Elasticsearch 节点",
-    "xpack.monitoring.metricbeatMigration.flyout.flyoutTitle": "将 {instanceName} {instanceType} 迁移到 Metricbeat",
-    "xpack.monitoring.metricbeatMigration.flyout.kibanaInstance": "实例",
     "xpack.monitoring.metricbeatMigration.flyout.nextButtonLabel": "下一个",
     "xpack.monitoring.metricbeatMigration.flyout.step1.monitoringUrlHelpText": "这通常是单个实例，但如果您有多个，请输入所有实例 url，以逗号分隔。\n                切记运行的 Metricbeat 实例需要能够与这些 Elasticsearch 实例通信。",
     "xpack.monitoring.metricbeatMigration.flyout.step1.monitoringUrlLabel": "监测集群 URL",
     "xpack.monitoring.metricbeatMigration.kibanaInstructions.configureMetricbeatDescription": "在 {file} 文件中进行这些更改。",
     "xpack.monitoring.metricbeatMigration.kibanaInstructions.configureMetricbeatTitle": "配置 Metricbeat 以发送至监测集群",
-    "xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.checkingStatusButtonLabel": "正在检查......",
-    "xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.checkStatusButtonLabel": "检查",
     "xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.description": "在 Kibana 配置文件 ({file}) 中添加以下设置：",
-    "xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.fullyMigratedStatusDescription": "我们未看到任何来自内部收集的文档。迁移完成！",
-    "xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.fullyMigratedStatusTitle": "恭喜您！",
     "xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.note": "将 {config} 设置为其默认值 ({defaultValue})。",
-    "xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.partiallyMigratedStatusDescription": "上次内部收集发生于 {secondsSinceLastInternalCollectionLabel}前。",
     "xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.restartNote": "此步骤需要您重新启动 Kibana 服务器。在服务器再次运行之前应会看到错误。",
     "xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.restartWarningTitle": "警告",
-    "xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.statusDescription": "确认没有文档来自内部收集。",
     "xpack.monitoring.metricbeatMigration.kibanaInstructions.disableInternalCollection.title": "禁用 Kibana 监测指标的内部收集",
     "xpack.monitoring.metricbeatMigration.kibanaInstructions.enableMetricbeatModuleDescription": "该模块将默认从 http://localhost:5601 收集 Kibana 监测指标。如果本地 Kibana 实例有不同的地址，则必须通过 {file} 文件中的 {hosts} 设置进行指定。",
     "xpack.monitoring.metricbeatMigration.kibanaInstructions.enableMetricbeatModuleTitle": "在 Metricbeat 中启用并配置 Kibana x-pack 模块",
-    "xpack.monitoring.metricbeatMigration.kibanaInstructions.fullyMigratedStatusDescription": "我们现在看到来自 Metricbeat 的监测数据传送！",
-    "xpack.monitoring.metricbeatMigration.kibanaInstructions.fullyMigratedStatusTitle": "恭喜您！",
     "xpack.monitoring.metricbeatMigration.kibanaInstructions.installMetricbeatLinkText": "按照此处的说明执行操作",
     "xpack.monitoring.metricbeatMigration.kibanaInstructions.installMetricbeatTitle": "在安装 Kibana 的同一台服务器上安装 Metricbeat",
-    "xpack.monitoring.metricbeatMigration.kibanaInstructions.metricbeatSecuritySetup": "如果已启用安全功能，则可能需要更多的设置。{link}",
-    "xpack.monitoring.metricbeatMigration.kibanaInstructions.metricbeatSecuritySetupLinkText": "查看更多信息。",
-    "xpack.monitoring.metricbeatMigration.kibanaInstructions.partiallyMigratedStatusDescription": "请注意，检测最多花费 {secondsAgo} 秒，但我们在后台每 {timePeriod} 秒检查一次。",
-    "xpack.monitoring.metricbeatMigration.kibanaInstructions.partiallyMigratedStatusTitle": "我们仍看到数据来自 Kibana 的内部收集。",
     "xpack.monitoring.metricbeatMigration.kibanaInstructions.startMetricbeatLinkText": "按照此处的说明执行操作",
     "xpack.monitoring.metricbeatMigration.kibanaInstructions.startMetricbeatTitle": "启动 Metricbeat",
-    "xpack.monitoring.metricbeatMigration.kibanaInstructions.statusTitle": "迁移状态",
     "xpack.monitoring.metrics.apm.outputAckedEventsRate.ackedDescription": "输出处理的事件（包括重试）",
     "xpack.monitoring.metrics.apm.outputAckedEventsRate.ackedLabel": "已确认",
     "xpack.monitoring.metrics.apm.outputAckedEventsRateTitle": "输出已确认事件速率",
@@ -8971,131 +8917,52 @@
     "xpack.monitoring.summaryStatus.statusIconLabel": "状态：{status}",
     "xpack.monitoring.summaryStatus.statusIconTitle": "状态：{statusIcon}",
     "xpack.monitoring.uiExportsDescription": "Elastic Stack 的 Monitoring 组件",
-    "xpack.monitoring.apm.instances.metricbeatMigration.detectedInstanceDescription": "基于您的索引，我们认为您可能有 APM Server。单击下面的“设置监测”\n              按钮以开始监测此 APM Server。",
-    "xpack.monitoring.apm.instances.metricbeatMigration.detectedInstanceTitle": "检测到 APM Server",
-    "xpack.monitoring.apm.metricbeatMigration.setupNewButtonLabel": "为新的 APM Server 设置监测",
-    "xpack.monitoring.beats.instances.metricbeatMigration.detectedInstanceDescription": "基于您的索引，我们认为您可能有 Beats 实例。单击下面的“设置监测”\n                按钮以开始监测此实例。",
-    "xpack.monitoring.beats.instances.metricbeatMigration.detectedInstanceTitle": "检测到 Beats 实例",
-    "xpack.monitoring.beats.metricbeatMigration.setupNewButtonLabel": "为新的 Beats 实例设置监测",
     "xpack.monitoring.chart.timeSeries.zoomOut": "缩小",
-    "xpack.monitoring.cluster.overview.apmPanel.setupModeNodesTooltip.disableInternal": "正在使用 Metricbeat 监测所有服务器，但内部收集仍需要\n          关闭。单击旗帜图标可访问服务器列表页面以及禁用内部收集。",
-    "xpack.monitoring.cluster.overview.apmPanel.setupModeNodesTooltip.oneInternal": "至少有一个服务器未使用 Metricbeat 进行监测。单击旗帜\n          图标可访问服务器列表页面以及详细了解每个服务器的状态。",
-    "xpack.monitoring.cluster.overview.beatsPanel.setupModeNodesTooltip.disableInternal": "正在使用 Metricbeat 监测所有实例，但内部收集仍需要\n          关闭。单击旗帜图标可访问实例列表页面以及禁用内部收集。",
-    "xpack.monitoring.cluster.overview.beatsPanel.setupModeNodesTooltip.oneInternal": "至少有一个实例未使用 Metricbeat 进行监测。单击旗帜\n          图标可访问实例列表页面以及详细了解每个实例的状态。",
-    "xpack.monitoring.cluster.overview.elasticsearchPanel.setupModeNodesTooltip.disableInternal": "正在使用 Metricbeat 监测所有节点，但内部收集仍需要关闭。单击\n          旗帜图标可访问节点列表页面以及禁用内部收集。",
-    "xpack.monitoring.cluster.overview.elasticsearchPanel.setupModeNodesTooltip.oneInternal": "至少有一个节点未使用 Metricbeat 进行监测。单击旗帜图标可访问节点\n          列表页面以及详细了解每个节点的状态。",
-    "xpack.monitoring.cluster.overview.kibanaPanel.setupModeNodesTooltip.disableInternal": "正在使用 Metricbeat 监测所有实例，但内部收集仍需要\n          关闭。单击旗帜图标可访问实例列表页面以及禁用内部收集。",
-    "xpack.monitoring.cluster.overview.kibanaPanel.setupModeNodesTooltip.oneInternal": "至少有一个实例未使用 Metricbeat 进行监测。单击旗帜\n          图标可访问实例列表页面以及详细了解每个实例的状态。",
-    "xpack.monitoring.cluster.overview.logstashPanel.setupModeNodesTooltip.disableInternal": "正在使用 Metricbeat 监测所有节点，但内部收集仍需要\n          关闭。单击旗帜图标可访问节点列表页面以及禁用内部收集。",
-    "xpack.monitoring.cluster.overview.logstashPanel.setupModeNodesTooltip.oneInternal": "至少有一个节点未使用 Metricbeat 进行监测。单击旗帜\n          图标可访问节点列表页面以及详细了解每个节点的状态。",
-    "xpack.monitoring.elasticsearch.metricbeatMigration.setupNewButtonLabel": "为新的 Elasticsearch 节点设置监测",
-    "xpack.monitoring.elasticsearch.nodes.metribeatMigration.netNewUserDescription": "我们未检测到任何监测数据，但我们却检测到以下 Elasticsearch 节点。\n                检测到的每个节点与相应的“设置”按钮在下面一起列出。单击此按钮，系统将指导您完成\n                为每个节点启用监测的过程。",
-    "xpack.monitoring.elasticsearch.nodes.metribeatMigration.netNewUserTitle": "未检测到任何监测数据",
     "xpack.monitoring.errors.monitoringLicenseErrorDescription": "无法找到集群“{clusterId}”的许可信息。请在集群的主节点服务器日志中查看相关错误或警告。",
     "xpack.monitoring.errors.monitoringLicenseErrorTitle": "监测许可错误",
-    "xpack.monitoring.euiTable.isNetNewUserLabel": "未检测到监测",
-    "xpack.monitoring.euiTable.setupButtonLabel": "设置",
-    "xpack.monitoring.kibana.metricbeatMigration.setupNewButtonLabel": "为新的 Kibana 实例设置监测",
-    "xpack.monitoring.kibana.nodes.metribeatMigration.netNewUserDescription": "我们未检测到任何监测数据，但我们却检测到以下 Kibana 实例。\n                  该检测到的实例与相应的“设置”按钮在下面一起列出。单击此按钮，系统将指导您完成\n                  为此实例启用监测的过程。",
-    "xpack.monitoring.kibana.nodes.metribeatMigration.netNewUserTitle": "未检测到任何监测数据",
     "xpack.monitoring.logs.reason.defaultMessage": "我们未找到任何日志数据，我们无法诊断原因。{link}",
     "xpack.monitoring.logs.reason.defaultMessageLink": "请确认您的设置正确。",
     "xpack.monitoring.logs.reason.defaultTitle": "未找到任何日志数据",
-    "xpack.monitoring.logstash.metricbeatMigration.setupNewButtonLabel": "为新的 Logstash 节点设置监测",
-    "xpack.monitoring.logstash.nodes.metribeatMigration.netNewUserDescription": "基于您的索引，我们认为您可能有 Logstash 节点。单击下面的“设置监测”\n                按钮以开始监测此节点。",
-    "xpack.monitoring.logstash.nodes.metribeatMigration.netNewUserTitle": "未检测到任何监测数据",
     "xpack.monitoring.metricbeatMigration.apmInstructions.configureMetricbeatDescription": "在 {file} 文件中进行这些更改。",
     "xpack.monitoring.metricbeatMigration.apmInstructions.configureMetricbeatTitle": "配置 Metricbeat 以发送至监测集群",
-    "xpack.monitoring.metricbeatMigration.apmInstructions.disableInternalCollection.checkingStatusButtonLabel": "正在检查......",
-    "xpack.monitoring.metricbeatMigration.apmInstructions.disableInternalCollection.checkStatusButtonLabel": "检查",
     "xpack.monitoring.metricbeatMigration.apmInstructions.disableInternalCollection.description": "在 APM Server 的配置文件 ({file}) 中添加以下设置：",
-    "xpack.monitoring.metricbeatMigration.apmInstructions.disableInternalCollection.fullyMigratedStatusDescription": "我们未看到任何来自内部收集的文档。迁移完成！",
-    "xpack.monitoring.metricbeatMigration.apmInstructions.disableInternalCollection.fullyMigratedStatusTitle": "恭喜您！",
     "xpack.monitoring.metricbeatMigration.apmInstructions.disableInternalCollection.note": "进行此更改后，需要重新启动 APM Server。",
-    "xpack.monitoring.metricbeatMigration.apmInstructions.disableInternalCollection.partiallyMigratedStatusDescription": "上次内部收集发生于 {secondsSinceLastInternalCollectionLabel}前。",
-    "xpack.monitoring.metricbeatMigration.apmInstructions.disableInternalCollection.statusDescription": "确认没有文档来自内部收集。",
     "xpack.monitoring.metricbeatMigration.apmInstructions.disableInternalCollection.title": "禁用 APM Server 监测指标的内部收集",
     "xpack.monitoring.metricbeatMigration.apmInstructions.enableMetricbeatModuleDescription": "该模块将默认从 http://localhost:5066 收集 APM Server 监测指标。如果本地 APM Server 有不同的地址，则必须通过 {file} 文件中的 {hosts} 设置进行指定。",
     "xpack.monitoring.metricbeatMigration.apmInstructions.enableMetricbeatModuleTitle": "在 Metricbeat 中启用并配置 Beat x-pack 模块",
-    "xpack.monitoring.metricbeatMigration.apmInstructions.fullyMigratedStatusDescription": "我们现在看到来自 Metricbeat 的监测数据传送！",
-    "xpack.monitoring.metricbeatMigration.apmInstructions.fullyMigratedStatusTitle": "恭喜您！",
     "xpack.monitoring.metricbeatMigration.apmInstructions.installMetricbeatLinkText": "按照此处的说明执行操作",
     "xpack.monitoring.metricbeatMigration.apmInstructions.installMetricbeatTitle": "在安装 APM Server 的同一台服务器上安装 Metricbeat",
-    "xpack.monitoring.metricbeatMigration.apmInstructions.isInternalCollectorStatusTitle": "我们未检测到任何监测数据来自此 APM Server 的 Metricbeat。\n            我们将持续在后台检查。",
-    "xpack.monitoring.metricbeatMigration.apmInstructions.metricbeatSecuritySetup": "如果已启用安全功能，则可能需要更多的设置。{link}",
-    "xpack.monitoring.metricbeatMigration.apmInstructions.metricbeatSecuritySetupLinkText": "查看更多信息。",
-    "xpack.monitoring.metricbeatMigration.apmInstructions.partiallyMigratedStatusDescription": "请注意，检测最多花费 {secondsAgo} 秒，但我们在后台每 {timePeriod} 秒检查一次。",
-    "xpack.monitoring.metricbeatMigration.apmInstructions.partiallyMigratedStatusTitle": "我们仍看到数据来自此 APM Server 的内部收集。",
     "xpack.monitoring.metricbeatMigration.apmInstructions.startMetricbeatLinkText": "按照此处的说明执行操作",
     "xpack.monitoring.metricbeatMigration.apmInstructions.startMetricbeatTitle": "启动 Metricbeat",
-    "xpack.monitoring.metricbeatMigration.apmInstructions.statusTitle": "迁移状态",
     "xpack.monitoring.metricbeatMigration.beatsInstructions.configureMetricbeatDescription": "在 {file} 文件中进行这些更改。",
     "xpack.monitoring.metricbeatMigration.beatsInstructions.configureMetricbeatTitle": "配置 Metricbeat 以发送至监测集群",
-    "xpack.monitoring.metricbeatMigration.beatsInstructions.disableInternalCollection.checkingStatusButtonLabel": "正在检查......",
-    "xpack.monitoring.metricbeatMigration.beatsInstructions.disableInternalCollection.checkStatusButtonLabel": "检查",
     "xpack.monitoring.metricbeatMigration.beatsInstructions.disableInternalCollection.description": "在 {beatType} 的配置文件 ({file}) 中添加以下设置：",
-    "xpack.monitoring.metricbeatMigration.beatsInstructions.disableInternalCollection.fullyMigratedStatusDescription": "我们未看到任何来自内部收集的文档。迁移完成！",
-    "xpack.monitoring.metricbeatMigration.beatsInstructions.disableInternalCollection.fullyMigratedStatusTitle": "恭喜您！",
     "xpack.monitoring.metricbeatMigration.beatsInstructions.disableInternalCollection.note": "进行此更改后，您需要重新启动 {beatType}。",
-    "xpack.monitoring.metricbeatMigration.beatsInstructions.disableInternalCollection.partiallyMigratedStatusDescription": "上次内部收集发生于 {secondsSinceLastInternalCollectionLabel}前。",
-    "xpack.monitoring.metricbeatMigration.beatsInstructions.disableInternalCollection.statusDescription": "确认没有文档来自内部收集。",
     "xpack.monitoring.metricbeatMigration.beatsInstructions.disableInternalCollection.title": "禁用 {beatType} 监测指标的内部收集",
     "xpack.monitoring.metricbeatMigration.beatsInstructions.enableMetricbeatModuleDescription": "该模块将默认从 http://localhost:5066 收集 {beatType} 监测指标。如果正在监测的 {beatType} 实例有不同的地址，则必须通过 {file} 文件中的 {hosts} 设置进行指定。",
     "xpack.monitoring.metricbeatMigration.beatsInstructions.enableMetricbeatModuleHttpEnabledDirections": "要使 Metricbeat 从正在运行的 {beatType} 收集指标，需要{link}。",
     "xpack.monitoring.metricbeatMigration.beatsInstructions.enableMetricbeatModuleHttpEnabledDirectionsLinkText": "为正在监测的 {beatType} 实例启用 HTTP 终端节点",
     "xpack.monitoring.metricbeatMigration.beatsInstructions.enableMetricbeatModuleTitle": "在 Metricbeat 中启用并配置 Beat x-pack 模块",
-    "xpack.monitoring.metricbeatMigration.beatsInstructions.fullyMigratedStatusDescription": "我们现在看到来自 Metricbeat 的监测数据传送！",
-    "xpack.monitoring.metricbeatMigration.beatsInstructions.fullyMigratedStatusTitle": "恭喜您！",
     "xpack.monitoring.metricbeatMigration.beatsInstructions.installMetricbeatLinkText": "按照此处的说明执行操作",
     "xpack.monitoring.metricbeatMigration.beatsInstructions.installMetricbeatTitle": "在安装此 {beatType} 的同一台服务器上安装 Metricbeat",
-    "xpack.monitoring.metricbeatMigration.beatsInstructions.isInternalCollectorStatusTitle": "我们未检测到任何监测数据来自此 Beat 的 Metricbeat。\n            我们将持续在后台检查。",
-    "xpack.monitoring.metricbeatMigration.beatsInstructions.metricbeatSecuritySetup": "如果已启用安全功能，则可能需要更多的设置。{link}",
-    "xpack.monitoring.metricbeatMigration.beatsInstructions.metricbeatSecuritySetupLinkText": "查看更多信息。",
-    "xpack.monitoring.metricbeatMigration.beatsInstructions.partiallyMigratedStatusDescription": "请注意，检测最多花费 {secondsAgo} 秒，但我们在后台每 {timePeriod} 秒检查一次。",
-    "xpack.monitoring.metricbeatMigration.beatsInstructions.partiallyMigratedStatusTitle": "我们仍看到数据来自此 Beat 的内部收集。",
     "xpack.monitoring.metricbeatMigration.beatsInstructions.startMetricbeatLinkText": "按照此处的说明执行操作",
     "xpack.monitoring.metricbeatMigration.beatsInstructions.startMetricbeatTitle": "启动 Metricbeat",
-    "xpack.monitoring.metricbeatMigration.beatsInstructions.statusTitle": "迁移状态",
-    "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.statusTitleNewUser": "监测状态",
-    "xpack.monitoring.metricbeatMigration.flyout.flyoutTitleNewUser": "使用 Metricbeat 监测 {instanceName} {instanceType}",
-    "xpack.monitoring.metricbeatMigration.flyout.instance": "实例",
-    "xpack.monitoring.metricbeatMigration.flyout.noClusterUuidCheckboxLabel": "是的，我明白我将需要在独立集群中寻找\n                  此 {productName} {typeText}。",
-    "xpack.monitoring.metricbeatMigration.flyout.noClusterUuidDescription": "此 {productName} {typeText} 未连接到 Elasticsearch 集群，因此完全迁移后，此 {productName} {typeText} 将显示在独立集群中，而非此集群中。{link}",
     "xpack.monitoring.metricbeatMigration.flyout.noClusterUuidTitle": "未检测到集群",
-    "xpack.monitoring.metricbeatMigration.flyout.node": "节点",
-    "xpack.monitoring.metricbeatMigration.kibanaInstructions.statusTitleNewUser": "监测状态",
     "xpack.monitoring.metricbeatMigration.logstashInstructions.configureMetricbeatDescription": "在 {file} 文件中进行这些更改。",
     "xpack.monitoring.metricbeatMigration.logstashInstructions.configureMetricbeatTitle": "配置 Metricbeat 以发送至监测集群",
-    "xpack.monitoring.metricbeatMigration.logstashInstructions.disableInternalCollection.checkingStatusButtonLabel": "正在检查......",
-    "xpack.monitoring.metricbeatMigration.logstashInstructions.disableInternalCollection.checkStatusButtonLabel": "检查",
     "xpack.monitoring.metricbeatMigration.logstashInstructions.disableInternalCollection.description": "在 Logstash 配置文件 ({file}) 中添加以下设置：",
-    "xpack.monitoring.metricbeatMigration.logstashInstructions.disableInternalCollection.fullyMigratedStatusDescription": "我们未看到任何来自内部收集的文档。迁移完成！",
-    "xpack.monitoring.metricbeatMigration.logstashInstructions.disableInternalCollection.fullyMigratedStatusTitle": "恭喜您！",
     "xpack.monitoring.metricbeatMigration.logstashInstructions.disableInternalCollection.note": "进行此更改后，您需要重新启动 Logstash。",
-    "xpack.monitoring.metricbeatMigration.logstashInstructions.disableInternalCollection.partiallyMigratedStatusDescription": "上次内部收集发生于 {secondsSinceLastInternalCollectionLabel}前。",
-    "xpack.monitoring.metricbeatMigration.logstashInstructions.disableInternalCollection.statusDescription": "确认没有文档来自内部收集。",
     "xpack.monitoring.metricbeatMigration.logstashInstructions.disableInternalCollection.title": "禁用 Logstash 监测指标的内部收集",
     "xpack.monitoring.metricbeatMigration.logstashInstructions.enableMetricbeatModuleDescription": "该模块将默认从 http://localhost:9600 收集 Logstash 监测指标。如果本地 Logstash 实例有不同的地址，则必须通过 {file} 文件中的 {hosts} 设置进行指定。",
     "xpack.monitoring.metricbeatMigration.logstashInstructions.enableMetricbeatModuleTitle": "在 Metricbeat 中启用并配置 Logstash x-pack 模块",
-    "xpack.monitoring.metricbeatMigration.logstashInstructions.fullyMigratedStatusDescription": "我们现在看到来自 Metricbeat 的监测数据传送！",
-    "xpack.monitoring.metricbeatMigration.logstashInstructions.fullyMigratedStatusTitle": "恭喜您！",
     "xpack.monitoring.metricbeatMigration.logstashInstructions.installMetricbeatLinkText": "按照此处的说明执行操作",
     "xpack.monitoring.metricbeatMigration.logstashInstructions.installMetricbeatTitle": "在安装 Logstash 的同一台服务器上安装 Metricbeat",
-    "xpack.monitoring.metricbeatMigration.logstashInstructions.isInternalCollectorStatusTitle": "我们未检测到任何监测数据来自此 Logstash 节点的 Metricbeat。\n            我们将持续在后台检查。",
-    "xpack.monitoring.metricbeatMigration.logstashInstructions.metricbeatSecuritySetup": "如果已启用安全功能，则可能需要更多的设置。{link}",
-    "xpack.monitoring.metricbeatMigration.logstashInstructions.metricbeatSecuritySetupLinkText": "查看更多信息。",
-    "xpack.monitoring.metricbeatMigration.logstashInstructions.partiallyMigratedStatusDescription": "请注意，检测最多花费 {secondsAgo} 秒，但我们在后台每 {timePeriod} 秒检查一次。",
-    "xpack.monitoring.metricbeatMigration.logstashInstructions.partiallyMigratedStatusTitle": "我们仍看到数据来自 Logstash 的内部收集。",
     "xpack.monitoring.metricbeatMigration.logstashInstructions.startMetricbeatLinkText": "按照此处的说明执行操作",
     "xpack.monitoring.metricbeatMigration.logstashInstructions.startMetricbeatTitle": "启动 Metricbeat",
-    "xpack.monitoring.metricbeatMigration.logstashInstructions.statusTitle": "迁移状态",
     "xpack.monitoring.noData.blurbs.cloudDeploymentDescription": "请返回到您的 ",
     "xpack.monitoring.noData.blurbs.cloudDeploymentDescriptionMore": "有关在 Elastic Cloud 中监测的详情，请参阅 ",
     "xpack.monitoring.noData.blurbs.cloudDeploymentTitle": "此处没有您的监测数据。",
     "xpack.monitoring.noData.explanations.exportersCloudDescription": "在 Elastic Cloud 中，您的监测数据将存储在专用监测集群中。",
-    "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.isInternalCollectorStatusTitle": "我们未检测到任何监测数据来自此 Elasticsearch 节点的 Metricbeat。\n            我们将持续在后台检查。",
-    "xpack.monitoring.metricbeatMigration.elasticsearchInstructions.partiallyMigratedStatusDescription": "请注意，检测最多花费 {secondsAgo} 秒，但我们将在后台持续检查。",
-    "xpack.monitoring.metricbeatMigration.kibanaInstructions.isInternalCollectorStatusTitle": "我们未检测到任何监测数据来自此 Kibana 实例的 Metricbeat。\n            我们将持续在后台检查。",
     "xpack.remoteClusters.addAction.clusterNameAlreadyExistsErrorMessage": "名为 “{clusterName}” 的集群已存在。",
     "xpack.remoteClusters.addAction.errorTitle": "添加集群时出错",
     "xpack.remoteClusters.addAction.failedDefaultErrorMessage": "请求失败，显示 {statusCode} 错误。{message}",
@@ -10385,10 +10252,6 @@
     "xpack.siem.kpiNetwork.uniquePrivateIps.sourceChartLabel": "源",
     "xpack.siem.kpiNetwork.uniquePrivateIps.sourceUnitLabel": "源",
     "xpack.siem.kpiNetwork.uniquePrivateIps.title": "唯一专用 IP",
-    "xpack.siem.loadMoreTable.loadingButtonLabel": "正在加载……",
-    "xpack.siem.loadMoreTable.loadMoreButtonLabel": "加载更多",
-    "xpack.siem.loadMoreTable.rowsButtonLabel": "每页行数",
-    "xpack.siem.loadMoreTable.showingSubtitle": "显示",
     "xpack.siem.ml.score.anomalousEntityTitle": "异常实体",
     "xpack.siem.ml.table.timestampTitle": "时间戳",
     "xpack.siem.modalAllErrors.close.button": "关闭",
@@ -10926,7 +10789,6 @@
     "xpack.snapshotRestore.policyForm.stepSettings.indicesToggleListLink": "选择索引",
     "xpack.snapshotRestore.policyForm.stepSettings.partialDescription": "允许具有不可用主分片的索引的快照。否则，整个快照将失败。",
     "xpack.snapshotRestore.policyForm.stepSettings.partialDescriptionTitle": "允许部分索引",
-    "xpack.snapshotRestore.policyForm.stepSettings.partialLabel": "允许部分索引",
     "xpack.snapshotRestore.policyForm.stepSettings.policyIncludeGlobalStateLabel": "包括全局状态",
     "xpack.snapshotRestore.policyForm.stepSettings.selectAllIndicesLink": "全选",
     "xpack.snapshotRestore.policyForm.stepSettings.selectIndicesHelpText": "将备份 {count} 个 {count, plural, one {索引} other {索引}}。{selectOrDeselectAllLink}",
@@ -10958,12 +10820,6 @@
     "xpack.snapshotRestore.policyList.table.snapshotNameColumnTitle": "快照名称",
     "xpack.snapshotRestore.policyScheduleWarningDescription": "一次仅可以拍取一个快照。要避免快照失败，请编辑或删除策略。",
     "xpack.snapshotRestore.policyScheduleWarningTitle": "两个或更多策略有相同的计划",
-    "xpack.snapshotRestore.policyValidation.indexPatternRequiredError": "至少需要一个索引模式。",
-    "xpack.snapshotRestore.policyValidation.indicesRequiredError": "必须至少选择一个索引。",
-    "xpack.snapshotRestore.policyValidation.nameRequiredError": "策略名称必填。",
-    "xpack.snapshotRestore.policyValidation.repositoryRequiredError": "存储库必填。",
-    "xpack.snapshotRestore.policyValidation.scheduleRequiredError": "计划必填。",
-    "xpack.snapshotRestore.policyValidation.snapshotNameRequiredError": "快照名称必填。",
     "xpack.snapshotRestore.repositories.breadcrumbTitle": "存储库",
     "xpack.snapshotRestore.repositoryList.table.typeFilterLabel": "类型",
     "xpack.snapshotRestore.restoreForm.stepLogistics.indicesPatternLabel": "索引模式",
@@ -11088,8 +10944,6 @@
     "xpack.spaces.spaceSelector.findSpacePlaceholder": "查找工作区",
     "xpack.spaces.spaceSelector.noSpacesMatchSearchCriteriaDescription": "没有匹配搜索条件的空间",
     "xpack.spaces.spaceSelector.selectSpacesTitle": "选择您的空间",
-    "xpack.spaces.spacesManager.unableToChangeSpaceWarningDescription": "请稍后重试",
-    "xpack.spaces.spacesManager.unableToChangeSpaceWarningTitle": "无法更改空间",
     "xpack.spaces.spacesTitle": "工作区",
     "xpack.spaces.management.copyToSpace.actionDescription": "将此已保存对象复制到一个或多个工作区",
     "xpack.spaces.management.copyToSpace.actionTitle": "复制到工作区",
@@ -11536,4 +11390,4 @@
     "xpack.fileUpload.fileParser.noFileProvided": "错误，未提供任何文件",
     "xpack.fileUpload.jsonIndexFilePicker.errorGettingIndexName": "检索索引名称时出错：{errorMessage}"
   }
-}
+}
\ No newline at end of file
diff --git a/x-pack/tasks/test.js b/x-pack/tasks/test.js
index 4bd72f0df64a3f..5aae780dda6d7e 100644
--- a/x-pack/tasks/test.js
+++ b/x-pack/tasks/test.js
@@ -12,6 +12,7 @@ import { createAutoJUnitReporter } from '../../src/dev';
 
 const MOCHA_OPTIONS = {
   ui: 'bdd',
+  require: require.resolve('../../src/setup_node_env'),
   reporter: createAutoJUnitReporter({
     reportName: 'X-Pack Mocha Tests',
   }),
diff --git a/x-pack/test/alerting_api_integration/common/lib/alert_utils.ts b/x-pack/test/alerting_api_integration/common/lib/alert_utils.ts
new file mode 100644
index 00000000000000..83863ef11c4c93
--- /dev/null
+++ b/x-pack/test/alerting_api_integration/common/lib/alert_utils.ts
@@ -0,0 +1,207 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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 { Space, User } from '../types';
+import { ObjectRemover } from './object_remover';
+import { getUrlPrefix } from './space_test_utils';
+import { ES_TEST_INDEX_NAME } from './es_test_index_tool';
+
+export interface AlertUtilsOpts {
+  user?: User;
+  space: Space;
+  supertestWithoutAuth: any;
+  indexRecordActionId?: string;
+  objectRemover?: ObjectRemover;
+}
+
+export interface CreateAlwaysFiringActionOpts {
+  indexRecordActionId?: string;
+  objectRemover?: ObjectRemover;
+  overwrites?: Record<string, any>;
+  reference: string;
+}
+
+export class AlertUtils {
+  private referenceCounter = 1;
+  private readonly user?: User;
+  private readonly space: Space;
+  private readonly supertestWithoutAuth: any;
+  private readonly indexRecordActionId?: string;
+  private readonly objectRemover?: ObjectRemover;
+
+  constructor({
+    indexRecordActionId,
+    objectRemover,
+    space,
+    supertestWithoutAuth,
+    user,
+  }: AlertUtilsOpts) {
+    this.user = user;
+    this.space = space;
+    this.objectRemover = objectRemover;
+    this.indexRecordActionId = indexRecordActionId;
+    this.supertestWithoutAuth = supertestWithoutAuth;
+  }
+
+  public generateReference() {
+    return ['alert-utils-ref', this.referenceCounter++, this.user ? this.user.username : ''].join(
+      ':'
+    );
+  }
+
+  public getEnableRequest(alertId: string) {
+    const request = this.supertestWithoutAuth
+      .post(`${getUrlPrefix(this.space.id)}/api/alert/${alertId}/_enable`)
+      .set('kbn-xsrf', 'foo');
+    if (this.user) {
+      return request.auth(this.user.username, this.user.password);
+    }
+    return request;
+  }
+
+  public getDisableRequest(alertId: string) {
+    const request = this.supertestWithoutAuth
+      .post(`${getUrlPrefix(this.space.id)}/api/alert/${alertId}/_disable`)
+      .set('kbn-xsrf', 'foo');
+    if (this.user) {
+      return request.auth(this.user.username, this.user.password);
+    }
+    return request;
+  }
+
+  public getMuteAllRequest(alertId: string) {
+    const request = this.supertestWithoutAuth
+      .post(`${getUrlPrefix(this.space.id)}/api/alert/${alertId}/_mute_all`)
+      .set('kbn-xsrf', 'foo');
+    if (this.user) {
+      return request.auth(this.user.username, this.user.password);
+    }
+    return request;
+  }
+
+  public getUnmuteAllRequest(alertId: string) {
+    const request = this.supertestWithoutAuth
+      .post(`${getUrlPrefix(this.space.id)}/api/alert/${alertId}/_unmute_all`)
+      .set('kbn-xsrf', 'foo');
+    if (this.user) {
+      return request.auth(this.user.username, this.user.password);
+    }
+    return request;
+  }
+
+  public getMuteInstanceRequest(alertId: string, instanceId: string) {
+    const request = this.supertestWithoutAuth
+      .post(
+        `${getUrlPrefix(this.space.id)}/api/alert/${alertId}/alert_instance/${instanceId}/_mute`
+      )
+      .set('kbn-xsrf', 'foo');
+    if (this.user) {
+      return request.auth(this.user.username, this.user.password);
+    }
+    return request;
+  }
+
+  public getUnmuteInstanceRequest(alertId: string, instanceId: string) {
+    const request = this.supertestWithoutAuth
+      .post(
+        `${getUrlPrefix(this.space.id)}/api/alert/${alertId}/alert_instance/${instanceId}/_unmute`
+      )
+      .set('kbn-xsrf', 'foo');
+    if (this.user) {
+      return request.auth(this.user.username, this.user.password);
+    }
+    return request;
+  }
+
+  public getUpdateApiKeyRequest(alertId: string) {
+    const request = this.supertestWithoutAuth
+      .post(`${getUrlPrefix(this.space.id)}/api/alert/${alertId}/_update_api_key`)
+      .set('kbn-xsrf', 'foo');
+    if (this.user) {
+      return request.auth(this.user.username, this.user.password);
+    }
+    return request;
+  }
+
+  public async enable(alertId: string) {
+    await this.getEnableRequest(alertId).expect(204, '');
+  }
+
+  public async disable(alertId: string) {
+    await this.getDisableRequest(alertId).expect(204, '');
+  }
+
+  public async muteAll(alertId: string) {
+    await this.getMuteAllRequest(alertId).expect(204, '');
+  }
+
+  public async unmuteAll(alertId: string) {
+    await this.getUnmuteAllRequest(alertId).expect(204, '');
+  }
+
+  public async muteInstance(alertId: string, instanceId: string) {
+    await this.getMuteInstanceRequest(alertId, instanceId).expect(204, '');
+  }
+
+  public async unmuteInstance(alertId: string, instanceId: string) {
+    await this.getUnmuteInstanceRequest(alertId, instanceId).expect(204, '');
+  }
+
+  public async updateApiKey(alertId: string) {
+    await this.getUpdateApiKeyRequest(alertId).expect(204, '');
+  }
+
+  public async createAlwaysFiringAction({
+    objectRemover,
+    overwrites = {},
+    indexRecordActionId,
+    reference,
+  }: CreateAlwaysFiringActionOpts) {
+    const objRemover = objectRemover || this.objectRemover;
+    const actionId = indexRecordActionId || this.indexRecordActionId;
+
+    if (!objRemover) {
+      throw new Error('objectRemover is required');
+    }
+    if (!actionId) {
+      throw new Error('indexRecordActionId is required ');
+    }
+
+    let request = this.supertestWithoutAuth
+      .post(`${getUrlPrefix(this.space.id)}/api/alert`)
+      .set('kbn-xsrf', 'foo');
+    if (this.user) {
+      request = request.auth(this.user.username, this.user.password);
+    }
+    const response = await request.send({
+      enabled: true,
+      interval: '1m',
+      throttle: '1m',
+      alertTypeId: 'test.always-firing',
+      alertTypeParams: {
+        index: ES_TEST_INDEX_NAME,
+        reference,
+      },
+      actions: [
+        {
+          group: 'default',
+          id: this.indexRecordActionId,
+          params: {
+            index: ES_TEST_INDEX_NAME,
+            reference,
+            message:
+              'instanceContextValue: {{context.instanceContextValue}}, instanceStateValue: {{state.instanceStateValue}}',
+          },
+        },
+      ],
+      ...overwrites,
+    });
+    if (response.statusCode === 200) {
+      objRemover.add(this.space.id, response.body.id, 'alert');
+    }
+    return response;
+  }
+}
diff --git a/x-pack/test/alerting_api_integration/common/lib/index.ts b/x-pack/test/alerting_api_integration/common/lib/index.ts
index 6c80cbd043f4f8..444b767456bdeb 100644
--- a/x-pack/test/alerting_api_integration/common/lib/index.ts
+++ b/x-pack/test/alerting_api_integration/common/lib/index.ts
@@ -8,3 +8,4 @@ export { ObjectRemover } from './object_remover';
 export { getUrlPrefix } from './space_test_utils';
 export { ES_TEST_INDEX_NAME, ESTestIndexTool } from './es_test_index_tool';
 export { getTestAlertData } from './get_test_alert_data';
+export { AlertUtils } from './alert_utils';
diff --git a/x-pack/test/alerting_api_integration/security_and_spaces/tests/actions/builtin_action_types/pagerduty.ts b/x-pack/test/alerting_api_integration/security_and_spaces/tests/actions/builtin_action_types/pagerduty.ts
index 294f119881b70f..4280e85376201f 100644
--- a/x-pack/test/alerting_api_integration/security_and_spaces/tests/actions/builtin_action_types/pagerduty.ts
+++ b/x-pack/test/alerting_api_integration/security_and_spaces/tests/actions/builtin_action_types/pagerduty.ts
@@ -17,6 +17,7 @@ import {
 export default function pagerdutyTest({ getService }: FtrProviderContext) {
   const supertest = getService('supertest');
   const esArchiver = getService('esArchiver');
+  const kibanaServer = getService('kibanaServer');
 
   describe('pagerduty action', () => {
     let simulatedActionId = '';
@@ -24,11 +25,9 @@ export default function pagerdutyTest({ getService }: FtrProviderContext) {
 
     // need to wait for kibanaServer to settle ...
     before(() => {
-      const kibanaServer = getService('kibanaServer');
-      const kibanaUrl = kibanaServer.status && kibanaServer.status.kibanaServerUrl;
-      pagerdutySimulatorURL = `${kibanaUrl}${getExternalServiceSimulatorPath(
-        ExternalServiceSimulator.PAGERDUTY
-      )}`;
+      pagerdutySimulatorURL = kibanaServer.resolveUrl(
+        getExternalServiceSimulatorPath(ExternalServiceSimulator.PAGERDUTY)
+      );
     });
 
     after(() => esArchiver.unload('empty_kibana'));
diff --git a/x-pack/test/alerting_api_integration/security_and_spaces/tests/actions/builtin_action_types/slack.ts b/x-pack/test/alerting_api_integration/security_and_spaces/tests/actions/builtin_action_types/slack.ts
index aa678ca9105599..595058e72af0b2 100644
--- a/x-pack/test/alerting_api_integration/security_and_spaces/tests/actions/builtin_action_types/slack.ts
+++ b/x-pack/test/alerting_api_integration/security_and_spaces/tests/actions/builtin_action_types/slack.ts
@@ -17,6 +17,7 @@ import {
 export default function slackTest({ getService }: FtrProviderContext) {
   const supertest = getService('supertest');
   const esArchiver = getService('esArchiver');
+  const kibanaServer = getService('kibanaServer');
 
   describe('slack action', () => {
     let simulatedActionId = '';
@@ -24,11 +25,9 @@ export default function slackTest({ getService }: FtrProviderContext) {
 
     // need to wait for kibanaServer to settle ...
     before(() => {
-      const kibanaServer = getService('kibanaServer');
-      const kibanaUrl = kibanaServer.status && kibanaServer.status.kibanaServerUrl;
-      slackSimulatorURL = `${kibanaUrl}${getExternalServiceSimulatorPath(
-        ExternalServiceSimulator.SLACK
-      )}`;
+      slackSimulatorURL = kibanaServer.resolveUrl(
+        getExternalServiceSimulatorPath(ExternalServiceSimulator.SLACK)
+      );
     });
 
     after(() => esArchiver.unload('empty_kibana'));
diff --git a/x-pack/test/alerting_api_integration/security_and_spaces/tests/actions/builtin_action_types/webhook.ts b/x-pack/test/alerting_api_integration/security_and_spaces/tests/actions/builtin_action_types/webhook.ts
index 89fc986fd02556..0f17019518824d 100644
--- a/x-pack/test/alerting_api_integration/security_and_spaces/tests/actions/builtin_action_types/webhook.ts
+++ b/x-pack/test/alerting_api_integration/security_and_spaces/tests/actions/builtin_action_types/webhook.ts
@@ -28,6 +28,7 @@ function parsePort(url: Record<string, string>): Record<string, string | null |
 export default function webhookTest({ getService }: FtrProviderContext) {
   const supertest = getService('supertest');
   const esArchiver = getService('esArchiver');
+  const kibanaServer = getService('kibanaServer');
 
   async function createWebhookAction(
     urlWithCreds: string,
@@ -65,10 +66,9 @@ export default function webhookTest({ getService }: FtrProviderContext) {
 
     // need to wait for kibanaServer to settle ...
     before(() => {
-      const kibanaServer = getService('kibanaServer');
-      const kibanaUrl = kibanaServer.status && kibanaServer.status.kibanaServerUrl;
-      const webhookServiceUrl = getExternalServiceSimulatorPath(ExternalServiceSimulator.WEBHOOK);
-      webhookSimulatorURL = `${kibanaUrl}${webhookServiceUrl}`;
+      webhookSimulatorURL = kibanaServer.resolveUrl(
+        getExternalServiceSimulatorPath(ExternalServiceSimulator.WEBHOOK)
+      );
     });
 
     after(() => esArchiver.unload('empty_kibana'));
diff --git a/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/alerts.ts b/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/alerts.ts
index b29e7302189fa1..7a984acb2c09f5 100644
--- a/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/alerts.ts
+++ b/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/alerts.ts
@@ -13,6 +13,7 @@ import {
   getUrlPrefix,
   getTestAlertData,
   ObjectRemover,
+  AlertUtils,
 } from '../../../common/lib';
 
 // eslint-disable-next-line import/no-default-export
@@ -38,57 +39,42 @@ export default function alertTests({ getService }: FtrProviderContext) {
       await es.indices.delete({ index: authorizationIndex });
     });
 
-    async function createIndexRecordAction(spaceId: string) {
-      const { body: createdAction } = await supertest
-        .post(`${getUrlPrefix(spaceId)}/api/action`)
-        .set('kbn-xsrf', 'foo')
-        .send({
-          description: 'My action',
-          actionTypeId: 'test.index-record',
-          config: {
-            unencrypted: `This value shouldn't get encrypted`,
-          },
-          secrets: {
-            encrypted: 'This value should be encrypted',
-          },
-        })
-        .expect(200);
-      objectRemover.add(spaceId, createdAction.id, 'action');
-      return createdAction;
-    }
-
     for (const scenario of UserAtSpaceScenarios) {
       const { user, space } = scenario;
+
       describe(scenario.id, () => {
-        it('should schedule task, run alert and schedule actions when appropriate', async () => {
-          const reference = `create-test-1:${user.username}`;
-          const createdAction = await createIndexRecordAction(space.id);
-          const response = await supertestWithoutAuth
-            .post(`${getUrlPrefix(space.id)}/api/alert`)
+        let alertUtils: AlertUtils;
+        let indexRecordActionId: string;
+
+        before(async () => {
+          const { body: createdAction } = await supertest
+            .post(`${getUrlPrefix(space.id)}/api/action`)
             .set('kbn-xsrf', 'foo')
-            .auth(user.username, user.password)
-            .send(
-              getTestAlertData({
-                interval: '1m',
-                alertTypeId: 'test.always-firing',
-                alertTypeParams: {
-                  index: ES_TEST_INDEX_NAME,
-                  reference,
-                },
-                actions: [
-                  {
-                    group: 'default',
-                    id: createdAction.id,
-                    params: {
-                      index: ES_TEST_INDEX_NAME,
-                      reference,
-                      message:
-                        'instanceContextValue: {{context.instanceContextValue}}, instanceStateValue: {{state.instanceStateValue}}',
-                    },
-                  },
-                ],
-              })
-            );
+            .send({
+              description: 'My action',
+              actionTypeId: 'test.index-record',
+              config: {
+                unencrypted: `This value shouldn't get encrypted`,
+              },
+              secrets: {
+                encrypted: 'This value should be encrypted',
+              },
+            })
+            .expect(200);
+          indexRecordActionId = createdAction.id;
+          alertUtils = new AlertUtils({
+            user,
+            space,
+            supertestWithoutAuth,
+            indexRecordActionId,
+            objectRemover,
+          });
+        });
+        after(() => objectRemover.add(space.id, indexRecordActionId, 'action'));
+
+        it('should schedule task, run alert and schedule actions when appropriate', async () => {
+          const reference = alertUtils.generateReference();
+          const response = await alertUtils.createAlwaysFiringAction({ reference });
 
           switch (scenario.id) {
             case 'no_kibana_privileges at space1':
@@ -104,7 +90,6 @@ export default function alertTests({ getService }: FtrProviderContext) {
             case 'superuser at space1':
             case 'space_1_all at space1':
               expect(response.statusCode).to.eql(200);
-              objectRemover.add(space.id, response.body.id, 'alert');
               const alertTestRecord = (await esTestIndexTool.waitForDocs(
                 'alert:test.always-firing',
                 reference
@@ -160,7 +145,7 @@ export default function alertTests({ getService }: FtrProviderContext) {
             .expect(200);
           objectRemover.add(space.id, createdAction.id, 'action');
 
-          const reference = `create-test-2:${user.username}`;
+          const reference = alertUtils.generateReference();
           const response = await supertestWithoutAuth
             .post(`${getUrlPrefix(space.id)}/api/alert`)
             .set('kbn-xsrf', 'foo')
@@ -248,7 +233,7 @@ export default function alertTests({ getService }: FtrProviderContext) {
 
         it('should have proper callCluster and savedObjectsClient authorization for alert type executor when appropriate', async () => {
           let alertTestRecord: any;
-          const reference = `create-test-3:${user.username}`;
+          const reference = alertUtils.generateReference();
           const response = await supertestWithoutAuth
             .post(`${getUrlPrefix(space.id)}/api/alert`)
             .set('kbn-xsrf', 'foo')
@@ -326,7 +311,7 @@ export default function alertTests({ getService }: FtrProviderContext) {
 
         it('should have proper callCluster and savedObjectsClient authorization for action type executor when appropriate', async () => {
           let actionTestRecord: any;
-          const reference = `create-test-4:${user.username}`;
+          const reference = alertUtils.generateReference();
           const { body: createdAction } = await supertest
             .post(`${getUrlPrefix(space.id)}/api/action`)
             .set('kbn-xsrf', 'foo')
@@ -422,34 +407,13 @@ export default function alertTests({ getService }: FtrProviderContext) {
         });
 
         it('should throttle alerts when appropriate', async () => {
-          const reference = `create-test-5:${user.username}`;
-          const createdAction = await createIndexRecordAction(space.id);
-          const response = await supertestWithoutAuth
-            .post(`${getUrlPrefix(space.id)}/api/alert`)
-            .set('kbn-xsrf', 'foo')
-            .auth(user.username, user.password)
-            .send(
-              getTestAlertData({
-                interval: '1s',
-                throttle: '1m',
-                alertTypeId: 'test.always-firing',
-                alertTypeParams: {
-                  index: ES_TEST_INDEX_NAME,
-                  reference,
-                },
-                actions: [
-                  {
-                    group: 'default',
-                    id: createdAction.id,
-                    params: {
-                      index: ES_TEST_INDEX_NAME,
-                      reference,
-                      message: '',
-                    },
-                  },
-                ],
-              })
-            );
+          const reference = alertUtils.generateReference();
+          const response = await alertUtils.createAlwaysFiringAction({
+            reference,
+            overwrites: {
+              interval: '1s',
+            },
+          });
 
           switch (scenario.id) {
             case 'no_kibana_privileges at space1':
@@ -478,44 +442,38 @@ export default function alertTests({ getService }: FtrProviderContext) {
         });
 
         it('should not throttle when changing groups', async () => {
-          const reference = `create-test-6:${user.username}`;
-          const createdAction = await createIndexRecordAction(space.id);
-          const response = await supertestWithoutAuth
-            .post(`${getUrlPrefix(space.id)}/api/alert`)
-            .set('kbn-xsrf', 'foo')
-            .auth(user.username, user.password)
-            .send(
-              getTestAlertData({
-                interval: '1s',
-                throttle: '1m',
-                alertTypeId: 'test.always-firing',
-                alertTypeParams: {
-                  index: ES_TEST_INDEX_NAME,
-                  reference,
-                  groupsToScheduleActionsInSeries: ['default', 'other'],
-                },
-                actions: [
-                  {
-                    group: 'default',
-                    id: createdAction.id,
-                    params: {
-                      index: ES_TEST_INDEX_NAME,
-                      reference,
-                      message: 'from:default',
-                    },
+          const reference = alertUtils.generateReference();
+          const response = await alertUtils.createAlwaysFiringAction({
+            reference,
+            overwrites: {
+              interval: '1s',
+              alertTypeParams: {
+                index: ES_TEST_INDEX_NAME,
+                reference,
+                groupsToScheduleActionsInSeries: ['default', 'other'],
+              },
+              actions: [
+                {
+                  group: 'default',
+                  id: indexRecordActionId,
+                  params: {
+                    index: ES_TEST_INDEX_NAME,
+                    reference,
+                    message: 'from:default',
                   },
-                  {
-                    group: 'other',
-                    id: createdAction.id,
-                    params: {
-                      index: ES_TEST_INDEX_NAME,
-                      reference,
-                      message: 'from:other',
-                    },
+                },
+                {
+                  group: 'other',
+                  id: indexRecordActionId,
+                  params: {
+                    index: ES_TEST_INDEX_NAME,
+                    reference,
+                    message: 'from:other',
                   },
-                ],
-              })
-            );
+                },
+              ],
+            },
+          });
 
           switch (scenario.id) {
             case 'no_kibana_privileges at space1':
@@ -548,35 +506,18 @@ export default function alertTests({ getService }: FtrProviderContext) {
         });
 
         it('should reset throttle window when not firing', async () => {
-          const reference = `create-test-7:${user.username}`;
-          const createdAction = await createIndexRecordAction(space.id);
-          const response = await supertestWithoutAuth
-            .post(`${getUrlPrefix(space.id)}/api/alert`)
-            .set('kbn-xsrf', 'foo')
-            .auth(user.username, user.password)
-            .send(
-              getTestAlertData({
-                interval: '1s',
-                throttle: '1m',
-                alertTypeId: 'test.always-firing',
-                alertTypeParams: {
-                  index: ES_TEST_INDEX_NAME,
-                  reference,
-                  groupsToScheduleActionsInSeries: ['default', null, 'default'],
-                },
-                actions: [
-                  {
-                    group: 'default',
-                    id: createdAction.id,
-                    params: {
-                      index: ES_TEST_INDEX_NAME,
-                      reference,
-                      message: 'from:default',
-                    },
-                  },
-                ],
-              })
-            );
+          const reference = alertUtils.generateReference();
+          const response = await alertUtils.createAlwaysFiringAction({
+            reference,
+            overwrites: {
+              interval: '1s',
+              alertTypeParams: {
+                index: ES_TEST_INDEX_NAME,
+                reference,
+                groupsToScheduleActionsInSeries: ['default', null, 'default'],
+              },
+            },
+          });
 
           switch (scenario.id) {
             case 'no_kibana_privileges at space1':
@@ -603,6 +544,122 @@ export default function alertTests({ getService }: FtrProviderContext) {
               throw new Error(`Scenario untested: ${JSON.stringify(scenario)}`);
           }
         });
+
+        it(`shouldn't schedule actions when alert is muted`, async () => {
+          const reference = alertUtils.generateReference();
+          const response = await alertUtils.createAlwaysFiringAction({
+            reference,
+            overwrites: {
+              enabled: false,
+              interval: '1s',
+            },
+          });
+
+          switch (scenario.id) {
+            case 'no_kibana_privileges at space1':
+            case 'space_1_all at space2':
+            case 'global_read at space1':
+              expect(response.statusCode).to.eql(404);
+              expect(response.body).to.eql({
+                statusCode: 404,
+                error: 'Not Found',
+                message: 'Not Found',
+              });
+              break;
+            case 'space_1_all at space1':
+            case 'superuser at space1':
+              await alertUtils.muteAll(response.body.id);
+              await alertUtils.enable(response.body.id);
+              // Wait until alerts schedule actions twice to ensure actions had a chance to skip execution once
+              await esTestIndexTool.waitForDocs('alert:test.always-firing', reference, 2);
+              const executedActionsResult = await esTestIndexTool.search(
+                'action:test.index-record',
+                reference
+              );
+              expect(executedActionsResult.hits.total.value).to.eql(0);
+              break;
+            default:
+              throw new Error(`Scenario untested: ${JSON.stringify(scenario)}`);
+          }
+        });
+
+        it(`shouldn't schedule actions when alert instance is muted`, async () => {
+          const reference = alertUtils.generateReference();
+          const response = await alertUtils.createAlwaysFiringAction({
+            reference,
+            overwrites: {
+              enabled: false,
+              interval: '1s',
+            },
+          });
+
+          switch (scenario.id) {
+            case 'no_kibana_privileges at space1':
+            case 'space_1_all at space2':
+            case 'global_read at space1':
+              expect(response.statusCode).to.eql(404);
+              expect(response.body).to.eql({
+                statusCode: 404,
+                error: 'Not Found',
+                message: 'Not Found',
+              });
+              break;
+            case 'space_1_all at space1':
+            case 'superuser at space1':
+              await alertUtils.muteInstance(response.body.id, '1');
+              await alertUtils.enable(response.body.id);
+              // Wait until alerts scheduled actions twice to ensure actions had a chance to execute once
+              await esTestIndexTool.waitForDocs('alert:test.always-firing', reference, 2);
+              const executedActionsResult = await esTestIndexTool.search(
+                'action:test.index-record',
+                reference
+              );
+              expect(executedActionsResult.hits.total.value).to.eql(0);
+              break;
+            default:
+              throw new Error(`Scenario untested: ${JSON.stringify(scenario)}`);
+          }
+        });
+
+        it(`should unmute all instances when unmuting an alert`, async () => {
+          const reference = alertUtils.generateReference();
+          const response = await alertUtils.createAlwaysFiringAction({
+            reference,
+            overwrites: {
+              enabled: false,
+              interval: '1s',
+            },
+          });
+
+          switch (scenario.id) {
+            case 'no_kibana_privileges at space1':
+            case 'space_1_all at space2':
+            case 'global_read at space1':
+              expect(response.statusCode).to.eql(404);
+              expect(response.body).to.eql({
+                statusCode: 404,
+                error: 'Not Found',
+                message: 'Not Found',
+              });
+              break;
+            case 'space_1_all at space1':
+            case 'superuser at space1':
+              await alertUtils.muteInstance(response.body.id, '1');
+              await alertUtils.muteAll(response.body.id);
+              await alertUtils.unmuteAll(response.body.id);
+              await alertUtils.enable(response.body.id);
+              // Wait until alerts scheduled actions twice to ensure actions had a chance to execute once
+              await esTestIndexTool.waitForDocs('alert:test.always-firing', reference, 2);
+              const executedActionsResult = await esTestIndexTool.search(
+                'action:test.index-record',
+                reference
+              );
+              expect(executedActionsResult.hits.total.value).to.eql(1);
+              break;
+            default:
+              throw new Error(`Scenario untested: ${JSON.stringify(scenario)}`);
+          }
+        });
       });
     }
   });
diff --git a/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/create.ts b/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/create.ts
index f92ea085cdbfa9..4d4bdfa1558b63 100644
--- a/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/create.ts
+++ b/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/create.ts
@@ -64,6 +64,8 @@ export default function createAlertTests({ getService }: FtrProviderContext) {
                 throttle: '1m',
                 updatedBy: user.username,
                 apiKeyOwner: user.username,
+                muteAll: false,
+                mutedInstanceIds: [],
               });
               expect(typeof response.body.scheduledTaskId).to.be('string');
               const { _source: taskRecord } = await getScheduledTask(response.body.scheduledTaskId);
diff --git a/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/disable.ts b/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/disable.ts
index 0bdbd60cfd8857..8a9b7e3fc35c44 100644
--- a/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/disable.ts
+++ b/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/disable.ts
@@ -6,7 +6,7 @@
 
 import expect from '@kbn/expect';
 import { UserAtSpaceScenarios } from '../../scenarios';
-import { getUrlPrefix, getTestAlertData, ObjectRemover } from '../../../common/lib';
+import { AlertUtils, getUrlPrefix, getTestAlertData, ObjectRemover } from '../../../common/lib';
 import { FtrProviderContext } from '../../../common/ftr_provider_context';
 
 // eslint-disable-next-line import/no-default-export
@@ -29,6 +29,8 @@ export default function createDisableAlertTests({ getService }: FtrProviderConte
 
     for (const scenario of UserAtSpaceScenarios) {
       const { user, space } = scenario;
+      const alertUtils = new AlertUtils({ user, space, supertestWithoutAuth });
+
       describe(scenario.id, () => {
         it('should handle disable alert request appropriately', async () => {
           const { body: createdAlert } = await supertest
@@ -38,10 +40,7 @@ export default function createDisableAlertTests({ getService }: FtrProviderConte
             .expect(200);
           objectRemover.add(space.id, createdAlert.id, 'alert');
 
-          const response = await supertestWithoutAuth
-            .post(`${getUrlPrefix(space.id)}/api/alert/${createdAlert.id}/_disable`)
-            .set('kbn-xsrf', 'foo')
-            .auth(user.username, user.password);
+          const response = await alertUtils.getDisableRequest(createdAlert.id);
 
           switch (scenario.id) {
             case 'no_kibana_privileges at space1':
@@ -74,23 +73,19 @@ export default function createDisableAlertTests({ getService }: FtrProviderConte
 
         it(`shouldn't disable alert from another space`, async () => {
           const { body: createdAlert } = await supertest
-            .post(`${getUrlPrefix(space.id)}/api/alert`)
+            .post(`${getUrlPrefix('other')}/api/alert`)
             .set('kbn-xsrf', 'foo')
             .send(getTestAlertData({ enabled: true }))
             .expect(200);
-          objectRemover.add(space.id, createdAlert.id, 'alert');
+          objectRemover.add('other', createdAlert.id, 'alert');
 
-          const response = await supertestWithoutAuth
-            .post(`${getUrlPrefix('other')}/api/alert/${createdAlert.id}/_disable`)
-            .set('kbn-xsrf', 'foo')
-            .auth(user.username, user.password);
+          const response = await alertUtils.getDisableRequest(createdAlert.id);
 
           expect(response.statusCode).to.eql(404);
           switch (scenario.id) {
             case 'no_kibana_privileges at space1':
             case 'space_1_all at space2':
             case 'global_read at space1':
-            case 'space_1_all at space1':
               expect(response.body).to.eql({
                 statusCode: 404,
                 error: 'Not Found',
@@ -98,6 +93,7 @@ export default function createDisableAlertTests({ getService }: FtrProviderConte
               });
               break;
             case 'superuser at space1':
+            case 'space_1_all at space1':
               expect(response.body).to.eql({
                 statusCode: 404,
                 error: 'Not Found',
diff --git a/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/enable.ts b/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/enable.ts
index d025b35f3602e3..543805fb83b189 100644
--- a/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/enable.ts
+++ b/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/enable.ts
@@ -6,7 +6,7 @@
 
 import expect from '@kbn/expect';
 import { UserAtSpaceScenarios } from '../../scenarios';
-import { getUrlPrefix, getTestAlertData, ObjectRemover } from '../../../common/lib';
+import { AlertUtils, getUrlPrefix, getTestAlertData, ObjectRemover } from '../../../common/lib';
 import { FtrProviderContext } from '../../../common/ftr_provider_context';
 
 // eslint-disable-next-line import/no-default-export
@@ -29,6 +29,8 @@ export default function createEnableAlertTests({ getService }: FtrProviderContex
 
     for (const scenario of UserAtSpaceScenarios) {
       const { user, space } = scenario;
+      const alertUtils = new AlertUtils({ user, space, supertestWithoutAuth });
+
       describe(scenario.id, () => {
         it('should handle enable alert request appropriately', async () => {
           const { body: createdAlert } = await supertest
@@ -38,10 +40,7 @@ export default function createEnableAlertTests({ getService }: FtrProviderContex
             .expect(200);
           objectRemover.add(space.id, createdAlert.id, 'alert');
 
-          const response = await supertestWithoutAuth
-            .post(`${getUrlPrefix(space.id)}/api/alert/${createdAlert.id}/_enable`)
-            .set('kbn-xsrf', 'foo')
-            .auth(user.username, user.password);
+          const response = await alertUtils.getEnableRequest(createdAlert.id);
 
           switch (scenario.id) {
             case 'no_kibana_privileges at space1':
@@ -79,23 +78,19 @@ export default function createEnableAlertTests({ getService }: FtrProviderContex
 
         it(`shouldn't enable alert from another space`, async () => {
           const { body: createdAlert } = await supertest
-            .post(`${getUrlPrefix(space.id)}/api/alert`)
+            .post(`${getUrlPrefix('other')}/api/alert`)
             .set('kbn-xsrf', 'foo')
             .send(getTestAlertData({ enabled: false }))
             .expect(200);
-          objectRemover.add(space.id, createdAlert.id, 'alert');
+          objectRemover.add('other', createdAlert.id, 'alert');
 
-          const response = await supertestWithoutAuth
-            .post(`${getUrlPrefix('other')}/api/alert/${createdAlert.id}/_enable`)
-            .set('kbn-xsrf', 'foo')
-            .auth(user.username, user.password);
+          const response = await alertUtils.getEnableRequest(createdAlert.id);
 
           expect(response.statusCode).to.eql(404);
           switch (scenario.id) {
             case 'no_kibana_privileges at space1':
             case 'space_1_all at space2':
             case 'global_read at space1':
-            case 'space_1_all at space1':
               expect(response.body).to.eql({
                 statusCode: 404,
                 error: 'Not Found',
@@ -103,6 +98,7 @@ export default function createEnableAlertTests({ getService }: FtrProviderContex
               });
               break;
             case 'superuser at space1':
+            case 'space_1_all at space1':
               expect(response.body).to.eql({
                 statusCode: 404,
                 error: 'Not Found',
diff --git a/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/find.ts b/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/find.ts
index 429c43b3c44d62..e782f0780ea6c4 100644
--- a/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/find.ts
+++ b/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/find.ts
@@ -66,6 +66,8 @@ export default function createFindTests({ getService }: FtrProviderContext) {
                 throttle: '1m',
                 updatedBy: 'elastic',
                 apiKeyOwner: 'elastic',
+                muteAll: false,
+                mutedInstanceIds: [],
               });
               break;
             default:
diff --git a/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/get.ts b/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/get.ts
index d189844dc4be84..a40fc0a9ac86e1 100644
--- a/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/get.ts
+++ b/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/get.ts
@@ -60,6 +60,8 @@ export default function createGetTests({ getService }: FtrProviderContext) {
                 throttle: '1m',
                 updatedBy: 'elastic',
                 apiKeyOwner: 'elastic',
+                muteAll: false,
+                mutedInstanceIds: [],
               });
               break;
             default:
diff --git a/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/index.ts b/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/index.ts
index 0774bdc17fd228..1aa084356cfa49 100644
--- a/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/index.ts
+++ b/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/index.ts
@@ -16,6 +16,10 @@ export default function alertingTests({ loadTestFile }: FtrProviderContext) {
     loadTestFile(require.resolve('./find'));
     loadTestFile(require.resolve('./get'));
     loadTestFile(require.resolve('./list_alert_types'));
+    loadTestFile(require.resolve('./mute_all'));
+    loadTestFile(require.resolve('./mute_instance'));
+    loadTestFile(require.resolve('./unmute_all'));
+    loadTestFile(require.resolve('./unmute_instance'));
     loadTestFile(require.resolve('./update'));
     loadTestFile(require.resolve('./update_api_key'));
     loadTestFile(require.resolve('./alerts'));
diff --git a/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/mute_all.ts b/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/mute_all.ts
new file mode 100644
index 00000000000000..9e479064e66c72
--- /dev/null
+++ b/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/mute_all.ts
@@ -0,0 +1,66 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import expect from '@kbn/expect';
+import { UserAtSpaceScenarios } from '../../scenarios';
+import { AlertUtils, getUrlPrefix, getTestAlertData, ObjectRemover } from '../../../common/lib';
+import { FtrProviderContext } from '../../../common/ftr_provider_context';
+
+// eslint-disable-next-line import/no-default-export
+export default function createMuteAlertTests({ getService }: FtrProviderContext) {
+  const supertest = getService('supertest');
+  const supertestWithoutAuth = getService('supertestWithoutAuth');
+
+  describe('mute_all', () => {
+    const objectRemover = new ObjectRemover(supertest);
+
+    after(() => objectRemover.removeAll());
+
+    for (const scenario of UserAtSpaceScenarios) {
+      const { user, space } = scenario;
+      const alertUtils = new AlertUtils({ user, space, supertestWithoutAuth });
+
+      describe(scenario.id, () => {
+        it('should handle mute alert request appropriately', async () => {
+          const { body: createdAlert } = await supertest
+            .post(`${getUrlPrefix(space.id)}/api/alert`)
+            .set('kbn-xsrf', 'foo')
+            .send(getTestAlertData({ enabled: false }))
+            .expect(200);
+          objectRemover.add(space.id, createdAlert.id, 'alert');
+
+          const response = await alertUtils.getMuteAllRequest(createdAlert.id);
+
+          switch (scenario.id) {
+            case 'no_kibana_privileges at space1':
+            case 'space_1_all at space2':
+            case 'global_read at space1':
+              expect(response.statusCode).to.eql(404);
+              expect(response.body).to.eql({
+                statusCode: 404,
+                error: 'Not Found',
+                message: 'Not Found',
+              });
+              break;
+            case 'superuser at space1':
+            case 'space_1_all at space1':
+              expect(response.statusCode).to.eql(204);
+              expect(response.body).to.eql('');
+              const { body: updatedAlert } = await supertestWithoutAuth
+                .get(`${getUrlPrefix(space.id)}/api/alert/${createdAlert.id}`)
+                .set('kbn-xsrf', 'foo')
+                .auth(user.username, user.password)
+                .expect(200);
+              expect(updatedAlert.muteAll).to.eql(true);
+              break;
+            default:
+              throw new Error(`Scenario untested: ${JSON.stringify(scenario)}`);
+          }
+        });
+      });
+    }
+  });
+}
diff --git a/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/mute_instance.ts b/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/mute_instance.ts
new file mode 100644
index 00000000000000..302b61074e87db
--- /dev/null
+++ b/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/mute_instance.ts
@@ -0,0 +1,108 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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 { UserAtSpaceScenarios } from '../../scenarios';
+import { AlertUtils, getUrlPrefix, getTestAlertData, ObjectRemover } from '../../../common/lib';
+import { FtrProviderContext } from '../../../common/ftr_provider_context';
+
+// eslint-disable-next-line import/no-default-export
+export default function createMuteAlertInstanceTests({ getService }: FtrProviderContext) {
+  const supertest = getService('supertest');
+  const supertestWithoutAuth = getService('supertestWithoutAuth');
+
+  describe('mute_instance', () => {
+    const objectRemover = new ObjectRemover(supertest);
+
+    after(() => objectRemover.removeAll());
+
+    for (const scenario of UserAtSpaceScenarios) {
+      const { user, space } = scenario;
+      const alertUtils = new AlertUtils({ user, space, supertestWithoutAuth });
+
+      describe(scenario.id, () => {
+        it('should handle mute alert instance request appropriately', async () => {
+          const { body: createdAlert } = await supertest
+            .post(`${getUrlPrefix(space.id)}/api/alert`)
+            .set('kbn-xsrf', 'foo')
+            .send(getTestAlertData({ enabled: false }))
+            .expect(200);
+          objectRemover.add(space.id, createdAlert.id, 'alert');
+
+          const response = await alertUtils.getMuteInstanceRequest(createdAlert.id, '1');
+
+          switch (scenario.id) {
+            case 'no_kibana_privileges at space1':
+            case 'space_1_all at space2':
+            case 'global_read at space1':
+              expect(response.statusCode).to.eql(404);
+              expect(response.body).to.eql({
+                statusCode: 404,
+                error: 'Not Found',
+                message: 'Not Found',
+              });
+              break;
+            case 'superuser at space1':
+            case 'space_1_all at space1':
+              expect(response.statusCode).to.eql(204);
+              expect(response.body).to.eql('');
+              const { body: updatedAlert } = await supertestWithoutAuth
+                .get(`${getUrlPrefix(space.id)}/api/alert/${createdAlert.id}`)
+                .set('kbn-xsrf', 'foo')
+                .auth(user.username, user.password)
+                .expect(200);
+              expect(updatedAlert.mutedInstanceIds).to.eql(['1']);
+              break;
+            default:
+              throw new Error(`Scenario untested: ${JSON.stringify(scenario)}`);
+          }
+        });
+
+        it('should handle mute alert instance request appropriately and not duplicate mutedInstanceIds when muting an instance already muted', async () => {
+          const { body: createdAlert } = await supertest
+            .post(`${getUrlPrefix(space.id)}/api/alert`)
+            .set('kbn-xsrf', 'foo')
+            .send(getTestAlertData({ enabled: false }))
+            .expect(200);
+          objectRemover.add(space.id, createdAlert.id, 'alert');
+
+          await supertest
+            .post(`${getUrlPrefix(space.id)}/api/alert/${createdAlert.id}/alert_instance/1/_mute`)
+            .set('kbn-xsrf', 'foo')
+            .expect(204, '');
+
+          const response = await alertUtils.getMuteInstanceRequest(createdAlert.id, '1');
+
+          switch (scenario.id) {
+            case 'no_kibana_privileges at space1':
+            case 'space_1_all at space2':
+            case 'global_read at space1':
+              expect(response.statusCode).to.eql(404);
+              expect(response.body).to.eql({
+                statusCode: 404,
+                error: 'Not Found',
+                message: 'Not Found',
+              });
+              break;
+            case 'superuser at space1':
+            case 'space_1_all at space1':
+              expect(response.statusCode).to.eql(204);
+              expect(response.body).to.eql('');
+              const { body: updatedAlert } = await supertestWithoutAuth
+                .get(`${getUrlPrefix(space.id)}/api/alert/${createdAlert.id}`)
+                .set('kbn-xsrf', 'foo')
+                .auth(user.username, user.password)
+                .expect(200);
+              expect(updatedAlert.mutedInstanceIds).to.eql(['1']);
+              break;
+            default:
+              throw new Error(`Scenario untested: ${JSON.stringify(scenario)}`);
+          }
+        });
+      });
+    }
+  });
+}
diff --git a/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/unmute_all.ts b/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/unmute_all.ts
new file mode 100644
index 00000000000000..5e9ad66cf40f3e
--- /dev/null
+++ b/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/unmute_all.ts
@@ -0,0 +1,71 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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 { UserAtSpaceScenarios } from '../../scenarios';
+import { AlertUtils, getUrlPrefix, getTestAlertData, ObjectRemover } from '../../../common/lib';
+import { FtrProviderContext } from '../../../common/ftr_provider_context';
+
+// eslint-disable-next-line import/no-default-export
+export default function createUnmuteAlertTests({ getService }: FtrProviderContext) {
+  const supertest = getService('supertest');
+  const supertestWithoutAuth = getService('supertestWithoutAuth');
+
+  describe('unmute_all', () => {
+    const objectRemover = new ObjectRemover(supertest);
+
+    after(() => objectRemover.removeAll());
+
+    for (const scenario of UserAtSpaceScenarios) {
+      const { user, space } = scenario;
+      const alertUtils = new AlertUtils({ user, space, supertestWithoutAuth });
+
+      describe(scenario.id, () => {
+        it('should handle unmute alert request appropriately', async () => {
+          const { body: createdAlert } = await supertest
+            .post(`${getUrlPrefix(space.id)}/api/alert`)
+            .set('kbn-xsrf', 'foo')
+            .send(getTestAlertData({ enabled: false }))
+            .expect(200);
+          objectRemover.add(space.id, createdAlert.id, 'alert');
+
+          await supertest
+            .post(`${getUrlPrefix(space.id)}/api/alert/${createdAlert.id}/_mute_all`)
+            .set('kbn-xsrf', 'foo')
+            .expect(204, '');
+
+          const response = await alertUtils.getUnmuteAllRequest(createdAlert.id);
+
+          switch (scenario.id) {
+            case 'no_kibana_privileges at space1':
+            case 'space_1_all at space2':
+            case 'global_read at space1':
+              expect(response.statusCode).to.eql(404);
+              expect(response.body).to.eql({
+                statusCode: 404,
+                error: 'Not Found',
+                message: 'Not Found',
+              });
+              break;
+            case 'superuser at space1':
+            case 'space_1_all at space1':
+              expect(response.statusCode).to.eql(204);
+              expect(response.body).to.eql('');
+              const { body: updatedAlert } = await supertestWithoutAuth
+                .get(`${getUrlPrefix(space.id)}/api/alert/${createdAlert.id}`)
+                .set('kbn-xsrf', 'foo')
+                .auth(user.username, user.password)
+                .expect(200);
+              expect(updatedAlert.muteAll).to.eql(false);
+              break;
+            default:
+              throw new Error(`Scenario untested: ${JSON.stringify(scenario)}`);
+          }
+        });
+      });
+    }
+  });
+}
diff --git a/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/unmute_instance.ts b/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/unmute_instance.ts
new file mode 100644
index 00000000000000..b466575841d0ad
--- /dev/null
+++ b/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/unmute_instance.ts
@@ -0,0 +1,71 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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 { UserAtSpaceScenarios } from '../../scenarios';
+import { AlertUtils, getUrlPrefix, getTestAlertData, ObjectRemover } from '../../../common/lib';
+import { FtrProviderContext } from '../../../common/ftr_provider_context';
+
+// eslint-disable-next-line import/no-default-export
+export default function createMuteAlertInstanceTests({ getService }: FtrProviderContext) {
+  const supertest = getService('supertest');
+  const supertestWithoutAuth = getService('supertestWithoutAuth');
+
+  describe('unmute_instance', () => {
+    const objectRemover = new ObjectRemover(supertest);
+
+    after(() => objectRemover.removeAll());
+
+    for (const scenario of UserAtSpaceScenarios) {
+      const { user, space } = scenario;
+      const alertUtils = new AlertUtils({ user, space, supertestWithoutAuth });
+
+      describe(scenario.id, () => {
+        it('should handle unmute alert instance request appropriately', async () => {
+          const { body: createdAlert } = await supertest
+            .post(`${getUrlPrefix(space.id)}/api/alert`)
+            .set('kbn-xsrf', 'foo')
+            .send(getTestAlertData({ enabled: false }))
+            .expect(200);
+          objectRemover.add(space.id, createdAlert.id, 'alert');
+
+          await supertest
+            .post(`${getUrlPrefix(space.id)}/api/alert/${createdAlert.id}/alert_instance/1/_mute`)
+            .set('kbn-xsrf', 'foo')
+            .expect(204, '');
+
+          const response = await alertUtils.getUnmuteInstanceRequest(createdAlert.id, '1');
+
+          switch (scenario.id) {
+            case 'no_kibana_privileges at space1':
+            case 'space_1_all at space2':
+            case 'global_read at space1':
+              expect(response.statusCode).to.eql(404);
+              expect(response.body).to.eql({
+                statusCode: 404,
+                error: 'Not Found',
+                message: 'Not Found',
+              });
+              break;
+            case 'superuser at space1':
+            case 'space_1_all at space1':
+              expect(response.statusCode).to.eql(204);
+              expect(response.body).to.eql('');
+              const { body: updatedAlert } = await supertestWithoutAuth
+                .get(`${getUrlPrefix(space.id)}/api/alert/${createdAlert.id}`)
+                .set('kbn-xsrf', 'foo')
+                .auth(user.username, user.password)
+                .expect(200);
+              expect(updatedAlert.mutedInstanceIds).to.eql([]);
+              break;
+            default:
+              throw new Error(`Scenario untested: ${JSON.stringify(scenario)}`);
+          }
+        });
+      });
+    }
+  });
+}
diff --git a/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/update.ts b/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/update.ts
index c6fe9ca6da9b47..5736b82dffec5f 100644
--- a/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/update.ts
+++ b/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/update.ts
@@ -61,8 +61,14 @@ export default function createUpdateTests({ getService }: FtrProviderContext) {
               expect(response.body).to.eql({
                 ...updatedData,
                 id: createdAlert.id,
+                alertTypeId: 'test.noop',
+                createdBy: 'elastic',
+                enabled: true,
                 updatedBy: user.username,
                 apiKeyOwner: user.username,
+                muteAll: false,
+                mutedInstanceIds: [],
+                scheduledTaskId: createdAlert.scheduledTaskId,
               });
               break;
             default:
diff --git a/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/update_api_key.ts b/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/update_api_key.ts
index a3357d7ac46c34..4963d749c2935c 100644
--- a/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/update_api_key.ts
+++ b/x-pack/test/alerting_api_integration/security_and_spaces/tests/alerting/update_api_key.ts
@@ -5,8 +5,8 @@
  */
 
 import expect from '@kbn/expect';
-import { UserAtSpaceScenarios, Spaces } from '../../scenarios';
-import { getUrlPrefix, getTestAlertData, ObjectRemover } from '../../../common/lib';
+import { UserAtSpaceScenarios } from '../../scenarios';
+import { AlertUtils, getUrlPrefix, getTestAlertData, ObjectRemover } from '../../../common/lib';
 import { FtrProviderContext } from '../../../common/ftr_provider_context';
 
 // eslint-disable-next-line import/no-default-export
@@ -16,16 +16,13 @@ export default function createUpdateApiKeyTests({ getService }: FtrProviderConte
 
   describe('update_api_key', () => {
     const objectRemover = new ObjectRemover(supertest);
-    const OtherSpace = Spaces.find(space => space.id === 'other');
-
-    if (!OtherSpace) {
-      throw new Error('Space "other" not defined in scenarios');
-    }
 
     after(() => objectRemover.removeAll());
 
     for (const scenario of UserAtSpaceScenarios) {
       const { user, space } = scenario;
+      const alertUtils = new AlertUtils({ user, space, supertestWithoutAuth });
+
       describe(scenario.id, () => {
         it('should handle update alert api key request appropriately', async () => {
           const { body: createdAlert } = await supertest
@@ -35,10 +32,7 @@ export default function createUpdateApiKeyTests({ getService }: FtrProviderConte
             .expect(200);
           objectRemover.add(space.id, createdAlert.id, 'alert');
 
-          const response = await supertestWithoutAuth
-            .post(`${getUrlPrefix(space.id)}/api/alert/${createdAlert.id}/_update_api_key`)
-            .set('kbn-xsrf', 'foo')
-            .auth(user.username, user.password);
+          const response = await alertUtils.getUpdateApiKeyRequest(createdAlert.id);
 
           switch (scenario.id) {
             case 'no_kibana_privileges at space1':
@@ -69,23 +63,19 @@ export default function createUpdateApiKeyTests({ getService }: FtrProviderConte
 
         it(`shouldn't update alert api key from another space`, async () => {
           const { body: createdAlert } = await supertest
-            .post(`${getUrlPrefix(space.id)}/api/alert`)
+            .post(`${getUrlPrefix('other')}/api/alert`)
             .set('kbn-xsrf', 'foo')
             .send(getTestAlertData())
             .expect(200);
-          objectRemover.add(space.id, createdAlert.id, 'alert');
+          objectRemover.add('other', createdAlert.id, 'alert');
 
-          const response = await supertestWithoutAuth
-            .post(`${getUrlPrefix(OtherSpace.id)}/api/alert/${createdAlert.id}/_update_api_key`)
-            .set('kbn-xsrf', 'foo')
-            .auth(user.username, user.password);
+          const response = await alertUtils.getUpdateApiKeyRequest(createdAlert.id);
 
           expect(response.statusCode).to.eql(404);
           switch (scenario.id) {
             case 'no_kibana_privileges at space1':
             case 'space_1_all at space2':
             case 'global_read at space1':
-            case 'space_1_all at space1':
               expect(response.body).to.eql({
                 statusCode: 404,
                 error: 'Not Found',
@@ -93,6 +83,7 @@ export default function createUpdateApiKeyTests({ getService }: FtrProviderConte
               });
               break;
             case 'superuser at space1':
+            case 'space_1_all at space1':
               expect(response.body).to.eql({
                 statusCode: 404,
                 error: 'Not Found',
diff --git a/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/alerts.ts b/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/alerts.ts
index 07f6fbfc395c34..02e0b3795fcc52 100644
--- a/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/alerts.ts
+++ b/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/alerts.ts
@@ -13,65 +13,28 @@ import {
   getUrlPrefix,
   getTestAlertData,
   ObjectRemover,
+  AlertUtils,
 } from '../../../common/lib';
 
 // eslint-disable-next-line import/no-default-export
 export default function alertTests({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
+  const supertestWithoutAuth = getService('supertestWithoutAuth');
   const es = getService('es');
   const retry = getService('retry');
   const esTestIndexTool = new ESTestIndexTool(es, retry);
 
   describe('alerts', () => {
+    let alertUtils: AlertUtils;
+    let indexRecordActionId: string;
     const authorizationIndex = '.kibana-test-authorization';
-    const objectRemover = new ObjectRemover(supertest);
+    const objectRemover = new ObjectRemover(supertestWithoutAuth);
 
     before(async () => {
       await esTestIndexTool.destroy();
       await esTestIndexTool.setup();
       await es.indices.create({ index: authorizationIndex });
-    });
-    afterEach(() => objectRemover.removeAll());
-    after(async () => {
-      await esTestIndexTool.destroy();
-      await es.indices.delete({ index: authorizationIndex });
-    });
-
-    async function searchTestIndexDocs(source: string, reference: string) {
-      return await es.search({
-        index: ES_TEST_INDEX_NAME,
-        body: {
-          query: {
-            bool: {
-              must: [
-                {
-                  term: {
-                    source,
-                  },
-                },
-                {
-                  term: {
-                    reference,
-                  },
-                },
-              ],
-            },
-          },
-        },
-      });
-    }
-
-    async function waitForTestIndexDocs(source: string, reference: string, numDocs: number = 1) {
-      return await retry.try(async () => {
-        const searchResult = await searchTestIndexDocs(source, reference);
-        expect(searchResult.hits.total.value).to.eql(numDocs);
-        return searchResult.hits.hits;
-      });
-    }
-
-    async function createIndexRecordAction(spaceId: string) {
-      const { body: createdAction } = await supertest
-        .post(`${getUrlPrefix(spaceId)}/api/action`)
+      const { body: createdAction } = await supertestWithoutAuth
+        .post(`${getUrlPrefix(Spaces.space1.id)}/api/action`)
         .set('kbn-xsrf', 'foo')
         .send({
           description: 'My action',
@@ -84,43 +47,28 @@ export default function alertTests({ getService }: FtrProviderContext) {
           },
         })
         .expect(200);
-      objectRemover.add(spaceId, createdAction.id, 'action');
-      return createdAction;
-    }
+      indexRecordActionId = createdAction.id;
+      alertUtils = new AlertUtils({
+        space: Spaces.space1,
+        supertestWithoutAuth,
+        indexRecordActionId,
+        objectRemover,
+      });
+    });
+    afterEach(() => objectRemover.removeAll());
+    after(async () => {
+      await esTestIndexTool.destroy();
+      await es.indices.delete({ index: authorizationIndex });
+      objectRemover.add(Spaces.space1.id, indexRecordActionId, 'action');
+      await objectRemover.removeAll();
+    });
 
     it('should schedule task, run alert and schedule actions', async () => {
-      const reference = `create-test-1:${Spaces.space1.id}`;
-      const createdAction = await createIndexRecordAction(Spaces.space1.id);
-
-      const response = await supertest
-        .post(`${getUrlPrefix(Spaces.space1.id)}/api/alert`)
-        .set('kbn-xsrf', 'foo')
-        .send(
-          getTestAlertData({
-            interval: '1m',
-            alertTypeId: 'test.always-firing',
-            alertTypeParams: {
-              index: ES_TEST_INDEX_NAME,
-              reference,
-            },
-            actions: [
-              {
-                group: 'default',
-                id: createdAction.id,
-                params: {
-                  index: ES_TEST_INDEX_NAME,
-                  reference,
-                  message:
-                    'instanceContextValue: {{context.instanceContextValue}}, instanceStateValue: {{state.instanceStateValue}}',
-                },
-              },
-            ],
-          })
-        );
+      const reference = alertUtils.generateReference();
+      const response = await alertUtils.createAlwaysFiringAction({ reference });
 
       expect(response.statusCode).to.eql(200);
-      objectRemover.add(Spaces.space1.id, response.body.id, 'alert');
-      const alertTestRecord = (await waitForTestIndexDocs(
+      const alertTestRecord = (await esTestIndexTool.waitForDocs(
         'alert:test.always-firing',
         reference
       ))[0];
@@ -133,7 +81,7 @@ export default function alertTests({ getService }: FtrProviderContext) {
           reference,
         },
       });
-      const actionTestRecord = (await waitForTestIndexDocs(
+      const actionTestRecord = (await esTestIndexTool.waitForDocs(
         'action:test.index-record',
         reference
       ))[0];
@@ -160,7 +108,7 @@ export default function alertTests({ getService }: FtrProviderContext) {
       // We have to provide the test.rate-limit the next runAt, for testing purposes
       const retryDate = new Date(Date.now() + 60000);
 
-      const { body: createdAction } = await supertest
+      const { body: createdAction } = await supertestWithoutAuth
         .post(`${getUrlPrefix(Spaces.space1.id)}/api/action`)
         .set('kbn-xsrf', 'foo')
         .send({
@@ -171,8 +119,8 @@ export default function alertTests({ getService }: FtrProviderContext) {
         .expect(200);
       objectRemover.add(Spaces.space1.id, createdAction.id, 'action');
 
-      const reference = `create-test-2:${Spaces.space1.id}`;
-      const response = await supertest
+      const reference = alertUtils.generateReference();
+      const response = await supertestWithoutAuth
         .post(`${getUrlPrefix(Spaces.space1.id)}/api/alert`)
         .set('kbn-xsrf', 'foo')
         .send(
@@ -240,8 +188,8 @@ export default function alertTests({ getService }: FtrProviderContext) {
     });
 
     it('should have proper callCluster and savedObjectsClient authorization for alert type executor', async () => {
-      const reference = `create-test-3:${Spaces.space1.id}`;
-      const response = await supertest
+      const reference = alertUtils.generateReference();
+      const response = await supertestWithoutAuth
         .post(`${getUrlPrefix(Spaces.space1.id)}/api/alert`)
         .set('kbn-xsrf', 'foo')
         .send(
@@ -259,7 +207,7 @@ export default function alertTests({ getService }: FtrProviderContext) {
 
       expect(response.statusCode).to.eql(200);
       objectRemover.add(Spaces.space1.id, response.body.id, 'alert');
-      const alertTestRecord = (await waitForTestIndexDocs(
+      const alertTestRecord = (await esTestIndexTool.waitForDocs(
         'alert:test.authorization',
         reference
       ))[0];
@@ -277,8 +225,8 @@ export default function alertTests({ getService }: FtrProviderContext) {
     });
 
     it('should have proper callCluster and savedObjectsClient authorization for action type executor', async () => {
-      const reference = `create-test-4:${Spaces.space1.id}`;
-      const { body: createdAction } = await supertest
+      const reference = alertUtils.generateReference();
+      const { body: createdAction } = await supertestWithoutAuth
         .post(`${getUrlPrefix(Spaces.space1.id)}/api/action`)
         .set('kbn-xsrf', 'foo')
         .send({
@@ -287,7 +235,7 @@ export default function alertTests({ getService }: FtrProviderContext) {
         })
         .expect(200);
       objectRemover.add(Spaces.space1.id, createdAction.id, 'action');
-      const response = await supertest
+      const response = await supertestWithoutAuth
         .post(`${getUrlPrefix(Spaces.space1.id)}/api/alert`)
         .set('kbn-xsrf', 'foo')
         .send(
@@ -315,7 +263,7 @@ export default function alertTests({ getService }: FtrProviderContext) {
 
       expect(response.statusCode).to.eql(200);
       objectRemover.add(Spaces.space1.id, response.body.id, 'alert');
-      const actionTestRecord = (await waitForTestIndexDocs(
+      const actionTestRecord = (await esTestIndexTool.waitForDocs(
         'action:test.authorization',
         reference
       ))[0];
diff --git a/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/create.ts b/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/create.ts
index ebd82a819c5023..10335633f5d28e 100644
--- a/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/create.ts
+++ b/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/create.ts
@@ -45,6 +45,8 @@ export default function createAlertTests({ getService }: FtrProviderContext) {
         scheduledTaskId: response.body.scheduledTaskId,
         updatedBy: null,
         throttle: '1m',
+        muteAll: false,
+        mutedInstanceIds: [],
       });
       expect(typeof response.body.scheduledTaskId).to.be('string');
       const { _source: taskRecord } = await getScheduledTask(response.body.scheduledTaskId);
diff --git a/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/disable.ts b/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/disable.ts
index 1b2e7a39f488ee..664e74835d4158 100644
--- a/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/disable.ts
+++ b/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/disable.ts
@@ -6,16 +6,17 @@
 
 import expect from '@kbn/expect';
 import { Spaces } from '../../scenarios';
-import { getUrlPrefix, getTestAlertData, ObjectRemover } from '../../../common/lib';
+import { AlertUtils, getUrlPrefix, getTestAlertData, ObjectRemover } from '../../../common/lib';
 import { FtrProviderContext } from '../../../common/ftr_provider_context';
 
 // eslint-disable-next-line import/no-default-export
 export default function createDisableAlertTests({ getService }: FtrProviderContext) {
   const es = getService('es');
-  const supertest = getService('supertest');
+  const supertestWithoutAuth = getService('supertestWithoutAuth');
 
   describe('disable', () => {
-    const objectRemover = new ObjectRemover(supertest);
+    const objectRemover = new ObjectRemover(supertestWithoutAuth);
+    const alertUtils = new AlertUtils({ space: Spaces.space1, supertestWithoutAuth });
 
     after(() => objectRemover.removeAll());
 
@@ -27,17 +28,14 @@ export default function createDisableAlertTests({ getService }: FtrProviderConte
     }
 
     it('should handle disable alert request appropriately', async () => {
-      const { body: createdAlert } = await supertest
+      const { body: createdAlert } = await supertestWithoutAuth
         .post(`${getUrlPrefix(Spaces.space1.id)}/api/alert`)
         .set('kbn-xsrf', 'foo')
         .send(getTestAlertData({ enabled: true }))
         .expect(200);
       objectRemover.add(Spaces.space1.id, createdAlert.id, 'alert');
 
-      await supertest
-        .post(`${getUrlPrefix(Spaces.space1.id)}/api/alert/${createdAlert.id}/_disable`)
-        .set('kbn-xsrf', 'foo')
-        .expect(204, '');
+      await alertUtils.disable(createdAlert.id);
 
       try {
         await getScheduledTask(createdAlert.scheduledTaskId);
@@ -48,21 +46,18 @@ export default function createDisableAlertTests({ getService }: FtrProviderConte
     });
 
     it(`shouldn't disable alert from another space`, async () => {
-      const { body: createdAlert } = await supertest
-        .post(`${getUrlPrefix(Spaces.space1.id)}/api/alert`)
+      const { body: createdAlert } = await supertestWithoutAuth
+        .post(`${getUrlPrefix(Spaces.other.id)}/api/alert`)
         .set('kbn-xsrf', 'foo')
         .send(getTestAlertData({ enabled: true }))
         .expect(200);
-      objectRemover.add(Spaces.space1.id, createdAlert.id, 'alert');
+      objectRemover.add(Spaces.other.id, createdAlert.id, 'alert');
 
-      await supertest
-        .post(`${getUrlPrefix(Spaces.other.id)}/api/alert/${createdAlert.id}/_disable`)
-        .set('kbn-xsrf', 'foo')
-        .expect(404, {
-          statusCode: 404,
-          error: 'Not Found',
-          message: `Saved object [alert/${createdAlert.id}] not found`,
-        });
+      await alertUtils.getDisableRequest(createdAlert.id).expect(404, {
+        statusCode: 404,
+        error: 'Not Found',
+        message: `Saved object [alert/${createdAlert.id}] not found`,
+      });
     });
   });
 }
diff --git a/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/enable.ts b/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/enable.ts
index 3a43ccbd07ac51..2a8de1f6e31c37 100644
--- a/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/enable.ts
+++ b/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/enable.ts
@@ -6,16 +6,17 @@
 
 import expect from '@kbn/expect';
 import { Spaces } from '../../scenarios';
-import { getUrlPrefix, getTestAlertData, ObjectRemover } from '../../../common/lib';
+import { AlertUtils, getUrlPrefix, getTestAlertData, ObjectRemover } from '../../../common/lib';
 import { FtrProviderContext } from '../../../common/ftr_provider_context';
 
 // eslint-disable-next-line import/no-default-export
 export default function createEnableAlertTests({ getService }: FtrProviderContext) {
   const es = getService('es');
-  const supertest = getService('supertest');
+  const supertestWithoutAuth = getService('supertestWithoutAuth');
 
   describe('enable', () => {
-    const objectRemover = new ObjectRemover(supertest);
+    const objectRemover = new ObjectRemover(supertestWithoutAuth);
+    const alertUtils = new AlertUtils({ space: Spaces.space1, supertestWithoutAuth });
 
     after(() => objectRemover.removeAll());
 
@@ -27,19 +28,16 @@ export default function createEnableAlertTests({ getService }: FtrProviderContex
     }
 
     it('should handle enable alert request appropriately', async () => {
-      const { body: createdAlert } = await supertest
+      const { body: createdAlert } = await supertestWithoutAuth
         .post(`${getUrlPrefix(Spaces.space1.id)}/api/alert`)
         .set('kbn-xsrf', 'foo')
         .send(getTestAlertData({ enabled: false }))
         .expect(200);
       objectRemover.add(Spaces.space1.id, createdAlert.id, 'alert');
 
-      await supertest
-        .post(`${getUrlPrefix(Spaces.space1.id)}/api/alert/${createdAlert.id}/_enable`)
-        .set('kbn-xsrf', 'foo')
-        .expect(204, '');
+      await alertUtils.enable(createdAlert.id);
 
-      const { body: updatedAlert } = await supertest
+      const { body: updatedAlert } = await supertestWithoutAuth
         .get(`${getUrlPrefix(Spaces.space1.id)}/api/alert/${createdAlert.id}`)
         .set('kbn-xsrf', 'foo')
         .expect(200);
@@ -54,21 +52,18 @@ export default function createEnableAlertTests({ getService }: FtrProviderContex
     });
 
     it(`shouldn't enable alert from another space`, async () => {
-      const { body: createdAlert } = await supertest
-        .post(`${getUrlPrefix(Spaces.space1.id)}/api/alert`)
+      const { body: createdAlert } = await supertestWithoutAuth
+        .post(`${getUrlPrefix(Spaces.other.id)}/api/alert`)
         .set('kbn-xsrf', 'foo')
         .send(getTestAlertData({ enabled: false }))
         .expect(200);
-      objectRemover.add(Spaces.space1.id, createdAlert.id, 'alert');
+      objectRemover.add(Spaces.other.id, createdAlert.id, 'alert');
 
-      await supertest
-        .post(`${getUrlPrefix(Spaces.other.id)}/api/alert/${createdAlert.id}/_enable`)
-        .set('kbn-xsrf', 'foo')
-        .expect(404, {
-          statusCode: 404,
-          error: 'Not Found',
-          message: `Saved object [alert/${createdAlert.id}] not found`,
-        });
+      await alertUtils.getEnableRequest(createdAlert.id).expect(404, {
+        statusCode: 404,
+        error: 'Not Found',
+        message: `Saved object [alert/${createdAlert.id}] not found`,
+      });
     });
   });
 }
diff --git a/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/find.ts b/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/find.ts
index e90475f8cf80b5..521befeb490471 100644
--- a/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/find.ts
+++ b/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/find.ts
@@ -48,6 +48,8 @@ export default function createFindTests({ getService }: FtrProviderContext) {
         scheduledTaskId: match.scheduledTaskId,
         updatedBy: null,
         throttle: '1m',
+        muteAll: false,
+        mutedInstanceIds: [],
       });
     });
 
diff --git a/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/get.ts b/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/get.ts
index 3848bac4c44ef2..cd30b65cb180ee 100644
--- a/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/get.ts
+++ b/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/get.ts
@@ -42,6 +42,8 @@ export default function createGetTests({ getService }: FtrProviderContext) {
         scheduledTaskId: response.body.scheduledTaskId,
         updatedBy: null,
         throttle: '1m',
+        muteAll: false,
+        mutedInstanceIds: [],
       });
     });
 
diff --git a/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/index.ts b/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/index.ts
index 0774bdc17fd228..1aa084356cfa49 100644
--- a/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/index.ts
+++ b/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/index.ts
@@ -16,6 +16,10 @@ export default function alertingTests({ loadTestFile }: FtrProviderContext) {
     loadTestFile(require.resolve('./find'));
     loadTestFile(require.resolve('./get'));
     loadTestFile(require.resolve('./list_alert_types'));
+    loadTestFile(require.resolve('./mute_all'));
+    loadTestFile(require.resolve('./mute_instance'));
+    loadTestFile(require.resolve('./unmute_all'));
+    loadTestFile(require.resolve('./unmute_instance'));
     loadTestFile(require.resolve('./update'));
     loadTestFile(require.resolve('./update_api_key'));
     loadTestFile(require.resolve('./alerts'));
diff --git a/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/mute_all.ts b/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/mute_all.ts
new file mode 100644
index 00000000000000..dba3046aa4b7fe
--- /dev/null
+++ b/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/mute_all.ts
@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import expect from '@kbn/expect';
+import { Spaces } from '../../scenarios';
+import { AlertUtils, getUrlPrefix, getTestAlertData, ObjectRemover } from '../../../common/lib';
+import { FtrProviderContext } from '../../../common/ftr_provider_context';
+
+// eslint-disable-next-line import/no-default-export
+export default function createMuteTests({ getService }: FtrProviderContext) {
+  const supertestWithoutAuth = getService('supertestWithoutAuth');
+
+  describe('mute_all', () => {
+    const objectRemover = new ObjectRemover(supertestWithoutAuth);
+    const alertUtils = new AlertUtils({ space: Spaces.space1, supertestWithoutAuth });
+
+    after(() => objectRemover.removeAll());
+
+    it('should handle mute alert request appropriately', async () => {
+      const { body: createdAlert } = await supertestWithoutAuth
+        .post(`${getUrlPrefix(Spaces.space1.id)}/api/alert`)
+        .set('kbn-xsrf', 'foo')
+        .send(getTestAlertData({ enabled: false }))
+        .expect(200);
+      objectRemover.add(Spaces.space1.id, createdAlert.id, 'alert');
+
+      await alertUtils.muteAll(createdAlert.id);
+
+      const { body: updatedAlert } = await supertestWithoutAuth
+        .get(`${getUrlPrefix(Spaces.space1.id)}/api/alert/${createdAlert.id}`)
+        .set('kbn-xsrf', 'foo')
+        .expect(200);
+      expect(updatedAlert.muteAll).to.eql(true);
+    });
+  });
+}
diff --git a/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/mute_instance.ts b/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/mute_instance.ts
new file mode 100644
index 00000000000000..09ca3597160264
--- /dev/null
+++ b/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/mute_instance.ts
@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import expect from '@kbn/expect';
+import { Spaces } from '../../scenarios';
+import { AlertUtils, getUrlPrefix, getTestAlertData, ObjectRemover } from '../../../common/lib';
+import { FtrProviderContext } from '../../../common/ftr_provider_context';
+
+// eslint-disable-next-line import/no-default-export
+export default function createMuteInstanceTests({ getService }: FtrProviderContext) {
+  const supertestWithoutAuth = getService('supertestWithoutAuth');
+
+  describe('mute_instance', () => {
+    const objectRemover = new ObjectRemover(supertestWithoutAuth);
+    const alertUtils = new AlertUtils({ space: Spaces.space1, supertestWithoutAuth });
+
+    after(() => objectRemover.removeAll());
+
+    it('should handle mute alert instance request appropriately', async () => {
+      const { body: createdAlert } = await supertestWithoutAuth
+        .post(`${getUrlPrefix(Spaces.space1.id)}/api/alert`)
+        .set('kbn-xsrf', 'foo')
+        .send(getTestAlertData({ enabled: false }))
+        .expect(200);
+      objectRemover.add(Spaces.space1.id, createdAlert.id, 'alert');
+
+      await alertUtils.muteInstance(createdAlert.id, '1');
+
+      const { body: updatedAlert } = await supertestWithoutAuth
+        .get(`${getUrlPrefix(Spaces.space1.id)}/api/alert/${createdAlert.id}`)
+        .set('kbn-xsrf', 'foo')
+        .expect(200);
+      expect(updatedAlert.mutedInstanceIds).to.eql(['1']);
+    });
+  });
+}
diff --git a/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/unmute_all.ts b/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/unmute_all.ts
new file mode 100644
index 00000000000000..70ee32a9e6fb93
--- /dev/null
+++ b/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/unmute_all.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 expect from '@kbn/expect';
+import { Spaces } from '../../scenarios';
+import { AlertUtils, getUrlPrefix, getTestAlertData, ObjectRemover } from '../../../common/lib';
+import { FtrProviderContext } from '../../../common/ftr_provider_context';
+
+// eslint-disable-next-line import/no-default-export
+export default function createUnmuteTests({ getService }: FtrProviderContext) {
+  const supertestWithoutAuth = getService('supertestWithoutAuth');
+
+  describe('unmute_all', () => {
+    const objectRemover = new ObjectRemover(supertestWithoutAuth);
+    const alertUtils = new AlertUtils({ space: Spaces.space1, supertestWithoutAuth });
+
+    after(() => objectRemover.removeAll());
+
+    it('should handle unmute alert request appropriately', async () => {
+      const { body: createdAlert } = await supertestWithoutAuth
+        .post(`${getUrlPrefix(Spaces.space1.id)}/api/alert`)
+        .set('kbn-xsrf', 'foo')
+        .send(getTestAlertData({ enabled: false }))
+        .expect(200);
+      objectRemover.add(Spaces.space1.id, createdAlert.id, 'alert');
+
+      await alertUtils.muteAll(createdAlert.id);
+      await alertUtils.unmuteAll(createdAlert.id);
+
+      const { body: updatedAlert } = await supertestWithoutAuth
+        .get(`${getUrlPrefix(Spaces.space1.id)}/api/alert/${createdAlert.id}`)
+        .set('kbn-xsrf', 'foo')
+        .expect(200);
+      expect(updatedAlert.muteAll).to.eql(false);
+    });
+  });
+}
diff --git a/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/unmute_instance.ts b/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/unmute_instance.ts
new file mode 100644
index 00000000000000..d0f1b2fdb3f9f4
--- /dev/null
+++ b/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/unmute_instance.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 expect from '@kbn/expect';
+import { Spaces } from '../../scenarios';
+import { AlertUtils, getUrlPrefix, getTestAlertData, ObjectRemover } from '../../../common/lib';
+import { FtrProviderContext } from '../../../common/ftr_provider_context';
+
+// eslint-disable-next-line import/no-default-export
+export default function createUnmuteInstanceTests({ getService }: FtrProviderContext) {
+  const supertestWithoutAuth = getService('supertestWithoutAuth');
+
+  describe('unmute_instance', () => {
+    const objectRemover = new ObjectRemover(supertestWithoutAuth);
+    const alertUtils = new AlertUtils({ space: Spaces.space1, supertestWithoutAuth });
+
+    after(() => objectRemover.removeAll());
+
+    it('should handle unmute alert instance request appropriately', async () => {
+      const { body: createdAlert } = await supertestWithoutAuth
+        .post(`${getUrlPrefix(Spaces.space1.id)}/api/alert`)
+        .set('kbn-xsrf', 'foo')
+        .send(getTestAlertData({ enabled: false }))
+        .expect(200);
+      objectRemover.add(Spaces.space1.id, createdAlert.id, 'alert');
+
+      await alertUtils.muteInstance(createdAlert.id, '1');
+      await alertUtils.unmuteInstance(createdAlert.id, '1');
+
+      const { body: updatedAlert } = await supertestWithoutAuth
+        .get(`${getUrlPrefix(Spaces.space1.id)}/api/alert/${createdAlert.id}`)
+        .set('kbn-xsrf', 'foo')
+        .expect(200);
+      expect(updatedAlert.mutedInstanceIds).to.eql([]);
+    });
+  });
+}
diff --git a/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/update.ts b/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/update.ts
index 97311daac20991..d98f6b5cd830b3 100644
--- a/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/update.ts
+++ b/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/update.ts
@@ -40,8 +40,14 @@ export default function createUpdateTests({ getService }: FtrProviderContext) {
         .expect(200, {
           ...updatedData,
           id: createdAlert.id,
+          alertTypeId: 'test.noop',
+          createdBy: null,
+          enabled: true,
           updatedBy: null,
           apiKeyOwner: null,
+          muteAll: false,
+          mutedInstanceIds: [],
+          scheduledTaskId: createdAlert.scheduledTaskId,
         });
     });
 
diff --git a/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/update_api_key.ts b/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/update_api_key.ts
index 71d20299f23774..2cd36340437402 100644
--- a/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/update_api_key.ts
+++ b/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/update_api_key.ts
@@ -6,7 +6,7 @@
 
 import expect from '@kbn/expect';
 import { Spaces } from '../../scenarios';
-import { getUrlPrefix, getTestAlertData, ObjectRemover } from '../../../common/lib';
+import { AlertUtils, getUrlPrefix, getTestAlertData, ObjectRemover } from '../../../common/lib';
 import { FtrProviderContext } from '../../../common/ftr_provider_context';
 
 /**
@@ -15,27 +15,25 @@ import { FtrProviderContext } from '../../../common/ftr_provider_context';
 
 // eslint-disable-next-line import/no-default-export
 export default function createUpdateApiKeyTests({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
+  const supertestWithoutAuth = getService('supertestWithoutAuth');
 
   describe('update_api_key', () => {
-    const objectRemover = new ObjectRemover(supertest);
+    const objectRemover = new ObjectRemover(supertestWithoutAuth);
+    const alertUtils = new AlertUtils({ space: Spaces.space1, supertestWithoutAuth });
 
     after(() => objectRemover.removeAll());
 
     it('should handle update alert api key appropriately', async () => {
-      const { body: createdAlert } = await supertest
+      const { body: createdAlert } = await supertestWithoutAuth
         .post(`${getUrlPrefix(Spaces.space1.id)}/api/alert`)
         .set('kbn-xsrf', 'foo')
         .send(getTestAlertData())
         .expect(200);
       objectRemover.add(Spaces.space1.id, createdAlert.id, 'alert');
 
-      await supertest
-        .post(`${getUrlPrefix(Spaces.space1.id)}/api/alert/${createdAlert.id}/_update_api_key`)
-        .set('kbn-xsrf', 'foo')
-        .expect(204, '');
+      await alertUtils.updateApiKey(createdAlert.id);
 
-      const { body: updatedAlert } = await supertest
+      const { body: updatedAlert } = await supertestWithoutAuth
         .get(`${getUrlPrefix(Spaces.space1.id)}/api/alert/${createdAlert.id}`)
         .set('kbn-xsrf', 'foo')
         .expect(200);
@@ -43,21 +41,18 @@ export default function createUpdateApiKeyTests({ getService }: FtrProviderConte
     });
 
     it(`shouldn't update alert api key from another space`, async () => {
-      const { body: createdAlert } = await supertest
-        .post(`${getUrlPrefix(Spaces.space1.id)}/api/alert`)
+      const { body: createdAlert } = await supertestWithoutAuth
+        .post(`${getUrlPrefix(Spaces.other.id)}/api/alert`)
         .set('kbn-xsrf', 'foo')
         .send(getTestAlertData())
         .expect(200);
-      objectRemover.add(Spaces.space1.id, createdAlert.id, 'alert');
+      objectRemover.add(Spaces.other.id, createdAlert.id, 'alert');
 
-      await supertest
-        .post(`${getUrlPrefix(Spaces.other.id)}/api/alert/${createdAlert.id}/_update_api_key`)
-        .set('kbn-xsrf', 'foo')
-        .expect(404, {
-          statusCode: 404,
-          error: 'Not Found',
-          message: `Saved object [alert/${createdAlert.id}] not found`,
-        });
+      await alertUtils.getUpdateApiKeyRequest(createdAlert.id).expect(404, {
+        statusCode: 404,
+        error: 'Not Found',
+        message: `Saved object [alert/${createdAlert.id}] not found`,
+      });
     });
   });
 }
diff --git a/x-pack/test/api_integration/apis/infra/log_analysis.ts b/x-pack/test/api_integration/apis/infra/log_analysis.ts
index bd09cdf6ff56ee..fe7d55649d1d63 100644
--- a/x-pack/test/api_integration/apis/infra/log_analysis.ts
+++ b/x-pack/test/api_integration/apis/infra/log_analysis.ts
@@ -20,8 +20,8 @@ import {
 } from '../../../../legacy/plugins/infra/common/runtime_types';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
-const TIME_BEFORE_START = 1564315100000;
-const TIME_AFTER_END = 1565040700000;
+const TIME_BEFORE_START = 1569934800000;
+const TIME_AFTER_END = 1570016700000;
 const COMMON_HEADERS = {
   'kbn-xsrf': 'some-xsrf-token',
 };
@@ -32,8 +32,8 @@ export default ({ getService }: FtrProviderContext) => {
   const supertest = getService('supertest');
 
   describe('log analysis apis', () => {
-    before(() => esArchiver.load('infra/8.0.0/ml_anomalies_log_rate'));
-    after(() => esArchiver.unload('infra/8.0.0/ml_anomalies_log_rate'));
+    before(() => esArchiver.load('infra/8.0.0/ml_anomalies_partitioned_log_rate'));
+    after(() => esArchiver.unload('infra/8.0.0/ml_anomalies_partitioned_log_rate'));
 
     describe('log rate results', () => {
       describe('with the default source', () => {
@@ -62,11 +62,12 @@ export default ({ getService }: FtrProviderContext) => {
             getLogEntryRateSuccessReponsePayloadRT.decode(body),
             fold(throwErrors(createPlainError), identity)
           );
-
           expect(logEntryRateBuckets.data.bucketDuration).to.be(15 * 60 * 1000);
           expect(logEntryRateBuckets.data.histogramBuckets).to.not.be.empty();
           expect(
-            logEntryRateBuckets.data.histogramBuckets.some(bucket => bucket.anomalies.length > 0)
+            logEntryRateBuckets.data.histogramBuckets.some(bucket => {
+              return bucket.dataSets.some(dataSet => dataSet.anomalies.length > 0);
+            })
           ).to.be(true);
         });
 
diff --git a/x-pack/test/api_integration/apis/lens/field_stats.ts b/x-pack/test/api_integration/apis/lens/field_stats.ts
index 9eba9392c4f7f0..b2bb791e2da7f1 100644
--- a/x-pack/test/api_integration/apis/lens/field_stats.ts
+++ b/x-pack/test/api_integration/apis/lens/field_stats.ts
@@ -35,7 +35,7 @@ export default ({ getService }: FtrProviderContext) => {
           .post('/api/lens/index_stats/logstash/field')
           .set(COMMON_HEADERS)
           .send({
-            query: { match_all: {} },
+            dslQuery: { match_all: {} },
             fromDate: TEST_START_TIME,
             toDate: TEST_END_TIME,
             timeFieldName: '@timestamp',
@@ -52,7 +52,7 @@ export default ({ getService }: FtrProviderContext) => {
           .post('/api/lens/index_stats/logstash-2015.09.22/field')
           .set(COMMON_HEADERS)
           .send({
-            query: { match_all: {} },
+            dslQuery: { match_all: {} },
             fromDate: TEST_START_TIME,
             toDate: TEST_END_TIME,
             timeFieldName: '@timestamp',
@@ -163,7 +163,7 @@ export default ({ getService }: FtrProviderContext) => {
           .post('/api/lens/index_stats/logstash-2015.09.22/field')
           .set(COMMON_HEADERS)
           .send({
-            query: { match_all: {} },
+            dslQuery: { match_all: {} },
             fromDate: TEST_START_TIME,
             toDate: TEST_END_TIME,
             timeFieldName: '@timestamp',
@@ -200,7 +200,7 @@ export default ({ getService }: FtrProviderContext) => {
           .post('/api/lens/index_stats/logstash-2015.09.22/field')
           .set(COMMON_HEADERS)
           .send({
-            query: { match_all: {} },
+            dslQuery: { match_all: {} },
             fromDate: TEST_START_TIME,
             toDate: TEST_END_TIME,
             timeFieldName: '@timestamp',
@@ -261,6 +261,29 @@ export default ({ getService }: FtrProviderContext) => {
           },
         });
       });
+
+      it('should apply filters and queries', async () => {
+        const { body } = await supertest
+          .post('/api/lens/index_stats/logstash-2015.09.22/field')
+          .set(COMMON_HEADERS)
+          .send({
+            dslQuery: {
+              bool: {
+                filter: [{ match: { 'geo.src': 'US' } }],
+              },
+            },
+            fromDate: TEST_START_TIME,
+            toDate: TEST_END_TIME,
+            timeFieldName: '@timestamp',
+            field: {
+              name: 'bytes',
+              type: 'number',
+            },
+          })
+          .expect(200);
+
+        expect(body.totalDocuments).to.eql(425);
+      });
     });
   });
 };
diff --git a/x-pack/test/api_integration/apis/monitoring/logs/fixtures/index_detail.json b/x-pack/test/api_integration/apis/monitoring/logs/fixtures/index_detail.json
index abba0d12dbef5d..2e9fd359962db9 100644
--- a/x-pack/test/api_integration/apis/monitoring/logs/fixtures/index_detail.json
+++ b/x-pack/test/api_integration/apis/monitoring/logs/fixtures/index_detail.json
@@ -1,7 +1,7 @@
 {
   "enabled": true,
   "logs": [{
-    "timestamp": "2019-03-15T17:07:21.089Z",
+    "timestamp": 1552669641089,
     "component": "o.e.n.Node",
     "node": "Elastic-MBP.local",
     "index": ".monitoring-es",
diff --git a/x-pack/test/api_integration/apis/monitoring/logs/fixtures/node_detail.json b/x-pack/test/api_integration/apis/monitoring/logs/fixtures/node_detail.json
index ef197266273ec3..c79fd672057510 100644
--- a/x-pack/test/api_integration/apis/monitoring/logs/fixtures/node_detail.json
+++ b/x-pack/test/api_integration/apis/monitoring/logs/fixtures/node_detail.json
@@ -1,21 +1,21 @@
 {
   "enabled": true,
   "logs": [{
-    "timestamp": "2019-03-15T17:19:07.365Z",
+    "timestamp": 1552670347365,
     "component": "o.e.d.x.m.r.a.RestMonitoringBulkAction",
     "node": "Elastic-MBP.local",
     "level": "WARN",
     "type": "deprecation",
     "message": "[POST /_xpack/monitoring/_bulk] is deprecated! Use [POST /_monitoring/bulk] instead."
   }, {
-    "timestamp": "2019-03-15T17:18:57.366Z",
+    "timestamp": 1552670337366,
     "component": "o.e.d.x.m.r.a.RestMonitoringBulkAction",
     "node": "Elastic-MBP.local",
     "level": "WARN",
     "type": "deprecation",
     "message": "[POST /_xpack/monitoring/_bulk] is deprecated! Use [POST /_monitoring/bulk] instead."
   }, {
-    "timestamp": "2019-03-15T17:18:47.400Z",
+    "timestamp": 1552670327400,
     "component": "o.e.c.m.MetaDataCreateIndexService",
     "node": "Elastic-MBP.local",
     "index": ".monitoring-beats-7-2019.03.15",
@@ -23,14 +23,14 @@
     "type": "server",
     "message": "creating index, cause [auto(bulk api)], templates [.monitoring-beats], shards [1]/[0], mappings [_doc]"
   }, {
-    "timestamp": "2019-03-15T17:18:47.387Z",
+    "timestamp": 1552670327387,
     "component": "o.e.d.x.m.r.a.RestMonitoringBulkAction",
     "node": "Elastic-MBP.local",
     "level": "WARN",
     "type": "deprecation",
     "message": "[POST /_xpack/monitoring/_bulk] is deprecated! Use [POST /_monitoring/bulk] instead."
   }, {
-    "timestamp": "2019-03-15T17:18:42.084Z",
+    "timestamp": 1552670322084,
     "component": "o.e.c.m.MetaDataMappingService",
     "node": "Elastic-MBP.local",
     "index": "filebeat-8.0.0-2019.03.15-000001",
@@ -38,7 +38,7 @@
     "type": "server",
     "message": "update_mapping [_doc]"
   }, {
-    "timestamp": "2019-03-15T17:18:41.811Z",
+    "timestamp": 1552670321811,
     "component": "o.e.c.m.MetaDataMappingService",
     "node": "Elastic-MBP.local",
     "index": "filebeat-8.0.0-2019.03.15-000001",
@@ -46,7 +46,7 @@
     "type": "server",
     "message": "update_mapping [_doc]"
   }, {
-    "timestamp": "2019-03-15T17:18:41.447Z",
+    "timestamp": 1552670321447,
     "component": "o.e.c.m.MetaDataCreateIndexService",
     "node": "Elastic-MBP.local",
     "index": "filebeat-8.0.0-2019.03.15-000001",
@@ -54,21 +54,21 @@
     "type": "server",
     "message": "creating index, cause [api], templates [filebeat-8.0.0], shards [1]/[1], mappings [_doc]"
   }, {
-    "timestamp": "2019-03-15T17:18:41.385Z",
+    "timestamp": 1552670321385,
     "component": "o.e.c.m.MetaDataIndexTemplateService",
     "node": "Elastic-MBP.local",
     "level": "INFO",
     "type": "server",
     "message": "adding template [filebeat-8.0.0] for index patterns [filebeat-8.0.0-*]"
   }, {
-    "timestamp": "2019-03-15T17:18:41.185Z",
+    "timestamp": 1552670321185,
     "component": "o.e.x.i.a.TransportPutLifecycleAction",
     "node": "Elastic-MBP.local",
     "level": "INFO",
     "type": "server",
     "message": "adding index lifecycle policy [filebeat-8.0.0]"
   }, {
-    "timestamp": "2019-03-15T17:18:36.137Z",
+    "timestamp": 1552670316137,
     "component": "o.e.c.r.a.AllocationService",
     "node": "Elastic-MBP.local",
     "level": "INFO",
diff --git a/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/detect_apm.json b/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/detect_apm.json
index 518c074bc985d7..a791c2b2b7419d 100644
--- a/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/detect_apm.json
+++ b/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/detect_apm.json
@@ -3,6 +3,7 @@
     "totalUniqueInstanceCount": 0,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": {
       "doesExist": true
     },
@@ -12,6 +13,7 @@
     "totalUniqueInstanceCount": 0,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": {
       "mightExist": false
     },
@@ -21,6 +23,7 @@
     "totalUniqueInstanceCount": 0,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": {
       "mightExist": false
     },
@@ -30,6 +33,7 @@
     "totalUniqueInstanceCount": 0,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": {
       "mightExist": true
     },
@@ -39,6 +43,7 @@
     "totalUniqueInstanceCount": 0,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": {
       "doesExist": true
     },
diff --git a/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/detect_beats.json b/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/detect_beats.json
index 219b2194d04db1..3ce2f20415b5f2 100644
--- a/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/detect_beats.json
+++ b/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/detect_beats.json
@@ -3,6 +3,7 @@
     "totalUniqueInstanceCount": 1,
     "totalUniqueFullyMigratedCount": 1,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": null,
     "byUuid": {
       "5b2de169-2785-441b-ae8c-186a1936b17d": {
@@ -17,6 +18,7 @@
     "totalUniqueInstanceCount": 0,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": {
       "mightExist": true
     },
@@ -26,6 +28,7 @@
     "totalUniqueInstanceCount": 0,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": {
       "mightExist": false
     },
@@ -35,6 +38,7 @@
     "totalUniqueInstanceCount": 0,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": {
       "mightExist": false
     },
@@ -44,6 +48,7 @@
     "totalUniqueInstanceCount": 1,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 1,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": null,
     "byUuid": {
       "agI8JhXhShasvuDgq0VxRg": {
diff --git a/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/detect_beats_management.json b/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/detect_beats_management.json
index 72e44a3227728e..a64e2f40b33dc9 100644
--- a/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/detect_beats_management.json
+++ b/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/detect_beats_management.json
@@ -3,6 +3,7 @@
     "totalUniqueInstanceCount": 0,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": {
       "doesExist": true
     },
@@ -12,6 +13,7 @@
     "totalUniqueInstanceCount": 0,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": {
       "mightExist": true
     },
@@ -21,6 +23,7 @@
     "totalUniqueInstanceCount": 0,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": {
       "mightExist": false
     },
@@ -30,6 +33,7 @@
     "totalUniqueInstanceCount": 0,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": {
       "mightExist": false
     },
@@ -39,6 +43,7 @@
     "totalUniqueInstanceCount": 0,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": {
       "doesExist": true
     },
diff --git a/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/detect_logstash.json b/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/detect_logstash.json
index a30ee6c04640d4..cc870216d405bd 100644
--- a/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/detect_logstash.json
+++ b/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/detect_logstash.json
@@ -3,6 +3,7 @@
     "totalUniqueInstanceCount": 0,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": {
       "doesExist": true
     },
@@ -12,6 +13,7 @@
     "totalUniqueInstanceCount": 0,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": {
       "mightExist": false
     },
@@ -21,6 +23,7 @@
     "totalUniqueInstanceCount": 0,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": {
       "mightExist": true
     },
@@ -30,6 +33,7 @@
     "totalUniqueInstanceCount": 0,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": {
       "mightExist": false
     },
@@ -39,6 +43,7 @@
     "totalUniqueInstanceCount": 0,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": {
       "doesExist": true
     },
diff --git a/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/detect_logstash_management.json b/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/detect_logstash_management.json
index a30ee6c04640d4..cc870216d405bd 100644
--- a/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/detect_logstash_management.json
+++ b/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/detect_logstash_management.json
@@ -3,6 +3,7 @@
     "totalUniqueInstanceCount": 0,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": {
       "doesExist": true
     },
@@ -12,6 +13,7 @@
     "totalUniqueInstanceCount": 0,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": {
       "mightExist": false
     },
@@ -21,6 +23,7 @@
     "totalUniqueInstanceCount": 0,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": {
       "mightExist": true
     },
@@ -30,6 +33,7 @@
     "totalUniqueInstanceCount": 0,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": {
       "mightExist": false
     },
@@ -39,6 +43,7 @@
     "totalUniqueInstanceCount": 0,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": {
       "doesExist": true
     },
diff --git a/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/es_and_kibana_exclusive_mb.json b/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/es_and_kibana_exclusive_mb.json
index 28f90aeba7ceb2..4ae753aca52251 100644
--- a/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/es_and_kibana_exclusive_mb.json
+++ b/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/es_and_kibana_exclusive_mb.json
@@ -3,6 +3,7 @@
     "totalUniqueInstanceCount": 1,
     "totalUniqueFullyMigratedCount": 1,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": null,
     "byUuid": {
       "5b2de169-2785-441b-ae8c-186a1936b17d": {
@@ -17,6 +18,7 @@
     "totalUniqueInstanceCount": 1,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 1,
     "detected": null,
     "byUuid": {
       "8eba4902-df80-43b0-b6c2-ed8ca290984e": {
@@ -32,6 +34,7 @@
     "totalUniqueInstanceCount": 1,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 1,
     "detected": null,
     "byUuid": {
       "4134a00e-89e4-4896-a3d4-c3a9aa03a594": {
@@ -46,6 +49,7 @@
     "totalUniqueInstanceCount": 0,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": {
       "mightExist": false
     },
@@ -55,6 +59,7 @@
     "totalUniqueInstanceCount": 1,
     "totalUniqueFullyMigratedCount": 1,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": null,
     "byUuid": {
       "agI8JhXhShasvuDgq0VxRg": {
diff --git a/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/es_and_kibana_mb.json b/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/es_and_kibana_mb.json
index 16d079ea9b7e94..6935060b4d5f7e 100644
--- a/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/es_and_kibana_mb.json
+++ b/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/es_and_kibana_mb.json
@@ -3,6 +3,7 @@
     "totalUniqueInstanceCount": 1,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 1,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": null,
     "byUuid": {
       "5b2de169-2785-441b-ae8c-186a1936b17d": {
@@ -17,6 +18,7 @@
     "totalUniqueInstanceCount": 1,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 1,
     "detected": null,
     "byUuid": {
       "8eba4902-df80-43b0-b6c2-ed8ca290984e": {
@@ -32,6 +34,7 @@
     "totalUniqueInstanceCount": 1,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 1,
     "detected": null,
     "byUuid": {
       "4134a00e-89e4-4896-a3d4-c3a9aa03a594": {
@@ -46,6 +49,7 @@
     "totalUniqueInstanceCount": 0,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": {
       "mightExist": false
     },
@@ -55,6 +59,7 @@
     "totalUniqueInstanceCount": 1,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 1,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": null,
     "byUuid": {
       "agI8JhXhShasvuDgq0VxRg": {
diff --git a/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/kibana_exclusive_mb.json b/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/kibana_exclusive_mb.json
index 7f5e8cb8897825..161ce32e8ff5f3 100644
--- a/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/kibana_exclusive_mb.json
+++ b/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/kibana_exclusive_mb.json
@@ -3,6 +3,7 @@
     "totalUniqueInstanceCount": 1,
     "totalUniqueFullyMigratedCount": 1,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": null,
     "byUuid": {
       "5b2de169-2785-441b-ae8c-186a1936b17d": {
@@ -17,6 +18,7 @@
     "totalUniqueInstanceCount": 1,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 1,
     "detected": null,
     "byUuid": {
       "8eba4902-df80-43b0-b6c2-ed8ca290984e": {
@@ -32,6 +34,7 @@
     "totalUniqueInstanceCount": 1,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 1,
     "detected": null,
     "byUuid": {
       "4134a00e-89e4-4896-a3d4-c3a9aa03a594": {
@@ -46,6 +49,7 @@
     "totalUniqueInstanceCount": 0,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": {
       "mightExist": false
     },
@@ -55,6 +59,7 @@
     "totalUniqueInstanceCount": 1,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 1,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": null,
     "byUuid": {
       "agI8JhXhShasvuDgq0VxRg": {
diff --git a/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/kibana_mb.json b/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/kibana_mb.json
index 3c6da934bbf94e..b93edacd82b310 100644
--- a/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/kibana_mb.json
+++ b/x-pack/test/api_integration/apis/monitoring/setup/collection/fixtures/kibana_mb.json
@@ -3,6 +3,7 @@
     "totalUniqueInstanceCount": 1,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 1,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": null,
     "byUuid": {
       "5b2de169-2785-441b-ae8c-186a1936b17d": {
@@ -17,6 +18,7 @@
     "totalUniqueInstanceCount": 1,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 1,
     "detected": null,
     "byUuid": {
       "8eba4902-df80-43b0-b6c2-ed8ca290984e": {
@@ -32,6 +34,7 @@
     "totalUniqueInstanceCount": 1,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 1,
     "detected": null,
     "byUuid": {
       "4134a00e-89e4-4896-a3d4-c3a9aa03a594": {
@@ -46,6 +49,7 @@
     "totalUniqueInstanceCount": 0,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 0,
     "detected": {
       "mightExist": false
     },
@@ -55,6 +59,7 @@
     "totalUniqueInstanceCount": 1,
     "totalUniqueFullyMigratedCount": 0,
     "totalUniquePartiallyMigratedCount": 0,
+    "totalUniqueInternallyCollectedCount": 1,
     "detected": null,
     "byUuid": {
       "agI8JhXhShasvuDgq0VxRg": {
diff --git a/x-pack/test/functional/apps/machine_learning/create_multi_metric_job.ts b/x-pack/test/functional/apps/machine_learning/create_multi_metric_job.ts
deleted file mode 100644
index 0eb9c7da21b964..00000000000000
--- a/x-pack/test/functional/apps/machine_learning/create_multi_metric_job.ts
+++ /dev/null
@@ -1,213 +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 '../../ftr_provider_context';
-
-// eslint-disable-next-line import/no-default-export
-export default function({ getService }: FtrProviderContext) {
-  const esArchiver = getService('esArchiver');
-  const ml = getService('ml');
-
-  const jobId = `fq_multi_1_${Date.now()}`;
-  const jobDescription =
-    'Create multi metric job based on the farequote dataset with 15m bucketspan and min/max/mean(responsetime) split by airline';
-  const jobGroups = ['automated', 'farequote', 'multi-metric'];
-  const aggAndFieldIdentifiers = ['Min(responsetime)', 'Max(responsetime)', 'Mean(responsetime)'];
-  const splitField = 'airline';
-  const bucketSpan = '15m';
-  const memoryLimit = '20MB';
-
-  describe('multi metric job creation', function() {
-    this.tags(['smoke', 'mlqa']);
-    before(async () => {
-      await esArchiver.loadIfNeeded('ml/farequote');
-    });
-
-    after(async () => {
-      await esArchiver.unload('ml/farequote');
-      await ml.api.cleanMlIndices();
-      await ml.api.cleanDataframeIndices();
-    });
-
-    it('loads the job management page', async () => {
-      await ml.navigation.navigateToMl();
-      await ml.navigation.navigateToJobManagement();
-    });
-
-    it('loads the new job source selection page', async () => {
-      await ml.jobManagement.navigateToNewJobSourceSelection();
-    });
-
-    it('loads the job type selection page', async () => {
-      await ml.jobSourceSelection.selectSourceIndexPattern('farequote');
-    });
-
-    it('loads the multi metric job wizard page', async () => {
-      await ml.jobTypeSelection.selectMultiMetricJob();
-    });
-
-    it('displays the time range step', async () => {
-      await ml.jobWizardCommon.assertTimeRangeSectionExists();
-    });
-
-    it('displays the event rate chart', async () => {
-      await ml.jobWizardCommon.clickUseFullDataButton();
-      await ml.jobWizardCommon.assertEventRateChartExists();
-    });
-
-    it('displays the pick fields step', async () => {
-      await ml.jobWizardCommon.clickNextButton();
-      await ml.jobWizardCommon.assertPickFieldsSectionExists();
-    });
-
-    it('selects detectors and displays detector previews', async () => {
-      for (const [index, aggAndFieldIdentifier] of aggAndFieldIdentifiers.entries()) {
-        await ml.jobWizardCommon.assertAggAndFieldInputExists();
-        await ml.jobWizardCommon.selectAggAndField(aggAndFieldIdentifier);
-        await ml.jobWizardCommon.assertDetectorPreviewExists(aggAndFieldIdentifier, index, 'LINE');
-      }
-    });
-
-    it('inputs the split field and displays split cards', async () => {
-      await ml.jobWizardMultiMetric.assertSplitFieldInputExists();
-      await ml.jobWizardMultiMetric.selectSplitField(splitField);
-      await ml.jobWizardMultiMetric.assertSplitFieldSelection(splitField);
-
-      await ml.jobWizardMultiMetric.assertDetectorSplitExists(splitField);
-      await ml.jobWizardMultiMetric.assertDetectorSplitFrontCardTitle('AAL');
-      await ml.jobWizardMultiMetric.assertDetectorSplitNumberOfBackCards(9);
-
-      await ml.jobWizardCommon.assertInfluencerSelection([splitField]);
-    });
-
-    it('displays the influencer field', async () => {
-      await ml.jobWizardCommon.assertInfluencerInputExists();
-      await ml.jobWizardCommon.assertInfluencerSelection([splitField]);
-    });
-
-    it('inputs the bucket span', async () => {
-      await ml.jobWizardCommon.assertBucketSpanInputExists();
-      await ml.jobWizardCommon.setBucketSpan(bucketSpan);
-      await ml.jobWizardCommon.assertBucketSpanValue(bucketSpan);
-    });
-
-    it('displays the job details step', async () => {
-      await ml.jobWizardCommon.clickNextButton();
-      await ml.jobWizardCommon.assertJobDetailsSectionExists();
-    });
-
-    it('inputs the job id', async () => {
-      await ml.jobWizardCommon.assertJobIdInputExists();
-      await ml.jobWizardCommon.setJobId(jobId);
-      await ml.jobWizardCommon.assertJobIdValue(jobId);
-    });
-
-    it('inputs the job description', async () => {
-      await ml.jobWizardCommon.assertJobDescriptionInputExists();
-      await ml.jobWizardCommon.setJobDescription(jobDescription);
-      await ml.jobWizardCommon.assertJobDescriptionValue(jobDescription);
-    });
-
-    it('inputs job groups', async () => {
-      await ml.jobWizardCommon.assertJobGroupInputExists();
-      for (const jobGroup of jobGroups) {
-        await ml.jobWizardCommon.addJobGroup(jobGroup);
-      }
-      await ml.jobWizardCommon.assertJobGroupSelection(jobGroups);
-    });
-
-    it('opens the advanced section', async () => {
-      await ml.jobWizardCommon.ensureAdvancedSectionOpen();
-    });
-
-    it('displays the model plot switch', async () => {
-      await ml.jobWizardCommon.assertModelPlotSwitchExists();
-    });
-
-    it('enables the dedicated index switch', async () => {
-      await ml.jobWizardCommon.assertDedicatedIndexSwitchExists();
-      await ml.jobWizardCommon.activateDedicatedIndexSwitch();
-      await ml.jobWizardCommon.assertDedicatedIndexSwitchCheckedState(true);
-    });
-
-    it('inputs the model memory limit', async () => {
-      await ml.jobWizardCommon.assertModelMemoryLimitInputExists();
-      await ml.jobWizardCommon.setModelMemoryLimit(memoryLimit);
-      await ml.jobWizardCommon.assertModelMemoryLimitValue(memoryLimit);
-    });
-
-    it('displays the validation step', async () => {
-      await ml.jobWizardCommon.clickNextButton();
-      await ml.jobWizardCommon.assertValidationSectionExists();
-    });
-
-    it('displays the summary step', async () => {
-      await ml.jobWizardCommon.clickNextButton();
-      await ml.jobWizardCommon.assertSummarySectionExists();
-    });
-
-    it('creates the job and finishes processing', async () => {
-      await ml.jobWizardCommon.assertCreateJobButtonExists();
-      await ml.jobWizardCommon.createJobAndWaitForCompletion();
-    });
-
-    it('displays the created job in the job list', async () => {
-      await ml.navigation.navigateToMl();
-      await ml.navigation.navigateToJobManagement();
-
-      await ml.jobTable.waitForJobsToLoad();
-      await ml.jobTable.filterWithSearchString(jobId);
-      const rows = await ml.jobTable.parseJobTable();
-      expect(rows.filter(row => row.id === jobId)).to.have.length(1);
-    });
-
-    it('displays details for the created job in the job list', async () => {
-      const expectedRow = {
-        id: jobId,
-        description: jobDescription,
-        jobGroups,
-        recordCount: '86,274',
-        memoryStatus: 'ok',
-        jobState: 'closed',
-        datafeedState: 'stopped',
-        latestTimestamp: '2016-02-11 23:59:54',
-      };
-      await ml.jobTable.assertJobRowFields(jobId, expectedRow);
-
-      const expectedCounts = {
-        job_id: jobId,
-        processed_record_count: '86,274',
-        processed_field_count: '172,548',
-        input_bytes: '6.4 MB',
-        input_field_count: '172,548',
-        invalid_date_count: '0',
-        missing_field_count: '0',
-        out_of_order_timestamp_count: '0',
-        empty_bucket_count: '0',
-        sparse_bucket_count: '0',
-        bucket_count: '479',
-        earliest_record_timestamp: '2016-02-07 00:00:00',
-        latest_record_timestamp: '2016-02-11 23:59:54',
-        input_record_count: '86,274',
-        latest_bucket_timestamp: '2016-02-11 23:45:00',
-      };
-      const expectedModelSizeStats = {
-        job_id: jobId,
-        result_type: 'model_size_stats',
-        model_bytes_exceeded: '0',
-        model_bytes_memory_limit: '20971520',
-        total_by_field_count: '59',
-        total_over_field_count: '0',
-        total_partition_field_count: '58',
-        bucket_allocation_failures_count: '0',
-        memory_status: 'ok',
-        timestamp: '2016-02-11 23:30:00',
-      };
-      await ml.jobTable.assertJobRowDetailsCounts(jobId, expectedCounts, expectedModelSizeStats);
-    });
-  });
-}
diff --git a/x-pack/test/functional/apps/machine_learning/create_population_job.ts b/x-pack/test/functional/apps/machine_learning/create_population_job.ts
deleted file mode 100644
index d588c602db36e6..00000000000000
--- a/x-pack/test/functional/apps/machine_learning/create_population_job.ts
+++ /dev/null
@@ -1,243 +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 '../../ftr_provider_context';
-
-// eslint-disable-next-line import/no-default-export
-export default function({ getService }: FtrProviderContext) {
-  const esArchiver = getService('esArchiver');
-  const ml = getService('ml');
-  const log = getService('log');
-
-  const jobId = `ec_population_1_${Date.now()}`;
-  const jobDescription =
-    'Create population job based on the ecommerce sample dataset with 2h bucketspan over customer_id' +
-    ' - detectors: (Mean(products.base_price) by customer_gender), (Mean(products.quantity) by category.leyword)';
-  const jobGroups = ['automated', 'ecommerce', 'population'];
-  const populationField = 'customer_id';
-  const detectors = [
-    {
-      identifier: 'Mean(products.base_price)',
-      splitField: 'customer_gender',
-      frontCardTitle: 'FEMALE',
-      numberOfBackCards: 1,
-    },
-    {
-      identifier: 'Mean(products.quantity)',
-      splitField: 'category.keyword',
-      frontCardTitle: "Men's Clothing",
-      numberOfBackCards: 5,
-    },
-  ];
-  const bucketSpan = '2h';
-  const memoryLimit = '8MB';
-
-  describe('population job creation', function() {
-    this.tags(['smoke', 'mlqa']);
-    before(async () => {
-      await esArchiver.loadIfNeeded('ml/ecommerce');
-    });
-
-    after(async () => {
-      await esArchiver.unload('ml/farequote');
-      await ml.api.cleanMlIndices();
-      await ml.api.cleanDataframeIndices();
-    });
-
-    it('loads the job management page', async () => {
-      await ml.navigation.navigateToMl();
-      await ml.navigation.navigateToJobManagement();
-    });
-
-    it('loads the new job source selection page', async () => {
-      await ml.jobManagement.navigateToNewJobSourceSelection();
-    });
-
-    it('loads the job type selection page', async () => {
-      await ml.jobSourceSelection.selectSourceIndexPattern('ecommerce');
-    });
-
-    it('loads the population job wizard page', async () => {
-      await ml.jobTypeSelection.selectPopulationJob();
-    });
-
-    it('displays the time range step', async () => {
-      await ml.jobWizardCommon.assertTimeRangeSectionExists();
-    });
-
-    it('displays the event rate chart', async () => {
-      await ml.jobWizardCommon.clickUseFullDataButton();
-      await ml.jobWizardCommon.assertEventRateChartExists();
-    });
-
-    it('displays the pick fields step', async () => {
-      await ml.jobWizardCommon.clickNextButton();
-      await ml.jobWizardCommon.assertPickFieldsSectionExists();
-    });
-
-    it('selects the population field', async () => {
-      await ml.jobWizardPopulation.assertPopulationFieldInputExists();
-      await ml.jobWizardPopulation.selectPopulationField(populationField);
-      await ml.jobWizardPopulation.assertPopulationFieldSelection(populationField);
-    });
-
-    it('selects detectors and displays detector previews', async () => {
-      for (const [index, detector] of detectors.entries()) {
-        await ml.jobWizardCommon.assertAggAndFieldInputExists();
-        await ml.jobWizardCommon.selectAggAndField(detector.identifier);
-        await ml.jobWizardCommon.assertDetectorPreviewExists(detector.identifier, index, 'SCATTER');
-      }
-    });
-
-    it('inputs detector split fields and displays split cards', async () => {
-      for (const [index, detector] of detectors.entries()) {
-        log.debug(detector);
-        await ml.jobWizardPopulation.assertDetectorSplitFieldInputExists(index);
-        await ml.jobWizardPopulation.selectDetectorSplitField(index, detector.splitField);
-        await ml.jobWizardPopulation.assertDetectorSplitFieldSelection(index, detector.splitField);
-
-        await ml.jobWizardPopulation.assertDetectorSplitExists(index);
-        await ml.jobWizardPopulation.assertDetectorSplitFrontCardTitle(
-          index,
-          detector.frontCardTitle
-        );
-        await ml.jobWizardPopulation.assertDetectorSplitNumberOfBackCards(
-          index,
-          detector.numberOfBackCards
-        );
-      }
-    });
-
-    it('displays the influencer field', async () => {
-      await ml.jobWizardCommon.assertInfluencerInputExists();
-      await ml.jobWizardCommon.assertInfluencerSelection(
-        [populationField].concat(detectors.map(detector => detector.splitField))
-      );
-    });
-
-    it('inputs the bucket span', async () => {
-      await ml.jobWizardCommon.assertBucketSpanInputExists();
-      await ml.jobWizardCommon.setBucketSpan(bucketSpan);
-      await ml.jobWizardCommon.assertBucketSpanValue(bucketSpan);
-    });
-
-    it('displays the job details step', async () => {
-      await ml.jobWizardCommon.clickNextButton();
-      await ml.jobWizardCommon.assertJobDetailsSectionExists();
-    });
-
-    it('inputs the job id', async () => {
-      await ml.jobWizardCommon.assertJobIdInputExists();
-      await ml.jobWizardCommon.setJobId(jobId);
-      await ml.jobWizardCommon.assertJobIdValue(jobId);
-    });
-
-    it('inputs the job description', async () => {
-      await ml.jobWizardCommon.assertJobDescriptionInputExists();
-      await ml.jobWizardCommon.setJobDescription(jobDescription);
-      await ml.jobWizardCommon.assertJobDescriptionValue(jobDescription);
-    });
-
-    it('inputs job groups', async () => {
-      await ml.jobWizardCommon.assertJobGroupInputExists();
-      for (const jobGroup of jobGroups) {
-        await ml.jobWizardCommon.addJobGroup(jobGroup);
-      }
-      await ml.jobWizardCommon.assertJobGroupSelection(jobGroups);
-    });
-
-    it('opens the advanced section', async () => {
-      await ml.jobWizardCommon.ensureAdvancedSectionOpen();
-    });
-
-    it('displays the model plot switch', async () => {
-      await ml.jobWizardCommon.assertModelPlotSwitchExists();
-    });
-
-    it('enables the dedicated index switch', async () => {
-      await ml.jobWizardCommon.assertDedicatedIndexSwitchExists();
-      await ml.jobWizardCommon.activateDedicatedIndexSwitch();
-      await ml.jobWizardCommon.assertDedicatedIndexSwitchCheckedState(true);
-    });
-
-    it('inputs the model memory limit', async () => {
-      await ml.jobWizardCommon.assertModelMemoryLimitInputExists();
-      await ml.jobWizardCommon.setModelMemoryLimit(memoryLimit);
-      await ml.jobWizardCommon.assertModelMemoryLimitValue(memoryLimit);
-    });
-
-    it('displays the validation step', async () => {
-      await ml.jobWizardCommon.clickNextButton();
-      await ml.jobWizardCommon.assertValidationSectionExists();
-    });
-
-    it('displays the summary step', async () => {
-      await ml.jobWizardCommon.clickNextButton();
-      await ml.jobWizardCommon.assertSummarySectionExists();
-    });
-
-    it('creates the job and finishes processing', async () => {
-      await ml.jobWizardCommon.assertCreateJobButtonExists();
-      await ml.jobWizardCommon.createJobAndWaitForCompletion();
-    });
-
-    it('displays the created job in the job list', async () => {
-      await ml.navigation.navigateToMl();
-      await ml.navigation.navigateToJobManagement();
-
-      await ml.jobTable.waitForJobsToLoad();
-      await ml.jobTable.filterWithSearchString(jobId);
-      const rows = await ml.jobTable.parseJobTable();
-      expect(rows.filter(row => row.id === jobId)).to.have.length(1);
-    });
-
-    it('displays details for the created job in the job list', async () => {
-      const expectedRow = {
-        id: jobId,
-        description: jobDescription,
-        jobGroups,
-        recordCount: '4,675',
-        memoryStatus: 'ok',
-        jobState: 'closed',
-        datafeedState: 'stopped',
-        latestTimestamp: '2019-07-12 23:45:36',
-      };
-      await ml.jobTable.assertJobRowFields(jobId, expectedRow);
-
-      const expectedCounts = {
-        job_id: jobId,
-        processed_record_count: '4,675',
-        processed_field_count: '23,375',
-        input_bytes: '867.7 KB',
-        input_field_count: '23,375',
-        invalid_date_count: '0',
-        missing_field_count: '0',
-        out_of_order_timestamp_count: '0',
-        empty_bucket_count: '0',
-        sparse_bucket_count: '0',
-        bucket_count: '371',
-        earliest_record_timestamp: '2019-06-12 00:04:19',
-        latest_record_timestamp: '2019-07-12 23:45:36',
-        input_record_count: '4,675',
-        latest_bucket_timestamp: '2019-07-12 22:00:00',
-      };
-      const expectedModelSizeStats = {
-        job_id: jobId,
-        result_type: 'model_size_stats',
-        model_bytes_exceeded: '0',
-        model_bytes_memory_limit: '8388608',
-        total_by_field_count: '25',
-        total_over_field_count: '92',
-        total_partition_field_count: '3',
-        bucket_allocation_failures_count: '0',
-        memory_status: 'ok',
-        timestamp: '2019-07-12 20:00:00',
-      };
-      await ml.jobTable.assertJobRowDetailsCounts(jobId, expectedCounts, expectedModelSizeStats);
-    });
-  });
-}
diff --git a/x-pack/test/functional/apps/machine_learning/create_single_metric_job.ts b/x-pack/test/functional/apps/machine_learning/create_single_metric_job.ts
deleted file mode 100644
index ad7048717f49f1..00000000000000
--- a/x-pack/test/functional/apps/machine_learning/create_single_metric_job.ts
+++ /dev/null
@@ -1,193 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-import expect from '@kbn/expect';
-
-import { FtrProviderContext } from '../../ftr_provider_context';
-
-// eslint-disable-next-line import/no-default-export
-export default function({ getService }: FtrProviderContext) {
-  const esArchiver = getService('esArchiver');
-  const ml = getService('ml');
-
-  const jobId = `fq_single_1_${Date.now()}`;
-  const jobDescription =
-    'Create single metric job based on the farequote dataset with 30m bucketspan and mean(responsetime)';
-  const jobGroups = ['automated', 'farequote', 'single-metric'];
-  const aggAndFieldIdentifier = 'Mean(responsetime)';
-  const bucketSpan = '30m';
-  const memoryLimit = '15MB';
-
-  describe('single metric job creation', function() {
-    this.tags(['smoke', 'mlqa']);
-    before(async () => {
-      await esArchiver.loadIfNeeded('ml/farequote');
-    });
-
-    after(async () => {
-      await esArchiver.unload('ml/farequote');
-      await ml.api.cleanMlIndices();
-      await ml.api.cleanDataframeIndices();
-    });
-
-    it('loads the job management page', async () => {
-      await ml.navigation.navigateToMl();
-      await ml.navigation.navigateToJobManagement();
-    });
-
-    it('loads the new job source selection page', async () => {
-      await ml.jobManagement.navigateToNewJobSourceSelection();
-    });
-
-    it('loads the job type selection page', async () => {
-      await ml.jobSourceSelection.selectSourceIndexPattern('farequote');
-    });
-
-    it('loads the single metric job wizard page', async () => {
-      await ml.jobTypeSelection.selectSingleMetricJob();
-    });
-
-    it('displays the time range step', async () => {
-      await ml.jobWizardCommon.assertTimeRangeSectionExists();
-    });
-
-    it('displays the event rate chart', async () => {
-      await ml.jobWizardCommon.clickUseFullDataButton();
-      await ml.jobWizardCommon.assertEventRateChartExists();
-    });
-
-    it('displays the pick fields step', async () => {
-      await ml.jobWizardCommon.clickNextButton();
-      await ml.jobWizardCommon.assertPickFieldsSectionExists();
-    });
-
-    it('selects field and aggregation', async () => {
-      await ml.jobWizardCommon.assertAggAndFieldInputExists();
-      await ml.jobWizardCommon.selectAggAndField(aggAndFieldIdentifier);
-      await ml.jobWizardCommon.assertAggAndFieldSelection(aggAndFieldIdentifier);
-    });
-
-    it('inputs the bucket span', async () => {
-      await ml.jobWizardCommon.assertBucketSpanInputExists();
-      await ml.jobWizardCommon.setBucketSpan(bucketSpan);
-      await ml.jobWizardCommon.assertBucketSpanValue(bucketSpan);
-    });
-
-    it('displays the job details step', async () => {
-      await ml.jobWizardCommon.clickNextButton();
-      await ml.jobWizardCommon.assertJobDetailsSectionExists();
-    });
-
-    it('inputs the job id', async () => {
-      await ml.jobWizardCommon.assertJobIdInputExists();
-      await ml.jobWizardCommon.setJobId(jobId);
-      await ml.jobWizardCommon.assertJobIdValue(jobId);
-    });
-
-    it('inputs the job description', async () => {
-      await ml.jobWizardCommon.assertJobDescriptionInputExists();
-      await ml.jobWizardCommon.setJobDescription(jobDescription);
-      await ml.jobWizardCommon.assertJobDescriptionValue(jobDescription);
-    });
-
-    it('inputs job groups', async () => {
-      await ml.jobWizardCommon.assertJobGroupInputExists();
-      for (const jobGroup of jobGroups) {
-        await ml.jobWizardCommon.addJobGroup(jobGroup);
-      }
-      await ml.jobWizardCommon.assertJobGroupSelection(jobGroups);
-    });
-
-    it('opens the advanced section', async () => {
-      await ml.jobWizardCommon.ensureAdvancedSectionOpen();
-    });
-
-    it('displays the model plot switch', async () => {
-      await ml.jobWizardCommon.assertModelPlotSwitchExists();
-    });
-
-    it('enables the dedicated index switch', async () => {
-      await ml.jobWizardCommon.assertDedicatedIndexSwitchExists();
-      await ml.jobWizardCommon.activateDedicatedIndexSwitch();
-      await ml.jobWizardCommon.assertDedicatedIndexSwitchCheckedState(true);
-    });
-
-    it('inputs the model memory limit', async () => {
-      await ml.jobWizardCommon.assertModelMemoryLimitInputExists();
-      await ml.jobWizardCommon.setModelMemoryLimit(memoryLimit);
-      await ml.jobWizardCommon.assertModelMemoryLimitValue(memoryLimit);
-    });
-
-    it('displays the validation step', async () => {
-      await ml.jobWizardCommon.clickNextButton();
-      await ml.jobWizardCommon.assertValidationSectionExists();
-    });
-
-    it('displays the summary step', async () => {
-      await ml.jobWizardCommon.clickNextButton();
-      await ml.jobWizardCommon.assertSummarySectionExists();
-    });
-
-    it('creates the job and finishes processing', async () => {
-      await ml.jobWizardCommon.assertCreateJobButtonExists();
-      await ml.jobWizardCommon.createJobAndWaitForCompletion();
-    });
-
-    it('displays the created job in the job list', async () => {
-      await ml.navigation.navigateToMl();
-      await ml.navigation.navigateToJobManagement();
-
-      await ml.jobTable.waitForJobsToLoad();
-      await ml.jobTable.filterWithSearchString(jobId);
-      const rows = await ml.jobTable.parseJobTable();
-      expect(rows.filter(row => row.id === jobId)).to.have.length(1);
-    });
-
-    it('displays details for the created job in the job list', async () => {
-      const expectedRow = {
-        id: jobId,
-        description: jobDescription,
-        jobGroups,
-        recordCount: '2,399',
-        memoryStatus: 'ok',
-        jobState: 'closed',
-        datafeedState: 'stopped',
-        latestTimestamp: '2016-02-11 23:56:59',
-      };
-      await ml.jobTable.assertJobRowFields(jobId, expectedRow);
-
-      const expectedCounts = {
-        job_id: jobId,
-        processed_record_count: '2,399',
-        processed_field_count: '4,798',
-        input_bytes: '180.6 KB',
-        input_field_count: '4,798',
-        invalid_date_count: '0',
-        missing_field_count: '0',
-        out_of_order_timestamp_count: '0',
-        empty_bucket_count: '0',
-        sparse_bucket_count: '0',
-        bucket_count: '239',
-        earliest_record_timestamp: '2016-02-07 00:02:50',
-        latest_record_timestamp: '2016-02-11 23:56:59',
-        input_record_count: '2,399',
-        latest_bucket_timestamp: '2016-02-11 23:30:00',
-      };
-      const expectedModelSizeStats = {
-        job_id: jobId,
-        result_type: 'model_size_stats',
-        model_bytes_exceeded: '0',
-        model_bytes_memory_limit: '15728640',
-        total_by_field_count: '3',
-        total_over_field_count: '0',
-        total_partition_field_count: '2',
-        bucket_allocation_failures_count: '0',
-        memory_status: 'ok',
-        timestamp: '2016-02-11 23:00:00',
-      };
-      await ml.jobTable.assertJobRowDetailsCounts(jobId, expectedCounts, expectedModelSizeStats);
-    });
-  });
-}
diff --git a/x-pack/test/functional/apps/machine_learning/feature_controls/index.ts b/x-pack/test/functional/apps/machine_learning/feature_controls/index.ts
index ec7eb53fe83c27..8b6b20e1aa0a7e 100644
--- a/x-pack/test/functional/apps/machine_learning/feature_controls/index.ts
+++ b/x-pack/test/functional/apps/machine_learning/feature_controls/index.ts
@@ -7,7 +7,7 @@ import { FtrProviderContext } from '../../../ftr_provider_context';
 
 export default function({ loadTestFile }: FtrProviderContext) {
   describe('feature controls', function() {
-    this.tags('skipFirefox');
+    this.tags(['skipFirefox', 'mlqa']);
     loadTestFile(require.resolve('./ml_security'));
     loadTestFile(require.resolve('./ml_spaces'));
   });
diff --git a/x-pack/test/functional/apps/machine_learning/index.ts b/x-pack/test/functional/apps/machine_learning/index.ts
index 5ddbfe59fb64dc..09641d8a75d638 100644
--- a/x-pack/test/functional/apps/machine_learning/index.ts
+++ b/x-pack/test/functional/apps/machine_learning/index.ts
@@ -11,8 +11,8 @@ export default function({ loadTestFile }: FtrProviderContext) {
 
     loadTestFile(require.resolve('./feature_controls'));
     loadTestFile(require.resolve('./pages'));
-    loadTestFile(require.resolve('./create_single_metric_job'));
-    loadTestFile(require.resolve('./create_multi_metric_job'));
-    loadTestFile(require.resolve('./create_population_job'));
+    loadTestFile(require.resolve('./single_metric_job'));
+    loadTestFile(require.resolve('./multi_metric_job'));
+    loadTestFile(require.resolve('./population_job'));
   });
 }
diff --git a/x-pack/test/functional/apps/machine_learning/multi_metric_job.ts b/x-pack/test/functional/apps/machine_learning/multi_metric_job.ts
new file mode 100644
index 00000000000000..2fe5cfe1269d96
--- /dev/null
+++ b/x-pack/test/functional/apps/machine_learning/multi_metric_job.ts
@@ -0,0 +1,365 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import expect from '@kbn/expect';
+
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+// eslint-disable-next-line import/no-default-export
+export default function({ getService }: FtrProviderContext) {
+  const esArchiver = getService('esArchiver');
+  const ml = getService('ml');
+
+  const jobId = `fq_multi_1_${Date.now()}`;
+  const jobIdClone = `${jobId}_clone`;
+  const jobDescription =
+    'Create multi metric job based on the farequote dataset with 15m bucketspan and min/max/mean(responsetime) split by airline';
+  const jobGroups = ['automated', 'farequote', 'multi-metric'];
+  const jobGroupsClone = [...jobGroups, 'clone'];
+  const aggAndFieldIdentifiers = ['Min(responsetime)', 'Max(responsetime)', 'Mean(responsetime)'];
+  const splitField = 'airline';
+  const bucketSpan = '15m';
+  const memoryLimit = '20mb';
+
+  function getExpectedRow(expectedJobId: string, expectedJobGroups: string[]) {
+    return {
+      id: expectedJobId,
+      description: jobDescription,
+      jobGroups: [...new Set(expectedJobGroups)].sort(),
+      recordCount: '86,274',
+      memoryStatus: 'ok',
+      jobState: 'closed',
+      datafeedState: 'stopped',
+      latestTimestamp: '2016-02-11 23:59:54',
+    };
+  }
+
+  function getExpectedCounts(expectedJobId: string) {
+    return {
+      job_id: expectedJobId,
+      processed_record_count: '86,274',
+      processed_field_count: '172,548',
+      input_bytes: '6.4 MB',
+      input_field_count: '172,548',
+      invalid_date_count: '0',
+      missing_field_count: '0',
+      out_of_order_timestamp_count: '0',
+      empty_bucket_count: '0',
+      sparse_bucket_count: '0',
+      bucket_count: '479',
+      earliest_record_timestamp: '2016-02-07 00:00:00',
+      latest_record_timestamp: '2016-02-11 23:59:54',
+      input_record_count: '86,274',
+      latest_bucket_timestamp: '2016-02-11 23:45:00',
+    };
+  }
+
+  function getExpectedModelSizeStats(expectedJobId: string) {
+    return {
+      job_id: expectedJobId,
+      result_type: 'model_size_stats',
+      model_bytes_exceeded: '0',
+      model_bytes_memory_limit: '20971520',
+      total_by_field_count: '59',
+      total_over_field_count: '0',
+      total_partition_field_count: '58',
+      bucket_allocation_failures_count: '0',
+      memory_status: 'ok',
+      timestamp: '2016-02-11 23:30:00',
+    };
+  }
+
+  describe('multi metric', function() {
+    this.tags(['smoke', 'mlqa']);
+    before(async () => {
+      await esArchiver.loadIfNeeded('ml/farequote');
+    });
+
+    after(async () => {
+      await esArchiver.unload('ml/farequote');
+      await ml.api.cleanMlIndices();
+      await ml.api.cleanDataframeIndices();
+    });
+
+    describe('job creation', function() {
+      it('loads the job management page', async () => {
+        await ml.navigation.navigateToMl();
+        await ml.navigation.navigateToJobManagement();
+      });
+
+      it('loads the new job source selection page', async () => {
+        await ml.jobManagement.navigateToNewJobSourceSelection();
+      });
+
+      it('loads the job type selection page', async () => {
+        await ml.jobSourceSelection.selectSourceIndexPattern('farequote');
+      });
+
+      it('loads the multi metric job wizard page', async () => {
+        await ml.jobTypeSelection.selectMultiMetricJob();
+      });
+
+      it('displays the time range step', async () => {
+        await ml.jobWizardCommon.assertTimeRangeSectionExists();
+      });
+
+      it('displays the event rate chart', async () => {
+        await ml.jobWizardCommon.clickUseFullDataButton(
+          'Feb 7, 2016 @ 00:00:00.000',
+          'Feb 11, 2016 @ 23:59:54.000'
+        );
+        await ml.jobWizardCommon.assertEventRateChartExists();
+        await ml.jobWizardCommon.assertEventRateChartHasData();
+      });
+
+      it('displays the pick fields step', async () => {
+        await ml.jobWizardCommon.advanceToPickFieldsSection();
+      });
+
+      it('selects detectors and displays detector previews', async () => {
+        for (const [index, aggAndFieldIdentifier] of aggAndFieldIdentifiers.entries()) {
+          await ml.jobWizardCommon.assertAggAndFieldInputExists();
+          await ml.jobWizardCommon.selectAggAndField(aggAndFieldIdentifier, false);
+          await ml.jobWizardCommon.assertDetectorPreviewExists(
+            aggAndFieldIdentifier,
+            index,
+            'LINE'
+          );
+        }
+      });
+
+      it('inputs the split field and displays split cards', async () => {
+        await ml.jobWizardMultiMetric.assertSplitFieldInputExists();
+        await ml.jobWizardMultiMetric.selectSplitField(splitField);
+
+        await ml.jobWizardMultiMetric.assertDetectorSplitExists(splitField);
+        await ml.jobWizardMultiMetric.assertDetectorSplitFrontCardTitle('AAL');
+        await ml.jobWizardMultiMetric.assertDetectorSplitNumberOfBackCards(9);
+
+        await ml.jobWizardCommon.assertInfluencerSelection([splitField]);
+      });
+
+      it('displays the influencer field', async () => {
+        await ml.jobWizardCommon.assertInfluencerInputExists();
+        await ml.jobWizardCommon.assertInfluencerSelection([splitField]);
+      });
+
+      it('inputs the bucket span', async () => {
+        await ml.jobWizardCommon.assertBucketSpanInputExists();
+        await ml.jobWizardCommon.setBucketSpan(bucketSpan);
+      });
+
+      it('displays the job details step', async () => {
+        await ml.jobWizardCommon.advanceToJobDetailsSection();
+      });
+
+      it('inputs the job id', async () => {
+        await ml.jobWizardCommon.assertJobIdInputExists();
+        await ml.jobWizardCommon.setJobId(jobId);
+      });
+
+      it('inputs the job description', async () => {
+        await ml.jobWizardCommon.assertJobDescriptionInputExists();
+        await ml.jobWizardCommon.setJobDescription(jobDescription);
+      });
+
+      it('inputs job groups', async () => {
+        await ml.jobWizardCommon.assertJobGroupInputExists();
+        for (const jobGroup of jobGroups) {
+          await ml.jobWizardCommon.addJobGroup(jobGroup);
+        }
+        await ml.jobWizardCommon.assertJobGroupSelection(jobGroups);
+      });
+
+      it('opens the advanced section', async () => {
+        await ml.jobWizardCommon.ensureAdvancedSectionOpen();
+      });
+
+      it('displays the model plot switch', async () => {
+        await ml.jobWizardCommon.assertModelPlotSwitchExists();
+      });
+
+      it('enables the dedicated index switch', async () => {
+        await ml.jobWizardCommon.assertDedicatedIndexSwitchExists();
+        await ml.jobWizardCommon.activateDedicatedIndexSwitch();
+      });
+
+      it('inputs the model memory limit', async () => {
+        await ml.jobWizardCommon.assertModelMemoryLimitInputExists();
+        await ml.jobWizardCommon.setModelMemoryLimit(memoryLimit);
+      });
+
+      it('displays the validation step', async () => {
+        await ml.jobWizardCommon.advanceToValidationSection();
+      });
+
+      it('displays the summary step', async () => {
+        await ml.jobWizardCommon.advanceToSummarySection();
+      });
+
+      it('creates the job and finishes processing', async () => {
+        await ml.jobWizardCommon.assertCreateJobButtonExists();
+        await ml.jobWizardCommon.createJobAndWaitForCompletion();
+      });
+
+      it('displays the created job in the job list', async () => {
+        await ml.navigation.navigateToMl();
+        await ml.navigation.navigateToJobManagement();
+
+        await ml.jobTable.waitForJobsToLoad();
+        await ml.jobTable.filterWithSearchString(jobId);
+        const rows = await ml.jobTable.parseJobTable();
+        expect(rows.filter(row => row.id === jobId)).to.have.length(1);
+      });
+
+      it('displays details for the created job in the job list', async () => {
+        await ml.jobTable.assertJobRowFields(jobId, getExpectedRow(jobId, jobGroups));
+
+        await ml.jobTable.assertJobRowDetailsCounts(
+          jobId,
+          getExpectedCounts(jobId),
+          getExpectedModelSizeStats(jobId)
+        );
+      });
+    });
+
+    describe('job cloning', function() {
+      it('clicks the clone action and loads the multi metric wizard', async () => {
+        await ml.jobTable.clickCloneJobAction(jobId);
+        await ml.jobTypeSelection.assertMultiMetricJobWizardOpen();
+      });
+
+      it('displays the time range step', async () => {
+        await ml.jobWizardCommon.assertTimeRangeSectionExists();
+      });
+
+      it('displays the event rate chart', async () => {
+        await ml.jobWizardCommon.clickUseFullDataButton(
+          'Feb 7, 2016 @ 00:00:00.000',
+          'Feb 11, 2016 @ 23:59:54.000'
+        );
+        await ml.jobWizardCommon.assertEventRateChartExists();
+        await ml.jobWizardCommon.assertEventRateChartHasData();
+      });
+
+      it('displays the pick fields step', async () => {
+        await ml.jobWizardCommon.advanceToPickFieldsSection();
+      });
+
+      it('pre-fills detectors and shows preview with split cards', async () => {
+        for (const [index, aggAndFieldIdentifier] of aggAndFieldIdentifiers.entries()) {
+          await ml.jobWizardCommon.assertDetectorPreviewExists(
+            aggAndFieldIdentifier,
+            index,
+            'LINE'
+          );
+        }
+
+        await ml.jobWizardMultiMetric.assertDetectorSplitExists(splitField);
+        await ml.jobWizardMultiMetric.assertDetectorSplitFrontCardTitle('AAL');
+        await ml.jobWizardMultiMetric.assertDetectorSplitNumberOfBackCards(9);
+      });
+
+      it('pre-fills the split field', async () => {
+        await ml.jobWizardMultiMetric.assertSplitFieldInputExists();
+        await ml.jobWizardMultiMetric.assertSplitFieldSelection(splitField);
+      });
+
+      it('pre-fills influencers', async () => {
+        await ml.jobWizardCommon.assertInfluencerInputExists();
+        await ml.jobWizardCommon.assertInfluencerSelection([splitField]);
+      });
+
+      it('pre-fills the bucket span', async () => {
+        await ml.jobWizardCommon.assertBucketSpanInputExists();
+        await ml.jobWizardCommon.assertBucketSpanValue(bucketSpan);
+      });
+
+      it('displays the job details step', async () => {
+        await ml.jobWizardCommon.advanceToJobDetailsSection();
+      });
+
+      it('does not pre-fill the job id', async () => {
+        await ml.jobWizardCommon.assertJobIdInputExists();
+        await ml.jobWizardCommon.assertJobIdValue('');
+      });
+
+      it('inputs the clone job id', async () => {
+        await ml.jobWizardCommon.setJobId(jobIdClone);
+      });
+
+      it('pre-fills the job description', async () => {
+        await ml.jobWizardCommon.assertJobDescriptionInputExists();
+        await ml.jobWizardCommon.assertJobDescriptionValue(jobDescription);
+      });
+
+      it('pre-fills job groups', async () => {
+        await ml.jobWizardCommon.assertJobGroupInputExists();
+        await ml.jobWizardCommon.assertJobGroupSelection(jobGroups);
+      });
+
+      it('inputs the clone job group', async () => {
+        await ml.jobWizardCommon.assertJobGroupInputExists();
+        await ml.jobWizardCommon.addJobGroup('clone');
+        await ml.jobWizardCommon.assertJobGroupSelection(jobGroupsClone);
+      });
+
+      it('opens the advanced section', async () => {
+        await ml.jobWizardCommon.ensureAdvancedSectionOpen();
+      });
+
+      it('pre-fills the model plot switch', async () => {
+        await ml.jobWizardCommon.assertModelPlotSwitchExists();
+        await ml.jobWizardCommon.assertModelPlotSwitchCheckedState(false);
+      });
+
+      it('pre-fills the dedicated index switch', async () => {
+        await ml.jobWizardCommon.assertDedicatedIndexSwitchExists();
+        await ml.jobWizardCommon.assertDedicatedIndexSwitchCheckedState(true);
+      });
+
+      it('pre-fills the model memory limit', async () => {
+        await ml.jobWizardCommon.assertModelMemoryLimitInputExists();
+        await ml.jobWizardCommon.assertModelMemoryLimitValue(memoryLimit);
+      });
+
+      it('displays the validation step', async () => {
+        await ml.jobWizardCommon.advanceToValidationSection();
+      });
+
+      it('displays the summary step', async () => {
+        await ml.jobWizardCommon.advanceToSummarySection();
+      });
+
+      it('creates the job and finishes processing', async () => {
+        await ml.jobWizardCommon.assertCreateJobButtonExists();
+        await ml.jobWizardCommon.createJobAndWaitForCompletion();
+      });
+
+      it('displays the created job in the job list', async () => {
+        await ml.navigation.navigateToMl();
+        await ml.navigation.navigateToJobManagement();
+
+        await ml.jobTable.waitForJobsToLoad();
+        await ml.jobTable.filterWithSearchString(jobIdClone);
+        const rows = await ml.jobTable.parseJobTable();
+        expect(rows.filter(row => row.id === jobIdClone)).to.have.length(1);
+      });
+
+      it('displays details for the created job in the job list', async () => {
+        await ml.jobTable.assertJobRowFields(
+          jobIdClone,
+          getExpectedRow(jobIdClone, jobGroupsClone)
+        );
+
+        await ml.jobTable.assertJobRowDetailsCounts(
+          jobIdClone,
+          getExpectedCounts(jobIdClone),
+          getExpectedModelSizeStats(jobIdClone)
+        );
+      });
+    });
+  });
+}
diff --git a/x-pack/test/functional/apps/machine_learning/population_job.ts b/x-pack/test/functional/apps/machine_learning/population_job.ts
new file mode 100644
index 00000000000000..fa24673c210446
--- /dev/null
+++ b/x-pack/test/functional/apps/machine_learning/population_job.ts
@@ -0,0 +1,404 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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 '../../ftr_provider_context';
+
+// eslint-disable-next-line import/no-default-export
+export default function({ getService }: FtrProviderContext) {
+  const esArchiver = getService('esArchiver');
+  const ml = getService('ml');
+
+  const jobId = `ec_population_1_${Date.now()}`;
+  const jobIdClone = `${jobId}_clone`;
+  const jobDescription =
+    'Create population job based on the ecommerce sample dataset with 2h bucketspan over customer_id' +
+    ' - detectors: (Mean(products.base_price) by customer_gender), (Mean(products.quantity) by category.leyword)';
+  const jobGroups = ['automated', 'ecommerce', 'population'];
+  const jobGroupsClone = [...jobGroups, 'clone'];
+  const populationField = 'customer_id';
+  const detectors = [
+    {
+      identifier: 'Mean(products.base_price)',
+      splitField: 'customer_gender',
+      frontCardTitle: 'FEMALE',
+      numberOfBackCards: 1,
+    },
+    {
+      identifier: 'Mean(products.quantity)',
+      splitField: 'category.keyword',
+      frontCardTitle: "Men's Clothing",
+      numberOfBackCards: 5,
+    },
+  ];
+  const bucketSpan = '2h';
+  const memoryLimit = '8mb';
+
+  function getExpectedRow(expectedJobId: string, expectedJobGroups: string[]) {
+    return {
+      id: expectedJobId,
+      description: jobDescription,
+      jobGroups: [...new Set(expectedJobGroups)].sort(),
+      recordCount: '4,675',
+      memoryStatus: 'ok',
+      jobState: 'closed',
+      datafeedState: 'stopped',
+      latestTimestamp: '2019-07-12 23:45:36',
+    };
+  }
+
+  function getExpectedCounts(expectedJobId: string) {
+    return {
+      job_id: expectedJobId,
+      processed_record_count: '4,675',
+      processed_field_count: '23,375',
+      input_bytes: '867.7 KB',
+      input_field_count: '23,375',
+      invalid_date_count: '0',
+      missing_field_count: '0',
+      out_of_order_timestamp_count: '0',
+      empty_bucket_count: '0',
+      sparse_bucket_count: '0',
+      bucket_count: '371',
+      earliest_record_timestamp: '2019-06-12 00:04:19',
+      latest_record_timestamp: '2019-07-12 23:45:36',
+      input_record_count: '4,675',
+      latest_bucket_timestamp: '2019-07-12 22:00:00',
+    };
+  }
+
+  function getExpectedModelSizeStats(expectedJobId: string) {
+    return {
+      job_id: expectedJobId,
+      result_type: 'model_size_stats',
+      model_bytes_exceeded: '0',
+      model_bytes_memory_limit: '8388608',
+      total_by_field_count: '25',
+      total_over_field_count: '92',
+      total_partition_field_count: '3',
+      bucket_allocation_failures_count: '0',
+      memory_status: 'ok',
+      timestamp: '2019-07-12 20:00:00',
+    };
+  }
+
+  describe('population', function() {
+    this.tags(['smoke', 'mlqa']);
+    before(async () => {
+      await esArchiver.loadIfNeeded('ml/ecommerce');
+    });
+
+    after(async () => {
+      await esArchiver.unload('ml/farequote');
+      await ml.api.cleanMlIndices();
+      await ml.api.cleanDataframeIndices();
+    });
+
+    describe('job creation', function() {
+      it('loads the job management page', async () => {
+        await ml.navigation.navigateToMl();
+        await ml.navigation.navigateToJobManagement();
+      });
+
+      it('loads the new job source selection page', async () => {
+        await ml.jobManagement.navigateToNewJobSourceSelection();
+      });
+
+      it('loads the job type selection page', async () => {
+        await ml.jobSourceSelection.selectSourceIndexPattern('ecommerce');
+      });
+
+      it('loads the population job wizard page', async () => {
+        await ml.jobTypeSelection.selectPopulationJob();
+      });
+
+      it('displays the time range step', async () => {
+        await ml.jobWizardCommon.assertTimeRangeSectionExists();
+      });
+
+      it('displays the event rate chart', async () => {
+        await ml.jobWizardCommon.clickUseFullDataButton(
+          'Jun 12, 2019 @ 00:04:19.000',
+          'Jul 12, 2019 @ 23:45:36.000'
+        );
+        await ml.jobWizardCommon.assertEventRateChartExists();
+        await ml.jobWizardCommon.assertEventRateChartHasData();
+      });
+
+      it('displays the pick fields step', async () => {
+        await ml.jobWizardCommon.advanceToPickFieldsSection();
+      });
+
+      it('selects the population field', async () => {
+        await ml.jobWizardPopulation.assertPopulationFieldInputExists();
+        await ml.jobWizardPopulation.selectPopulationField(populationField);
+      });
+
+      it('selects detectors and displays detector previews', async () => {
+        for (const [index, detector] of detectors.entries()) {
+          await ml.jobWizardCommon.assertAggAndFieldInputExists();
+          await ml.jobWizardCommon.selectAggAndField(detector.identifier, false);
+          await ml.jobWizardCommon.assertDetectorPreviewExists(
+            detector.identifier,
+            index,
+            'SCATTER'
+          );
+        }
+      });
+
+      it('inputs detector split fields and displays split cards', async () => {
+        for (const [index, detector] of detectors.entries()) {
+          await ml.jobWizardPopulation.assertDetectorSplitFieldInputExists(index);
+          await ml.jobWizardPopulation.selectDetectorSplitField(index, detector.splitField);
+
+          await ml.jobWizardPopulation.assertDetectorSplitExists(index);
+          await ml.jobWizardPopulation.assertDetectorSplitFrontCardTitle(
+            index,
+            detector.frontCardTitle
+          );
+          await ml.jobWizardPopulation.assertDetectorSplitNumberOfBackCards(
+            index,
+            detector.numberOfBackCards
+          );
+        }
+      });
+
+      it('displays the influencer field', async () => {
+        await ml.jobWizardCommon.assertInfluencerInputExists();
+        await ml.jobWizardCommon.assertInfluencerSelection(
+          [populationField].concat(detectors.map(detector => detector.splitField))
+        );
+      });
+
+      it('inputs the bucket span', async () => {
+        await ml.jobWizardCommon.assertBucketSpanInputExists();
+        await ml.jobWizardCommon.setBucketSpan(bucketSpan);
+      });
+
+      it('displays the job details step', async () => {
+        await ml.jobWizardCommon.advanceToJobDetailsSection();
+      });
+
+      it('inputs the job id', async () => {
+        await ml.jobWizardCommon.assertJobIdInputExists();
+        await ml.jobWizardCommon.setJobId(jobId);
+      });
+
+      it('inputs the job description', async () => {
+        await ml.jobWizardCommon.assertJobDescriptionInputExists();
+        await ml.jobWizardCommon.setJobDescription(jobDescription);
+      });
+
+      it('inputs job groups', async () => {
+        await ml.jobWizardCommon.assertJobGroupInputExists();
+        for (const jobGroup of jobGroups) {
+          await ml.jobWizardCommon.addJobGroup(jobGroup);
+        }
+        await ml.jobWizardCommon.assertJobGroupSelection(jobGroups);
+      });
+
+      it('opens the advanced section', async () => {
+        await ml.jobWizardCommon.ensureAdvancedSectionOpen();
+      });
+
+      it('displays the model plot switch', async () => {
+        await ml.jobWizardCommon.assertModelPlotSwitchExists();
+      });
+
+      it('enables the dedicated index switch', async () => {
+        await ml.jobWizardCommon.assertDedicatedIndexSwitchExists();
+        await ml.jobWizardCommon.activateDedicatedIndexSwitch();
+      });
+
+      it('inputs the model memory limit', async () => {
+        await ml.jobWizardCommon.assertModelMemoryLimitInputExists();
+        await ml.jobWizardCommon.setModelMemoryLimit(memoryLimit);
+      });
+
+      it('displays the validation step', async () => {
+        await ml.jobWizardCommon.advanceToValidationSection();
+      });
+
+      it('displays the summary step', async () => {
+        await ml.jobWizardCommon.advanceToSummarySection();
+      });
+
+      it('creates the job and finishes processing', async () => {
+        await ml.jobWizardCommon.assertCreateJobButtonExists();
+        await ml.jobWizardCommon.createJobAndWaitForCompletion();
+      });
+
+      it('displays the created job in the job list', async () => {
+        await ml.navigation.navigateToMl();
+        await ml.navigation.navigateToJobManagement();
+
+        await ml.jobTable.waitForJobsToLoad();
+        await ml.jobTable.filterWithSearchString(jobId);
+        const rows = await ml.jobTable.parseJobTable();
+        expect(rows.filter(row => row.id === jobId)).to.have.length(1);
+      });
+
+      it('displays details for the created job in the job list', async () => {
+        await ml.jobTable.assertJobRowFields(jobId, getExpectedRow(jobId, jobGroups));
+
+        await ml.jobTable.assertJobRowDetailsCounts(
+          jobId,
+          getExpectedCounts(jobId),
+          getExpectedModelSizeStats(jobId)
+        );
+      });
+    });
+
+    describe('job cloning', function() {
+      it('clicks the clone action and loads the population wizard', async () => {
+        await ml.jobTable.clickCloneJobAction(jobId);
+        await ml.jobTypeSelection.assertPopulationJobWizardOpen();
+      });
+
+      it('displays the time range step', async () => {
+        await ml.jobWizardCommon.assertTimeRangeSectionExists();
+      });
+
+      it('displays the event rate chart', async () => {
+        await ml.jobWizardCommon.clickUseFullDataButton(
+          'Jun 12, 2019 @ 00:04:19.000',
+          'Jul 12, 2019 @ 23:45:36.000'
+        );
+        await ml.jobWizardCommon.assertEventRateChartExists();
+        await ml.jobWizardCommon.assertEventRateChartHasData();
+      });
+
+      it('displays the pick fields step', async () => {
+        await ml.jobWizardCommon.advanceToPickFieldsSection();
+      });
+
+      it('pre-fills the population field', async () => {
+        await ml.jobWizardPopulation.assertPopulationFieldInputExists();
+        await ml.jobWizardPopulation.assertPopulationFieldSelection(populationField);
+      });
+
+      it('pre-fills detectors and shows preview with split cards', async () => {
+        for (const [index, detector] of detectors.entries()) {
+          await ml.jobWizardCommon.assertDetectorPreviewExists(
+            detector.identifier,
+            index,
+            'SCATTER'
+          );
+
+          await ml.jobWizardPopulation.assertDetectorSplitFieldSelection(
+            index,
+            detector.splitField
+          );
+          await ml.jobWizardPopulation.assertDetectorSplitExists(index);
+          await ml.jobWizardPopulation.assertDetectorSplitFrontCardTitle(
+            index,
+            detector.frontCardTitle
+          );
+          await ml.jobWizardPopulation.assertDetectorSplitNumberOfBackCards(
+            index,
+            detector.numberOfBackCards
+          );
+        }
+      });
+
+      it('pre-fills influencers', async () => {
+        await ml.jobWizardCommon.assertInfluencerInputExists();
+        await ml.jobWizardCommon.assertInfluencerSelection(
+          [populationField].concat(detectors.map(detector => detector.splitField))
+        );
+      });
+
+      it('pre-fills the bucket span', async () => {
+        await ml.jobWizardCommon.assertBucketSpanInputExists();
+        await ml.jobWizardCommon.assertBucketSpanValue(bucketSpan);
+      });
+
+      it('displays the job details step', async () => {
+        await ml.jobWizardCommon.advanceToJobDetailsSection();
+      });
+
+      it('does not pre-fill the job id', async () => {
+        await ml.jobWizardCommon.assertJobIdInputExists();
+        await ml.jobWizardCommon.assertJobIdValue('');
+      });
+
+      it('inputs the clone job id', async () => {
+        await ml.jobWizardCommon.setJobId(jobIdClone);
+      });
+
+      it('pre-fills the job description', async () => {
+        await ml.jobWizardCommon.assertJobDescriptionInputExists();
+        await ml.jobWizardCommon.assertJobDescriptionValue(jobDescription);
+      });
+
+      it('pre-fills job groups', async () => {
+        await ml.jobWizardCommon.assertJobGroupInputExists();
+        await ml.jobWizardCommon.assertJobGroupSelection(jobGroups);
+      });
+
+      it('inputs the clone job group', async () => {
+        await ml.jobWizardCommon.assertJobGroupInputExists();
+        await ml.jobWizardCommon.addJobGroup('clone');
+        await ml.jobWizardCommon.assertJobGroupSelection(jobGroupsClone);
+      });
+
+      it('opens the advanced section', async () => {
+        await ml.jobWizardCommon.ensureAdvancedSectionOpen();
+      });
+
+      it('pre-fills the model plot switch', async () => {
+        await ml.jobWizardCommon.assertModelPlotSwitchExists();
+        await ml.jobWizardCommon.assertModelPlotSwitchCheckedState(false);
+      });
+
+      it('pre-fills the dedicated index switch', async () => {
+        await ml.jobWizardCommon.assertDedicatedIndexSwitchExists();
+        await ml.jobWizardCommon.assertDedicatedIndexSwitchCheckedState(true);
+      });
+
+      it('pre-fills the model memory limit', async () => {
+        await ml.jobWizardCommon.assertModelMemoryLimitInputExists();
+        await ml.jobWizardCommon.assertModelMemoryLimitValue(memoryLimit);
+      });
+
+      it('displays the validation step', async () => {
+        await ml.jobWizardCommon.advanceToValidationSection();
+      });
+
+      it('displays the summary step', async () => {
+        await ml.jobWizardCommon.advanceToSummarySection();
+      });
+
+      it('creates the job and finishes processing', async () => {
+        await ml.jobWizardCommon.assertCreateJobButtonExists();
+        await ml.jobWizardCommon.createJobAndWaitForCompletion();
+      });
+
+      it('displays the created job in the job list', async () => {
+        await ml.navigation.navigateToMl();
+        await ml.navigation.navigateToJobManagement();
+
+        await ml.jobTable.waitForJobsToLoad();
+        await ml.jobTable.filterWithSearchString(jobIdClone);
+        const rows = await ml.jobTable.parseJobTable();
+        expect(rows.filter(row => row.id === jobIdClone)).to.have.length(1);
+      });
+
+      it('displays details for the created job in the job list', async () => {
+        await ml.jobTable.assertJobRowFields(
+          jobIdClone,
+          getExpectedRow(jobIdClone, jobGroupsClone)
+        );
+
+        await ml.jobTable.assertJobRowDetailsCounts(
+          jobIdClone,
+          getExpectedCounts(jobIdClone),
+          getExpectedModelSizeStats(jobIdClone)
+        );
+      });
+    });
+  });
+}
diff --git a/x-pack/test/functional/apps/machine_learning/single_metric_job.ts b/x-pack/test/functional/apps/machine_learning/single_metric_job.ts
new file mode 100644
index 00000000000000..4b112e63758d6f
--- /dev/null
+++ b/x-pack/test/functional/apps/machine_learning/single_metric_job.ts
@@ -0,0 +1,324 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under 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 '../../ftr_provider_context';
+
+// eslint-disable-next-line import/no-default-export
+export default function({ getService }: FtrProviderContext) {
+  const esArchiver = getService('esArchiver');
+  const ml = getService('ml');
+
+  const jobId = `fq_single_1_${Date.now()}`;
+  const jobIdClone = `${jobId}_clone`;
+  const jobDescription =
+    'Create single metric job based on the farequote dataset with 30m bucketspan and mean(responsetime)';
+  const jobGroups = ['automated', 'farequote', 'single-metric'];
+  const jobGroupsClone = [...jobGroups, 'clone'];
+  const aggAndFieldIdentifier = 'Mean(responsetime)';
+  const bucketSpan = '30m';
+  const memoryLimit = '15mb';
+
+  function getExpectedRow(expectedJobId: string, expectedJobGroups: string[]) {
+    return {
+      id: expectedJobId,
+      description: jobDescription,
+      jobGroups: [...new Set(expectedJobGroups)].sort(),
+      recordCount: '2,399',
+      memoryStatus: 'ok',
+      jobState: 'closed',
+      datafeedState: 'stopped',
+      latestTimestamp: '2016-02-11 23:56:59',
+    };
+  }
+
+  function getExpectedCounts(expectedJobId: string) {
+    return {
+      job_id: expectedJobId,
+      processed_record_count: '2,399',
+      processed_field_count: '4,798',
+      input_bytes: '180.6 KB',
+      input_field_count: '4,798',
+      invalid_date_count: '0',
+      missing_field_count: '0',
+      out_of_order_timestamp_count: '0',
+      empty_bucket_count: '0',
+      sparse_bucket_count: '0',
+      bucket_count: '239',
+      earliest_record_timestamp: '2016-02-07 00:02:50',
+      latest_record_timestamp: '2016-02-11 23:56:59',
+      input_record_count: '2,399',
+      latest_bucket_timestamp: '2016-02-11 23:30:00',
+    };
+  }
+
+  function getExpectedModelSizeStats(expectedJobId: string) {
+    return {
+      job_id: expectedJobId,
+      result_type: 'model_size_stats',
+      model_bytes_exceeded: '0',
+      model_bytes_memory_limit: '15728640',
+      total_by_field_count: '3',
+      total_over_field_count: '0',
+      total_partition_field_count: '2',
+      bucket_allocation_failures_count: '0',
+      memory_status: 'ok',
+      timestamp: '2016-02-11 23:00:00',
+    };
+  }
+
+  describe('single metric', function() {
+    this.tags(['smoke', 'mlqa']);
+    before(async () => {
+      await esArchiver.loadIfNeeded('ml/farequote');
+    });
+
+    after(async () => {
+      await esArchiver.unload('ml/farequote');
+      await ml.api.cleanMlIndices();
+      await ml.api.cleanDataframeIndices();
+    });
+
+    describe('job creation', function() {
+      it('loads the job management page', async () => {
+        await ml.navigation.navigateToMl();
+        await ml.navigation.navigateToJobManagement();
+      });
+
+      it('loads the new job source selection page', async () => {
+        await ml.jobManagement.navigateToNewJobSourceSelection();
+      });
+
+      it('loads the job type selection page', async () => {
+        await ml.jobSourceSelection.selectSourceIndexPattern('farequote');
+      });
+
+      it('loads the single metric job wizard page', async () => {
+        await ml.jobTypeSelection.selectSingleMetricJob();
+      });
+
+      it('displays the time range step', async () => {
+        await ml.jobWizardCommon.assertTimeRangeSectionExists();
+      });
+
+      it('displays the event rate chart', async () => {
+        await ml.jobWizardCommon.clickUseFullDataButton(
+          'Feb 7, 2016 @ 00:00:00.000',
+          'Feb 11, 2016 @ 23:59:54.000'
+        );
+        await ml.jobWizardCommon.assertEventRateChartExists();
+        await ml.jobWizardCommon.assertEventRateChartHasData();
+      });
+
+      it('displays the pick fields step', async () => {
+        await ml.jobWizardCommon.advanceToPickFieldsSection();
+      });
+
+      it('selects field and aggregation', async () => {
+        await ml.jobWizardCommon.assertAggAndFieldInputExists();
+        await ml.jobWizardCommon.selectAggAndField(aggAndFieldIdentifier, true);
+        await ml.jobWizardCommon.assertAnomalyChartExists('LINE');
+      });
+
+      it('inputs the bucket span', async () => {
+        await ml.jobWizardCommon.assertBucketSpanInputExists();
+        await ml.jobWizardCommon.setBucketSpan(bucketSpan);
+      });
+
+      it('displays the job details step', async () => {
+        await ml.jobWizardCommon.advanceToJobDetailsSection();
+      });
+
+      it('inputs the job id', async () => {
+        await ml.jobWizardCommon.assertJobIdInputExists();
+        await ml.jobWizardCommon.setJobId(jobId);
+      });
+
+      it('inputs the job description', async () => {
+        await ml.jobWizardCommon.assertJobDescriptionInputExists();
+        await ml.jobWizardCommon.setJobDescription(jobDescription);
+      });
+
+      it('inputs job groups', async () => {
+        await ml.jobWizardCommon.assertJobGroupInputExists();
+        for (const jobGroup of jobGroups) {
+          await ml.jobWizardCommon.addJobGroup(jobGroup);
+        }
+        await ml.jobWizardCommon.assertJobGroupSelection(jobGroups);
+      });
+
+      it('opens the advanced section', async () => {
+        await ml.jobWizardCommon.ensureAdvancedSectionOpen();
+      });
+
+      it('displays the model plot switch', async () => {
+        await ml.jobWizardCommon.assertModelPlotSwitchExists();
+      });
+
+      it('enables the dedicated index switch', async () => {
+        await ml.jobWizardCommon.assertDedicatedIndexSwitchExists();
+        await ml.jobWizardCommon.activateDedicatedIndexSwitch();
+      });
+
+      it('inputs the model memory limit', async () => {
+        await ml.jobWizardCommon.assertModelMemoryLimitInputExists();
+        await ml.jobWizardCommon.setModelMemoryLimit(memoryLimit);
+      });
+
+      it('displays the validation step', async () => {
+        await ml.jobWizardCommon.advanceToValidationSection();
+      });
+
+      it('displays the summary step', async () => {
+        await ml.jobWizardCommon.advanceToSummarySection();
+      });
+
+      it('creates the job and finishes processing', async () => {
+        await ml.jobWizardCommon.assertCreateJobButtonExists();
+        await ml.jobWizardCommon.createJobAndWaitForCompletion();
+      });
+
+      it('displays the created job in the job list', async () => {
+        await ml.navigation.navigateToMl();
+        await ml.navigation.navigateToJobManagement();
+
+        await ml.jobTable.waitForJobsToLoad();
+        await ml.jobTable.filterWithSearchString(jobId);
+        const rows = await ml.jobTable.parseJobTable();
+        expect(rows.filter(row => row.id === jobId)).to.have.length(1);
+      });
+
+      it('displays details for the created job in the job list', async () => {
+        await ml.jobTable.assertJobRowFields(jobId, getExpectedRow(jobId, jobGroups));
+
+        await ml.jobTable.assertJobRowDetailsCounts(
+          jobId,
+          getExpectedCounts(jobId),
+          getExpectedModelSizeStats(jobId)
+        );
+      });
+    });
+
+    describe('job cloning', function() {
+      it('clicks the clone action and loads the single metric wizard', async () => {
+        await ml.jobTable.clickCloneJobAction(jobId);
+        await ml.jobTypeSelection.assertSingleMetricJobWizardOpen();
+      });
+
+      it('displays the time range step', async () => {
+        await ml.jobWizardCommon.assertTimeRangeSectionExists();
+      });
+
+      it('displays the event rate chart', async () => {
+        await ml.jobWizardCommon.clickUseFullDataButton(
+          'Feb 7, 2016 @ 00:00:00.000',
+          'Feb 11, 2016 @ 23:59:54.000'
+        );
+        await ml.jobWizardCommon.assertEventRateChartExists();
+        await ml.jobWizardCommon.assertEventRateChartHasData();
+      });
+
+      it('displays the pick fields step', async () => {
+        await ml.jobWizardCommon.advanceToPickFieldsSection();
+      });
+
+      it('pre-fills field and aggregation', async () => {
+        await ml.jobWizardCommon.assertAggAndFieldInputExists();
+        await ml.jobWizardCommon.assertAggAndFieldSelection(aggAndFieldIdentifier);
+        await ml.jobWizardCommon.assertAnomalyChartExists('LINE');
+      });
+
+      it('pre-fills the bucket span', async () => {
+        await ml.jobWizardCommon.assertBucketSpanInputExists();
+        await ml.jobWizardCommon.assertBucketSpanValue(bucketSpan);
+      });
+
+      it('displays the job details step', async () => {
+        await ml.jobWizardCommon.advanceToJobDetailsSection();
+      });
+
+      it('does not pre-fill the job id', async () => {
+        await ml.jobWizardCommon.assertJobIdInputExists();
+        await ml.jobWizardCommon.assertJobIdValue('');
+      });
+
+      it('inputs the clone job id', async () => {
+        await ml.jobWizardCommon.setJobId(jobIdClone);
+      });
+
+      it('pre-fills the job description', async () => {
+        await ml.jobWizardCommon.assertJobDescriptionInputExists();
+        await ml.jobWizardCommon.assertJobDescriptionValue(jobDescription);
+      });
+
+      it('pre-fills job groups', async () => {
+        await ml.jobWizardCommon.assertJobGroupInputExists();
+        await ml.jobWizardCommon.assertJobGroupSelection(jobGroups);
+      });
+
+      it('inputs the clone job group', async () => {
+        await ml.jobWizardCommon.assertJobGroupInputExists();
+        await ml.jobWizardCommon.addJobGroup('clone');
+        await ml.jobWizardCommon.assertJobGroupSelection(jobGroupsClone);
+      });
+
+      it('opens the advanced section', async () => {
+        await ml.jobWizardCommon.ensureAdvancedSectionOpen();
+      });
+
+      it('pre-fills the model plot switch', async () => {
+        await ml.jobWizardCommon.assertModelPlotSwitchExists();
+        await ml.jobWizardCommon.assertModelPlotSwitchCheckedState(true);
+      });
+
+      it('pre-fills the dedicated index switch', async () => {
+        await ml.jobWizardCommon.assertDedicatedIndexSwitchExists();
+        await ml.jobWizardCommon.assertDedicatedIndexSwitchCheckedState(true);
+      });
+
+      it('pre-fills the model memory limit', async () => {
+        await ml.jobWizardCommon.assertModelMemoryLimitInputExists();
+        await ml.jobWizardCommon.assertModelMemoryLimitValue(memoryLimit);
+      });
+
+      it('displays the validation step', async () => {
+        await ml.jobWizardCommon.advanceToValidationSection();
+      });
+
+      it('displays the summary step', async () => {
+        await ml.jobWizardCommon.advanceToSummarySection();
+      });
+
+      it('creates the job and finishes processing', async () => {
+        await ml.jobWizardCommon.assertCreateJobButtonExists();
+        await ml.jobWizardCommon.createJobAndWaitForCompletion();
+      });
+
+      it('displays the created job in the job list', async () => {
+        await ml.navigation.navigateToMl();
+        await ml.navigation.navigateToJobManagement();
+
+        await ml.jobTable.waitForJobsToLoad();
+        await ml.jobTable.filterWithSearchString(jobIdClone);
+        const rows = await ml.jobTable.parseJobTable();
+        expect(rows.filter(row => row.id === jobIdClone)).to.have.length(1);
+      });
+
+      it('displays details for the created job in the job list', async () => {
+        await ml.jobTable.assertJobRowFields(
+          jobIdClone,
+          getExpectedRow(jobIdClone, jobGroupsClone)
+        );
+
+        await ml.jobTable.assertJobRowDetailsCounts(
+          jobIdClone,
+          getExpectedCounts(jobIdClone),
+          getExpectedModelSizeStats(jobIdClone)
+        );
+      });
+    });
+  });
+}
diff --git a/x-pack/test/functional/apps/monitoring/elasticsearch/index_detail.js b/x-pack/test/functional/apps/monitoring/elasticsearch/index_detail.js
index 7fbb8990d1f27d..c3fe5f9273a897 100644
--- a/x-pack/test/functional/apps/monitoring/elasticsearch/index_detail.js
+++ b/x-pack/test/functional/apps/monitoring/elasticsearch/index_detail.js
@@ -45,8 +45,8 @@ export default function ({ getService, getPageObjects }) {
           dataSize: 'Total\n8.8 MB',
           dataSizePrimaries: 'Primaries\n4.4 MB',
           documentCount: 'Documents\n628',
-          totalShards: 'Total Shards\n10',
-          unassignedShards: 'Unassigned Shards\n0',
+          totalShards: 'Total shards\n10',
+          unassignedShards: 'Unassigned shards\n0',
           health: 'Health: green',
         });
       });
@@ -58,8 +58,8 @@ export default function ({ getService, getPageObjects }) {
           dataSize: 'Total\n4.8 KB',
           dataSizePrimaries: 'Primaries\n4.8 KB',
           documentCount: 'Documents\n1',
-          totalShards: 'Total Shards\n1',
-          unassignedShards: 'Unassigned Shards\n0',
+          totalShards: 'Total shards\n1',
+          unassignedShards: 'Unassigned shards\n0',
           health: 'Health: green',
         });
       });
@@ -71,8 +71,8 @@ export default function ({ getService, getPageObjects }) {
           dataSize: 'Total\n1.2 MB',
           dataSizePrimaries: 'Primaries\n657.6 KB',
           documentCount: 'Documents\n10',
-          totalShards: 'Total Shards\n10',
-          unassignedShards: 'Unassigned Shards\n1',
+          totalShards: 'Total shards\n10',
+          unassignedShards: 'Unassigned shards\n1',
           health: 'Health: yellow',
         });
       });
diff --git a/x-pack/test/functional/apps/monitoring/elasticsearch/indices.js b/x-pack/test/functional/apps/monitoring/elasticsearch/indices.js
index fc3669079dbce2..ff809b95a834e1 100644
--- a/x-pack/test/functional/apps/monitoring/elasticsearch/indices.js
+++ b/x-pack/test/functional/apps/monitoring/elasticsearch/indices.js
@@ -35,8 +35,8 @@ export default function ({ getService, getPageObjects }) {
         nodesCount: 'Nodes\n1',
         indicesCount: 'Indices\n19',
         memory: 'Memory\n267.7 MB / 676.8 MB',
-        totalShards: 'Total Shards\n46',
-        unassignedShards: 'Unassigned Shards\n23',
+        totalShards: 'Total shards\n46',
+        unassignedShards: 'Unassigned shards\n23',
         documentCount: 'Documents\n4,535',
         dataSize: 'Data\n8.6 MB',
         health: 'Health: red',
diff --git a/x-pack/test/functional/apps/monitoring/elasticsearch/nodes.js b/x-pack/test/functional/apps/monitoring/elasticsearch/nodes.js
index 81f683dc9a4cee..86f47775e50cdd 100644
--- a/x-pack/test/functional/apps/monitoring/elasticsearch/nodes.js
+++ b/x-pack/test/functional/apps/monitoring/elasticsearch/nodes.js
@@ -39,8 +39,8 @@ export default function ({ getService, getPageObjects }) {
           nodesCount: 'Nodes\n2',
           indicesCount: 'Indices\n20',
           memory: 'Memory\n696.6 MB / 1.3 GB',
-          totalShards: 'Total Shards\n79',
-          unassignedShards: 'Unassigned Shards\n7',
+          totalShards: 'Total shards\n79',
+          unassignedShards: 'Unassigned shards\n7',
           documentCount: 'Documents\n25,758',
           dataSize: 'Data\n100.0 MB',
           health: 'Health: yellow',
@@ -214,8 +214,8 @@ export default function ({ getService, getPageObjects }) {
           nodesCount: 'Nodes\n3',
           indicesCount: 'Indices\n20',
           memory: 'Memory\n575.3 MB / 2.0 GB',
-          totalShards: 'Total Shards\n80',
-          unassignedShards: 'Unassigned Shards\n5',
+          totalShards: 'Total shards\n80',
+          unassignedShards: 'Unassigned shards\n5',
           documentCount: 'Documents\n25,927',
           dataSize: 'Data\n101.6 MB',
           health: 'Health: yellow',
diff --git a/x-pack/test/functional/apps/monitoring/elasticsearch/overview.js b/x-pack/test/functional/apps/monitoring/elasticsearch/overview.js
index 3f90c6a096e901..d86127b3e6fb8d 100644
--- a/x-pack/test/functional/apps/monitoring/elasticsearch/overview.js
+++ b/x-pack/test/functional/apps/monitoring/elasticsearch/overview.js
@@ -35,8 +35,8 @@ export default function ({ getService, getPageObjects }) {
         nodesCount: 'Nodes\n3',
         indicesCount: 'Indices\n20',
         memory: 'Memory\n575.3 MB / 2.0 GB',
-        totalShards: 'Total Shards\n80',
-        unassignedShards: 'Unassigned Shards\n5',
+        totalShards: 'Total shards\n80',
+        unassignedShards: 'Unassigned shards\n5',
         documentCount: 'Documents\n25,927',
         dataSize: 'Data\n101.6 MB',
         health: 'Health: yellow',
diff --git a/x-pack/test/functional/apps/monitoring/logstash/pipelines.js b/x-pack/test/functional/apps/monitoring/logstash/pipelines.js
index 4d2a7dbc688879..fb9fcf8bab8bb4 100644
--- a/x-pack/test/functional/apps/monitoring/logstash/pipelines.js
+++ b/x-pack/test/functional/apps/monitoring/logstash/pipelines.js
@@ -8,6 +8,8 @@ import expect from '@kbn/expect';
 import { getLifecycleMethods } from '../_get_lifecycle_methods';
 
 export default function ({ getService, getPageObjects }) {
+  const PageObjects = getPageObjects(['common']);
+  const retry = getService('retry');
   const overview = getService('monitoringClusterOverview');
   const pipelinesList = getService('monitoringLogstashPipelines');
   const lsClusterSummaryStatus = getService('monitoringLogstashSummaryStatus');
@@ -43,6 +45,8 @@ export default function ({ getService, getPageObjects }) {
       const rows = await pipelinesList.getRows();
       expect(rows.length).to.be(4);
 
+      await pipelinesList.clickIdCol();
+
       const pipelinesAll = await pipelinesList.getPipelinesAll();
 
       const tableData = [
@@ -85,8 +89,11 @@ export default function ({ getService, getPageObjects }) {
 
     it('should filter for specific pipelines', async () => {
       await pipelinesList.setFilter('la');
-      const rows = await pipelinesList.getRows();
-      expect(rows.length).to.be(2);
+      await PageObjects.common.pressEnterKey();
+      await retry.try(async () => {
+        const rows = await pipelinesList.getRows();
+        expect(rows.length).to.be(2);
+      });
       await pipelinesList.clearFilter();
     });
 
diff --git a/x-pack/test/functional/apps/spaces/enter_space.ts b/x-pack/test/functional/apps/spaces/enter_space.ts
new file mode 100644
index 00000000000000..017d252b166cc4
--- /dev/null
+++ b/x-pack/test/functional/apps/spaces/enter_space.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 { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function enterSpaceFunctonalTests({
+  getService,
+  getPageObjects,
+}: FtrProviderContext) {
+  const esArchiver = getService('esArchiver');
+  const kibanaServer = getService('kibanaServer');
+  const PageObjects = getPageObjects(['security', 'spaceSelector']);
+
+  describe('Enter Space', function() {
+    this.tags('smoke');
+    before(async () => await esArchiver.load('spaces/enter_space'));
+    after(async () => await esArchiver.unload('spaces/enter_space'));
+
+    afterEach(async () => {
+      await PageObjects.security.logout();
+    });
+
+    it('allows user to navigate to different spaces, respecting the configured default route', async () => {
+      const spaceId = 'another-space';
+
+      await PageObjects.security.login(null, null, {
+        expectSpaceSelector: true,
+      });
+
+      await PageObjects.spaceSelector.clickSpaceCard(spaceId);
+
+      await PageObjects.spaceSelector.expectRoute(spaceId, '/app/kibana/#/dashboard');
+
+      await PageObjects.spaceSelector.openSpacesNav();
+
+      // change spaces
+
+      await PageObjects.spaceSelector.clickSpaceAvatar('default');
+
+      await PageObjects.spaceSelector.expectRoute('default', '/app/canvas');
+    });
+
+    it('falls back to the default home page when the configured default route is malformed', async () => {
+      await kibanaServer.uiSettings.replace({ defaultRoute: 'http://example.com/evil' });
+
+      // This test only works with the default space, as other spaces have an enforced relative url of `${serverBasePath}/s/space-id/${defaultRoute}`
+      const spaceId = 'default';
+
+      await PageObjects.security.login(null, null, {
+        expectSpaceSelector: true,
+      });
+
+      await PageObjects.spaceSelector.clickSpaceCard(spaceId);
+
+      await PageObjects.spaceSelector.expectHomePage(spaceId);
+    });
+  });
+}
diff --git a/x-pack/test/functional/apps/spaces/index.ts b/x-pack/test/functional/apps/spaces/index.ts
index 7cc704a41becc2..7a876952fad83a 100644
--- a/x-pack/test/functional/apps/spaces/index.ts
+++ b/x-pack/test/functional/apps/spaces/index.ts
@@ -12,5 +12,6 @@ export default function spacesApp({ loadTestFile }: FtrProviderContext) {
     loadTestFile(require.resolve('./copy_saved_objects'));
     loadTestFile(require.resolve('./feature_controls/spaces_security'));
     loadTestFile(require.resolve('./spaces_selection'));
+    loadTestFile(require.resolve('./enter_space'));
   });
 }
diff --git a/x-pack/test/functional/es_archives/infra/8.0.0/ml_anomalies_partitioned_log_rate/data.json.gz b/x-pack/test/functional/es_archives/infra/8.0.0/ml_anomalies_partitioned_log_rate/data.json.gz
new file mode 100644
index 00000000000000..8d15ff8ccb0226
Binary files /dev/null and b/x-pack/test/functional/es_archives/infra/8.0.0/ml_anomalies_partitioned_log_rate/data.json.gz differ
diff --git a/x-pack/test/functional/es_archives/infra/8.0.0/ml_anomalies_partitioned_log_rate/mappings.json b/x-pack/test/functional/es_archives/infra/8.0.0/ml_anomalies_partitioned_log_rate/mappings.json
new file mode 100644
index 00000000000000..69ffc922ede7d3
--- /dev/null
+++ b/x-pack/test/functional/es_archives/infra/8.0.0/ml_anomalies_partitioned_log_rate/mappings.json
@@ -0,0 +1,513 @@
+{
+  "type": "index",
+  "value": {
+    "aliases": {
+      ".ml-anomalies-.write-kibana-logs-ui-default-default-log-entry-rate": {
+      },
+      ".ml-anomalies-kibana-logs-ui-default-default-log-entry-rate": {
+        "filter": {
+          "term": {
+            "job_id": {
+              "boost": 1,
+              "value": "kibana-logs-ui-default-default-log-entry-rate"
+            }
+          }
+        }
+      }
+    },
+    "index": ".ml-anomalies-shared",
+    "mappings": {
+      "_meta": {
+        "version": "8.0.0"
+      },
+      "dynamic_templates": [
+        {
+          "strings_as_keywords": {
+            "mapping": {
+              "type": "keyword"
+            },
+            "match": "*"
+          }
+        }
+      ],
+      "properties": {
+        "actual": {
+          "type": "double"
+        },
+        "all_field_values": {
+          "analyzer": "whitespace",
+          "type": "text"
+        },
+        "anomaly_score": {
+          "type": "double"
+        },
+        "average_bucket_processing_time_ms": {
+          "type": "double"
+        },
+        "bucket_allocation_failures_count": {
+          "type": "long"
+        },
+        "bucket_count": {
+          "type": "long"
+        },
+        "bucket_influencers": {
+          "properties": {
+            "anomaly_score": {
+              "type": "double"
+            },
+            "bucket_span": {
+              "type": "long"
+            },
+            "influencer_field_name": {
+              "type": "keyword"
+            },
+            "initial_anomaly_score": {
+              "type": "double"
+            },
+            "is_interim": {
+              "type": "boolean"
+            },
+            "job_id": {
+              "type": "keyword"
+            },
+            "probability": {
+              "type": "double"
+            },
+            "raw_anomaly_score": {
+              "type": "double"
+            },
+            "result_type": {
+              "type": "keyword"
+            },
+            "timestamp": {
+              "type": "date"
+            }
+          },
+          "type": "nested"
+        },
+        "bucket_span": {
+          "type": "long"
+        },
+        "by_field_name": {
+          "type": "keyword"
+        },
+        "by_field_value": {
+          "copy_to": [
+            "all_field_values"
+          ],
+          "type": "keyword"
+        },
+        "category_id": {
+          "type": "long"
+        },
+        "causes": {
+          "properties": {
+            "actual": {
+              "type": "double"
+            },
+            "by_field_name": {
+              "type": "keyword"
+            },
+            "by_field_value": {
+              "copy_to": [
+                "all_field_values"
+              ],
+              "type": "keyword"
+            },
+            "correlated_by_field_value": {
+              "copy_to": [
+                "all_field_values"
+              ],
+              "type": "keyword"
+            },
+            "field_name": {
+              "type": "keyword"
+            },
+            "function": {
+              "type": "keyword"
+            },
+            "function_description": {
+              "type": "keyword"
+            },
+            "over_field_name": {
+              "type": "keyword"
+            },
+            "over_field_value": {
+              "copy_to": [
+                "all_field_values"
+              ],
+              "type": "keyword"
+            },
+            "partition_field_name": {
+              "type": "keyword"
+            },
+            "partition_field_value": {
+              "copy_to": [
+                "all_field_values"
+              ],
+              "type": "keyword"
+            },
+            "probability": {
+              "type": "double"
+            },
+            "typical": {
+              "type": "double"
+            }
+          },
+          "type": "nested"
+        },
+        "description": {
+          "type": "text"
+        },
+        "detector_index": {
+          "type": "integer"
+        },
+        "earliest_record_timestamp": {
+          "type": "date"
+        },
+        "empty_bucket_count": {
+          "type": "long"
+        },
+        "event": {
+          "properties": {
+            "dataset": {
+              "type": "keyword"
+            }
+          }
+        },
+        "event_count": {
+          "type": "long"
+        },
+        "examples": {
+          "type": "text"
+        },
+        "exponential_average_bucket_processing_time_ms": {
+          "type": "double"
+        },
+        "exponential_average_calculation_context": {
+          "properties": {
+            "incremental_metric_value_ms": {
+              "type": "double"
+            },
+            "latest_timestamp": {
+              "type": "date"
+            },
+            "previous_exponential_average_ms": {
+              "type": "double"
+            }
+          }
+        },
+        "field_name": {
+          "type": "keyword"
+        },
+        "forecast_create_timestamp": {
+          "type": "date"
+        },
+        "forecast_end_timestamp": {
+          "type": "date"
+        },
+        "forecast_expiry_timestamp": {
+          "type": "date"
+        },
+        "forecast_id": {
+          "type": "keyword"
+        },
+        "forecast_lower": {
+          "type": "double"
+        },
+        "forecast_memory_bytes": {
+          "type": "long"
+        },
+        "forecast_messages": {
+          "type": "keyword"
+        },
+        "forecast_prediction": {
+          "type": "double"
+        },
+        "forecast_progress": {
+          "type": "double"
+        },
+        "forecast_start_timestamp": {
+          "type": "date"
+        },
+        "forecast_status": {
+          "type": "keyword"
+        },
+        "forecast_upper": {
+          "type": "double"
+        },
+        "function": {
+          "type": "keyword"
+        },
+        "function_description": {
+          "type": "keyword"
+        },
+        "influencer_field_name": {
+          "type": "keyword"
+        },
+        "influencer_field_value": {
+          "copy_to": [
+            "all_field_values"
+          ],
+          "type": "keyword"
+        },
+        "influencer_score": {
+          "type": "double"
+        },
+        "influencers": {
+          "properties": {
+            "influencer_field_name": {
+              "type": "keyword"
+            },
+            "influencer_field_values": {
+              "copy_to": [
+                "all_field_values"
+              ],
+              "type": "keyword"
+            }
+          },
+          "type": "nested"
+        },
+        "initial_anomaly_score": {
+          "type": "double"
+        },
+        "initial_influencer_score": {
+          "type": "double"
+        },
+        "initial_record_score": {
+          "type": "double"
+        },
+        "input_bytes": {
+          "type": "long"
+        },
+        "input_field_count": {
+          "type": "long"
+        },
+        "input_record_count": {
+          "type": "long"
+        },
+        "invalid_date_count": {
+          "type": "long"
+        },
+        "is_interim": {
+          "type": "boolean"
+        },
+        "job_id": {
+          "copy_to": [
+            "all_field_values"
+          ],
+          "type": "keyword"
+        },
+        "last_data_time": {
+          "type": "date"
+        },
+        "latest_empty_bucket_timestamp": {
+          "type": "date"
+        },
+        "latest_record_time_stamp": {
+          "type": "date"
+        },
+        "latest_record_timestamp": {
+          "type": "date"
+        },
+        "latest_result_time_stamp": {
+          "type": "date"
+        },
+        "latest_sparse_bucket_timestamp": {
+          "type": "date"
+        },
+        "log_time": {
+          "type": "date"
+        },
+        "max_matching_length": {
+          "type": "long"
+        },
+        "maximum_bucket_processing_time_ms": {
+          "type": "double"
+        },
+        "memory_status": {
+          "type": "keyword"
+        },
+        "min_version": {
+          "type": "keyword"
+        },
+        "minimum_bucket_processing_time_ms": {
+          "type": "double"
+        },
+        "missing_field_count": {
+          "type": "long"
+        },
+        "model_bytes": {
+          "type": "long"
+        },
+        "model_bytes_exceeded": {
+          "type": "keyword"
+        },
+        "model_bytes_memory_limit": {
+          "type": "keyword"
+        },
+        "model_feature": {
+          "type": "keyword"
+        },
+        "model_lower": {
+          "type": "double"
+        },
+        "model_median": {
+          "type": "double"
+        },
+        "model_size_stats": {
+          "properties": {
+            "bucket_allocation_failures_count": {
+              "type": "long"
+            },
+            "job_id": {
+              "type": "keyword"
+            },
+            "log_time": {
+              "type": "date"
+            },
+            "memory_status": {
+              "type": "keyword"
+            },
+            "model_bytes": {
+              "type": "long"
+            },
+            "model_bytes_exceeded": {
+              "type": "keyword"
+            },
+            "model_bytes_memory_limit": {
+              "type": "keyword"
+            },
+            "result_type": {
+              "type": "keyword"
+            },
+            "timestamp": {
+              "type": "date"
+            },
+            "total_by_field_count": {
+              "type": "long"
+            },
+            "total_over_field_count": {
+              "type": "long"
+            },
+            "total_partition_field_count": {
+              "type": "long"
+            }
+          }
+        },
+        "model_upper": {
+          "type": "double"
+        },
+        "multi_bucket_impact": {
+          "type": "double"
+        },
+        "out_of_order_timestamp_count": {
+          "type": "long"
+        },
+        "over_field_name": {
+          "type": "keyword"
+        },
+        "over_field_value": {
+          "copy_to": [
+            "all_field_values"
+          ],
+          "type": "keyword"
+        },
+        "partition_field_name": {
+          "type": "keyword"
+        },
+        "partition_field_value": {
+          "copy_to": [
+            "all_field_values"
+          ],
+          "type": "keyword"
+        },
+        "probability": {
+          "type": "double"
+        },
+        "processed_field_count": {
+          "type": "long"
+        },
+        "processed_record_count": {
+          "type": "long"
+        },
+        "processing_time_ms": {
+          "type": "long"
+        },
+        "quantiles": {
+          "enabled": false,
+          "type": "object"
+        },
+        "raw_anomaly_score": {
+          "type": "double"
+        },
+        "record_score": {
+          "type": "double"
+        },
+        "regex": {
+          "type": "keyword"
+        },
+        "result_type": {
+          "type": "keyword"
+        },
+        "retain": {
+          "type": "boolean"
+        },
+        "scheduled_events": {
+          "type": "keyword"
+        },
+        "search_count": {
+          "type": "long"
+        },
+        "snapshot_doc_count": {
+          "type": "integer"
+        },
+        "snapshot_id": {
+          "type": "keyword"
+        },
+        "sparse_bucket_count": {
+          "type": "long"
+        },
+        "terms": {
+          "type": "text"
+        },
+        "timestamp": {
+          "type": "date"
+        },
+        "total_by_field_count": {
+          "type": "long"
+        },
+        "total_over_field_count": {
+          "type": "long"
+        },
+        "total_partition_field_count": {
+          "type": "long"
+        },
+        "total_search_time_ms": {
+          "type": "double"
+        },
+        "typical": {
+          "type": "double"
+        }
+      }
+    },
+    "settings": {
+      "index": {
+        "auto_expand_replicas": "0-1",
+        "number_of_replicas": "0",
+        "number_of_shards": "1",
+        "query": {
+          "default_field": "all_field_values"
+        },
+        "translog": {
+          "durability": "async"
+        },
+        "unassigned": {
+          "node_left": {
+            "delayed_timeout": "1m"
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/x-pack/test/functional/es_archives/lens/reporting/data.json.gz b/x-pack/test/functional/es_archives/lens/reporting/data.json.gz
index b59717330488af..93ceaf3d8f6f5d 100644
Binary files a/x-pack/test/functional/es_archives/lens/reporting/data.json.gz and b/x-pack/test/functional/es_archives/lens/reporting/data.json.gz differ
diff --git a/x-pack/test/functional/es_archives/spaces/enter_space/data.json b/x-pack/test/functional/es_archives/spaces/enter_space/data.json
new file mode 100644
index 00000000000000..462a2a1ee38fe1
--- /dev/null
+++ b/x-pack/test/functional/es_archives/spaces/enter_space/data.json
@@ -0,0 +1,83 @@
+{
+  "type": "doc",
+  "value": {
+    "id": "config:6.0.0",
+    "index": ".kibana",
+    "source": {
+      "config": {
+        "buildNum": 8467,
+        "dateFormat:tz": "UTC",
+        "defaultRoute": "/app/canvas"
+      },
+      "type": "config"
+    }
+  }
+}
+
+{
+  "type": "doc",
+  "value": {
+    "id": "another-space:config:6.0.0",
+    "index": ".kibana",
+    "source": {
+      "namespace": "another-space",
+      "config": {
+        "buildNum": 8467,
+        "dateFormat:tz": "UTC",
+        "defaultRoute": "/app/kibana/#dashboard"
+      },
+      "type": "config"
+    }
+  }
+}
+
+{
+  "type": "doc",
+  "value": {
+    "index": ".kibana",
+    "id": "another-space:index-pattern:logstash-*",
+    "source": {
+      "index-pattern": {
+        "title": "logstash-*",
+        "timeFieldName": "@timestamp",
+        "fields": "[{\"name\":\"@message\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"@message.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"@tags\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"@tags.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"@timestamp\",\"type\":\"date\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"_id\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":false},{\"name\":\"_index\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":false},{\"name\":\"_score\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"searchable\":false,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"_source\",\"type\":\"_source\",\"count\":0,\"scripted\":false,\"searchable\":false,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"_type\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":false},{\"name\":\"agent\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"agent.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"bytes\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"clientip\",\"type\":\"ip\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"extension\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"extension.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"geo.coordinates\",\"type\":\"geo_point\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"geo.dest\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"geo.src\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"geo.srcdest\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"headings\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"headings.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"host\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"host.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"id\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"index\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"index.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"ip\",\"type\":\"ip\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"links\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"links.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"machine.os\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"machine.os.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"machine.ram\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"memory\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"meta.char\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"meta.related\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"meta.user.firstname\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"meta.user.lastname\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"phpmemory\",\"type\":\"number\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"referer\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.article:modified_time\",\"type\":\"date\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.article:published_time\",\"type\":\"date\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.article:section\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"relatedContent.article:section.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.article:tag\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"relatedContent.article:tag.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.og:description\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"relatedContent.og:description.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.og:image\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"relatedContent.og:image.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.og:image:height\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"relatedContent.og:image:height.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.og:image:width\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"relatedContent.og:image:width.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.og:site_name\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"relatedContent.og:site_name.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.og:title\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"relatedContent.og:title.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.og:type\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"relatedContent.og:type.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.og:url\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"relatedContent.og:url.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.twitter:card\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"relatedContent.twitter:card.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.twitter:description\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"relatedContent.twitter:description.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.twitter:image\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"relatedContent.twitter:image.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.twitter:site\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"relatedContent.twitter:site.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.twitter:title\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"relatedContent.twitter:title.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"relatedContent.url\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"relatedContent.url.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"request\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"request.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"response\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"response.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"spaces\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"spaces.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"type\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"url\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"url.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"utc_time\",\"type\":\"date\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true},{\"name\":\"xss\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":false,\"readFromDocValues\":false},{\"name\":\"xss.raw\",\"type\":\"string\",\"count\":0,\"scripted\":false,\"searchable\":true,\"aggregatable\":true,\"readFromDocValues\":true}]"
+      },
+      "type": "index-pattern",
+      "namespace": "another-space",
+      "migrationVersion": {
+        "index-pattern": "6.5.0"
+      },
+      "updated_at": "2018-12-21T00:43:07.096Z"
+    }
+  }
+}
+
+{
+  "type": "doc",
+  "value": {
+    "id": "space:default",
+    "index": ".kibana",
+    "source": {
+      "space": {
+        "description": "This is the default space!",
+        "name": "Default"
+      },
+      "type": "space"
+    }
+  }
+}
+
+{
+  "type": "doc",
+  "value": {
+    "id": "space:another-space",
+    "index": ".kibana",
+    "source": {
+      "space": {
+        "description": "This is another space",
+        "name": "Another Space"
+      },
+      "type": "space"
+    }
+  }
+}
\ No newline at end of file
diff --git a/x-pack/test/functional/es_archives/spaces/enter_space/mappings.json b/x-pack/test/functional/es_archives/spaces/enter_space/mappings.json
new file mode 100644
index 00000000000000..f3793c7ca6780b
--- /dev/null
+++ b/x-pack/test/functional/es_archives/spaces/enter_space/mappings.json
@@ -0,0 +1,287 @@
+{
+  "type": "index",
+  "value": {
+    "index": ".kibana",
+    "mappings": {
+      "properties": {
+        "config": {
+          "dynamic": "true",
+          "properties": {
+            "buildNum": {
+              "type": "keyword"
+            },
+            "dateFormat:tz": {
+              "fields": {
+                "keyword": {
+                  "ignore_above": 256,
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            },
+            "defaultRoute": {
+              "type": "keyword"
+            }
+          }
+        },
+        "dashboard": {
+          "dynamic": "strict",
+          "properties": {
+            "description": {
+              "type": "text"
+            },
+            "hits": {
+              "type": "integer"
+            },
+            "kibanaSavedObjectMeta": {
+              "properties": {
+                "searchSourceJSON": {
+                  "type": "text"
+                }
+              }
+            },
+            "optionsJSON": {
+              "type": "text"
+            },
+            "panelsJSON": {
+              "type": "text"
+            },
+            "refreshInterval": {
+              "properties": {
+                "display": {
+                  "type": "keyword"
+                },
+                "pause": {
+                  "type": "boolean"
+                },
+                "section": {
+                  "type": "integer"
+                },
+                "value": {
+                  "type": "integer"
+                }
+              }
+            },
+            "timeFrom": {
+              "type": "keyword"
+            },
+            "timeRestore": {
+              "type": "boolean"
+            },
+            "timeTo": {
+              "type": "keyword"
+            },
+            "title": {
+              "type": "text"
+            },
+            "uiStateJSON": {
+              "type": "text"
+            },
+            "version": {
+              "type": "integer"
+            }
+          }
+        },
+        "index-pattern": {
+          "dynamic": "strict",
+          "properties": {
+            "fieldFormatMap": {
+              "type": "text"
+            },
+            "fields": {
+              "type": "text"
+            },
+            "intervalName": {
+              "type": "keyword"
+            },
+            "notExpandable": {
+              "type": "boolean"
+            },
+            "sourceFilters": {
+              "type": "text"
+            },
+            "timeFieldName": {
+              "type": "keyword"
+            },
+            "title": {
+              "type": "text"
+            }
+          }
+        },
+        "search": {
+          "dynamic": "strict",
+          "properties": {
+            "columns": {
+              "type": "keyword"
+            },
+            "description": {
+              "type": "text"
+            },
+            "hits": {
+              "type": "integer"
+            },
+            "kibanaSavedObjectMeta": {
+              "properties": {
+                "searchSourceJSON": {
+                  "type": "text"
+                }
+              }
+            },
+            "sort": {
+              "type": "keyword"
+            },
+            "title": {
+              "type": "text"
+            },
+            "version": {
+              "type": "integer"
+            }
+          }
+        },
+        "server": {
+          "dynamic": "strict",
+          "properties": {
+            "uuid": {
+              "type": "keyword"
+            }
+          }
+        },
+        "space": {
+          "properties": {
+            "_reserved": {
+              "type": "boolean"
+            },
+            "color": {
+              "type": "keyword"
+            },
+            "description": {
+              "type": "text"
+            },
+            "disabledFeatures": {
+              "type": "keyword"
+            },
+            "initials": {
+              "type": "keyword"
+            },
+            "name": {
+              "fields": {
+                "keyword": {
+                  "ignore_above": 2048,
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            }
+          }
+        },
+        "spaceId": {
+          "type": "keyword"
+        },
+        "timelion-sheet": {
+          "dynamic": "strict",
+          "properties": {
+            "description": {
+              "type": "text"
+            },
+            "hits": {
+              "type": "integer"
+            },
+            "kibanaSavedObjectMeta": {
+              "properties": {
+                "searchSourceJSON": {
+                  "type": "text"
+                }
+              }
+            },
+            "timelion_chart_height": {
+              "type": "integer"
+            },
+            "timelion_columns": {
+              "type": "integer"
+            },
+            "timelion_interval": {
+              "type": "keyword"
+            },
+            "timelion_other_interval": {
+              "type": "keyword"
+            },
+            "timelion_rows": {
+              "type": "integer"
+            },
+            "timelion_sheet": {
+              "type": "text"
+            },
+            "title": {
+              "type": "text"
+            },
+            "version": {
+              "type": "integer"
+            }
+          }
+        },
+        "type": {
+          "type": "keyword"
+        },
+        "url": {
+          "dynamic": "strict",
+          "properties": {
+            "accessCount": {
+              "type": "long"
+            },
+            "accessDate": {
+              "type": "date"
+            },
+            "createDate": {
+              "type": "date"
+            },
+            "url": {
+              "fields": {
+                "keyword": {
+                  "ignore_above": 2048,
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            }
+          }
+        },
+        "visualization": {
+          "dynamic": "strict",
+          "properties": {
+            "description": {
+              "type": "text"
+            },
+            "kibanaSavedObjectMeta": {
+              "properties": {
+                "searchSourceJSON": {
+                  "type": "text"
+                }
+              }
+            },
+            "savedSearchId": {
+              "type": "keyword"
+            },
+            "title": {
+              "type": "text"
+            },
+            "uiStateJSON": {
+              "type": "text"
+            },
+            "version": {
+              "type": "integer"
+            },
+            "visState": {
+              "type": "text"
+            }
+          }
+        }
+      }
+    },
+    "settings": {
+      "index": {
+        "number_of_replicas": "1",
+        "number_of_shards": "1"
+      }
+    }
+  }
+}
diff --git a/x-pack/test/functional/page_objects/monitoring_page.js b/x-pack/test/functional/page_objects/monitoring_page.js
index 9eef3dff01bbad..84c9981a1bcc99 100644
--- a/x-pack/test/functional/page_objects/monitoring_page.js
+++ b/x-pack/test/functional/page_objects/monitoring_page.js
@@ -50,7 +50,8 @@ export function MonitoringPageProvider({ getPageObjects, getService }) {
     }
 
     async tableSetFilter(subj, text) {
-      return await testSubjects.setValue(subj, text);
+      await testSubjects.setValue(subj, text);
+      await PageObjects.common.pressEnterKey();
     }
 
     async tableClearFilter(subj) {
diff --git a/x-pack/test/functional/page_objects/space_selector_page.js b/x-pack/test/functional/page_objects/space_selector_page.js
index 3be1ae174ce468..ad0f48bdd50bff 100644
--- a/x-pack/test/functional/page_objects/space_selector_page.js
+++ b/x-pack/test/functional/page_objects/space_selector_page.js
@@ -28,14 +28,18 @@ export function SpaceSelectorPageProvider({ getService, getPageObjects }) {
     }
 
     async expectHomePage(spaceId) {
+      return await this.expectRoute(spaceId, `/app/kibana#/home`);
+    }
+
+    async expectRoute(spaceId, route) {
       return await retry.try(async () => {
-        log.debug(`expectHomePage(${spaceId})`);
+        log.debug(`expectRoute(${spaceId}, ${route})`);
         await find.byCssSelector('[data-test-subj="kibanaChrome"] nav:not(.ng-hide) ', 20000);
         const url = await browser.getCurrentUrl();
         if (spaceId === 'default') {
-          expect(url).to.contain(`/app/kibana#/home`);
+          expect(url).to.contain(route);
         } else {
-          expect(url).to.contain(`/s/${spaceId}/app/kibana#/home`);
+          expect(url).to.contain(`/s/${spaceId}${route}`);
         }
       });
     }
diff --git a/x-pack/test/functional/services/machine_learning/job_source_selection.ts b/x-pack/test/functional/services/machine_learning/job_source_selection.ts
index 89fae06fd33ce3..81f2de3a47e799 100644
--- a/x-pack/test/functional/services/machine_learning/job_source_selection.ts
+++ b/x-pack/test/functional/services/machine_learning/job_source_selection.ts
@@ -11,8 +11,7 @@ export function MachineLearningJobSourceSelectionProvider({ getService }: FtrPro
 
   return {
     async selectSourceIndexPattern(indexPattern: string) {
-      const subj = 'paginatedListItem-' + indexPattern;
-      await testSubjects.clickWhenNotDisabled(subj);
+      await testSubjects.clickWhenNotDisabled(`savedObjectTitle${indexPattern}`);
       await testSubjects.existOrFail('mlPageJobTypeSelection');
     },
   };
diff --git a/x-pack/test/functional/services/machine_learning/job_table.ts b/x-pack/test/functional/services/machine_learning/job_table.ts
index 33b6c3aeb78f67..8acb674a2a163b 100644
--- a/x-pack/test/functional/services/machine_learning/job_table.ts
+++ b/x-pack/test/functional/services/machine_learning/job_table.ts
@@ -10,6 +10,7 @@ import { FtrProviderContext } from '../../ftr_provider_context';
 export function MachineLearningJobTableProvider({ getService }: FtrProviderContext) {
   const testSubjects = getService('testSubjects');
   const retry = getService('retry');
+  const find = getService('find');
 
   return new (class MlJobTable {
     public async parseJobTable() {
@@ -17,11 +18,13 @@ export function MachineLearningJobTableProvider({ getService }: FtrProviderConte
       const $ = await table.parseDomContent();
       const rows = [];
 
-      for (const tr of $.findTestSubjects('~row').toArray()) {
+      for (const tr of $.findTestSubjects('~mlJobListRow').toArray()) {
         const $tr = $(tr);
 
-        const $description = $tr.findTestSubject('description').find('.euiTableCellContent');
-        const $jobGroups = $description.findTestSubjects('jobGroup');
+        const $description = $tr
+          .findTestSubject('mlJobListColumnDescription')
+          .find('.euiTableCellContent');
+        const $jobGroups = $description.findTestSubjects('mlJobGroup');
         const jobGroups = [];
         for (const el of $jobGroups.toArray()) {
           // collect this group in our array
@@ -37,7 +40,7 @@ export function MachineLearningJobTableProvider({ getService }: FtrProviderConte
 
         rows.push({
           id: $tr
-            .findTestSubject('id')
+            .findTestSubject('mlJobListColumnId')
             .find('.euiTableCellContent')
             .text()
             .trim(),
@@ -47,27 +50,27 @@ export function MachineLearningJobTableProvider({ getService }: FtrProviderConte
             .trim(),
           jobGroups,
           recordCount: $tr
-            .findTestSubject('recordCount')
+            .findTestSubject('mlJobListColumnRecordCount')
             .find('.euiTableCellContent')
             .text()
             .trim(),
           memoryStatus: $tr
-            .findTestSubject('memoryStatus')
+            .findTestSubject('mlJobListColumnMemoryStatus')
             .find('.euiTableCellContent')
             .text()
             .trim(),
           jobState: $tr
-            .findTestSubject('jobState')
+            .findTestSubject('mlJobListColumnJobState')
             .find('.euiTableCellContent')
             .text()
             .trim(),
           datafeedState: $tr
-            .findTestSubject('datafeedState')
+            .findTestSubject('mlJobListColumnDatafeedState')
             .find('.euiTableCellContent')
             .text()
             .trim(),
           latestTimestamp: $tr
-            .findTestSubject('latestTimestamp')
+            .findTestSubject('mlJobListColumnLatestTimestamp')
             .find('.euiTableCellContent')
             .text()
             .trim(),
@@ -80,13 +83,13 @@ export function MachineLearningJobTableProvider({ getService }: FtrProviderConte
     public async parseJobCounts(jobId: string) {
       return await this.withDetailsOpen(jobId, async () => {
         // click counts tab
-        await testSubjects.click(this.detailsSelector(jobId, 'tab-counts'));
+        await testSubjects.click(this.detailsSelector(jobId, 'mlJobListTab-counts'));
 
         const countsTable = await testSubjects.find(
-          this.detailsSelector(jobId, 'details-counts > counts')
+          this.detailsSelector(jobId, 'mlJobDetails-counts > mlJobRowDetailsSection-counts')
         );
         const modelSizeStatsTable = await testSubjects.find(
-          this.detailsSelector(jobId, 'details-counts > modelSizeStats')
+          this.detailsSelector(jobId, 'mlJobDetails-counts > mlJobRowDetailsSection-modelSizeStats')
         );
 
         // parse a table by reading each row
@@ -140,7 +143,7 @@ export function MachineLearningJobTableProvider({ getService }: FtrProviderConte
     public async ensureDetailsOpen(jobId: string) {
       await retry.try(async () => {
         if (!(await testSubjects.exists(this.detailsSelector(jobId)))) {
-          await testSubjects.click(this.rowSelector(jobId, 'detailsToggle'));
+          await testSubjects.click(this.rowSelector(jobId, 'mlJobListRowDetailsToggle'));
         }
 
         await testSubjects.existOrFail(this.detailsSelector(jobId));
@@ -150,7 +153,7 @@ export function MachineLearningJobTableProvider({ getService }: FtrProviderConte
     public async ensureDetailsClosed(jobId: string) {
       await retry.try(async () => {
         if (await testSubjects.exists(this.detailsSelector(jobId))) {
-          await testSubjects.click(this.rowSelector(jobId, 'detailsToggle'));
+          await testSubjects.click(this.rowSelector(jobId, 'mlJobListRowDetailsToggle'));
           await testSubjects.missingOrFail(this.detailsSelector(jobId));
         }
       });
@@ -210,5 +213,18 @@ export function MachineLearningJobTableProvider({ getService }: FtrProviderConte
 
       expect(modelSizeStats).to.eql(expectedModelSizeStats);
     }
+
+    public async clickActionsMenu(jobId: string) {
+      await testSubjects.click(this.rowSelector(jobId, 'euiCollapsedItemActionsButton'));
+      if (!(await find.existsByDisplayedByCssSelector('[class~=euiContextMenuPanel]'))) {
+        throw new Error(`expected euiContextMenuPanel to exist`);
+      }
+    }
+
+    public async clickCloneJobAction(jobId: string) {
+      await this.clickActionsMenu(jobId);
+      await testSubjects.click('mlActionButtonCloneJob');
+      await testSubjects.existOrFail('~mlPageJobWizard');
+    }
   })();
 }
diff --git a/x-pack/test/functional/services/machine_learning/job_type_selection.ts b/x-pack/test/functional/services/machine_learning/job_type_selection.ts
index eedcdcfea119e7..0957558f62165a 100644
--- a/x-pack/test/functional/services/machine_learning/job_type_selection.ts
+++ b/x-pack/test/functional/services/machine_learning/job_type_selection.ts
@@ -12,17 +12,29 @@ export function MachineLearningJobTypeSelectionProvider({ getService }: FtrProvi
   return {
     async selectSingleMetricJob() {
       await testSubjects.clickWhenNotDisabled('mlJobTypeLinkSingleMetricJob');
-      await testSubjects.existOrFail('mlPageJobWizard');
+      await this.assertSingleMetricJobWizardOpen();
+    },
+
+    async assertSingleMetricJobWizardOpen() {
+      await testSubjects.existOrFail('mlPageJobWizard single_metric');
     },
 
     async selectMultiMetricJob() {
       await testSubjects.clickWhenNotDisabled('mlJobTypeLinkMultiMetricJob');
-      await testSubjects.existOrFail('mlPageJobWizard');
+      await this.assertMultiMetricJobWizardOpen();
+    },
+
+    async assertMultiMetricJobWizardOpen() {
+      await testSubjects.existOrFail('mlPageJobWizard multi_metric');
     },
 
     async selectPopulationJob() {
       await testSubjects.clickWhenNotDisabled('mlJobTypeLinkPopulationJob');
-      await testSubjects.existOrFail('mlPageJobWizard');
+      await this.assertPopulationJobWizardOpen();
+    },
+
+    async assertPopulationJobWizardOpen() {
+      await testSubjects.existOrFail('mlPageJobWizard population');
     },
   };
 }
diff --git a/x-pack/test/functional/services/machine_learning/job_wizard_common.ts b/x-pack/test/functional/services/machine_learning/job_wizard_common.ts
index 19a270cdab5f57..7c85115a42aa0f 100644
--- a/x-pack/test/functional/services/machine_learning/job_wizard_common.ts
+++ b/x-pack/test/functional/services/machine_learning/job_wizard_common.ts
@@ -13,6 +13,18 @@ export function MachineLearningJobWizardCommonProvider({ getService }: FtrProvid
   const testSubjects = getService('testSubjects');
 
   return {
+    async waitForNextButtonVisible() {
+      await retry.waitFor(
+        'next button to be visible',
+        async () => await testSubjects.isDisplayed('mlJobWizardNavButtonNext')
+      );
+    },
+
+    async clickNextButton() {
+      await this.waitForNextButtonVisible();
+      await testSubjects.clickWhenNotDisabled('mlJobWizardNavButtonNext');
+    },
+
     async assertTimeRangeSectionExists() {
       await testSubjects.existOrFail('mlJobWizardStepTitleTimeRange');
     },
@@ -33,20 +45,49 @@ export function MachineLearningJobWizardCommonProvider({ getService }: FtrProvid
       await testSubjects.existOrFail('mlJobWizardStepTitleSummary');
     },
 
+    async advanceToPickFieldsSection() {
+      await this.clickNextButton();
+      await this.assertPickFieldsSectionExists();
+    },
+
+    async advanceToJobDetailsSection() {
+      await this.clickNextButton();
+      await this.assertJobDetailsSectionExists();
+    },
+
+    async advanceToValidationSection() {
+      await this.clickNextButton();
+      await this.assertValidationSectionExists();
+    },
+
+    async advanceToSummarySection() {
+      await this.clickNextButton();
+      await this.assertSummarySectionExists();
+    },
+
     async assertEventRateChartExists() {
-      await testSubjects.existOrFail('mlEventRateChart');
+      await testSubjects.existOrFail('~mlEventRateChart');
+    },
+
+    async assertEventRateChartHasData() {
+      await testSubjects.existOrFail('mlEventRateChart withData');
     },
 
     async assertAggAndFieldInputExists() {
       await testSubjects.existOrFail('mlJobWizardAggSelection > comboBoxInput');
     },
 
-    async assertAggAndFieldSelection(identifier: string) {
+    async assertAggAndFieldSelection(expectedIdentifier: string) {
       const comboBoxSelectedOptions = await comboBox.getComboBoxSelectedOptions(
         'mlJobWizardAggSelection > comboBoxInput'
       );
       expect(comboBoxSelectedOptions.length).to.eql(1);
-      expect(comboBoxSelectedOptions[0]).to.eql(identifier);
+      expect(comboBoxSelectedOptions[0]).to.eql(expectedIdentifier);
+    },
+
+    async selectAggAndField(identifier: string, isIdentifierKeptInField: boolean) {
+      await comboBox.set('mlJobWizardAggSelection > comboBoxInput', identifier);
+      await this.assertAggAndFieldSelection(isIdentifierKeptInField ? identifier : '');
     },
 
     async assertBucketSpanInputExists() {
@@ -61,6 +102,11 @@ export function MachineLearningJobWizardCommonProvider({ getService }: FtrProvid
       expect(actualBucketSpan).to.eql(expectedValue);
     },
 
+    async setBucketSpan(bucketSpan: string) {
+      await testSubjects.setValue('mlJobWizardInputBucketSpan', bucketSpan, { withKeyboard: true });
+      await this.assertBucketSpanValue(bucketSpan);
+    },
+
     async assertJobIdInputExists() {
       await testSubjects.existOrFail('mlJobWizardInputJobId');
     },
@@ -70,6 +116,11 @@ export function MachineLearningJobWizardCommonProvider({ getService }: FtrProvid
       expect(actualJobId).to.eql(expectedValue);
     },
 
+    async setJobId(jobId: string) {
+      await testSubjects.setValue('mlJobWizardInputJobId', jobId, { withKeyboard: true });
+      await this.assertJobIdValue(jobId);
+    },
+
     async assertJobDescriptionInputExists() {
       await testSubjects.existOrFail('mlJobWizardInputJobDescription');
     },
@@ -81,15 +132,30 @@ export function MachineLearningJobWizardCommonProvider({ getService }: FtrProvid
       expect(actualJobDescription).to.eql(expectedValue);
     },
 
+    async setJobDescription(jobDescription: string) {
+      await testSubjects.setValue('mlJobWizardInputJobDescription', jobDescription, {
+        withKeyboard: true,
+      });
+      await this.assertJobDescriptionValue(jobDescription);
+    },
+
     async assertJobGroupInputExists() {
       await testSubjects.existOrFail('mlJobWizardComboBoxJobGroups > comboBoxInput');
     },
 
-    async assertJobGroupSelection(jobGroups: string[]) {
-      const comboBoxSelectedOptions = await comboBox.getComboBoxSelectedOptions(
+    async getSelectedJobGroups(): Promise<string[]> {
+      return await comboBox.getComboBoxSelectedOptions(
         'mlJobWizardComboBoxJobGroups > comboBoxInput'
       );
-      expect(comboBoxSelectedOptions).to.eql(jobGroups);
+    },
+
+    async assertJobGroupSelection(jobGroups: string[]) {
+      expect(await this.getSelectedJobGroups()).to.eql(jobGroups);
+    },
+
+    async addJobGroup(jobGroup: string) {
+      await comboBox.setCustom('mlJobWizardComboBoxJobGroups > comboBoxInput', jobGroup);
+      expect(await this.getSelectedJobGroups()).to.contain(jobGroup);
     },
 
     async assertModelPlotSwitchExists() {
@@ -99,31 +165,47 @@ export function MachineLearningJobWizardCommonProvider({ getService }: FtrProvid
       });
     },
 
-    async assertDedicatedIndexSwitchExists() {
+    async getModelPlotSwitchCheckedState(): Promise<boolean> {
       await this.ensureAdvancedSectionOpen();
-      await testSubjects.existOrFail(
-        'mlJobWizardAdvancedSection > mlJobWizardSwitchUseDedicatedIndex',
-        { allowHidden: true }
+      return await testSubjects.isSelected(
+        'mlJobWizardAdvancedSection > mlJobWizardSwitchModelPlot'
       );
     },
 
-    async assertDedicatedIndexSwitchCheckedState(expectedValue: boolean) {
+    async assertModelPlotSwitchCheckedState(expectedValue: boolean) {
       await this.ensureAdvancedSectionOpen();
-      const actualCheckedState = await this.getDedicatedIndexSwitchCheckedState();
+      const actualCheckedState = await this.getModelPlotSwitchCheckedState();
       expect(actualCheckedState).to.eql(expectedValue);
     },
 
-    async assertCreateJobButtonExists() {
-      await testSubjects.existOrFail('mlJobWizardButtonCreateJob');
+    async assertDedicatedIndexSwitchExists() {
+      await this.ensureAdvancedSectionOpen();
+      await testSubjects.existOrFail(
+        'mlJobWizardAdvancedSection > mlJobWizardSwitchUseDedicatedIndex',
+        { allowHidden: true }
+      );
     },
 
-    async getDedicatedIndexSwitchCheckedState() {
+    async getDedicatedIndexSwitchCheckedState(): Promise<boolean> {
       await this.ensureAdvancedSectionOpen();
       return await testSubjects.isSelected(
         'mlJobWizardAdvancedSection > mlJobWizardSwitchUseDedicatedIndex'
       );
     },
 
+    async assertDedicatedIndexSwitchCheckedState(expectedValue: boolean) {
+      await this.ensureAdvancedSectionOpen();
+      const actualCheckedState = await this.getDedicatedIndexSwitchCheckedState();
+      expect(actualCheckedState).to.eql(expectedValue);
+    },
+
+    async activateDedicatedIndexSwitch() {
+      if ((await this.getDedicatedIndexSwitchCheckedState()) === false) {
+        await testSubjects.clickWhenNotDisabled('mlJobWizardSwitchUseDedicatedIndex');
+      }
+      await this.assertDedicatedIndexSwitchCheckedState(true);
+    },
+
     async assertModelMemoryLimitInputExists() {
       await this.ensureAdvancedSectionOpen();
       await testSubjects.existOrFail(
@@ -140,15 +222,33 @@ export function MachineLearningJobWizardCommonProvider({ getService }: FtrProvid
       expect(actualModelMemoryLimit).to.eql(expectedValue);
     },
 
+    async setModelMemoryLimit(modelMemoryLimit: string) {
+      await testSubjects.setValue('mlJobWizardInputModelMemoryLimit', modelMemoryLimit, {
+        withKeyboard: true,
+      });
+      await this.assertModelMemoryLimitValue(modelMemoryLimit);
+    },
+
     async assertInfluencerInputExists() {
-      await testSubjects.existOrFail('influencerSelect > comboBoxInput');
+      await testSubjects.existOrFail('mlInfluencerSelect > comboBoxInput');
+    },
+
+    async getSelectedInfluencers(): Promise<string[]> {
+      return await comboBox.getComboBoxSelectedOptions('mlInfluencerSelect > comboBoxInput');
     },
 
     async assertInfluencerSelection(influencers: string[]) {
-      const comboBoxSelectedOptions = await comboBox.getComboBoxSelectedOptions(
-        'influencerSelect > comboBoxInput'
-      );
-      expect(comboBoxSelectedOptions).to.eql(influencers);
+      expect(await this.getSelectedInfluencers()).to.eql(influencers);
+    },
+
+    async addInfluencer(influencer: string) {
+      await comboBox.setCustom('mlInfluencerSelect > comboBoxInput', influencer);
+      expect(await this.getSelectedInfluencers()).to.contain(influencer);
+    },
+
+    async assertAnomalyChartExists(chartType: string, preSelector?: string) {
+      let chartSelector = `mlAnomalyChart ${chartType}`;
+      chartSelector = !preSelector ? chartSelector : `${preSelector} > ${chartSelector}`;
     },
 
     async assertDetectorPreviewExists(
@@ -156,50 +256,42 @@ export function MachineLearningJobWizardCommonProvider({ getService }: FtrProvid
       detectorPosition: number,
       chartType: string
     ) {
-      await testSubjects.existOrFail(`detector ${detectorPosition}`);
-      await testSubjects.existOrFail(`detector ${detectorPosition} > detectorTitle`);
+      await testSubjects.existOrFail(`mlDetector ${detectorPosition}`);
+      await testSubjects.existOrFail(`mlDetector ${detectorPosition} > mlDetectorTitle`);
       expect(
-        await testSubjects.getVisibleText(`detector ${detectorPosition} > detectorTitle`)
+        await testSubjects.getVisibleText(`mlDetector ${detectorPosition} > mlDetectorTitle`)
       ).to.eql(aggAndFieldIdentifier);
-      await testSubjects.existOrFail(`detector ${detectorPosition} > mlAnomalyChart ${chartType}`);
-    },
-
-    async clickNextButton() {
-      await testSubjects.clickWhenNotDisabled('mlJobWizardNavButtonNext');
-    },
-
-    async clickPreviousButton() {
-      await testSubjects.clickWhenNotDisabled('mlJobWizardNavButtonPrevious');
-    },
 
-    async clickUseFullDataButton() {
-      await testSubjects.clickWhenNotDisabled('mlButtonUseFullData');
+      await this.assertAnomalyChartExists(chartType, `mlDetector ${detectorPosition}`);
     },
 
-    async selectAggAndField(identifier: string) {
-      await comboBox.set('mlJobWizardAggSelection > comboBoxInput', identifier);
+    async assertCreateJobButtonExists() {
+      await testSubjects.existOrFail('mlJobWizardButtonCreateJob');
     },
 
-    async setBucketSpan(bucketSpan: string) {
-      await testSubjects.setValue('mlJobWizardInputBucketSpan', bucketSpan, { withKeyboard: true });
+    async assertDateRangeSelectionExists() {
+      await testSubjects.existOrFail('mlJobWizardDateRange');
     },
 
-    async setJobId(jobId: string) {
-      await testSubjects.setValue('mlJobWizardInputJobId', jobId, { withKeyboard: true });
+    async getSelectedDateRange() {
+      const dateRange = await testSubjects.find('mlJobWizardDateRange');
+      const [startPicker, endPicker] = await dateRange.findAllByClassName('euiFieldText');
+      return {
+        startDate: await startPicker.getAttribute('value'),
+        endDate: await endPicker.getAttribute('value'),
+      };
     },
 
-    async setJobDescription(jobDescription: string) {
-      await testSubjects.setValue('mlJobWizardInputJobDescription', jobDescription, {
-        withKeyboard: true,
+    async assertDateRangeSelection(expectedStartDate: string, expectedEndDate: string) {
+      expect(await this.getSelectedDateRange()).to.eql({
+        startDate: expectedStartDate,
+        endDate: expectedEndDate,
       });
     },
 
-    async addJobGroup(jobGroup: string) {
-      await comboBox.setCustom('mlJobWizardComboBoxJobGroups > comboBoxInput', jobGroup);
-    },
-
-    async addInfluencer(influencer: string) {
-      await comboBox.setCustom('influencerSelect > comboBoxInput', influencer);
+    async clickUseFullDataButton(expectedStartDate: string, expectedEndDate: string) {
+      await testSubjects.clickWhenNotDisabled('mlButtonUseFullData');
+      await this.assertDateRangeSelection(expectedStartDate, expectedEndDate);
     },
 
     async ensureAdvancedSectionOpen() {
@@ -211,24 +303,12 @@ export function MachineLearningJobWizardCommonProvider({ getService }: FtrProvid
       });
     },
 
-    async activateDedicatedIndexSwitch() {
-      if ((await this.getDedicatedIndexSwitchCheckedState()) === false) {
-        await testSubjects.clickWhenNotDisabled('mlJobWizardSwitchUseDedicatedIndex');
-      }
-    },
-
-    async setModelMemoryLimit(modelMemoryLimit: string) {
-      await testSubjects.setValue('mlJobWizardInputModelMemoryLimit', modelMemoryLimit, {
-        withKeyboard: true,
-      });
-    },
-
     async createJobAndWaitForCompletion() {
       await testSubjects.clickWhenNotDisabled('mlJobWizardButtonCreateJob');
       await retry.waitForWithTimeout(
         'job processing to finish',
         5 * 60 * 1000,
-        async () => (await testSubjects.exists('mlJobWizardButtonCreateJob')) === false
+        async () => await testSubjects.exists('mlJobWizardButtonRunInRealTime')
       );
     },
   };
diff --git a/x-pack/test/functional/services/machine_learning/job_wizard_multi_metric.ts b/x-pack/test/functional/services/machine_learning/job_wizard_multi_metric.ts
index f1e6319d6e866a..d9df6a9d682a76 100644
--- a/x-pack/test/functional/services/machine_learning/job_wizard_multi_metric.ts
+++ b/x-pack/test/functional/services/machine_learning/job_wizard_multi_metric.ts
@@ -13,34 +13,35 @@ export function MachineLearningJobWizardMultiMetricProvider({ getService }: FtrP
 
   return {
     async assertSplitFieldInputExists() {
-      await testSubjects.existOrFail('multiMetricSplitFieldSelect > comboBoxInput');
+      await testSubjects.existOrFail('mlMultiMetricSplitFieldSelect > comboBoxInput');
     },
 
     async assertSplitFieldSelection(identifier: string) {
       const comboBoxSelectedOptions = await comboBox.getComboBoxSelectedOptions(
-        'multiMetricSplitFieldSelect > comboBoxInput'
+        'mlMultiMetricSplitFieldSelect > comboBoxInput'
       );
       expect(comboBoxSelectedOptions.length).to.eql(1);
       expect(comboBoxSelectedOptions[0]).to.eql(identifier);
     },
 
     async selectSplitField(identifier: string) {
-      await comboBox.set('multiMetricSplitFieldSelect > comboBoxInput', identifier);
+      await comboBox.set('mlMultiMetricSplitFieldSelect > comboBoxInput', identifier);
+      await this.assertSplitFieldSelection(identifier);
     },
 
     async assertDetectorSplitExists(splitField: string) {
-      await testSubjects.existOrFail(`dataSplit > dataSplitTitle ${splitField}`);
-      await testSubjects.existOrFail(`dataSplit > splitCard front`);
+      await testSubjects.existOrFail(`mlDataSplit > mlDataSplitTitle ${splitField}`);
+      await testSubjects.existOrFail(`mlDataSplit > mlSplitCard front`);
     },
 
     async assertDetectorSplitFrontCardTitle(frontCardTitle: string) {
       expect(
-        await testSubjects.getVisibleText(`dataSplit > splitCard front > splitCardTitle`)
+        await testSubjects.getVisibleText(`mlDataSplit > mlSplitCard front > mlSplitCardTitle`)
       ).to.eql(frontCardTitle);
     },
 
     async assertDetectorSplitNumberOfBackCards(numberOfBackCards: number) {
-      expect(await testSubjects.findAll(`dataSplit > splitCard back`)).to.have.length(
+      expect(await testSubjects.findAll(`mlDataSplit > mlSplitCard back`)).to.have.length(
         numberOfBackCards
       );
     },
diff --git a/x-pack/test/functional/services/machine_learning/job_wizard_population.ts b/x-pack/test/functional/services/machine_learning/job_wizard_population.ts
index 12e59e0d5279dd..892bdaf394936a 100644
--- a/x-pack/test/functional/services/machine_learning/job_wizard_population.ts
+++ b/x-pack/test/functional/services/machine_learning/job_wizard_population.ts
@@ -13,30 +13,31 @@ export function MachineLearningJobWizardPopulationProvider({ getService }: FtrPr
 
   return {
     async assertPopulationFieldInputExists() {
-      await testSubjects.existOrFail('populationSplitFieldSelect > comboBoxInput');
+      await testSubjects.existOrFail('mlPopulationSplitFieldSelect > comboBoxInput');
     },
 
     async assertPopulationFieldSelection(identifier: string) {
       const comboBoxSelectedOptions = await comboBox.getComboBoxSelectedOptions(
-        'populationSplitFieldSelect > comboBoxInput'
+        'mlPopulationSplitFieldSelect > comboBoxInput'
       );
       expect(comboBoxSelectedOptions.length).to.eql(1);
       expect(comboBoxSelectedOptions[0]).to.eql(identifier);
     },
 
     async selectPopulationField(identifier: string) {
-      await comboBox.set('populationSplitFieldSelect > comboBoxInput', identifier);
+      await comboBox.set('mlPopulationSplitFieldSelect > comboBoxInput', identifier);
+      await this.assertPopulationFieldSelection(identifier);
     },
 
     async assertDetectorSplitFieldInputExists(detectorPosition: number) {
       await testSubjects.existOrFail(
-        `detector ${detectorPosition} > byFieldSelect  > comboBoxInput`
+        `mlDetector ${detectorPosition} > mlByFieldSelect  > comboBoxInput`
       );
     },
 
     async assertDetectorSplitFieldSelection(detectorPosition: number, identifier: string) {
       const comboBoxSelectedOptions = await comboBox.getComboBoxSelectedOptions(
-        `detector ${detectorPosition} > byFieldSelect  > comboBoxInput`
+        `mlDetector ${detectorPosition} > mlByFieldSelect  > comboBoxInput`
       );
       expect(comboBoxSelectedOptions.length).to.eql(1);
       expect(comboBoxSelectedOptions[0]).to.eql(identifier);
@@ -44,20 +45,23 @@ export function MachineLearningJobWizardPopulationProvider({ getService }: FtrPr
 
     async selectDetectorSplitField(detectorPosition: number, identifier: string) {
       await comboBox.set(
-        `detector ${detectorPosition} > byFieldSelect  > comboBoxInput`,
+        `mlDetector ${detectorPosition} > mlByFieldSelect  > comboBoxInput`,
         identifier
       );
+      await this.assertDetectorSplitFieldSelection(detectorPosition, identifier);
     },
 
     async assertDetectorSplitExists(detectorPosition: number) {
-      await testSubjects.existOrFail(`detector ${detectorPosition} > dataSplit`);
-      await testSubjects.existOrFail(`detector ${detectorPosition} > dataSplit > splitCard front`);
+      await testSubjects.existOrFail(`mlDetector ${detectorPosition} > mlDataSplit`);
+      await testSubjects.existOrFail(
+        `mlDetector ${detectorPosition} > mlDataSplit > mlSplitCard front`
+      );
     },
 
     async assertDetectorSplitFrontCardTitle(detectorPosition: number, frontCardTitle: string) {
       expect(
         await testSubjects.getVisibleText(
-          `detector ${detectorPosition} > dataSplit > splitCard front > splitCardTitle`
+          `mlDetector ${detectorPosition} > mlDataSplit > mlSplitCard front > mlSplitCardTitle`
         )
       ).to.eql(frontCardTitle);
     },
@@ -67,7 +71,9 @@ export function MachineLearningJobWizardPopulationProvider({ getService }: FtrPr
       numberOfBackCards: number
     ) {
       expect(
-        await testSubjects.findAll(`detector ${detectorPosition} > dataSplit > splitCard back`)
+        await testSubjects.findAll(
+          `mlDetector ${detectorPosition} > mlDataSplit > mlSplitCard back`
+        )
       ).to.have.length(numberOfBackCards);
     },
   };
diff --git a/x-pack/test/functional/services/monitoring/logstash_pipelines.js b/x-pack/test/functional/services/monitoring/logstash_pipelines.js
index f2c3fb839f7af6..d4d367665ef5b8 100644
--- a/x-pack/test/functional/services/monitoring/logstash_pipelines.js
+++ b/x-pack/test/functional/services/monitoring/logstash_pipelines.js
@@ -18,6 +18,7 @@ export function MonitoringLogstashPipelinesProvider({ getService, getPageObjects
   const SUBJ_SEARCH_BAR = `${SUBJ_TABLE_CONTAINER} > monitoringTableToolBar`;
 
   const SUBJ_TABLE_SORT_EVENTS_EMITTED_RATE_COL = `${SUBJ_TABLE_CONTAINER} > tableHeaderCell_latestThroughput_1`;
+  const SUBJ_TABLE_SORT_ID_COL = `${SUBJ_TABLE_CONTAINER} > tableHeaderCell_id_0`;
 
   const SUBJ_PIPELINES_IDS = `${SUBJ_TABLE_CONTAINER} > id`;
   const SUBJ_PIPELINES_EVENTS_EMITTED_RATES = `${SUBJ_TABLE_CONTAINER} > eventsEmittedRate`;
@@ -53,6 +54,12 @@ export function MonitoringLogstashPipelinesProvider({ getService, getPageObjects
       }, []);
     }
 
+    async clickIdCol() {
+      const headerCell = await testSubjects.find(SUBJ_TABLE_SORT_ID_COL);
+      const button = await headerCell.findByTagName('button');
+      return button.click();
+    }
+
     async clickEventsEmittedRateCol() {
       const headerCell = await testSubjects.find(SUBJ_TABLE_SORT_EVENTS_EMITTED_RATE_COL);
       const button = await headerCell.findByTagName('button');
diff --git a/x-pack/test/functional/services/monitoring/no_data.js b/x-pack/test/functional/services/monitoring/no_data.js
index a0a1998689ee1c..81ed366ce94b2a 100644
--- a/x-pack/test/functional/services/monitoring/no_data.js
+++ b/x-pack/test/functional/services/monitoring/no_data.js
@@ -10,6 +10,7 @@ export function MonitoringNoDataProvider({ getService }) {
 
   return new class NoData {
     async enableMonitoring() {
+      await testSubjects.click('useInternalCollection');
       await testSubjects.click('enableCollectionEnabled');
     }
 
diff --git a/x-pack/test/mocha.opts b/x-pack/test/mocha.opts
deleted file mode 100644
index 5f1aa61861e607..00000000000000
--- a/x-pack/test/mocha.opts
+++ /dev/null
@@ -1 +0,0 @@
---require dev-tools/mocha/setup_mocha.js
diff --git a/x-pack/test/saved_object_api_integration/common/suites/find.ts b/x-pack/test/saved_object_api_integration/common/suites/find.ts
index 45e4c1ed2aa4e4..6799f0ec63846e 100644
--- a/x-pack/test/saved_object_api_integration/common/suites/find.ts
+++ b/x-pack/test/saved_object_api_integration/common/suites/find.ts
@@ -23,6 +23,11 @@ interface FindTests {
   unknownSearchField: FindTest;
   hiddenType: FindTest;
   noType: FindTest;
+  filterWithNotSpaceAwareType: FindTest;
+  filterWithHiddenType: FindTest;
+  filterWithUnknownType: FindTest;
+  filterWithNoType: FindTest;
+  filterWithUnAllowedType: FindTest;
 }
 
 interface FindTestDefinition {
@@ -73,6 +78,14 @@ export function findTestSuiteFactory(esArchiver: any, supertest: SuperTest<any>)
     });
   };
 
+  const expectFilterWrongTypeError = (resp: { [key: string]: any }) => {
+    expect(resp.body).to.eql({
+      error: 'Bad Request',
+      message: 'This type dashboard is not allowed: Bad Request',
+      statusCode: 400,
+    });
+  };
+
   const expectTypeRequired = (resp: { [key: string]: any }) => {
     expect(resp.body).to.eql({
       error: 'Bad Request',
@@ -184,6 +197,67 @@ export function findTestSuiteFactory(esArchiver: any, supertest: SuperTest<any>)
             .expect(tests.noType.statusCode)
             .then(tests.noType.response));
       });
+
+      describe('filter', () => {
+        it(`by wrong type should return ${tests.filterWithUnAllowedType.statusCode} with ${tests.filterWithUnAllowedType.description}`, async () =>
+          await supertest
+            .get(
+              `${getUrlPrefix(
+                spaceId
+              )}/api/saved_objects/_find?type=globaltype&filter=dashboard.title:'Requests'`
+            )
+            .auth(user.username, user.password)
+            .expect(tests.filterWithUnAllowedType.statusCode)
+            .then(tests.filterWithUnAllowedType.response));
+
+        it(`not space aware type should return ${tests.filterWithNotSpaceAwareType.statusCode} with ${tests.filterWithNotSpaceAwareType.description}`, async () =>
+          await supertest
+            .get(
+              `${getUrlPrefix(
+                spaceId
+              )}/api/saved_objects/_find?type=globaltype&filter=globaltype.attributes.name:*global*`
+            )
+            .auth(user.username, user.password)
+            .expect(tests.filterWithNotSpaceAwareType.statusCode)
+            .then(tests.filterWithNotSpaceAwareType.response));
+
+        it(`finding a hiddentype should return ${tests.filterWithHiddenType.statusCode} with ${tests.filterWithHiddenType.description}`, async () =>
+          await supertest
+            .get(
+              `${getUrlPrefix(
+                spaceId
+              )}/api/saved_objects/_find?type=hiddentype&fields=name&filter=hiddentype.attributes.name:'hello'`
+            )
+            .auth(user.username, user.password)
+            .expect(tests.filterWithHiddenType.statusCode)
+            .then(tests.filterWithHiddenType.response));
+
+        describe('unknown type', () => {
+          it(`should return ${tests.filterWithUnknownType.statusCode} with ${tests.filterWithUnknownType.description}`, async () =>
+            await supertest
+              .get(
+                `${getUrlPrefix(
+                  spaceId
+                )}/api/saved_objects/_find?type=wigwags&filter=wigwags.attributes.title:'unknown'`
+              )
+              .auth(user.username, user.password)
+              .expect(tests.filterWithUnknownType.statusCode)
+              .then(tests.filterWithUnknownType.response));
+        });
+
+        describe('no type', () => {
+          it(`should return ${tests.filterWithNoType.statusCode} with ${tests.filterWithNoType.description}`, async () =>
+            await supertest
+              .get(
+                `${getUrlPrefix(
+                  spaceId
+                )}/api/saved_objects/_find?filter=global.attributes.name:*global*`
+              )
+              .auth(user.username, user.password)
+              .expect(tests.filterWithNoType.statusCode)
+              .then(tests.filterWithNoType.response));
+        });
+      });
     });
   };
 
@@ -195,6 +269,7 @@ export function findTestSuiteFactory(esArchiver: any, supertest: SuperTest<any>)
     createExpectEmpty,
     createExpectRbacForbidden,
     createExpectVisualizationResults,
+    expectFilterWrongTypeError,
     expectNotSpaceAwareResults,
     expectTypeRequired,
     findTest,
diff --git a/x-pack/test/saved_object_api_integration/security_and_spaces/apis/find.ts b/x-pack/test/saved_object_api_integration/security_and_spaces/apis/find.ts
index 92e6ec850dc0e6..366b8b44585cdb 100644
--- a/x-pack/test/saved_object_api_integration/security_and_spaces/apis/find.ts
+++ b/x-pack/test/saved_object_api_integration/security_and_spaces/apis/find.ts
@@ -18,6 +18,7 @@ export default function({ getService }: FtrProviderContext) {
       createExpectEmpty,
       createExpectRbacForbidden,
       createExpectVisualizationResults,
+      expectFilterWrongTypeError,
       expectNotSpaceAwareResults,
       expectTypeRequired,
       findTest,
@@ -94,6 +95,31 @@ export default function({ getService }: FtrProviderContext) {
             statusCode: 400,
             response: expectTypeRequired,
           },
+          filterWithNotSpaceAwareType: {
+            description: 'forbidden login and find globaltype message',
+            statusCode: 403,
+            response: createExpectRbacForbidden('globaltype'),
+          },
+          filterWithHiddenType: {
+            description: 'forbidden find hiddentype message',
+            statusCode: 403,
+            response: createExpectRbacForbidden('hiddentype'),
+          },
+          filterWithUnknownType: {
+            description: 'forbidden find wigwags message',
+            statusCode: 403,
+            response: createExpectRbacForbidden('wigwags'),
+          },
+          filterWithNoType: {
+            description: 'bad request, type is required',
+            statusCode: 400,
+            response: expectTypeRequired,
+          },
+          filterWithUnAllowedType: {
+            description: 'forbidden',
+            statusCode: 403,
+            response: createExpectRbacForbidden('globaltype'),
+          },
         },
       });
 
@@ -136,6 +162,31 @@ export default function({ getService }: FtrProviderContext) {
             statusCode: 400,
             response: expectTypeRequired,
           },
+          filterWithNotSpaceAwareType: {
+            description: 'only the globaltype',
+            statusCode: 200,
+            response: expectNotSpaceAwareResults,
+          },
+          filterWithHiddenType: {
+            description: 'empty result',
+            statusCode: 200,
+            response: createExpectEmpty(1, 20, 0),
+          },
+          filterWithUnknownType: {
+            description: 'empty result',
+            statusCode: 200,
+            response: createExpectEmpty(1, 20, 0),
+          },
+          filterWithNoType: {
+            description: 'bad request, type is required',
+            statusCode: 400,
+            response: expectTypeRequired,
+          },
+          filterWithUnAllowedType: {
+            description: 'Bad Request',
+            statusCode: 400,
+            response: expectFilterWrongTypeError,
+          },
         },
       });
 
@@ -178,6 +229,31 @@ export default function({ getService }: FtrProviderContext) {
             statusCode: 400,
             response: expectTypeRequired,
           },
+          filterWithNotSpaceAwareType: {
+            description: 'forbidden login and find globaltype message',
+            statusCode: 403,
+            response: createExpectRbacForbidden('globaltype'),
+          },
+          filterWithHiddenType: {
+            description: 'forbidden find hiddentype message',
+            statusCode: 403,
+            response: createExpectRbacForbidden('hiddentype'),
+          },
+          filterWithUnknownType: {
+            description: 'forbidden find wigwags message',
+            statusCode: 403,
+            response: createExpectRbacForbidden('wigwags'),
+          },
+          filterWithNoType: {
+            description: 'bad request, type is required',
+            statusCode: 400,
+            response: expectTypeRequired,
+          },
+          filterWithUnAllowedType: {
+            description: 'forbidden',
+            statusCode: 403,
+            response: createExpectRbacForbidden('globaltype'),
+          },
         },
       });
 
@@ -220,6 +296,31 @@ export default function({ getService }: FtrProviderContext) {
             statusCode: 400,
             response: expectTypeRequired,
           },
+          filterWithNotSpaceAwareType: {
+            description: 'only the globaltype',
+            statusCode: 200,
+            response: expectNotSpaceAwareResults,
+          },
+          filterWithHiddenType: {
+            description: 'forbidden find hiddentype message',
+            statusCode: 403,
+            response: createExpectRbacForbidden('hiddentype'),
+          },
+          filterWithUnknownType: {
+            description: 'forbidden find wigwags message',
+            statusCode: 403,
+            response: createExpectRbacForbidden('wigwags'),
+          },
+          filterWithNoType: {
+            description: 'bad request, type is required',
+            statusCode: 400,
+            response: expectTypeRequired,
+          },
+          filterWithUnAllowedType: {
+            description: 'Bad Request',
+            statusCode: 400,
+            response: expectFilterWrongTypeError,
+          },
         },
       });
 
@@ -262,6 +363,31 @@ export default function({ getService }: FtrProviderContext) {
             statusCode: 400,
             response: expectTypeRequired,
           },
+          filterWithNotSpaceAwareType: {
+            description: 'only the globaltype',
+            statusCode: 200,
+            response: expectNotSpaceAwareResults,
+          },
+          filterWithHiddenType: {
+            description: 'forbidden find hiddentype message',
+            statusCode: 403,
+            response: createExpectRbacForbidden('hiddentype'),
+          },
+          filterWithUnknownType: {
+            description: 'forbidden find wigwags message',
+            statusCode: 403,
+            response: createExpectRbacForbidden('wigwags'),
+          },
+          filterWithNoType: {
+            description: 'bad request, type is required',
+            statusCode: 400,
+            response: expectTypeRequired,
+          },
+          filterWithUnAllowedType: {
+            description: 'Bad Request',
+            statusCode: 400,
+            response: expectFilterWrongTypeError,
+          },
         },
       });
 
@@ -304,6 +430,31 @@ export default function({ getService }: FtrProviderContext) {
             statusCode: 400,
             response: expectTypeRequired,
           },
+          filterWithNotSpaceAwareType: {
+            description: 'only the globaltype',
+            statusCode: 200,
+            response: expectNotSpaceAwareResults,
+          },
+          filterWithHiddenType: {
+            description: 'forbidden find hiddentype message',
+            statusCode: 403,
+            response: createExpectRbacForbidden('hiddentype'),
+          },
+          filterWithUnknownType: {
+            description: 'forbidden find wigwags message',
+            statusCode: 403,
+            response: createExpectRbacForbidden('wigwags'),
+          },
+          filterWithNoType: {
+            description: 'bad request, type is required',
+            statusCode: 400,
+            response: expectTypeRequired,
+          },
+          filterWithUnAllowedType: {
+            description: 'Bad Request',
+            statusCode: 400,
+            response: expectFilterWrongTypeError,
+          },
         },
       });
 
@@ -346,6 +497,31 @@ export default function({ getService }: FtrProviderContext) {
             statusCode: 400,
             response: expectTypeRequired,
           },
+          filterWithNotSpaceAwareType: {
+            description: 'only the globaltype',
+            statusCode: 200,
+            response: expectNotSpaceAwareResults,
+          },
+          filterWithHiddenType: {
+            description: 'forbidden find hiddentype message',
+            statusCode: 403,
+            response: createExpectRbacForbidden('hiddentype'),
+          },
+          filterWithUnknownType: {
+            description: 'forbidden find wigwags message',
+            statusCode: 403,
+            response: createExpectRbacForbidden('wigwags'),
+          },
+          filterWithNoType: {
+            description: 'bad request, type is required',
+            statusCode: 400,
+            response: expectTypeRequired,
+          },
+          filterWithUnAllowedType: {
+            description: 'Bad Request',
+            statusCode: 400,
+            response: expectFilterWrongTypeError,
+          },
         },
       });
 
@@ -388,6 +564,31 @@ export default function({ getService }: FtrProviderContext) {
             statusCode: 400,
             response: expectTypeRequired,
           },
+          filterWithNotSpaceAwareType: {
+            description: 'only the globaltype',
+            statusCode: 200,
+            response: expectNotSpaceAwareResults,
+          },
+          filterWithHiddenType: {
+            description: 'forbidden find hiddentype message',
+            statusCode: 403,
+            response: createExpectRbacForbidden('hiddentype'),
+          },
+          filterWithUnknownType: {
+            description: 'forbidden find wigwags message',
+            statusCode: 403,
+            response: createExpectRbacForbidden('wigwags'),
+          },
+          filterWithNoType: {
+            description: 'bad request, type is required',
+            statusCode: 400,
+            response: expectTypeRequired,
+          },
+          filterWithUnAllowedType: {
+            description: 'Bad Request',
+            statusCode: 400,
+            response: expectFilterWrongTypeError,
+          },
         },
       });
 
@@ -430,6 +631,31 @@ export default function({ getService }: FtrProviderContext) {
             statusCode: 400,
             response: expectTypeRequired,
           },
+          filterWithNotSpaceAwareType: {
+            description: 'only the globaltype',
+            statusCode: 200,
+            response: expectNotSpaceAwareResults,
+          },
+          filterWithHiddenType: {
+            description: 'forbidden find hiddentype message',
+            statusCode: 403,
+            response: createExpectRbacForbidden('hiddentype'),
+          },
+          filterWithUnknownType: {
+            description: 'forbidden find wigwags message',
+            statusCode: 403,
+            response: createExpectRbacForbidden('wigwags'),
+          },
+          filterWithNoType: {
+            description: 'bad request, type is required',
+            statusCode: 400,
+            response: expectTypeRequired,
+          },
+          filterWithUnAllowedType: {
+            description: 'Bad Request',
+            statusCode: 400,
+            response: expectFilterWrongTypeError,
+          },
         },
       });
 
@@ -472,6 +698,31 @@ export default function({ getService }: FtrProviderContext) {
             statusCode: 400,
             response: expectTypeRequired,
           },
+          filterWithNotSpaceAwareType: {
+            description: 'forbidden login and find globaltype message',
+            statusCode: 403,
+            response: createExpectRbacForbidden('globaltype'),
+          },
+          filterWithHiddenType: {
+            description: 'forbidden find hiddentype message',
+            statusCode: 403,
+            response: createExpectRbacForbidden('hiddentype'),
+          },
+          filterWithUnknownType: {
+            description: 'forbidden find wigwags message',
+            statusCode: 403,
+            response: createExpectRbacForbidden('wigwags'),
+          },
+          filterWithNoType: {
+            description: 'bad request, type is required',
+            statusCode: 400,
+            response: expectTypeRequired,
+          },
+          filterWithUnAllowedType: {
+            description: 'forbidden',
+            statusCode: 403,
+            response: createExpectRbacForbidden('globaltype'),
+          },
         },
       });
     });
diff --git a/x-pack/test/saved_object_api_integration/security_only/apis/find.ts b/x-pack/test/saved_object_api_integration/security_only/apis/find.ts
index d17dbe6e7b1edd..64d85a199e7bca 100644
--- a/x-pack/test/saved_object_api_integration/security_only/apis/find.ts
+++ b/x-pack/test/saved_object_api_integration/security_only/apis/find.ts
@@ -17,6 +17,7 @@ export default function({ getService }: FtrProviderContext) {
       createExpectEmpty,
       createExpectRbacForbidden,
       createExpectVisualizationResults,
+      expectFilterWrongTypeError,
       expectNotSpaceAwareResults,
       expectTypeRequired,
       findTest,
@@ -60,6 +61,31 @@ export default function({ getService }: FtrProviderContext) {
           statusCode: 400,
           response: expectTypeRequired,
         },
+        filterWithNotSpaceAwareType: {
+          description: 'forbidden login and find globaltype message',
+          statusCode: 403,
+          response: createExpectRbacForbidden('globaltype'),
+        },
+        filterWithHiddenType: {
+          description: 'forbidden login and find hiddentype message',
+          statusCode: 403,
+          response: createExpectRbacForbidden('hiddentype'),
+        },
+        filterWithUnknownType: {
+          description: 'forbidden find wigwags message',
+          statusCode: 403,
+          response: createExpectRbacForbidden('wigwags'),
+        },
+        filterWithNoType: {
+          description: 'bad request, type is required',
+          statusCode: 400,
+          response: expectTypeRequired,
+        },
+        filterWithUnAllowedType: {
+          description: 'forbidden',
+          statusCode: 403,
+          response: createExpectRbacForbidden('globaltype'),
+        },
       },
     });
 
@@ -101,6 +127,31 @@ export default function({ getService }: FtrProviderContext) {
           statusCode: 400,
           response: expectTypeRequired,
         },
+        filterWithNotSpaceAwareType: {
+          description: 'only the globaltype',
+          statusCode: 200,
+          response: expectNotSpaceAwareResults,
+        },
+        filterWithHiddenType: {
+          description: 'empty result',
+          statusCode: 200,
+          response: createExpectEmpty(1, 20, 0),
+        },
+        filterWithUnknownType: {
+          description: 'empty result',
+          statusCode: 200,
+          response: createExpectEmpty(1, 20, 0),
+        },
+        filterWithNoType: {
+          description: 'bad request, type is required',
+          statusCode: 400,
+          response: expectTypeRequired,
+        },
+        filterWithUnAllowedType: {
+          description: 'Bad Request',
+          statusCode: 400,
+          response: expectFilterWrongTypeError,
+        },
       },
     });
 
@@ -142,6 +193,31 @@ export default function({ getService }: FtrProviderContext) {
           statusCode: 400,
           response: expectTypeRequired,
         },
+        filterWithNotSpaceAwareType: {
+          description: 'forbidden login and find globaltype message',
+          statusCode: 403,
+          response: createExpectRbacForbidden('globaltype'),
+        },
+        filterWithHiddenType: {
+          description: 'forbidden login and find hiddentype message',
+          statusCode: 403,
+          response: createExpectRbacForbidden('hiddentype'),
+        },
+        filterWithUnknownType: {
+          description: 'forbidden find wigwags message',
+          statusCode: 403,
+          response: createExpectRbacForbidden('wigwags'),
+        },
+        filterWithNoType: {
+          description: 'bad request, type is required',
+          statusCode: 400,
+          response: expectTypeRequired,
+        },
+        filterWithUnAllowedType: {
+          description: 'forbidden',
+          statusCode: 403,
+          response: createExpectRbacForbidden('globaltype'),
+        },
       },
     });
 
@@ -183,6 +259,31 @@ export default function({ getService }: FtrProviderContext) {
           statusCode: 400,
           response: expectTypeRequired,
         },
+        filterWithNotSpaceAwareType: {
+          description: 'only the globaltype',
+          statusCode: 200,
+          response: expectNotSpaceAwareResults,
+        },
+        filterWithHiddenType: {
+          description: 'forbidden find hiddentype message',
+          statusCode: 403,
+          response: createExpectRbacForbidden('hiddentype'),
+        },
+        filterWithUnknownType: {
+          description: 'forbidden find wigwags message',
+          statusCode: 403,
+          response: createExpectRbacForbidden('wigwags'),
+        },
+        filterWithNoType: {
+          description: 'bad request, type is required',
+          statusCode: 400,
+          response: expectTypeRequired,
+        },
+        filterWithUnAllowedType: {
+          description: 'Bad Request',
+          statusCode: 400,
+          response: expectFilterWrongTypeError,
+        },
       },
     });
 
@@ -224,6 +325,31 @@ export default function({ getService }: FtrProviderContext) {
           statusCode: 400,
           response: expectTypeRequired,
         },
+        filterWithNotSpaceAwareType: {
+          description: 'only the globaltype',
+          statusCode: 200,
+          response: expectNotSpaceAwareResults,
+        },
+        filterWithHiddenType: {
+          description: 'forbidden find hiddentype message',
+          statusCode: 403,
+          response: createExpectRbacForbidden('hiddentype'),
+        },
+        filterWithUnknownType: {
+          description: 'forbidden find wigwags message',
+          statusCode: 403,
+          response: createExpectRbacForbidden('wigwags'),
+        },
+        filterWithNoType: {
+          description: 'bad request, type is required',
+          statusCode: 400,
+          response: expectTypeRequired,
+        },
+        filterWithUnAllowedType: {
+          description: 'Bad Request',
+          statusCode: 400,
+          response: expectFilterWrongTypeError,
+        },
       },
     });
 
@@ -265,6 +391,31 @@ export default function({ getService }: FtrProviderContext) {
           statusCode: 400,
           response: expectTypeRequired,
         },
+        filterWithNotSpaceAwareType: {
+          description: 'only the globaltype',
+          statusCode: 200,
+          response: expectNotSpaceAwareResults,
+        },
+        filterWithHiddenType: {
+          description: 'forbidden find hiddentype message',
+          statusCode: 403,
+          response: createExpectRbacForbidden('hiddentype'),
+        },
+        filterWithUnknownType: {
+          description: 'forbidden find wigwags message',
+          statusCode: 403,
+          response: createExpectRbacForbidden('wigwags'),
+        },
+        filterWithNoType: {
+          description: 'bad request, type is required',
+          statusCode: 400,
+          response: expectTypeRequired,
+        },
+        filterWithUnAllowedType: {
+          description: 'Bad Request',
+          statusCode: 400,
+          response: expectFilterWrongTypeError,
+        },
       },
     });
 
@@ -306,6 +457,31 @@ export default function({ getService }: FtrProviderContext) {
           statusCode: 400,
           response: expectTypeRequired,
         },
+        filterWithNotSpaceAwareType: {
+          description: 'only the globaltype',
+          statusCode: 200,
+          response: expectNotSpaceAwareResults,
+        },
+        filterWithHiddenType: {
+          description: 'forbidden find hiddentype message',
+          statusCode: 403,
+          response: createExpectRbacForbidden('hiddentype'),
+        },
+        filterWithUnknownType: {
+          description: 'forbidden find wigwags message',
+          statusCode: 403,
+          response: createExpectRbacForbidden('wigwags'),
+        },
+        filterWithNoType: {
+          description: 'bad request, type is required',
+          statusCode: 400,
+          response: expectTypeRequired,
+        },
+        filterWithUnAllowedType: {
+          description: 'Bad Request',
+          statusCode: 400,
+          response: expectFilterWrongTypeError,
+        },
       },
     });
 
@@ -347,6 +523,31 @@ export default function({ getService }: FtrProviderContext) {
           statusCode: 400,
           response: expectTypeRequired,
         },
+        filterWithNotSpaceAwareType: {
+          description: 'only the globaltype',
+          statusCode: 403,
+          response: createExpectRbacForbidden('globaltype'),
+        },
+        filterWithHiddenType: {
+          description: 'forbidden find hiddentype message',
+          statusCode: 403,
+          response: createExpectRbacForbidden('hiddentype'),
+        },
+        filterWithUnknownType: {
+          description: 'forbidden find wigwags message',
+          statusCode: 403,
+          response: createExpectRbacForbidden('wigwags'),
+        },
+        filterWithNoType: {
+          description: 'bad request, type is required',
+          statusCode: 400,
+          response: expectTypeRequired,
+        },
+        filterWithUnAllowedType: {
+          description: 'forbidden',
+          statusCode: 403,
+          response: createExpectRbacForbidden('globaltype'),
+        },
       },
     });
 
@@ -388,6 +589,31 @@ export default function({ getService }: FtrProviderContext) {
           statusCode: 400,
           response: expectTypeRequired,
         },
+        filterWithNotSpaceAwareType: {
+          description: 'only the globaltype',
+          statusCode: 403,
+          response: createExpectRbacForbidden('globaltype'),
+        },
+        filterWithHiddenType: {
+          description: 'forbidden find hiddentype message',
+          statusCode: 403,
+          response: createExpectRbacForbidden('hiddentype'),
+        },
+        filterWithUnknownType: {
+          description: 'forbidden find wigwags message',
+          statusCode: 403,
+          response: createExpectRbacForbidden('wigwags'),
+        },
+        filterWithNoType: {
+          description: 'bad request, type is required',
+          statusCode: 400,
+          response: expectTypeRequired,
+        },
+        filterWithUnAllowedType: {
+          description: 'forbidden',
+          statusCode: 403,
+          response: createExpectRbacForbidden('globaltype'),
+        },
       },
     });
 
@@ -429,6 +655,31 @@ export default function({ getService }: FtrProviderContext) {
           statusCode: 400,
           response: expectTypeRequired,
         },
+        filterWithNotSpaceAwareType: {
+          description: 'only the globaltype',
+          statusCode: 403,
+          response: createExpectRbacForbidden('globaltype'),
+        },
+        filterWithHiddenType: {
+          description: 'forbidden find hiddentype message',
+          statusCode: 403,
+          response: createExpectRbacForbidden('hiddentype'),
+        },
+        filterWithUnknownType: {
+          description: 'forbidden find wigwags message',
+          statusCode: 403,
+          response: createExpectRbacForbidden('wigwags'),
+        },
+        filterWithNoType: {
+          description: 'bad request, type is required',
+          statusCode: 400,
+          response: expectTypeRequired,
+        },
+        filterWithUnAllowedType: {
+          description: 'forbidden',
+          statusCode: 403,
+          response: createExpectRbacForbidden('globaltype'),
+        },
       },
     });
 
@@ -470,6 +721,31 @@ export default function({ getService }: FtrProviderContext) {
           statusCode: 400,
           response: expectTypeRequired,
         },
+        filterWithNotSpaceAwareType: {
+          description: 'only the globaltype',
+          statusCode: 403,
+          response: createExpectRbacForbidden('globaltype'),
+        },
+        filterWithHiddenType: {
+          description: 'forbidden find hiddentype message',
+          statusCode: 403,
+          response: createExpectRbacForbidden('hiddentype'),
+        },
+        filterWithUnknownType: {
+          description: 'forbidden find wigwags message',
+          statusCode: 403,
+          response: createExpectRbacForbidden('wigwags'),
+        },
+        filterWithNoType: {
+          description: 'bad request, type is required',
+          statusCode: 400,
+          response: expectTypeRequired,
+        },
+        filterWithUnAllowedType: {
+          description: 'forbidden',
+          statusCode: 403,
+          response: createExpectRbacForbidden('globaltype'),
+        },
       },
     });
   });
diff --git a/x-pack/test/saved_object_api_integration/spaces_only/apis/find.ts b/x-pack/test/saved_object_api_integration/spaces_only/apis/find.ts
index 69a2690c619788..a07d3edf834e9d 100644
--- a/x-pack/test/saved_object_api_integration/spaces_only/apis/find.ts
+++ b/x-pack/test/saved_object_api_integration/spaces_only/apis/find.ts
@@ -15,6 +15,7 @@ export default function({ getService }: FtrProviderContext) {
   const {
     createExpectEmpty,
     createExpectVisualizationResults,
+    expectFilterWrongTypeError,
     expectNotSpaceAwareResults,
     expectTypeRequired,
     findTest,
@@ -59,6 +60,31 @@ export default function({ getService }: FtrProviderContext) {
           statusCode: 400,
           response: expectTypeRequired,
         },
+        filterWithNotSpaceAwareType: {
+          description: 'only the visualization',
+          statusCode: 200,
+          response: expectNotSpaceAwareResults,
+        },
+        filterWithHiddenType: {
+          description: 'empty result',
+          statusCode: 200,
+          response: createExpectEmpty(1, 20, 0),
+        },
+        filterWithUnknownType: {
+          description: 'empty result',
+          statusCode: 200,
+          response: createExpectEmpty(1, 20, 0),
+        },
+        filterWithNoType: {
+          description: 'bad request, type is required',
+          statusCode: 400,
+          response: expectTypeRequired,
+        },
+        filterWithUnAllowedType: {
+          description: 'Bad Request',
+          statusCode: 400,
+          response: expectFilterWrongTypeError,
+        },
       },
     });
 
@@ -100,6 +126,31 @@ export default function({ getService }: FtrProviderContext) {
           statusCode: 400,
           response: expectTypeRequired,
         },
+        filterWithNotSpaceAwareType: {
+          description: 'only the visualization',
+          statusCode: 200,
+          response: expectNotSpaceAwareResults,
+        },
+        filterWithHiddenType: {
+          description: 'empty result',
+          statusCode: 200,
+          response: createExpectEmpty(1, 20, 0),
+        },
+        filterWithUnknownType: {
+          description: 'empty result',
+          statusCode: 200,
+          response: createExpectEmpty(1, 20, 0),
+        },
+        filterWithNoType: {
+          description: 'bad request, type is required',
+          statusCode: 400,
+          response: expectTypeRequired,
+        },
+        filterWithUnAllowedType: {
+          description: 'Bad Request',
+          statusCode: 400,
+          response: expectFilterWrongTypeError,
+        },
       },
     });
   });
diff --git a/x-pack/test/spaces_api_integration/common/suites/select.ts b/x-pack/test/spaces_api_integration/common/suites/select.ts
deleted file mode 100644
index 07471fe4e324f0..00000000000000
--- a/x-pack/test/spaces_api_integration/common/suites/select.ts
+++ /dev/null
@@ -1,125 +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 { SuperTest } from 'supertest';
-import { DEFAULT_SPACE_ID } from '../../../../legacy/plugins/spaces/common/constants';
-import { getUrlPrefix } from '../lib/space_test_utils';
-import { DescribeFn, TestDefinitionAuthentication } from '../lib/types';
-
-interface SelectTest {
-  statusCode: number;
-  response: (resp: { [key: string]: any }) => void;
-}
-
-interface SelectTests {
-  default: SelectTest;
-}
-
-interface SelectTestDefinition {
-  user?: TestDefinitionAuthentication;
-  currentSpaceId: string;
-  selectSpaceId: string;
-  tests: SelectTests;
-}
-
-const nonExistantSpaceId = 'not-a-space';
-
-export function selectTestSuiteFactory(esArchiver: any, supertest: SuperTest<any>) {
-  const createExpectEmptyResult = () => (resp: { [key: string]: any }) => {
-    expect(resp.body).to.eql('');
-  };
-
-  const createExpectNotFoundResult = () => (resp: { [key: string]: any }) => {
-    expect(resp.body).to.eql({
-      error: 'Not Found',
-      message: 'Not Found',
-      statusCode: 404,
-    });
-  };
-
-  const createExpectRbacForbidden = (spaceId: any) => (resp: { [key: string]: any }) => {
-    expect(resp.body).to.eql({
-      statusCode: 403,
-      error: 'Forbidden',
-      message: `Unauthorized to get ${spaceId} space`,
-    });
-  };
-
-  const createExpectResults = (spaceId: string) => (resp: { [key: string]: any }) => {
-    const allSpaces = [
-      {
-        id: 'default',
-        name: 'Default Space',
-        description: 'This is the default space',
-        disabledFeatures: [],
-        _reserved: true,
-      },
-      {
-        id: 'space_1',
-        name: 'Space 1',
-        description: 'This is the first test space',
-        disabledFeatures: [],
-      },
-      {
-        id: 'space_2',
-        name: 'Space 2',
-        description: 'This is the second test space',
-        disabledFeatures: [],
-      },
-    ];
-    expect(resp.body).to.eql(allSpaces.find(space => space.id === spaceId));
-  };
-
-  const createExpectSpaceResponse = (spaceId: string) => (resp: { [key: string]: any }) => {
-    if (spaceId === DEFAULT_SPACE_ID) {
-      expectDefaultSpaceResponse(resp);
-    } else {
-      expect(resp.body).to.eql({
-        location: `/s/${spaceId}/app/kibana`,
-      });
-    }
-  };
-
-  const expectDefaultSpaceResponse = (resp: { [key: string]: any }) => {
-    expect(resp.body).to.eql({
-      location: `/app/kibana`,
-    });
-  };
-
-  const makeSelectTest = (describeFn: DescribeFn) => (
-    description: string,
-    { user = {}, currentSpaceId, selectSpaceId, tests }: SelectTestDefinition
-  ) => {
-    describeFn(description, () => {
-      before(() => esArchiver.load('saved_objects/spaces'));
-      after(() => esArchiver.unload('saved_objects/spaces'));
-
-      it(`should return ${tests.default.statusCode}`, async () => {
-        return supertest
-          .post(`${getUrlPrefix(currentSpaceId)}/api/spaces/v1/space/${selectSpaceId}/select`)
-          .auth(user.username, user.password)
-          .expect(tests.default.statusCode)
-          .then(tests.default.response);
-      });
-    });
-  };
-
-  const selectTest = makeSelectTest(describe);
-  // @ts-ignore
-  selectTest.only = makeSelectTest(describe.only);
-
-  return {
-    createExpectEmptyResult,
-    createExpectNotFoundResult,
-    createExpectRbacForbidden,
-    createExpectResults,
-    createExpectSpaceResponse,
-    expectDefaultSpaceResponse,
-    nonExistantSpaceId,
-    selectTest,
-  };
-}
diff --git a/x-pack/test/spaces_api_integration/security_and_spaces/apis/index.ts b/x-pack/test/spaces_api_integration/security_and_spaces/apis/index.ts
index 4493a5332b62c1..300949f41f0369 100644
--- a/x-pack/test/spaces_api_integration/security_and_spaces/apis/index.ts
+++ b/x-pack/test/spaces_api_integration/security_and_spaces/apis/index.ts
@@ -25,7 +25,6 @@ export default function({ loadTestFile, getService }: TestInvoker) {
     loadTestFile(require.resolve('./delete'));
     loadTestFile(require.resolve('./get_all'));
     loadTestFile(require.resolve('./get'));
-    loadTestFile(require.resolve('./select'));
     loadTestFile(require.resolve('./update'));
   });
 }
diff --git a/x-pack/test/spaces_api_integration/security_and_spaces/apis/select.ts b/x-pack/test/spaces_api_integration/security_and_spaces/apis/select.ts
deleted file mode 100644
index a905fe623a7c1d..00000000000000
--- a/x-pack/test/spaces_api_integration/security_and_spaces/apis/select.ts
+++ /dev/null
@@ -1,341 +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 { AUTHENTICATION } from '../../common/lib/authentication';
-import { SPACES } from '../../common/lib/spaces';
-import { TestInvoker } from '../../common/lib/types';
-import { selectTestSuiteFactory } from '../../common/suites/select';
-
-// eslint-disable-next-line import/no-default-export
-export default function selectSpaceTestSuite({ getService }: TestInvoker) {
-  const supertestWithoutAuth = getService('supertestWithoutAuth');
-  const esArchiver = getService('esArchiver');
-
-  const {
-    selectTest,
-    nonExistantSpaceId,
-    createExpectSpaceResponse,
-    createExpectRbacForbidden,
-    createExpectNotFoundResult,
-  } = selectTestSuiteFactory(esArchiver, supertestWithoutAuth);
-
-  describe('select', () => {
-    // Tests with users that have privileges globally in Kibana
-    [
-      {
-        currentSpaceId: SPACES.DEFAULT.spaceId,
-        selectSpaceId: SPACES.SPACE_1.spaceId,
-        users: {
-          noAccess: AUTHENTICATION.NOT_A_KIBANA_USER,
-          superuser: AUTHENTICATION.SUPERUSER,
-          allGlobally: AUTHENTICATION.KIBANA_RBAC_USER,
-          readGlobally: AUTHENTICATION.KIBANA_RBAC_DASHBOARD_ONLY_USER,
-          legacyAll: AUTHENTICATION.KIBANA_LEGACY_USER,
-          dualAll: AUTHENTICATION.KIBANA_DUAL_PRIVILEGES_USER,
-          dualRead: AUTHENTICATION.KIBANA_DUAL_PRIVILEGES_DASHBOARD_ONLY_USER,
-        },
-      },
-      {
-        currentSpaceId: SPACES.SPACE_1.spaceId,
-        selectSpaceId: SPACES.DEFAULT.spaceId,
-        users: {
-          noAccess: AUTHENTICATION.NOT_A_KIBANA_USER,
-          superuser: AUTHENTICATION.SUPERUSER,
-          allGlobally: AUTHENTICATION.KIBANA_RBAC_USER,
-          readGlobally: AUTHENTICATION.KIBANA_RBAC_DASHBOARD_ONLY_USER,
-          legacyAll: AUTHENTICATION.KIBANA_LEGACY_USER,
-          dualAll: AUTHENTICATION.KIBANA_DUAL_PRIVILEGES_USER,
-          dualRead: AUTHENTICATION.KIBANA_DUAL_PRIVILEGES_DASHBOARD_ONLY_USER,
-        },
-      },
-    ].forEach(scenario => {
-      selectTest(
-        `user with no access selects ${scenario.selectSpaceId} space from the ${scenario.currentSpaceId} space`,
-        {
-          currentSpaceId: scenario.currentSpaceId,
-          selectSpaceId: scenario.selectSpaceId,
-          user: scenario.users.noAccess,
-          tests: {
-            default: {
-              statusCode: 403,
-              response: createExpectRbacForbidden(scenario.selectSpaceId),
-            },
-          },
-        }
-      );
-
-      selectTest(
-        `superuser selects ${scenario.selectSpaceId} space from the ${scenario.currentSpaceId} space`,
-        {
-          currentSpaceId: scenario.currentSpaceId,
-          selectSpaceId: scenario.selectSpaceId,
-          user: scenario.users.superuser,
-          tests: {
-            default: {
-              statusCode: 200,
-              response: createExpectSpaceResponse(scenario.selectSpaceId),
-            },
-          },
-        }
-      );
-
-      selectTest(
-        `rbac user with all globally selects ${scenario.selectSpaceId} space from the ${scenario.currentSpaceId} space`,
-        {
-          currentSpaceId: scenario.currentSpaceId,
-          selectSpaceId: scenario.selectSpaceId,
-          user: scenario.users.allGlobally,
-          tests: {
-            default: {
-              statusCode: 200,
-              response: createExpectSpaceResponse(scenario.selectSpaceId),
-            },
-          },
-        }
-      );
-
-      selectTest(
-        `dual-privileges user selects ${scenario.selectSpaceId} space from the ${scenario.currentSpaceId}`,
-        {
-          currentSpaceId: scenario.currentSpaceId,
-          selectSpaceId: scenario.selectSpaceId,
-          user: scenario.users.dualAll,
-          tests: {
-            default: {
-              statusCode: 200,
-              response: createExpectSpaceResponse(scenario.selectSpaceId),
-            },
-          },
-        }
-      );
-
-      selectTest(
-        `legacy user selects ${scenario.selectSpaceId} space from the ${scenario.currentSpaceId}`,
-        {
-          currentSpaceId: scenario.currentSpaceId,
-          selectSpaceId: scenario.selectSpaceId,
-          user: scenario.users.legacyAll,
-          tests: {
-            default: {
-              statusCode: 403,
-              response: createExpectRbacForbidden(scenario.selectSpaceId),
-            },
-          },
-        }
-      );
-
-      selectTest(
-        `user with read globally selects ${scenario.selectSpaceId} space from the
-        ${scenario.currentSpaceId} space`,
-        {
-          currentSpaceId: scenario.currentSpaceId,
-          selectSpaceId: scenario.selectSpaceId,
-          user: scenario.users.readGlobally,
-          tests: {
-            default: {
-              statusCode: 200,
-              response: createExpectSpaceResponse(scenario.selectSpaceId),
-            },
-          },
-        }
-      );
-
-      selectTest(
-        `dual-privileges readonly user selects ${scenario.selectSpaceId} space from
-        the ${scenario.currentSpaceId}`,
-        {
-          currentSpaceId: scenario.currentSpaceId,
-          selectSpaceId: scenario.selectSpaceId,
-          user: scenario.users.dualRead,
-          tests: {
-            default: {
-              statusCode: 200,
-              response: createExpectSpaceResponse(scenario.selectSpaceId),
-            },
-          },
-        }
-      );
-    });
-
-    // Select the same space that you're currently in with users which have space specific privileges.
-    // Our intent is to ensure that you have privileges at the space that you're selecting.
-    [
-      {
-        spaceId: SPACES.DEFAULT.spaceId,
-        users: {
-          allAtSpace: AUTHENTICATION.KIBANA_RBAC_DEFAULT_SPACE_ALL_USER,
-          readAtSpace: AUTHENTICATION.KIBANA_RBAC_DEFAULT_SPACE_READ_USER,
-          allAtOtherSpace: AUTHENTICATION.KIBANA_RBAC_SPACE_1_ALL_USER,
-        },
-      },
-      {
-        spaceId: SPACES.SPACE_1.spaceId,
-        users: {
-          allAtSpace: AUTHENTICATION.KIBANA_RBAC_SPACE_1_ALL_USER,
-          readAtSpace: AUTHENTICATION.KIBANA_RBAC_SPACE_1_READ_USER,
-          allAtOtherSpace: AUTHENTICATION.KIBANA_RBAC_DEFAULT_SPACE_ALL_USER,
-        },
-      },
-    ].forEach(scenario => {
-      selectTest(
-        `rbac user with all at space can select ${scenario.spaceId}
-        from the same space`,
-        {
-          currentSpaceId: scenario.spaceId,
-          selectSpaceId: scenario.spaceId,
-          user: scenario.users.allAtSpace,
-          tests: {
-            default: {
-              statusCode: 200,
-              response: createExpectSpaceResponse(scenario.spaceId),
-            },
-          },
-        }
-      );
-
-      selectTest(
-        `rbac user with read at space can select ${scenario.spaceId}
-        from the same space`,
-        {
-          currentSpaceId: scenario.spaceId,
-          selectSpaceId: scenario.spaceId,
-          user: scenario.users.readAtSpace,
-          tests: {
-            default: {
-              statusCode: 200,
-              response: createExpectSpaceResponse(scenario.spaceId),
-            },
-          },
-        }
-      );
-
-      selectTest(
-        `rbac user with all at other space cannot select ${scenario.spaceId}
-        from the same space`,
-        {
-          currentSpaceId: scenario.spaceId,
-          selectSpaceId: scenario.spaceId,
-          user: scenario.users.allAtOtherSpace,
-          tests: {
-            default: {
-              statusCode: 403,
-              response: createExpectRbacForbidden(scenario.spaceId),
-            },
-          },
-        }
-      );
-    });
-
-    // Select a different space with users that only have privileges at certain spaces. Our intent
-    // is to ensure that a user can select a space based on their privileges at the space that they're selecting
-    // not at the space that they're currently in.
-    [
-      {
-        currentSpaceId: SPACES.SPACE_2.spaceId,
-        selectSpaceId: SPACES.SPACE_1.spaceId,
-        users: {
-          userWithAllAtSpace: AUTHENTICATION.KIBANA_RBAC_SPACE_1_ALL_USER,
-          userWithAllAtOtherSpace: AUTHENTICATION.KIBANA_RBAC_SPACE_2_ALL_USER,
-          userWithAllAtBothSpaces: AUTHENTICATION.KIBANA_RBAC_SPACE_1_2_ALL_USER,
-        },
-      },
-    ].forEach(scenario => {
-      selectTest(
-        `rbac user with all at ${scenario.selectSpaceId} can select ${scenario.selectSpaceId}
-        from ${scenario.currentSpaceId}`,
-        {
-          currentSpaceId: scenario.currentSpaceId,
-          selectSpaceId: scenario.selectSpaceId,
-          user: scenario.users.userWithAllAtSpace,
-          tests: {
-            default: {
-              statusCode: 200,
-              response: createExpectSpaceResponse(scenario.selectSpaceId),
-            },
-          },
-        }
-      );
-
-      selectTest(
-        `rbac user with all at both spaces can select ${scenario.selectSpaceId}
-        from ${scenario.currentSpaceId}`,
-        {
-          currentSpaceId: scenario.currentSpaceId,
-          selectSpaceId: scenario.selectSpaceId,
-          user: scenario.users.userWithAllAtBothSpaces,
-          tests: {
-            default: {
-              statusCode: 200,
-              response: createExpectSpaceResponse(scenario.selectSpaceId),
-            },
-          },
-        }
-      );
-
-      selectTest(
-        `rbac user with all at ${scenario.currentSpaceId} space cannot select ${scenario.selectSpaceId}
-        from ${scenario.currentSpaceId}`,
-        {
-          currentSpaceId: scenario.currentSpaceId,
-          selectSpaceId: scenario.selectSpaceId,
-          user: scenario.users.userWithAllAtOtherSpace,
-          tests: {
-            default: {
-              statusCode: 403,
-              response: createExpectRbacForbidden(scenario.selectSpaceId),
-            },
-          },
-        }
-      );
-    });
-
-    // Select non-existent spaces and ensure we get a 404 or a 403
-    describe('non-existent space', () => {
-      [
-        {
-          currentSpaceId: SPACES.DEFAULT.spaceId,
-          selectSpaceId: nonExistantSpaceId,
-          users: {
-            userWithAllGlobally: AUTHENTICATION.KIBANA_RBAC_USER,
-            userWithAllAtSpace: AUTHENTICATION.KIBANA_RBAC_DEFAULT_SPACE_ALL_USER,
-          },
-        },
-        {
-          currentSpaceId: SPACES.SPACE_1.spaceId,
-          selectSpaceId: nonExistantSpaceId,
-          users: {
-            userWithAllGlobally: AUTHENTICATION.KIBANA_RBAC_USER,
-            userWithAllAtSpace: AUTHENTICATION.KIBANA_RBAC_SPACE_1_ALL_USER,
-          },
-        },
-      ].forEach(scenario => {
-        selectTest(`rbac user with all globally cannot access non-existent space`, {
-          currentSpaceId: scenario.currentSpaceId,
-          selectSpaceId: scenario.selectSpaceId,
-          user: scenario.users.userWithAllGlobally,
-          tests: {
-            default: {
-              statusCode: 404,
-              response: createExpectNotFoundResult(),
-            },
-          },
-        });
-
-        selectTest(`rbac user with all at space cannot access non-existent space`, {
-          currentSpaceId: scenario.currentSpaceId,
-          selectSpaceId: scenario.selectSpaceId,
-          user: scenario.users.userWithAllAtSpace,
-          tests: {
-            default: {
-              statusCode: 403,
-              response: createExpectRbacForbidden(scenario.selectSpaceId),
-            },
-          },
-        });
-      });
-    });
-  });
-}
diff --git a/x-pack/test/spaces_api_integration/spaces_only/apis/index.ts b/x-pack/test/spaces_api_integration/spaces_only/apis/index.ts
index 764d1cfae22b61..1182f6bdabcff4 100644
--- a/x-pack/test/spaces_api_integration/spaces_only/apis/index.ts
+++ b/x-pack/test/spaces_api_integration/spaces_only/apis/index.ts
@@ -17,7 +17,6 @@ export default function spacesOnlyTestSuite({ loadTestFile }: TestInvoker) {
     loadTestFile(require.resolve('./delete'));
     loadTestFile(require.resolve('./get_all'));
     loadTestFile(require.resolve('./get'));
-    loadTestFile(require.resolve('./select'));
     loadTestFile(require.resolve('./update'));
   });
 }
diff --git a/x-pack/test/spaces_api_integration/spaces_only/apis/select.ts b/x-pack/test/spaces_api_integration/spaces_only/apis/select.ts
deleted file mode 100644
index 82a60f7d455558..00000000000000
--- a/x-pack/test/spaces_api_integration/spaces_only/apis/select.ts
+++ /dev/null
@@ -1,74 +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 { SPACES } from '../../common/lib/spaces';
-import { TestInvoker } from '../../common/lib/types';
-import { selectTestSuiteFactory } from '../../common/suites/select';
-
-// eslint-disable-next-line import/no-default-export
-export default function selectSpaceTestSuite({ getService }: TestInvoker) {
-  const supertestWithoutAuth = getService('supertestWithoutAuth');
-  const esArchiver = getService('esArchiver');
-
-  const {
-    selectTest,
-    createExpectSpaceResponse,
-    createExpectNotFoundResult,
-    nonExistantSpaceId,
-  } = selectTestSuiteFactory(esArchiver, supertestWithoutAuth);
-
-  describe('select', () => {
-    [
-      {
-        spaceId: SPACES.DEFAULT.spaceId,
-        otherSpaceId: SPACES.SPACE_1.spaceId,
-      },
-      {
-        spaceId: SPACES.SPACE_1.spaceId,
-        otherSpaceId: SPACES.DEFAULT.spaceId,
-      },
-      {
-        spaceId: SPACES.SPACE_1.spaceId,
-        otherSpaceId: SPACES.SPACE_2.spaceId,
-      },
-    ].forEach(scenario => {
-      selectTest(`can select ${scenario.otherSpaceId} from ${scenario.spaceId}`, {
-        currentSpaceId: scenario.spaceId,
-        selectSpaceId: scenario.otherSpaceId,
-        tests: {
-          default: {
-            statusCode: 200,
-            response: createExpectSpaceResponse(scenario.otherSpaceId),
-          },
-        },
-      });
-    });
-
-    describe('non-existant space', () => {
-      [
-        {
-          spaceId: SPACES.DEFAULT.spaceId,
-          otherSpaceId: nonExistantSpaceId,
-        },
-        {
-          spaceId: SPACES.SPACE_1.spaceId,
-          otherSpaceId: nonExistantSpaceId,
-        },
-      ].forEach(scenario => {
-        selectTest(`cannot select non-existant space from ${scenario.spaceId}`, {
-          currentSpaceId: scenario.spaceId,
-          selectSpaceId: scenario.otherSpaceId,
-          tests: {
-            default: {
-              statusCode: 404,
-              response: createExpectNotFoundResult(),
-            },
-          },
-        });
-      });
-    });
-  });
-}
diff --git a/x-pack/test_utils/testbed/types.ts b/x-pack/test_utils/testbed/types.ts
index 31140c21cb5309..b9ced88f3774c3 100644
--- a/x-pack/test_utils/testbed/types.ts
+++ b/x-pack/test_utils/testbed/types.ts
@@ -85,7 +85,7 @@ export interface TestBed<T = string> {
      *
      * @param switchTestSubject The test subject of the EuiSwitch (can be a nested path. e.g. "myForm.mySwitch").
      */
-    toggleEuiSwitch: (switchTestSubject: T) => void;
+    toggleEuiSwitch: (switchTestSubject: T, isChecked?: boolean) => void;
     /**
      * The EUI ComboBox is a special input as it needs the ENTER key to be pressed
      * in order to register the value set. This helpers automatically does that.
diff --git a/x-pack/typings/@elastic/eui/index.d.ts b/x-pack/typings/@elastic/eui/index.d.ts
index 6e1f41ec52605a..93d90ed43ff4bd 100644
--- a/x-pack/typings/@elastic/eui/index.d.ts
+++ b/x-pack/typings/@elastic/eui/index.d.ts
@@ -10,7 +10,6 @@ declare module '@elastic/eui' {
   export const EuiDescribedFormGroup: React.SFC<any>;
   export const EuiCodeEditor: React.SFC<any>;
   export const Query: any;
-  export const EuiCard: any;
 }
 
 declare module '@elastic/eui/lib/services' {
diff --git a/yarn.lock b/yarn.lock
index 47695729290731..b96aa7f3b32d5f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -26,7 +26,7 @@
   dependencies:
     "@babel/highlight" "^7.0.0"
 
-"@babel/core@7.5.5", "@babel/core@^7.0.0", "@babel/core@^7.0.1", "@babel/core@^7.1.0", "@babel/core@^7.4.3", "@babel/core@^7.5.5":
+"@babel/core@7.5.5", "@babel/core@^7.0.0", "@babel/core@^7.1.0", "@babel/core@^7.4.3", "@babel/core@^7.5.5":
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.5.5.tgz#17b2686ef0d6bc58f963dddd68ab669755582c30"
   integrity sha512-i4qoSr2KTtce0DmkuuQBV4AuQgGPUcPXMr9L5MyYAtk06z068lQ10a4O009fe5OB/DfNV+h+qqT7ddNV8UnRjg==
@@ -46,6 +46,26 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
+"@babel/core@^7.0.1":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.6.0.tgz#9b00f73554edd67bebc86df8303ef678be3d7b48"
+  integrity sha512-FuRhDRtsd6IptKpHXAa+4WPZYY2ZzgowkbLBecEDDSje1X/apG7jQM33or3NdOmjXBKWGOg4JmSiRfUfuTtHXw==
+  dependencies:
+    "@babel/code-frame" "^7.5.5"
+    "@babel/generator" "^7.6.0"
+    "@babel/helpers" "^7.6.0"
+    "@babel/parser" "^7.6.0"
+    "@babel/template" "^7.6.0"
+    "@babel/traverse" "^7.6.0"
+    "@babel/types" "^7.6.0"
+    convert-source-map "^1.1.0"
+    debug "^4.1.0"
+    json5 "^2.1.0"
+    lodash "^4.17.13"
+    resolve "^1.3.2"
+    semver "^5.4.1"
+    source-map "^0.5.0"
+
 "@babel/generator@^7.0.0", "@babel/generator@^7.4.0", "@babel/generator@^7.5.5":
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.5.5.tgz#873a7f936a3c89491b43536d12245b626664e3cf"
@@ -57,7 +77,7 @@
     source-map "^0.5.0"
     trim-right "^1.0.1"
 
-"@babel/generator@^7.6.2":
+"@babel/generator@^7.6.0", "@babel/generator@^7.6.2":
   version "7.6.2"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.6.2.tgz#dac8a3c2df118334c2a29ff3446da1636a8f8c03"
   integrity sha512-j8iHaIW4gGPnViaIHI7e9t/Hl8qLjERI6DcV9kEpAIDJsAOrcnXqRS7t+QbhL76pwbtqP+QCQLL0z1CyVmtjjQ==
@@ -251,6 +271,15 @@
     "@babel/traverse" "^7.5.5"
     "@babel/types" "^7.5.5"
 
+"@babel/helpers@^7.6.0":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.6.0.tgz#21961d16c6a3c3ab597325c34c465c0887d31c6e"
+  integrity sha512-W9kao7OBleOjfXtFGgArGRX6eCP0UEcA2ZWEWNkJdRZnHhW4eEbeswbG3EwaRsnQUAEGWYgMq1HsIXuNNNy2eQ==
+  dependencies:
+    "@babel/template" "^7.6.0"
+    "@babel/traverse" "^7.6.0"
+    "@babel/types" "^7.6.0"
+
 "@babel/highlight@^7.0.0":
   version "7.5.0"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.5.0.tgz#56d11312bd9248fa619591d02472be6e8cb32540"
@@ -265,16 +294,16 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.5.5.tgz#02f077ac8817d3df4a832ef59de67565e71cca4b"
   integrity sha512-E5BN68cqR7dhKan1SfqgPGhQ178bkVKpXTPEXnFJBrEt8/DKRZlybmy+IgYLTeN7tp1R5Ccmbm2rBk17sHYU3g==
 
-"@babel/parser@^7.2.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.6.0.tgz#3e05d0647432a8326cb28d0de03895ae5a57f39b"
-  integrity sha512-+o2q111WEx4srBs7L9eJmcwi655eD8sXniLqMB93TBK9GrNzGrxDWSjiqz2hLU0Ha8MTXFIP0yd9fNdP+m43ZQ==
-
-"@babel/parser@^7.6.2":
+"@babel/parser@^7.2.0", "@babel/parser@^7.6.2":
   version "7.6.2"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.6.2.tgz#205e9c95e16ba3b8b96090677a67c9d6075b70a1"
   integrity sha512-mdFqWrSPCmikBoaBYMuBulzTIKuXVPtEISFbRRVNwMWpCms/hmE2kRq0bblUHaNRKrjRlmVbx1sDHmjmRgD2Xg==
 
+"@babel/parser@^7.6.0":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.6.0.tgz#3e05d0647432a8326cb28d0de03895ae5a57f39b"
+  integrity sha512-+o2q111WEx4srBs7L9eJmcwi655eD8sXniLqMB93TBK9GrNzGrxDWSjiqz2hLU0Ha8MTXFIP0yd9fNdP+m43ZQ==
+
 "@babel/plugin-proposal-async-generator-functions@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.2.0.tgz#b289b306669dce4ad20b0252889a15768c9d417e"
@@ -436,6 +465,14 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     lodash "^4.17.13"
 
+"@babel/plugin-transform-block-scoping@^7.6.0":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.6.0.tgz#c49e21228c4bbd4068a35667e6d951c75439b1dc"
+  integrity sha512-tIt4E23+kw6TgL/edACZwP1OUKrjOTyMrFMLoT5IOFrfMRabCgekjqFd5o6PaAMildBu46oFkekIdMuGkkPEpA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    lodash "^4.17.13"
+
 "@babel/plugin-transform-classes@^7.5.5":
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.5.5.tgz#d094299d9bd680a14a2a0edae38305ad60fb4de9"
@@ -464,6 +501,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-destructuring@^7.6.0":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.6.0.tgz#44bbe08b57f4480094d57d9ffbcd96d309075ba6"
+  integrity sha512-2bGIS5P1v4+sWTCnKNDZDxbGvEqi0ijeqM/YqHtVGrvG2y0ySgnEEhXErvE9dA0bnIzY9bIzdFK0jFA46ASIIQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
 "@babel/plugin-transform-dotall-regex@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.4.4.tgz#361a148bc951444312c69446d76ed1ea8e4450c3"
@@ -544,6 +588,16 @@
     "@babel/helper-simple-access" "^7.1.0"
     babel-plugin-dynamic-import-node "^2.3.0"
 
+"@babel/plugin-transform-modules-commonjs@^7.6.0":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.6.0.tgz#39dfe957de4420445f1fcf88b68a2e4aa4515486"
+  integrity sha512-Ma93Ix95PNSEngqomy5LSBMAQvYKVe3dy+JlVJSHEXZR5ASL9lQBedMiCyVtmTLraIDVRE3ZjTZvmXXD2Ozw3g==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.4.4"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-simple-access" "^7.1.0"
+    babel-plugin-dynamic-import-node "^2.3.0"
+
 "@babel/plugin-transform-modules-systemjs@^7.5.0":
   version "7.5.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.5.0.tgz#e75266a13ef94202db2a0620977756f51d52d249"
@@ -568,6 +622,13 @@
   dependencies:
     regexp-tree "^0.1.6"
 
+"@babel/plugin-transform-named-capturing-groups-regex@^7.6.0":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.6.0.tgz#1e6e663097813bb4f53d42df0750cf28ad3bb3f1"
+  integrity sha512-jem7uytlmrRl3iCAuQyw8BpB4c4LWvSpvIeXKpMb+7j84lkx4m4mYr5ErAcmN5KM7B6BqrAvRGjBIbbzqCczew==
+  dependencies:
+    regexp-tree "^0.1.13"
+
 "@babel/plugin-transform-new-target@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.4.4.tgz#18d120438b0cc9ee95a47f2c72bc9768fbed60a5"
@@ -718,7 +779,7 @@
     "@babel/helper-regex" "^7.4.4"
     regexpu-core "^4.5.4"
 
-"@babel/preset-env@7.5.5", "@babel/preset-env@^7.0.0", "@babel/preset-env@^7.4.3", "@babel/preset-env@^7.4.5", "@babel/preset-env@^7.5.5":
+"@babel/preset-env@7.5.5", "@babel/preset-env@^7.4.3", "@babel/preset-env@^7.4.5", "@babel/preset-env@^7.5.5":
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.5.5.tgz#bc470b53acaa48df4b8db24a570d6da1fef53c9a"
   integrity sha512-GMZQka/+INwsMz1A5UEql8tG015h5j/qjptpKY2gJ7giy8ohzU710YciJB5rcKsWGWHiW3RUnHib0E5/m3Tp3A==
@@ -774,6 +835,62 @@
     js-levenshtein "^1.1.3"
     semver "^5.5.0"
 
+"@babel/preset-env@^7.0.0":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.6.0.tgz#aae4141c506100bb2bfaa4ac2a5c12b395619e50"
+  integrity sha512-1efzxFv/TcPsNXlRhMzRnkBFMeIqBBgzwmZwlFDw5Ubj0AGLeufxugirwZmkkX/ayi3owsSqoQ4fw8LkfK9SYg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-proposal-async-generator-functions" "^7.2.0"
+    "@babel/plugin-proposal-dynamic-import" "^7.5.0"
+    "@babel/plugin-proposal-json-strings" "^7.2.0"
+    "@babel/plugin-proposal-object-rest-spread" "^7.5.5"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.2.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
+    "@babel/plugin-syntax-async-generators" "^7.2.0"
+    "@babel/plugin-syntax-dynamic-import" "^7.2.0"
+    "@babel/plugin-syntax-json-strings" "^7.2.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.2.0"
+    "@babel/plugin-transform-arrow-functions" "^7.2.0"
+    "@babel/plugin-transform-async-to-generator" "^7.5.0"
+    "@babel/plugin-transform-block-scoped-functions" "^7.2.0"
+    "@babel/plugin-transform-block-scoping" "^7.6.0"
+    "@babel/plugin-transform-classes" "^7.5.5"
+    "@babel/plugin-transform-computed-properties" "^7.2.0"
+    "@babel/plugin-transform-destructuring" "^7.6.0"
+    "@babel/plugin-transform-dotall-regex" "^7.4.4"
+    "@babel/plugin-transform-duplicate-keys" "^7.5.0"
+    "@babel/plugin-transform-exponentiation-operator" "^7.2.0"
+    "@babel/plugin-transform-for-of" "^7.4.4"
+    "@babel/plugin-transform-function-name" "^7.4.4"
+    "@babel/plugin-transform-literals" "^7.2.0"
+    "@babel/plugin-transform-member-expression-literals" "^7.2.0"
+    "@babel/plugin-transform-modules-amd" "^7.5.0"
+    "@babel/plugin-transform-modules-commonjs" "^7.6.0"
+    "@babel/plugin-transform-modules-systemjs" "^7.5.0"
+    "@babel/plugin-transform-modules-umd" "^7.2.0"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.6.0"
+    "@babel/plugin-transform-new-target" "^7.4.4"
+    "@babel/plugin-transform-object-super" "^7.5.5"
+    "@babel/plugin-transform-parameters" "^7.4.4"
+    "@babel/plugin-transform-property-literals" "^7.2.0"
+    "@babel/plugin-transform-regenerator" "^7.4.5"
+    "@babel/plugin-transform-reserved-words" "^7.2.0"
+    "@babel/plugin-transform-shorthand-properties" "^7.2.0"
+    "@babel/plugin-transform-spread" "^7.2.0"
+    "@babel/plugin-transform-sticky-regex" "^7.2.0"
+    "@babel/plugin-transform-template-literals" "^7.4.4"
+    "@babel/plugin-transform-typeof-symbol" "^7.2.0"
+    "@babel/plugin-transform-unicode-regex" "^7.4.4"
+    "@babel/types" "^7.6.0"
+    browserslist "^4.6.0"
+    core-js-compat "^3.1.1"
+    invariant "^2.2.2"
+    js-levenshtein "^1.1.3"
+    semver "^5.5.0"
+
 "@babel/preset-flow@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/preset-flow/-/preset-flow-7.0.0.tgz#afd764835d9535ec63d8c7d4caf1c06457263da2"
@@ -852,6 +969,15 @@
     "@babel/parser" "^7.4.4"
     "@babel/types" "^7.4.4"
 
+"@babel/template@^7.6.0":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.6.0.tgz#7f0159c7f5012230dad64cca42ec9bdb5c9536e6"
+  integrity sha512-5AEH2EXD8euCk446b7edmgFdub/qfH1SN6Nii3+fyXP807QRx9Q73A2N5hNwRRslC2H9sNzaFhsPubkS4L8oNQ==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/parser" "^7.6.0"
+    "@babel/types" "^7.6.0"
+
 "@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.4.3", "@babel/traverse@^7.4.4", "@babel/traverse@^7.5.5":
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.5.5.tgz#f664f8f368ed32988cd648da9f72d5ca70f165bb"
@@ -867,7 +993,7 @@
     globals "^11.1.0"
     lodash "^4.17.13"
 
-"@babel/traverse@^7.1.6":
+"@babel/traverse@^7.1.6", "@babel/traverse@^7.6.0":
   version "7.6.2"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.6.2.tgz#b0e2bfd401d339ce0e6c05690206d1e11502ce2c"
   integrity sha512-8fRE76xNwNttVEF2TwxJDGBLWthUkHWSldmfuBzVRmEDWOtu4XdINTgN7TDWzuLg4bbeIMLvfMFD9we5YcWkRQ==
@@ -938,10 +1064,10 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
-"@elastic/charts@^12.0.2":
-  version "12.0.2"
-  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-12.0.2.tgz#576fafccd9e9f6ca751b6e846be3a5c954e8865b"
-  integrity sha512-BxdJVXUkYE11X+n5QWfu6ntDCm6wbkvLRNWrJG30pgGv9QEDhEbraQ8ql9Vx1454EuEjgXP6xOM0X+3rCO4Nqw==
+"@elastic/charts@^12.1.0":
+  version "12.1.0"
+  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-12.1.0.tgz#a1ad871cf1d90efc2450d29aa41bc9872434616a"
+  integrity sha512-sXZ0KHN29icVbeCU0x6LsiYI++w55kUJA0bpH7vpGExny70UBHNqjnLcBui0DBhlS3Bsz64xW5c4i9TKWeqXLA==
   dependencies:
     "@types/d3-shape" "^1.3.1"
     "@types/luxon" "^1.11.1"
@@ -1019,10 +1145,10 @@
     tabbable "^1.1.0"
     uuid "^3.1.0"
 
-"@elastic/eui@14.3.0":
-  version "14.3.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-14.3.0.tgz#256e1af8f6b15717904f8959742a23b3495ff0bb"
-  integrity sha512-gAbPNezBmndInYqqw6EvRYLn2VMYQgYuPQYA5UZ7TyHzwvoBiMpUw5nFzYhS2A/Xcmq/ON5Mu8RY3LGRAVBOvQ==
+"@elastic/eui@14.4.0":
+  version "14.4.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-14.4.0.tgz#ac09a476798dcdb1005616cccc149eda23ea2a90"
+  integrity sha512-dR7lYwUaIRXZjlUrJBq8GcGLPh6QfM3waQxUFI8lOnMVayJe3OOMNADCn8Oty6wNYIOrBWzZbW6w4bzInWF6oA==
   dependencies:
     "@types/lodash" "^4.14.116"
     "@types/numeral" "^0.0.25"
@@ -4739,6 +4865,11 @@ ansi-color@^0.2.1:
   resolved "https://registry.yarnpkg.com/ansi-color/-/ansi-color-0.2.1.tgz#3e75c037475217544ed763a8db5709fa9ae5bf9a"
   integrity sha1-PnXAN0dSF1RO12Oo21cJ+prlv5o=
 
+ansi-colors@3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.3.tgz#57d35b8686e851e2cc04c403f1c00203976a1813"
+  integrity sha512-LEHHyuhlPY3TmuUYMh2oz89lTShfvgbmzaBcxve9t/9Wuy7Dwf4yoAKcND7KFT1HAQfqZ12qtc+DUrBMeKF9nw==
+
 ansi-colors@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-1.1.0.tgz#6374b4dd5d4718ff3ce27a671a3b1cad077132a9"
@@ -6715,10 +6846,10 @@ browser-resolve@^1.8.1:
   dependencies:
     resolve "1.1.7"
 
-browser-stdout@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/browser-stdout/-/browser-stdout-1.3.0.tgz#f351d32969d32fa5d7a5567154263d928ae3bd1f"
-  integrity sha1-81HTKWnTL6XXpVZxVCY9korjvR8=
+browser-stdout@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/browser-stdout/-/browser-stdout-1.3.1.tgz#baa559ee14ced73452229bad7326467c61fabd60"
+  integrity sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==
 
 browserify-aes@^1.0.0, browserify-aes@^1.0.4:
   version "1.1.1"
@@ -7005,6 +7136,30 @@ cacache@^12.0.2:
     unique-filename "^1.1.1"
     y18n "^4.0.0"
 
+cacache@^13.0.0:
+  version "13.0.1"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-13.0.1.tgz#a8000c21697089082f85287a1aec6e382024a71c"
+  integrity sha512-5ZvAxd05HDDU+y9BVvcqYu2LLXmPnQ0hW62h32g4xBTgL/MppR4/04NHfj/ycM2y6lmTnbw6HVi+1eN0Psba6w==
+  dependencies:
+    chownr "^1.1.2"
+    figgy-pudding "^3.5.1"
+    fs-minipass "^2.0.0"
+    glob "^7.1.4"
+    graceful-fs "^4.2.2"
+    infer-owner "^1.0.4"
+    lru-cache "^5.1.1"
+    minipass "^3.0.0"
+    minipass-collect "^1.0.2"
+    minipass-flush "^1.0.5"
+    minipass-pipeline "^1.2.2"
+    mkdirp "^0.5.1"
+    move-concurrently "^1.0.1"
+    p-map "^3.0.0"
+    promise-inflight "^1.0.1"
+    rimraf "^2.7.1"
+    ssri "^7.0.0"
+    unique-filename "^1.1.1"
+
 cache-base@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
@@ -7566,6 +7721,11 @@ chownr@^1.0.1, chownr@^1.1.1:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.1.tgz#54726b8b8fff4df053c42187e801fb4412df1494"
   integrity sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==
 
+chownr@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.3.tgz#42d837d5239688d55f303003a508230fa6727142"
+  integrity sha512-i70fVHhmV3DtTl6nqvZOnIjbY0Pe4kAUjwHj8z0zAdgBtYrJyYwLKCCuRBQ5ppkyL0AkN7HKRnETdmdp1zqNXw==
+
 chroma-js@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/chroma-js/-/chroma-js-1.4.1.tgz#eb2d9c4d1ff24616be84b35119f4d26f8205f134"
@@ -8107,11 +8267,6 @@ comma-separated-tokens@^1.0.0:
   dependencies:
     trim "0.0.1"
 
-commander@0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-0.6.1.tgz#fa68a14f6a945d54dbbe50d8cdb3320e9e3b1a06"
-  integrity sha1-+mihT2qUXVTbvlDYzbMyDp47GgY=
-
 commander@2, commander@2.19.0, commander@^2.11.0, commander@^2.12.2, commander@^2.9.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
@@ -8127,18 +8282,6 @@ commander@2.17.x, commander@~2.17.1:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
   integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
 
-commander@2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.3.0.tgz#fd430e889832ec353b9acd1de217c11cb3eef873"
-  integrity sha1-/UMOiJgy7DU7ms0d4hfBHLPu+HM=
-
-commander@2.9.0, commander@~2.9.0:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
-  integrity sha1-nJkJQXbhIkDLItbFFGCYQA/g99Q=
-  dependencies:
-    graceful-readlink ">= 1.0.0"
-
 commander@3.0.0, commander@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-3.0.0.tgz#0641ea00838c7a964627f04cddc336a2deddd60a"
@@ -8161,6 +8304,13 @@ commander@~2.8.1:
   dependencies:
     graceful-readlink ">= 1.0.0"
 
+commander@~2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
+  integrity sha1-nJkJQXbhIkDLItbFFGCYQA/g99Q=
+  dependencies:
+    graceful-readlink ">= 1.0.0"
+
 common-tags@1.8.0, common-tags@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937"
@@ -9366,6 +9516,11 @@ dargs@^5.1.0:
   resolved "https://registry.yarnpkg.com/dargs/-/dargs-5.1.0.tgz#ec7ea50c78564cd36c9d5ec18f66329fade27829"
   integrity sha1-7H6lDHhWTNNsnV7Bj2Yyn63ieCk=
 
+dargs@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/dargs/-/dargs-7.0.0.tgz#04015c41de0bcb69ec84050f3d9be0caf8d6d5cc"
+  integrity sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==
+
 dashdash@^1.12.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
@@ -9434,20 +9589,6 @@ debug-fabulous@1.X:
     memoizee "0.4.X"
     object-assign "4.X"
 
-debug@2.2.0, debug@~2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.2.0.tgz#f87057e995b1a1f6ae6a4960664137bc56f039da"
-  integrity sha1-+HBX6ZWxofauaklgZkE3vFbwOdo=
-  dependencies:
-    ms "0.7.1"
-
-debug@2.6.8:
-  version "2.6.8"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
-  integrity sha1-5zFTHKLt4n0YgiJCfaF4IdaP9Pw=
-  dependencies:
-    ms "2.0.0"
-
 debug@2.6.9, debug@^2.0.0, debug@^2.1.0, debug@^2.1.1, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -9483,6 +9624,13 @@ debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
   dependencies:
     ms "^2.1.1"
 
+debug@~2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.2.0.tgz#f87057e995b1a1f6ae6a4960664137bc56f039da"
+  integrity sha1-+HBX6ZWxofauaklgZkE3vFbwOdo=
+  dependencies:
+    ms "0.7.1"
+
 debuglog@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
@@ -9980,26 +10128,16 @@ diff-sequences@^24.9.0:
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
   integrity sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==
 
-diff@1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/diff/-/diff-1.4.0.tgz#7f28d2eb9ee7b15a97efd89ce63dcfdaa3ccbabf"
-  integrity sha1-fyjS657nsVqX79ic5j3P2qPMur8=
-
-diff@3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/diff/-/diff-3.2.0.tgz#c9ce393a4b7cbd0b058a725c93df299027868ff9"
-  integrity sha1-yc45Okt8vQsFinJck98pkCeGj/k=
+diff@3.5.0, diff@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
+  integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==
 
 diff@^2.1.2:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/diff/-/diff-2.2.3.tgz#60eafd0d28ee906e4e8ff0a52c1229521033bf99"
   integrity sha1-YOr9DSjukG5Oj/ClLBIpUhAzv5k=
 
-diff@^3.5.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
-  integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==
-
 diff@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.1.tgz#0c667cb467ebbb5cea7f14f135cc2dba7780a8ff"
@@ -10872,11 +11010,6 @@ escape-html@^1.0.3, escape-html@~1.0.3:
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
   integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
 
-escape-string-regexp@1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.2.tgz#4dbc2fe674e71949caf3fb2695ce7f2dc1d9a8d1"
-  integrity sha1-Tbwv5nTnGUnK8/smlc5/LcHZqNE=
-
 escape-string-regexp@1.0.5, escape-string-regexp@^1.0.0, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
@@ -11044,6 +11177,13 @@ eslint-plugin-ban@1.3.0:
   dependencies:
     requireindex "~1.2.0"
 
+eslint-plugin-cypress@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-cypress/-/eslint-plugin-cypress-2.6.1.tgz#b2728663319709c57d21ee7d0dc055edc341dcaf"
+  integrity sha512-OVdxKbQ5DGcAGxvgZJRng7g01w/4xqEk65FGc8xELMcTdTjzh1m7FFjEQSglv1Y/TIDsOHaA5b+/ojQp4I2QhA==
+  dependencies:
+    globals "^11.12.0"
+
 eslint-plugin-es@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-es/-/eslint-plugin-es-1.4.1.tgz#12acae0f4953e76ba444bfd1b2271081ac620998"
@@ -11091,10 +11231,10 @@ eslint-plugin-jsx-a11y@6.2.3:
     has "^1.0.3"
     jsx-ast-utils "^2.2.1"
 
-eslint-plugin-mocha@5.3.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-mocha/-/eslint-plugin-mocha-5.3.0.tgz#cf3eb18ae0e44e433aef7159637095a7cb19b15b"
-  integrity sha512-3uwlJVLijjEmBeNyH60nzqgA1gacUWLUmcKV8PIGNvj1kwP/CTgAWQHn2ayyJVwziX+KETkr9opNwT1qD/RZ5A==
+eslint-plugin-mocha@6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-mocha/-/eslint-plugin-mocha-6.1.1.tgz#5a036f2f806e1a5fb7d19f7538ebeff3afb15377"
+  integrity sha512-p/otruG425jRYDa28HjbBYYXoFNzq3Qp++gn5dbE44Kz4NvmIsSUKSV1T+RLYUcZOcdJKKAftXbaqkHFqReKoA==
   dependencies:
     ramda "^0.26.1"
 
@@ -11486,6 +11626,21 @@ execa@^1.0.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
+execa@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-2.0.4.tgz#2f5cc589c81db316628627004ea4e37b93391d8e"
+  integrity sha512-VcQfhuGD51vQUQtKIq2fjGDLDbL6N1DTQVpYzxZ7LPIXw3HqTuIz6uxRmpV1qf8i31LHf2kjiaGI+GdHwRgbnQ==
+  dependencies:
+    cross-spawn "^6.0.5"
+    get-stream "^5.0.0"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^3.0.0"
+    onetime "^5.1.0"
+    p-finally "^2.0.0"
+    signal-exit "^3.0.2"
+    strip-final-newline "^2.0.0"
+
 execall@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/execall/-/execall-1.0.0.tgz#73d0904e395b3cab0658b08d09ec25307f29bb73"
@@ -12363,6 +12518,13 @@ flat-cache@^2.0.1:
     rimraf "2.6.3"
     write "1.0.3"
 
+flat@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/flat/-/flat-4.1.0.tgz#090bec8b05e39cba309747f1d588f04dbaf98db2"
+  integrity sha512-Px/TiLIznH7gEDlPXcUD4KnBusa6kR6ayRUVcnEAbreRIuhkqow/mun59BuRXwoYk7ZQOLW1ZM05ilIvK38hFw==
+  dependencies:
+    is-buffer "~2.0.3"
+
 flatted@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.0.tgz#55122b6536ea496b4b44893ee2608141d10d9916"
@@ -12707,6 +12869,13 @@ fs-minipass@^1.2.5:
   dependencies:
     minipass "^2.2.1"
 
+fs-minipass@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-2.0.0.tgz#a6415edab02fae4b9e9230bc87ee2e4472003cd1"
+  integrity sha512-40Qz+LFXmd9tzYVnnBmZvFfvAADfUA14TXPK1s7IfElJTIZ97rA8w4Kin7Wt5JBrC3ShnnFJO/5vPjPEeJIq9A==
+  dependencies:
+    minipass "^3.0.0"
+
 fs-mkdirp-stream@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs-mkdirp-stream/-/fs-mkdirp-stream-1.0.0.tgz#0b7815fc3201c6a69e14db98ce098c16935259eb"
@@ -12994,6 +13163,13 @@ get-stream@^4.0.0:
   dependencies:
     pump "^3.0.0"
 
+get-stream@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-5.1.0.tgz#01203cdc92597f9b909067c3e656cc1f4d3c4dc9"
+  integrity sha512-EXr1FOzrzTfGeL0gQdeFEvOMm2mzMOglyiOXSTpPC+iAjAKftbr3jpCMWynogwYnM+eSj9sHGc6wjIcDvYiygw==
+  dependencies:
+    pump "^3.0.0"
+
 get-value@^2.0.3, get-value@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
@@ -13172,26 +13348,6 @@ glob2base@^0.0.12:
   dependencies:
     find-index "^0.1.1"
 
-glob@3.2.11:
-  version "3.2.11"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-3.2.11.tgz#4a973f635b9190f715d10987d5c00fd2815ebe3d"
-  integrity sha1-Spc/Y1uRkPcV0QmH1cAP0oFevj0=
-  dependencies:
-    inherits "2"
-    minimatch "0.3"
-
-glob@7.1.1:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.1.tgz#805211df04faaf1c63a3600306cdf5ade50b2ec8"
-  integrity sha1-gFIR3wT6rxxjo2ADBs31reULLsg=
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.2"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
 glob@7.1.3, glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@~7.1.1:
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.3.tgz#3960832d3f1574108342dafd3a67b332c0969df1"
@@ -13335,6 +13491,11 @@ globals@^11.1.0, globals@^11.7.0:
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.7.0.tgz#a583faa43055b1aca771914bf68258e2fc125673"
   integrity sha512-K8BNSPySfeShBQXsahYB/AbbWruVOTyVpgoIDnl8odPpeSfP2J5QO2oLFFdl2j7GfDCtZj2bMKar2T49itTPCg==
 
+globals@^11.12.0:
+  version "11.12.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
+  integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
+
 globals@^9.18.0, globals@^9.2.0:
   version "9.18.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
@@ -13846,10 +14007,10 @@ grouped-queue@^0.3.0, grouped-queue@^0.3.3:
   dependencies:
     lodash "^4.17.2"
 
-growl@1.9.2:
-  version "1.9.2"
-  resolved "https://registry.yarnpkg.com/growl/-/growl-1.9.2.tgz#0ea7743715db8d8de2c5ede1775e1b45ac85c02f"
-  integrity sha1-Dqd0NxXbjY3ixe3hd14bRayFwC8=
+growl@1.10.5:
+  version "1.10.5"
+  resolved "https://registry.yarnpkg.com/growl/-/growl-1.10.5.tgz#f2735dc2283674fa67478b10181059355c369e5e"
+  integrity sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==
 
 growly@^1.3.0:
   version "1.3.0"
@@ -14000,17 +14161,17 @@ gulp-babel@^8.0.0:
     through2 "^2.0.0"
     vinyl-sourcemaps-apply "^0.2.0"
 
-gulp-mocha@2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/gulp-mocha/-/gulp-mocha-2.2.0.tgz#1ce5eba4b94b40c7436afec3c4982c8eea894192"
-  integrity sha1-HOXrpLlLQMdDav7DxJgsjuqJQZI=
+gulp-mocha@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/gulp-mocha/-/gulp-mocha-7.0.1.tgz#cd29f2fc214a8c08c7d96bf13927d539385a856d"
+  integrity sha512-LYBEWdOw52kvP+si91iR00LYX9iKXLTBjcKh9b3ChHvVmKtpoITjeRFslPEzDubEk+z6VI1ONEwn9ABqW9/tig==
   dependencies:
-    gulp-util "^3.0.0"
-    mocha "^2.0.1"
-    plur "^2.1.0"
-    resolve-from "^1.0.0"
-    temp "^0.8.3"
-    through "^2.3.4"
+    dargs "^7.0.0"
+    execa "^2.0.4"
+    mocha "^6.2.0"
+    plugin-error "^1.0.1"
+    supports-color "^7.0.0"
+    through2 "^3.0.1"
 
 gulp-multi-process@1.3.1:
   version "1.3.1"
@@ -14432,12 +14593,7 @@ he@0.5.0:
   resolved "https://registry.yarnpkg.com/he/-/he-0.5.0.tgz#2c05ffaef90b68e860f3fd2b54ef580989277ee2"
   integrity sha1-LAX/rvkLaOhg8/0rVO9YCYknfuI=
 
-he@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
-  integrity sha1-k0EP0hsAlzUVH4howvJx80J+I/0=
-
-he@1.2.x, he@^1.1.1:
+he@1.2.0, he@1.2.x, he@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
@@ -15044,7 +15200,7 @@ inert@^5.1.0:
     joi "13.x.x"
     lru-cache "4.1.x"
 
-infer-owner@^1.0.3:
+infer-owner@^1.0.3, infer-owner@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
   integrity sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==
@@ -15511,7 +15667,7 @@ is-buffer@^1.0.2, is-buffer@^1.1.4, is-buffer@^1.1.5, is-buffer@~1.1.1:
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
 
-is-buffer@^2.0.0, is-buffer@^2.0.2:
+is-buffer@^2.0.0, is-buffer@^2.0.2, is-buffer@~2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.3.tgz#4ecf3fcf749cbd1e472689e109ac66261a25e725"
   integrity sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw==
@@ -15959,6 +16115,11 @@ is-stream@^1.0.0, is-stream@^1.0.1, is-stream@^1.1.0:
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
   integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
 
+is-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
+  integrity sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==
+
 is-string@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.4.tgz#cc3a9b69857d621e963725a24caeec873b826e64"
@@ -16319,14 +16480,6 @@ iterare@^1.1.2:
   resolved "https://registry.yarnpkg.com/iterare/-/iterare-1.1.2.tgz#32e65fe03c72f727b1ae5fd002ed6a215f523ae8"
   integrity sha512-25rVYmj/dDvTR6zOa9jY1Ihd6USLa0J508Ub2iy7Aga+xu9JMbjDds2Uh03ReDGbva/YN3s3Ybi+Do0nOX6wAg==
 
-jade@0.26.3:
-  version "0.26.3"
-  resolved "https://registry.yarnpkg.com/jade/-/jade-0.26.3.tgz#8f10d7977d8d79f2f6ff862a81b0513ccb25686c"
-  integrity sha1-jxDXl32NefL2/4YqgbBRPMslaGw=
-  dependencies:
-    commander "0.6.1"
-    mkdirp "0.3.0"
-
 jaeger-client@^3.5.3:
   version "3.13.0"
   resolved "https://registry.yarnpkg.com/jaeger-client/-/jaeger-client-3.13.0.tgz#c5b228242d65389a13eb24eeb56a55409d72c94e"
@@ -16984,7 +17137,7 @@ json2module@^0.0.3:
   dependencies:
     rw "^1.3.2"
 
-json3@3.3.2, json3@^3.3.2:
+json3@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.2.tgz#3c0434743df93e2f5c42aee7b19bcb483575f4e1"
   integrity sha1-PAQ0dD35Pi9cQq7nsZvLSDV19OE=
@@ -17820,24 +17973,11 @@ lodash-es@^4.17.11, lodash-es@^4.17.4, lodash-es@^4.17.5, lodash-es@^4.2.1:
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
   integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==
 
-lodash._baseassign@^3.0.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/lodash._baseassign/-/lodash._baseassign-3.2.0.tgz#8c38a099500f215ad09e59f1722fd0c52bfe0a4e"
-  integrity sha1-jDigmVAPIVrQnlnxci/QxSv+Ck4=
-  dependencies:
-    lodash._basecopy "^3.0.0"
-    lodash.keys "^3.0.0"
-
 lodash._basecopy@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz#8da0e6a876cf344c0ad8a54882111dd3c5c7ca36"
   integrity sha1-jaDmqHbPNEwK2KVIghEd08XHyjY=
 
-lodash._basecreate@^3.0.0:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/lodash._basecreate/-/lodash._basecreate-3.0.3.tgz#1bc661614daa7fc311b7d03bf16806a0213cf821"
-  integrity sha1-G8ZhYU2qf8MRt9A78WgGoCE8+CE=
-
 lodash._basetostring@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/lodash._basetostring/-/lodash._basetostring-3.0.1.tgz#d1861d877f824a52f669832dcaf3ee15566a07d5"
@@ -17918,15 +18058,6 @@ lodash.clonedeepwith@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.clonedeepwith/-/lodash.clonedeepwith-4.5.0.tgz#6ee30573a03a1a60d670a62ef33c10cf1afdbdd4"
   integrity sha1-buMFc6A6GmDWcKYu8zwQzxr9vdQ=
 
-lodash.create@3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/lodash.create/-/lodash.create-3.1.1.tgz#d7f2849f0dbda7e04682bb8cd72ab022461debe7"
-  integrity sha1-1/KEnw29p+BGgruM1yqwIkYd6+c=
-  dependencies:
-    lodash._baseassign "^3.0.0"
-    lodash._basecreate "^3.0.0"
-    lodash._isiterateecall "^3.0.0"
-
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
@@ -19071,14 +19202,6 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
   resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
   integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
 
-minimatch@0.3:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-0.3.0.tgz#275d8edaac4f1bb3326472089e7949c8394699dd"
-  integrity sha1-J12O2qxPG7MyZHIInnlJyDlGmd0=
-  dependencies:
-    lru-cache "2"
-    sigmund "~1.0.0"
-
 "minimatch@2 || 3", minimatch@3.0.4, minimatch@3.0.x, minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.4, minimatch@~3.0.2:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
@@ -19154,6 +19277,27 @@ minimost@^1.0.0:
     camelcase-keys "^4.0.0"
     minimist "^1.2.0"
 
+minipass-collect@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/minipass-collect/-/minipass-collect-1.0.2.tgz#22b813bf745dc6edba2576b940022ad6edc8c617"
+  integrity sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==
+  dependencies:
+    minipass "^3.0.0"
+
+minipass-flush@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/minipass-flush/-/minipass-flush-1.0.5.tgz#82e7135d7e89a50ffe64610a787953c4c4cbb373"
+  integrity sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==
+  dependencies:
+    minipass "^3.0.0"
+
+minipass-pipeline@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/minipass-pipeline/-/minipass-pipeline-1.2.2.tgz#3dcb6bb4a546e32969c7ad710f2c79a86abba93a"
+  integrity sha512-3JS5A2DKhD2g0Gg8x3yamO0pj7YeKGwVlDS90pF++kxptwx/F+B//roxf9SqYil5tQo65bijy+dAuAFZmYOouA==
+  dependencies:
+    minipass "^3.0.0"
+
 minipass@^2.2.1:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.3.0.tgz#2e11b1c46df7fe7f1afbe9a490280add21ffe384"
@@ -19178,6 +19322,13 @@ minipass@^2.8.6:
     safe-buffer "^5.1.2"
     yallist "^3.0.0"
 
+minipass@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.0.1.tgz#b4fec73bd61e8a40f0b374ddd04260ade2c8ec20"
+  integrity sha512-2y5okJ4uBsjoD2vAbLKL9EUQPPkC0YMIp+2mZOXG3nBba++pdfJWRxx2Ewirc0pwAJYu4XtWg2EkVo1nRXuO/w==
+  dependencies:
+    yallist "^4.0.0"
+
 minizlib@^1.1.0, minizlib@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.2.1.tgz#dd27ea6136243c7c880684e8672bb3a45fd9b614"
@@ -19224,11 +19375,6 @@ mixin-object@^2.0.1:
     for-in "^0.1.3"
     is-extendable "^0.1.1"
 
-mkdirp@0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.3.0.tgz#1bbf5ab1ba827af23575143490426455f481fe1e"
-  integrity sha1-G79asbqCevI1dRQ0kEJkVfSB/h4=
-
 mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
@@ -19273,39 +19419,34 @@ mocha-multi-reporters@^1.1.7:
     debug "^3.1.0"
     lodash "^4.16.4"
 
-mocha@3.5.3:
-  version "3.5.3"
-  resolved "https://registry.yarnpkg.com/mocha/-/mocha-3.5.3.tgz#1e0480fe36d2da5858d1eb6acc38418b26eaa20d"
-  integrity sha512-/6na001MJWEtYxHOV1WLfsmR4YIynkUEhBwzsb+fk2qmQ3iqsi258l/Q2MWHJMImAcNpZ8DEdYAK72NHoIQ9Eg==
+mocha@6.2.1, mocha@^6.2.0:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/mocha/-/mocha-6.2.1.tgz#da941c99437da9bac412097859ff99543969f94c"
+  integrity sha512-VCcWkLHwk79NYQc8cxhkmI8IigTIhsCwZ6RTxQsqK6go4UvEhzJkYuHm8B2YtlSxcYq2fY+ucr4JBwoD6ci80A==
   dependencies:
-    browser-stdout "1.3.0"
-    commander "2.9.0"
-    debug "2.6.8"
-    diff "3.2.0"
+    ansi-colors "3.2.3"
+    browser-stdout "1.3.1"
+    debug "3.2.6"
+    diff "3.5.0"
     escape-string-regexp "1.0.5"
-    glob "7.1.1"
-    growl "1.9.2"
-    he "1.1.1"
-    json3 "3.3.2"
-    lodash.create "3.1.1"
-    mkdirp "0.5.1"
-    supports-color "3.1.2"
-
-mocha@^2.0.1:
-  version "2.5.3"
-  resolved "https://registry.yarnpkg.com/mocha/-/mocha-2.5.3.tgz#161be5bdeb496771eb9b35745050b622b5aefc58"
-  integrity sha1-FhvlvetJZ3HrmzV0UFC2IrWu/Fg=
-  dependencies:
-    commander "2.3.0"
-    debug "2.2.0"
-    diff "1.4.0"
-    escape-string-regexp "1.0.2"
-    glob "3.2.11"
-    growl "1.9.2"
-    jade "0.26.3"
+    find-up "3.0.0"
+    glob "7.1.3"
+    growl "1.10.5"
+    he "1.2.0"
+    js-yaml "3.13.1"
+    log-symbols "2.2.0"
+    minimatch "3.0.4"
     mkdirp "0.5.1"
-    supports-color "1.2.0"
-    to-iso-string "0.0.2"
+    ms "2.1.1"
+    node-environment-flags "1.0.5"
+    object.assign "4.1.0"
+    strip-json-comments "2.0.1"
+    supports-color "6.0.0"
+    which "1.3.1"
+    wide-align "1.1.3"
+    yargs "13.3.0"
+    yargs-parser "13.1.1"
+    yargs-unparser "1.6.0"
 
 mochawesome-merge@^2.0.1:
   version "2.0.1"
@@ -19336,10 +19477,10 @@ mochawesome-report-generator@^4.0.0, mochawesome-report-generator@^4.0.1:
     validator "^10.11.0"
     yargs "^13.2.2"
 
-mochawesome@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/mochawesome/-/mochawesome-4.0.1.tgz#351af69c8904468e75a71f8704ed0b5767795ccc"
-  integrity sha512-F/hVmiwWCvwBiW/UPhs4/lfgf8mBJBr89W/9fDu+hb+rQ9gFxWh9N/BU7RtEH+dMfBF4o8XIdYHrEcwxJhzqsw==
+mochawesome@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/mochawesome/-/mochawesome-4.1.0.tgz#57cdb9509a9fc54790884ec867e109644ba949ee"
+  integrity sha512-U23K19mLqmuBqFyIBl7FVkcIuG/2JYStCj+91WmxK1/psLgHlWBEZsNe25U0x4t1Eqgu55aHv+0utLwzfhnupw==
   dependencies:
     chalk "^2.4.1"
     diff "^4.0.1"
@@ -19766,6 +19907,14 @@ node-ensure@^0.0.0:
   resolved "https://registry.yarnpkg.com/node-ensure/-/node-ensure-0.0.0.tgz#ecae764150de99861ec5c810fd5d096b183932a7"
   integrity sha1-7K52QVDemYYexcgQ/V0Jaxg5Mqc=
 
+node-environment-flags@1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/node-environment-flags/-/node-environment-flags-1.0.5.tgz#fa930275f5bf5dae188d6192b24b4c8bbac3d76a"
+  integrity sha512-VNYPRfGfmZLx0Ye20jWzHUjyTW/c+6Wq+iLhDzUI4XmhrDd9l/FozXV3F2xOaXjvp0co0+v1YSR3CMP6g+VvLQ==
+  dependencies:
+    object.getownpropertydescriptors "^2.0.3"
+    semver "^5.7.0"
+
 node-fetch@1.7.3, node-fetch@^1.0.1:
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
@@ -20158,6 +20307,13 @@ npm-run-path@^2.0.0:
   dependencies:
     path-key "^2.0.0"
 
+npm-run-path@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-3.1.0.tgz#7f91be317f6a466efed3c9f2980ad8a4ee8b0fa5"
+  integrity sha512-Dbl4A/VfiVGLgQv29URL9xshU8XDY1GeLy+fsaZ1AA8JDSfjvr5P5+pzRbWqRSBxk6/DW7MIh8lTM/PaGnP2kg==
+  dependencies:
+    path-key "^3.0.0"
+
 "npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.2, npmlog@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
@@ -20338,7 +20494,7 @@ object-visit@^1.0.0:
   dependencies:
     isobject "^3.0.0"
 
-object.assign@^4.0.4, object.assign@^4.1.0:
+object.assign@4.1.0, object.assign@^4.0.4, object.assign@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.0.tgz#968bf1100d7956bb3ca086f006f846b3bc4008da"
   integrity sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==
@@ -20757,6 +20913,11 @@ p-finally@^1.0.0:
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
   integrity sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=
 
+p-finally@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-2.0.1.tgz#bd6fcaa9c559a096b680806f4d657b3f0f240561"
+  integrity sha512-vpm09aKwq6H9phqRQzecoDpD8TmVyGw70qmWlyq5onxY7tqyTTFVvxMykxQSQKILBSFlbXpypIw2T1Ml7+DDtw==
+
 p-is-promise@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/p-is-promise/-/p-is-promise-1.1.0.tgz#9c9456989e9f6588017b0434d56097675c3da05e"
@@ -21248,6 +21409,11 @@ path-key@^2.0.0, path-key@^2.0.1:
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
   integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=
 
+path-key@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.0.tgz#99a10d870a803bdd5ee6f0470e58dfcd2f9a54d3"
+  integrity sha512-8cChqz0RP6SHJkMt48FW0A7+qUOn+OsnOsVtzI59tZ8m+5bCSk7hzwET0pulwOM2YMn9J1efb07KB9l9f30SGg==
+
 path-parse@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
@@ -21536,7 +21702,7 @@ plugin-error@^1.0.1:
     arr-union "^3.1.0"
     extend-shallow "^3.0.2"
 
-plur@^2.1.0, plur@^2.1.2:
+plur@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/plur/-/plur-2.1.2.tgz#7482452c1a0f508e3e344eaec312c91c29dc655a"
   integrity sha1-dIJFLBoPUI4+NE6uwxLJHCncZVo=
@@ -23477,7 +23643,7 @@ readable-stream@1.0, "readable-stream@>=1.0.33-1 <1.1.0-0", readable-stream@~1.0
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
-readable-stream@^3.0.1, readable-stream@^3.0.6, readable-stream@^3.1.1, readable-stream@^3.4.0:
+"readable-stream@2 || 3", readable-stream@^3.0.1, readable-stream@^3.0.6, readable-stream@^3.1.1, readable-stream@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.4.0.tgz#a51c26754658e0a3c21dbf59163bd45ba6f447fc"
   integrity sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==
@@ -23800,6 +23966,11 @@ regex-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/regex-regex/-/regex-regex-1.0.0.tgz#9048a1eaeb870f4d480dabc76fc42cdcc0bc3a72"
   integrity sha1-kEih6uuHD01IDavHb8Qs3MC8OnI=
 
+regexp-tree@^0.1.13:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/regexp-tree/-/regexp-tree-0.1.13.tgz#5b19ab9377edc68bc3679256840bb29afc158d7f"
+  integrity sha512-hwdV/GQY5F8ReLZWO+W1SRoN5YfpOKY6852+tBFcma72DKBIcHjPRIlIvQN35bCOljuAfP2G2iB0FC/w236mUw==
+
 regexp-tree@^0.1.6:
   version "0.1.10"
   resolved "https://registry.yarnpkg.com/regexp-tree/-/regexp-tree-0.1.10.tgz#d837816a039c7af8a8d64d7a7c3cf6a1d93450bc"
@@ -24456,11 +24627,6 @@ rimraf@^3.0.0:
   dependencies:
     glob "^7.1.3"
 
-rimraf@~2.2.6:
-  version "2.2.8"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.2.8.tgz#e439be2aaee327321952730f99a8929e4fc50582"
-  integrity sha1-5Dm+Kq7jJzIZUnMPmaiSnk/FBYI=
-
 ripemd160@^2.0.0, ripemd160@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.1.tgz#0f4584295c53a3628af7e6d79aca21ce57d1c6e7"
@@ -24838,6 +25004,14 @@ schema-utils@^2.0.0, schema-utils@^2.0.1:
     ajv "^6.1.0"
     ajv-keywords "^3.1.0"
 
+schema-utils@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.4.1.tgz#e89ade5d056dc8bcaca377574bb4a9c4e1b8be56"
+  integrity sha512-RqYLpkPZX5Oc3fw/kHHHyP56fg5Y+XBpIpV8nCg0znIALfq3OH+Ea9Hfeac9BAMwG5IICltiZ0vxFvJQONfA5w==
+  dependencies:
+    ajv "^6.10.2"
+    ajv-keywords "^3.4.1"
+
 scoped-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/scoped-regex/-/scoped-regex-1.0.0.tgz#a346bb1acd4207ae70bd7c0c7ca9e566b6baddb8"
@@ -25017,6 +25191,11 @@ serialize-javascript@^1.7.0:
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.7.0.tgz#d6e0dfb2a3832a8c94468e6eb1db97e55a192a65"
   integrity sha512-ke8UG8ulpFOxO8f8gRYabHQe/ZntKlcig2Mp+8+URDP1D8vJZ0KUt7LYo07q25Z/+JVSgpr/cui9PIp5H6/+nA==
 
+serialize-javascript@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.0.tgz#9310276819efd0eb128258bb341957f6eb2fc570"
+  integrity sha512-a/mxFfU00QT88umAJQsNWOnUKckhNCqOl028N48e7wFmo2/EHpTo9Wso+iJJCMrQnmFvcjto5RJdAHEvVhcyUQ==
+
 serve-favicon@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/serve-favicon/-/serve-favicon-2.5.0.tgz#935d240cdfe0f5805307fdfe967d88942a2cbcf0"
@@ -25781,6 +25960,14 @@ ssri@^6.0.1:
   dependencies:
     figgy-pudding "^3.5.1"
 
+ssri@^7.0.0:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/ssri/-/ssri-7.0.1.tgz#b0cab7bbb11ac9ea07f003453e2011f8cbed9f34"
+  integrity sha512-FfndBvkXL9AHyGLNzU3r9AvYIBBZ7gm+m+kd0p8cT3/v4OliMAyipZAhLVEv1Zi/k4QFq9CstRGVd9pW/zcHFQ==
+  dependencies:
+    figgy-pudding "^3.5.1"
+    minipass "^3.0.0"
+
 stable@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
@@ -25995,7 +26182,7 @@ string-width@^1.0.1, string-width@^1.0.2:
     is-fullwidth-code-point "^1.0.0"
     strip-ansi "^3.0.0"
 
-string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
+"string-width@^1.0.2 || 2", string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
   integrity sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==
@@ -26202,6 +26389,11 @@ strip-eof@^1.0.0:
   resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
   integrity sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=
 
+strip-final-newline@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
+  integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
+
 strip-indent@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-1.0.1.tgz#0c7962a6adefa7bbd4ac366460a638552ae1a0a2"
@@ -26214,7 +26406,7 @@ strip-indent@^2.0.0:
   resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-2.0.0.tgz#5ef8db295d01e6ed6cbf7aab96998d7822527b68"
   integrity sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=
 
-strip-json-comments@^2.0.1, strip-json-comments@~2.0.1:
+strip-json-comments@2.0.1, strip-json-comments@^2.0.1, strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
@@ -26362,18 +26554,6 @@ supertest@^3.1.0:
     methods "~1.1.2"
     superagent "3.8.2"
 
-supports-color@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-1.2.0.tgz#ff1ed1e61169d06b3cf2d588e188b18d8847e17e"
-  integrity sha1-/x7R5hFp0Gs88tWI4YixjYhH4X4=
-
-supports-color@3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.1.2.tgz#72a262894d9d408b956ca05ff37b2ed8a6e2a2d5"
-  integrity sha1-cqJiiU2dQIuVbKBf83su2KbiotU=
-  dependencies:
-    has-flag "^1.0.0"
-
 supports-color@5.5.0, supports-color@^5.0.0, supports-color@^5.4.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -26381,6 +26561,13 @@ supports-color@5.5.0, supports-color@^5.0.0, supports-color@^5.4.0, supports-col
   dependencies:
     has-flag "^3.0.0"
 
+supports-color@6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.0.0.tgz#76cfe742cf1f41bb9b1c29ad03068c05b4c0e40a"
+  integrity sha512-on9Kwidc1IUQo+bQdhi8+Tijpo0e1SS6RoGo2guUwn5vdaxw8RXOF9Vb2ws+ihWOmh4JnCJOvaziZWP1VABaLg==
+  dependencies:
+    has-flag "^3.0.0"
+
 supports-color@6.1.0, supports-color@^6.0.0, supports-color@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
@@ -26705,14 +26892,6 @@ temp-dir@^1.0.0:
   resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-1.0.0.tgz#0a7c0ea26d3a39afa7e0ebea9c1fc0bc4daa011d"
   integrity sha1-CnwOom06Oa+n4OvqnB/AvE2qAR0=
 
-temp@^0.8.3:
-  version "0.8.3"
-  resolved "https://registry.yarnpkg.com/temp/-/temp-0.8.3.tgz#e0c6bc4d26b903124410e4fed81103014dfc1f59"
-  integrity sha1-4Ma8TSa5AxJEEOT+2BEDAU38H1k=
-  dependencies:
-    os-tmpdir "^1.0.0"
-    rimraf "~2.2.6"
-
 temp@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/temp/-/temp-0.4.0.tgz#671ad63d57be0fe9d7294664b3fc400636678a60"
@@ -26749,6 +26928,20 @@ terser-webpack-plugin@^1.2.4, terser-webpack-plugin@^1.4.1:
     webpack-sources "^1.4.0"
     worker-farm "^1.7.0"
 
+terser-webpack-plugin@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-2.1.2.tgz#2b9b8147a6f18918348200800cf9560c50f701bb"
+  integrity sha512-MF/C4KABwqYOfRDi87f7gG07GP7Wj/kyiX938UxIGIO6l5mkh8XJL7xtS0hX/CRdVQaZI7ThGUPZbznrCjsGpg==
+  dependencies:
+    cacache "^13.0.0"
+    find-cache-dir "^3.0.0"
+    jest-worker "^24.9.0"
+    schema-utils "^2.4.1"
+    serialize-javascript "^2.1.0"
+    source-map "^0.6.1"
+    terser "^4.3.4"
+    webpack-sources "^1.4.3"
+
 terser@^4.1.2:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/terser/-/terser-4.2.0.tgz#4b1b5f4424b426a7a47e80d6aae45e0d7979aef0"
@@ -26758,6 +26951,15 @@ terser@^4.1.2:
     source-map "~0.6.1"
     source-map-support "~0.5.12"
 
+terser@^4.3.4:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-4.3.4.tgz#ad91bade95619e3434685d69efa621a5af5f877d"
+  integrity sha512-Kcrn3RiW8NtHBP0ssOAzwa2MsIRQ8lJWiBG/K7JgqPlomA3mtb2DEmp4/hrUA+Jujx+WZ02zqd7GYD+QRBB/2Q==
+  dependencies:
+    commander "^2.20.0"
+    source-map "~0.6.1"
+    source-map-support "~0.5.12"
+
 test-exclude@^5.0.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-5.1.0.tgz#6ba6b25179d2d38724824661323b73e03c0c1de1"
@@ -26867,6 +27069,13 @@ through2@^0.6.1:
     readable-stream ">=1.0.33-1 <1.1.0-0"
     xtend ">=4.0.0 <4.1.0-0"
 
+through2@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-3.0.1.tgz#39276e713c3302edf9e388dd9c812dd3b825bd5a"
+  integrity sha512-M96dvTalPT3YbYLaKaCuwu+j06D/8Jfib0o/PxbVt6Amhv3dUAtW6rTV1jPgJSBG83I/e04Y6xkVdVhSRhi0ww==
+  dependencies:
+    readable-stream "2 || 3"
+
 through2@~0.4.1:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/through2/-/through2-0.4.2.tgz#dbf5866031151ec8352bb6c4db64a2292a840b9b"
@@ -27066,11 +27275,6 @@ to-fast-properties@^2.0.0:
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
   integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
 
-to-iso-string@0.0.2:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/to-iso-string/-/to-iso-string-0.0.2.tgz#4dc19e664dfccbe25bd8db508b00c6da158255d1"
-  integrity sha1-TcGeZk38y+Jb2NtQiwDG2hWCVdE=
-
 to-object-path@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
@@ -29405,7 +29609,7 @@ webpack-sources@^1.1.0:
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-webpack-sources@^1.4.0, webpack-sources@^1.4.1:
+webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
   integrity sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==
@@ -29573,7 +29777,7 @@ which-module@^2.0.0:
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
   integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
 
-which@1, which@^1.2.9, which@^1.3.1, which@~1.3.0:
+which@1, which@1.3.1, which@^1.2.9, which@^1.3.1, which@~1.3.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
   integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
@@ -29587,6 +29791,13 @@ which@^1.1.1, which@^1.2.1, which@^1.2.14, which@^1.2.8, which@^1.3.0:
   dependencies:
     isexe "^2.0.0"
 
+wide-align@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"
+  integrity sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==
+  dependencies:
+    string-width "^1.0.2 || 2"
+
 wide-align@^1.1.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.2.tgz#571e0f1b0604636ebc0dfc21b0339bbe31341710"
@@ -30040,6 +30251,19 @@ yallist@^3.0.3:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.0.3.tgz#b4b049e314be545e3ce802236d6cd22cd91c3de9"
   integrity sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==
 
+yallist@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
+  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
+
+yargs-parser@13.1.1, yargs-parser@^13.0.0, yargs-parser@^13.1.0, yargs-parser@^13.1.1:
+  version "13.1.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.1.tgz#d26058532aa06d365fe091f6a1fc06b2f7e5eca0"
+  integrity sha512-oVAVsHz6uFrg3XQheFII8ESO2ssAf9luWuAd6Wexsu4F3OtIW0o8IribPXYrD4WC24LWtPrJlGy87y5udK+dxQ==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
 yargs-parser@^10.0.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-10.1.0.tgz#7202265b89f7e9e9f2e5765e0fe735a905edbaa8"
@@ -30055,14 +30279,6 @@ yargs-parser@^11.1.1:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
-yargs-parser@^13.0.0, yargs-parser@^13.1.0, yargs-parser@^13.1.1:
-  version "13.1.1"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.1.tgz#d26058532aa06d365fe091f6a1fc06b2f7e5eca0"
-  integrity sha512-oVAVsHz6uFrg3XQheFII8ESO2ssAf9luWuAd6Wexsu4F3OtIW0o8IribPXYrD4WC24LWtPrJlGy87y5udK+dxQ==
-  dependencies:
-    camelcase "^5.0.0"
-    decamelize "^1.2.0"
-
 yargs-parser@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-2.4.1.tgz#85568de3cf150ff49fa51825f03a8c880ddcc5c4"
@@ -30085,6 +30301,15 @@ yargs-parser@^9.0.2:
   dependencies:
     camelcase "^4.1.0"
 
+yargs-unparser@1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/yargs-unparser/-/yargs-unparser-1.6.0.tgz#ef25c2c769ff6bd09e4b0f9d7c605fb27846ea9f"
+  integrity sha512-W9tKgmSn0DpSatfri0nx52Joq5hVXgeLiqR/5G0sZNDoLZFOr/xjBUDcShCOGNsBnEMNo1KAMBkTej1Hm62HTw==
+  dependencies:
+    flat "^4.1.0"
+    lodash "^4.17.15"
+    yargs "^13.3.0"
+
 yargs@12.0.5, yargs@^12.0.5:
   version "12.0.5"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-12.0.5.tgz#05f5997b609647b64f66b81e3b4b10a368e7ad13"
@@ -30120,6 +30345,22 @@ yargs@13.2.4:
     y18n "^4.0.0"
     yargs-parser "^13.1.0"
 
+yargs@13.3.0, yargs@^13.2.2, yargs@^13.3.0:
+  version "13.3.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.0.tgz#4c657a55e07e5f2cf947f8a366567c04a0dedc83"
+  integrity sha512-2eehun/8ALW8TLoIl7MVaRUrg+yCnenu8B4kBlRxj3GJGDKU1Og7sMXPNm1BYyM1DOJmTZ4YeN/Nwxv+8XJsUA==
+  dependencies:
+    cliui "^5.0.0"
+    find-up "^3.0.0"
+    get-caller-file "^2.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^3.0.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^13.1.1"
+
 yargs@4.8.1:
   version "4.8.1"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-4.8.1.tgz#c0c42924ca4aaa6b0e6da1739dfb216439f9ddc0"
@@ -30158,22 +30399,6 @@ yargs@^11.0.0:
     y18n "^3.2.1"
     yargs-parser "^9.0.2"
 
-yargs@^13.2.2, yargs@^13.3.0:
-  version "13.3.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.0.tgz#4c657a55e07e5f2cf947f8a366567c04a0dedc83"
-  integrity sha512-2eehun/8ALW8TLoIl7MVaRUrg+yCnenu8B4kBlRxj3GJGDKU1Og7sMXPNm1BYyM1DOJmTZ4YeN/Nwxv+8XJsUA==
-  dependencies:
-    cliui "^5.0.0"
-    find-up "^3.0.0"
-    get-caller-file "^2.0.1"
-    require-directory "^2.1.1"
-    require-main-filename "^2.0.0"
-    set-blocking "^2.0.0"
-    string-width "^3.0.0"
-    which-module "^2.0.0"
-    y18n "^4.0.0"
-    yargs-parser "^13.1.1"
-
 yargs@^14.0.0:
   version "14.0.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-14.0.0.tgz#ba4cacc802b3c0b3e36a9e791723763d57a85066"