diff --git a/.ci/end2end.groovy b/.ci/end2end.groovy
index 87b64437deafcd..f1095f8035b6c4 100644
--- a/.ci/end2end.groovy
+++ b/.ci/end2end.groovy
@@ -13,12 +13,12 @@ pipeline {
     BASE_DIR = 'src/github.com/elastic/kibana'
     HOME = "${env.WORKSPACE}"
     E2E_DIR = 'x-pack/plugins/apm/e2e'
-    PIPELINE_LOG_LEVEL = 'DEBUG'
+    PIPELINE_LOG_LEVEL = 'INFO'
     KBN_OPTIMIZER_THEMES = 'v7light'
   }
   options {
     timeout(time: 1, unit: 'HOURS')
-    buildDiscarder(logRotator(numToKeepStr: '40', artifactNumToKeepStr: '20', daysToKeepStr: '30'))
+    buildDiscarder(logRotator(numToKeepStr: '30', artifactNumToKeepStr: '10', daysToKeepStr: '30'))
     timestamps()
     ansiColor('xterm')
     disableResume()
diff --git a/dev_docs/best_practices.mdx b/dev_docs/best_practices.mdx
index 54aaaa6b9497ad..d87c6eb618993d 100644
--- a/dev_docs/best_practices.mdx
+++ b/dev_docs/best_practices.mdx
@@ -241,35 +241,136 @@ There are some exceptions where a separate repo makes sense. However, they are e
 
 It may be tempting to get caught up in the dream of writing the next package which is published to npm and downloaded millions of times a week. Knowing the quality of developers that are working on Kibana, this is a real possibility. However, knowing which packages will see mass adoption is impossible to predict. Instead of jumping directly to writing code in a separate repo and accepting all of the complications that come along with it, prefer keeping code inside the Kibana repo. A [Kibana package](https://github.com/elastic/kibana/tree/master/packages) can be used to publish a package to npm, while still keeping the code inside the Kibana repo. Move code to an external repo only when there is a good reason, for example to enable external contributions.
 
-## Hardening
-
-Review the following items related to vulnerability and security risks.
-
-- XSS
-  - Check for usages of `dangerouslySetInnerHtml`, `Element.innerHTML`, `Element.outerHTML`
-  - Ensure all user input is properly escaped.
-  - Ensure any input in `$.html`, `$.append`, `$.appendTo`, $.prepend`, `$.prependTo`is escaped. Instead use`$.text`, or don't use jQuery at all.
-- CSRF
-  - Ensure all APIs are running inside the Kibana HTTP service.
-- RCE
-  - Ensure no usages of `eval`
-  - Ensure no usages of dynamic requires
-  - Check for template injection
-  - Check for usages of templating libraries, including `_.template`, and ensure that user provided input isn't influencing the template and is only used as data for rendering the template.
-  - Check for possible prototype pollution.
-- Prototype Pollution - more info [here](https://docs.google.com/document/d/19V-d9sb6IF-fbzF4iyiPpAropQNydCnoJApzSX5FdcI/edit?usp=sharing)
-  - Check for instances of `anObject[a][b] = c` where a, b, and c are user defined. This includes code paths where the following logical code steps could be performed in separate files by completely different operations, or recursively using dynamic operations.
-  - Validate any user input, including API url-parameters/query-parameters/payloads, preferable against a schema which only allows specific keys/values. At a very minimum, black-list `__proto__` and `prototype.constructor` for use within keys
-  - When calling APIs which spawn new processes or potentially perform code generation from strings, defensively protect against Prototype Pollution by checking `Object.hasOwnProperty` if the arguments to the APIs originate from an Object. An example is the Code app's [spawnProcess](https://github.com/elastic/kibana/blob/b49192626a8528af5d888545fb14cd1ce66a72e7/x-pack/legacy/plugins/code/server/lsp/workspace_command.ts#L40-L44).
-    - Common Node.js offenders: `child_process.spawn`, `child_process.exec`, `eval`, `Function('some string')`, `vm.runIn*Context(x)`
-    - Common Client-side offenders: `eval`, `Function('some string')`, `setTimeout('some string', num)`, `setInterval('some string', num)`
-- Check for accidental reveal of sensitive information
-  - The biggest culprit is errors which contain stack traces or other sensitive information which end up in the HTTP Response
-- Checked for Mishandled API requests
-  - Ensure no sensitive cookies are forwarded to external resources.
-  - Ensure that all user controllable variables that are used in constructing a URL are escaped properly. This is relevant when using `transport.request` with the Elasticsearch client as no automatic escaping is performed.
-- Reverse tabnabbing - https://github.com/OWASP/CheatSheetSeries/blob/master/cheatsheets/HTML5_Security_Cheat_Sheet.md#tabnabbing
-  - When there are user controllable links or hard-coded links to third-party domains that specify target="\_blank" or target="\_window", the `a` tag should have the rel="noreferrer noopener" attribute specified.
-  - Allowing users to input markdown is a common culprit, a custom link renderer should be used
-- SSRF - https://www.owasp.org/index.php/Server_Side_Request_Forgery
-  - All network requests made from the Kibana server should use an explicit configuration or white-list specified in the `kibana.yml`
+## Security best practices
+
+When writing code for Kibana, be sure to follow these best practices to avoid common vulnerabilities. Refer to the included Open Web
+Application Security Project (OWASP) references to learn more about these types of attacks.
+
+### Cross-site Scripting (XSS)
+
+[_OWASP reference for XSS_](https://owasp.org/www-community/attacks/xss)
+
+XSS is a class of attacks where malicious scripts are injected into vulnerable websites. Kibana defends against this by using the React
+framework to safely encode data that is rendered in pages, the EUI framework to [automatically sanitize
+links](https://elastic.github.io/eui/#/navigation/link#link-validation), and a restrictive `Content-Security-Policy` header.
+
+**Best practices**
+
+* Check for dangerous functions or assignments that can result in unescaped user input in the browser DOM. Avoid using:
+  * **React:** [`dangerouslySetInnerHtml`](https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml).
+  * **Browser DOM:** `Element.innerHTML` and `Element.outerHTML`.
+* If using the aforementioned unsafe functions or assignments is absolutely necessary, follow [these XSS prevention
+rules](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html#xss-prevention-rules) to ensure that
+user input is not inserted into unsafe locations and that it is escaped properly.
+* Use EUI components to build your UI, particularly when rendering `href` links. Otherwise, sanitize user input before rendering links to
+ensure that they do not use the `javascript:` protocol.
+* Don't use the `eval`, `Function`, and `_.template` functions -- these are restricted by ESLint rules.
+* Be careful when using `setTimeout` and `setInterval` in client-side code. If an attacker can manipulate the arguments and pass a string to
+one of these, it is evaluated dynamically, which is equivalent to the dangerous `eval` function.
+
+### Cross-Site Request Forgery (CSRF/XSRF)
+
+[_OWASP reference for CSRF_](https://owasp.org/www-community/attacks/csrf)
+
+CSRF is a class of attacks where a user is forced to execute an action on a vulnerable website that they're logged into, usually without
+their knowledge. Kibana defends against this by requiring [custom request
+headers](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#use-of-custom-request-headers)
+for API endpoints. For more information, see [API Request
+Headers](https://www.elastic.co/guide/en/kibana/master/api.html#api-request-headers).
+
+**Best practices**
+
+* Ensure all HTTP routes are registered with the [Kibana HTTP service](https://www.elastic.co/guide/en/kibana/master/http-service.html) to
+take advantage of the custom request header security control.
+  * Note that HTTP GET requests do **not** require the custom request header; any routes that change data should [adhere to the HTTP
+specification and use a different method (PUT, POST, etc.)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods)
+
+### Remote Code Execution (RCE)
+
+[_OWASP reference for Command Injection_](https://owasp.org/www-community/attacks/Command_Injection),
+[_OWASP reference for Code Injection_](https://owasp.org/www-community/attacks/Code_Injection)
+
+RCE is a class of attacks where an attacker executes malicious code or commands on a vulnerable server. Kibana defends against this by using
+ESLint rules to restrict vulnerable functions, and by hooking into or hardening usage of these in third-party dependencies.
+
+**Best practices**
+
+* Don't use the `eval`, `Function`, and `_.template` functions -- these are restricted by ESLint rules.
+* Don't use dynamic `require`.
+* Check for usages of templating libraries. Ensure that user-provided input doesn't influence the template and is used only as data for
+rendering the template.
+* Take extra caution when spawning child processes with any user input or parameters that are user-controlled.
+
+### Prototype Pollution
+
+Prototype Pollution is an attack that is unique to JavaScript environments. Attackers can abuse JavaScript's prototype inheritance to
+"pollute" objects in the application, which is often used as a vector for XSS or RCE vulnerabilities. Kibana defends against this by
+hardening sensitive functions (such as those exposed by `child_process`), and by requiring validation on all HTTP routes by default.
+
+**Best practices**
+
+* Check for instances of `anObject[a][b] = c` where `a`, `b`, and `c` are controlled by user input. This includes code paths where the
+following logical code steps could be performed in separate files by completely different operations, or by recursively using dynamic
+operations.
+* Validate all user input, including API URL parameters, query parameters, and payloads. Preferably, use a schema that only allows specific
+keys and values. At a minimum, implement a deny-list that prevents `__proto__` and `prototype.constructor` from being used within object
+keys.
+* When calling APIs that spawn new processes or perform code generation from strings, protect against Prototype Pollution by checking if
+`Object.hasOwnProperty` has arguments to the APIs that originate from an Object. An example is the defunct Code app's
+[`spawnProcess`](https://github.com/elastic/kibana/blob/b49192626a8528af5d888545fb14cd1ce66a72e7/x-pack/legacy/plugins/code/server/lsp/workspace_command.ts#L40-L44)
+function.
+  * Common Node.js offenders: `child_process.spawn`, `child_process.exec`, `eval`, `Function('some string')`, `vm.runInContext(x)`,
+`vm.runInNewContext(x)`, `vm.runInThisContext()`
+  * Common client-side offenders: `eval`, `Function('some string')`, `setTimeout('some string', num)`, `setInterval('some string', num)`
+
+See also:
+
+* [Prototype pollution: The dangerous and underrated vulnerability impacting JavaScript applications |
+portswigger.net](https://portswigger.net/daily-swig/prototype-pollution-the-dangerous-and-underrated-vulnerability-impacting-javascript-applications)
+* [Prototype pollution attack in NodeJS application | Olivier
+Arteau](https://github.com/HoLyVieR/prototype-pollution-nsec18/blob/master/paper/JavaScript_prototype_pollution_attack_in_NodeJS.pdf)
+
+### Server-Side Request Forgery (SSRF)
+
+[_OWASP reference for SSRF_](https://owasp.org/www-community/attacks/Server_Side_Request_Forgery)
+
+SSRF is a class of attacks where a vulnerable server is forced to make an unintended request, usually to an HTTP API. This is often used as
+a vector for information disclosure or injection attacks.
+
+**Best practices**
+
+* Ensure that all outbound requests from the Kibana server use hard-coded URLs.
+* If user input is used to construct a URL for an outbound request, ensure that an allow-list is used to validate the endpoints and that
+user input is escaped properly. Ideally, the allow-list should be set in `kibana.yml`, so only server administrators can change it.
+  * This is particularly relevant when using `transport.request` with the Elasticsearch client, as no automatic escaping is performed.
+  * Note that URLs are very hard to validate properly; exact match validation for user input is most preferable, while URL parsing or RegEx
+validation should only be used if absolutely necessary.
+
+### Reverse tabnabbing
+
+[_OWASP reference for Reverse Tabnabbing_](https://owasp.org/www-community/attacks/Reverse_Tabnabbing)
+
+Reverse tabnabbing is an attack where a link to a malicious page is used to rewrite a vulnerable parent page. This is often used as a vector
+for phishing attacks. Kibana defends against this by using the EUI framework, which automatically adds the `rel` attribute to anchor tags,
+buttons, and other vulnerable DOM elements.
+
+**Best practices**
+
+* Use EUI components to build your UI whenever possible. Otherwise, ensure that any DOM elements that have an `href` attribute also have the
+`rel="noreferrer noopener"` attribute specified. For more information, refer to the [OWASP HTML5 Security Cheat
+Sheet](https://github.com/OWASP/CheatSheetSeries/blob/master/cheatsheets/HTML5_Security_Cheat_Sheet.md#tabnabbing).
+* If using a non-EUI markdown renderer, use a custom link renderer for rendered links.
+
+### Information disclosure
+
+Information disclosure is not an attack, but it describes whenever sensitive information is accidentally revealed. This can be configuration
+info, stack traces, or other data that the user is not authorized to access. This concern cannot be addressed with a single security
+control, but at a high level, Kibana relies on the hapi framework to automatically redact stack traces and detailed error messages in HTTP
+5xx response payloads.
+
+**Best practices**
+
+* Look for instances where sensitive information might accidentally be revealed, particularly in error messages, in the UI, and URL
+parameters that are exposed to users.
+* Make sure that sensitive request data is not forwarded to external resources. For example, copying client request headers and using them
+to make an another request could accidentally expose the user's credentials.
diff --git a/docs/canvas/canvas-function-reference.asciidoc b/docs/canvas/canvas-function-reference.asciidoc
index 272cd524c2c200..ac7cbba6e9933a 100644
--- a/docs/canvas/canvas-function-reference.asciidoc
+++ b/docs/canvas/canvas-function-reference.asciidoc
@@ -71,7 +71,7 @@ Alias: `condition`
 [[alterColumn_fn]]
 === `alterColumn`
 
-Converts between core types, including `string`, `number`, `null`, `boolean`, and `date`, and renames columns. See also <<mapColumn_fn>> and <<staticColumn_fn>>.
+Converts between core types, including `string`, `number`, `null`, `boolean`, and `date`, and renames columns. See also <<mapColumn_fn>>, <<mathColumn_fn>>, and <<staticColumn_fn>>.
 
 *Expression syntax*
 [source,js]
@@ -1717,11 +1717,16 @@ Adds a column calculated as the result of other columns. Changes are made only w
 |===
 |Argument |Type |Description
 
+|`id`
+
+|`string`, `null`
+|An optional id of the resulting column. When no id is provided, the id will be looked up from the existing column by the provided name argument. If no column with this name exists yet, a new column with this name and an identical id will be added to the table.
+
 |_Unnamed_ ***
 
 Aliases: `column`, `name`
 |`string`
-|The name of the resulting column.
+|The name of the resulting column. Names are not required to be unique.
 
 |`expression` ***
 
@@ -1729,11 +1734,6 @@ Aliases: `exp`, `fn`, `function`
 |`boolean`, `number`, `string`, `null`
 |A Canvas expression that is passed to each row as a single row `datatable`.
 
-|`id`
-
-|`string`, `null`
-|An optional id of the resulting column. When not specified or `null` the name argument is used as id.
-
 |`copyMetaFrom`
 
 |`string`, `null`
@@ -1808,6 +1808,47 @@ Default: `"throw"`
 *Returns:* `number` | `boolean` | `null`
 
 
+[float]
+[[mathColumn_fn]]
+=== `mathColumn`
+
+Adds a column by evaluating `TinyMath` on each row. This function is optimized for math, so it performs better than the <<mapColumn_fn>> with a <<math_fn>>.
+*Accepts:* `datatable`
+
+[cols="3*^<"]
+|===
+|Argument |Type |Description
+
+|id ***
+|`string`
+|id of the resulting column. Must be unique.
+
+|name ***
+|`string`
+|The name of the resulting column. Names are not required to be unique.
+
+|_Unnamed_
+
+Alias: `expression`
+|`string`
+|A `TinyMath` expression evaluated on each row. See https://www.elastic.co/guide/en/kibana/current/canvas-tinymath-functions.html.
+
+|`onError`
+
+|`string`
+|In case the `TinyMath` evaluation fails or returns NaN, the return value is specified by onError. For example, `"null"`, `"zero"`, `"false"`, `"throw"`. When `"throw"`, it will throw an exception, terminating expression execution.
+
+Default: `"throw"`
+
+|`copyMetaFrom`
+
+|`string`, `null`
+|If set, the meta object from the specified column id is copied over to the specified target column. Throws an exception if the column doesn't exist
+|===
+
+*Returns:* `datatable`
+
+
 [float]
 [[metric_fn]]
 === `metric`
@@ -2581,7 +2622,7 @@ Default: `false`
 [[staticColumn_fn]]
 === `staticColumn`
 
-Adds a column with the same static value in every row. See also <<alterColumn_fn>> and <<mapColumn_fn>>.
+Adds a column with the same static value in every row. See also <<alterColumn_fn>>, <<mapColumn_fn>>, and <<mathColumn_fn>>.
 
 *Accepts:* `datatable`
 
diff --git a/docs/developer/best-practices/security.asciidoc b/docs/developer/best-practices/security.asciidoc
index 79ecb082950646..fd83aa1dff49fd 100644
--- a/docs/developer/best-practices/security.asciidoc
+++ b/docs/developer/best-practices/security.asciidoc
@@ -1,55 +1,135 @@
 [[security-best-practices]]
 == Security best practices
 
-* XSS
-** Check for usages of `dangerouslySetInnerHtml`, `Element.innerHTML`,
-`Element.outerHTML`
-** Ensure all user input is properly escaped.
-** Ensure any input in `$.html`, `$.append`, `$.appendTo`,
-latexmath:[$.prepend`, `$].prependTo`is escaped. Instead use`$.text`, or
-don’t use jQuery at all.
-* CSRF
-** Ensure all APIs are running inside the {kib} HTTP service.
-* RCE
-** Ensure no usages of `eval`
-** Ensure no usages of dynamic requires
-** Check for template injection
-** Check for usages of templating libraries, including `_.template`, and
-ensure that user provided input isn’t influencing the template and is
-only used as data for rendering the template.
-** Check for possible prototype pollution.
-* Prototype Pollution
-** Check for instances of `anObject[a][b] = c` where a, b, and c are
-user defined. This includes code paths where the following logical code
-steps could be performed in separate files by completely different
-operations, or recursively using dynamic operations.
-** Validate any user input, including API
-url-parameters/query-parameters/payloads, preferable against a schema
-which only allows specific keys/values. At a very minimum, black-list
-`__proto__` and `prototype.constructor` for use within keys
-** When calling APIs which spawn new processes or potentially perform
-code generation from strings, defensively protect against Prototype
-Pollution by checking `Object.hasOwnProperty` if the arguments to the
-APIs originate from an Object. An example is the Code app’s
-https://github.com/elastic/kibana/blob/b49192626a8528af5d888545fb14cd1ce66a72e7/x-pack/legacy/plugins/code/server/lsp/workspace_command.ts#L40-L44[spawnProcess].
-*** Common Node.js offenders: `child_process.spawn`,
-`child_process.exec`, `eval`, `Function('some string')`,
-`vm.runIn*Context(x)`
-*** Common Client-side offenders: `eval`, `Function('some string')`,
-`setTimeout('some string', num)`, `setInterval('some string', num)`
-* Check for accidental reveal of sensitive information
-** The biggest culprit is errors which contain stack traces or other
-sensitive information which end up in the HTTP Response
-* Checked for Mishandled API requests
-** Ensure no sensitive cookies are forwarded to external resources.
-** Ensure that all user controllable variables that are used in
-constructing a URL are escaped properly. This is relevant when using
-`transport.request` with the {es} client as no automatic
-escaping is performed.
-* Reverse tabnabbing -
-https://github.com/OWASP/CheatSheetSeries/blob/master/cheatsheets/HTML5_Security_Cheat_Sheet.md#tabnabbing
-** When there are user controllable links or hard-coded links to
-third-party domains that specify target="_blank" or target="_window", the a tag should have the rel="noreferrer noopener" attribute specified.
-Allowing users to input markdown is a common culprit, a custom link renderer should be used
-* SSRF - https://www.owasp.org/index.php/Server_Side_Request_Forgery
-All network requests made from the {kib} server should use an explicit configuration or white-list specified in the kibana.yml
\ No newline at end of file
+When writing code for {kib}, be sure to follow these best practices to avoid common vulnerabilities. Refer to the included Open Web
+Application Security Project (OWASP) references to learn more about these types of attacks.
+
+=== Cross-site Scripting (XSS) ===
+
+https://owasp.org/www-community/attacks/xss[_OWASP reference for XSS_]
+
+XSS is a class of attacks where malicious scripts are injected into vulnerable websites. {kib} defends against this by using the React
+framework to safely encode data that is rendered in pages, the EUI framework to
+https://elastic.github.io/eui/#/navigation/link#link-validation[automatically sanitize links], and a restrictive `Content-Security-Policy`
+header.
+
+*Best practices*
+
+* Check for dangerous functions or assignments that can result in unescaped user input in the browser DOM. Avoid using:
+** *React:* https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml[`dangerouslySetInnerHtml`].
+** *Browser DOM:* `Element.innerHTML` and `Element.outerHTML`.
+* If using the aforementioned unsafe functions or assignments is absolutely necessary, follow
+https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html#xss-prevention-rules[these XSS prevention
+rules] to ensure that user input is not inserted into unsafe locations and that it is escaped properly.
+* Use EUI components to build your UI, particularly when rendering `href` links. Otherwise, sanitize user input before rendering links to
+ensure that they do not use the `javascript:` protocol.
+* Don't use the `eval`, `Function`, and `_.template` functions -- these are restricted by ESLint rules.
+* Be careful when using `setTimeout` and `setInterval` in client-side code. If an attacker can manipulate the arguments and pass a string to
+one of these, it is evaluated dynamically, which is equivalent to the dangerous `eval` function.
+
+=== Cross-Site Request Forgery (CSRF/XSRF) ===
+
+https://owasp.org/www-community/attacks/csrf[_OWASP reference for CSRF_]
+
+CSRF is a class of attacks where a user is forced to execute an action on a vulnerable website that they're logged into, usually without
+their knowledge. {kib} defends against this by requiring
+https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#use-of-custom-request-headers[custom
+request headers] for API endpoints. For more information, see <<api-request-headers, API Request Headers>>.
+
+*Best practices*
+
+* Ensure all HTTP routes are registered with the <<http-service, {kib} HTTP service>> to take advantage of the custom request header
+security control.
+** Note that HTTP GET requests do *not* require the custom request header; any routes that change data should
+https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods[adhere to the HTTP specification and use a different method (PUT, POST, etc.)]
+
+=== Remote Code Execution (RCE) ===
+
+https://owasp.org/www-community/attacks/Command_Injection[_OWASP reference for Command Injection_],
+https://owasp.org/www-community/attacks/Code_Injection[_OWASP reference for Code Injection_]
+
+RCE is a class of attacks where an attacker executes malicious code or commands on a vulnerable server. {kib} defends against this by using
+ESLint rules to restrict vulnerable functions, and by hooking into or hardening usage of these in third-party dependencies.
+
+*Best practices*
+
+* Don't use the `eval`, `Function`, and `_.template` functions -- these are restricted by ESLint rules.
+* Don't use dynamic `require`.
+* Check for usages of templating libraries. Ensure that user-provided input doesn't influence the template and is used only as data for
+rendering the template.
+* Take extra caution when spawning child processes with any user input or parameters that are user-controlled.
+
+=== Prototype Pollution ===
+
+Prototype Pollution is an attack that is unique to JavaScript environments. Attackers can abuse JavaScript's prototype inheritance to
+"pollute" objects in the application, which is often used as a vector for XSS or RCE vulnerabilities. {kib} defends against this by
+hardening sensitive functions (such as those exposed by `child_process`), and by requiring validation on all HTTP routes by default.
+
+*Best practices*
+
+* Check for instances of `anObject[a][b] = c` where `a`, `b`, and `c` are controlled by user input. This includes code paths where the
+following logical code steps could be performed in separate files by completely different operations, or by recursively using dynamic
+operations.
+* Validate all user input, including API URL parameters, query parameters, and payloads. Preferably, use a schema that only allows specific
+keys and values. At a minimum, implement a deny-list that prevents `__proto__` and `prototype.constructor` from being used within object
+keys.
+* When calling APIs that spawn new processes or perform code generation from strings, protect against Prototype Pollution by checking if
+`Object.hasOwnProperty` has arguments to the APIs that originate from an Object. An example is the defunct Code app's
+https://github.com/elastic/kibana/blob/b49192626a8528af5d888545fb14cd1ce66a72e7/x-pack/legacy/plugins/code/server/lsp/workspace_command.ts#L40-L44[`spawnProcess`]
+function.
+** Common Node.js offenders: `child_process.spawn`, `child_process.exec`, `eval`, `Function('some string')`, `vm.runInContext(x)`,
+`vm.runInNewContext(x)`, `vm.runInThisContext()`
+** Common client-side offenders: `eval`, `Function('some string')`, `setTimeout('some string', num)`, `setInterval('some string', num)`
+
+See also:
+
+* https://portswigger.net/daily-swig/prototype-pollution-the-dangerous-and-underrated-vulnerability-impacting-javascript-applications[Prototype
+pollution: The dangerous and underrated vulnerability impacting JavaScript applications | portswigger.net]
+* https://github.com/HoLyVieR/prototype-pollution-nsec18/blob/master/paper/JavaScript_prototype_pollution_attack_in_NodeJS.pdf[Prototype
+pollution attack in NodeJS application | Olivier Arteau]
+
+=== Server-Side Request Forgery (SSRF) ===
+
+https://owasp.org/www-community/attacks/Server_Side_Request_Forgery[_OWASP reference for SSRF_]
+
+SSRF is a class of attacks where a vulnerable server is forced to make an unintended request, usually to an HTTP API. This is often used as
+a vector for information disclosure or injection attacks.
+
+*Best practices*
+
+* Ensure that all outbound requests from the {kib} server use hard-coded URLs.
+* If user input is used to construct a URL for an outbound request, ensure that an allow-list is used to validate the endpoints and that
+user input is escaped properly. Ideally, the allow-list should be set in `kibana.yml`, so only server administrators can change it.
+** This is particularly relevant when using `transport.request` with the {es} client, as no automatic escaping is performed.
+** Note that URLs are very hard to validate properly; exact match validation for user input is most preferable, while URL parsing or RegEx
+validation should only be used if absolutely necessary.
+
+=== Reverse tabnabbing ===
+
+https://owasp.org/www-community/attacks/Reverse_Tabnabbing[_OWASP reference for Reverse Tabnabbing_]
+
+Reverse tabnabbing is an attack where a link to a malicious page is used to rewrite a vulnerable parent page. This is often used as a vector
+for phishing attacks. {kib} defends against this by using the EUI framework, which automatically adds the `rel` attribute to anchor tags,
+buttons, and other vulnerable DOM elements.
+
+*Best practices*
+
+* Use EUI components to build your UI whenever possible. Otherwise, ensure that any DOM elements that have an `href` attribute also have the
+`rel="noreferrer noopener"` attribute specified. For more information, refer to the
+https://github.com/OWASP/CheatSheetSeries/blob/master/cheatsheets/HTML5_Security_Cheat_Sheet.md#tabnabbing[OWASP HTML5 Security Cheat
+Sheet].
+* If using a non-EUI markdown renderer, use a custom link renderer for rendered links.
+
+=== Information disclosure ===
+
+Information disclosure is not an attack, but it describes whenever sensitive information is accidentally revealed. This can be configuration
+info, stack traces, or other data that the user is not authorized to access. This concern cannot be addressed with a single security
+control, but at a high level, {kib} relies on the hapi framework to automatically redact stack traces and detailed error messages in HTTP
+5xx response payloads.
+
+*Best practices*
+
+* Look for instances where sensitive information might accidentally be revealed, particularly in error messages, in the UI, and URL
+parameters that are exposed to users.
+* Make sure that sensitive request data is not forwarded to external resources. For example, copying client request headers and using them
+to make an another request could accidentally expose the user's credentials.
diff --git a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.plugin._constructor_.md b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.dataplugin._constructor_.md
similarity index 68%
rename from docs/development/plugins/data/public/kibana-plugin-plugins-data-public.plugin._constructor_.md
rename to docs/development/plugins/data/public/kibana-plugin-plugins-data-public.dataplugin._constructor_.md
index 64108a7c7be33a..3eaf2176edf261 100644
--- a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.plugin._constructor_.md
+++ b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.dataplugin._constructor_.md
@@ -1,8 +1,8 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-[Home](./index.md) &gt; [kibana-plugin-plugins-data-public](./kibana-plugin-plugins-data-public.md) &gt; [Plugin](./kibana-plugin-plugins-data-public.plugin.md) &gt; [(constructor)](./kibana-plugin-plugins-data-public.plugin._constructor_.md)
+[Home](./index.md) &gt; [kibana-plugin-plugins-data-public](./kibana-plugin-plugins-data-public.md) &gt; [DataPlugin](./kibana-plugin-plugins-data-public.dataplugin.md) &gt; [(constructor)](./kibana-plugin-plugins-data-public.dataplugin._constructor_.md)
 
-## Plugin.(constructor)
+## DataPlugin.(constructor)
 
 Constructs a new instance of the `DataPublicPlugin` class
 
diff --git a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.dataplugin.md b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.dataplugin.md
new file mode 100644
index 00000000000000..4b2cad7b428821
--- /dev/null
+++ b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.dataplugin.md
@@ -0,0 +1,26 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-plugins-data-public](./kibana-plugin-plugins-data-public.md) &gt; [DataPlugin](./kibana-plugin-plugins-data-public.dataplugin.md)
+
+## DataPlugin class
+
+<b>Signature:</b>
+
+```typescript
+export declare class DataPublicPlugin implements Plugin<DataPublicPluginSetup, DataPublicPluginStart, DataSetupDependencies, DataStartDependencies> 
+```
+
+## Constructors
+
+|  Constructor | Modifiers | Description |
+|  --- | --- | --- |
+|  [(constructor)(initializerContext)](./kibana-plugin-plugins-data-public.dataplugin._constructor_.md) |  | Constructs a new instance of the <code>DataPublicPlugin</code> class |
+
+## Methods
+
+|  Method | Modifiers | Description |
+|  --- | --- | --- |
+|  [setup(core, { bfetch, expressions, uiActions, usageCollection, inspector })](./kibana-plugin-plugins-data-public.dataplugin.setup.md) |  |  |
+|  [start(core, { uiActions })](./kibana-plugin-plugins-data-public.dataplugin.start.md) |  |  |
+|  [stop()](./kibana-plugin-plugins-data-public.dataplugin.stop.md) |  |  |
+
diff --git a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.plugin.setup.md b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.dataplugin.setup.md
similarity index 76%
rename from docs/development/plugins/data/public/kibana-plugin-plugins-data-public.plugin.setup.md
rename to docs/development/plugins/data/public/kibana-plugin-plugins-data-public.dataplugin.setup.md
index 20181a5208b522..ab1f90c1ac1049 100644
--- a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.plugin.setup.md
+++ b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.dataplugin.setup.md
@@ -1,8 +1,8 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-[Home](./index.md) &gt; [kibana-plugin-plugins-data-public](./kibana-plugin-plugins-data-public.md) &gt; [Plugin](./kibana-plugin-plugins-data-public.plugin.md) &gt; [setup](./kibana-plugin-plugins-data-public.plugin.setup.md)
+[Home](./index.md) &gt; [kibana-plugin-plugins-data-public](./kibana-plugin-plugins-data-public.md) &gt; [DataPlugin](./kibana-plugin-plugins-data-public.dataplugin.md) &gt; [setup](./kibana-plugin-plugins-data-public.dataplugin.setup.md)
 
-## Plugin.setup() method
+## DataPlugin.setup() method
 
 <b>Signature:</b>
 
diff --git a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.plugin.start.md b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.dataplugin.start.md
similarity index 70%
rename from docs/development/plugins/data/public/kibana-plugin-plugins-data-public.plugin.start.md
rename to docs/development/plugins/data/public/kibana-plugin-plugins-data-public.dataplugin.start.md
index 56934e8a29edd0..4ea7ec8cd4f65f 100644
--- a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.plugin.start.md
+++ b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.dataplugin.start.md
@@ -1,8 +1,8 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-[Home](./index.md) &gt; [kibana-plugin-plugins-data-public](./kibana-plugin-plugins-data-public.md) &gt; [Plugin](./kibana-plugin-plugins-data-public.plugin.md) &gt; [start](./kibana-plugin-plugins-data-public.plugin.start.md)
+[Home](./index.md) &gt; [kibana-plugin-plugins-data-public](./kibana-plugin-plugins-data-public.md) &gt; [DataPlugin](./kibana-plugin-plugins-data-public.dataplugin.md) &gt; [start](./kibana-plugin-plugins-data-public.dataplugin.start.md)
 
-## Plugin.start() method
+## DataPlugin.start() method
 
 <b>Signature:</b>
 
diff --git a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.plugin.stop.md b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.dataplugin.stop.md
similarity index 52%
rename from docs/development/plugins/data/public/kibana-plugin-plugins-data-public.plugin.stop.md
rename to docs/development/plugins/data/public/kibana-plugin-plugins-data-public.dataplugin.stop.md
index 8b8b63db4e03a2..b7067a01b44679 100644
--- a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.plugin.stop.md
+++ b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.dataplugin.stop.md
@@ -1,8 +1,8 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-[Home](./index.md) &gt; [kibana-plugin-plugins-data-public](./kibana-plugin-plugins-data-public.md) &gt; [Plugin](./kibana-plugin-plugins-data-public.plugin.md) &gt; [stop](./kibana-plugin-plugins-data-public.plugin.stop.md)
+[Home](./index.md) &gt; [kibana-plugin-plugins-data-public](./kibana-plugin-plugins-data-public.md) &gt; [DataPlugin](./kibana-plugin-plugins-data-public.dataplugin.md) &gt; [stop](./kibana-plugin-plugins-data-public.dataplugin.stop.md)
 
-## Plugin.stop() method
+## DataPlugin.stop() method
 
 <b>Signature:</b>
 
diff --git a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.eskuery.md b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.eskuery.md
index 5d92e348d62760..2cde2b74555851 100644
--- a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.eskuery.md
+++ b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.eskuery.md
@@ -10,6 +10,6 @@
 esKuery: {
     nodeTypes: import("../common/es_query/kuery/node_types").NodeTypes;
     fromKueryExpression: (expression: any, parseOptions?: Partial<import("../common").KueryParseOptions>) => import("../common").KueryNode;
-    toElasticsearchQuery: (node: import("../common").KueryNode, indexPattern?: import("../common").IIndexPattern | undefined, config?: Record<string, any> | undefined, context?: Record<string, any> | undefined) => import("../../kibana_utils/common").JsonObject;
+    toElasticsearchQuery: (node: import("../common").KueryNode, indexPattern?: import("../common").IIndexPattern | undefined, config?: Record<string, any> | undefined, context?: Record<string, any> | undefined) => import("@kbn/common-utils").JsonObject;
 }
 ```
diff --git a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.md b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.md
index 7f5a042e0ab818..7c023e756ebd5e 100644
--- a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.md
+++ b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.md
@@ -11,6 +11,7 @@
 |  [AggConfig](./kibana-plugin-plugins-data-public.aggconfig.md) |  |
 |  [AggConfigs](./kibana-plugin-plugins-data-public.aggconfigs.md) |  |
 |  [AggParamType](./kibana-plugin-plugins-data-public.aggparamtype.md) |  |
+|  [DataPlugin](./kibana-plugin-plugins-data-public.dataplugin.md) |  |
 |  [DuplicateIndexPatternError](./kibana-plugin-plugins-data-public.duplicateindexpatternerror.md) |  |
 |  [FieldFormat](./kibana-plugin-plugins-data-public.fieldformat.md) |  |
 |  [FilterManager](./kibana-plugin-plugins-data-public.filtermanager.md) |  |
@@ -19,7 +20,6 @@
 |  [IndexPatternsService](./kibana-plugin-plugins-data-public.indexpatternsservice.md) |  |
 |  [OptionedParamType](./kibana-plugin-plugins-data-public.optionedparamtype.md) |  |
 |  [PainlessError](./kibana-plugin-plugins-data-public.painlesserror.md) |  |
-|  [Plugin](./kibana-plugin-plugins-data-public.plugin.md) |  |
 |  [SearchInterceptor](./kibana-plugin-plugins-data-public.searchinterceptor.md) |  |
 |  [SearchSource](./kibana-plugin-plugins-data-public.searchsource.md) | \* |
 |  [SearchTimeoutError](./kibana-plugin-plugins-data-public.searchtimeouterror.md) | Request Failure - When an entire multi request fails |
diff --git a/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.eskuery.md b/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.eskuery.md
index 19cb742785e7b2..4b96d8af756f37 100644
--- a/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.eskuery.md
+++ b/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.eskuery.md
@@ -10,6 +10,6 @@
 esKuery: {
     nodeTypes: import("../common/es_query/kuery/node_types").NodeTypes;
     fromKueryExpression: (expression: any, parseOptions?: Partial<import("../common").KueryParseOptions>) => import("../common").KueryNode;
-    toElasticsearchQuery: (node: import("../common").KueryNode, indexPattern?: import("../common").IIndexPattern | undefined, config?: Record<string, any> | undefined, context?: Record<string, any> | undefined) => import("../../kibana_utils/common").JsonObject;
+    toElasticsearchQuery: (node: import("../common").KueryNode, indexPattern?: import("../common").IIndexPattern | undefined, config?: Record<string, any> | undefined, context?: Record<string, any> | undefined) => import("@kbn/common-utils").JsonObject;
 }
 ```
diff --git a/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.addpanelaction._constructor_.md b/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.addpanelaction._constructor_.md
index 388f0e064d8661..e51c465e912e68 100644
--- a/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.addpanelaction._constructor_.md
+++ b/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.addpanelaction._constructor_.md
@@ -9,7 +9,7 @@ Constructs a new instance of the `AddPanelAction` class
 <b>Signature:</b>
 
 ```typescript
-constructor(getFactory: EmbeddableStart['getEmbeddableFactory'], getAllFactories: EmbeddableStart['getEmbeddableFactories'], overlays: OverlayStart, notifications: NotificationsStart, SavedObjectFinder: React.ComponentType<any>);
+constructor(getFactory: EmbeddableStart['getEmbeddableFactory'], getAllFactories: EmbeddableStart['getEmbeddableFactories'], overlays: OverlayStart, notifications: NotificationsStart, SavedObjectFinder: React.ComponentType<any>, reportUiCounter?: ((appName: string, type: import("@kbn/analytics").UiCounterMetricType, eventNames: string | string[], count?: number | undefined) => void) | undefined);
 ```
 
 ## Parameters
@@ -21,4 +21,5 @@ constructor(getFactory: EmbeddableStart['getEmbeddableFactory'], getAllFactories
 |  overlays | <code>OverlayStart</code> |  |
 |  notifications | <code>NotificationsStart</code> |  |
 |  SavedObjectFinder | <code>React.ComponentType&lt;any&gt;</code> |  |
+|  reportUiCounter | <code>((appName: string, type: import(&quot;@kbn/analytics&quot;).UiCounterMetricType, eventNames: string &#124; string[], count?: number &#124; undefined) =&gt; void) &#124; undefined</code> |  |
 
diff --git a/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.addpanelaction.md b/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.addpanelaction.md
index 74a6c2b2183a2e..947e506f72b435 100644
--- a/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.addpanelaction.md
+++ b/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.addpanelaction.md
@@ -14,7 +14,7 @@ export declare class AddPanelAction implements Action<ActionContext>
 
 |  Constructor | Modifiers | Description |
 |  --- | --- | --- |
-|  [(constructor)(getFactory, getAllFactories, overlays, notifications, SavedObjectFinder)](./kibana-plugin-plugins-embeddable-public.addpanelaction._constructor_.md) |  | Constructs a new instance of the <code>AddPanelAction</code> class |
+|  [(constructor)(getFactory, getAllFactories, overlays, notifications, SavedObjectFinder, reportUiCounter)](./kibana-plugin-plugins-embeddable-public.addpanelaction._constructor_.md) |  | Constructs a new instance of the <code>AddPanelAction</code> class |
 
 ## Properties
 
diff --git a/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.openaddpanelflyout.md b/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.openaddpanelflyout.md
index 90caaa3035b348..db45b691b446eb 100644
--- a/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.openaddpanelflyout.md
+++ b/docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.openaddpanelflyout.md
@@ -15,6 +15,7 @@ export declare function openAddPanelFlyout(options: {
     notifications: NotificationsStart;
     SavedObjectFinder: React.ComponentType<any>;
     showCreateNewMenu?: boolean;
+    reportUiCounter?: UsageCollectionStart['reportUiCounter'];
 }): OverlayRef;
 ```
 
@@ -22,7 +23,7 @@ export declare function openAddPanelFlyout(options: {
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  options | <code>{</code><br/><code>    embeddable: IContainer;</code><br/><code>    getFactory: EmbeddableStart['getEmbeddableFactory'];</code><br/><code>    getAllFactories: EmbeddableStart['getEmbeddableFactories'];</code><br/><code>    overlays: OverlayStart;</code><br/><code>    notifications: NotificationsStart;</code><br/><code>    SavedObjectFinder: React.ComponentType&lt;any&gt;;</code><br/><code>    showCreateNewMenu?: boolean;</code><br/><code>}</code> |  |
+|  options | <code>{</code><br/><code>    embeddable: IContainer;</code><br/><code>    getFactory: EmbeddableStart['getEmbeddableFactory'];</code><br/><code>    getAllFactories: EmbeddableStart['getEmbeddableFactories'];</code><br/><code>    overlays: OverlayStart;</code><br/><code>    notifications: NotificationsStart;</code><br/><code>    SavedObjectFinder: React.ComponentType&lt;any&gt;;</code><br/><code>    showCreateNewMenu?: boolean;</code><br/><code>    reportUiCounter?: UsageCollectionStart['reportUiCounter'];</code><br/><code>}</code> |  |
 
 <b>Returns:</b>
 
diff --git a/docs/settings/task-manager-settings.asciidoc b/docs/settings/task-manager-settings.asciidoc
index 12c958c9e86838..87f5b700870ebf 100644
--- a/docs/settings/task-manager-settings.asciidoc
+++ b/docs/settings/task-manager-settings.asciidoc
@@ -28,6 +28,9 @@ Task Manager runs background tasks by polling for work on an interval.  You can
   | `xpack.task_manager.max_workers`
   | The maximum number of tasks that this Kibana instance will run simultaneously.  Defaults to 10.
     Starting in 8.0, it will not be possible to set the value greater than 100.
+
+  | `xpack.task_manager.monitored_stats_warn_delayed_task_start_in_seconds`
+  | The amount of seconds we allow a task to delay before printing a warning server log.  Defaults to 60.
 |===
 
 [float]
diff --git a/docs/siem/images/workflow.png b/docs/siem/images/workflow.png
new file mode 100644
index 00000000000000..b71c7b0ace301e
Binary files /dev/null and b/docs/siem/images/workflow.png differ
diff --git a/docs/siem/siem-ui.asciidoc b/docs/siem/siem-ui.asciidoc
index 98f8bc218aa76c..1d07e9038667b0 100644
--- a/docs/siem/siem-ui.asciidoc
+++ b/docs/siem/siem-ui.asciidoc
@@ -1,102 +1,160 @@
 [role="xpack"]
 [[siem-ui]]
-== Using Elastic Security
+== Elastic Security Overview
 
-Elastic Security is a highly interactive workspace designed for security
-analysts. It provides a clear overview of events and alerts from your
-environment, and you can use the interactive UI to drill down into areas of
-interest.
+Elastic Security combines SIEM threat detection features with endpoint
+prevention and response capabilities in one solution. These analytical and
+protection capabilities, leveraged by the speed and extensibility of
+Elasticsearch, enable analysts to defend their organization from threats before
+damage and loss occur.
 
-[float]
-[[hosts-ui]]
-=== Hosts
+Elastic Security provides the following security benefits and capabilities:
 
-The Hosts page provides key metrics regarding host-related security events, and
-data tables and histograms that let you interact with the Timeline Event Viewer.
-You can drill down for deeper insights, and drag and drop items of interest from
-the Hosts page to Timeline for further investigation.
+* A detection engine to identify attacks and system misconfigurations
+* A workspace for event triage and investigations
+* Interactive visualizations to investigate process relationships
+* Inbuilt case management with automated actions
+* Detection of signatureless attacks with prebuilt machine learning anomaly jobs
+and detection rules
 
-[role="screenshot"]
-image::siem/images/hosts-ui.png[]
-
-
-[float]
-[[network-ui]]
-=== Network
-
-The Network page displays key network activity metrics in an interactive map,
-and provides network event tables that enable interaction with Timeline.
-
-[role="screenshot"]
-image::siem/images/network-ui.png[]
-
-[float]
-[[detections-ui]]
-=== Detections (beta)
-
-The Detections feature automatically searches for threats and creates 
-alerts when they are detected. Detection rules define the conditions 
-for when alerts are created. Elastic Security comes with prebuilt rules that
-search for suspicious activity on your network and hosts. Additionally, you can
-create your own rules.
-
-See {security-guide}/detection-engine-overview.html[Detections] for information
-on managing detection rules and alerts.
-
-[role="screenshot"]
-image::siem/images/detections-ui.png[]
-
-[float]
-[[cases-ui]]
-=== Cases (beta)
-
-Cases are used to open and track security issues directly in Elastic Security. 
-Cases list the original reporter and all users who contribute to a case
-(`participants`). Case comments support Markdown syntax, and allow linking to
-saved Timelines. Additionally, you can send cases to external systems from
-within Elastic Security.
+[discrete]
+== Elastic Security components and workflow
 
-For information about opening, updating, and closing cases, see
-{security-guide}/cases-overview.html[Cases] in the Elastic Security Guide.
+The following diagram provides a comprehensive illustration of the Elastic Security workflow.
 
 [role="screenshot"]
-image::siem/images/cases-ui.png[]
-
-[float]
-[[timelines-ui]]
-=== Timeline
-
-Timeline is your workspace for threat hunting and alert investigations. 
-
-[role="screenshot"]
-image::siem/images/timeline-ui.png[Elastic Security Timeline]
-
-You can drag objects of interest into the Timeline Event Viewer to create
-exactly the query filter you need. You can drag items from table widgets within
-Hosts and Network pages, or even from within Timeline itself.
-
-A timeline is responsive and persists as you move through Elastic Security
-collecting data. 
-
-For detailed information about Timeline, see
-{security-guide}/timelines-ui.html[Investigating events in Timeline].
-
-[float]
-[[sample-workflow]]
-=== Sample workflow
-
-An analyst notices a suspicious user ID that warrants further investigation, and
-clicks a URL that links to Elastic Security. 
-
-The analyst uses the tables, histograms, and filtering and search capabilities in
-Elastic Security to get to the bottom of the alert. The analyst can drag items of
-interest to Timeline for further analysis.
-
-Within Timeline, the analyst can investigate further - drilling down,
-searching, and filtering - and add notes and pin items of interest. 
-
-The analyst can name the timeline, write summary notes, and share it with others
-if appropriate.
+image::../siem/images/workflow.png[Elastic Security workflow]
+
+Here's an overview of the flow and its components:
+
+* Data is shipped from your hosts to {es} via beat modules and the Elastic https://www.elastic.co/endpoint-security/[Endpoint Security agent integration]. This integration provides capabilities such as collecting events, detecting and preventing {security-guide}/detection-engine-overview.html#malware-prevention[malicious activity], and artifact delivery. The {fleet-guide}/fleet-overview.html[{fleet}] app is used to
+install and manage agents and integrations on your hosts.
++
+The Endpoint Security integration ships the following data sets:
++
+***  *Windows*: Process, network, file, DNS, registry, DLL and driver loads,
+malware security detections
+*** *Linux/macOS*: Process, network, file
++
+* https://www.elastic.co/integrations?solution=security[Beat modules]: {beats}
+are lightweight data shippers. Beat modules provide a way of collecting and
+parsing specific data sets from common sources, such as cloud and OS events,
+logs, and metrics. Common security-related modules are listed {security-guide}/ingest-data.html#enable-beat-modules[here].
+* The {security-app} in {kib} is used to manage the *Detection engine*,
+*Cases*, and *Timeline*, as well as administer hosts running Endpoint Security:
+** Detection engine: Automatically searches for suspicious host and network
+activity via the following:
+*** {security-guide}/detection-engine-overview.html#detection-engine-overview[Detection rules]: Periodically search the data
+({es} indices) sent from your hosts for suspicious events. When a suspicious
+event is discovered, a detection alert is generated. External systems, such as
+Slack and email, can be used to send notifications when alerts are generated.
+You can create your own rules and make use of our {security-guide}/prebuilt-rules.html[prebuilt ones].
+*** {security-guide}/detections-ui-exceptions.html[Exceptions]: Reduce noise and the number of
+false positives. Exceptions are associated with rules and prevent alerts when
+an exception's conditions are met. *Value lists* contain source event
+values that can be used as part of an exception's conditions. When
+Elastic {endpoint-sec} is installed on your hosts, you can add malware exceptions
+directly to the endpoint from the Security app.
+*** {security-guide}/machine-learning.html#included-jobs[{ml-cap} jobs]: Automatic anomaly detection of host and
+network events. Anomaly scores are provided per host and can be used with
+detection rules.
+** {security-guide}/timelines-ui.html[Timeline]: Workspace for investigating alerts and events.
+Timelines use queries and filters to drill down into events related to
+a specific incident. Timeline templates are attached to rules and use predefined
+queries when alerts are investigated. Timelines can be saved and shared with
+others, as well as attached to Cases.
+** {security-guide}/cases-overview.html[Cases]: An internal system for opening, tracking, and sharing
+security issues directly in the Security app. Cases can be integrated with
+external ticketing systems.
+** {security-guide}/admin-page-ov.html[Administration]: View and manage hosts running {endpoint-sec}.
+
+{security-guide}/ingest-data.html[Ingest data to Elastic Security] and {security-guide}/install-endpoint.html[Configure and install the Elastic Endpoint integration] describe how to ship security-related
+data to {es}.
+
+
+For more background information, see:
+
+* https://www.elastic.co/products/elasticsearch[{es}]: A real-time,
+distributed storage, search, and analytics engine. {es} excels at indexing
+streams of semi-structured data, such as logs or metrics.
+* https://www.elastic.co/products/kibana[{kib}]: An open-source analytics and
+visualization platform designed to work with {es}. You use {kib} to search,
+view, and interact with data stored in {es} indices. You can easily compile
+advanced data analysis and visualize your data in a variety of charts, tables,
+and maps.
+
+[discrete]
+=== Compatibility with cold tier nodes
+
+Cold tier is a {ref}/data-tiers.html[data tier] that holds time series data that is accessed only occasionally. In {stack} version >=7.11.0, {elastic-sec} supports cold tier data for the following {es} indices:
+
+* Index patterns specified in `securitySolution:defaultIndex`
+* Index patterns specified in the definitions of detection rules, except for indicator match rules
+* Index patterns specified in the data sources selector on various {security-app} pages
+
+{elastic-sec} does NOT support cold tier data for the following {es} indices:
+
+* Index patterns controlled by {elastic-sec}, including signals and list indices
+* Index patterns specified in indicator match rules
+
+Using cold tier data for unsupported indices may result in detection rule timeouts and overall performance degradation.
+
+[discrete]
+[[self-protection]]
+==== Elastic Endpoint self-protection
+
+Self-protection means that {elastic-endpoint} has guards against users and attackers that may try to interfere with its functionality. This protection feature is consistently enhanced to prevent attackers who may attempt to use newer, more sophisticated tactics to interfere with the {elastic-endpoint}. Self-protection is enabled by default when {elastic-endpoint} installs on supported platforms, listed below.
+
+Self-protection is enabled on the following 64-bit Windows versions:
+
+* Windows 8.1
+* Windows 10
+* Windows Server 2012 R2
+* Windows Server 2016
+* Windows Server 2019
+
+And on the following macOS versions:
+
+* macOS 10.15 (Catalina)
+* macOS 11 (Big Sur)
+
+NOTE: Other Windows and macOS variants (and all Linux distributions) do not have self-protection.
+
+For {stack} version >= 7.11.0, self-protection defines the following permissions:
+
+* Users -- even Administrator/root -- *cannot* delete {elastic-endpoint} files (located at `c:\Program Files\Elastic\Endpoint` on Windows, and `/Library/Elastic/Endpoint` on macOS).
+* Users *cannot* terminate the {elastic-endpoint} program or service.
+* Administrator/root users *can* read the endpoint's files. On Windows, the easiest way to read Endpoint files is to start an Administrator `cmd.exe` prompt. On macOS, an Administrator can use the `sudo` command.
+* Administrator/root users *can* stop the {elastic-agent}'s service. On Windows, run the `sc stop "Elastic Agent"` command. On macOS, run the `sudo launchctl stop elastic-agent` command.
+
+
+[discrete]
+[[siem-integration]]
+=== Integration with other Elastic products
+
+You can use {elastic-sec} with other Elastic products and features to help you
+identify and investigate suspicious activity:
+
+* https://www.elastic.co/products/stack/machine-learning[{ml-cap}]
+* https://www.elastic.co/products/stack/alerting[Alerting]
+* https://www.elastic.co/products/stack/canvas[Canvas]
+
+[discrete]
+[[data-sources]]
+=== APM transaction data sources
+
+By default, {elastic-sec} monitors {apm-app-ref}/apm-getting-started.html[APM]
+`apm-*-transaction*` indices. To add additional APM indices, update the
+index patterns in the `securitySolution:defaultIndex` setting ({kib} -> Stack Management -> Advanced Settings -> `securitySolution:defaultIndex`).
 
+[discrete]
+[[ecs-compliant-reqs]]
+=== ECS compliance data requirements
 
+The {ecs-ref}[Elastic Common Schema (ECS)] defines a common set of fields to be used for
+storing event data in Elasticsearch. ECS helps users normalize their event data
+to better analyze, visualize, and correlate the data represented in their
+events. {elastic-sec} supports events and indicator index data from any ECS-compliant data source.
 
+IMPORTANT: {elastic-sec} requires {ecs-ref}[ECS-compliant data]. If you use third-party data collectors to ship data to {es}, the data must be mapped to ECS.
+{security-guide}/siem-field-reference.html[Elastic Security ECS field reference] lists ECS fields used in {elastic-sec}.
diff --git a/docs/user/dashboard/aggregation-reference.asciidoc b/docs/user/dashboard/aggregation-reference.asciidoc
index 001114578a1cd0..cb5c484def3b9d 100644
--- a/docs/user/dashboard/aggregation-reference.asciidoc
+++ b/docs/user/dashboard/aggregation-reference.asciidoc
@@ -190,8 +190,8 @@ For information about {es} metrics aggregations, refer to {ref}/search-aggregati
 
 | Metrics with filters
 |
-^| X
 |
+^| X
 |
 
 | Average
diff --git a/docs/user/dashboard/images/lens_time_shift.png b/docs/user/dashboard/images/lens_time_shift.png
new file mode 100644
index 00000000000000..f7edf80bdd0d6c
Binary files /dev/null and b/docs/user/dashboard/images/lens_time_shift.png differ
diff --git a/docs/user/dashboard/lens-advanced.asciidoc b/docs/user/dashboard/lens-advanced.asciidoc
index e49db0c0d026dc..ec8d90aa4920ec 100644
--- a/docs/user/dashboard/lens-advanced.asciidoc
+++ b/docs/user/dashboard/lens-advanced.asciidoc
@@ -295,6 +295,41 @@ image::images/lens_advanced_5_2.png[Line chart with cumulative sum of orders mad
 
 . Click *Save and return*.
 
+[discrete]
+[[compare-time-ranges]]
+=== Compare time ranges
+
+*Lens* allows you to compare the currently selected time range with historical data using the *Time shift* option.
+
+Time shifts can be used on any metric. The special shift *previous* will show the time window preceding the currently selected one, spanning the same duration.
+For example, if *Last 7 days* is selected in the time filter, *previous* will show data from 14 days ago to 7 days ago.
+
+If multiple time shifts are used in a single chart, a multiple of the date histogram interval should be chosen - otherwise data points might not line up in the chart and empty spots can occur.
+For example, if a daily interval is used, shifting one series by *36h*, and another one by *1d*, is not recommended. In this scenario, either reduce the interval to *12h*, or create two separate charts.
+
+To compare current sales numbers with sales from a week ago, follow these steps: 
+
+. Open *Lens*.
+
+. From the *Chart Type* dropdown, select *Line*.
+
+. From the *Available fields* list, drag and drop *Records* to the visualization builder.
+
+. Copy the *Count of Records* series by dragging it to the empty drop target of the *Vertical axis* dimension group (*Drop a field or click to add*)
+
+. Shift the second *Count of Records* series by one week to do a week-over-week comparison
+
+.. Click the new *Count of Records [1]* dimension
+
+.. Click *Add advanced options* below the field selector
+
+.. Click *Time shift*
+
+.. Click the *1 week* option. You can also define custom shifts by typing amount followed by time unit (like *1w* for a one week shift), then hit enter.
+
+[role="screenshot"]
+image::images/lens_time_shift.png[Line chart with week-over-week sales comparison]
+
 [discrete]
 [[view-customers-over-time-by-continents]]
 === View table of customers by category over time
diff --git a/docs/user/dashboard/lens.asciidoc b/docs/user/dashboard/lens.asciidoc
index 7927489c596d77..4ecfcc92501228 100644
--- a/docs/user/dashboard/lens.asciidoc
+++ b/docs/user/dashboard/lens.asciidoc
@@ -315,3 +315,22 @@ Pagination in a data table is unsupported in *Lens*. However, the <<types-of-vis
 ===== Is it possible to have more than one y-axis scale in visualizations?
 
 *Lens* lets you pick, for each Y dimension, up to two distinct axis: *left* and *right*. Each axis can have a different scale.
+
+[float]
+[[why-is-my-value-with-the-right-color-using-value-based-coloring]]
+===== Why is my value with the incorrect color when using value-based coloring?
+
+There could be various reasons for a specific value in the table to have a different color than expected.
+
+Here's a short list of few different aspects to check:
+* Make sure the value falls within the desired color stop value defined in the panel. Color stop values are "inclusive".
+
+* Make sure you have the right value precision setup: value formatters could round the numeric values up or down.
+
+* Make sure the right color continuity option is selected: if the number is below the first color stop value, a continuity of type `Below` or `Above and below range` is required.
+
+* The default values set by the Value type are based on the current data range displayed on the data table.
+
+** If a custom `Number` configuration is used, check that the color stop values are covering the current data range.
+
+** If a `Percent` configuration is used, and the data range changes, the colors displayed are affected.
diff --git a/docs/user/reporting/reporting-troubleshooting.asciidoc b/docs/user/reporting/reporting-troubleshooting.asciidoc
index 4305b39653f8dc..d6d6190c8504b9 100644
--- a/docs/user/reporting/reporting-troubleshooting.asciidoc
+++ b/docs/user/reporting/reporting-troubleshooting.asciidoc
@@ -92,6 +92,32 @@ the first time Kibana starts when verbose logging is enabled.
 Whenever possible, a Reporting error message tries to be as self-explanatory as possible. Here are some error messages you might encounter,
 along with the solution.
 
+[float]
+==== `StatusCodeError: [version_conflict_engine_exception]`
+If you are running multiple instances of {kib} in a cluster, the instances share the work of executing report jobs to evenly distribute
+the work load. Each instance searches the reporting index for "pending" jobs that the user has requested. It is possible for
+multiple instances to find the same job in these searches. Only the instance that successfully updated the job status to
+"processing" will actually execute the report job. The other instances that unsuccessfully tried to make the same update will log
+something similar to this:
+
+[source]
+--------------------------------------------------------------------------------
+StatusCodeError: [version_conflict_engine_exception] [...]: version conflict, required seqNo [6124], primary term [1]. current document has seqNo [6125] and primary term [1], with { ... }
+  status: 409,
+  displayName: 'Conflict',
+  path: '/.reporting-...',
+  body: {
+    error: {
+      type: 'version_conflict_engine_exception',
+      reason: '[...]: version conflict, required seqNo [6124], primary term [1]. current document has seqNo [6125] and primary term [1]',
+    },
+  },
+  statusCode: 409
+}
+--------------------------------------------------------------------------------
+
+These messages alone don't indicate a problem. They show normal events that happen in a healthy system.
+
 [float]
 ==== Max attempts reached
 There are two primary causes of this error:
diff --git a/package.json b/package.json
index c9c6fa7f582c59..596bcff59797d8 100644
--- a/package.json
+++ b/package.json
@@ -156,6 +156,7 @@
     "@kbn/ui-framework": "link:packages/kbn-ui-framework",
     "@kbn/ui-shared-deps": "link:packages/kbn-ui-shared-deps",
     "@kbn/utility-types": "link:bazel-bin/packages/kbn-utility-types",
+    "@kbn/common-utils": "link:bazel-bin/packages/kbn-common-utils",
     "@kbn/utils": "link:bazel-bin/packages/kbn-utils",
     "@loaders.gl/core": "^2.3.1",
     "@loaders.gl/json": "^2.3.1",
diff --git a/packages/BUILD.bazel b/packages/BUILD.bazel
index 3e17d471a3cac0..f2510a2386aa2c 100644
--- a/packages/BUILD.bazel
+++ b/packages/BUILD.bazel
@@ -12,6 +12,7 @@ filegroup(
       "//packages/kbn-apm-utils:build",
       "//packages/kbn-babel-code-parser:build",
       "//packages/kbn-babel-preset:build",
+      "//packages/kbn-common-utils:build",
       "//packages/kbn-config:build",
       "//packages/kbn-config-schema:build",
       "//packages/kbn-crypto:build",
diff --git a/packages/kbn-common-utils/BUILD.bazel b/packages/kbn-common-utils/BUILD.bazel
new file mode 100644
index 00000000000000..02446849733537
--- /dev/null
+++ b/packages/kbn-common-utils/BUILD.bazel
@@ -0,0 +1,82 @@
+load("@npm//@bazel/typescript:index.bzl", "ts_config", "ts_project")
+load("@build_bazel_rules_nodejs//:index.bzl", "js_library", "pkg_npm")
+
+PKG_BASE_NAME = "kbn-common-utils"
+PKG_REQUIRE_NAME = "@kbn/common-utils"
+
+SOURCE_FILES = glob(
+  [
+    "src/**/*.ts",
+  ],
+  exclude = ["**/*.test.*"],
+)
+
+SRCS = SOURCE_FILES
+
+filegroup(
+  name = "srcs",
+  srcs = SRCS,
+)
+
+NPM_MODULE_EXTRA_FILES = [
+  "package.json",
+  "README.md"
+]
+
+SRC_DEPS = [
+  "//packages/kbn-config-schema",
+  "@npm//load-json-file",
+  "@npm//tslib",
+]
+
+TYPES_DEPS = [
+  "@npm//@types/jest",
+  "@npm//@types/node",
+]
+
+DEPS = SRC_DEPS + TYPES_DEPS
+
+ts_config(
+  name = "tsconfig",
+  src = "tsconfig.json",
+  deps = [
+    "//:tsconfig.base.json",
+  ],
+)
+
+ts_project(
+  name = "tsc",
+  args = ['--pretty'],
+  srcs = SRCS,
+  deps = DEPS,
+  declaration = True,
+  declaration_map = True,
+  incremental = True,
+  out_dir = "target",
+  source_map = True,
+  root_dir = "src",
+  tsconfig = ":tsconfig",
+)
+
+js_library(
+  name = PKG_BASE_NAME,
+  srcs = NPM_MODULE_EXTRA_FILES,
+  deps = DEPS + [":tsc"],
+  package_name = PKG_REQUIRE_NAME,
+  visibility = ["//visibility:public"],
+)
+
+pkg_npm(
+  name = "npm_module",
+  deps = [
+    ":%s" % PKG_BASE_NAME,
+  ]
+)
+
+filegroup(
+  name = "build",
+  srcs = [
+    ":npm_module",
+  ],
+  visibility = ["//visibility:public"],
+)
diff --git a/packages/kbn-common-utils/README.md b/packages/kbn-common-utils/README.md
new file mode 100644
index 00000000000000..7b64c9f18fe89d
--- /dev/null
+++ b/packages/kbn-common-utils/README.md
@@ -0,0 +1,3 @@
+# @kbn/common-utils
+
+Shared common (client and server sie) utilities shared across packages and plugins.
\ No newline at end of file
diff --git a/packages/kbn-common-utils/jest.config.js b/packages/kbn-common-utils/jest.config.js
new file mode 100644
index 00000000000000..08f1995c474236
--- /dev/null
+++ b/packages/kbn-common-utils/jest.config.js
@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../..',
+  roots: ['<rootDir>/packages/kbn-common-utils'],
+};
diff --git a/packages/kbn-common-utils/package.json b/packages/kbn-common-utils/package.json
new file mode 100644
index 00000000000000..db99f4d6afb985
--- /dev/null
+++ b/packages/kbn-common-utils/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@kbn/common-utils",
+  "main": "./target/index.js",
+  "browser": "./target/index.js",
+  "types": "./target/index.d.ts",
+  "version": "1.0.0",
+  "license": "SSPL-1.0 OR Elastic License 2.0",
+  "private": true
+}
\ No newline at end of file
diff --git a/packages/kbn-common-utils/src/index.ts b/packages/kbn-common-utils/src/index.ts
new file mode 100644
index 00000000000000..1b8bffe4bf1580
--- /dev/null
+++ b/packages/kbn-common-utils/src/index.ts
@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export * from './json';
diff --git a/packages/kbn-common-utils/src/json/index.ts b/packages/kbn-common-utils/src/json/index.ts
new file mode 100644
index 00000000000000..96c94df1bb48eb
--- /dev/null
+++ b/packages/kbn-common-utils/src/json/index.ts
@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { JsonArray, JsonValue, JsonObject } from './typed_json';
diff --git a/src/plugins/kibana_utils/common/typed_json.ts b/packages/kbn-common-utils/src/json/typed_json.ts
similarity index 100%
rename from src/plugins/kibana_utils/common/typed_json.ts
rename to packages/kbn-common-utils/src/json/typed_json.ts
diff --git a/packages/kbn-common-utils/tsconfig.json b/packages/kbn-common-utils/tsconfig.json
new file mode 100644
index 00000000000000..98f1b30c0d7ff2
--- /dev/null
+++ b/packages/kbn-common-utils/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "incremental": true,
+    "outDir": "target",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "sourceRoot": "../../../../packages/kbn-common-utils/src",
+    "types": [
+      "jest",
+      "node"
+    ]
+  },
+  "include": [
+    "src/**/*"
+  ]
+}
diff --git a/packages/kbn-tinymath/src/index.js b/packages/kbn-tinymath/src/index.js
index 9f1bb7b8514634..6fde4c202e2a77 100644
--- a/packages/kbn-tinymath/src/index.js
+++ b/packages/kbn-tinymath/src/index.js
@@ -7,12 +7,11 @@
  */
 
 const { get } = require('lodash');
+const memoizeOne = require('memoize-one');
 // eslint-disable-next-line import/no-unresolved
 const { parse: parseFn } = require('../grammar');
 const { functions: includedFunctions } = require('./functions');
 
-module.exports = { parse, evaluate, interpret };
-
 function parse(input, options) {
   if (input == null) {
     throw new Error('Missing expression');
@@ -29,9 +28,11 @@ function parse(input, options) {
   }
 }
 
+const memoizedParse = memoizeOne(parse);
+
 function evaluate(expression, scope = {}, injectedFunctions = {}) {
   scope = scope || {};
-  return interpret(parse(expression), scope, injectedFunctions);
+  return interpret(memoizedParse(expression), scope, injectedFunctions);
 }
 
 function interpret(node, scope, injectedFunctions) {
@@ -79,3 +80,5 @@ function isOperable(args) {
     return typeof arg === 'number' && !isNaN(arg);
   });
 }
+
+module.exports = { parse: memoizedParse, evaluate, interpret };
diff --git a/renovate.json5 b/renovate.json5
index f533eac4796508..2a3b9d740ee93b 100644
--- a/renovate.json5
+++ b/renovate.json5
@@ -39,7 +39,7 @@
         packageNames: ['@elastic/charts'],
         reviewers: ['markov00', 'nickofthyme'],
         matchBaseBranches: ['master'],
-        labels: ['release_note:skip', 'v8.0.0', 'v7.14.0'],
+        labels: ['release_note:skip', 'v8.0.0', 'v7.14.0', 'auto-backport'],
         enabled: true,
       },
       {
diff --git a/src/dev/build/tasks/os_packages/docker_generator/bundle_dockerfiles.ts b/src/dev/build/tasks/os_packages/docker_generator/bundle_dockerfiles.ts
index a633e919cc5db2..5f0665692b46f6 100644
--- a/src/dev/build/tasks/os_packages/docker_generator/bundle_dockerfiles.ts
+++ b/src/dev/build/tasks/os_packages/docker_generator/bundle_dockerfiles.ts
@@ -42,7 +42,7 @@ export async function bundleDockerFiles(config: Config, log: ToolingLog, scope:
     await copyAll(resolve(scope.dockerBuildDir), resolve(dockerFilesBuildDir), {
       select: ['LICENSE'],
     });
-    const templates = ['hardening_manifest.yml', 'README.md'];
+    const templates = ['hardening_manifest.yaml', 'README.md'];
     for (const template of templates) {
       const file = readFileSync(resolve(__dirname, 'templates/ironbank', template));
       const output = Mustache.render(file.toString(), scope);
diff --git a/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker b/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker
index a1838c571ea0be..f82a21c2f520cf 100755
--- a/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker
+++ b/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker
@@ -322,6 +322,7 @@ kibana_vars=(
     xpack.task_manager.monitored_aggregated_stats_refresh_rate
     xpack.task_manager.monitored_stats_required_freshness
     xpack.task_manager.monitored_stats_running_average_window
+    xpack.task_manager.monitored_stats_warn_delayed_task_start_in_seconds
     xpack.task_manager.monitored_task_execution_thresholds
     xpack.task_manager.poll_interval
     xpack.task_manager.request_capacity
diff --git a/src/dev/build/tasks/os_packages/docker_generator/templates/ironbank/Dockerfile b/src/dev/build/tasks/os_packages/docker_generator/templates/ironbank/Dockerfile
index 1654377b241d84..c1335f6c7a3969 100644
--- a/src/dev/build/tasks/os_packages/docker_generator/templates/ironbank/Dockerfile
+++ b/src/dev/build/tasks/os_packages/docker_generator/templates/ironbank/Dockerfile
@@ -4,7 +4,7 @@
 ################################################################################
 ARG BASE_REGISTRY=registry1.dsop.io
 ARG BASE_IMAGE=redhat/ubi/ubi8
-ARG BASE_TAG=8.3
+ARG BASE_TAG=8.4
 
 FROM ${BASE_REGISTRY}/${BASE_IMAGE}:${BASE_TAG} as prep_files
 
@@ -59,7 +59,7 @@ COPY --chown=1000:0 config/kibana.yml /usr/share/kibana/config/kibana.yml
 
 # Add the launcher/wrapper script. It knows how to interpret environment
 # variables and translate them to Kibana CLI options.
-COPY --chown=1000:0 scripts/kibana-docker /usr/local/bin/
+COPY --chown=1000:0 bin/kibana-docker /usr/local/bin/
 
 # Remove the suid bit everywhere to mitigate "Stack Clash"
 RUN find / -xdev -perm -4000 -exec chmod u-s {} +
diff --git a/src/dev/build/tasks/os_packages/docker_generator/templates/ironbank/hardening_manifest.yml b/src/dev/build/tasks/os_packages/docker_generator/templates/ironbank/hardening_manifest.yaml
similarity index 99%
rename from src/dev/build/tasks/os_packages/docker_generator/templates/ironbank/hardening_manifest.yml
rename to src/dev/build/tasks/os_packages/docker_generator/templates/ironbank/hardening_manifest.yaml
index 8de5ac29733588..2e65e68bc28827 100644
--- a/src/dev/build/tasks/os_packages/docker_generator/templates/ironbank/hardening_manifest.yml
+++ b/src/dev/build/tasks/os_packages/docker_generator/templates/ironbank/hardening_manifest.yaml
@@ -14,7 +14,7 @@ tags:
 # Build args passed to Dockerfile ARGs
 args:
   BASE_IMAGE: 'redhat/ubi/ubi8'
-  BASE_TAG: '8.3'
+  BASE_TAG: '8.4'
 
 # Docker image labels
 labels:
diff --git a/src/dev/typescript/build_ts_refs.ts b/src/dev/typescript/build_ts_refs.ts
index 2e25827996e453..26425b7a3e61df 100644
--- a/src/dev/typescript/build_ts_refs.ts
+++ b/src/dev/typescript/build_ts_refs.ts
@@ -13,12 +13,20 @@ import { ToolingLog, REPO_ROOT } from '@kbn/dev-utils';
 
 export const REF_CONFIG_PATHS = [Path.resolve(REPO_ROOT, 'tsconfig.refs.json')];
 
-export async function buildAllTsRefs(log: ToolingLog) {
+export async function buildAllTsRefs(log: ToolingLog): Promise<{ failed: boolean }> {
   for (const path of REF_CONFIG_PATHS) {
     const relative = Path.relative(REPO_ROOT, path);
     log.debug(`Building TypeScript projects refs for ${relative}...`);
-    await execa(require.resolve('typescript/bin/tsc'), ['-b', relative, '--pretty'], {
-      cwd: REPO_ROOT,
-    });
+    const { failed, stdout } = await execa(
+      require.resolve('typescript/bin/tsc'),
+      ['-b', relative, '--pretty'],
+      {
+        cwd: REPO_ROOT,
+        reject: false,
+      }
+    );
+    log.info(stdout);
+    if (failed) return { failed };
   }
+  return { failed: false };
 }
diff --git a/src/dev/typescript/run_type_check_cli.ts b/src/dev/typescript/run_type_check_cli.ts
index f95c230f44b9e4..d9e9eb036fe0f2 100644
--- a/src/dev/typescript/run_type_check_cli.ts
+++ b/src/dev/typescript/run_type_check_cli.ts
@@ -69,7 +69,11 @@ export async function runTypeCheckCli() {
     process.exit();
   }
 
-  await buildAllTsRefs(log);
+  const { failed } = await buildAllTsRefs(log);
+  if (failed) {
+    log.error('Unable to build TS project refs');
+    process.exit(1);
+  }
 
   const tscArgs = [
     // composite project cannot be used with --noEmit
diff --git a/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx b/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx
index 1cfa39d5e0e79b..e5f89bd6a8e909 100644
--- a/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx
+++ b/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx
@@ -132,7 +132,7 @@ export function DashboardTopNav({
 
   const trackUiMetric = usageCollection?.reportUiCounter.bind(
     usageCollection,
-    DashboardConstants.DASHBOARDS_ID
+    DashboardConstants.DASHBOARD_ID
   );
 
   useEffect(() => {
@@ -163,6 +163,7 @@ export function DashboardTopNav({
           notifications: core.notifications,
           overlays: core.overlays,
           SavedObjectFinder: getSavedObjectFinder(core.savedObjects, uiSettings),
+          reportUiCounter: usageCollection?.reportUiCounter,
         }),
       }));
     }
@@ -174,6 +175,7 @@ export function DashboardTopNav({
     core.savedObjects,
     core.overlays,
     uiSettings,
+    usageCollection,
   ]);
 
   const createNewVisType = useCallback(
@@ -183,7 +185,7 @@ export function DashboardTopNav({
 
       if (visType) {
         if (trackUiMetric) {
-          trackUiMetric(METRIC_TYPE.CLICK, visType.name);
+          trackUiMetric(METRIC_TYPE.CLICK, `${visType.name}:create`);
         }
 
         if ('aliasPath' in visType) {
diff --git a/src/plugins/dashboard/public/application/top_nav/editor_menu.tsx b/src/plugins/dashboard/public/application/top_nav/editor_menu.tsx
index 90cf0fcd571a15..74d725bb4d1045 100644
--- a/src/plugins/dashboard/public/application/top_nav/editor_menu.tsx
+++ b/src/plugins/dashboard/public/application/top_nav/editor_menu.tsx
@@ -51,7 +51,7 @@ export const EditorMenu = ({ dashboardContainer, createNewVisType }: Props) => {
 
   const trackUiMetric = usageCollection?.reportUiCounter.bind(
     usageCollection,
-    DashboardConstants.DASHBOARDS_ID
+    DashboardConstants.DASHBOARD_ID
   );
 
   const createNewAggsBasedVis = useCallback(
diff --git a/src/plugins/data/common/es_query/kuery/ast/ast.ts b/src/plugins/data/common/es_query/kuery/ast/ast.ts
index 5b22e3b3a3e0ea..be821289699689 100644
--- a/src/plugins/data/common/es_query/kuery/ast/ast.ts
+++ b/src/plugins/data/common/es_query/kuery/ast/ast.ts
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { JsonObject } from '@kbn/common-utils';
 import { nodeTypes } from '../node_types/index';
 import { KQLSyntaxError } from '../kuery_syntax_error';
 import { KueryNode, DslQuery, KueryParseOptions } from '../types';
@@ -13,7 +14,6 @@ import { IIndexPattern } from '../../../index_patterns/types';
 
 // @ts-ignore
 import { parse as parseKuery } from './_generated_/kuery';
-import { JsonObject } from '../../../../../kibana_utils/common';
 
 const fromExpression = (
   expression: string | DslQuery,
diff --git a/src/plugins/data/common/es_query/kuery/node_types/named_arg.ts b/src/plugins/data/common/es_query/kuery/node_types/named_arg.ts
index c65f195040b185..b1b202e4323af7 100644
--- a/src/plugins/data/common/es_query/kuery/node_types/named_arg.ts
+++ b/src/plugins/data/common/es_query/kuery/node_types/named_arg.ts
@@ -7,10 +7,10 @@
  */
 
 import _ from 'lodash';
+import { JsonObject } from '@kbn/common-utils';
 import * as ast from '../ast';
 import { nodeTypes } from '../node_types';
 import { NamedArgTypeBuildNode } from './types';
-import { JsonObject } from '../../../../../kibana_utils/common';
 
 export function buildNode(name: string, value: any): NamedArgTypeBuildNode {
   const argumentNode =
diff --git a/src/plugins/data/common/es_query/kuery/node_types/types.ts b/src/plugins/data/common/es_query/kuery/node_types/types.ts
index 196890ed0f7a3a..b3247a0ad8dc21 100644
--- a/src/plugins/data/common/es_query/kuery/node_types/types.ts
+++ b/src/plugins/data/common/es_query/kuery/node_types/types.ts
@@ -10,8 +10,8 @@
  * WARNING: these typings are incomplete
  */
 
+import { JsonValue } from '@kbn/common-utils';
 import { IIndexPattern } from '../../../index_patterns';
-import { JsonValue } from '../../../../../kibana_utils/common';
 import { KueryNode } from '..';
 
 export type FunctionName =
diff --git a/src/plugins/data/public/index.ts b/src/plugins/data/public/index.ts
index ba873952c9841f..078dd3a9b7c5ab 100644
--- a/src/plugins/data/public/index.ts
+++ b/src/plugins/data/public/index.ts
@@ -276,9 +276,8 @@ export { DuplicateIndexPatternError } from '../common/index_patterns/errors';
  * Autocomplete query suggestions:
  */
 
-export {
+export type {
   QuerySuggestion,
-  QuerySuggestionTypes,
   QuerySuggestionGetFn,
   QuerySuggestionGetFnArgs,
   QuerySuggestionBasic,
@@ -286,6 +285,7 @@ export {
   AutocompleteStart,
 } from './autocomplete';
 
+export { QuerySuggestionTypes } from './autocomplete';
 /*
  * Search:
  */
@@ -320,25 +320,23 @@ import {
   tabifyGetColumns,
 } from '../common';
 
-export {
+export { AggGroupLabels, AggGroupNames, METRIC_TYPES, BUCKET_TYPES } from '../common';
+
+export type {
   // aggs
   AggConfigSerialized,
-  AggGroupLabels,
   AggGroupName,
-  AggGroupNames,
   AggFunctionsMapping,
   AggParam,
   AggParamOption,
   AggParamType,
   AggConfigOptions,
-  BUCKET_TYPES,
   EsaggsExpressionFunctionDefinition,
   IAggConfig,
   IAggConfigs,
   IAggType,
   IFieldParamType,
   IMetricAggType,
-  METRIC_TYPES,
   OptionedParamType,
   OptionedValueProp,
   ParsedInterval,
@@ -352,30 +350,23 @@ export {
 
 export type { AggConfigs, AggConfig } from '../common';
 
-export {
+export type {
   // search
   ES_SEARCH_STRATEGY,
   EsQuerySortValue,
-  extractSearchSourceReferences,
-  getEsPreference,
-  getSearchParamsFromRequest,
   IEsSearchRequest,
   IEsSearchResponse,
   IKibanaSearchRequest,
   IKibanaSearchResponse,
-  injectSearchSourceReferences,
   ISearchSetup,
   ISearchStart,
   ISearchStartSearchSource,
   ISearchGeneric,
   ISearchSource,
-  parseSearchSourceJSON,
   SearchInterceptor,
   SearchInterceptorDeps,
   SearchRequest,
   SearchSourceFields,
-  SortDirection,
-  SearchSessionState,
   // expression functions and types
   EsdslExpressionFunctionDefinition,
   EsRawResponseExpressionTypeDefinition,
@@ -386,11 +377,21 @@ export {
   TimeoutErrorMode,
   PainlessError,
   Reason,
+  WaitUntilNextSessionCompletesOptions,
+} from './search';
+
+export {
+  parseSearchSourceJSON,
+  injectSearchSourceReferences,
+  extractSearchSourceReferences,
+  getEsPreference,
+  getSearchParamsFromRequest,
   noSearchSessionStorageCapabilityMessage,
   SEARCH_SESSIONS_MANAGEMENT_ID,
   waitUntilNextSessionCompletes$,
-  WaitUntilNextSessionCompletesOptions,
   isEsError,
+  SearchSessionState,
+  SortDirection,
 } from './search';
 
 export type {
@@ -438,33 +439,36 @@ export const search = {
  * UI components
  */
 
-export {
-  SearchBar,
+export type {
   SearchBarProps,
   StatefulSearchBarProps,
   IndexPatternSelectProps,
-  QueryStringInput,
   QueryStringInputProps,
 } from './ui';
 
+export { QueryStringInput, SearchBar } from './ui';
+
 /**
  * Types to be shared externally
  * @public
  */
-export { Filter, Query, RefreshInterval, TimeRange } from '../common';
+export type { Filter, Query, RefreshInterval, TimeRange } from '../common';
 
 export {
   createSavedQueryService,
   connectToQueryState,
   syncQueryStateWithUrl,
-  QueryState,
   getDefaultQuery,
   FilterManager,
+  TimeHistory,
+} from './query';
+
+export type {
+  QueryState,
   SavedQuery,
   SavedQueryService,
   SavedQueryTimeFilter,
   InputTimeRange,
-  TimeHistory,
   TimefilterContract,
   TimeHistoryContract,
   QueryStateChange,
@@ -472,7 +476,7 @@ export {
   AutoRefreshDoneFn,
 } from './query';
 
-export { AggsStart } from './search/aggs';
+export type { AggsStart } from './search/aggs';
 
 export {
   getTime,
@@ -496,7 +500,7 @@ export function plugin(initializerContext: PluginInitializerContext<ConfigSchema
   return new DataPublicPlugin(initializerContext);
 }
 
-export {
+export type {
   DataPublicPluginSetup,
   DataPublicPluginStart,
   IDataPluginServices,
@@ -505,4 +509,4 @@ export {
 } from './types';
 
 // Export plugin after all other imports
-export { DataPublicPlugin as Plugin };
+export type { DataPublicPlugin as DataPlugin };
diff --git a/src/plugins/data/public/mocks.ts b/src/plugins/data/public/mocks.ts
index 1277e31be2103c..9e01350add2e3b 100644
--- a/src/plugins/data/public/mocks.ts
+++ b/src/plugins/data/public/mocks.ts
@@ -6,15 +6,15 @@
  * Side Public License, v 1.
  */
 
-import { Plugin, IndexPatternsContract } from '.';
+import { DataPlugin, IndexPatternsContract } from '.';
 import { fieldFormatsServiceMock } from './field_formats/mocks';
 import { searchServiceMock } from './search/mocks';
 import { queryServiceMock } from './query/mocks';
 import { AutocompleteStart, AutocompleteSetup } from './autocomplete';
 import { createNowProviderMock } from './now_provider/mocks';
 
-export type Setup = jest.Mocked<ReturnType<Plugin['setup']>>;
-export type Start = jest.Mocked<ReturnType<Plugin['start']>>;
+export type Setup = jest.Mocked<ReturnType<DataPlugin['setup']>>;
+export type Start = jest.Mocked<ReturnType<DataPlugin['start']>>;
 
 const autocompleteSetupMock: jest.Mocked<AutocompleteSetup> = {
   getQuerySuggestions: jest.fn(),
diff --git a/src/plugins/data/public/public.api.md b/src/plugins/data/public/public.api.md
index 67534577d99fcf..d56727b468da6f 100644
--- a/src/plugins/data/public/public.api.md
+++ b/src/plugins/data/public/public.api.md
@@ -53,6 +53,7 @@ import { ISearchOptions as ISearchOptions_2 } from 'src/plugins/data/public';
 import { ISearchSource as ISearchSource_2 } from 'src/plugins/data/public';
 import { IStorageWrapper } from 'src/plugins/kibana_utils/public';
 import { IUiSettingsClient } from 'src/core/public';
+import { JsonValue } from '@kbn/common-utils';
 import { KibanaClient } from '@elastic/elasticsearch/api/kibana';
 import { Location } from 'history';
 import { LocationDescriptorObject } from 'history';
@@ -67,7 +68,7 @@ import { Observable } from 'rxjs';
 import { PackageInfo } from '@kbn/config';
 import { Path } from 'history';
 import { PeerCertificate } from 'tls';
-import { Plugin as Plugin_2 } from 'src/core/public';
+import { Plugin } from 'src/core/public';
 import { PluginInitializerContext as PluginInitializerContext_2 } from 'src/core/public';
 import { PluginInitializerContext as PluginInitializerContext_3 } from 'kibana/public';
 import { PopoverAnchorPosition } from '@elastic/eui';
@@ -621,6 +622,22 @@ export type CustomFilter = Filter & {
     query: any;
 };
 
+// Warning: (ae-forgotten-export) The symbol "DataSetupDependencies" needs to be exported by the entry point index.d.ts
+// Warning: (ae-forgotten-export) The symbol "DataStartDependencies" needs to be exported by the entry point index.d.ts
+// Warning: (ae-missing-release-tag) "DataPublicPlugin" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export class DataPlugin implements Plugin<DataPublicPluginSetup, DataPublicPluginStart, DataSetupDependencies, DataStartDependencies> {
+    // Warning: (ae-forgotten-export) The symbol "ConfigSchema" needs to be exported by the entry point index.d.ts
+    constructor(initializerContext: PluginInitializerContext_2<ConfigSchema>);
+    // (undocumented)
+    setup(core: CoreSetup<DataStartDependencies, DataPublicPluginStart>, { bfetch, expressions, uiActions, usageCollection, inspector }: DataSetupDependencies): DataPublicPluginSetup;
+    // (undocumented)
+    start(core: CoreStart_2, { uiActions }: DataStartDependencies): DataPublicPluginStart;
+    // (undocumented)
+    stop(): void;
+    }
+
 // Warning: (ae-missing-release-tag) "DataPublicPluginSetup" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public
@@ -840,7 +857,7 @@ export const esFilters: {
 export const esKuery: {
     nodeTypes: import("../common/es_query/kuery/node_types").NodeTypes;
     fromKueryExpression: (expression: any, parseOptions?: Partial<import("../common").KueryParseOptions>) => import("../common").KueryNode;
-    toElasticsearchQuery: (node: import("../common").KueryNode, indexPattern?: import("../common").IIndexPattern | undefined, config?: Record<string, any> | undefined, context?: Record<string, any> | undefined) => import("../../kibana_utils/common").JsonObject;
+    toElasticsearchQuery: (node: import("../common").KueryNode, indexPattern?: import("../common").IIndexPattern | undefined, config?: Record<string, any> | undefined, context?: Record<string, any> | undefined) => import("@kbn/common-utils").JsonObject;
 };
 
 // Warning: (ae-missing-release-tag) "esQuery" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -2004,27 +2021,11 @@ export type PhrasesFilter = Filter & {
     meta: PhrasesFilterMeta;
 };
 
-// Warning: (ae-forgotten-export) The symbol "DataSetupDependencies" needs to be exported by the entry point index.d.ts
-// Warning: (ae-forgotten-export) The symbol "DataStartDependencies" needs to be exported by the entry point index.d.ts
-// Warning: (ae-missing-release-tag) "DataPublicPlugin" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public (undocumented)
-export class Plugin implements Plugin_2<DataPublicPluginSetup, DataPublicPluginStart, DataSetupDependencies, DataStartDependencies> {
-    // Warning: (ae-forgotten-export) The symbol "ConfigSchema" needs to be exported by the entry point index.d.ts
-    constructor(initializerContext: PluginInitializerContext_2<ConfigSchema>);
-    // (undocumented)
-    setup(core: CoreSetup<DataStartDependencies, DataPublicPluginStart>, { bfetch, expressions, uiActions, usageCollection, inspector }: DataSetupDependencies): DataPublicPluginSetup;
-    // (undocumented)
-    start(core: CoreStart_2, { uiActions }: DataStartDependencies): DataPublicPluginStart;
-    // (undocumented)
-    stop(): void;
-    }
-
 // Warning: (ae-forgotten-export) The symbol "PluginInitializerContext" needs to be exported by the entry point index.d.ts
 // Warning: (ae-missing-release-tag) "plugin" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export function plugin(initializerContext: PluginInitializerContext<ConfigSchema>): Plugin;
+export function plugin(initializerContext: PluginInitializerContext<ConfigSchema>): DataPlugin;
 
 // Warning: (ae-missing-release-tag) "Query" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -2772,20 +2773,20 @@ export interface WaitUntilNextSessionCompletesOptions {
 // src/plugins/data/public/index.ts:238:27 - (ae-forgotten-export) The symbol "validateIndexPattern" needs to be exported by the entry point index.d.ts
 // src/plugins/data/public/index.ts:238:27 - (ae-forgotten-export) The symbol "flattenHitWrapper" needs to be exported by the entry point index.d.ts
 // src/plugins/data/public/index.ts:238:27 - (ae-forgotten-export) The symbol "formatHitProvider" needs to be exported by the entry point index.d.ts
-// src/plugins/data/public/index.ts:407:20 - (ae-forgotten-export) The symbol "getResponseInspectorStats" needs to be exported by the entry point index.d.ts
-// src/plugins/data/public/index.ts:407:20 - (ae-forgotten-export) The symbol "tabifyAggResponse" needs to be exported by the entry point index.d.ts
-// src/plugins/data/public/index.ts:407:20 - (ae-forgotten-export) The symbol "tabifyGetColumns" needs to be exported by the entry point index.d.ts
-// src/plugins/data/public/index.ts:409:1 - (ae-forgotten-export) The symbol "CidrMask" needs to be exported by the entry point index.d.ts
-// src/plugins/data/public/index.ts:410:1 - (ae-forgotten-export) The symbol "dateHistogramInterval" needs to be exported by the entry point index.d.ts
-// src/plugins/data/public/index.ts:419:1 - (ae-forgotten-export) The symbol "InvalidEsCalendarIntervalError" needs to be exported by the entry point index.d.ts
-// src/plugins/data/public/index.ts:420:1 - (ae-forgotten-export) The symbol "InvalidEsIntervalFormatError" needs to be exported by the entry point index.d.ts
-// src/plugins/data/public/index.ts:421:1 - (ae-forgotten-export) The symbol "IpAddress" needs to be exported by the entry point index.d.ts
-// src/plugins/data/public/index.ts:422:1 - (ae-forgotten-export) The symbol "isDateHistogramBucketAggConfig" needs to be exported by the entry point index.d.ts
-// src/plugins/data/public/index.ts:426:1 - (ae-forgotten-export) The symbol "isValidEsInterval" needs to be exported by the entry point index.d.ts
-// src/plugins/data/public/index.ts:427:1 - (ae-forgotten-export) The symbol "isValidInterval" needs to be exported by the entry point index.d.ts
-// src/plugins/data/public/index.ts:430:1 - (ae-forgotten-export) The symbol "parseInterval" needs to be exported by the entry point index.d.ts
-// src/plugins/data/public/index.ts:431:1 - (ae-forgotten-export) The symbol "propFilter" needs to be exported by the entry point index.d.ts
-// src/plugins/data/public/index.ts:434:1 - (ae-forgotten-export) The symbol "toAbsoluteDates" needs to be exported by the entry point index.d.ts
+// src/plugins/data/public/index.ts:408:20 - (ae-forgotten-export) The symbol "getResponseInspectorStats" needs to be exported by the entry point index.d.ts
+// src/plugins/data/public/index.ts:408:20 - (ae-forgotten-export) The symbol "tabifyAggResponse" needs to be exported by the entry point index.d.ts
+// src/plugins/data/public/index.ts:408:20 - (ae-forgotten-export) The symbol "tabifyGetColumns" needs to be exported by the entry point index.d.ts
+// src/plugins/data/public/index.ts:410:1 - (ae-forgotten-export) The symbol "CidrMask" needs to be exported by the entry point index.d.ts
+// src/plugins/data/public/index.ts:411:1 - (ae-forgotten-export) The symbol "dateHistogramInterval" needs to be exported by the entry point index.d.ts
+// src/plugins/data/public/index.ts:420:1 - (ae-forgotten-export) The symbol "InvalidEsCalendarIntervalError" needs to be exported by the entry point index.d.ts
+// src/plugins/data/public/index.ts:421:1 - (ae-forgotten-export) The symbol "InvalidEsIntervalFormatError" needs to be exported by the entry point index.d.ts
+// src/plugins/data/public/index.ts:422:1 - (ae-forgotten-export) The symbol "IpAddress" needs to be exported by the entry point index.d.ts
+// src/plugins/data/public/index.ts:423:1 - (ae-forgotten-export) The symbol "isDateHistogramBucketAggConfig" needs to be exported by the entry point index.d.ts
+// src/plugins/data/public/index.ts:427:1 - (ae-forgotten-export) The symbol "isValidEsInterval" needs to be exported by the entry point index.d.ts
+// src/plugins/data/public/index.ts:428:1 - (ae-forgotten-export) The symbol "isValidInterval" needs to be exported by the entry point index.d.ts
+// src/plugins/data/public/index.ts:431:1 - (ae-forgotten-export) The symbol "parseInterval" needs to be exported by the entry point index.d.ts
+// src/plugins/data/public/index.ts:432:1 - (ae-forgotten-export) The symbol "propFilter" needs to be exported by the entry point index.d.ts
+// src/plugins/data/public/index.ts:435:1 - (ae-forgotten-export) The symbol "toAbsoluteDates" needs to be exported by the entry point index.d.ts
 // src/plugins/data/public/query/state_sync/connect_to_query_state.ts:34:5 - (ae-forgotten-export) The symbol "FilterStateStore" needs to be exported by the entry point index.d.ts
 // src/plugins/data/public/search/session/session_service.ts:56:5 - (ae-forgotten-export) The symbol "UrlGeneratorStateMapping" needs to be exported by the entry point index.d.ts
 
diff --git a/src/plugins/data/server/server.api.md b/src/plugins/data/server/server.api.md
index 783bd8d2fcd0e1..c2b533bc42dc6f 100644
--- a/src/plugins/data/server/server.api.md
+++ b/src/plugins/data/server/server.api.md
@@ -38,6 +38,7 @@ import { ISearchOptions as ISearchOptions_2 } from 'src/plugins/data/public';
 import { ISearchSource } from 'src/plugins/data/public';
 import { IUiSettingsClient } from 'src/core/server';
 import { IUiSettingsClient as IUiSettingsClient_3 } from 'kibana/server';
+import { JsonValue } from '@kbn/common-utils';
 import { KibanaRequest } from 'src/core/server';
 import { KibanaRequest as KibanaRequest_2 } from 'kibana/server';
 import { Logger } from 'src/core/server';
@@ -460,7 +461,7 @@ export const esFilters: {
 export const esKuery: {
     nodeTypes: import("../common/es_query/kuery/node_types").NodeTypes;
     fromKueryExpression: (expression: any, parseOptions?: Partial<import("../common").KueryParseOptions>) => import("../common").KueryNode;
-    toElasticsearchQuery: (node: import("../common").KueryNode, indexPattern?: import("../common").IIndexPattern | undefined, config?: Record<string, any> | undefined, context?: Record<string, any> | undefined) => import("../../kibana_utils/common").JsonObject;
+    toElasticsearchQuery: (node: import("../common").KueryNode, indexPattern?: import("../common").IIndexPattern | undefined, config?: Record<string, any> | undefined, context?: Record<string, any> | undefined) => import("@kbn/common-utils").JsonObject;
 };
 
 // Warning: (ae-missing-release-tag) "esQuery" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
diff --git a/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx b/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx
index 1214625fe530f2..8cf2de8c807439 100644
--- a/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx
+++ b/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx
@@ -14,6 +14,7 @@ import deepEqual from 'fast-deep-equal';
 import { buildContextMenuForActions, UiActionsService, Action } from '../ui_actions';
 import { CoreStart, OverlayStart } from '../../../../../core/public';
 import { toMountPoint } from '../../../../kibana_react/public';
+import { UsageCollectionStart } from '../../../../usage_collection/public';
 
 import { Start as InspectorStartContract } from '../inspector';
 import {
@@ -62,6 +63,7 @@ interface Props {
   SavedObjectFinder: React.ComponentType<any>;
   stateTransfer?: EmbeddableStateTransfer;
   hideHeader?: boolean;
+  reportUiCounter?: UsageCollectionStart['reportUiCounter'];
 }
 
 interface State {
@@ -312,7 +314,8 @@ export class EmbeddablePanel extends React.Component<Props, State> {
         this.props.getAllEmbeddableFactories,
         this.props.overlays,
         this.props.notifications,
-        this.props.SavedObjectFinder
+        this.props.SavedObjectFinder,
+        this.props.reportUiCounter
       ),
       inspectPanel: new InspectPanelAction(this.props.inspector),
       removePanel: new RemovePanelAction(),
diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_action.ts b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_action.ts
index 8b6f81a199c445..49be1c3ce01233 100644
--- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_action.ts
+++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_action.ts
@@ -13,6 +13,7 @@ import { EmbeddableStart } from 'src/plugins/embeddable/public/plugin';
 import { ViewMode } from '../../../../types';
 import { openAddPanelFlyout } from './open_add_panel_flyout';
 import { IContainer } from '../../../../containers';
+import { UsageCollectionStart } from '../../../../../../../usage_collection/public';
 
 export const ACTION_ADD_PANEL = 'ACTION_ADD_PANEL';
 
@@ -29,7 +30,8 @@ export class AddPanelAction implements Action<ActionContext> {
     private readonly getAllFactories: EmbeddableStart['getEmbeddableFactories'],
     private readonly overlays: OverlayStart,
     private readonly notifications: NotificationsStart,
-    private readonly SavedObjectFinder: React.ComponentType<any>
+    private readonly SavedObjectFinder: React.ComponentType<any>,
+    private readonly reportUiCounter?: UsageCollectionStart['reportUiCounter']
   ) {}
 
   public getDisplayName() {
@@ -60,6 +62,7 @@ export class AddPanelAction implements Action<ActionContext> {
       overlays: this.overlays,
       notifications: this.notifications,
       SavedObjectFinder: this.SavedObjectFinder,
+      reportUiCounter: this.reportUiCounter,
     });
   }
 }
diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.tsx b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.tsx
index 6d6a68d7e5e2aa..eb4f0b30c51102 100644
--- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.tsx
+++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.tsx
@@ -9,15 +9,17 @@
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React, { ReactElement } from 'react';
-import { CoreSetup } from 'src/core/public';
+import { METRIC_TYPE } from '@kbn/analytics';
+import { CoreSetup, SavedObjectAttributes, SimpleSavedObject } from 'src/core/public';
 
 import { EuiContextMenuItem, EuiFlyoutBody, EuiFlyoutHeader, EuiTitle } from '@elastic/eui';
 
-import { EmbeddableStart } from 'src/plugins/embeddable/public';
+import { EmbeddableFactory, EmbeddableStart } from 'src/plugins/embeddable/public';
 import { IContainer } from '../../../../containers';
 import { EmbeddableFactoryNotFoundError } from '../../../../errors';
 import { SavedObjectFinderCreateNew } from './saved_object_finder_create_new';
 import { SavedObjectEmbeddableInput } from '../../../../embeddables';
+import { UsageCollectionStart } from '../../../../../../../usage_collection/public';
 
 interface Props {
   onClose: () => void;
@@ -27,6 +29,7 @@ interface Props {
   notifications: CoreSetup['notifications'];
   SavedObjectFinder: React.ComponentType<any>;
   showCreateNewMenu?: boolean;
+  reportUiCounter?: UsageCollectionStart['reportUiCounter'];
 }
 
 interface State {
@@ -84,7 +87,12 @@ export class AddPanelFlyout extends React.Component<Props, State> {
     }
   };
 
-  public onAddPanel = async (savedObjectId: string, savedObjectType: string, name: string) => {
+  public onAddPanel = async (
+    savedObjectId: string,
+    savedObjectType: string,
+    name: string,
+    so: SimpleSavedObject<SavedObjectAttributes>
+  ) => {
     const factoryForSavedObjectType = [...this.props.getAllFactories()].find(
       (factory) =>
         factory.savedObjectMetaData && factory.savedObjectMetaData.type === savedObjectType
@@ -98,9 +106,27 @@ export class AddPanelFlyout extends React.Component<Props, State> {
       { savedObjectId }
     );
 
+    this.doTelemetryForAddEvent(this.props.container.type, factoryForSavedObjectType, so);
+
     this.showToast(name);
   };
 
+  private doTelemetryForAddEvent(
+    appName: string,
+    factoryForSavedObjectType: EmbeddableFactory,
+    so: SimpleSavedObject<SavedObjectAttributes>
+  ) {
+    const { reportUiCounter } = this.props;
+
+    if (reportUiCounter) {
+      const type = factoryForSavedObjectType.savedObjectMetaData?.getSavedObjectSubType
+        ? factoryForSavedObjectType.savedObjectMetaData.getSavedObjectSubType(so)
+        : factoryForSavedObjectType.type;
+
+      reportUiCounter(appName, METRIC_TYPE.CLICK, `${type}:add`);
+    }
+  }
+
   private getCreateMenuItems(): ReactElement[] {
     return [...this.props.getAllFactories()]
       .filter(
diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/open_add_panel_flyout.tsx b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/open_add_panel_flyout.tsx
index f0c6e81644b3d0..fe54b3d134aa0b 100644
--- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/open_add_panel_flyout.tsx
+++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/open_add_panel_flyout.tsx
@@ -12,6 +12,7 @@ import { EmbeddableStart } from '../../../../../plugin';
 import { toMountPoint } from '../../../../../../../kibana_react/public';
 import { IContainer } from '../../../../containers';
 import { AddPanelFlyout } from './add_panel_flyout';
+import { UsageCollectionStart } from '../../../../../../../usage_collection/public';
 
 export function openAddPanelFlyout(options: {
   embeddable: IContainer;
@@ -21,6 +22,7 @@ export function openAddPanelFlyout(options: {
   notifications: NotificationsStart;
   SavedObjectFinder: React.ComponentType<any>;
   showCreateNewMenu?: boolean;
+  reportUiCounter?: UsageCollectionStart['reportUiCounter'];
 }): OverlayRef {
   const {
     embeddable,
@@ -30,6 +32,7 @@ export function openAddPanelFlyout(options: {
     notifications,
     SavedObjectFinder,
     showCreateNewMenu,
+    reportUiCounter,
   } = options;
   const flyoutSession = overlays.openFlyout(
     toMountPoint(
@@ -43,6 +46,7 @@ export function openAddPanelFlyout(options: {
         getFactory={getFactory}
         getAllFactories={getAllFactories}
         notifications={notifications}
+        reportUiCounter={reportUiCounter}
         SavedObjectFinder={SavedObjectFinder}
         showCreateNewMenu={showCreateNewMenu}
       />
diff --git a/src/plugins/embeddable/public/public.api.md b/src/plugins/embeddable/public/public.api.md
index 2a577e6167be5f..af708f9a5e6592 100644
--- a/src/plugins/embeddable/public/public.api.md
+++ b/src/plugins/embeddable/public/public.api.md
@@ -63,6 +63,7 @@ import { TransportRequestPromise } from '@elastic/elasticsearch/lib/Transport';
 import { Type } from '@kbn/config-schema';
 import { TypeOf } from '@kbn/config-schema';
 import { UiComponent } from 'src/plugins/kibana_utils/public';
+import { UiCounterMetricType } from '@kbn/analytics';
 import { UnregisterCallback } from 'history';
 import { URL } from 'url';
 import { UserProvidedValues } from 'src/core/server/types';
@@ -95,7 +96,7 @@ export interface Adapters {
 // @public (undocumented)
 export class AddPanelAction implements Action_3<ActionContext_2> {
     // Warning: (ae-forgotten-export) The symbol "React" needs to be exported by the entry point index.d.ts
-    constructor(getFactory: EmbeddableStart_2['getEmbeddableFactory'], getAllFactories: EmbeddableStart_2['getEmbeddableFactories'], overlays: OverlayStart_2, notifications: NotificationsStart_2, SavedObjectFinder: React_2.ComponentType<any>);
+    constructor(getFactory: EmbeddableStart_2['getEmbeddableFactory'], getAllFactories: EmbeddableStart_2['getEmbeddableFactories'], overlays: OverlayStart_2, notifications: NotificationsStart_2, SavedObjectFinder: React_2.ComponentType<any>, reportUiCounter?: ((appName: string, type: import("@kbn/analytics").UiCounterMetricType, eventNames: string | string[], count?: number | undefined) => void) | undefined);
     // (undocumented)
     execute(context: ActionExecutionContext_2<ActionContext_2>): Promise<void>;
     // (undocumented)
@@ -729,6 +730,7 @@ export function openAddPanelFlyout(options: {
     notifications: NotificationsStart_2;
     SavedObjectFinder: React.ComponentType<any>;
     showCreateNewMenu?: boolean;
+    reportUiCounter?: UsageCollectionStart['reportUiCounter'];
 }): OverlayRef_2;
 
 // Warning: (ae-missing-release-tag) "OutputSpec" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -890,6 +892,7 @@ export const withEmbeddableSubscription: <I extends EmbeddableInput, O extends E
 // Warnings were encountered during analysis:
 //
 // src/plugins/embeddable/common/types.ts:31:3 - (ae-forgotten-export) The symbol "SerializableState" needs to be exported by the entry point index.d.ts
+// src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/open_add_panel_flyout.tsx:25:3 - (ae-forgotten-export) The symbol "UsageCollectionStart" needs to be exported by the entry point index.d.ts
 // src/plugins/embeddable/public/lib/triggers/triggers.ts:35:5 - (ae-forgotten-export) The symbol "Datatable" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)
diff --git a/src/plugins/expressions/common/expression_functions/specs/index.ts b/src/plugins/expressions/common/expression_functions/specs/index.ts
index c6d89f41d0e0d3..e808021f751800 100644
--- a/src/plugins/expressions/common/expression_functions/specs/index.ts
+++ b/src/plugins/expressions/common/expression_functions/specs/index.ts
@@ -18,3 +18,4 @@ export * from './moving_average';
 export * from './ui_setting';
 export { mapColumn, MapColumnArguments } from './map_column';
 export { math, MathArguments, MathInput } from './math';
+export { mathColumn, MathColumnArguments } from './math_column';
diff --git a/src/plugins/expressions/common/expression_functions/specs/math_column.ts b/src/plugins/expressions/common/expression_functions/specs/math_column.ts
new file mode 100644
index 00000000000000..0ff8faf3ce55a1
--- /dev/null
+++ b/src/plugins/expressions/common/expression_functions/specs/math_column.ts
@@ -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
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { i18n } from '@kbn/i18n';
+import { ExpressionFunctionDefinition } from '../types';
+import { math, MathArguments } from './math';
+import { Datatable, DatatableColumn, getType } from '../../expression_types';
+
+export type MathColumnArguments = MathArguments & {
+  id: string;
+  name?: string;
+  copyMetaFrom?: string | null;
+};
+
+export const mathColumn: ExpressionFunctionDefinition<
+  'mathColumn',
+  Datatable,
+  MathColumnArguments,
+  Datatable
+> = {
+  name: 'mathColumn',
+  type: 'datatable',
+  inputTypes: ['datatable'],
+  help: i18n.translate('expressions.functions.mathColumnHelpText', {
+    defaultMessage:
+      'Adds a column calculated as the result of other columns. ' +
+      'Changes are made only when you provide arguments.' +
+      'See also {alterColumnFn} and {staticColumnFn}.',
+    values: {
+      alterColumnFn: '`alterColumn`',
+      staticColumnFn: '`staticColumn`',
+    },
+  }),
+  args: {
+    ...math.args,
+    id: {
+      types: ['string'],
+      help: i18n.translate('expressions.functions.mathColumn.args.idHelpText', {
+        defaultMessage: 'id of the resulting column. Must be unique.',
+      }),
+      required: true,
+    },
+    name: {
+      types: ['string'],
+      aliases: ['_', 'column'],
+      help: i18n.translate('expressions.functions.mathColumn.args.nameHelpText', {
+        defaultMessage: 'The name of the resulting column. Names are not required to be unique.',
+      }),
+      required: true,
+    },
+    copyMetaFrom: {
+      types: ['string', 'null'],
+      help: i18n.translate('expressions.functions.mathColumn.args.copyMetaFromHelpText', {
+        defaultMessage:
+          "If set, the meta object from the specified column id is copied over to the specified target column. If the column doesn't exist it silently fails.",
+      }),
+      required: false,
+      default: null,
+    },
+  },
+  fn: (input, args, context) => {
+    const columns = [...input.columns];
+    const existingColumnIndex = columns.findIndex(({ id }) => {
+      return id === args.id;
+    });
+    if (existingColumnIndex > -1) {
+      throw new Error('ID must be unique');
+    }
+
+    const newRows = input.rows.map((row) => {
+      return {
+        ...row,
+        [args.id]: math.fn(
+          {
+            type: 'datatable',
+            columns: input.columns,
+            rows: [row],
+          },
+          {
+            expression: args.expression,
+            onError: args.onError,
+          },
+          context
+        ),
+      };
+    });
+    const type = newRows.length ? getType(newRows[0][args.id]) : 'null';
+    const newColumn: DatatableColumn = {
+      id: args.id,
+      name: args.name ?? args.id,
+      meta: { type, params: { id: type } },
+    };
+    if (args.copyMetaFrom) {
+      const metaSourceFrom = columns.find(({ id }) => id === args.copyMetaFrom);
+      newColumn.meta = { ...newColumn.meta, ...(metaSourceFrom?.meta || {}) };
+    }
+
+    columns.push(newColumn);
+
+    return {
+      type: 'datatable',
+      columns,
+      rows: newRows,
+    } as Datatable;
+  },
+};
diff --git a/src/plugins/expressions/common/expression_functions/specs/tests/math_column.test.ts b/src/plugins/expressions/common/expression_functions/specs/tests/math_column.test.ts
new file mode 100644
index 00000000000000..bc6699a2b689bf
--- /dev/null
+++ b/src/plugins/expressions/common/expression_functions/specs/tests/math_column.test.ts
@@ -0,0 +1,74 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { mathColumn } from '../math_column';
+import { functionWrapper, testTable } from './utils';
+
+describe('mathColumn', () => {
+  const fn = functionWrapper(mathColumn);
+
+  it('throws if the id is used', () => {
+    expect(() => fn(testTable, { id: 'price', name: 'price', expression: 'price * 2' })).toThrow(
+      `ID must be unique`
+    );
+  });
+
+  it('applies math to each row by id', () => {
+    const result = fn(testTable, { id: 'output', name: 'output', expression: 'quantity * price' });
+    expect(result.columns).toEqual([
+      ...testTable.columns,
+      { id: 'output', name: 'output', meta: { params: { id: 'number' }, type: 'number' } },
+    ]);
+    expect(result.rows[0]).toEqual({
+      in_stock: true,
+      name: 'product1',
+      output: 60500,
+      price: 605,
+      quantity: 100,
+      time: 1517842800950,
+    });
+  });
+
+  it('handles onError', () => {
+    const args = {
+      id: 'output',
+      name: 'output',
+      expression: 'quantity / 0',
+    };
+    expect(() => fn(testTable, args)).toThrowError(`Cannot divide by 0`);
+    expect(() => fn(testTable, { ...args, onError: 'throw' })).toThrow();
+    expect(fn(testTable, { ...args, onError: 'zero' }).rows[0].output).toEqual(0);
+    expect(fn(testTable, { ...args, onError: 'false' }).rows[0].output).toEqual(false);
+    expect(fn(testTable, { ...args, onError: 'null' }).rows[0].output).toEqual(null);
+  });
+
+  it('should copy over the meta information from the specified column', async () => {
+    const result = await fn(
+      {
+        ...testTable,
+        columns: [
+          ...testTable.columns,
+          {
+            id: 'myId',
+            name: 'myName',
+            meta: { type: 'date', params: { id: 'number', params: { digits: 2 } } },
+          },
+        ],
+        rows: testTable.rows.map((row) => ({ ...row, myId: Date.now() })),
+      },
+      { id: 'output', name: 'name', copyMetaFrom: 'myId', expression: 'price + 2' }
+    );
+
+    expect(result.type).toBe('datatable');
+    expect(result.columns[result.columns.length - 1]).toEqual({
+      id: 'output',
+      name: 'name',
+      meta: { type: 'date', params: { id: 'number', params: { digits: 2 } } },
+    });
+  });
+});
diff --git a/src/plugins/expressions/common/service/expressions_services.ts b/src/plugins/expressions/common/service/expressions_services.ts
index f7afc12aa96bad..b3c01672626614 100644
--- a/src/plugins/expressions/common/service/expressions_services.ts
+++ b/src/plugins/expressions/common/service/expressions_services.ts
@@ -31,6 +31,7 @@ import {
   mapColumn,
   overallMetric,
   math,
+  mathColumn,
 } from '../expression_functions';
 
 /**
@@ -344,6 +345,7 @@ export class ExpressionsService implements PersistableStateService<ExpressionAst
       overallMetric,
       mapColumn,
       math,
+      mathColumn,
     ]) {
       this.registerFunction(fn);
     }
diff --git a/src/plugins/index_pattern_management/public/constants.ts b/src/plugins/index_pattern_management/public/constants.ts
new file mode 100644
index 00000000000000..e5010d133f0f30
--- /dev/null
+++ b/src/plugins/index_pattern_management/public/constants.ts
@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export const CONFIG_ROLLUPS = 'rollups:enableIndexPatterns';
diff --git a/src/plugins/index_pattern_management/public/mocks.ts b/src/plugins/index_pattern_management/public/mocks.ts
index 6c709fb14f08d7..7671a532d1cb86 100644
--- a/src/plugins/index_pattern_management/public/mocks.ts
+++ b/src/plugins/index_pattern_management/public/mocks.ts
@@ -19,14 +19,7 @@ import {
 } from './plugin';
 import { IndexPatternManagmentContext } from './types';
 
-const createSetupContract = (): IndexPatternManagementSetup => ({
-  creation: {
-    addCreationConfig: jest.fn(),
-  } as any,
-  list: {
-    addListConfig: jest.fn(),
-  } as any,
-});
+const createSetupContract = (): IndexPatternManagementSetup => {};
 
 const createStartContract = (): IndexPatternManagementStart => ({
   creation: {
diff --git a/src/plugins/index_pattern_management/public/plugin.ts b/src/plugins/index_pattern_management/public/plugin.ts
index e3c156927bface..d254691a0270da 100644
--- a/src/plugins/index_pattern_management/public/plugin.ts
+++ b/src/plugins/index_pattern_management/public/plugin.ts
@@ -80,12 +80,13 @@ export class IndexPatternManagementPlugin
         return mountManagementSection(core.getStartServices, params);
       },
     });
-
-    return this.indexPatternManagementService.setup({ httpClient: core.http });
   }
 
   public start(core: CoreStart, plugins: IndexPatternManagementStartDependencies) {
-    return this.indexPatternManagementService.start();
+    return this.indexPatternManagementService.start({
+      httpClient: core.http,
+      uiSettings: core.uiSettings,
+    });
   }
 
   public stop() {
diff --git a/src/plugins/index_pattern_management/public/service/creation/components/rollup_prompt/index.ts b/src/plugins/index_pattern_management/public/service/creation/components/rollup_prompt/index.ts
new file mode 100644
index 00000000000000..d1fc2fa242eb1b
--- /dev/null
+++ b/src/plugins/index_pattern_management/public/service/creation/components/rollup_prompt/index.ts
@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { RollupPrompt } from './rollup_prompt';
diff --git a/x-pack/plugins/rollup/public/index_pattern_creation/components/rollup_prompt/rollup_prompt.js b/src/plugins/index_pattern_management/public/service/creation/components/rollup_prompt/rollup_prompt.tsx
similarity index 76%
rename from x-pack/plugins/rollup/public/index_pattern_creation/components/rollup_prompt/rollup_prompt.js
rename to src/plugins/index_pattern_management/public/service/creation/components/rollup_prompt/rollup_prompt.tsx
index 9306ab082dff49..81fcdaedb90c90 100644
--- a/x-pack/plugins/rollup/public/index_pattern_creation/components/rollup_prompt/rollup_prompt.js
+++ b/src/plugins/index_pattern_management/public/service/creation/components/rollup_prompt/rollup_prompt.tsx
@@ -1,8 +1,9 @@
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
 import React from 'react';
@@ -14,7 +15,7 @@ export const RollupPrompt = () => (
   <EuiCallOut color="warning" iconType="help" title="Beta feature">
     <p>
       {i18n.translate(
-        'xpack.rollupJobs.editRollupIndexPattern.rollupPrompt.betaCalloutParagraph1Text',
+        'indexPatternManagement.editRollupIndexPattern.rollupPrompt.betaCalloutParagraph1Text',
         {
           defaultMessage:
             "Kibana's support for rollup index patterns is in beta. You might encounter issues using " +
@@ -25,7 +26,7 @@ export const RollupPrompt = () => (
     </p>
     <p>
       {i18n.translate(
-        'xpack.rollupJobs.editRollupIndexPattern.rollupPrompt.betaCalloutParagraph2Text',
+        'indexPatternManagement.editRollupIndexPattern.rollupPrompt.betaCalloutParagraph2Text',
         {
           defaultMessage:
             'You can match a rollup index pattern against one rollup index and zero or more regular ' +
diff --git a/src/plugins/index_pattern_management/public/service/creation/index.ts b/src/plugins/index_pattern_management/public/service/creation/index.ts
index 51610bc83e371b..e1f464b01e5505 100644
--- a/src/plugins/index_pattern_management/public/service/creation/index.ts
+++ b/src/plugins/index_pattern_management/public/service/creation/index.ts
@@ -8,3 +8,5 @@
 
 export { IndexPatternCreationConfig, IndexPatternCreationOption } from './config';
 export { IndexPatternCreationManager } from './manager';
+// @ts-ignore
+export { RollupIndexPatternCreationConfig } from './rollup_creation_config';
diff --git a/src/plugins/index_pattern_management/public/service/creation/manager.ts b/src/plugins/index_pattern_management/public/service/creation/manager.ts
index c139b10ebb1fe6..cc2285bbfcafb3 100644
--- a/src/plugins/index_pattern_management/public/service/creation/manager.ts
+++ b/src/plugins/index_pattern_management/public/service/creation/manager.ts
@@ -6,31 +6,36 @@
  * Side Public License, v 1.
  */
 
-import { HttpSetup } from '../../../../../core/public';
+import { once } from 'lodash';
+import { HttpStart, CoreStart } from '../../../../../core/public';
 import { IndexPatternCreationConfig, UrlHandler, IndexPatternCreationOption } from './config';
+import { CONFIG_ROLLUPS } from '../../constants';
+// @ts-ignore
+import { RollupIndexPatternCreationConfig } from './rollup_creation_config';
 
-export class IndexPatternCreationManager {
-  private configs: IndexPatternCreationConfig[] = [];
+interface IndexPatternCreationManagerStart {
+  httpClient: HttpStart;
+  uiSettings: CoreStart['uiSettings'];
+}
 
-  setup(httpClient: HttpSetup) {
-    return {
-      addCreationConfig: (Config: typeof IndexPatternCreationConfig) => {
-        const config = new Config({ httpClient });
+export class IndexPatternCreationManager {
+  start({ httpClient, uiSettings }: IndexPatternCreationManagerStart) {
+    const getConfigs = once(() => {
+      const configs: IndexPatternCreationConfig[] = [];
+      configs.push(new IndexPatternCreationConfig({ httpClient }));
 
-        if (this.configs.findIndex((c) => c.key === config.key) !== -1) {
-          throw new Error(`${config.key} exists in IndexPatternCreationManager.`);
-        }
+      if (uiSettings.isDeclared(CONFIG_ROLLUPS) && uiSettings.get(CONFIG_ROLLUPS)) {
+        configs.push(new RollupIndexPatternCreationConfig({ httpClient }));
+      }
 
-        this.configs.push(config);
-      },
-    };
-  }
+      return configs;
+    });
 
-  start() {
     const getType = (key: string | undefined): IndexPatternCreationConfig => {
+      const configs = getConfigs();
       if (key) {
-        const index = this.configs.findIndex((config) => config.key === key);
-        const config = this.configs[index];
+        const index = configs.findIndex((config) => config.key === key);
+        const config = configs[index];
 
         if (config) {
           return config;
@@ -48,7 +53,7 @@ export class IndexPatternCreationManager {
         const options: IndexPatternCreationOption[] = [];
 
         await Promise.all(
-          this.configs.map(async (config) => {
+          getConfigs().map(async (config) => {
             const option = config.getIndexPatternCreationOption
               ? await config.getIndexPatternCreationOption(urlHandler)
               : null;
diff --git a/x-pack/plugins/rollup/public/index_pattern_creation/rollup_index_pattern_creation_config.js b/src/plugins/index_pattern_management/public/service/creation/rollup_creation_config.js
similarity index 84%
rename from x-pack/plugins/rollup/public/index_pattern_creation/rollup_index_pattern_creation_config.js
rename to src/plugins/index_pattern_management/public/service/creation/rollup_creation_config.js
index 8e5203fca90347..2a85dfa01143c7 100644
--- a/x-pack/plugins/rollup/public/index_pattern_creation/rollup_index_pattern_creation_config.js
+++ b/src/plugins/index_pattern_management/public/service/creation/rollup_creation_config.js
@@ -1,43 +1,44 @@
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 
 import { RollupPrompt } from './components/rollup_prompt';
-import { IndexPatternCreationConfig } from '../../../../../src/plugins/index_pattern_management/public';
+import { IndexPatternCreationConfig } from '.';
 
 const rollupIndexPatternTypeName = i18n.translate(
-  'xpack.rollupJobs.editRollupIndexPattern.createIndex.defaultTypeName',
+  'indexPatternManagement.editRollupIndexPattern.createIndex.defaultTypeName',
   { defaultMessage: 'rollup index pattern' }
 );
 
 const rollupIndexPatternButtonText = i18n.translate(
-  'xpack.rollupJobs.editRollupIndexPattern.createIndex.defaultButtonText',
+  'indexPatternManagement.editRollupIndexPattern.createIndex.defaultButtonText',
   { defaultMessage: 'Rollup index pattern' }
 );
 
 const rollupIndexPatternButtonDescription = i18n.translate(
-  'xpack.rollupJobs.editRollupIndexPattern.createIndex.defaultButtonDescription',
+  'indexPatternManagement.editRollupIndexPattern.createIndex.defaultButtonDescription',
   { defaultMessage: 'Perform limited aggregations against summarized data' }
 );
 
 const rollupIndexPatternNoMatchError = i18n.translate(
-  'xpack.rollupJobs.editRollupIndexPattern.createIndex.noMatchError',
+  'indexPatternManagement.editRollupIndexPattern.createIndex.noMatchError',
   { defaultMessage: 'Rollup index pattern error: must match one rollup index' }
 );
 
 const rollupIndexPatternTooManyMatchesError = i18n.translate(
-  'xpack.rollupJobs.editRollupIndexPattern.createIndex.tooManyMatchesError',
+  'indexPatternManagement.editRollupIndexPattern.createIndex.tooManyMatchesError',
   { defaultMessage: 'Rollup index pattern error: can only match one rollup index' }
 );
 
 const rollupIndexPatternIndexLabel = i18n.translate(
-  'xpack.rollupJobs.editRollupIndexPattern.createIndex.indexLabel',
+  'indexPatternManagement.editRollupIndexPattern.createIndex.indexLabel',
   { defaultMessage: 'Rollup' }
 );
 
@@ -127,7 +128,7 @@ export class RollupIndexPatternCreationConfig extends IndexPatternCreationConfig
 
     if (error) {
       const errorMessage = i18n.translate(
-        'xpack.rollupJobs.editRollupIndexPattern.createIndex.uncaughtError',
+        'indexPatternManagement.editRollupIndexPattern.createIndex.uncaughtError',
         {
           defaultMessage: 'Rollup index pattern error: {error}',
           values: {
diff --git a/src/plugins/index_pattern_management/public/service/index_pattern_management_service.ts b/src/plugins/index_pattern_management/public/service/index_pattern_management_service.ts
index f30ccfcb9f3ed7..25a36faa1c3e37 100644
--- a/src/plugins/index_pattern_management/public/service/index_pattern_management_service.ts
+++ b/src/plugins/index_pattern_management/public/service/index_pattern_management_service.ts
@@ -6,11 +6,13 @@
  * Side Public License, v 1.
  */
 
-import { HttpSetup } from '../../../../core/public';
-import { IndexPatternCreationManager, IndexPatternCreationConfig } from './creation';
-import { IndexPatternListManager, IndexPatternListConfig } from './list';
-interface SetupDependencies {
-  httpClient: HttpSetup;
+import { HttpStart, CoreStart } from '../../../../core/public';
+import { IndexPatternCreationManager } from './creation';
+import { IndexPatternListManager } from './list';
+
+interface StartDependencies {
+  httpClient: HttpStart;
+  uiSettings: CoreStart['uiSettings'];
 }
 
 /**
@@ -27,23 +29,12 @@ export class IndexPatternManagementService {
     this.indexPatternListConfig = new IndexPatternListManager();
   }
 
-  public setup({ httpClient }: SetupDependencies) {
-    const creationManagerSetup = this.indexPatternCreationManager.setup(httpClient);
-    creationManagerSetup.addCreationConfig(IndexPatternCreationConfig);
-
-    const indexPatternListConfigSetup = this.indexPatternListConfig.setup();
-    indexPatternListConfigSetup.addListConfig(IndexPatternListConfig);
-
-    return {
-      creation: creationManagerSetup,
-      list: indexPatternListConfigSetup,
-    };
-  }
+  public setup() {}
 
-  public start() {
+  public start({ httpClient, uiSettings }: StartDependencies) {
     return {
-      creation: this.indexPatternCreationManager.start(),
-      list: this.indexPatternListConfig.start(),
+      creation: this.indexPatternCreationManager.start({ httpClient, uiSettings }),
+      list: this.indexPatternListConfig.start({ uiSettings }),
     };
   }
 
diff --git a/src/plugins/index_pattern_management/public/service/list/index.ts b/src/plugins/index_pattern_management/public/service/list/index.ts
index 620d4c7600733b..738b807ac76246 100644
--- a/src/plugins/index_pattern_management/public/service/list/index.ts
+++ b/src/plugins/index_pattern_management/public/service/list/index.ts
@@ -8,3 +8,5 @@
 
 export { IndexPatternListConfig } from './config';
 export { IndexPatternListManager } from './manager';
+// @ts-ignore
+export { RollupIndexPatternListConfig } from './rollup_list_config';
diff --git a/src/plugins/index_pattern_management/public/service/list/manager.ts b/src/plugins/index_pattern_management/public/service/list/manager.ts
index 22877f78d46fcd..bdb2d47057f1f2 100644
--- a/src/plugins/index_pattern_management/public/service/list/manager.ts
+++ b/src/plugins/index_pattern_management/public/service/list/manager.ts
@@ -8,31 +8,35 @@
 
 import { IIndexPattern, IFieldType } from 'src/plugins/data/public';
 import { SimpleSavedObject } from 'src/core/public';
+import { once } from 'lodash';
+import { CoreStart } from '../../../../../core/public';
 import { IndexPatternListConfig, IndexPatternTag } from './config';
+import { CONFIG_ROLLUPS } from '../../constants';
+// @ts-ignore
+import { RollupIndexPatternListConfig } from './rollup_list_config';
 
-export class IndexPatternListManager {
-  private configs: IndexPatternListConfig[] = [];
+interface IndexPatternListManagerStart {
+  uiSettings: CoreStart['uiSettings'];
+}
 
-  setup() {
-    return {
-      addListConfig: (Config: typeof IndexPatternListConfig) => {
-        const config = new Config();
+export class IndexPatternListManager {
+  start({ uiSettings }: IndexPatternListManagerStart) {
+    const getConfigs = once(() => {
+      const configs: IndexPatternListConfig[] = [];
+      configs.push(new IndexPatternListConfig());
 
-        if (this.configs.findIndex((c) => c.key === config.key) !== -1) {
-          throw new Error(`${config.key} exists in IndexPatternListManager.`);
-        }
-        this.configs.push(config);
-      },
-    };
-  }
+      if (uiSettings.isDeclared(CONFIG_ROLLUPS) && uiSettings.get(CONFIG_ROLLUPS)) {
+        configs.push(new RollupIndexPatternListConfig());
+      }
 
-  start() {
+      return configs;
+    });
     return {
       getIndexPatternTags: (
         indexPattern: IIndexPattern | SimpleSavedObject<IIndexPattern>,
         isDefault: boolean
       ) =>
-        this.configs.reduce(
+        getConfigs().reduce(
           (tags: IndexPatternTag[], config) =>
             config.getIndexPatternTags
               ? tags.concat(config.getIndexPatternTags(indexPattern, isDefault))
@@ -41,14 +45,14 @@ export class IndexPatternListManager {
         ),
 
       getFieldInfo: (indexPattern: IIndexPattern, field: IFieldType): string[] =>
-        this.configs.reduce(
+        getConfigs().reduce(
           (info: string[], config) =>
             config.getFieldInfo ? info.concat(config.getFieldInfo(indexPattern, field)) : info,
           []
         ),
 
       areScriptedFieldsEnabled: (indexPattern: IIndexPattern): boolean =>
-        this.configs.every((config) =>
+        getConfigs().every((config) =>
           config.areScriptedFieldsEnabled ? config.areScriptedFieldsEnabled(indexPattern) : true
         ),
     };
diff --git a/x-pack/plugins/rollup/public/index_pattern_list/rollup_index_pattern_list_config.js b/src/plugins/index_pattern_management/public/service/list/rollup_list_config.js
similarity index 86%
rename from x-pack/plugins/rollup/public/index_pattern_list/rollup_index_pattern_list_config.js
rename to src/plugins/index_pattern_management/public/service/list/rollup_list_config.js
index 43eee6ca27f9a0..9a80d5fd0d622b 100644
--- a/x-pack/plugins/rollup/public/index_pattern_list/rollup_index_pattern_list_config.js
+++ b/src/plugins/index_pattern_management/public/service/list/rollup_list_config.js
@@ -1,11 +1,12 @@
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
-import { IndexPatternListConfig } from '../../../../../src/plugins/index_pattern_management/public';
+import { IndexPatternListConfig } from '.';
 
 function isRollup(indexPattern) {
   return (
diff --git a/src/plugins/kibana_utils/common/index.ts b/src/plugins/kibana_utils/common/index.ts
index 76a7cb2855c6e0..773c0b96d64136 100644
--- a/src/plugins/kibana_utils/common/index.ts
+++ b/src/plugins/kibana_utils/common/index.ts
@@ -11,7 +11,6 @@ export * from './field_wildcard';
 export * from './of';
 export * from './ui';
 export * from './state_containers';
-export * from './typed_json';
 export * from './errors';
 export { AbortError, abortSignalToPromise } from './abort_utils';
 export { createGetterSetter, Get, Set } from './create_getter_setter';
diff --git a/src/plugins/kibana_utils/public/index.ts b/src/plugins/kibana_utils/public/index.ts
index 75c52e1301ea57..3d9b5db0629558 100644
--- a/src/plugins/kibana_utils/public/index.ts
+++ b/src/plugins/kibana_utils/public/index.ts
@@ -15,9 +15,6 @@ export {
   fieldWildcardFilter,
   fieldWildcardMatcher,
   Get,
-  JsonArray,
-  JsonObject,
-  JsonValue,
   of,
   Set,
   UiComponent,
diff --git a/src/plugins/saved_objects/public/finder/saved_object_finder.tsx b/src/plugins/saved_objects/public/finder/saved_object_finder.tsx
index 8d5e89664212ca..da65b5b9fdda8c 100644
--- a/src/plugins/saved_objects/public/finder/saved_object_finder.tsx
+++ b/src/plugins/saved_objects/public/finder/saved_object_finder.tsx
@@ -46,6 +46,7 @@ export interface SavedObjectMetaData<T = unknown> {
   getIconForSavedObject(savedObject: SimpleSavedObject<T>): IconType;
   getTooltipForSavedObject?(savedObject: SimpleSavedObject<T>): string;
   showSavedObject?(savedObject: SimpleSavedObject<T>): boolean;
+  getSavedObjectSubType?(savedObject: SimpleSavedObject<T>): string;
   includeFields?: string[];
 }
 
diff --git a/src/plugins/visualizations/public/embeddable/visualize_embeddable_factory.tsx b/src/plugins/visualizations/public/embeddable/visualize_embeddable_factory.tsx
index 3ccdfb7e47d70b..872132416352f5 100644
--- a/src/plugins/visualizations/public/embeddable/visualize_embeddable_factory.tsx
+++ b/src/plugins/visualizations/public/embeddable/visualize_embeddable_factory.tsx
@@ -104,6 +104,9 @@ export class VisualizeEmbeddableFactory
       }
       return visType.stage !== 'experimental';
     },
+    getSavedObjectSubType: (savedObject) => {
+      return JSON.parse(savedObject.attributes.visState).type;
+    },
   };
 
   constructor(private readonly deps: VisualizeEmbeddableFactoryDeps) {}
diff --git a/src/plugins/visualizations/public/vis_types/vis_type_alias_registry.ts b/src/plugins/visualizations/public/vis_types/vis_type_alias_registry.ts
index 2be9358e28d1ac..a8b00b15a1ede1 100644
--- a/src/plugins/visualizations/public/vis_types/vis_type_alias_registry.ts
+++ b/src/plugins/visualizations/public/vis_types/vis_type_alias_registry.ts
@@ -7,6 +7,7 @@
  */
 
 import { SavedObject } from '../../../../core/types/saved_objects';
+import { BaseVisType } from './base_vis_type';
 
 export type VisualizationStage = 'experimental' | 'beta' | 'production';
 
@@ -23,6 +24,7 @@ export interface VisualizationListItem {
   getSupportedTriggers?: () => string[];
   typeTitle: string;
   image?: string;
+  type?: BaseVisType | string;
 }
 
 export interface VisualizationsAppExtension {
diff --git a/src/plugins/visualizations/public/wizard/new_vis_modal.tsx b/src/plugins/visualizations/public/wizard/new_vis_modal.tsx
index 317f9d1bb363db..2620ae01aa15a7 100644
--- a/src/plugins/visualizations/public/wizard/new_vis_modal.tsx
+++ b/src/plugins/visualizations/public/wizard/new_vis_modal.tsx
@@ -153,7 +153,7 @@ class NewVisModal extends React.Component<TypeSelectionProps, TypeSelectionState
     searchId?: string
   ) {
     if (this.trackUiMetric) {
-      this.trackUiMetric(METRIC_TYPE.CLICK, visType.name);
+      this.trackUiMetric(METRIC_TYPE.CLICK, `${visType.name}:create`);
     }
 
     let params;
diff --git a/src/plugins/visualize/kibana.json b/src/plugins/visualize/kibana.json
index 144d33debe3c91..6570e79bb4ce63 100644
--- a/src/plugins/visualize/kibana.json
+++ b/src/plugins/visualize/kibana.json
@@ -16,7 +16,8 @@
   "optionalPlugins": [
     "home",
     "share",
-    "savedObjectsTaggingOss"
+    "savedObjectsTaggingOss",
+    "usageCollection"
   ],
   "requiredBundles": [
     "kibanaUtils",
diff --git a/src/plugins/visualize/public/application/types.ts b/src/plugins/visualize/public/application/types.ts
index da18b3b97a5225..f850aedc33366c 100644
--- a/src/plugins/visualize/public/application/types.ts
+++ b/src/plugins/visualize/public/application/types.ts
@@ -6,9 +6,19 @@
  * Side Public License, v 1.
  */
 
-import { History } from 'history';
-import { Query, Filter, DataPublicPluginStart, TimeRange } from 'src/plugins/data/public';
-import {
+import type { EventEmitter } from 'events';
+import type { History } from 'history';
+
+import type {
+  CoreStart,
+  PluginInitializerContext,
+  ChromeStart,
+  ToastsStart,
+  ScopedHistory,
+  AppMountParameters,
+} from 'kibana/public';
+
+import type {
   SavedVisState,
   VisualizationsStart,
   Vis,
@@ -17,28 +27,23 @@ import {
   PersistedState,
   VisParams,
 } from 'src/plugins/visualizations/public';
-import {
-  CoreStart,
-  PluginInitializerContext,
-  ChromeStart,
-  ToastsStart,
-  ScopedHistory,
-  AppMountParameters,
-} from 'kibana/public';
-import { NavigationPublicPluginStart as NavigationStart } from 'src/plugins/navigation/public';
-import {
+
+import type {
   Storage,
   IKbnUrlStateStorage,
   ReduxLikeStateContainer,
 } from 'src/plugins/kibana_utils/public';
-import { SharePluginStart } from 'src/plugins/share/public';
-import { SavedObjectsStart, SavedObject } from 'src/plugins/saved_objects/public';
-import { EmbeddableStart, EmbeddableStateTransfer } from 'src/plugins/embeddable/public';
-import { UrlForwardingStart } from 'src/plugins/url_forwarding/public';
-import { PresentationUtilPluginStart } from 'src/plugins/presentation_util/public';
-import { EventEmitter } from 'events';
-import { DashboardStart } from '../../../dashboard/public';
+
+import type { NavigationPublicPluginStart as NavigationStart } from 'src/plugins/navigation/public';
+import type { Query, Filter, DataPublicPluginStart, TimeRange } from 'src/plugins/data/public';
+import type { SharePluginStart } from 'src/plugins/share/public';
+import type { SavedObjectsStart, SavedObject } from 'src/plugins/saved_objects/public';
+import type { EmbeddableStart, EmbeddableStateTransfer } from 'src/plugins/embeddable/public';
+import type { UrlForwardingStart } from 'src/plugins/url_forwarding/public';
+import type { PresentationUtilPluginStart } from 'src/plugins/presentation_util/public';
+import type { DashboardStart } from '../../../dashboard/public';
 import type { SavedObjectsTaggingApi } from '../../../saved_objects_tagging_oss/public';
+import type { UsageCollectionStart } from '../../../usage_collection/public';
 
 export type PureVisState = SavedVisState;
 
@@ -97,6 +102,7 @@ export interface VisualizeServices extends CoreStart {
   setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
   savedObjectsTagging?: SavedObjectsTaggingApi;
   presentationUtil: PresentationUtilPluginStart;
+  usageCollection?: UsageCollectionStart;
 }
 
 export interface SavedVisInstance {
diff --git a/src/plugins/visualize/public/application/utils/get_table_columns.tsx b/src/plugins/visualize/public/application/utils/get_table_columns.tsx
index ac8fee452aa6c1..8c8ecaf9a448a3 100644
--- a/src/plugins/visualize/public/application/utils/get_table_columns.tsx
+++ b/src/plugins/visualize/public/application/utils/get_table_columns.tsx
@@ -7,6 +7,7 @@
  */
 
 import React from 'react';
+import { METRIC_TYPE } from '@kbn/analytics';
 import { EuiBetaBadge, EuiButton, EuiEmptyPrompt, EuiIcon, EuiLink, EuiBadge } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -16,6 +17,16 @@ import { VisualizationListItem } from 'src/plugins/visualizations/public';
 import type { SavedObjectsTaggingApi } from 'src/plugins/saved_objects_tagging_oss/public';
 import { RedirectAppLinks } from '../../../../kibana_react/public';
 import { getVisualizeListItemLink } from './get_visualize_list_item_link';
+import { getUsageCollector } from '../../services';
+import { APP_NAME } from '../visualize_constants';
+
+const doTelemetryForAddEvent = (visType?: string) => {
+  const usageCollection = getUsageCollector();
+
+  if (usageCollection && visType) {
+    usageCollection.reportUiCounter(APP_NAME, METRIC_TYPE.CLICK, `${visType}:add`);
+  }
+};
 
 const getBadge = (item: VisualizationListItem) => {
   if (item.stage === 'beta') {
@@ -82,12 +93,16 @@ export const getTableColumns = (
       defaultMessage: 'Title',
     }),
     sortable: true,
-    render: (field: string, { editApp, editUrl, title, error }: VisualizationListItem) =>
+    render: (field: string, { editApp, editUrl, title, error, type }: VisualizationListItem) =>
       // In case an error occurs i.e. the vis has wrong type, we render the vis but without the link
       !error ? (
         <RedirectAppLinks application={application} className="visListingTable__titleLink">
+          {/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
           <EuiLink
             href={getVisualizeListItemLink(application, kbnUrlStateStorage, editApp, editUrl)}
+            onClick={() => {
+              doTelemetryForAddEvent(typeof type === 'string' ? type : type?.name);
+            }}
             data-test-subj={`visListingTitleLink-${title.split(' ').join('-')}`}
           >
             {field}
diff --git a/src/plugins/visualize/public/application/utils/get_top_nav_config.tsx b/src/plugins/visualize/public/application/utils/get_top_nav_config.tsx
index b7c7d63cef98fc..da01f9d44879bb 100644
--- a/src/plugins/visualize/public/application/utils/get_top_nav_config.tsx
+++ b/src/plugins/visualize/public/application/utils/get_top_nav_config.tsx
@@ -8,6 +8,7 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
+import { METRIC_TYPE } from '@kbn/analytics';
 
 import { Capabilities } from 'src/core/public';
 import { TopNavMenuData } from 'src/plugins/navigation/public';
@@ -29,7 +30,7 @@ import {
   VisualizeAppStateContainer,
   VisualizeEditorVisInstance,
 } from '../types';
-import { VisualizeConstants } from '../visualize_constants';
+import { APP_NAME, VisualizeConstants } from '../visualize_constants';
 import { getEditBreadcrumbs } from './breadcrumbs';
 import { EmbeddableStateTransfer } from '../../../../embeddable/public';
 
@@ -92,10 +93,22 @@ export const getTopNavConfig = (
     dashboard,
     savedObjectsTagging,
     presentationUtil,
+    usageCollection,
   }: VisualizeServices
 ) => {
   const { vis, embeddableHandler } = visInstance;
   const savedVis = visInstance.savedVis;
+
+  const doTelemetryForSaveEvent = (visType: string) => {
+    if (usageCollection) {
+      usageCollection.reportUiCounter(
+        originatingApp ?? APP_NAME,
+        METRIC_TYPE.CLICK,
+        `${visType}:save`
+      );
+    }
+  };
+
   /**
    * Called when the user clicks "Save" button.
    */
@@ -394,6 +407,8 @@ export const getTopNavConfig = (
                   return { id: true };
                 }
 
+                doTelemetryForSaveEvent(vis.type.name);
+
                 // We're adding the viz to a library so we need to save it and then
                 // add to a dashboard if necessary
                 const response = await doSave(saveOptions);
@@ -503,6 +518,8 @@ export const getTopNavConfig = (
               }
             },
             run: async () => {
+              doTelemetryForSaveEvent(vis.type.name);
+
               if (!savedVis?.id) {
                 return createVisReference();
               }
diff --git a/src/plugins/visualize/public/plugin.ts b/src/plugins/visualize/public/plugin.ts
index 4b369e8be86eee..b5ddbdf6d10a3c 100644
--- a/src/plugins/visualize/public/plugin.ts
+++ b/src/plugins/visualize/public/plugin.ts
@@ -6,10 +6,11 @@
  * Side Public License, v 1.
  */
 
-import { BehaviorSubject } from 'rxjs';
 import { i18n } from '@kbn/i18n';
-import { filter, map } from 'rxjs/operators';
 import { createHashHistory } from 'history';
+import { BehaviorSubject } from 'rxjs';
+import { filter, map } from 'rxjs/operators';
+
 import {
   AppMountParameters,
   AppUpdater,
@@ -18,29 +19,33 @@ import {
   Plugin,
   PluginInitializerContext,
   ScopedHistory,
-} from 'kibana/public';
+  DEFAULT_APP_CATEGORIES,
+} from '../../../core/public';
 
-import { PresentationUtilPluginStart } from '../../../../src/plugins/presentation_util/public';
 import {
   Storage,
   createKbnUrlTracker,
   createKbnUrlStateStorage,
   withNotifyOnErrors,
 } from '../../kibana_utils/public';
-import { DataPublicPluginStart, DataPublicPluginSetup, esFilters } from '../../data/public';
-import { NavigationPublicPluginStart as NavigationStart } from '../../navigation/public';
-import { SharePluginStart, SharePluginSetup } from '../../share/public';
-import { UrlForwardingSetup, UrlForwardingStart } from '../../url_forwarding/public';
-import { VisualizationsStart } from '../../visualizations/public';
+
 import { VisualizeConstants } from './application/visualize_constants';
+import { DataPublicPluginStart, DataPublicPluginSetup, esFilters } from '../../data/public';
 import { FeatureCatalogueCategory, HomePublicPluginSetup } from '../../home/public';
-import { VisualizeServices } from './application/types';
-import { DEFAULT_APP_CATEGORIES } from '../../../core/public';
-import { SavedObjectsStart } from '../../saved_objects/public';
-import { EmbeddableStart } from '../../embeddable/public';
-import { DashboardStart } from '../../dashboard/public';
+
+import type { PresentationUtilPluginStart } from '../../../../src/plugins/presentation_util/public';
+import type { NavigationPublicPluginStart as NavigationStart } from '../../navigation/public';
+import type { SharePluginStart, SharePluginSetup } from '../../share/public';
+import type { UrlForwardingSetup, UrlForwardingStart } from '../../url_forwarding/public';
+import type { VisualizationsStart } from '../../visualizations/public';
+import type { VisualizeServices } from './application/types';
+import type { SavedObjectsStart } from '../../saved_objects/public';
+import type { EmbeddableStart } from '../../embeddable/public';
+import type { DashboardStart } from '../../dashboard/public';
 import type { SavedObjectTaggingOssPluginStart } from '../../saved_objects_tagging_oss/public';
-import { setVisEditorsRegistry, setUISettings } from './services';
+import type { UsageCollectionStart } from '../../usage_collection/public';
+
+import { setVisEditorsRegistry, setUISettings, setUsageCollector } from './services';
 import { createVisEditorsRegistry, VisEditorsRegistry } from './vis_editors_registry';
 
 export interface VisualizePluginStartDependencies {
@@ -54,6 +59,7 @@ export interface VisualizePluginStartDependencies {
   dashboard: DashboardStart;
   savedObjectsTaggingOss?: SavedObjectTaggingOssPluginStart;
   presentationUtil: PresentationUtilPluginStart;
+  usageCollection?: UsageCollectionStart;
 }
 
 export interface VisualizePluginSetupDependencies {
@@ -202,6 +208,7 @@ export class VisualizePlugin
           setHeaderActionMenu: params.setHeaderActionMenu,
           savedObjectsTagging: pluginsStart.savedObjectsTaggingOss?.getTaggingApi(),
           presentationUtil: pluginsStart.presentationUtil,
+          usageCollection: pluginsStart.usageCollection,
         };
 
         params.element.classList.add('visAppWrapper');
@@ -238,8 +245,12 @@ export class VisualizePlugin
     } as VisualizePluginSetup;
   }
 
-  public start(core: CoreStart, plugins: VisualizePluginStartDependencies) {
+  public start(core: CoreStart, { usageCollection }: VisualizePluginStartDependencies) {
     setVisEditorsRegistry(this.visEditorsRegistry);
+
+    if (usageCollection) {
+      setUsageCollector(usageCollection);
+    }
   }
 
   stop() {
diff --git a/src/plugins/visualize/public/services.ts b/src/plugins/visualize/public/services.ts
index 192aac3547eb27..97ff7923379b72 100644
--- a/src/plugins/visualize/public/services.ts
+++ b/src/plugins/visualize/public/services.ts
@@ -6,12 +6,18 @@
  * Side Public License, v 1.
  */
 
-import { IUiSettingsClient } from '../../../core/public';
 import { createGetterSetter } from '../../../plugins/kibana_utils/public';
-import { VisEditorsRegistry } from './vis_editors_registry';
+
+import type { IUiSettingsClient } from '../../../core/public';
+import type { VisEditorsRegistry } from './vis_editors_registry';
+import type { UsageCollectionStart } from '../../usage_collection/public';
 
 export const [getUISettings, setUISettings] = createGetterSetter<IUiSettingsClient>('UISettings');
 
+export const [getUsageCollector, setUsageCollector] = createGetterSetter<UsageCollectionStart>(
+  'UsageCollection'
+);
+
 export const [
   getVisEditorsRegistry,
   setVisEditorsRegistry,
diff --git a/x-pack/plugins/alerting/common/alert_navigation.ts b/x-pack/plugins/alerting/common/alert_navigation.ts
index d26afff9e8243f..7c9e428f9a09ee 100644
--- a/x-pack/plugins/alerting/common/alert_navigation.ts
+++ b/x-pack/plugins/alerting/common/alert_navigation.ts
@@ -5,8 +5,7 @@
  * 2.0.
  */
 
-import { JsonObject } from '../../../../src/plugins/kibana_utils/common';
-
+import { JsonObject } from '@kbn/common-utils';
 export interface AlertUrlNavigation {
   path: string;
 }
diff --git a/x-pack/plugins/alerting/public/alert_navigation_registry/types.ts b/x-pack/plugins/alerting/public/alert_navigation_registry/types.ts
index 53540facd9652e..12ac9061426475 100644
--- a/x-pack/plugins/alerting/public/alert_navigation_registry/types.ts
+++ b/x-pack/plugins/alerting/public/alert_navigation_registry/types.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { JsonObject } from '../../../../../src/plugins/kibana_utils/common';
+import { JsonObject } from '@kbn/common-utils';
 import { SanitizedAlert } from '../../common';
 
 /**
diff --git a/x-pack/plugins/alerting/server/authorization/alerting_authorization.ts b/x-pack/plugins/alerting/server/authorization/alerting_authorization.ts
index 7506accd8b88ea..52cef9a402e352 100644
--- a/x-pack/plugins/alerting/server/authorization/alerting_authorization.ts
+++ b/x-pack/plugins/alerting/server/authorization/alerting_authorization.ts
@@ -8,6 +8,7 @@
 import Boom from '@hapi/boom';
 import { map, mapValues, fromPairs, has } from 'lodash';
 import { KibanaRequest } from 'src/core/server';
+import { JsonObject } from '@kbn/common-utils';
 import { AlertTypeRegistry } from '../types';
 import { SecurityPluginSetup } from '../../../security/server';
 import { RegistryAlertType } from '../alert_type_registry';
@@ -19,7 +20,6 @@ import {
   AlertingAuthorizationFilterOpts,
 } from './alerting_authorization_kuery';
 import { KueryNode } from '../../../../../src/plugins/data/server';
-import { JsonObject } from '../../../../../src/plugins/kibana_utils/common';
 
 export enum AlertingAuthorizationEntity {
   Rule = 'rule',
diff --git a/x-pack/plugins/alerting/server/authorization/alerting_authorization_kuery.ts b/x-pack/plugins/alerting/server/authorization/alerting_authorization_kuery.ts
index eb6f1605f2ba5a..5205e6afdf29f3 100644
--- a/x-pack/plugins/alerting/server/authorization/alerting_authorization_kuery.ts
+++ b/x-pack/plugins/alerting/server/authorization/alerting_authorization_kuery.ts
@@ -6,7 +6,7 @@
  */
 
 import { remove } from 'lodash';
-import { JsonObject } from '../../../../../src/plugins/kibana_utils/common';
+import { JsonObject } from '@kbn/common-utils';
 import { nodeBuilder, EsQueryConfig } from '../../../../../src/plugins/data/common';
 import { toElasticsearchQuery } from '../../../../../src/plugins/data/common/es_query';
 import { KueryNode } from '../../../../../src/plugins/data/server';
diff --git a/x-pack/plugins/alerting/server/routes/lib/rewrite_request_case.ts b/x-pack/plugins/alerting/server/routes/lib/rewrite_request_case.ts
index 361ba5ff5e55de..f5455d1a630934 100644
--- a/x-pack/plugins/alerting/server/routes/lib/rewrite_request_case.ts
+++ b/x-pack/plugins/alerting/server/routes/lib/rewrite_request_case.ts
@@ -4,7 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { JsonValue } from '../../../../../../src/plugins/kibana_utils/common';
+import { JsonValue } from '@kbn/common-utils';
 
 type RenameAlertToRule<K extends string> = K extends `alertTypeId`
   ? `ruleTypeId`
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/ActionMenu/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/ActionMenu/index.tsx
index 6d04996b5f24c5..20d930d28599f9 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/ActionMenu/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/ActionMenu/index.tsx
@@ -55,26 +55,43 @@ export function UXActionMenu({
     http?.basePath.get()
   );
 
+  const kibana = useKibana();
+
   return (
     <HeaderMenuPortal
       setHeaderActionMenu={appMountParameters.setHeaderActionMenu}
     >
       <EuiFlexGroup
-        alignItems="flexEnd"
+        alignItems="center"
+        gutterSize="s"
         responsive={false}
         style={{ paddingRight: 20 }}
       >
         <EuiFlexItem>
           <EuiToolTip position="top" content={<p>{ANALYZE_MESSAGE}</p>}>
             <EuiButtonEmpty
+              size="xs"
+              color="text"
               href={uxExploratoryViewLink}
-              color="primary"
               iconType="visBarVerticalStacked"
             >
               {ANALYZE_DATA}
             </EuiButtonEmpty>
           </EuiToolTip>
         </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiButtonEmpty
+            iconType="indexOpen"
+            iconSide="left"
+            href={kibana.services?.application?.getUrlForApp(
+              '/home#/tutorial/apm'
+            )}
+          >
+            {i18n.translate('xpack.apm.addDataButtonLabel', {
+              defaultMessage: 'Add data',
+            })}
+          </EuiButtonEmpty>
+        </EuiFlexItem>
       </EuiFlexGroup>
     </HeaderMenuPortal>
   );
diff --git a/x-pack/plugins/apm/public/components/shared/apm_header_action_menu/alerting_popover_flyout.tsx b/x-pack/plugins/apm/public/components/shared/apm_header_action_menu/alerting_popover_flyout.tsx
index 95acc55196c543..5b4f4e24af44d5 100644
--- a/x-pack/plugins/apm/public/components/shared/apm_header_action_menu/alerting_popover_flyout.tsx
+++ b/x-pack/plugins/apm/public/components/shared/apm_header_action_menu/alerting_popover_flyout.tsx
@@ -66,7 +66,8 @@ export function AlertingPopoverAndFlyout({
 
   const button = (
     <EuiHeaderLink
-      color="primary"
+      size="xs"
+      color="text"
       iconType="arrowDown"
       iconSide="right"
       onClick={() => setPopoverOpen((prevState) => !prevState)}
diff --git a/x-pack/plugins/apm/public/components/shared/apm_header_action_menu/anomaly_detection_setup_link.tsx b/x-pack/plugins/apm/public/components/shared/apm_header_action_menu/anomaly_detection_setup_link.tsx
index ade49bc7e3aa4f..28c000310346d5 100644
--- a/x-pack/plugins/apm/public/components/shared/apm_header_action_menu/anomaly_detection_setup_link.tsx
+++ b/x-pack/plugins/apm/public/components/shared/apm_header_action_menu/anomaly_detection_setup_link.tsx
@@ -42,14 +42,15 @@ export function AnomalyDetectionSetupLink() {
 
   return (
     <EuiHeaderLink
-      color="primary"
+      size="xs"
+      color="text"
       href={getAPMHref({ basePath, path: '/settings/anomaly-detection' })}
       style={{ whiteSpace: 'nowrap' }}
     >
       {canGetJobs && hasValidLicense ? (
         <MissingJobsAlert environment={environment} />
       ) : (
-        <EuiIcon type="inspect" color="primary" />
+        <EuiIcon size="s" type="inspect" color="text" />
       )}
       <span style={{ marginInlineStart: units.half }}>
         {ANOMALY_DETECTION_LINK_LABEL}
@@ -64,7 +65,7 @@ export function MissingJobsAlert({ environment }: { environment?: string }) {
     anomalyDetectionJobsStatus,
   } = useAnomalyDetectionJobsContext();
 
-  const defaultIcon = <EuiIcon type="inspect" color="primary" />;
+  const defaultIcon = <EuiIcon size="s" type="inspect" color="text" />;
 
   if (anomalyDetectionJobsStatus === FETCH_STATUS.LOADING) {
     return <EuiLoadingSpinner />;
@@ -92,7 +93,7 @@ export function MissingJobsAlert({ environment }: { environment?: string }) {
 
   return (
     <EuiToolTip position="bottom" content={getTooltipText(environment)}>
-      <EuiIcon type="alert" color="danger" />
+      <EuiIcon size="s" type="alert" color="danger" />
     </EuiToolTip>
   );
 }
diff --git a/x-pack/plugins/apm/public/components/shared/apm_header_action_menu/index.tsx b/x-pack/plugins/apm/public/components/shared/apm_header_action_menu/index.tsx
index 134941990a0f4c..86f0d3fde1cd5d 100644
--- a/x-pack/plugins/apm/public/components/shared/apm_header_action_menu/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/apm_header_action_menu/index.tsx
@@ -40,16 +40,13 @@ export function ApmHeaderActionMenu() {
   }
 
   return (
-    <EuiHeaderLinks>
-      <EuiHeaderLink
-        color="primary"
-        href={apmHref('/settings')}
-        iconType="gear"
-      >
+    <EuiHeaderLinks gutterSize="xs">
+      <EuiHeaderLink size="xs" color="text" href={apmHref('/settings')}>
         {i18n.translate('xpack.apm.settingsLinkLabel', {
           defaultMessage: 'Settings',
         })}
       </EuiHeaderLink>
+      {canAccessML && <AnomalyDetectionSetupLink />}
       {isAlertingAvailable && (
         <AlertingPopoverAndFlyout
           basePath={basePath}
@@ -59,7 +56,6 @@ export function ApmHeaderActionMenu() {
           includeTransactionDuration={serviceName !== undefined}
         />
       )}
-      {canAccessML && <AnomalyDetectionSetupLink />}
       <EuiHeaderLink
         color="primary"
         href={kibanaHref('/app/home#/tutorial/apm')}
diff --git a/x-pack/plugins/apm/public/components/shared/time_comparison/index.test.tsx b/x-pack/plugins/apm/public/components/shared/time_comparison/index.test.tsx
index a4f44290fe777f..dd87c23908cbc5 100644
--- a/x-pack/plugins/apm/public/components/shared/time_comparison/index.test.tsx
+++ b/x-pack/plugins/apm/public/components/shared/time_comparison/index.test.tsx
@@ -15,7 +15,7 @@ import {
   expectTextsInDocument,
   expectTextsNotInDocument,
 } from '../../../utils/testHelpers';
-import { TimeComparison } from './';
+import { getComparisonTypes, getSelectOptions, TimeComparison } from './';
 import * as urlHelpers from '../../shared/Links/url_helpers';
 import moment from 'moment';
 import { TimeRangeComparisonType } from './get_time_range_comparison';
@@ -37,188 +37,248 @@ describe('TimeComparison', () => {
     moment.tz.setDefault('Europe/Amsterdam');
   });
   afterAll(() => moment.tz.setDefault(''));
-  const spy = jest.spyOn(urlHelpers, 'replace');
-  beforeEach(() => {
-    jest.resetAllMocks();
-  });
-  describe('Time range is between 0 - 24 hours', () => {
-    it('sets default values', () => {
-      const Wrapper = getWrapper({
-        start: '2021-01-28T14:45:00.000Z',
-        end: '2021-01-28T15:00:00.000Z',
-        rangeTo: 'now',
-      });
-      render(<TimeComparison />, {
-        wrapper: Wrapper,
-      });
-      expect(spy).toHaveBeenCalledWith(expect.anything(), {
-        query: {
-          comparisonEnabled: 'true',
-          comparisonType: TimeRangeComparisonType.DayBefore,
-        },
-      });
+
+  describe('getComparisonTypes', () => {
+    it('shows week and day before when 15 minutes is selected', () => {
+      expect(
+        getComparisonTypes({
+          start: '2021-06-04T16:17:02.335Z',
+          end: '2021-06-04T16:32:02.335Z',
+        })
+      ).toEqual([
+        TimeRangeComparisonType.DayBefore.valueOf(),
+        TimeRangeComparisonType.WeekBefore.valueOf(),
+      ]);
     });
-    it('selects day before and enables comparison', () => {
-      const Wrapper = getWrapper({
-        start: '2021-01-28T14:45:00.000Z',
-        end: '2021-01-28T15:00:00.000Z',
-        comparisonEnabled: true,
-        comparisonType: TimeRangeComparisonType.DayBefore,
-        rangeTo: 'now',
-      });
-      const component = render(<TimeComparison />, {
-        wrapper: Wrapper,
-      });
-      expectTextsInDocument(component, ['Day before', 'Week before']);
+
+    it('shows week and day before when Today is selected', () => {
       expect(
-        (component.getByTestId('comparisonSelect') as HTMLSelectElement)
-          .selectedIndex
-      ).toEqual(0);
+        getComparisonTypes({
+          start: '2021-06-04T04:00:00.000Z',
+          end: '2021-06-05T03:59:59.999Z',
+        })
+      ).toEqual([
+        TimeRangeComparisonType.DayBefore.valueOf(),
+        TimeRangeComparisonType.WeekBefore.valueOf(),
+      ]);
     });
 
-    it('enables yesterday option when date difference is equal to 24 hours', () => {
-      const Wrapper = getWrapper({
-        start: '2021-01-28T10:00:00.000Z',
-        end: '2021-01-29T10:00:00.000Z',
-        comparisonEnabled: true,
-        comparisonType: TimeRangeComparisonType.DayBefore,
-        rangeTo: 'now',
-      });
-      const component = render(<TimeComparison />, {
-        wrapper: Wrapper,
-      });
-      expectTextsInDocument(component, ['Day before', 'Week before']);
+    it('shows week and day before when 24 hours is selected', () => {
+      expect(
+        getComparisonTypes({
+          start: '2021-06-03T16:31:35.748Z',
+          end: '2021-06-04T16:31:35.748Z',
+        })
+      ).toEqual([
+        TimeRangeComparisonType.DayBefore.valueOf(),
+        TimeRangeComparisonType.WeekBefore.valueOf(),
+      ]);
+    });
+    it('shows week before when 25 hours is selected', () => {
       expect(
-        (component.getByTestId('comparisonSelect') as HTMLSelectElement)
-          .selectedIndex
-      ).toEqual(0);
+        getComparisonTypes({
+          start: '2021-06-02T12:32:00.000Z',
+          end: '2021-06-03T13:32:09.079Z',
+        })
+      ).toEqual([TimeRangeComparisonType.WeekBefore.valueOf()]);
     });
 
-    it('selects previous period when rangeTo is different than now', () => {
-      const Wrapper = getWrapper({
-        start: '2021-01-28T10:00:00.000Z',
-        end: '2021-01-29T10:00:00.000Z',
-        comparisonEnabled: true,
-        comparisonType: TimeRangeComparisonType.PeriodBefore,
-        rangeTo: 'now-15m',
-      });
-      const component = render(<TimeComparison />, {
-        wrapper: Wrapper,
-      });
-      expectTextsInDocument(component, ['27/01 11:00 - 28/01 11:00']);
+    it('shows week before when 7 days is selected', () => {
+      expect(
+        getComparisonTypes({
+          start: '2021-05-28T16:32:17.520Z',
+          end: '2021-06-04T16:32:17.520Z',
+        })
+      ).toEqual([TimeRangeComparisonType.WeekBefore.valueOf()]);
+    });
+    it('shows period before when 8 days is selected', () => {
       expect(
-        (component.getByTestId('comparisonSelect') as HTMLSelectElement)
-          .selectedIndex
-      ).toEqual(0);
+        getComparisonTypes({
+          start: '2021-05-27T16:32:46.747Z',
+          end: '2021-06-04T16:32:46.747Z',
+        })
+      ).toEqual([TimeRangeComparisonType.PeriodBefore.valueOf()]);
     });
   });
 
-  describe('Time range is between 24 hours - 1 week', () => {
-    it("doesn't show yesterday option when date difference is greater than 24 hours", () => {
-      const Wrapper = getWrapper({
-        start: '2021-01-28T10:00:00.000Z',
-        end: '2021-01-29T11:00:00.000Z',
-        comparisonEnabled: true,
-        comparisonType: TimeRangeComparisonType.WeekBefore,
-        rangeTo: 'now',
-      });
-      const component = render(<TimeComparison />, {
-        wrapper: Wrapper,
-      });
-      expectTextsNotInDocument(component, ['Day before']);
-      expectTextsInDocument(component, ['Week before']);
-    });
-    it('sets default values', () => {
-      const Wrapper = getWrapper({
-        start: '2021-01-26T15:00:00.000Z',
-        end: '2021-01-28T15:00:00.000Z',
-        rangeTo: 'now',
-      });
-      render(<TimeComparison />, {
-        wrapper: Wrapper,
-      });
-      expect(spy).toHaveBeenCalledWith(expect.anything(), {
-        query: {
-          comparisonEnabled: 'true',
-          comparisonType: TimeRangeComparisonType.WeekBefore,
+  describe('getSelectOptions', () => {
+    it('returns formatted text based on comparison type', () => {
+      expect(
+        getSelectOptions({
+          comparisonTypes: [
+            TimeRangeComparisonType.DayBefore,
+            TimeRangeComparisonType.WeekBefore,
+            TimeRangeComparisonType.PeriodBefore,
+          ],
+          start: '2021-05-27T16:32:46.747Z',
+          end: '2021-06-04T16:32:46.747Z',
+        })
+      ).toEqual([
+        {
+          value: TimeRangeComparisonType.DayBefore.valueOf(),
+          text: 'Day before',
         },
-      });
+        {
+          value: TimeRangeComparisonType.WeekBefore.valueOf(),
+          text: 'Week before',
+        },
+        {
+          value: TimeRangeComparisonType.PeriodBefore.valueOf(),
+          text: '19/05 18:32 - 27/05 18:32',
+        },
+      ]);
     });
-    it('selects week and enables comparison', () => {
-      const Wrapper = getWrapper({
-        start: '2021-01-26T15:00:00.000Z',
-        end: '2021-01-28T15:00:00.000Z',
-        comparisonEnabled: true,
-        comparisonType: TimeRangeComparisonType.WeekBefore,
-        rangeTo: 'now',
-      });
-      const component = render(<TimeComparison />, {
-        wrapper: Wrapper,
-      });
-      expectTextsNotInDocument(component, ['Day before']);
-      expectTextsInDocument(component, ['Week before']);
+
+    it('formats period before as DD/MM/YY HH:mm when range years are different', () => {
       expect(
-        (component.getByTestId('comparisonSelect') as HTMLSelectElement)
-          .selectedIndex
-      ).toEqual(0);
+        getSelectOptions({
+          comparisonTypes: [TimeRangeComparisonType.PeriodBefore],
+          start: '2020-05-27T16:32:46.747Z',
+          end: '2021-06-04T16:32:46.747Z',
+        })
+      ).toEqual([
+        {
+          value: TimeRangeComparisonType.PeriodBefore.valueOf(),
+          text: '20/05/19 18:32 - 27/05/20 18:32',
+        },
+      ]);
     });
+  });
 
-    it('selects previous period when rangeTo is different than now', () => {
-      const Wrapper = getWrapper({
-        start: '2021-01-26T15:00:00.000Z',
-        end: '2021-01-28T15:00:00.000Z',
-        comparisonEnabled: true,
-        comparisonType: TimeRangeComparisonType.PeriodBefore,
-        rangeTo: '2021-01-28T15:00:00.000Z',
+  describe('TimeComparison component', () => {
+    const spy = jest.spyOn(urlHelpers, 'replace');
+    beforeEach(() => {
+      jest.resetAllMocks();
+    });
+    describe('Time range is between 0 - 24 hours', () => {
+      it('sets default values', () => {
+        const Wrapper = getWrapper({
+          exactStart: '2021-06-04T16:17:02.335Z',
+          exactEnd: '2021-06-04T16:32:02.335Z',
+        });
+        render(<TimeComparison />, { wrapper: Wrapper });
+        expect(spy).toHaveBeenCalledWith(expect.anything(), {
+          query: {
+            comparisonEnabled: 'true',
+            comparisonType: TimeRangeComparisonType.DayBefore,
+          },
+        });
       });
-      const component = render(<TimeComparison />, {
-        wrapper: Wrapper,
+      it('selects day before and enables comparison', () => {
+        const Wrapper = getWrapper({
+          exactStart: '2021-06-04T16:17:02.335Z',
+          exactEnd: '2021-06-04T16:32:02.335Z',
+          comparisonEnabled: true,
+          comparisonType: TimeRangeComparisonType.DayBefore,
+        });
+        const component = render(<TimeComparison />, { wrapper: Wrapper });
+        expectTextsInDocument(component, ['Day before', 'Week before']);
+        expect(
+          (component.getByTestId('comparisonSelect') as HTMLSelectElement)
+            .selectedIndex
+        ).toEqual(0);
+      });
+
+      it('enables day before option when date difference is equal to 24 hours', () => {
+        const Wrapper = getWrapper({
+          exactStart: '2021-06-03T16:31:35.748Z',
+          exactEnd: '2021-06-04T16:31:35.748Z',
+          comparisonEnabled: true,
+          comparisonType: TimeRangeComparisonType.DayBefore,
+        });
+        const component = render(<TimeComparison />, { wrapper: Wrapper });
+        expectTextsInDocument(component, ['Day before', 'Week before']);
+        expect(
+          (component.getByTestId('comparisonSelect') as HTMLSelectElement)
+            .selectedIndex
+        ).toEqual(0);
       });
-      expectTextsInDocument(component, ['24/01 16:00 - 26/01 16:00']);
-      expect(
-        (component.getByTestId('comparisonSelect') as HTMLSelectElement)
-          .selectedIndex
-      ).toEqual(0);
     });
-  });
 
-  describe('Time range is greater than 7 days', () => {
-    it('Shows absolute times without year when within the same year', () => {
-      const Wrapper = getWrapper({
-        start: '2021-01-20T15:00:00.000Z',
-        end: '2021-01-28T15:00:00.000Z',
-        comparisonEnabled: true,
-        comparisonType: TimeRangeComparisonType.PeriodBefore,
-        rangeTo: 'now',
+    describe('Time range is between 24 hours - 1 week', () => {
+      it("doesn't show day before option when date difference is greater than 24 hours", () => {
+        const Wrapper = getWrapper({
+          exactStart: '2021-06-02T12:32:00.000Z',
+          exactEnd: '2021-06-03T13:32:09.079Z',
+          comparisonEnabled: true,
+          comparisonType: TimeRangeComparisonType.WeekBefore,
+        });
+        const component = render(<TimeComparison />, {
+          wrapper: Wrapper,
+        });
+        expectTextsNotInDocument(component, ['Day before']);
+        expectTextsInDocument(component, ['Week before']);
       });
-      const component = render(<TimeComparison />, {
-        wrapper: Wrapper,
+      it('sets default values', () => {
+        const Wrapper = getWrapper({
+          exactStart: '2021-06-02T12:32:00.000Z',
+          exactEnd: '2021-06-03T13:32:09.079Z',
+        });
+        render(<TimeComparison />, {
+          wrapper: Wrapper,
+        });
+        expect(spy).toHaveBeenCalledWith(expect.anything(), {
+          query: {
+            comparisonEnabled: 'true',
+            comparisonType: TimeRangeComparisonType.WeekBefore,
+          },
+        });
+      });
+      it('selects week before and enables comparison', () => {
+        const Wrapper = getWrapper({
+          exactStart: '2021-06-02T12:32:00.000Z',
+          exactEnd: '2021-06-03T13:32:09.079Z',
+          comparisonEnabled: true,
+          comparisonType: TimeRangeComparisonType.WeekBefore,
+        });
+        const component = render(<TimeComparison />, {
+          wrapper: Wrapper,
+        });
+        expectTextsNotInDocument(component, ['Day before']);
+        expectTextsInDocument(component, ['Week before']);
+        expect(
+          (component.getByTestId('comparisonSelect') as HTMLSelectElement)
+            .selectedIndex
+        ).toEqual(0);
       });
-      expect(spy).not.toHaveBeenCalled();
-      expectTextsInDocument(component, ['12/01 16:00 - 20/01 16:00']);
-      expect(
-        (component.getByTestId('comparisonSelect') as HTMLSelectElement)
-          .selectedIndex
-      ).toEqual(0);
     });
 
-    it('Shows absolute times with year when on different year', () => {
-      const Wrapper = getWrapper({
-        start: '2020-12-20T15:00:00.000Z',
-        end: '2021-01-28T15:00:00.000Z',
-        comparisonEnabled: true,
-        comparisonType: TimeRangeComparisonType.PeriodBefore,
-        rangeTo: 'now',
+    describe('Time range is greater than 7 days', () => {
+      it('Shows absolute times without year when within the same year', () => {
+        const Wrapper = getWrapper({
+          exactStart: '2021-05-27T16:32:46.747Z',
+          exactEnd: '2021-06-04T16:32:46.747Z',
+          comparisonEnabled: true,
+          comparisonType: TimeRangeComparisonType.PeriodBefore,
+        });
+        const component = render(<TimeComparison />, {
+          wrapper: Wrapper,
+        });
+        expect(spy).not.toHaveBeenCalled();
+        expectTextsInDocument(component, ['19/05 18:32 - 27/05 18:32']);
+        expect(
+          (component.getByTestId('comparisonSelect') as HTMLSelectElement)
+            .selectedIndex
+        ).toEqual(0);
       });
-      const component = render(<TimeComparison />, {
-        wrapper: Wrapper,
+
+      it('Shows absolute times with year when on different year', () => {
+        const Wrapper = getWrapper({
+          exactStart: '2020-05-27T16:32:46.747Z',
+          exactEnd: '2021-06-04T16:32:46.747Z',
+          comparisonEnabled: true,
+          comparisonType: TimeRangeComparisonType.PeriodBefore,
+        });
+        const component = render(<TimeComparison />, {
+          wrapper: Wrapper,
+        });
+        expect(spy).not.toHaveBeenCalled();
+        expectTextsInDocument(component, ['20/05/19 18:32 - 27/05/20 18:32']);
+        expect(
+          (component.getByTestId('comparisonSelect') as HTMLSelectElement)
+            .selectedIndex
+        ).toEqual(0);
       });
-      expect(spy).not.toHaveBeenCalled();
-      expectTextsInDocument(component, ['11/11/20 16:00 - 20/12/20 16:00']);
-      expect(
-        (component.getByTestId('comparisonSelect') as HTMLSelectElement)
-          .selectedIndex
-      ).toEqual(0);
     });
   });
 });
diff --git a/x-pack/plugins/apm/public/components/shared/time_comparison/index.tsx b/x-pack/plugins/apm/public/components/shared/time_comparison/index.tsx
index 98fbd4f399d980..cbe7b81486a64d 100644
--- a/x-pack/plugins/apm/public/components/shared/time_comparison/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/time_comparison/index.tsx
@@ -59,80 +59,92 @@ function formatDate({
   return `${momentStart.format(dateFormat)} - ${momentEnd.format(dateFormat)}`;
 }
 
-function getSelectOptions({
+export function getComparisonTypes({
   start,
   end,
-  rangeTo,
-  comparisonEnabled,
 }: {
   start?: string;
   end?: string;
-  rangeTo?: string;
-  comparisonEnabled?: boolean;
 }) {
   const momentStart = moment(start);
   const momentEnd = moment(end);
 
-  const dayBeforeOption = {
-    value: TimeRangeComparisonType.DayBefore,
-    text: i18n.translate('xpack.apm.timeComparison.select.dayBefore', {
-      defaultMessage: 'Day before',
-    }),
-  };
-
-  const weekBeforeOption = {
-    value: TimeRangeComparisonType.WeekBefore,
-    text: i18n.translate('xpack.apm.timeComparison.select.weekBefore', {
-      defaultMessage: 'Week before',
-    }),
-  };
-
-  const dateDiff = Number(
-    getDateDifference({
-      start: momentStart,
-      end: momentEnd,
-      unitOfTime: 'days',
-      precise: true,
-    }).toFixed(2)
-  );
-
-  const isRangeToNow = rangeTo === 'now';
+  const dateDiff = getDateDifference({
+    start: momentStart,
+    end: momentEnd,
+    unitOfTime: 'days',
+    precise: true,
+  });
 
-  if (isRangeToNow) {
-    // Less than or equals to one day
-    if (dateDiff <= 1) {
-      return [dayBeforeOption, weekBeforeOption];
-    }
+  // Less than or equals to one day
+  if (dateDiff <= 1) {
+    return [
+      TimeRangeComparisonType.DayBefore,
+      TimeRangeComparisonType.WeekBefore,
+    ];
+  }
 
-    // Less than or equals to one week
-    if (dateDiff <= 7) {
-      return [weekBeforeOption];
-    }
+  // Less than or equals to one week
+  if (dateDiff <= 7) {
+    return [TimeRangeComparisonType.WeekBefore];
   }
+  // }
 
-  const { comparisonStart, comparisonEnd } = getTimeRangeComparison({
-    comparisonType: TimeRangeComparisonType.PeriodBefore,
-    start,
-    end,
-    comparisonEnabled,
-  });
+  // above one week or when rangeTo is not "now"
+  return [TimeRangeComparisonType.PeriodBefore];
+}
 
-  const dateFormat = getDateFormat({
-    previousPeriodStart: comparisonStart,
-    currentPeriodEnd: end,
-  });
+export function getSelectOptions({
+  comparisonTypes,
+  start,
+  end,
+}: {
+  comparisonTypes: TimeRangeComparisonType[];
+  start?: string;
+  end?: string;
+}) {
+  return comparisonTypes.map((value) => {
+    switch (value) {
+      case TimeRangeComparisonType.DayBefore: {
+        return {
+          value,
+          text: i18n.translate('xpack.apm.timeComparison.select.dayBefore', {
+            defaultMessage: 'Day before',
+          }),
+        };
+      }
+      case TimeRangeComparisonType.WeekBefore: {
+        return {
+          value,
+          text: i18n.translate('xpack.apm.timeComparison.select.weekBefore', {
+            defaultMessage: 'Week before',
+          }),
+        };
+      }
+      case TimeRangeComparisonType.PeriodBefore: {
+        const { comparisonStart, comparisonEnd } = getTimeRangeComparison({
+          comparisonType: TimeRangeComparisonType.PeriodBefore,
+          start,
+          end,
+          comparisonEnabled: true,
+        });
 
-  const prevPeriodOption = {
-    value: TimeRangeComparisonType.PeriodBefore,
-    text: formatDate({
-      dateFormat,
-      previousPeriodStart: comparisonStart,
-      previousPeriodEnd: comparisonEnd,
-    }),
-  };
+        const dateFormat = getDateFormat({
+          previousPeriodStart: comparisonStart,
+          currentPeriodEnd: end,
+        });
 
-  // above one week or when rangeTo is not "now"
-  return [prevPeriodOption];
+        return {
+          value,
+          text: formatDate({
+            dateFormat,
+            previousPeriodStart: comparisonStart,
+            previousPeriodEnd: comparisonEnd,
+          }),
+        };
+      }
+    }
+  });
 }
 
 export function TimeComparison() {
@@ -140,14 +152,12 @@ export function TimeComparison() {
   const history = useHistory();
   const { isMedium, isLarge } = useBreakPoints();
   const {
-    urlParams: { start, end, comparisonEnabled, comparisonType, rangeTo },
+    urlParams: { comparisonEnabled, comparisonType, exactStart, exactEnd },
   } = useUrlParams();
 
-  const selectOptions = getSelectOptions({
-    start,
-    end,
-    rangeTo,
-    comparisonEnabled,
+  const comparisonTypes = getComparisonTypes({
+    start: exactStart,
+    end: exactEnd,
   });
 
   // Sets default values
@@ -155,14 +165,18 @@ export function TimeComparison() {
     urlHelpers.replace(history, {
       query: {
         comparisonEnabled: comparisonEnabled === false ? 'false' : 'true',
-        comparisonType: comparisonType
-          ? comparisonType
-          : selectOptions[0].value,
+        comparisonType: comparisonType ? comparisonType : comparisonTypes[0],
       },
     });
     return null;
   }
 
+  const selectOptions = getSelectOptions({
+    comparisonTypes,
+    start: exactStart,
+    end: exactEnd,
+  });
+
   const isSelectedComparisonTypeAvailable = selectOptions.some(
     ({ value }) => value === comparisonType
   );
diff --git a/x-pack/plugins/apm/public/context/url_params_context/helpers.test.ts b/x-pack/plugins/apm/public/context/url_params_context/helpers.test.ts
index 4de68a5bc20362..784b10b3f3ee1e 100644
--- a/x-pack/plugins/apm/public/context/url_params_context/helpers.test.ts
+++ b/x-pack/plugins/apm/public/context/url_params_context/helpers.test.ts
@@ -10,6 +10,9 @@ import moment from 'moment-timezone';
 import * as helpers from './helpers';
 
 describe('url_params_context helpers', () => {
+  beforeEach(() => {
+    jest.restoreAllMocks();
+  });
   describe('getDateRange', () => {
     describe('with non-rounded dates', () => {
       describe('one minute', () => {
@@ -23,6 +26,8 @@ describe('url_params_context helpers', () => {
           ).toEqual({
             start: '2021-01-28T05:47:00.000Z',
             end: '2021-01-28T05:48:55.304Z',
+            exactStart: '2021-01-28T05:47:52.134Z',
+            exactEnd: '2021-01-28T05:48:55.304Z',
           });
         });
       });
@@ -37,6 +42,8 @@ describe('url_params_context helpers', () => {
           ).toEqual({
             start: '2021-01-27T05:46:00.000Z',
             end: '2021-01-28T05:46:13.367Z',
+            exactStart: '2021-01-27T05:46:07.377Z',
+            exactEnd: '2021-01-28T05:46:13.367Z',
           });
         });
       });
@@ -52,6 +59,8 @@ describe('url_params_context helpers', () => {
           ).toEqual({
             start: '2020-01-28T05:52:00.000Z',
             end: '2021-01-28T05:52:39.741Z',
+            exactStart: '2020-01-28T05:52:36.290Z',
+            exactEnd: '2021-01-28T05:52:39.741Z',
           });
         });
       });
@@ -66,6 +75,8 @@ describe('url_params_context helpers', () => {
               rangeTo: 'now',
               start: '1970-01-01T00:00:00.000Z',
               end: '1971-01-01T00:00:00.000Z',
+              exactStart: '1970-01-01T00:00:00.000Z',
+              exactEnd: '1971-01-01T00:00:00.000Z',
             },
             rangeFrom: 'now-1m',
             rangeTo: 'now',
@@ -73,6 +84,8 @@ describe('url_params_context helpers', () => {
         ).toEqual({
           start: '1970-01-01T00:00:00.000Z',
           end: '1971-01-01T00:00:00.000Z',
+          exactStart: '1970-01-01T00:00:00.000Z',
+          exactEnd: '1971-01-01T00:00:00.000Z',
         });
       });
     });
@@ -94,24 +107,37 @@ describe('url_params_context helpers', () => {
         ).toEqual({
           start: '1972-01-01T00:00:00.000Z',
           end: '1973-01-01T00:00:00.000Z',
+          exactStart: undefined,
+          exactEnd: undefined,
         });
       });
     });
 
     describe('when the start or end are invalid', () => {
       it('returns the previous state', () => {
+        const endDate = moment('2021-06-04T18:03:24.211Z');
+        jest
+          .spyOn(datemath, 'parse')
+          .mockReturnValueOnce(undefined)
+          .mockReturnValueOnce(endDate)
+          .mockReturnValueOnce(undefined)
+          .mockReturnValueOnce(endDate);
         expect(
           helpers.getDateRange({
             state: {
               start: '1972-01-01T00:00:00.000Z',
               end: '1973-01-01T00:00:00.000Z',
+              exactStart: '1972-01-01T00:00:00.000Z',
+              exactEnd: '1973-01-01T00:00:00.000Z',
             },
             rangeFrom: 'nope',
             rangeTo: 'now',
           })
         ).toEqual({
           start: '1972-01-01T00:00:00.000Z',
+          exactStart: '1972-01-01T00:00:00.000Z',
           end: '1973-01-01T00:00:00.000Z',
+          exactEnd: '1973-01-01T00:00:00.000Z',
         });
       });
     });
@@ -134,8 +160,38 @@ describe('url_params_context helpers', () => {
         ).toEqual({
           start: '1970-01-01T00:00:00.000Z',
           end: '1970-01-01T00:00:00.000Z',
+          exactStart: '1970-01-01T00:00:00.000Z',
+          exactEnd: '1970-01-01T00:00:00.000Z',
         });
       });
     });
   });
+
+  describe('getExactDate', () => {
+    it('returns date when it is not not relative', () => {
+      expect(helpers.getExactDate('2021-01-28T05:47:52.134Z')).toEqual(
+        new Date('2021-01-28T05:47:52.134Z')
+      );
+    });
+
+    ['s', 'm', 'h', 'd', 'w'].map((roundingOption) =>
+      it(`removes /${roundingOption} rounding option from relative time`, () => {
+        const spy = jest.spyOn(datemath, 'parse');
+        helpers.getExactDate(`now/${roundingOption}`);
+        expect(spy).toHaveBeenCalledWith('now', {});
+      })
+    );
+
+    it('removes rounding option but keeps subtracting time', () => {
+      const spy = jest.spyOn(datemath, 'parse');
+      helpers.getExactDate('now-24h/h');
+      expect(spy).toHaveBeenCalledWith('now-24h', {});
+    });
+
+    it('removes rounding option but keeps adding time', () => {
+      const spy = jest.spyOn(datemath, 'parse');
+      helpers.getExactDate('now+15m/h');
+      expect(spy).toHaveBeenCalledWith('now+15m', {});
+    });
+  });
 });
diff --git a/x-pack/plugins/apm/public/context/url_params_context/helpers.ts b/x-pack/plugins/apm/public/context/url_params_context/helpers.ts
index eae9eba8b3ddad..902456bf4ebc07 100644
--- a/x-pack/plugins/apm/public/context/url_params_context/helpers.ts
+++ b/x-pack/plugins/apm/public/context/url_params_context/helpers.ts
@@ -19,6 +19,16 @@ function getParsedDate(rawDate?: string, options = {}) {
   }
 }
 
+export function getExactDate(rawDate: string) {
+  const isRelativeDate = rawDate.startsWith('now');
+  if (isRelativeDate) {
+    // remove rounding from relative dates "Today" (now/d) and "This week" (now/w)
+    const rawDateWithouRounding = rawDate.replace(/\/([smhdw])$/, '');
+    return getParsedDate(rawDateWithouRounding);
+  }
+  return getParsedDate(rawDate);
+}
+
 export function getDateRange({
   state,
   rangeFrom,
@@ -30,16 +40,28 @@ export function getDateRange({
 }) {
   // If the previous state had the same range, just return that instead of calculating a new range.
   if (state.rangeFrom === rangeFrom && state.rangeTo === rangeTo) {
-    return { start: state.start, end: state.end };
+    return {
+      start: state.start,
+      end: state.end,
+      exactStart: state.exactStart,
+      exactEnd: state.exactEnd,
+    };
   }
-
   const start = getParsedDate(rangeFrom);
   const end = getParsedDate(rangeTo, { roundUp: true });
 
+  const exactStart = rangeFrom ? getExactDate(rangeFrom) : undefined;
+  const exactEnd = rangeTo ? getExactDate(rangeTo) : undefined;
+
   // `getParsedDate` will return undefined for invalid or empty dates. We return
   // the previous state if either date is undefined.
   if (!start || !end) {
-    return { start: state.start, end: state.end };
+    return {
+      start: state.start,
+      end: state.end,
+      exactStart: state.exactStart,
+      exactEnd: state.exactEnd,
+    };
   }
 
   // rounds down start to minute
@@ -48,6 +70,8 @@ export function getDateRange({
   return {
     start: roundedStart.toISOString(),
     end: end.toISOString(),
+    exactStart: exactStart?.toISOString(),
+    exactEnd: exactEnd?.toISOString(),
   };
 }
 
diff --git a/x-pack/plugins/apm/public/context/url_params_context/resolve_url_params.ts b/x-pack/plugins/apm/public/context/url_params_context/resolve_url_params.ts
index b6e7330be30cbd..134f65bbf0f405 100644
--- a/x-pack/plugins/apm/public/context/url_params_context/resolve_url_params.ts
+++ b/x-pack/plugins/apm/public/context/url_params_context/resolve_url_params.ts
@@ -24,7 +24,7 @@ import { IUrlParams } from './types';
 
 type TimeUrlParams = Pick<
   IUrlParams,
-  'start' | 'end' | 'rangeFrom' | 'rangeTo'
+  'start' | 'end' | 'rangeFrom' | 'rangeTo' | 'exactStart' | 'exactEnd'
 >;
 
 export function resolveUrlParams(location: Location, state: TimeUrlParams) {
diff --git a/x-pack/plugins/apm/public/context/url_params_context/types.ts b/x-pack/plugins/apm/public/context/url_params_context/types.ts
index 4332019d1a1c9e..5e9e4bd257b87b 100644
--- a/x-pack/plugins/apm/public/context/url_params_context/types.ts
+++ b/x-pack/plugins/apm/public/context/url_params_context/types.ts
@@ -17,6 +17,8 @@ export type IUrlParams = {
   environment?: string;
   rangeFrom?: string;
   rangeTo?: string;
+  exactStart?: string;
+  exactEnd?: string;
   refreshInterval?: number;
   refreshPaused?: boolean;
   sortDirection?: string;
diff --git a/x-pack/plugins/apm/public/context/url_params_context/url_params_context.tsx b/x-pack/plugins/apm/public/context/url_params_context/url_params_context.tsx
index 1da57ac10a20c8..f3969745b6ea76 100644
--- a/x-pack/plugins/apm/public/context/url_params_context/url_params_context.tsx
+++ b/x-pack/plugins/apm/public/context/url_params_context/url_params_context.tsx
@@ -54,7 +54,14 @@ const UrlParamsProvider: React.ComponentClass<{}> = withRouter(
   ({ location, children }) => {
     const refUrlParams = useRef(resolveUrlParams(location, {}));
 
-    const { start, end, rangeFrom, rangeTo } = refUrlParams.current;
+    const {
+      start,
+      end,
+      rangeFrom,
+      rangeTo,
+      exactStart,
+      exactEnd,
+    } = refUrlParams.current;
 
     // Counter to force an update in useFetcher when the refresh button is clicked.
     const [rangeId, setRangeId] = useState(0);
@@ -66,8 +73,10 @@ const UrlParamsProvider: React.ComponentClass<{}> = withRouter(
           end,
           rangeFrom,
           rangeTo,
+          exactStart,
+          exactEnd,
         }),
-      [location, start, end, rangeFrom, rangeTo]
+      [location, start, end, rangeFrom, rangeTo, exactStart, exactEnd]
     );
 
     refUrlParams.current = urlParams;
diff --git a/x-pack/plugins/apm/server/lib/services/get_service_alerts.ts b/x-pack/plugins/apm/server/lib/services/get_service_alerts.ts
index f58452ce4d9160..2141570f521c01 100644
--- a/x-pack/plugins/apm/server/lib/services/get_service_alerts.ts
+++ b/x-pack/plugins/apm/server/lib/services/get_service_alerts.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { ALERT_UUID } from '@kbn/rule-data-utils/target/technical_field_names';
+import { EVENT_KIND } from '@kbn/rule-data-utils/target/technical_field_names';
 import { RuleDataClient } from '../../../../rule_registry/server';
 import {
   SERVICE_NAME,
@@ -36,6 +36,7 @@ export async function getServiceAlerts({
             ...rangeQuery(start, end),
             ...environmentQuery(environment),
             { term: { [SERVICE_NAME]: serviceName } },
+            { term: { [EVENT_KIND]: 'signal' } },
           ],
           should: [
             {
@@ -64,9 +65,6 @@ export async function getServiceAlerts({
       },
       size: 100,
       fields: ['*'],
-      collapse: {
-        field: ALERT_UUID,
-      },
       sort: {
         '@timestamp': 'desc',
       },
diff --git a/x-pack/plugins/cases/common/ui/types.ts b/x-pack/plugins/cases/common/ui/types.ts
index 284f5e706292cc..1dbb633e32adf0 100644
--- a/x-pack/plugins/cases/common/ui/types.ts
+++ b/x-pack/plugins/cases/common/ui/types.ts
@@ -153,7 +153,7 @@ export interface ActionLicense {
 export interface DeleteCase {
   id: string;
   type: CaseType | null;
-  title?: string;
+  title: string;
 }
 
 export interface FieldMappings {
diff --git a/x-pack/plugins/cases/public/common/translations.ts b/x-pack/plugins/cases/public/common/translations.ts
index 85cfb60b1d6b81..f1bfde4cc44851 100644
--- a/x-pack/plugins/cases/public/common/translations.ts
+++ b/x-pack/plugins/cases/public/common/translations.ts
@@ -30,13 +30,11 @@ export const CANCEL = i18n.translate('xpack.cases.caseView.cancel', {
   defaultMessage: 'Cancel',
 });
 
-export const DELETE_CASE = i18n.translate('xpack.cases.confirmDeleteCase.deleteCase', {
-  defaultMessage: 'Delete case',
-});
-
-export const DELETE_CASES = i18n.translate('xpack.cases.confirmDeleteCase.deleteCases', {
-  defaultMessage: 'Delete cases',
-});
+export const DELETE_CASE = (quantity: number = 1) =>
+  i18n.translate('xpack.cases.confirmDeleteCase.deleteCase', {
+    values: { quantity },
+    defaultMessage: `Delete {quantity, plural, =1 {case} other {cases}}`,
+  });
 
 export const NAME = i18n.translate('xpack.cases.caseView.name', {
   defaultMessage: 'Name',
diff --git a/x-pack/plugins/cases/public/components/all_cases/actions.tsx b/x-pack/plugins/cases/public/components/all_cases/actions.tsx
index 8742b8fea23a42..4820b10308934f 100644
--- a/x-pack/plugins/cases/public/components/all_cases/actions.tsx
+++ b/x-pack/plugins/cases/public/components/all_cases/actions.tsx
@@ -80,9 +80,9 @@ export const getActions = ({
     makeInProgressAction,
     closeCaseAction,
     {
-      description: i18n.DELETE_CASE,
+      description: i18n.DELETE_CASE(),
       icon: 'trash',
-      name: i18n.DELETE_CASE,
+      name: i18n.DELETE_CASE(),
       onClick: deleteCaseOnClick,
       type: 'icon',
       'data-test-subj': 'action-delete',
diff --git a/x-pack/plugins/cases/public/components/all_cases/columns.tsx b/x-pack/plugins/cases/public/components/all_cases/columns.tsx
index 947d405d188cf0..a5a299851d975a 100644
--- a/x-pack/plugins/cases/public/components/all_cases/columns.tsx
+++ b/x-pack/plugins/cases/public/components/all_cases/columns.tsx
@@ -306,7 +306,6 @@ export const useCasesColumns = ({
                 <ConfirmDeleteCaseModal
                   caseTitle={deleteThisCase.title}
                   isModalVisible={isDisplayConfirmDeleteModal}
-                  isPlural={false}
                   onCancel={handleToggleModal}
                   onConfirm={handleOnDeleteConfirm.bind(null, [deleteThisCase])}
                 />
diff --git a/x-pack/plugins/cases/public/components/all_cases/utility_bar.tsx b/x-pack/plugins/cases/public/components/all_cases/utility_bar.tsx
index d0981c38385e96..a2b4c14c0278a8 100644
--- a/x-pack/plugins/cases/public/components/all_cases/utility_bar.tsx
+++ b/x-pack/plugins/cases/public/components/all_cases/utility_bar.tsx
@@ -41,12 +41,8 @@ export const CasesTableUtilityBar: FunctionComponent<Props> = ({
   refreshCases,
   selectedCases,
 }) => {
-  const [deleteBulk, setDeleteBulk] = useState<DeleteCase[]>([]);
-  const [deleteThisCase, setDeleteThisCase] = useState<DeleteCase>({
-    title: '',
-    id: '',
-    type: null,
-  });
+  const [deleteCases, setDeleteCases] = useState<DeleteCase[]>([]);
+
   // Delete case
   const {
     dispatchResetIsDeleted,
@@ -86,24 +82,15 @@ export const CasesTableUtilityBar: FunctionComponent<Props> = ({
   const toggleBulkDeleteModal = useCallback(
     (cases: Case[]) => {
       handleToggleModal();
-      if (cases.length === 1) {
-        const singleCase = cases[0];
-        if (singleCase) {
-          return setDeleteThisCase({
-            id: singleCase.id,
-            title: singleCase.title,
-            type: singleCase.type,
-          });
-        }
-      }
+
       const convertToDeleteCases: DeleteCase[] = cases.map(({ id, title, type }) => ({
         id,
         title,
         type,
       }));
-      setDeleteBulk(convertToDeleteCases);
+      setDeleteCases(convertToDeleteCases);
     },
-    [setDeleteBulk, handleToggleModal]
+    [setDeleteCases, handleToggleModal]
   );
 
   const handleUpdateCaseStatus = useCallback(
@@ -128,6 +115,7 @@ export const CasesTableUtilityBar: FunctionComponent<Props> = ({
     ),
     [selectedCases, filterOptions.status, toggleBulkDeleteModal, handleUpdateCaseStatus]
   );
+
   return (
     <UtilityBar border>
       <UtilityBarSection>
@@ -159,14 +147,11 @@ export const CasesTableUtilityBar: FunctionComponent<Props> = ({
         </UtilityBarGroup>
       </UtilityBarSection>
       <ConfirmDeleteCaseModal
-        caseTitle={deleteThisCase.title}
+        caseTitle={deleteCases[0]?.title ?? ''}
         isModalVisible={isDisplayConfirmDeleteModal}
-        isPlural={deleteBulk.length > 0}
+        caseQuantity={deleteCases.length}
         onCancel={handleToggleModal}
-        onConfirm={handleOnDeleteConfirm.bind(
-          null,
-          deleteBulk.length > 0 ? deleteBulk : [deleteThisCase]
-        )}
+        onConfirm={handleOnDeleteConfirm.bind(null, deleteCases)}
       />
     </UtilityBar>
   );
diff --git a/x-pack/plugins/cases/public/components/case_action_bar/actions.tsx b/x-pack/plugins/cases/public/components/case_action_bar/actions.tsx
index 922ffd09aaac9d..c2578dc3debdb6 100644
--- a/x-pack/plugins/cases/public/components/case_action_bar/actions.tsx
+++ b/x-pack/plugins/cases/public/components/case_action_bar/actions.tsx
@@ -41,7 +41,7 @@ const ActionsComponent: React.FC<CaseViewActions> = ({
       {
         disabled,
         iconType: 'trash',
-        label: i18n.DELETE_CASE,
+        label: i18n.DELETE_CASE(),
         onClick: handleToggleModal,
       },
       ...(currentExternalIncident != null && !isEmpty(currentExternalIncident?.externalUrl)
@@ -67,7 +67,6 @@ const ActionsComponent: React.FC<CaseViewActions> = ({
       <ConfirmDeleteCaseModal
         caseTitle={caseData.title}
         isModalVisible={isDisplayConfirmDeleteModal}
-        isPlural={false}
         onCancel={handleToggleModal}
         onConfirm={handleOnDeleteConfirm.bind(null, [
           { id: caseData.id, title: caseData.title, type: caseData.type },
diff --git a/x-pack/plugins/cases/public/components/confirm_delete_case/index.tsx b/x-pack/plugins/cases/public/components/confirm_delete_case/index.tsx
index 4d813c034dd1d7..baf34daea0d99c 100644
--- a/x-pack/plugins/cases/public/components/confirm_delete_case/index.tsx
+++ b/x-pack/plugins/cases/public/components/confirm_delete_case/index.tsx
@@ -10,9 +10,9 @@ import { EuiConfirmModal } from '@elastic/eui';
 import * as i18n from './translations';
 
 interface ConfirmDeleteCaseModalProps {
-  caseTitle?: string;
+  caseTitle: string;
   isModalVisible: boolean;
-  isPlural: boolean;
+  caseQuantity?: number;
   onCancel: () => void;
   onConfirm: () => void;
 }
@@ -20,7 +20,7 @@ interface ConfirmDeleteCaseModalProps {
 const ConfirmDeleteCaseModalComp: React.FC<ConfirmDeleteCaseModalProps> = ({
   caseTitle,
   isModalVisible,
-  isPlural,
+  caseQuantity = 1,
   onCancel,
   onConfirm,
 }) => {
@@ -31,20 +31,14 @@ const ConfirmDeleteCaseModalComp: React.FC<ConfirmDeleteCaseModalProps> = ({
     <EuiConfirmModal
       buttonColor="danger"
       cancelButtonText={i18n.CANCEL}
-      confirmButtonText={isPlural ? i18n.DELETE_CASES : i18n.DELETE_CASE}
+      confirmButtonText={i18n.DELETE_CASE(caseQuantity)}
       data-test-subj="confirm-delete-case-modal"
       defaultFocusedButton="confirm"
       onCancel={onCancel}
       onConfirm={onConfirm}
-      title={
-        isPlural
-          ? i18n.DELETE_SELECTED_CASES
-          : caseTitle == null
-          ? i18n.DELETE_THIS_CASE
-          : i18n.DELETE_TITLE(caseTitle)
-      }
+      title={i18n.DELETE_SELECTED_CASES(caseQuantity, caseTitle)}
     >
-      {isPlural ? i18n.CONFIRM_QUESTION_PLURAL : i18n.CONFIRM_QUESTION}
+      {i18n.CONFIRM_QUESTION(caseQuantity)}
     </EuiConfirmModal>
   );
 };
diff --git a/x-pack/plugins/cases/public/components/confirm_delete_case/translations.ts b/x-pack/plugins/cases/public/components/confirm_delete_case/translations.ts
index 0400c4c7fef413..f8e4ab2a83a738 100644
--- a/x-pack/plugins/cases/public/components/confirm_delete_case/translations.ts
+++ b/x-pack/plugins/cases/public/components/confirm_delete_case/translations.ts
@@ -14,23 +14,15 @@ export const DELETE_TITLE = (caseTitle: string) =>
     defaultMessage: 'Delete "{caseTitle}"',
   });
 
-export const DELETE_THIS_CASE = (caseTitle: string) =>
-  i18n.translate('xpack.cases.confirmDeleteCase.deleteThisCase', {
-    defaultMessage: 'Delete this case',
+export const DELETE_SELECTED_CASES = (quantity: number, title: string) =>
+  i18n.translate('xpack.cases.confirmDeleteCase.selectedCases', {
+    values: { quantity, title },
+    defaultMessage: 'Delete "{quantity, plural, =1 {{title}} other {Selected {quantity} cases}}"',
   });
 
-export const CONFIRM_QUESTION = i18n.translate('xpack.cases.confirmDeleteCase.confirmQuestion', {
-  defaultMessage:
-    'By deleting this case, all related case data will be permanently removed and you will no longer be able to push data to an external incident management system. Are you sure you wish to proceed?',
-});
-export const DELETE_SELECTED_CASES = i18n.translate('xpack.cases.confirmDeleteCase.selectedCases', {
-  defaultMessage: 'Delete selected cases',
-});
-
-export const CONFIRM_QUESTION_PLURAL = i18n.translate(
-  'xpack.cases.confirmDeleteCase.confirmQuestionPlural',
-  {
+export const CONFIRM_QUESTION = (quantity: number) =>
+  i18n.translate('xpack.cases.confirmDeleteCase.confirmQuestion', {
+    values: { quantity },
     defaultMessage:
-      'By deleting these cases, all related case data will be permanently removed and you will no longer be able to push data to  an external incident management system. Are you sure you wish to proceed?',
-  }
-);
+      'By deleting {quantity, plural, =1 {this case} other {these cases}}, all related case data will be permanently removed and you will no longer be able to push data to an external incident management system. Are you sure you wish to proceed?',
+  });
diff --git a/x-pack/plugins/cases/public/containers/use_delete_cases.test.tsx b/x-pack/plugins/cases/public/containers/use_delete_cases.test.tsx
index e86ed0c036974a..691af580b333a8 100644
--- a/x-pack/plugins/cases/public/containers/use_delete_cases.test.tsx
+++ b/x-pack/plugins/cases/public/containers/use_delete_cases.test.tsx
@@ -17,9 +17,9 @@ jest.mock('../common/lib/kibana');
 describe('useDeleteCases', () => {
   const abortCtrl = new AbortController();
   const deleteObj = [
-    { id: '1', type: CaseType.individual },
-    { id: '2', type: CaseType.individual },
-    { id: '3', type: CaseType.individual },
+    { id: '1', type: CaseType.individual, title: 'case 1' },
+    { id: '2', type: CaseType.individual, title: 'case 2' },
+    { id: '3', type: CaseType.individual, title: 'case 3' },
   ];
   const deleteArr = ['1', '2', '3'];
   it('init', async () => {
diff --git a/x-pack/plugins/enterprise_search/kibana.json b/x-pack/plugins/enterprise_search/kibana.json
index a7b29a1e6b457f..f8b4261114a22d 100644
--- a/x-pack/plugins/enterprise_search/kibana.json
+++ b/x-pack/plugins/enterprise_search/kibana.json
@@ -7,7 +7,7 @@
   "optionalPlugins": ["usageCollection", "security", "home", "spaces", "cloud"],
   "server": true,
   "ui": true,
-  "requiredBundles": ["home"],
+  "requiredBundles": ["home", "kibanaReact"],
   "owner": {
     "name": "Enterprise Search",
     "githubTeam": "enterprise-search-frontend"
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/index.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/index.ts
new file mode 100644
index 00000000000000..a7699848831b25
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/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
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { AppSearchPageTemplate } from './page_template';
+export { useAppSearchNav } from './nav';
+export { KibanaHeaderActions } from './kibana_header_actions';
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/nav.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/nav.test.tsx
new file mode 100644
index 00000000000000..8b06f4b26835d4
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/nav.test.tsx
@@ -0,0 +1,107 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { setMockValues } from '../../../__mocks__/kea_logic';
+
+jest.mock('../../../shared/layout', () => ({
+  generateNavLink: jest.fn(({ to }) => ({ href: to })),
+}));
+
+import { useAppSearchNav } from './nav';
+
+describe('useAppSearchNav', () => {
+  it('always generates a default engines nav item', () => {
+    setMockValues({ myRole: {} });
+
+    expect(useAppSearchNav()).toEqual([
+      {
+        id: '',
+        name: '',
+        items: [
+          {
+            id: 'engines',
+            name: 'Engines',
+            href: '/engines',
+            items: [],
+          },
+        ],
+      },
+    ]);
+  });
+
+  it('generates a settings nav item if the user can view settings', () => {
+    setMockValues({ myRole: { canViewSettings: true } });
+
+    expect(useAppSearchNav()).toEqual([
+      {
+        id: '',
+        name: '',
+        items: [
+          {
+            id: 'engines',
+            name: 'Engines',
+            href: '/engines',
+            items: [],
+          },
+          {
+            id: 'settings',
+            name: 'Settings',
+            href: '/settings',
+          },
+        ],
+      },
+    ]);
+  });
+
+  it('generates a credentials nav item if the user can view credentials', () => {
+    setMockValues({ myRole: { canViewAccountCredentials: true } });
+
+    expect(useAppSearchNav()).toEqual([
+      {
+        id: '',
+        name: '',
+        items: [
+          {
+            id: 'engines',
+            name: 'Engines',
+            href: '/engines',
+            items: [],
+          },
+          {
+            id: 'credentials',
+            name: 'Credentials',
+            href: '/credentials',
+          },
+        ],
+      },
+    ]);
+  });
+
+  it('generates a users & roles nav item if the user can view role mappings', () => {
+    setMockValues({ myRole: { canViewRoleMappings: true } });
+
+    expect(useAppSearchNav()).toEqual([
+      {
+        id: '',
+        name: '',
+        items: [
+          {
+            id: 'engines',
+            name: 'Engines',
+            href: '/engines',
+            items: [],
+          },
+          {
+            id: 'usersRoles',
+            name: 'Users & roles',
+            href: '/role_mappings',
+          },
+        ],
+      },
+    ]);
+  });
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/nav.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/nav.tsx
new file mode 100644
index 00000000000000..57fa740caebec2
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/nav.tsx
@@ -0,0 +1,63 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useValues } from 'kea';
+
+import { EuiSideNavItemType } from '@elastic/eui';
+
+import { generateNavLink } from '../../../shared/layout';
+import { ROLE_MAPPINGS_TITLE } from '../../../shared/role_mapping/constants';
+
+import { AppLogic } from '../../app_logic';
+import { ENGINES_PATH, SETTINGS_PATH, CREDENTIALS_PATH, ROLE_MAPPINGS_PATH } from '../../routes';
+import { CREDENTIALS_TITLE } from '../credentials';
+import { ENGINES_TITLE } from '../engines';
+import { SETTINGS_TITLE } from '../settings';
+
+export const useAppSearchNav = () => {
+  const {
+    myRole: { canViewSettings, canViewAccountCredentials, canViewRoleMappings },
+  } = useValues(AppLogic);
+
+  const navItems: Array<EuiSideNavItemType<unknown>> = [
+    {
+      id: 'engines',
+      name: ENGINES_TITLE,
+      ...generateNavLink({ to: ENGINES_PATH, isRoot: true }),
+      items: [], // TODO: Engine nav
+    },
+  ];
+
+  if (canViewSettings) {
+    navItems.push({
+      id: 'settings',
+      name: SETTINGS_TITLE,
+      ...generateNavLink({ to: SETTINGS_PATH }),
+    });
+  }
+
+  if (canViewAccountCredentials) {
+    navItems.push({
+      id: 'credentials',
+      name: CREDENTIALS_TITLE,
+      ...generateNavLink({ to: CREDENTIALS_PATH }),
+    });
+  }
+
+  if (canViewRoleMappings) {
+    navItems.push({
+      id: 'usersRoles',
+      name: ROLE_MAPPINGS_TITLE,
+      ...generateNavLink({ to: ROLE_MAPPINGS_PATH }),
+    });
+  }
+
+  // Root level items are meant to be section headers, but the AS nav (currently)
+  // isn't organized this way. So we create a fake empty parent item here
+  // to cause all our navItems to properly render as nav links.
+  return [{ id: '', name: '', items: navItems }];
+};
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/page_template.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/page_template.test.tsx
new file mode 100644
index 00000000000000..8f47d5f1c46444
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/page_template.test.tsx
@@ -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
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+jest.mock('./nav', () => ({
+  useAppSearchNav: () => [],
+}));
+
+import React from 'react';
+
+import { shallow } from 'enzyme';
+
+import { SetAppSearchChrome } from '../../../shared/kibana_chrome';
+import { EnterpriseSearchPageTemplate } from '../../../shared/layout';
+import { SendAppSearchTelemetry } from '../../../shared/telemetry';
+
+import { AppSearchPageTemplate } from './page_template';
+
+describe('AppSearchPageTemplate', () => {
+  it('renders', () => {
+    const wrapper = shallow(
+      <AppSearchPageTemplate>
+        <div className="hello">world</div>
+      </AppSearchPageTemplate>
+    );
+
+    expect(wrapper.type()).toEqual(EnterpriseSearchPageTemplate);
+    expect(wrapper.prop('solutionNav')).toEqual({ name: 'App Search', items: [] });
+    expect(wrapper.find('.hello').text()).toEqual('world');
+  });
+
+  describe('page chrome', () => {
+    it('takes a breadcrumb array & renders a product-specific page chrome', () => {
+      const wrapper = shallow(<AppSearchPageTemplate pageChrome={['Some page']} />);
+      const setPageChrome = wrapper.find(EnterpriseSearchPageTemplate).prop('setPageChrome') as any;
+
+      expect(setPageChrome.type).toEqual(SetAppSearchChrome);
+      expect(setPageChrome.props.trail).toEqual(['Some page']);
+    });
+  });
+
+  describe('page telemetry', () => {
+    it('takes a metric & renders product-specific telemetry viewed event', () => {
+      const wrapper = shallow(<AppSearchPageTemplate pageViewTelemetry="some_page" />);
+
+      expect(wrapper.find(SendAppSearchTelemetry).prop('action')).toEqual('viewed');
+      expect(wrapper.find(SendAppSearchTelemetry).prop('metric')).toEqual('some_page');
+    });
+  });
+
+  it('passes down any ...pageTemplateProps that EnterpriseSearchPageTemplate accepts', () => {
+    const wrapper = shallow(
+      <AppSearchPageTemplate
+        pageHeader={{ pageTitle: 'hello world' }}
+        isLoading={false}
+        emptyState={<div />}
+      />
+    );
+
+    expect(wrapper.find(EnterpriseSearchPageTemplate).prop('pageHeader')!.pageTitle).toEqual(
+      'hello world'
+    );
+    expect(wrapper.find(EnterpriseSearchPageTemplate).prop('isLoading')).toEqual(false);
+    expect(wrapper.find(EnterpriseSearchPageTemplate).prop('emptyState')).toEqual(<div />);
+  });
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/page_template.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/page_template.tsx
new file mode 100644
index 00000000000000..31f2eb3215e05a
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/page_template.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
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { APP_SEARCH_PLUGIN } from '../../../../../common/constants';
+import { SetAppSearchChrome } from '../../../shared/kibana_chrome';
+import { EnterpriseSearchPageTemplate, PageTemplateProps } from '../../../shared/layout';
+import { SendAppSearchTelemetry } from '../../../shared/telemetry';
+
+import { useAppSearchNav } from './nav';
+
+export const AppSearchPageTemplate: React.FC<PageTemplateProps> = ({
+  children,
+  pageChrome,
+  pageViewTelemetry,
+  ...pageTemplateProps
+}) => {
+  return (
+    <EnterpriseSearchPageTemplate
+      {...pageTemplateProps}
+      solutionNav={{
+        name: APP_SEARCH_PLUGIN.NAME,
+        items: useAppSearchNav(),
+      }}
+      setPageChrome={pageChrome && <SetAppSearchChrome trail={pageChrome} />}
+    >
+      {pageViewTelemetry && <SendAppSearchTelemetry action="viewed" metric={pageViewTelemetry} />}
+      {children}
+    </EnterpriseSearchPageTemplate>
+  );
+};
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/role_mappings/role_mappings.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/role_mappings/role_mappings.test.tsx
index d7ce8053c71f02..308022ccb2e5a7 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/role_mappings/role_mappings.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/role_mappings/role_mappings.test.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { Loading } from '../../../shared/loading';
 import { RoleMappingsTable, RoleMappingsHeading } from '../../../shared/role_mapping';
 import { wsRoleMapping } from '../../../shared/role_mapping/__mocks__/roles';
 
@@ -44,13 +43,6 @@ describe('RoleMappings', () => {
     expect(wrapper.find(RoleMappingsTable)).toHaveLength(1);
   });
 
-  it('returns Loading when loading', () => {
-    setMockValues({ ...mockValues, dataLoading: true });
-    const wrapper = shallow(<RoleMappings />);
-
-    expect(wrapper.find(Loading)).toHaveLength(1);
-  });
-
   it('renders RoleMapping flyout', () => {
     setMockValues({ ...mockValues, roleMappingFlyoutOpen: true });
     const wrapper = shallow(<RoleMappings />);
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/role_mappings/role_mappings.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/role_mappings/role_mappings.tsx
index 78d0a5cbc8638e..db0e6e6dead111 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/role_mappings/role_mappings.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/role_mappings/role_mappings.tsx
@@ -9,11 +9,10 @@ import React, { useEffect } from 'react';
 
 import { useActions, useValues } from 'kea';
 
-import { FlashMessages } from '../../../shared/flash_messages';
-import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
-import { Loading } from '../../../shared/loading';
+import { APP_SEARCH_PLUGIN } from '../../../../../common/constants';
 import { RoleMappingsTable, RoleMappingsHeading } from '../../../shared/role_mapping';
 import { ROLE_MAPPINGS_TITLE } from '../../../shared/role_mapping/constants';
+import { AppSearchPageTemplate } from '../layout';
 
 import { ROLE_MAPPINGS_ENGINE_ACCESS_HEADING } from './constants';
 import { RoleMapping } from './role_mapping';
@@ -38,11 +37,12 @@ export const RoleMappings: React.FC = () => {
     return resetState;
   }, []);
 
-  if (dataLoading) return <Loading />;
-
   const roleMappingsSection = (
-    <>
-      <RoleMappingsHeading productName="App Search" onClick={() => initializeRoleMapping()} />
+    <section>
+      <RoleMappingsHeading
+        productName={APP_SEARCH_PLUGIN.NAME}
+        onClick={() => initializeRoleMapping()}
+      />
       <RoleMappingsTable
         roleMappings={roleMappings}
         accessItemKey="engines"
@@ -51,15 +51,17 @@ export const RoleMappings: React.FC = () => {
         shouldShowAuthProvider={multipleAuthProvidersConfig}
         handleDeleteMapping={handleDeleteMapping}
       />
-    </>
+    </section>
   );
 
   return (
-    <>
-      <SetPageChrome trail={[ROLE_MAPPINGS_TITLE]} />
+    <AppSearchPageTemplate
+      pageChrome={[ROLE_MAPPINGS_TITLE]}
+      pageHeader={{ pageTitle: ROLE_MAPPINGS_TITLE }}
+      isLoading={dataLoading}
+    >
       {roleMappingFlyoutOpen && <RoleMapping />}
-      <FlashMessages />
       {roleMappingsSection}
-    </>
+    </AppSearchPageTemplate>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/index.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/index.tsx
index a491efcb234dca..caf0f805e8ca7e 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/index.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/index.tsx
@@ -25,7 +25,7 @@ import { EngineNav, EngineRouter } from './components/engine';
 import { EngineCreation } from './components/engine_creation';
 import { EnginesOverview, ENGINES_TITLE } from './components/engines';
 import { ErrorConnecting } from './components/error_connecting';
-import { KibanaHeaderActions } from './components/layout/kibana_header_actions';
+import { KibanaHeaderActions } from './components/layout';
 import { Library } from './components/library';
 import { MetaEngineCreation } from './components/meta_engine_creation';
 import { RoleMappings } from './components/role_mappings';
@@ -92,6 +92,11 @@ export const AppSearchConfigured: React.FC<Required<InitialAppData>> = (props) =
           <Library />
         </Route>
       )}
+      {canViewRoleMappings && (
+        <Route path={ROLE_MAPPINGS_PATH}>
+          <RoleMappings />
+        </Route>
+      )}
       <Route>
         <Layout navigation={<AppSearchNav />} readOnlyMode={readOnlyMode}>
           <Switch>
@@ -110,11 +115,6 @@ export const AppSearchConfigured: React.FC<Required<InitialAppData>> = (props) =
             <Route exact path={CREDENTIALS_PATH}>
               <Credentials />
             </Route>
-            {canViewRoleMappings && (
-              <Route path={ROLE_MAPPINGS_PATH}>
-                <RoleMappings />
-              </Route>
-            )}
             {canManageEngines && (
               <Route exact path={ENGINE_CREATION_PATH}>
                 <EngineCreation />
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/layout/index.ts b/x-pack/plugins/enterprise_search/public/applications/shared/layout/index.ts
index 2dd5254cee7f1e..856d483e174a69 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/layout/index.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/layout/index.ts
@@ -5,5 +5,9 @@
  * 2.0.
  */
 
+export { EnterpriseSearchPageTemplate, PageTemplateProps } from './page_template';
+export { generateNavLink } from './nav_link_helpers';
+
+// TODO: Delete these once KibanaPageTemplate migration is done
 export { Layout } from './layout';
 export { SideNav, SideNavLink, SideNavItem } from './side_nav';
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/layout/nav_link_helpers.test.ts b/x-pack/plugins/enterprise_search/public/applications/shared/layout/nav_link_helpers.test.ts
new file mode 100644
index 00000000000000..b51416ac76ca78
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/layout/nav_link_helpers.test.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
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { mockKibanaValues } from '../../__mocks__/kea_logic';
+
+jest.mock('../react_router_helpers', () => ({
+  generateReactRouterProps: ({ to }: { to: string }) => ({
+    href: `/app/enterprise_search${to}`,
+    onClick: () => mockKibanaValues.navigateToUrl(to),
+  }),
+}));
+
+import { generateNavLink, getNavLinkActive } from './nav_link_helpers';
+
+describe('generateNavLink', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockKibanaValues.history.location.pathname = '/current_page';
+  });
+
+  it('generates React Router props & isSelected (active) state for use within an EuiSideNavItem obj', () => {
+    const navItem = generateNavLink({ to: '/test' });
+
+    expect(navItem.href).toEqual('/app/enterprise_search/test');
+
+    navItem.onClick({} as any);
+    expect(mockKibanaValues.navigateToUrl).toHaveBeenCalledWith('/test');
+
+    expect(navItem.isSelected).toEqual(false);
+  });
+
+  describe('getNavLinkActive', () => {
+    it('returns true when the current path matches the link path', () => {
+      mockKibanaValues.history.location.pathname = '/test';
+      const isSelected = getNavLinkActive({ to: '/test' });
+
+      expect(isSelected).toEqual(true);
+    });
+
+    describe('isRoot', () => {
+      it('returns true if the current path is "/"', () => {
+        mockKibanaValues.history.location.pathname = '/';
+        const isSelected = getNavLinkActive({ to: '/overview', isRoot: true });
+
+        expect(isSelected).toEqual(true);
+      });
+    });
+
+    describe('shouldShowActiveForSubroutes', () => {
+      it('returns true if the current path is a subroute of the passed path', () => {
+        mockKibanaValues.history.location.pathname = '/hello/world';
+        const isSelected = getNavLinkActive({ to: '/hello', shouldShowActiveForSubroutes: true });
+
+        expect(isSelected).toEqual(true);
+      });
+
+      it('returns false if not', () => {
+        mockKibanaValues.history.location.pathname = '/hello/world';
+        const isSelected = getNavLinkActive({ to: '/hello' });
+
+        expect(isSelected).toEqual(false);
+      });
+    });
+  });
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/layout/nav_link_helpers.ts b/x-pack/plugins/enterprise_search/public/applications/shared/layout/nav_link_helpers.ts
new file mode 100644
index 00000000000000..6124636af3f992
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/layout/nav_link_helpers.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
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { stripTrailingSlash } from '../../../../common/strip_slashes';
+
+import { KibanaLogic } from '../kibana';
+import { generateReactRouterProps, ReactRouterProps } from '../react_router_helpers';
+
+interface Params {
+  to: string;
+  isRoot?: boolean;
+  shouldShowActiveForSubroutes?: boolean;
+}
+
+export const generateNavLink = ({ to, ...rest }: Params & ReactRouterProps) => {
+  return {
+    ...generateReactRouterProps({ to, ...rest }),
+    isSelected: getNavLinkActive({ to, ...rest }),
+  };
+};
+
+export const getNavLinkActive = ({
+  to,
+  isRoot = false,
+  shouldShowActiveForSubroutes = false,
+}: Params): boolean => {
+  const { pathname } = KibanaLogic.values.history.location;
+  const currentPath = stripTrailingSlash(pathname);
+
+  const isActive =
+    currentPath === to ||
+    (shouldShowActiveForSubroutes && currentPath.startsWith(to)) ||
+    (isRoot && currentPath === '');
+
+  return isActive;
+};
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/layout/page_template.scss b/x-pack/plugins/enterprise_search/public/applications/shared/layout/page_template.scss
new file mode 100644
index 00000000000000..9ddd68277c9bc9
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/layout/page_template.scss
@@ -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
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+.enterpriseSearchPageTemplate {
+  position: relative;
+
+  &__content {
+    // Note: relative positioning is required for our centered Loading component
+    position: relative;
+  }
+}
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/layout/page_template.test.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/layout/page_template.test.tsx
new file mode 100644
index 00000000000000..5b02756e44b524
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/layout/page_template.test.tsx
@@ -0,0 +1,213 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { setMockValues } from '../../__mocks__/kea_logic';
+
+import React from 'react';
+
+import { shallow } from 'enzyme';
+
+import { EuiCallOut } from '@elastic/eui';
+
+import { KibanaPageTemplate } from '../../../../../../../src/plugins/kibana_react/public';
+import { FlashMessages } from '../flash_messages';
+import { Loading } from '../loading';
+
+import { EnterpriseSearchPageTemplate } from './page_template';
+
+describe('EnterpriseSearchPageTemplate', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    setMockValues({ readOnlyMode: false });
+  });
+
+  it('renders', () => {
+    const wrapper = shallow(<EnterpriseSearchPageTemplate />);
+
+    expect(wrapper.type()).toEqual(KibanaPageTemplate);
+  });
+
+  it('renders children', () => {
+    const wrapper = shallow(
+      <EnterpriseSearchPageTemplate>
+        <div className="hello">world</div>
+      </EnterpriseSearchPageTemplate>
+    );
+
+    expect(wrapper.find('.hello').text()).toEqual('world');
+  });
+
+  describe('loading state', () => {
+    it('renders a loading icon in place of children', () => {
+      const wrapper = shallow(
+        <EnterpriseSearchPageTemplate isLoading>
+          <div className="test" />
+        </EnterpriseSearchPageTemplate>
+      );
+
+      expect(wrapper.find(Loading).exists()).toBe(true);
+      expect(wrapper.find('.test').exists()).toBe(false);
+    });
+
+    it('renders children & does not render a loading icon when the page is done loading', () => {
+      const wrapper = shallow(
+        <EnterpriseSearchPageTemplate isLoading={false}>
+          <div className="test" />
+        </EnterpriseSearchPageTemplate>
+      );
+
+      expect(wrapper.find(Loading).exists()).toBe(false);
+      expect(wrapper.find('.test').exists()).toBe(true);
+    });
+  });
+
+  describe('empty state', () => {
+    it('renders a custom empty state in place of children', () => {
+      const wrapper = shallow(
+        <EnterpriseSearchPageTemplate
+          isEmptyState
+          emptyState={<div className="emptyState">Nothing here yet!</div>}
+        >
+          <div className="test" />
+        </EnterpriseSearchPageTemplate>
+      );
+
+      expect(wrapper.find('.emptyState').exists()).toBe(true);
+      expect(wrapper.find('.test').exists()).toBe(false);
+
+      // @see https://github.com/elastic/kibana/blob/master/dev_docs/tutorials/kibana_page_template.mdx#isemptystate
+      // if you want to use KibanaPageTemplate's `isEmptyState` without a custom emptyState
+    });
+
+    it('does not render the custom empty state if the page is not empty', () => {
+      const wrapper = shallow(
+        <EnterpriseSearchPageTemplate
+          isEmptyState={false}
+          emptyState={<div className="emptyState">Nothing here yet!</div>}
+        >
+          <div className="test" />
+        </EnterpriseSearchPageTemplate>
+      );
+
+      expect(wrapper.find('.emptyState').exists()).toBe(false);
+      expect(wrapper.find('.test').exists()).toBe(true);
+    });
+
+    it('does not render an empty state if the page is still loading', () => {
+      const wrapper = shallow(
+        <EnterpriseSearchPageTemplate
+          isLoading
+          isEmptyState
+          emptyState={<div className="emptyState" />}
+        />
+      );
+
+      expect(wrapper.find(Loading).exists()).toBe(true);
+      expect(wrapper.find('.emptyState').exists()).toBe(false);
+    });
+  });
+
+  describe('read-only mode', () => {
+    it('renders a callout if in read-only mode', () => {
+      setMockValues({ readOnlyMode: true });
+      const wrapper = shallow(<EnterpriseSearchPageTemplate />);
+
+      expect(wrapper.find(EuiCallOut).exists()).toBe(true);
+    });
+
+    it('does not render a callout if not in read-only mode', () => {
+      setMockValues({ readOnlyMode: false });
+      const wrapper = shallow(<EnterpriseSearchPageTemplate />);
+
+      expect(wrapper.find(EuiCallOut).exists()).toBe(false);
+    });
+  });
+
+  describe('flash messages', () => {
+    it('renders FlashMessages by default', () => {
+      const wrapper = shallow(<EnterpriseSearchPageTemplate />);
+
+      expect(wrapper.find(FlashMessages).exists()).toBe(true);
+    });
+
+    it('does not render FlashMessages if hidden', () => {
+      // Example use case: manually showing flash messages in an open flyout or modal
+      // and not wanting to duplicate flash messages on the overlayed page
+      const wrapper = shallow(<EnterpriseSearchPageTemplate hideFlashMessages />);
+
+      expect(wrapper.find(FlashMessages).exists()).toBe(false);
+    });
+  });
+
+  describe('page chrome', () => {
+    const SetPageChrome = () => <div />;
+
+    it('renders a product-specific <SetPageChrome />', () => {
+      const wrapper = shallow(<EnterpriseSearchPageTemplate setPageChrome={<SetPageChrome />} />);
+
+      expect(wrapper.find(SetPageChrome).exists()).toBe(true);
+    });
+
+    it('invokes page chrome immediately (without waiting for isLoading to be finished)', () => {
+      const wrapper = shallow(
+        <EnterpriseSearchPageTemplate setPageChrome={<SetPageChrome />} isLoading />
+      );
+
+      expect(wrapper.find(SetPageChrome).exists()).toBe(true);
+
+      // This behavior is in contrast to page view telemetry, which is invoked after isLoading finishes
+      // In addition to the pageHeader prop also changing immediately, this makes navigation feel much snappier
+    });
+  });
+
+  describe('EuiPageTemplate props', () => {
+    it('overrides the restrictWidth prop', () => {
+      const wrapper = shallow(<EnterpriseSearchPageTemplate restrictWidth />);
+
+      expect(wrapper.find(KibanaPageTemplate).prop('restrictWidth')).toEqual(true);
+    });
+
+    it('passes down any ...pageTemplateProps that EuiPageTemplate accepts', () => {
+      const wrapper = shallow(
+        <EnterpriseSearchPageTemplate
+          template="empty"
+          paddingSize="s"
+          pageHeader={{ pageTitle: 'hello world' }}
+        />
+      );
+
+      expect(wrapper.find(KibanaPageTemplate).prop('template')).toEqual('empty');
+      expect(wrapper.find(KibanaPageTemplate).prop('paddingSize')).toEqual('s');
+      expect(wrapper.find(KibanaPageTemplate).prop('pageHeader')!.pageTitle).toEqual('hello world');
+    });
+
+    it('sets enterpriseSearchPageTemplate classNames while still accepting custom classNames', () => {
+      const wrapper = shallow(
+        <EnterpriseSearchPageTemplate className="hello" pageContentProps={{ className: 'world' }} />
+      );
+
+      expect(wrapper.find(KibanaPageTemplate).prop('className')).toEqual(
+        'enterpriseSearchPageTemplate hello'
+      );
+      expect(wrapper.find(KibanaPageTemplate).prop('pageContentProps')!.className).toEqual(
+        'enterpriseSearchPageTemplate__content world'
+      );
+    });
+
+    it('automatically sets the Enterprise Search logo onto passed solution navs', () => {
+      const wrapper = shallow(
+        <EnterpriseSearchPageTemplate solutionNav={{ name: 'Enterprise Search', items: [] }} />
+      );
+
+      expect(wrapper.find(KibanaPageTemplate).prop('solutionNav')).toEqual({
+        icon: 'logoEnterpriseSearch',
+        name: 'Enterprise Search',
+        items: [],
+      });
+    });
+  });
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/layout/page_template.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/layout/page_template.tsx
new file mode 100644
index 00000000000000..affec119215455
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/layout/page_template.tsx
@@ -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
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import classNames from 'classnames';
+import { useValues } from 'kea';
+
+import { EuiCallOut, EuiSpacer } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import {
+  KibanaPageTemplate,
+  KibanaPageTemplateProps,
+} from '../../../../../../../src/plugins/kibana_react/public';
+
+import { FlashMessages } from '../flash_messages';
+import { HttpLogic } from '../http';
+import { BreadcrumbTrail } from '../kibana_chrome/generate_breadcrumbs';
+import { Loading } from '../loading';
+
+import './page_template.scss';
+
+/*
+ * EnterpriseSearchPageTemplate is a light wrapper for KibanaPageTemplate (which
+ * is a light wrapper for EuiPageTemplate). It should contain only concerns shared
+ * between both AS & WS, which should have their own AppSearchPageTemplate &
+ * WorkplaceSearchPageTemplate sitting on top of this template (:nesting_dolls:),
+ * which in turn manages individual product-specific concerns (e.g. side navs, telemetry, etc.)
+ *
+ * @see https://github.com/elastic/kibana/tree/master/src/plugins/kibana_react/public/page_template
+ * @see https://elastic.github.io/eui/#/layout/page
+ */
+
+export type PageTemplateProps = KibanaPageTemplateProps & {
+  hideFlashMessages?: boolean;
+  isLoading?: boolean;
+  emptyState?: React.ReactNode;
+  setPageChrome?: React.ReactNode;
+  // Used by product-specific page templates
+  pageChrome?: BreadcrumbTrail;
+  pageViewTelemetry?: string;
+};
+
+export const EnterpriseSearchPageTemplate: React.FC<PageTemplateProps> = ({
+  children,
+  className,
+  hideFlashMessages,
+  isLoading,
+  isEmptyState,
+  emptyState,
+  setPageChrome,
+  solutionNav,
+  ...pageTemplateProps
+}) => {
+  const { readOnlyMode } = useValues(HttpLogic);
+  const hasCustomEmptyState = !!emptyState;
+  const showCustomEmptyState = hasCustomEmptyState && isEmptyState;
+
+  return (
+    <KibanaPageTemplate
+      restrictWidth={false}
+      {...pageTemplateProps}
+      className={classNames('enterpriseSearchPageTemplate', className)}
+      pageContentProps={{
+        ...pageTemplateProps.pageContentProps,
+        className: classNames(
+          'enterpriseSearchPageTemplate__content',
+          pageTemplateProps.pageContentProps?.className
+        ),
+      }}
+      isEmptyState={isEmptyState && !isLoading}
+      solutionNav={solutionNav ? { icon: 'logoEnterpriseSearch', ...solutionNav } : undefined}
+    >
+      {setPageChrome}
+      {readOnlyMode && (
+        <>
+          <EuiCallOut
+            color="warning"
+            iconType="lock"
+            title={i18n.translate('xpack.enterpriseSearch.readOnlyMode.warning', {
+              defaultMessage:
+                'Enterprise Search is in read-only mode. You will be unable to make changes such as creating, editing, or deleting.',
+            })}
+          />
+          <EuiSpacer />
+        </>
+      )}
+      {!hideFlashMessages && <FlashMessages />}
+      {isLoading ? <Loading /> : showCustomEmptyState ? emptyState : children}
+    </KibanaPageTemplate>
+  );
+};
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/react_router_helpers/eui_components.test.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/react_router_helpers/eui_components.test.tsx
index 7fded20cdd87e6..a04e628e0c4f9c 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/react_router_helpers/eui_components.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/react_router_helpers/eui_components.test.tsx
@@ -5,22 +5,22 @@
  * 2.0.
  */
 
-import { mockKibanaValues } from '../../__mocks__/kea_logic';
-import { mockHistory } from '../../__mocks__/react_router';
+jest.mock('./', () => ({
+  generateReactRouterProps: ({ to }: { to: string }) => ({
+    href: `/app/enterprise_search${to}`,
+    onClick: () => {},
+  }),
+}));
 
 import React from 'react';
 
-import { shallow, mount } from 'enzyme';
+import { shallow } from 'enzyme';
 
 import { EuiLink, EuiButton, EuiButtonEmpty, EuiPanel, EuiCard } from '@elastic/eui';
 
 import { EuiLinkTo, EuiButtonTo, EuiButtonEmptyTo, EuiPanelTo, EuiCardTo } from './eui_components';
 
-describe('EUI & React Router Component Helpers', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
+describe('React Router EUI component helpers', () => {
   it('renders an EuiLink', () => {
     const wrapper = shallow(<EuiLinkTo to="/" />);
 
@@ -54,64 +54,18 @@ describe('EUI & React Router Component Helpers', () => {
   });
 
   it('passes down all ...rest props', () => {
-    const wrapper = shallow(<EuiLinkTo to="/" data-test-subj="foo" external />);
+    const wrapper = shallow(<EuiLinkTo to="/" data-test-subj="test" external />);
     const link = wrapper.find(EuiLink);
 
     expect(link.prop('external')).toEqual(true);
-    expect(link.prop('data-test-subj')).toEqual('foo');
+    expect(link.prop('data-test-subj')).toEqual('test');
   });
 
-  it('renders with the correct href and onClick props', () => {
-    const wrapper = mount(<EuiLinkTo to="/foo/bar" />);
+  it('renders with generated href and onClick props', () => {
+    const wrapper = shallow(<EuiLinkTo to="/hello/world" />);
     const link = wrapper.find(EuiLink);
 
     expect(link.prop('onClick')).toBeInstanceOf(Function);
-    expect(link.prop('href')).toEqual('/app/enterprise_search/foo/bar');
-    expect(mockHistory.createHref).toHaveBeenCalled();
-  });
-
-  it('renders with the correct non-basenamed href when shouldNotCreateHref is passed', () => {
-    const wrapper = mount(<EuiLinkTo to="/foo/bar" shouldNotCreateHref />);
-    const link = wrapper.find(EuiLink);
-
-    expect(link.prop('href')).toEqual('/foo/bar');
-    expect(mockHistory.createHref).not.toHaveBeenCalled();
-  });
-
-  describe('onClick', () => {
-    it('prevents default navigation and uses React Router history', () => {
-      const wrapper = mount(<EuiLinkTo to="/bar/baz" />);
-
-      const simulatedEvent = {
-        button: 0,
-        target: { getAttribute: () => '_self' },
-        preventDefault: jest.fn(),
-      };
-      wrapper.find(EuiLink).simulate('click', simulatedEvent);
-
-      expect(simulatedEvent.preventDefault).toHaveBeenCalled();
-      expect(mockKibanaValues.navigateToUrl).toHaveBeenCalled();
-    });
-
-    it('does not prevent default browser behavior on new tab/window clicks', () => {
-      const wrapper = mount(<EuiLinkTo to="/bar/baz" />);
-
-      const simulatedEvent = {
-        shiftKey: true,
-        target: { getAttribute: () => '_blank' },
-      };
-      wrapper.find(EuiLink).simulate('click', simulatedEvent);
-
-      expect(mockKibanaValues.navigateToUrl).not.toHaveBeenCalled();
-    });
-
-    it('calls inherited onClick actions in addition to default navigation', () => {
-      const customOnClick = jest.fn(); // Can be anything from telemetry to a state reset
-      const wrapper = mount(<EuiLinkTo to="/narnia" onClick={customOnClick} />);
-
-      wrapper.find(EuiLink).simulate('click', { shiftKey: true });
-
-      expect(customOnClick).toHaveBeenCalled();
-    });
+    expect(link.prop('href')).toEqual('/app/enterprise_search/hello/world');
   });
 });
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/react_router_helpers/eui_components.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/react_router_helpers/eui_components.tsx
index b9fee9d16273b8..e7eb36f279fc75 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/react_router_helpers/eui_components.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/react_router_helpers/eui_components.tsx
@@ -7,8 +7,6 @@
 
 import React from 'react';
 
-import { useValues } from 'kea';
-
 import {
   EuiLink,
   EuiButton,
@@ -22,55 +20,10 @@ import {
 } from '@elastic/eui';
 import { EuiPanelProps } from '@elastic/eui/src/components/panel/panel';
 
-import { HttpLogic } from '../http';
-import { KibanaLogic } from '../kibana';
-
-import { letBrowserHandleEvent, createHref } from './';
+import { generateReactRouterProps, ReactRouterProps } from './';
 
 /**
- * Generates EUI components with React-Router-ified links
- *
- * Based off of EUI's recommendations for handling React Router:
- * https://github.com/elastic/eui/blob/master/wiki/react-router.md#react-router-51
- */
-
-interface ReactRouterProps {
-  to: string;
-  onClick?(): void;
-  // Used to navigate outside of the React Router plugin basename but still within Kibana,
-  // e.g. if we need to go from Enterprise Search to App Search
-  shouldNotCreateHref?: boolean;
-}
-
-export const ReactRouterHelper: React.FC<ReactRouterProps> = ({
-  to,
-  onClick,
-  shouldNotCreateHref,
-  children,
-}) => {
-  const { navigateToUrl, history } = useValues(KibanaLogic);
-  const { http } = useValues(HttpLogic);
-
-  // Generate the correct link href (with basename etc. accounted for)
-  const href = createHref(to, { history, http }, { shouldNotCreateHref });
-
-  const reactRouterLinkClick = (event: React.MouseEvent) => {
-    if (onClick) onClick(); // Run any passed click events (e.g. telemetry)
-    if (letBrowserHandleEvent(event)) return; // Return early if the link behavior shouldn't be handled by React Router
-
-    // Prevent regular link behavior, which causes a browser refresh.
-    event.preventDefault();
-
-    // Perform SPA navigation.
-    navigateToUrl(to, { shouldNotCreateHref });
-  };
-
-  const reactRouterProps = { href, onClick: reactRouterLinkClick };
-  return React.cloneElement(children as React.ReactElement, reactRouterProps);
-};
-
-/**
- * Component helpers
+ * Correctly typed component helpers with React-Router-friendly `href` and `onClick` props
  */
 
 type ReactRouterEuiLinkProps = ReactRouterProps & EuiLinkAnchorProps;
@@ -79,11 +32,7 @@ export const EuiLinkTo: React.FC<ReactRouterEuiLinkProps> = ({
   onClick,
   shouldNotCreateHref,
   ...rest
-}) => (
-  <ReactRouterHelper {...{ to, onClick, shouldNotCreateHref }}>
-    <EuiLink {...rest} />
-  </ReactRouterHelper>
-);
+}) => <EuiLink {...rest} {...generateReactRouterProps({ to, onClick, shouldNotCreateHref })} />;
 
 type ReactRouterEuiButtonProps = ReactRouterProps & EuiButtonProps;
 export const EuiButtonTo: React.FC<ReactRouterEuiButtonProps> = ({
@@ -91,11 +40,7 @@ export const EuiButtonTo: React.FC<ReactRouterEuiButtonProps> = ({
   onClick,
   shouldNotCreateHref,
   ...rest
-}) => (
-  <ReactRouterHelper {...{ to, onClick, shouldNotCreateHref }}>
-    <EuiButton {...rest} />
-  </ReactRouterHelper>
-);
+}) => <EuiButton {...rest} {...generateReactRouterProps({ to, onClick, shouldNotCreateHref })} />;
 
 type ReactRouterEuiButtonEmptyProps = ReactRouterProps & EuiButtonEmptyProps;
 export const EuiButtonEmptyTo: React.FC<ReactRouterEuiButtonEmptyProps> = ({
@@ -104,9 +49,7 @@ export const EuiButtonEmptyTo: React.FC<ReactRouterEuiButtonEmptyProps> = ({
   shouldNotCreateHref,
   ...rest
 }) => (
-  <ReactRouterHelper {...{ to, onClick, shouldNotCreateHref }}>
-    <EuiButtonEmpty {...rest} />
-  </ReactRouterHelper>
+  <EuiButtonEmpty {...rest} {...generateReactRouterProps({ to, onClick, shouldNotCreateHref })} />
 );
 
 type ReactRouterEuiPanelProps = ReactRouterProps & EuiPanelProps;
@@ -115,11 +58,7 @@ export const EuiPanelTo: React.FC<ReactRouterEuiPanelProps> = ({
   onClick,
   shouldNotCreateHref,
   ...rest
-}) => (
-  <ReactRouterHelper {...{ to, onClick, shouldNotCreateHref }}>
-    <EuiPanel {...rest} />
-  </ReactRouterHelper>
-);
+}) => <EuiPanel {...rest} {...generateReactRouterProps({ to, onClick, shouldNotCreateHref })} />;
 
 type ReactRouterEuiCardProps = ReactRouterProps & EuiCardProps;
 export const EuiCardTo: React.FC<ReactRouterEuiCardProps> = ({
@@ -127,8 +66,4 @@ export const EuiCardTo: React.FC<ReactRouterEuiCardProps> = ({
   onClick,
   shouldNotCreateHref,
   ...rest
-}) => (
-  <ReactRouterHelper {...{ to, onClick, shouldNotCreateHref }}>
-    <EuiCard {...rest} />
-  </ReactRouterHelper>
-);
+}) => <EuiCard {...rest} {...generateReactRouterProps({ to, onClick, shouldNotCreateHref })} />;
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/react_router_helpers/generate_react_router_props.test.ts b/x-pack/plugins/enterprise_search/public/applications/shared/react_router_helpers/generate_react_router_props.test.ts
new file mode 100644
index 00000000000000..dc8bf28a444071
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/react_router_helpers/generate_react_router_props.test.ts
@@ -0,0 +1,70 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { mockKibanaValues } from '../../__mocks__/kea_logic';
+import { mockHistory } from '../../__mocks__/react_router';
+
+import { generateReactRouterProps } from './';
+
+describe('generateReactRouterProps', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('generates React-Router-friendly href and onClick props', () => {
+    expect(generateReactRouterProps({ to: '/hello/world' })).toEqual({
+      href: '/app/enterprise_search/hello/world',
+      onClick: expect.any(Function),
+    });
+    expect(mockHistory.createHref).toHaveBeenCalled();
+  });
+
+  it('renders with the correct non-basenamed href when shouldNotCreateHref is passed', () => {
+    expect(generateReactRouterProps({ to: '/hello/world', shouldNotCreateHref: true })).toEqual({
+      href: '/hello/world',
+      onClick: expect.any(Function),
+    });
+  });
+
+  describe('onClick', () => {
+    it('prevents default navigation and uses React Router history', () => {
+      const mockEvent = {
+        button: 0,
+        target: { getAttribute: () => '_self' },
+        preventDefault: jest.fn(),
+      } as any;
+
+      const { onClick } = generateReactRouterProps({ to: '/test' });
+      onClick(mockEvent);
+
+      expect(mockEvent.preventDefault).toHaveBeenCalled();
+      expect(mockKibanaValues.navigateToUrl).toHaveBeenCalled();
+    });
+
+    it('does not prevent default browser behavior on new tab/window clicks', () => {
+      const mockEvent = {
+        shiftKey: true,
+        target: { getAttribute: () => '_blank' },
+      } as any;
+
+      const { onClick } = generateReactRouterProps({ to: '/test' });
+      onClick(mockEvent);
+
+      expect(mockKibanaValues.navigateToUrl).not.toHaveBeenCalled();
+    });
+
+    it('calls inherited onClick actions in addition to default navigation', () => {
+      const mockEvent = { preventDefault: jest.fn() } as any;
+      const customOnClick = jest.fn(); // Can be anything from telemetry to a state reset
+
+      const { onClick } = generateReactRouterProps({ to: '/test', onClick: customOnClick });
+      onClick(mockEvent);
+
+      expect(customOnClick).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/react_router_helpers/generate_react_router_props.ts b/x-pack/plugins/enterprise_search/public/applications/shared/react_router_helpers/generate_react_router_props.ts
new file mode 100644
index 00000000000000..d80eca19207bd5
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/react_router_helpers/generate_react_router_props.ts
@@ -0,0 +1,55 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { HttpLogic } from '../http';
+import { KibanaLogic } from '../kibana';
+
+import { letBrowserHandleEvent, createHref } from './';
+
+/**
+ * Generates the `href` and `onClick` props for React-Router-friendly links
+ *
+ * Based off of EUI's recommendations for handling React Router:
+ * https://github.com/elastic/eui/blob/master/wiki/react-router.md#react-router-51
+ *
+ * but separated out from EuiLink portion as we use this for multiple EUI components
+ */
+
+export interface ReactRouterProps {
+  to: string;
+  onClick?(): void;
+  // Used to navigate outside of the React Router plugin basename but still within Kibana,
+  // e.g. if we need to go from Enterprise Search to App Search
+  shouldNotCreateHref?: boolean;
+}
+
+export const generateReactRouterProps = ({
+  to,
+  onClick,
+  shouldNotCreateHref,
+}: ReactRouterProps) => {
+  const { navigateToUrl, history } = KibanaLogic.values;
+  const { http } = HttpLogic.values;
+
+  // Generate the correct link href (with basename etc. accounted for)
+  const href = createHref(to, { history, http }, { shouldNotCreateHref });
+
+  const reactRouterLinkClick = (event: React.MouseEvent) => {
+    if (onClick) onClick(); // Run any passed click events (e.g. telemetry)
+    if (letBrowserHandleEvent(event)) return; // Return early if the link behavior shouldn't be handled by React Router
+
+    // Prevent regular link behavior, which causes a browser refresh.
+    event.preventDefault();
+
+    // Perform SPA navigation.
+    navigateToUrl(to, { shouldNotCreateHref });
+  };
+
+  return { href, onClick: reactRouterLinkClick };
+};
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/react_router_helpers/index.ts b/x-pack/plugins/enterprise_search/public/applications/shared/react_router_helpers/index.ts
index 1a73c9c281b21f..17827b02302377 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/react_router_helpers/index.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/react_router_helpers/index.ts
@@ -7,4 +7,5 @@
 
 export { letBrowserHandleEvent } from './link_events';
 export { createHref, CreateHrefOptions } from './create_href';
+export { generateReactRouterProps, ReactRouterProps } from './generate_react_router_props';
 export { EuiLinkTo, EuiButtonTo, EuiButtonEmptyTo, EuiPanelTo, EuiCardTo } from './eui_components';
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/constants.ts b/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/constants.ts
index 47d481630510e2..9f40844e52470a 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/constants.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/constants.ts
@@ -193,7 +193,7 @@ export const ROLE_MAPPINGS_HEADING_DESCRIPTION = (productName: ProductName) =>
 
 export const ROLE_MAPPINGS_HEADING_DOCS_LINK = i18n.translate(
   'xpack.enterpriseSearch.roleMapping.roleMappingsHeadingDocsLink',
-  { defaultMessage: 'Learn more about role mappings' }
+  { defaultMessage: 'Learn more about role mappings.' }
 );
 
 export const ROLE_MAPPINGS_HEADING_BUTTON = i18n.translate(
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/role_mappings_heading.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/role_mappings_heading.tsx
index b2143c6ff44028..eee8b180d32819 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/role_mappings_heading.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/role_mappings_heading.tsx
@@ -35,7 +35,7 @@ interface Props {
 const ROLE_MAPPINGS_DOCS_HREF = '#TODO';
 
 export const RoleMappingsHeading: React.FC<Props> = ({ productName, onClick }) => (
-  <>
+  <header>
     <EuiFlexGroup justifyContent="spaceBetween">
       <EuiFlexItem>
         <EuiTitle>
@@ -58,5 +58,5 @@ export const RoleMappingsHeading: React.FC<Props> = ({ productName, onClick }) =
       </EuiFlexItem>
     </EuiFlexGroup>
     <EuiSpacer />
-  </>
+  </header>
 );
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/types.ts b/x-pack/plugins/enterprise_search/public/applications/shared/types.ts
index f450ca556ebe25..67208c63ddf4cc 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/types.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/types.ts
@@ -5,6 +5,8 @@
  * 2.0.
  */
 
+import { APP_SEARCH_PLUGIN, WORKPLACE_SEARCH_PLUGIN } from '../../../common/constants';
+
 import { ADD, UPDATE } from './constants/operations';
 
 export type TOperation = typeof ADD | typeof UPDATE;
@@ -36,4 +38,5 @@ export interface RoleMapping {
   };
 }
 
-export type ProductName = 'App Search' | 'Workplace Search';
+const productNames = [APP_SEARCH_PLUGIN.NAME, WORKPLACE_SEARCH_PLUGIN.NAME] as const;
+export type ProductName = typeof productNames[number];
diff --git a/x-pack/plugins/enterprise_search/public/applications/test_helpers/get_page_header.tsx b/x-pack/plugins/enterprise_search/public/applications/test_helpers/get_page_header.tsx
new file mode 100644
index 00000000000000..6e89274dca5703
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/test_helpers/get_page_header.tsx
@@ -0,0 +1,43 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { Fragment } from 'react';
+
+import { shallow, ShallowWrapper } from 'enzyme';
+
+import { EuiPageHeaderProps } from '@elastic/eui';
+
+/*
+ * Given an AppSearchPageTemplate or WorkplaceSearchPageTemplate, these
+ * helpers dive into various parts of the EuiPageHeader to make assertions
+ * slightly less of a pain in shallow renders
+ */
+
+export const getPageHeader = (wrapper: ShallowWrapper) => {
+  const pageHeader = wrapper.prop('pageHeader') as EuiPageHeaderProps;
+  return pageHeader || {};
+};
+
+export const getPageTitle = (wrapper: ShallowWrapper) => {
+  return getPageHeader(wrapper).pageTitle;
+};
+
+export const getPageDescription = (wrapper: ShallowWrapper) => {
+  return getPageHeader(wrapper).description;
+};
+
+export const getPageHeaderActions = (wrapper: ShallowWrapper) => {
+  const actions = getPageHeader(wrapper).rightSideItems || [];
+
+  return shallow(
+    <div>
+      {actions.map((action: React.ReactNode, i) => (
+        <Fragment key={i}>{action}</Fragment>
+      ))}
+    </div>
+  );
+};
diff --git a/x-pack/plugins/enterprise_search/public/applications/test_helpers/index.ts b/x-pack/plugins/enterprise_search/public/applications/test_helpers/index.ts
index e34ff763637b5a..ed5c3f85a888ee 100644
--- a/x-pack/plugins/enterprise_search/public/applications/test_helpers/index.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/test_helpers/index.ts
@@ -10,6 +10,12 @@ export { mountAsync } from './mount_async';
 export { mountWithIntl } from './mount_with_i18n';
 export { shallowWithIntl } from './shallow_with_i18n';
 export { rerender } from './enzyme_rerender';
+export {
+  getPageHeader,
+  getPageTitle,
+  getPageDescription,
+  getPageHeaderActions,
+} from './get_page_header';
 
 // Misc
 export { expectedAsyncError } from './expected_async_error';
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/index.ts b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/index.ts
index e1c2a3b76e3ff1..8cdc1336817629 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/index.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/index.ts
@@ -5,7 +5,8 @@
  * 2.0.
  */
 
-export { WorkplaceSearchNav } from './nav';
+export { WorkplaceSearchPageTemplate } from './page_template';
+export { useWorkplaceSearchNav, WorkplaceSearchNav } from './nav';
 export { WorkplaceSearchHeaderActions } from './kibana_header_actions';
 export { AccountHeader } from './account_header';
 export { PersonalDashboardLayout } from './personal_dashboard_layout';
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/nav.test.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/nav.test.tsx
index 8f37f608f4e282..90da5b3163ecfc 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/nav.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/nav.test.tsx
@@ -5,7 +5,10 @@
  * 2.0.
  */
 
-import '../../../__mocks__/enterprise_search_url.mock';
+jest.mock('../../../shared/layout', () => ({
+  ...jest.requireActual('../../../shared/layout'),
+  generateNavLink: jest.fn(({ to }) => ({ href: to })),
+}));
 
 import React from 'react';
 
@@ -13,7 +16,55 @@ import { shallow } from 'enzyme';
 
 import { SideNav, SideNavLink } from '../../../shared/layout';
 
-import { WorkplaceSearchNav } from './';
+import { useWorkplaceSearchNav, WorkplaceSearchNav } from './';
+
+describe('useWorkplaceSearchNav', () => {
+  it('returns an array of top-level Workplace Search nav items', () => {
+    expect(useWorkplaceSearchNav()).toEqual([
+      {
+        id: '',
+        name: '',
+        items: [
+          {
+            id: 'root',
+            name: 'Overview',
+            href: '/',
+          },
+          {
+            id: 'sources',
+            name: 'Sources',
+            href: '/sources',
+            items: [],
+          },
+          {
+            id: 'groups',
+            name: 'Groups',
+            href: '/groups',
+            items: [],
+          },
+          {
+            id: 'usersRoles',
+            name: 'Users & roles',
+            href: '/role_mappings',
+          },
+          {
+            id: 'security',
+            name: 'Security',
+            href: '/security',
+          },
+          {
+            id: 'settings',
+            name: 'Settings',
+            href: '/settings',
+            items: [],
+          },
+        ],
+      },
+    ]);
+  });
+});
+
+// TODO: Delete below once fully migrated to KibanaPageTemplate
 
 describe('WorkplaceSearchNav', () => {
   it('renders', () => {
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/nav.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/nav.tsx
index fb3c8556029b25..8e7b13a6218214 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/nav.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/nav.tsx
@@ -7,10 +7,10 @@
 
 import React from 'react';
 
-import { EuiSpacer } from '@elastic/eui';
+import { EuiSideNavItemType, EuiSpacer } from '@elastic/eui';
 
 import { WORKPLACE_SEARCH_PLUGIN } from '../../../../../common/constants';
-import { SideNav, SideNavLink } from '../../../shared/layout';
+import { generateNavLink, SideNav, SideNavLink } from '../../../shared/layout';
 import { NAV } from '../../constants';
 import {
   SOURCES_PATH,
@@ -20,6 +20,51 @@ import {
   ORG_SETTINGS_PATH,
 } from '../../routes';
 
+export const useWorkplaceSearchNav = () => {
+  const navItems: Array<EuiSideNavItemType<unknown>> = [
+    {
+      id: 'root',
+      name: NAV.OVERVIEW,
+      ...generateNavLink({ to: '/', isRoot: true }),
+    },
+    {
+      id: 'sources',
+      name: NAV.SOURCES,
+      ...generateNavLink({ to: SOURCES_PATH }),
+      items: [], // TODO: Source subnav
+    },
+    {
+      id: 'groups',
+      name: NAV.GROUPS,
+      ...generateNavLink({ to: GROUPS_PATH }),
+      items: [], // TODO: Group subnav
+    },
+    {
+      id: 'usersRoles',
+      name: NAV.ROLE_MAPPINGS,
+      ...generateNavLink({ to: ROLE_MAPPINGS_PATH }),
+    },
+    {
+      id: 'security',
+      name: NAV.SECURITY,
+      ...generateNavLink({ to: SECURITY_PATH }),
+    },
+    {
+      id: 'settings',
+      name: NAV.SETTINGS,
+      ...generateNavLink({ to: ORG_SETTINGS_PATH }),
+      items: [], // TODO: Settings subnav
+    },
+  ];
+
+  // Root level items are meant to be section headers, but the WS nav (currently)
+  // isn't organized this way. So we crate a fake empty parent item here
+  // to cause all our navItems to properly render as nav links.
+  return [{ id: '', name: '', items: navItems }];
+};
+
+// TODO: Delete below once fully migrated to KibanaPageTemplate
+
 interface Props {
   sourcesSubNav?: React.ReactNode;
   groupsSubNav?: React.ReactNode;
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/page_template.test.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/page_template.test.tsx
new file mode 100644
index 00000000000000..622fddc449ca7d
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/page_template.test.tsx
@@ -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
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+jest.mock('./nav', () => ({
+  useWorkplaceSearchNav: () => [],
+}));
+
+import React from 'react';
+
+import { shallow } from 'enzyme';
+
+import { SetWorkplaceSearchChrome } from '../../../shared/kibana_chrome';
+import { EnterpriseSearchPageTemplate } from '../../../shared/layout';
+import { SendWorkplaceSearchTelemetry } from '../../../shared/telemetry';
+
+import { WorkplaceSearchPageTemplate } from './page_template';
+
+describe('WorkplaceSearchPageTemplate', () => {
+  it('renders', () => {
+    const wrapper = shallow(
+      <WorkplaceSearchPageTemplate>
+        <div className="hello">world</div>
+      </WorkplaceSearchPageTemplate>
+    );
+
+    expect(wrapper.type()).toEqual(EnterpriseSearchPageTemplate);
+    expect(wrapper.prop('solutionNav')).toEqual({ name: 'Workplace Search', items: [] });
+    expect(wrapper.find('.hello').text()).toEqual('world');
+  });
+
+  describe('page chrome', () => {
+    it('takes a breadcrumb array & renders a product-specific page chrome', () => {
+      const wrapper = shallow(<WorkplaceSearchPageTemplate pageChrome={['Some page']} />);
+      const setPageChrome = wrapper.find(EnterpriseSearchPageTemplate).prop('setPageChrome') as any;
+
+      expect(setPageChrome.type).toEqual(SetWorkplaceSearchChrome);
+      expect(setPageChrome.props.trail).toEqual(['Some page']);
+    });
+  });
+
+  describe('page telemetry', () => {
+    it('takes a metric & renders product-specific telemetry viewed event', () => {
+      const wrapper = shallow(<WorkplaceSearchPageTemplate pageViewTelemetry="some_page" />);
+
+      expect(wrapper.find(SendWorkplaceSearchTelemetry).prop('action')).toEqual('viewed');
+      expect(wrapper.find(SendWorkplaceSearchTelemetry).prop('metric')).toEqual('some_page');
+    });
+  });
+
+  describe('props', () => {
+    it('allows overriding the restrictWidth default', () => {
+      const wrapper = shallow(<WorkplaceSearchPageTemplate />);
+      expect(wrapper.find(EnterpriseSearchPageTemplate).prop('restrictWidth')).toEqual(true);
+
+      wrapper.setProps({ restrictWidth: false });
+      expect(wrapper.find(EnterpriseSearchPageTemplate).prop('restrictWidth')).toEqual(false);
+    });
+
+    it('passes down any ...pageTemplateProps that EnterpriseSearchPageTemplate accepts', () => {
+      const wrapper = shallow(
+        <WorkplaceSearchPageTemplate
+          pageHeader={{ pageTitle: 'hello world' }}
+          isLoading={false}
+          emptyState={<div />}
+        />
+      );
+
+      expect(wrapper.find(EnterpriseSearchPageTemplate).prop('pageHeader')!.pageTitle).toEqual(
+        'hello world'
+      );
+      expect(wrapper.find(EnterpriseSearchPageTemplate).prop('isLoading')).toEqual(false);
+      expect(wrapper.find(EnterpriseSearchPageTemplate).prop('emptyState')).toEqual(<div />);
+    });
+  });
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/page_template.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/page_template.tsx
new file mode 100644
index 00000000000000..4a6e0d9c6e2ddc
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/page_template.tsx
@@ -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
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { WORKPLACE_SEARCH_PLUGIN } from '../../../../../common/constants';
+import { SetWorkplaceSearchChrome } from '../../../shared/kibana_chrome';
+import { EnterpriseSearchPageTemplate, PageTemplateProps } from '../../../shared/layout';
+import { SendWorkplaceSearchTelemetry } from '../../../shared/telemetry';
+
+import { useWorkplaceSearchNav } from './nav';
+
+export const WorkplaceSearchPageTemplate: React.FC<PageTemplateProps> = ({
+  children,
+  pageChrome,
+  pageViewTelemetry,
+  ...pageTemplateProps
+}) => {
+  return (
+    <EnterpriseSearchPageTemplate
+      restrictWidth
+      {...pageTemplateProps}
+      solutionNav={{
+        name: WORKPLACE_SEARCH_PLUGIN.NAME,
+        items: useWorkplaceSearchNav(),
+      }}
+      setPageChrome={pageChrome && <SetWorkplaceSearchChrome trail={pageChrome} />}
+    >
+      {pageViewTelemetry && (
+        <SendWorkplaceSearchTelemetry action="viewed" metric={pageViewTelemetry} />
+      )}
+      {children}
+    </EnterpriseSearchPageTemplate>
+  );
+};
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/index.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/index.tsx
index 7e911b31c516b7..dd263c3bd69f5d 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/index.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/index.tsx
@@ -141,9 +141,7 @@ export const WorkplaceSearchConfigured: React.FC<InitialAppData> = (props) => {
         </Layout>
       </Route>
       <Route path={ROLE_MAPPINGS_PATH}>
-        <Layout navigation={<WorkplaceSearchNav />} restrictWidth readOnlyMode={readOnlyMode}>
-          <RoleMappings />
-        </Layout>
+        <RoleMappings />
       </Route>
       <Route path={SECURITY_PATH}>
         <Layout navigation={<WorkplaceSearchNav />} restrictWidth readOnlyMode={readOnlyMode}>
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/role_mappings/role_mappings.test.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/role_mappings/role_mappings.test.tsx
index d7ce8053c71f02..308022ccb2e5a7 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/role_mappings/role_mappings.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/role_mappings/role_mappings.test.tsx
@@ -12,7 +12,6 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { Loading } from '../../../shared/loading';
 import { RoleMappingsTable, RoleMappingsHeading } from '../../../shared/role_mapping';
 import { wsRoleMapping } from '../../../shared/role_mapping/__mocks__/roles';
 
@@ -44,13 +43,6 @@ describe('RoleMappings', () => {
     expect(wrapper.find(RoleMappingsTable)).toHaveLength(1);
   });
 
-  it('returns Loading when loading', () => {
-    setMockValues({ ...mockValues, dataLoading: true });
-    const wrapper = shallow(<RoleMappings />);
-
-    expect(wrapper.find(Loading)).toHaveLength(1);
-  });
-
   it('renders RoleMapping flyout', () => {
     setMockValues({ ...mockValues, roleMappingFlyoutOpen: true });
     const wrapper = shallow(<RoleMappings />);
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/role_mappings/role_mappings.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/role_mappings/role_mappings.tsx
index 46c426c3dad2a5..b153d012241939 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/role_mappings/role_mappings.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/role_mappings/role_mappings.tsx
@@ -9,11 +9,10 @@ import React, { useEffect } from 'react';
 
 import { useActions, useValues } from 'kea';
 
-import { FlashMessages } from '../../../shared/flash_messages';
-import { SetWorkplaceSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
-import { Loading } from '../../../shared/loading';
+import { WORKPLACE_SEARCH_PLUGIN } from '../../../../../common/constants';
 import { RoleMappingsTable, RoleMappingsHeading } from '../../../shared/role_mapping';
 import { ROLE_MAPPINGS_TITLE } from '../../../shared/role_mapping/constants';
+import { WorkplaceSearchPageTemplate } from '../../components/layout';
 
 import { ROLE_MAPPINGS_TABLE_HEADER } from './constants';
 
@@ -36,11 +35,12 @@ export const RoleMappings: React.FC = () => {
     initializeRoleMappings();
   }, []);
 
-  if (dataLoading) return <Loading />;
-
   const roleMappingsSection = (
-    <>
-      <RoleMappingsHeading productName="Workplace Search" onClick={() => initializeRoleMapping()} />
+    <section>
+      <RoleMappingsHeading
+        productName={WORKPLACE_SEARCH_PLUGIN.NAME}
+        onClick={() => initializeRoleMapping()}
+      />
       <RoleMappingsTable
         roleMappings={roleMappings}
         accessItemKey="groups"
@@ -49,15 +49,17 @@ export const RoleMappings: React.FC = () => {
         initializeRoleMapping={initializeRoleMapping}
         handleDeleteMapping={handleDeleteMapping}
       />
-    </>
+    </section>
   );
 
   return (
-    <>
-      <SetPageChrome trail={[ROLE_MAPPINGS_TITLE]} />
+    <WorkplaceSearchPageTemplate
+      pageChrome={[ROLE_MAPPINGS_TITLE]}
+      pageHeader={{ pageTitle: ROLE_MAPPINGS_TITLE }}
+      isLoading={dataLoading}
+    >
       {roleMappingFlyoutOpen && <RoleMapping />}
-      <FlashMessages />
       {roleMappingsSection}
-    </>
+    </WorkplaceSearchPageTemplate>
   );
 };
diff --git a/x-pack/plugins/fleet/kibana.json b/x-pack/plugins/fleet/kibana.json
index 2780c576bceb08..bbf60ef82ee6ce 100644
--- a/x-pack/plugins/fleet/kibana.json
+++ b/x-pack/plugins/fleet/kibana.json
@@ -4,15 +4,8 @@
   "server": true,
   "ui": true,
   "configPath": ["xpack", "fleet"],
-  "requiredPlugins": ["licensing", "data", "encryptedSavedObjects"],
-  "optionalPlugins": [
-    "security",
-    "features",
-    "cloud",
-    "usageCollection",
-    "home",
-    "globalSearch"
-  ],
+  "requiredPlugins": ["licensing", "data", "encryptedSavedObjects", "navigation"],
+  "optionalPlugins": ["security", "features", "cloud", "usageCollection", "home", "globalSearch"],
   "extraPublicDirs": ["common"],
   "requiredBundles": ["kibanaReact", "esUiShared", "home", "infra", "kibanaUtils"]
 }
diff --git a/x-pack/plugins/fleet/public/applications/fleet/app.tsx b/x-pack/plugins/fleet/public/applications/fleet/app.tsx
index 1398e121c68700..1072a6b66419eb 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/app.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/app.tsx
@@ -7,7 +7,7 @@
 
 import React, { memo, useEffect, useState } from 'react';
 import type { AppMountParameters } from 'kibana/public';
-import { EuiCode, EuiEmptyPrompt, EuiErrorBoundary, EuiPanel } from '@elastic/eui';
+import { EuiCode, EuiEmptyPrompt, EuiErrorBoundary, EuiPanel, EuiPortal } from '@elastic/eui';
 import type { History } from 'history';
 import { createHashHistory } from 'history';
 import { Router, Redirect, Route, Switch } from 'react-router-dom';
@@ -16,11 +16,13 @@ import { i18n } from '@kbn/i18n';
 import styled from 'styled-components';
 import useObservable from 'react-use/lib/useObservable';
 
+import type { TopNavMenuData } from 'src/plugins/navigation/public';
+
 import type { FleetConfigType, FleetStartServices } from '../../plugin';
 import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public';
 import { EuiThemeProvider } from '../../../../../../src/plugins/kibana_react/common';
 
-import { PackageInstallProvider } from '../integrations/hooks';
+import { PackageInstallProvider, useUrlModal } from '../integrations/hooks';
 
 import {
   ConfigContext,
@@ -30,25 +32,25 @@ import {
   sendGetPermissionsCheck,
   sendSetup,
   useBreadcrumbs,
-  useConfig,
   useStartServices,
   UIExtensionsContext,
 } from './hooks';
-import { Error, Loading } from './components';
+import { Error, Loading, SettingFlyout } from './components';
 import type { UIExtensionsStorage } from './types';
 
 import { FLEET_ROUTING_PATHS } from './constants';
 import { DefaultLayout, WithoutHeaderLayout } from './layouts';
 import { AgentPolicyApp } from './sections/agent_policy';
 import { DataStreamApp } from './sections/data_stream';
-import { FleetApp } from './sections/agents';
-import { IngestManagerOverview } from './sections/overview';
-import { ProtectedRoute } from './index';
+import { AgentsApp } from './sections/agents';
 import { CreatePackagePolicyPage } from './sections/agent_policy/create_package_policy_page';
+import { EnrollmentTokenListPage } from './sections/agents/enrollment_token_list_page';
+
+const FEEDBACK_URL = 'https://ela.st/fleet-feedback';
 
 const ErrorLayout = ({ children }: { children: JSX.Element }) => (
   <EuiErrorBoundary>
-    <DefaultLayout showSettings={false}>
+    <DefaultLayout>
       <WithoutHeaderLayout>{children}</WithoutHeaderLayout>
     </DefaultLayout>
   </EuiErrorBoundary>
@@ -233,37 +235,82 @@ export const FleetAppContext: React.FC<{
   }
 );
 
-export const AppRoutes = memo(() => {
-  const { agents } = useConfig();
+const FleetTopNav = memo(
+  ({ setHeaderActionMenu }: { setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'] }) => {
+    const { getModalHref } = useUrlModal();
+    const services = useStartServices();
 
-  return (
-    <Switch>
-      <Route path={FLEET_ROUTING_PATHS.policies}>
-        <DefaultLayout section="agent_policy">
-          <AgentPolicyApp />
-        </DefaultLayout>
-      </Route>
-      <Route path={FLEET_ROUTING_PATHS.data_streams}>
-        <DefaultLayout section="data_stream">
-          <DataStreamApp />
-        </DefaultLayout>
-      </Route>
-      <ProtectedRoute path={FLEET_ROUTING_PATHS.fleet} isAllowed={agents.enabled}>
-        <DefaultLayout section="fleet">
-          <FleetApp />
-        </DefaultLayout>
-      </ProtectedRoute>
-      <Route exact path={FLEET_ROUTING_PATHS.overview}>
-        <DefaultLayout section="overview">
-          <IngestManagerOverview />
-        </DefaultLayout>
-      </Route>
-      <Route path={FLEET_ROUTING_PATHS.add_integration_to_policy}>
-        <DefaultLayout showNav={false}>
-          <CreatePackagePolicyPage />
-        </DefaultLayout>
-      </Route>
-      <Redirect to="/" />
-    </Switch>
-  );
-});
+    const { TopNavMenu } = services.navigation.ui;
+
+    const topNavConfig: TopNavMenuData[] = [
+      {
+        label: i18n.translate('xpack.fleet.appNavigation.sendFeedbackButton', {
+          defaultMessage: 'Send Feedback',
+        }),
+        iconType: 'popout',
+        run: () => window.open(FEEDBACK_URL),
+      },
+
+      {
+        label: i18n.translate('xpack.fleet.appNavigation.settingsButton', {
+          defaultMessage: 'Fleet settings',
+        }),
+        iconType: 'gear',
+        run: () => (window.location.href = getModalHref('settings')),
+      },
+    ];
+    return (
+      <TopNavMenu
+        appName={i18n.translate('xpack.fleet.appTitle', { defaultMessage: 'Fleet' })}
+        config={topNavConfig}
+        setMenuMountPoint={setHeaderActionMenu}
+      />
+    );
+  }
+);
+
+export const AppRoutes = memo(
+  ({ setHeaderActionMenu }: { setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'] }) => {
+    const { modal, setModal } = useUrlModal();
+
+    return (
+      <>
+        <FleetTopNav setHeaderActionMenu={setHeaderActionMenu} />
+
+        {modal === 'settings' && (
+          <EuiPortal>
+            <SettingFlyout
+              onClose={() => {
+                setModal(null);
+              }}
+            />
+          </EuiPortal>
+        )}
+
+        <Switch>
+          <Route path={FLEET_ROUTING_PATHS.agents}>
+            <AgentsApp />
+          </Route>
+          <Route path={FLEET_ROUTING_PATHS.policies}>
+            <AgentPolicyApp />
+          </Route>
+          <Route path={FLEET_ROUTING_PATHS.enrollment_tokens}>
+            <EnrollmentTokenListPage />
+          </Route>
+          <Route path={FLEET_ROUTING_PATHS.data_streams}>
+            <DataStreamApp />
+          </Route>
+
+          {/* TODO: Move this route to the Integrations app */}
+          <Route path={FLEET_ROUTING_PATHS.add_integration_to_policy}>
+            <DefaultLayout>
+              <CreatePackagePolicyPage />
+            </DefaultLayout>
+          </Route>
+
+          <Redirect to={FLEET_ROUTING_PATHS.agents} />
+        </Switch>
+      </>
+    );
+  }
+);
diff --git a/x-pack/plugins/fleet/public/applications/fleet/hooks/use_breadcrumbs.tsx b/x-pack/plugins/fleet/public/applications/fleet/hooks/use_breadcrumbs.tsx
index fd980475dc9194..254885ea71b1e4 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/hooks/use_breadcrumbs.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/hooks/use_breadcrumbs.tsx
@@ -20,7 +20,7 @@ interface AdditionalBreadcrumbOptions {
 type Breadcrumb = ChromeBreadcrumb & Partial<AdditionalBreadcrumbOptions>;
 
 const BASE_BREADCRUMB: Breadcrumb = {
-  href: pagePathGetters.overview()[1],
+  href: pagePathGetters.base()[1],
   text: i18n.translate('xpack.fleet.breadcrumbs.appTitle', {
     defaultMessage: 'Fleet',
   }),
@@ -38,15 +38,6 @@ const breadcrumbGetters: {
   [key in Page]?: (values: DynamicPagePathValues) => Breadcrumb[];
 } = {
   base: () => [BASE_BREADCRUMB],
-  overview: () => [
-    BASE_BREADCRUMB,
-    {
-      text: i18n.translate('xpack.fleet.breadcrumbs.overviewPageTitle', {
-        defaultMessage: 'Overview',
-      }),
-    },
-  ],
-
   policies: () => [
     BASE_BREADCRUMB,
     {
@@ -122,15 +113,7 @@ const breadcrumbGetters: {
       }),
     },
   ],
-  fleet: () => [
-    BASE_BREADCRUMB,
-    {
-      text: i18n.translate('xpack.fleet.breadcrumbs.agentsPageTitle', {
-        defaultMessage: 'Agents',
-      }),
-    },
-  ],
-  fleet_agent_list: () => [
+  agent_list: () => [
     BASE_BREADCRUMB,
     {
       text: i18n.translate('xpack.fleet.breadcrumbs.agentsPageTitle', {
@@ -138,24 +121,18 @@ const breadcrumbGetters: {
       }),
     },
   ],
-  fleet_agent_details: ({ agentHost }) => [
+  agent_details: ({ agentHost }) => [
     BASE_BREADCRUMB,
     {
-      href: pagePathGetters.fleet()[1],
+      href: pagePathGetters.agent_list({})[1],
       text: i18n.translate('xpack.fleet.breadcrumbs.agentsPageTitle', {
         defaultMessage: 'Agents',
       }),
     },
     { text: agentHost },
   ],
-  fleet_enrollment_tokens: () => [
+  enrollment_tokens: () => [
     BASE_BREADCRUMB,
-    {
-      href: pagePathGetters.fleet()[1],
-      text: i18n.translate('xpack.fleet.breadcrumbs.agentsPageTitle', {
-        defaultMessage: 'Agents',
-      }),
-    },
     {
       text: i18n.translate('xpack.fleet.breadcrumbs.enrollmentTokensPageTitle', {
         defaultMessage: 'Enrollment tokens',
diff --git a/x-pack/plugins/fleet/public/applications/fleet/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/index.tsx
index 7d31fb31b36a43..8942c13a0a69db 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/index.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/index.tsx
@@ -37,6 +37,7 @@ interface FleetAppProps {
   history: AppMountParameters['history'];
   kibanaVersion: string;
   extensions: UIExtensionsStorage;
+  setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
 }
 const FleetApp = ({
   basepath,
@@ -45,6 +46,7 @@ const FleetApp = ({
   history,
   kibanaVersion,
   extensions,
+  setHeaderActionMenu,
 }: FleetAppProps) => {
   return (
     <FleetAppContext
@@ -56,7 +58,7 @@ const FleetApp = ({
       extensions={extensions}
     >
       <WithPermissionsAndSetup>
-        <AppRoutes />
+        <AppRoutes setHeaderActionMenu={setHeaderActionMenu} />
       </WithPermissionsAndSetup>
     </FleetAppContext>
   );
@@ -64,7 +66,7 @@ const FleetApp = ({
 
 export function renderApp(
   startServices: FleetStartServices,
-  { element, appBasePath, history }: AppMountParameters,
+  { element, appBasePath, history, setHeaderActionMenu }: AppMountParameters,
   config: FleetConfigType,
   kibanaVersion: string,
   extensions: UIExtensionsStorage
@@ -77,6 +79,7 @@ export function renderApp(
       history={history}
       kibanaVersion={kibanaVersion}
       extensions={extensions}
+      setHeaderActionMenu={setHeaderActionMenu}
     />,
     element
   );
diff --git a/x-pack/plugins/fleet/public/applications/fleet/layouts/default.tsx b/x-pack/plugins/fleet/public/applications/fleet/layouts/default.tsx
index d707fd162ae020..f312ff374d792c 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/layouts/default.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/layouts/default.tsx
@@ -6,145 +6,98 @@
  */
 
 import React from 'react';
-import styled from 'styled-components';
-import {
-  EuiTabs,
-  EuiTab,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiButtonEmpty,
-  EuiPortal,
-} from '@elastic/eui';
+import { EuiText, EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import type { Section } from '../sections';
-import { SettingFlyout } from '../components';
-import { useLink, useConfig, useUrlModal } from '../hooks';
+import { useLink, useConfig } from '../hooks';
+import { WithHeaderLayout } from '../../../layouts';
 
 interface Props {
-  showNav?: boolean;
-  showSettings?: boolean;
   section?: Section;
   children?: React.ReactNode;
 }
 
-const Container = styled.div`
-  min-height: calc(
-    100vh - ${(props) => parseFloat(props.theme.eui.euiHeaderHeightCompensation) * 2}px
-  );
-  background: ${(props) => props.theme.eui.euiColorEmptyShade};
-  display: flex;
-  flex-direction: column;
-`;
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-`;
-
-const Nav = styled.nav`
-  background: ${(props) => props.theme.eui.euiColorEmptyShade};
-  border-bottom: ${(props) => props.theme.eui.euiBorderThin};
-  padding: ${(props) =>
-    `${props.theme.eui.euiSize} ${props.theme.eui.euiSizeL} ${props.theme.eui.euiSize} ${props.theme.eui.euiSizeL}`};
-  .euiTabs {
-    padding-left: 3px;
-    margin-left: -3px;
-  }
-`;
-
-export const DefaultLayout: React.FunctionComponent<Props> = ({
-  showNav = true,
-  showSettings = true,
-  section,
-  children,
-}) => {
+export const DefaultLayout: React.FunctionComponent<Props> = ({ section, children }) => {
   const { getHref } = useLink();
   const { agents } = useConfig();
-  const { modal, setModal, getModalHref } = useUrlModal();
 
   return (
-    <>
-      {modal === 'settings' && (
-        <EuiPortal>
-          <SettingFlyout
-            onClose={() => {
-              setModal(null);
-            }}
-          />
-        </EuiPortal>
-      )}
-
-      <Container>
-        <Wrapper>
-          {showNav ? (
-            <Nav>
-              <EuiFlexGroup gutterSize="l" alignItems="center">
-                <EuiFlexItem>
-                  <EuiTabs display="condensed">
-                    <EuiTab isSelected={section === 'overview'} href={getHref('overview')}>
-                      <FormattedMessage
-                        id="xpack.fleet.appNavigation.overviewLinkText"
-                        defaultMessage="Overview"
-                      />
-                    </EuiTab>
-                    <EuiTab isSelected={section === 'agent_policy'} href={getHref('policies_list')}>
-                      <FormattedMessage
-                        id="xpack.fleet.appNavigation.policiesLinkText"
-                        defaultMessage="Policies"
-                      />
-                    </EuiTab>
-                    <EuiTab
-                      isSelected={section === 'fleet'}
-                      href={getHref('fleet')}
-                      disabled={!agents?.enabled}
-                    >
-                      <FormattedMessage
-                        id="xpack.fleet.appNavigation.agentsLinkText"
-                        defaultMessage="Agents"
-                      />
-                    </EuiTab>
-                    <EuiTab isSelected={section === 'data_stream'} href={getHref('data_streams')}>
-                      <FormattedMessage
-                        id="xpack.fleet.appNavigation.dataStreamsLinkText"
-                        defaultMessage="Data streams"
-                      />
-                    </EuiTab>
-                  </EuiTabs>
-                </EuiFlexItem>
-                <EuiFlexItem grow={false}>
-                  <EuiFlexGroup gutterSize="s" direction="row">
-                    <EuiFlexItem>
-                      <EuiButtonEmpty
-                        iconType="popout"
-                        href="https://ela.st/fleet-feedback"
-                        target="_blank"
-                      >
-                        <FormattedMessage
-                          id="xpack.fleet.appNavigation.sendFeedbackButton"
-                          defaultMessage="Send feedback"
-                        />
-                      </EuiButtonEmpty>
-                    </EuiFlexItem>
-                    {showSettings ? (
-                      <EuiFlexItem>
-                        <EuiButtonEmpty iconType="gear" href={getModalHref('settings')}>
-                          <FormattedMessage
-                            id="xpack.fleet.appNavigation.settingsButton"
-                            defaultMessage="Fleet settings"
-                          />
-                        </EuiButtonEmpty>
-                      </EuiFlexItem>
-                    ) : null}
-                  </EuiFlexGroup>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </Nav>
-          ) : null}
-          {children}
-        </Wrapper>
-      </Container>
-    </>
+    <WithHeaderLayout
+      leftColumn={
+        <EuiFlexGroup direction="column" gutterSize="m">
+          <EuiFlexItem>
+            <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
+              <EuiFlexItem grow={false}>
+                <EuiTitle size="l">
+                  <h1>
+                    <FormattedMessage id="xpack.fleet.overviewPageTitle" defaultMessage="Fleet" />
+                  </h1>
+                </EuiTitle>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiText color="subdued">
+              <p>
+                <FormattedMessage
+                  id="xpack.fleet.overviewPageSubtitle"
+                  defaultMessage="Centralized management for Elastic Agents"
+                />
+              </p>
+            </EuiText>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      }
+      tabs={[
+        {
+          name: (
+            <FormattedMessage
+              id="xpack.fleet.appNavigation.agentsLinkText"
+              defaultMessage="Agents"
+            />
+          ),
+          isSelected: section === 'agents',
+          href: getHref('agent_list'),
+          disabled: !agents?.enabled,
+          'data-test-subj': 'fleet-agents-tab',
+        },
+        {
+          name: (
+            <FormattedMessage
+              id="xpack.fleet.appNavigation.policiesLinkText"
+              defaultMessage="Agent Policies"
+            />
+          ),
+          isSelected: section === 'agent_policies',
+          href: getHref('policies_list'),
+          'data-test-subj': 'fleet-agent-policies-tab',
+        },
+        {
+          name: (
+            <FormattedMessage
+              id="xpack.fleet.appNavigation.enrollmentTokensText"
+              defaultMessage="Enrollment Tokens"
+            />
+          ),
+          isSelected: section === 'enrollment_tokens',
+          href: getHref('enrollment_tokens'),
+          'data-test-subj': 'fleet-enrollment-tokens-tab',
+        },
+        {
+          name: (
+            <FormattedMessage
+              id="xpack.fleet.appNavigation.dataStreamsLinkText"
+              defaultMessage="Data streams"
+            />
+          ),
+          isSelected: section === 'data_streams',
+          href: getHref('data_streams'),
+          'data-test-subj': 'fleet-datastreams-tab',
+        },
+      ]}
+    >
+      {children}
+    </WithHeaderLayout>
   );
 };
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/index.tsx
index c0ec811ce2bcd5..d8db44e28e4af9 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/index.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/index.tsx
@@ -11,6 +11,8 @@ import { HashRouter as Router, Switch, Route } from 'react-router-dom';
 import { FLEET_ROUTING_PATHS } from '../../constants';
 import { useBreadcrumbs } from '../../hooks';
 
+import { DefaultLayout } from '../../layouts';
+
 import { AgentPolicyListPage } from './list_page';
 import { AgentPolicyDetailsPage } from './details_page';
 import { CreatePackagePolicyPage } from './create_package_policy_page';
@@ -32,7 +34,9 @@ export const AgentPolicyApp: React.FunctionComponent = () => {
           <AgentPolicyDetailsPage />
         </Route>
         <Route path={FLEET_ROUTING_PATHS.policies_list}>
-          <AgentPolicyListPage />
+          <DefaultLayout section="agent_policies">
+            <AgentPolicyListPage />
+          </DefaultLayout>
         </Route>
       </Switch>
     </Router>
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/list_page/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/list_page/index.tsx
index 48b9118d115666..10859e32f00805 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/list_page/index.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/list_page/index.tsx
@@ -9,7 +9,6 @@ import React, { useCallback, useMemo, useState } from 'react';
 import type { EuiTableActionsColumnType, EuiTableFieldDataColumnType } from '@elastic/eui';
 import {
   EuiSpacer,
-  EuiText,
   EuiFlexGroup,
   EuiFlexItem,
   EuiButton,
@@ -25,7 +24,6 @@ import { useHistory } from 'react-router-dom';
 
 import type { AgentPolicy } from '../../../types';
 import { AGENT_POLICY_SAVED_OBJECT_TYPE } from '../../../constants';
-import { WithHeaderLayout } from '../../../layouts';
 import {
   useCapabilities,
   useGetAgentPolicies,
@@ -41,37 +39,6 @@ import { LinkedAgentCount, AgentPolicyActionMenu } from '../components';
 
 import { CreateAgentPolicyFlyout } from './components';
 
-const AgentPolicyListPageLayout: React.FunctionComponent = ({ children }) => (
-  <WithHeaderLayout
-    leftColumn={
-      <EuiFlexGroup direction="column" gutterSize="m">
-        <EuiFlexItem>
-          <EuiText>
-            <h1>
-              <FormattedMessage
-                id="xpack.fleet.agentPolicyList.pageTitle"
-                defaultMessage="Agent policies"
-              />
-            </h1>
-          </EuiText>
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiText color="subdued">
-            <p>
-              <FormattedMessage
-                id="xpack.fleet.agentPolicyList.pageSubtitle"
-                defaultMessage="Use agent policies to manage your agents and the data they collect."
-              />
-            </p>
-          </EuiText>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    }
-  >
-    {children}
-  </WithHeaderLayout>
-);
-
 export const AgentPolicyListPage: React.FunctionComponent<{}> = () => {
   useBreadcrumbs('policies_list');
   const { getPath } = useLink();
@@ -246,7 +213,7 @@ export const AgentPolicyListPage: React.FunctionComponent<{}> = () => {
   };
 
   return (
-    <AgentPolicyListPageLayout>
+    <>
       {isCreateAgentPolicyFlyoutOpen ? (
         <CreateAgentPolicyFlyout
           onClose={() => {
@@ -322,6 +289,6 @@ export const AgentPolicyListPage: React.FunctionComponent<{}> = () => {
         sorting={{ sort: sorting }}
         onChange={onTableChange}
       />
-    </AgentPolicyListPageLayout>
+    </>
   );
 };
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_integrations.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_integrations.tsx
index 6e0206603a458e..a599d726cedefe 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_integrations.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_details/agent_details_integrations.tsx
@@ -101,7 +101,7 @@ export const AgentDetailsIntegration: React.FunctionComponent<{
             })}
           >
             <EuiButtonIcon
-              href={getHref('fleet_agent_details', {
+              href={getHref('agent_details', {
                 agentId: agent.id,
                 tabId: 'logs',
                 logQuery: getLogsQueryByInputType(inputType),
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/index.tsx
index dd6611d581e89f..ce213808563e65 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/index.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/index.tsx
@@ -81,12 +81,7 @@ export const AgentDetailsPage: React.FunctionComponent = () => {
     () => (
       <EuiFlexGroup direction="column" gutterSize="s" alignItems="flexStart">
         <EuiFlexItem>
-          <EuiButtonEmpty
-            iconType="arrowLeft"
-            href={getHref('fleet_agent_list')}
-            flush="left"
-            size="xs"
-          >
+          <EuiButtonEmpty iconType="arrowLeft" href={getHref('agent_list')} flush="left" size="xs">
             <FormattedMessage
               id="xpack.fleet.agentDetails.viewAgentListTitle"
               defaultMessage="View all agents"
@@ -232,7 +227,7 @@ export const AgentDetailsPage: React.FunctionComponent = () => {
         name: i18n.translate('xpack.fleet.agentDetails.subTabs.detailsTab', {
           defaultMessage: 'Agent details',
         }),
-        href: getHref('fleet_agent_details', { agentId, tabId: 'details' }),
+        href: getHref('agent_details', { agentId, tabId: 'details' }),
         isSelected: !tabId || tabId === 'details',
       },
       {
@@ -240,7 +235,7 @@ export const AgentDetailsPage: React.FunctionComponent = () => {
         name: i18n.translate('xpack.fleet.agentDetails.subTabs.logsTab', {
           defaultMessage: 'Logs',
         }),
-        href: getHref('fleet_agent_details', { agentId, tabId: 'logs' }),
+        href: getHref('agent_details_logs', { agentId, tabId: 'logs' }),
         isSelected: tabId === 'logs',
       },
     ];
@@ -299,7 +294,7 @@ const AgentDetailsPageContent: React.FunctionComponent<{
   agent: Agent;
   agentPolicy?: AgentPolicy;
 }> = ({ agent, agentPolicy }) => {
-  useBreadcrumbs('fleet_agent_details', {
+  useBreadcrumbs('agent_list', {
     agentHost:
       typeof agent.local_metadata.host === 'object' &&
       typeof agent.local_metadata.host.hostname === 'string'
@@ -309,13 +304,13 @@ const AgentDetailsPageContent: React.FunctionComponent<{
   return (
     <Switch>
       <Route
-        path={FLEET_ROUTING_PATHS.fleet_agent_details_logs}
+        path={FLEET_ROUTING_PATHS.agent_details_logs}
         render={() => {
           return <AgentLogs agent={agent} />;
         }}
       />
       <Route
-        path={FLEET_ROUTING_PATHS.fleet_agent_details}
+        path={FLEET_ROUTING_PATHS.agent_details}
         render={() => {
           return <AgentDetailsContent agent={agent} agentPolicy={agentPolicy} />;
         }}
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/search_and_filter_bar.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/search_and_filter_bar.tsx
index 1beaf437ceb0e9..1d7b44ceefb7c6 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/search_and_filter_bar.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/search_and_filter_bar.tsx
@@ -7,18 +7,20 @@
 
 import React, { useState } from 'react';
 import {
+  EuiButton,
   EuiFilterButton,
   EuiFilterGroup,
   EuiFilterSelectItem,
   EuiFlexGroup,
   EuiFlexItem,
   EuiPopover,
+  EuiPortal,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import type { AgentPolicy } from '../../../../types';
-import { SearchBar } from '../../../../components';
+import { AgentEnrollmentFlyout, SearchBar } from '../../../../components';
 import { AGENTS_INDEX } from '../../../../constants';
 
 const statusFilters = [
@@ -77,6 +79,8 @@ export const SearchAndFilterBar: React.FunctionComponent<{
   showUpgradeable,
   onShowUpgradeableChange,
 }) => {
+  const [isEnrollmentFlyoutOpen, setIsEnrollmentFlyoutOpen] = useState<boolean>(false);
+
   // Policies state for filtering
   const [isAgentPoliciesFilterOpen, setIsAgentPoliciesFilterOpen] = useState<boolean>(false);
 
@@ -97,6 +101,15 @@ export const SearchAndFilterBar: React.FunctionComponent<{
 
   return (
     <>
+      {isEnrollmentFlyoutOpen ? (
+        <EuiPortal>
+          <AgentEnrollmentFlyout
+            agentPolicies={agentPolicies}
+            onClose={() => setIsEnrollmentFlyoutOpen(false)}
+          />
+        </EuiPortal>
+      ) : null}
+
       {/* Search and filter bar */}
       <EuiFlexGroup alignItems="center">
         <EuiFlexItem grow={4}>
@@ -207,6 +220,15 @@ export const SearchAndFilterBar: React.FunctionComponent<{
                 </EuiFilterButton>
               </EuiFilterGroup>
             </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiButton
+                fill
+                iconType="plusInCircle"
+                onClick={() => setIsEnrollmentFlyoutOpen(true)}
+              >
+                <FormattedMessage id="xpack.fleet.agentList.addButton" defaultMessage="Add agent" />
+              </EuiButton>
+            </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>
       </EuiFlexGroup>
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/index.tsx
index 672b8718c9cbe7..431c4da3efb5b2 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/index.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/index.tsx
@@ -73,7 +73,7 @@ const RowActions = React.memo<{
   const menuItems = [
     <EuiContextMenuItem
       icon="inspect"
-      href={getHref('fleet_agent_details', { agentId: agent.id })}
+      href={getHref('agent_details', { agentId: agent.id })}
       key="viewAgent"
     >
       <FormattedMessage id="xpack.fleet.agentList.viewActionText" defaultMessage="View agent" />
@@ -146,7 +146,7 @@ function safeMetadata(val: any) {
 
 export const AgentListPage: React.FunctionComponent<{}> = () => {
   const { notifications } = useStartServices();
-  useBreadcrumbs('fleet_agent_list');
+  useBreadcrumbs('agent_list');
   const { getHref } = useLink();
   const defaultKuery: string = (useUrlParams().urlParams.kuery as string) || '';
   const hasWriteCapabilites = useCapabilities().write;
@@ -358,7 +358,7 @@ export const AgentListPage: React.FunctionComponent<{}> = () => {
         defaultMessage: 'Host',
       }),
       render: (host: string, agent: Agent) => (
-        <EuiLink href={getHref('fleet_agent_details', { agentId: agent.id })}>
+        <EuiLink href={getHref('agent_details', { agentId: agent.id })}>
           {safeMetadata(host)}
         </EuiLink>
       ),
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/list_layout.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/list_layout.tsx
deleted file mode 100644
index 67758282521b79..00000000000000
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/list_layout.tsx
+++ /dev/null
@@ -1,101 +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
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiText, EuiFlexGroup, EuiFlexItem, EuiButton, EuiPortal } from '@elastic/eui';
-import type { Props as EuiTabProps } from '@elastic/eui/src/components/tabs/tab';
-import { useRouteMatch } from 'react-router-dom';
-
-import { FLEET_ROUTING_PATHS } from '../../../constants';
-import { WithHeaderLayout } from '../../../layouts';
-import { useCapabilities, useLink, useGetAgentPolicies } from '../../../hooks';
-import { AgentEnrollmentFlyout } from '../../../components';
-
-export const ListLayout: React.FunctionComponent<{}> = ({ children }) => {
-  const { getHref } = useLink();
-  const hasWriteCapabilites = useCapabilities().write;
-
-  // Agent enrollment flyout state
-  const [isEnrollmentFlyoutOpen, setIsEnrollmentFlyoutOpen] = React.useState<boolean>(false);
-
-  const headerRightColumn = hasWriteCapabilites ? (
-    <EuiFlexGroup justifyContent="flexEnd">
-      <EuiFlexItem grow={false}>
-        <EuiButton fill iconType="plusInCircle" onClick={() => setIsEnrollmentFlyoutOpen(true)}>
-          <FormattedMessage id="xpack.fleet.agentList.enrollButton" defaultMessage="Add agent" />
-        </EuiButton>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  ) : undefined;
-  const headerLeftColumn = (
-    <EuiFlexGroup direction="column" gutterSize="s">
-      <EuiFlexItem>
-        <EuiText>
-          <h1>
-            <FormattedMessage id="xpack.fleet.agents.pageTitle" defaultMessage="Agents" />
-          </h1>
-        </EuiText>
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <EuiText color="subdued">
-          <p>
-            <FormattedMessage
-              id="xpack.fleet.agents.pageSubtitle"
-              defaultMessage="Manage and deploy policy updates to a group of agents of any size."
-            />
-          </p>
-        </EuiText>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  );
-
-  const agentPoliciesRequest = useGetAgentPolicies({
-    page: 1,
-    perPage: 1000,
-  });
-
-  const agentPolicies = agentPoliciesRequest.data ? agentPoliciesRequest.data.items : [];
-
-  const routeMatch = useRouteMatch();
-
-  return (
-    <WithHeaderLayout
-      leftColumn={headerLeftColumn}
-      rightColumn={headerRightColumn}
-      tabs={
-        ([
-          {
-            name: <FormattedMessage id="xpack.fleet.listTabs.agentTitle" defaultMessage="Agents" />,
-            isSelected: routeMatch.path === FLEET_ROUTING_PATHS.fleet_agent_list,
-            href: getHref('fleet_agent_list'),
-          },
-          {
-            name: (
-              <FormattedMessage
-                id="xpack.fleet.listTabs.enrollmentTokensTitle"
-                defaultMessage="Enrollment tokens"
-              />
-            ),
-            isSelected: routeMatch.path === FLEET_ROUTING_PATHS.fleet_enrollment_tokens,
-            href: getHref('fleet_enrollment_tokens'),
-          },
-        ] as unknown) as EuiTabProps[]
-      }
-    >
-      {isEnrollmentFlyoutOpen ? (
-        <EuiPortal>
-          <AgentEnrollmentFlyout
-            agentPolicies={agentPolicies}
-            onClose={() => setIsEnrollmentFlyoutOpen(false)}
-          />
-        </EuiPortal>
-      ) : null}
-      {children}
-    </WithHeaderLayout>
-  );
-};
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/enrollment_token_list_page/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/enrollment_token_list_page/index.tsx
index 8dc9ad33962e0d..666d0887fe5103 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/enrollment_token_list_page/index.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/enrollment_token_list_page/index.tsx
@@ -34,6 +34,7 @@ import {
 } from '../../../hooks';
 import type { EnrollmentAPIKey, GetAgentPoliciesResponseItem } from '../../../types';
 import { SearchBar } from '../../../components/search_bar';
+import { DefaultLayout } from '../../../layouts';
 
 import { ConfirmEnrollmentTokenDelete } from './components/confirm_delete_modal';
 
@@ -155,7 +156,7 @@ const DeleteButton: React.FunctionComponent<{ apiKey: EnrollmentAPIKey; refresh:
 };
 
 export const EnrollmentTokenListPage: React.FunctionComponent<{}> = () => {
-  useBreadcrumbs('fleet_enrollment_tokens');
+  useBreadcrumbs('enrollment_tokens');
   const [isModalOpen, setModalOpen] = useState(false);
   const [search, setSearch] = useState('');
   const { pagination, setPagination, pageSizeOptions } = usePagination();
@@ -269,7 +270,7 @@ export const EnrollmentTokenListPage: React.FunctionComponent<{}> = () => {
   ];
 
   return (
-    <>
+    <DefaultLayout section="enrollment_tokens">
       {isModalOpen && (
         <NewEnrollmentTokenModal
           agentPolicies={agentPolicies}
@@ -344,6 +345,6 @@ export const EnrollmentTokenListPage: React.FunctionComponent<{}> = () => {
           setPagination(newPagination);
         }}
       />
-    </>
+    </DefaultLayout>
   );
 };
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/index.tsx
index dcb33e7662dc45..79b19b443cca14 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/index.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/index.tsx
@@ -7,7 +7,7 @@
 
 import React, { useCallback, useEffect, useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
+import { HashRouter as Router, Route, Switch } from 'react-router-dom';
 
 import { FLEET_ROUTING_PATHS } from '../../constants';
 import { Loading, Error } from '../../components';
@@ -18,20 +18,18 @@ import {
   useCapabilities,
   useGetSettings,
 } from '../../hooks';
-import { WithoutHeaderLayout } from '../../layouts';
+import { DefaultLayout, WithoutHeaderLayout } from '../../layouts';
 
 import { AgentListPage } from './agent_list_page';
 import { FleetServerRequirementPage, MissingESRequirementsPage } from './agent_requirements_page';
 import { AgentDetailsPage } from './agent_details_page';
 import { NoAccessPage } from './error_pages/no_access';
-import { EnrollmentTokenListPage } from './enrollment_token_list_page';
-import { ListLayout } from './components/list_layout';
 import { FleetServerUpgradeModal } from './components/fleet_server_upgrade_modal';
 
 const REFRESH_INTERVAL_MS = 30000;
 
-export const FleetApp: React.FunctionComponent = () => {
-  useBreadcrumbs('fleet');
+export const AgentsApp: React.FunctionComponent = () => {
+  useBreadcrumbs('agent_list');
 
   const { agents } = useConfig();
   const capabilities = useCapabilities();
@@ -110,16 +108,11 @@ export const FleetApp: React.FunctionComponent = () => {
   return (
     <Router>
       <Switch>
-        <Route
-          path={FLEET_ROUTING_PATHS.fleet}
-          exact={true}
-          render={() => <Redirect to={FLEET_ROUTING_PATHS.fleet_agent_list} />}
-        />
-        <Route path={FLEET_ROUTING_PATHS.fleet_agent_details}>
+        <Route path={FLEET_ROUTING_PATHS.agent_details}>
           <AgentDetailsPage />
         </Route>
-        <Route path={FLEET_ROUTING_PATHS.fleet_agent_list}>
-          <ListLayout>
+        <Route path={FLEET_ROUTING_PATHS.agents}>
+          <DefaultLayout section="agents">
             {fleetServerModalVisible && (
               <FleetServerUpgradeModal onClose={onCloseFleetServerModal} />
             )}
@@ -128,12 +121,7 @@ export const FleetApp: React.FunctionComponent = () => {
             ) : (
               <AgentListPage />
             )}
-          </ListLayout>
-        </Route>
-        <Route path={FLEET_ROUTING_PATHS.fleet_enrollment_tokens}>
-          <ListLayout>
-            <EnrollmentTokenListPage />
-          </ListLayout>
+          </DefaultLayout>
         </Route>
       </Switch>
     </Router>
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/data_stream/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/data_stream/index.tsx
index bc3a0229284dbd..c660d3ed297672 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/data_stream/index.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/data_stream/index.tsx
@@ -9,6 +9,7 @@ import React from 'react';
 import { HashRouter as Router, Route, Switch } from 'react-router-dom';
 
 import { FLEET_ROUTING_PATHS } from '../../constants';
+import { DefaultLayout } from '../../layouts';
 
 import { DataStreamListPage } from './list_page';
 
@@ -17,7 +18,9 @@ export const DataStreamApp: React.FunctionComponent = () => {
     <Router>
       <Switch>
         <Route path={FLEET_ROUTING_PATHS.data_streams}>
-          <DataStreamListPage />
+          <DefaultLayout section="data_streams">
+            <DataStreamListPage />
+          </DefaultLayout>
         </Route>
       </Switch>
     </Router>
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/data_stream/list_page/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/data_stream/list_page/index.tsx
index e805fb8f6f64ef..ac236578e6f58d 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/data_stream/list_page/index.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/data_stream/list_page/index.tsx
@@ -10,7 +10,6 @@ import type { EuiTableActionsColumnType, EuiTableFieldDataColumnType } from '@el
 import {
   EuiBadge,
   EuiButton,
-  EuiText,
   EuiFlexGroup,
   EuiFlexItem,
   EuiEmptyPrompt,
@@ -20,43 +19,11 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage, FormattedDate } from '@kbn/i18n/react';
 
 import type { DataStream } from '../../../types';
-import { WithHeaderLayout } from '../../../layouts';
 import { useGetDataStreams, useStartServices, usePagination, useBreadcrumbs } from '../../../hooks';
 import { PackageIcon } from '../../../components';
 
 import { DataStreamRowActions } from './components/data_stream_row_actions';
 
-const DataStreamListPageLayout: React.FunctionComponent = ({ children }) => (
-  <WithHeaderLayout
-    leftColumn={
-      <EuiFlexGroup direction="column" gutterSize="m">
-        <EuiFlexItem>
-          <EuiText>
-            <h1>
-              <FormattedMessage
-                id="xpack.fleet.dataStreamList.pageTitle"
-                defaultMessage="Data streams"
-              />
-            </h1>
-          </EuiText>
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiText color="subdued">
-            <p>
-              <FormattedMessage
-                id="xpack.fleet.dataStreamList.pageSubtitle"
-                defaultMessage="Manage the data created by your agents."
-              />
-            </p>
-          </EuiText>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    }
-  >
-    {children}
-  </WithHeaderLayout>
-);
-
 export const DataStreamListPage: React.FunctionComponent<{}> = () => {
   useBreadcrumbs('data_streams');
 
@@ -232,97 +199,95 @@ export const DataStreamListPage: React.FunctionComponent<{}> = () => {
   }
 
   return (
-    <DataStreamListPageLayout>
-      <EuiInMemoryTable
-        loading={isLoading}
-        hasActions={true}
-        message={
-          isLoading ? (
-            <FormattedMessage
-              id="xpack.fleet.dataStreamList.loadingDataStreamsMessage"
-              defaultMessage="Loading data streams…"
-            />
-          ) : dataStreamsData && !dataStreamsData.data_streams.length ? (
-            emptyPrompt
-          ) : (
+    <EuiInMemoryTable
+      loading={isLoading}
+      hasActions={true}
+      message={
+        isLoading ? (
+          <FormattedMessage
+            id="xpack.fleet.dataStreamList.loadingDataStreamsMessage"
+            defaultMessage="Loading data streams…"
+          />
+        ) : dataStreamsData && !dataStreamsData.data_streams.length ? (
+          emptyPrompt
+        ) : (
+          <FormattedMessage
+            id="xpack.fleet.dataStreamList.noFilteredDataStreamsMessage"
+            defaultMessage="No matching data streams found"
+          />
+        )
+      }
+      items={dataStreamsData ? dataStreamsData.data_streams : []}
+      itemId="index"
+      columns={columns}
+      pagination={{
+        initialPageSize: pagination.pageSize,
+        pageSizeOptions,
+      }}
+      sorting={true}
+      search={{
+        toolsRight: [
+          <EuiButton
+            key="reloadButton"
+            color="primary"
+            iconType="refresh"
+            onClick={() => resendRequest()}
+          >
             <FormattedMessage
-              id="xpack.fleet.dataStreamList.noFilteredDataStreamsMessage"
-              defaultMessage="No matching data streams found"
+              id="xpack.fleet.dataStreamList.reloadDataStreamsButtonText"
+              defaultMessage="Reload"
             />
-          )
-        }
-        items={dataStreamsData ? dataStreamsData.data_streams : []}
-        itemId="index"
-        columns={columns}
-        pagination={{
-          initialPageSize: pagination.pageSize,
-          pageSizeOptions,
-        }}
-        sorting={true}
-        search={{
-          toolsRight: [
-            <EuiButton
-              key="reloadButton"
-              color="primary"
-              iconType="refresh"
-              onClick={() => resendRequest()}
-            >
-              <FormattedMessage
-                id="xpack.fleet.dataStreamList.reloadDataStreamsButtonText"
-                defaultMessage="Reload"
-              />
-            </EuiButton>,
-          ],
-          box: {
-            placeholder: i18n.translate('xpack.fleet.dataStreamList.searchPlaceholderTitle', {
-              defaultMessage: 'Filter data streams',
+          </EuiButton>,
+        ],
+        box: {
+          placeholder: i18n.translate('xpack.fleet.dataStreamList.searchPlaceholderTitle', {
+            defaultMessage: 'Filter data streams',
+          }),
+          incremental: true,
+        },
+        filters: [
+          {
+            type: 'field_value_selection',
+            field: 'dataset',
+            name: i18n.translate('xpack.fleet.dataStreamList.datasetColumnTitle', {
+              defaultMessage: 'Dataset',
             }),
-            incremental: true,
+            multiSelect: 'or',
+            operator: 'exact',
+            options: filterOptions.dataset,
           },
-          filters: [
-            {
-              type: 'field_value_selection',
-              field: 'dataset',
-              name: i18n.translate('xpack.fleet.dataStreamList.datasetColumnTitle', {
-                defaultMessage: 'Dataset',
-              }),
-              multiSelect: 'or',
-              operator: 'exact',
-              options: filterOptions.dataset,
-            },
-            {
-              type: 'field_value_selection',
-              field: 'type',
-              name: i18n.translate('xpack.fleet.dataStreamList.typeColumnTitle', {
-                defaultMessage: 'Type',
-              }),
-              multiSelect: 'or',
-              operator: 'exact',
-              options: filterOptions.type,
-            },
-            {
-              type: 'field_value_selection',
-              field: 'namespace',
-              name: i18n.translate('xpack.fleet.dataStreamList.namespaceColumnTitle', {
-                defaultMessage: 'Namespace',
-              }),
-              multiSelect: 'or',
-              operator: 'exact',
-              options: filterOptions.namespace,
-            },
-            {
-              type: 'field_value_selection',
-              field: 'package',
-              name: i18n.translate('xpack.fleet.dataStreamList.integrationColumnTitle', {
-                defaultMessage: 'Integration',
-              }),
-              multiSelect: 'or',
-              operator: 'exact',
-              options: filterOptions.package,
-            },
-          ],
-        }}
-      />
-    </DataStreamListPageLayout>
+          {
+            type: 'field_value_selection',
+            field: 'type',
+            name: i18n.translate('xpack.fleet.dataStreamList.typeColumnTitle', {
+              defaultMessage: 'Type',
+            }),
+            multiSelect: 'or',
+            operator: 'exact',
+            options: filterOptions.type,
+          },
+          {
+            type: 'field_value_selection',
+            field: 'namespace',
+            name: i18n.translate('xpack.fleet.dataStreamList.namespaceColumnTitle', {
+              defaultMessage: 'Namespace',
+            }),
+            multiSelect: 'or',
+            operator: 'exact',
+            options: filterOptions.namespace,
+          },
+          {
+            type: 'field_value_selection',
+            field: 'package',
+            name: i18n.translate('xpack.fleet.dataStreamList.integrationColumnTitle', {
+              defaultMessage: 'Integration',
+            }),
+            multiSelect: 'or',
+            operator: 'exact',
+            options: filterOptions.package,
+          },
+        ],
+      }}
+    />
   );
 };
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/index.tsx
index 810334e2df9ce6..b36fbf4bb815e7 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/index.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/index.tsx
@@ -5,9 +5,8 @@
  * 2.0.
  */
 
-export { IngestManagerOverview } from './overview';
 export { AgentPolicyApp } from './agent_policy';
 export { DataStreamApp } from './data_stream';
-export { FleetApp } from './agents';
+export { AgentsApp } from './agents';
 
-export type Section = 'overview' | 'agent_policy' | 'fleet' | 'data_stream';
+export type Section = 'agents' | 'agent_policies' | 'enrollment_tokens' | 'data_streams';
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/overview/components/agent_policy_section.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/overview/components/agent_policy_section.tsx
deleted file mode 100644
index 79a4f08faa7522..00000000000000
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/overview/components/agent_policy_section.tsx
+++ /dev/null
@@ -1,78 +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
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import { FormattedMessage } from '@kbn/i18n/react';
-import { i18n } from '@kbn/i18n';
-import {
-  EuiFlexItem,
-  EuiI18nNumber,
-  EuiDescriptionListTitle,
-  EuiDescriptionListDescription,
-} from '@elastic/eui';
-
-import { SO_SEARCH_LIMIT } from '../../../constants';
-import { useLink, useGetPackagePolicies } from '../../../hooks';
-import type { AgentPolicy } from '../../../types';
-import { Loading } from '../../agents/components';
-
-import { OverviewStats } from './overview_stats';
-import { OverviewPanel } from './overview_panel';
-
-export const OverviewPolicySection: React.FC<{ agentPolicies: AgentPolicy[] }> = ({
-  agentPolicies,
-}) => {
-  const { getHref } = useLink();
-  const packagePoliciesRequest = useGetPackagePolicies({
-    page: 1,
-    perPage: SO_SEARCH_LIMIT,
-  });
-
-  return (
-    <EuiFlexItem component="section" data-test-subj="fleet-agent-policy-section">
-      <OverviewPanel
-        title={i18n.translate('xpack.fleet.overviewPagePoliciesPanelTitle', {
-          defaultMessage: 'Agent policies',
-        })}
-        tooltip={i18n.translate('xpack.fleet.overviewPagePoliciesPanelTooltip', {
-          defaultMessage: 'Use agent policies to control the data that your agents collect.',
-        })}
-        linkTo={getHref('policies_list')}
-        linkToText={i18n.translate('xpack.fleet.overviewPagePoliciesPanelAction', {
-          defaultMessage: 'View policies',
-        })}
-      >
-        <OverviewStats>
-          {packagePoliciesRequest.isLoading ? (
-            <Loading />
-          ) : (
-            <>
-              <EuiDescriptionListTitle>
-                <FormattedMessage
-                  id="xpack.fleet.overviewPolicyTotalTitle"
-                  defaultMessage="Total available"
-                />
-              </EuiDescriptionListTitle>
-              <EuiDescriptionListDescription>
-                <EuiI18nNumber value={agentPolicies.length} />
-              </EuiDescriptionListDescription>
-              <EuiDescriptionListTitle>
-                <FormattedMessage
-                  id="xpack.fleet.overviewPackagePolicyTitle"
-                  defaultMessage="Used integrations"
-                />
-              </EuiDescriptionListTitle>
-              <EuiDescriptionListDescription>
-                <EuiI18nNumber value={packagePoliciesRequest.data?.total ?? 0} />
-              </EuiDescriptionListDescription>
-            </>
-          )}
-        </OverviewStats>
-      </OverviewPanel>
-    </EuiFlexItem>
-  );
-};
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/overview/components/agent_section.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/overview/components/agent_section.tsx
deleted file mode 100644
index d69306969c78c3..00000000000000
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/overview/components/agent_section.tsx
+++ /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
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import { FormattedMessage } from '@kbn/i18n/react';
-import { i18n } from '@kbn/i18n';
-import {
-  EuiI18nNumber,
-  EuiDescriptionListTitle,
-  EuiDescriptionListDescription,
-  EuiFlexItem,
-} from '@elastic/eui';
-
-import { useLink, useGetAgentStatus } from '../../../hooks';
-import { Loading } from '../../agents/components';
-
-import { OverviewPanel } from './overview_panel';
-import { OverviewStats } from './overview_stats';
-
-export const OverviewAgentSection = () => {
-  const { getHref } = useLink();
-  const agentStatusRequest = useGetAgentStatus({});
-
-  return (
-    <EuiFlexItem component="section" data-test-subj="fleet-agent-section">
-      <OverviewPanel
-        title={i18n.translate('xpack.fleet.overviewPageAgentsPanelTitle', {
-          defaultMessage: 'Agents',
-        })}
-        tooltip={i18n.translate('xpack.fleet.overviewPageFleetPanelTooltip', {
-          defaultMessage:
-            'Use Fleet to enroll agents and manage their policies from a central location.',
-        })}
-        linkTo={getHref('fleet_agent_list')}
-        linkToText={i18n.translate('xpack.fleet.overviewPageFleetPanelAction', {
-          defaultMessage: 'View agents',
-        })}
-      >
-        <OverviewStats>
-          {agentStatusRequest.isLoading ? (
-            <Loading />
-          ) : (
-            <>
-              <EuiDescriptionListTitle>
-                <FormattedMessage
-                  id="xpack.fleet.overviewAgentTotalTitle"
-                  defaultMessage="Total agents"
-                />
-              </EuiDescriptionListTitle>
-              <EuiDescriptionListDescription>
-                <EuiI18nNumber value={agentStatusRequest.data?.results?.total ?? 0} />
-              </EuiDescriptionListDescription>
-              <EuiDescriptionListTitle>
-                <FormattedMessage
-                  id="xpack.fleet.overviewAgentActiveTitle"
-                  defaultMessage="Active"
-                />
-              </EuiDescriptionListTitle>
-              <EuiDescriptionListDescription>
-                <EuiI18nNumber value={agentStatusRequest.data?.results?.online ?? 0} />
-              </EuiDescriptionListDescription>
-              <EuiDescriptionListTitle>
-                <FormattedMessage
-                  id="xpack.fleet.overviewAgentOfflineTitle"
-                  defaultMessage="Offline"
-                />
-              </EuiDescriptionListTitle>
-              <EuiDescriptionListDescription>
-                <EuiI18nNumber value={agentStatusRequest.data?.results?.offline ?? 0} />
-              </EuiDescriptionListDescription>
-              <EuiDescriptionListTitle>
-                <FormattedMessage id="xpack.fleet.overviewAgentErrorTitle" defaultMessage="Error" />
-              </EuiDescriptionListTitle>
-              <EuiDescriptionListDescription>
-                <EuiI18nNumber value={agentStatusRequest.data?.results?.error ?? 0} />
-              </EuiDescriptionListDescription>
-            </>
-          )}
-        </OverviewStats>
-      </OverviewPanel>
-    </EuiFlexItem>
-  );
-};
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/overview/components/datastream_section.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/overview/components/datastream_section.tsx
deleted file mode 100644
index b51be3fdd20e56..00000000000000
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/overview/components/datastream_section.tsx
+++ /dev/null
@@ -1,99 +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
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import { FormattedMessage } from '@kbn/i18n/react';
-import { i18n } from '@kbn/i18n';
-import {
-  EuiFlexItem,
-  EuiI18nNumber,
-  EuiDescriptionListTitle,
-  EuiDescriptionListDescription,
-} from '@elastic/eui';
-
-import { useLink, useGetDataStreams, useStartServices } from '../../../hooks';
-import { Loading } from '../../agents/components';
-
-import { OverviewPanel } from './overview_panel';
-import { OverviewStats } from './overview_stats';
-
-export const OverviewDatastreamSection: React.FC = () => {
-  const { getHref } = useLink();
-  const datastreamRequest = useGetDataStreams();
-  const {
-    data: { fieldFormats },
-  } = useStartServices();
-
-  const total = datastreamRequest.data?.data_streams?.length ?? 0;
-  let sizeBytes = 0;
-  const namespaces = new Set<string>();
-  if (datastreamRequest.data) {
-    datastreamRequest.data.data_streams.forEach((val) => {
-      namespaces.add(val.namespace);
-      sizeBytes += val.size_in_bytes;
-    });
-  }
-
-  let size: string;
-  try {
-    const formatter = fieldFormats.getInstance('bytes');
-    size = formatter.convert(sizeBytes);
-  } catch (e) {
-    size = `${sizeBytes}b`;
-  }
-
-  return (
-    <EuiFlexItem component="section" data-test-subj="fleet-datastream-section">
-      <OverviewPanel
-        title={i18n.translate('xpack.fleet.overviewPageDataStreamsPanelTitle', {
-          defaultMessage: 'Data streams',
-        })}
-        tooltip={i18n.translate('xpack.fleet.overviewPageDataStreamsPanelTooltip', {
-          defaultMessage: 'Data that your agents collect are organized into various data streams.',
-        })}
-        linkTo={getHref('data_streams')}
-        linkToText={i18n.translate('xpack.fleet.overviewPageDataStreamsPanelAction', {
-          defaultMessage: 'View data streams',
-        })}
-      >
-        <OverviewStats>
-          {datastreamRequest.isLoading ? (
-            <Loading />
-          ) : (
-            <>
-              <EuiDescriptionListTitle>
-                <FormattedMessage
-                  id="xpack.fleet.overviewDatastreamTotalTitle"
-                  defaultMessage="Data streams"
-                />
-              </EuiDescriptionListTitle>
-              <EuiDescriptionListDescription>
-                <EuiI18nNumber value={total} />
-              </EuiDescriptionListDescription>
-              <EuiDescriptionListTitle>
-                <FormattedMessage
-                  id="xpack.fleet.overviewDatastreamNamespacesTitle"
-                  defaultMessage="Namespaces"
-                />
-              </EuiDescriptionListTitle>
-              <EuiDescriptionListDescription>
-                <EuiI18nNumber value={namespaces.size} />
-              </EuiDescriptionListDescription>
-              <EuiDescriptionListTitle>
-                <FormattedMessage
-                  id="xpack.fleet.overviewDatastreamSizeTitle"
-                  defaultMessage="Total size"
-                />
-              </EuiDescriptionListTitle>
-              <EuiDescriptionListDescription>{size}</EuiDescriptionListDescription>
-            </>
-          )}
-        </OverviewStats>
-      </OverviewPanel>
-    </EuiFlexItem>
-  );
-};
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/overview/components/integration_section.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/overview/components/integration_section.tsx
deleted file mode 100644
index 5ada8e298507cb..00000000000000
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/overview/components/integration_section.tsx
+++ /dev/null
@@ -1,88 +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
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import { FormattedMessage } from '@kbn/i18n/react';
-import { i18n } from '@kbn/i18n';
-import {
-  EuiFlexItem,
-  EuiI18nNumber,
-  EuiDescriptionListTitle,
-  EuiDescriptionListDescription,
-} from '@elastic/eui';
-
-import { useLink, useGetPackages } from '../../../hooks';
-import { Loading } from '../../agents/components';
-import { installationStatuses } from '../../../../../../common/constants';
-
-import { OverviewStats } from './overview_stats';
-import { OverviewPanel } from './overview_panel';
-
-export const OverviewIntegrationSection: React.FC = () => {
-  const { getHref } = useLink();
-  const packagesRequest = useGetPackages();
-  const res = packagesRequest.data?.response;
-  const total = res?.length ?? 0;
-  const installed = res?.filter((p) => p.status === installationStatuses.Installed)?.length ?? 0;
-  const updatablePackages =
-    res?.filter(
-      (item) => 'savedObject' in item && item.version > item.savedObject.attributes.version
-    )?.length ?? 0;
-  return (
-    <EuiFlexItem component="section" data-test-subj="fleet-integrations-section">
-      <OverviewPanel
-        title={i18n.translate('xpack.fleet.overviewPageIntegrationsPanelTitle', {
-          defaultMessage: 'Integrations',
-        })}
-        tooltip={i18n.translate('xpack.fleet.overviewPageIntegrationsPanelTooltip', {
-          defaultMessage:
-            'Browse and install integrations for the Elastic Stack. Add integrations to your agent policies to start sending data.',
-        })}
-        linkTo={getHref('integrations_all')}
-        linkToText={i18n.translate('xpack.fleet.overviewPageIntegrationsPanelAction', {
-          defaultMessage: 'View integrations',
-        })}
-      >
-        <OverviewStats>
-          {packagesRequest.isLoading ? (
-            <Loading />
-          ) : (
-            <>
-              <EuiDescriptionListTitle>
-                <FormattedMessage
-                  id="xpack.fleet.overviewIntegrationsTotalTitle"
-                  defaultMessage="Total available"
-                />
-              </EuiDescriptionListTitle>
-              <EuiDescriptionListDescription>
-                <EuiI18nNumber value={total} />
-              </EuiDescriptionListDescription>
-              <EuiDescriptionListTitle>
-                <FormattedMessage
-                  id="xpack.fleet.overviewIntegrationsInstalledTitle"
-                  defaultMessage="Installed"
-                />
-              </EuiDescriptionListTitle>
-              <EuiDescriptionListDescription>
-                <EuiI18nNumber value={installed} />
-              </EuiDescriptionListDescription>
-              <EuiDescriptionListTitle>
-                <FormattedMessage
-                  id="xpack.fleet.overviewIntegrationsUpdatesAvailableTitle"
-                  defaultMessage="Updates available"
-                />
-              </EuiDescriptionListTitle>
-              <EuiDescriptionListDescription>
-                <EuiI18nNumber value={updatablePackages} />
-              </EuiDescriptionListDescription>
-            </>
-          )}
-        </OverviewStats>
-      </OverviewPanel>
-    </EuiFlexItem>
-  );
-};
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/overview/components/overview_panel.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/overview/components/overview_panel.tsx
deleted file mode 100644
index c402bc15f7b026..00000000000000
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/overview/components/overview_panel.tsx
+++ /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
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import styled from 'styled-components';
-import {
-  EuiPanel,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiTitle,
-  EuiIconTip,
-  EuiButtonEmpty,
-} from '@elastic/eui';
-
-const StyledPanel = styled(EuiPanel).attrs((props) => ({
-  paddingSize: 'm',
-}))`
-  header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border-bottom: 1px solid ${(props) => props.theme.eui.euiColorLightShade};
-    margin: -${(props) => props.theme.eui.paddingSizes.m} -${(props) =>
-        props.theme.eui.paddingSizes.m}
-      ${(props) => props.theme.eui.paddingSizes.m};
-    padding: ${(props) => props.theme.eui.paddingSizes.s}
-      ${(props) => props.theme.eui.paddingSizes.m};
-  }
-
-  h2 {
-    padding: ${(props) => props.theme.eui.paddingSizes.xs} 0;
-  }
-`;
-
-interface OverviewPanelProps {
-  title: string;
-  tooltip: string;
-  linkToText: string;
-  linkTo: string;
-  children: React.ReactNode;
-}
-
-export const OverviewPanel = ({
-  title,
-  tooltip,
-  linkToText,
-  linkTo,
-  children,
-}: OverviewPanelProps) => {
-  return (
-    <StyledPanel>
-      <header>
-        <EuiFlexGroup responsive={false} gutterSize="xs" alignItems="center">
-          <EuiFlexItem grow={false}>
-            <EuiTitle size="xs">
-              <h2>{title}</h2>
-            </EuiTitle>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiIconTip content={tooltip} position="top" type="iInCircle" color="subdued" />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-        <EuiButtonEmpty size="xs" flush="right" href={linkTo}>
-          {linkToText}
-        </EuiButtonEmpty>
-      </header>
-      {children}
-    </StyledPanel>
-  );
-};
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/overview/components/overview_stats.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/overview/components/overview_stats.tsx
deleted file mode 100644
index acb94e4b05695d..00000000000000
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/overview/components/overview_stats.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import styled from 'styled-components';
-import { EuiDescriptionList } from '@elastic/eui';
-
-export const OverviewStats = styled(EuiDescriptionList).attrs((props) => ({
-  compressed: true,
-  textStyle: 'reverse',
-  type: 'column',
-}))`
-  & > * {
-    margin-top: ${(props) => props.theme.eui.paddingSizes.s} !important;
-
-    &:first-child,
-    &:nth-child(2) {
-      margin-top: 0 !important;
-    }
-  }
-`;
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/overview/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/overview/index.tsx
deleted file mode 100644
index f905fd1c89da27..00000000000000
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/overview/index.tsx
+++ /dev/null
@@ -1,110 +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
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React, { useState } from 'react';
-import {
-  EuiButton,
-  EuiBetaBadge,
-  EuiText,
-  EuiTitle,
-  EuiFlexGrid,
-  EuiFlexGroup,
-  EuiFlexItem,
-} from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
-import { i18n } from '@kbn/i18n';
-
-import { WithHeaderLayout } from '../../layouts';
-import { useGetAgentPolicies, useBreadcrumbs } from '../../hooks';
-import { AgentEnrollmentFlyout } from '../../components';
-
-import { OverviewAgentSection } from './components/agent_section';
-import { OverviewPolicySection } from './components/agent_policy_section';
-import { OverviewIntegrationSection } from './components/integration_section';
-import { OverviewDatastreamSection } from './components/datastream_section';
-
-export const IngestManagerOverview: React.FunctionComponent = () => {
-  useBreadcrumbs('overview');
-
-  // Agent enrollment flyout state
-  const [isEnrollmentFlyoutOpen, setIsEnrollmentFlyoutOpen] = useState<boolean>(false);
-
-  // Agent policies required for enrollment flyout
-  const agentPoliciesRequest = useGetAgentPolicies({
-    page: 1,
-    perPage: 1000,
-  });
-  const agentPolicies = agentPoliciesRequest.data ? agentPoliciesRequest.data.items : [];
-
-  return (
-    <WithHeaderLayout
-      leftColumn={
-        <EuiFlexGroup direction="column" gutterSize="m">
-          <EuiFlexItem>
-            <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
-              <EuiFlexItem grow={false}>
-                <EuiTitle size="l">
-                  <h1>
-                    <FormattedMessage id="xpack.fleet.overviewPageTitle" defaultMessage="Fleet" />
-                  </h1>
-                </EuiTitle>
-              </EuiFlexItem>
-
-              <EuiFlexItem grow={false}>
-                <EuiBetaBadge
-                  label={i18n.translate('xpack.fleet.betaBadge.labelText', {
-                    defaultMessage: 'Beta',
-                  })}
-                  tooltipContent={i18n.translate('xpack.fleet.betaBadge.tooltipText', {
-                    defaultMessage:
-                      'This plugin is not recommended for production environments. Please report bugs in our Discuss forum.',
-                  })}
-                />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiText color="subdued">
-              <p>
-                <FormattedMessage
-                  id="xpack.fleet.overviewPageSubtitle"
-                  defaultMessage="Manage Elastic Agents and their policies in a central location."
-                />
-              </p>
-            </EuiText>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      }
-      rightColumn={
-        <EuiFlexGroup justifyContent="flexEnd">
-          <EuiFlexItem grow={false}>
-            <EuiButton fill iconType="plusInCircle" onClick={() => setIsEnrollmentFlyoutOpen(true)}>
-              <FormattedMessage
-                id="xpack.fleet.overviewPageEnrollAgentButton"
-                defaultMessage="Add agent"
-              />
-            </EuiButton>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      }
-    >
-      {isEnrollmentFlyoutOpen && (
-        <AgentEnrollmentFlyout
-          agentPolicies={agentPolicies}
-          onClose={() => setIsEnrollmentFlyoutOpen(false)}
-        />
-      )}
-
-      <EuiFlexGrid gutterSize="l" columns={2}>
-        <OverviewIntegrationSection />
-        <OverviewPolicySection agentPolicies={agentPolicies} />
-        <OverviewAgentSection />
-        <OverviewDatastreamSection />
-      </EuiFlexGrid>
-    </WithHeaderLayout>
-  );
-};
diff --git a/x-pack/plugins/fleet/public/applications/integrations/hooks/use_breadcrumbs.tsx b/x-pack/plugins/fleet/public/applications/integrations/hooks/use_breadcrumbs.tsx
index 5c1745be0c9e48..19f72fdc69bba5 100644
--- a/x-pack/plugins/fleet/public/applications/integrations/hooks/use_breadcrumbs.tsx
+++ b/x-pack/plugins/fleet/public/applications/integrations/hooks/use_breadcrumbs.tsx
@@ -22,14 +22,7 @@ const BASE_BREADCRUMB: ChromeBreadcrumb = {
 const breadcrumbGetters: {
   [key in Page]?: (values: DynamicPagePathValues) => ChromeBreadcrumb[];
 } = {
-  integrations: () => [
-    BASE_BREADCRUMB,
-    {
-      text: i18n.translate('xpack.fleet.breadcrumbs.integrationsPageTitle', {
-        defaultMessage: 'Integrations',
-      }),
-    },
-  ],
+  integrations: () => [BASE_BREADCRUMB],
   integrations_all: () => [
     BASE_BREADCRUMB,
     {
diff --git a/x-pack/plugins/fleet/public/applications/integrations/layouts/default.tsx b/x-pack/plugins/fleet/public/applications/integrations/layouts/default.tsx
index 4c1ff4972b89e2..98b8e9515e689c 100644
--- a/x-pack/plugins/fleet/public/applications/integrations/layouts/default.tsx
+++ b/x-pack/plugins/fleet/public/applications/integrations/layouts/default.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 import React, { memo } from 'react';
-import { EuiText, EuiBetaBadge } from '@elastic/eui';
+import { EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import { useLink } from '../../../hooks';
@@ -30,15 +30,6 @@ export const DefaultLayout: React.FunctionComponent<Props> = memo(({ section, ch
         <EuiText>
           <h1>
             <FormattedMessage id="xpack.fleet.integrationsAppTitle" defaultMessage="Integrations" />{' '}
-            <EuiBetaBadge
-              label={<FormattedMessage id="xpack.fleet.betaLabel" defaultMessage="Beta" />}
-              tooltipContent={
-                <FormattedMessage
-                  id="xpack.fleet.integrationsBetaDescription"
-                  defaultMessage="Fleet is not recommended for production environments."
-                />
-              }
-            />
           </h1>
         </EuiText>
       }
diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/home/index.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/home/index.tsx
index 6c635d5d0c9c00..fbd6e07e07bbdb 100644
--- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/home/index.tsx
+++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/home/index.tsx
@@ -22,16 +22,18 @@ import { CategoryFacets } from './category_facets';
 
 export const EPMHomePage: React.FC = memo(() => {
   return (
-    <DefaultLayout>
-      <Switch>
-        <Route path={INTEGRATIONS_ROUTING_PATHS.integrations_installed}>
+    <Switch>
+      <Route path={INTEGRATIONS_ROUTING_PATHS.integrations_installed}>
+        <DefaultLayout section="manage">
           <InstalledPackages />
-        </Route>
-        <Route path={INTEGRATIONS_ROUTING_PATHS.integrations_all}>
+        </DefaultLayout>
+      </Route>
+      <Route path={INTEGRATIONS_ROUTING_PATHS.integrations_all}>
+        <DefaultLayout section="browse">
           <AvailablePackages />
-        </Route>
-      </Switch>
-    </DefaultLayout>
+        </DefaultLayout>
+      </Route>
+    </Switch>
   );
 });
 
diff --git a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/managed_instructions.tsx b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/managed_instructions.tsx
index 2bb8586a11503d..e7045173f1257e 100644
--- a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/managed_instructions.tsx
+++ b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/managed_instructions.tsx
@@ -36,7 +36,7 @@ const DefaultMissingRequirements = () => {
         defaultMessage="Before enrolling agents, {link}."
         values={{
           link: (
-            <EuiLink href={getHref('fleet')}>
+            <EuiLink href={getHref('overview')}>
               <FormattedMessage
                 id="xpack.fleet.agentEnrollment.setUpAgentsLink"
                 defaultMessage="set up central management for Elastic Agents"
diff --git a/x-pack/plugins/fleet/public/components/linked_agent_count.tsx b/x-pack/plugins/fleet/public/components/linked_agent_count.tsx
index dddb1f6531afd0..f9b2727f48935a 100644
--- a/x-pack/plugins/fleet/public/components/linked_agent_count.tsx
+++ b/x-pack/plugins/fleet/public/components/linked_agent_count.tsx
@@ -36,7 +36,7 @@ export const LinkedAgentCount = memo<
   return count > 0 ? (
     <EuiLink
       {...otherEuiLinkProps}
-      href={getHref('fleet_agent_list', {
+      href={getHref('agent_list', {
         kuery: `${AGENT_SAVED_OBJECT_TYPE}.policy_id : ${agentPolicyId}`,
       })}
     >
diff --git a/x-pack/plugins/fleet/public/constants/page_paths.ts b/x-pack/plugins/fleet/public/constants/page_paths.ts
index 3c9c0e57596151..326cfd804bd570 100644
--- a/x-pack/plugins/fleet/public/constants/page_paths.ts
+++ b/x-pack/plugins/fleet/public/constants/page_paths.ts
@@ -13,8 +13,7 @@ export type StaticPage =
   | 'integrations_installed'
   | 'policies'
   | 'policies_list'
-  | 'fleet'
-  | 'fleet_enrollment_tokens'
+  | 'enrollment_tokens'
   | 'data_streams';
 
 export type DynamicPage =
@@ -27,8 +26,9 @@ export type DynamicPage =
   | 'add_integration_from_policy'
   | 'add_integration_to_policy'
   | 'edit_integration'
-  | 'fleet_agent_list'
-  | 'fleet_agent_details';
+  | 'agent_list'
+  | 'agent_details'
+  | 'agent_details_logs';
 
 export type Page = StaticPage | DynamicPage;
 
@@ -42,20 +42,21 @@ export const INTEGRATIONS_BASE_PATH = '/app/integrations';
 // If routing paths are changed here, please also check to see if
 // `pagePathGetters()`, below, needs any modifications
 export const FLEET_ROUTING_PATHS = {
-  overview: '/',
+  fleet: '/:tabId',
+  agents: '/agents',
+  agent_details: '/agents/:agentId/:tabId?',
+  agent_details_logs: '/agents/:agentId/logs',
   policies: '/policies',
   policies_list: '/policies',
   policy_details: '/policies/:policyId/:tabId?',
   policy_details_settings: '/policies/:policyId/settings',
-  add_integration_from_policy: '/policies/:policyId/add-integration',
-  add_integration_to_policy: '/integrations/:pkgkey/add-integration/:integration?',
   edit_integration: '/policies/:policyId/edit-integration/:packagePolicyId',
-  fleet: '/fleet',
-  fleet_agent_list: '/fleet/agents',
-  fleet_agent_details: '/fleet/agents/:agentId/:tabId?',
-  fleet_agent_details_logs: '/fleet/agents/:agentId/logs',
-  fleet_enrollment_tokens: '/fleet/enrollment-tokens',
+  add_integration_from_policy: '/policies/:policyId/add-integration',
+  enrollment_tokens: '/enrollment-tokens',
   data_streams: '/data-streams',
+
+  // TODO: Move this to the integrations app
+  add_integration_to_policy: '/integrations/:pkgkey/add-integration/:integration?',
 };
 
 export const INTEGRATIONS_ROUTING_PATHS = {
@@ -120,15 +121,12 @@ export const pagePathGetters: {
     FLEET_BASE_PATH,
     `/policies/${policyId}/edit-integration/${packagePolicyId}`,
   ],
-  fleet: () => [FLEET_BASE_PATH, '/fleet'],
-  fleet_agent_list: ({ kuery }) => [
-    FLEET_BASE_PATH,
-    `/fleet/agents${kuery ? `?kuery=${kuery}` : ''}`,
-  ],
-  fleet_agent_details: ({ agentId, tabId, logQuery }) => [
+  agent_list: ({ kuery }) => [FLEET_BASE_PATH, `/agents${kuery ? `?kuery=${kuery}` : ''}`],
+  agent_details: ({ agentId, tabId, logQuery }) => [
     FLEET_BASE_PATH,
-    `/fleet/agents/${agentId}${tabId ? `/${tabId}` : ''}${logQuery ? `?_q=${logQuery}` : ''}`,
+    `/agents/${agentId}${tabId ? `/${tabId}` : ''}${logQuery ? `?_q=${logQuery}` : ''}`,
   ],
-  fleet_enrollment_tokens: () => [FLEET_BASE_PATH, '/fleet/enrollment-tokens'],
+  agent_details_logs: ({ agentId }) => [FLEET_BASE_PATH, `/agents/${agentId}/logs`],
+  enrollment_tokens: () => [FLEET_BASE_PATH, '/enrollment-tokens'],
   data_streams: () => [FLEET_BASE_PATH, '/data-streams'],
 };
diff --git a/x-pack/plugins/fleet/public/layouts/without_header.tsx b/x-pack/plugins/fleet/public/layouts/without_header.tsx
index 220ee592d7d07a..d9481d44359c25 100644
--- a/x-pack/plugins/fleet/public/layouts/without_header.tsx
+++ b/x-pack/plugins/fleet/public/layouts/without_header.tsx
@@ -11,6 +11,13 @@ import { EuiPage, EuiPageBody, EuiSpacer } from '@elastic/eui';
 
 export const Wrapper = styled.div`
   background-color: ${(props) => props.theme.eui.euiColorEmptyShade};
+
+  // HACK: Kibana introduces a div element around the app component that results in us
+  // being unable to stretch this Wrapper to full height via flex: 1. This calc sets
+  // the min height to the viewport size minus the height of the two global Kibana headers.
+  min-height: calc(
+    100vh - ${(props) => parseFloat(props.theme.eui.euiHeaderHeightCompensation) * 2}px
+  );
 `;
 
 export const Page = styled(EuiPage)`
diff --git a/x-pack/plugins/fleet/public/mock/plugin_dependencies.ts b/x-pack/plugins/fleet/public/mock/plugin_dependencies.ts
index 16fa34e2d0b3d7..5d1567936bcb00 100644
--- a/x-pack/plugins/fleet/public/mock/plugin_dependencies.ts
+++ b/x-pack/plugins/fleet/public/mock/plugin_dependencies.ts
@@ -8,6 +8,7 @@
 import { dataPluginMock } from '../../../../../src/plugins/data/public/mocks';
 import { licensingMock } from '../../../licensing/public/mocks';
 import { homePluginMock } from '../../../../../src/plugins/home/public/mocks';
+import { navigationPluginMock } from '../../../../../src/plugins/navigation/public/mocks';
 
 import type { MockedFleetSetupDeps, MockedFleetStartDeps } from './types';
 
@@ -22,5 +23,6 @@ export const createSetupDepsMock = (): MockedFleetSetupDeps => {
 export const createStartDepsMock = (): MockedFleetStartDeps => {
   return {
     data: dataPluginMock.createStartContract(),
+    navigation: navigationPluginMock.createStartContract(),
   };
 };
diff --git a/x-pack/plugins/fleet/public/plugin.ts b/x-pack/plugins/fleet/public/plugin.ts
index 68fab2fc422169..c092d5914637cb 100644
--- a/x-pack/plugins/fleet/public/plugin.ts
+++ b/x-pack/plugins/fleet/public/plugin.ts
@@ -14,6 +14,8 @@ import type {
 } from 'src/core/public';
 import { i18n } from '@kbn/i18n';
 
+import type { NavigationPublicPluginStart } from 'src/plugins/navigation/public';
+
 import { DEFAULT_APP_CATEGORIES, AppNavLinkStatus } from '../../../../src/core/public';
 import type {
   DataPublicPluginSetup,
@@ -67,6 +69,7 @@ export interface FleetSetupDeps {
 
 export interface FleetStartDeps {
   data: DataPublicPluginStart;
+  navigation: NavigationPublicPluginStart;
 }
 
 export interface FleetStartServices extends CoreStart, FleetStartDeps {
diff --git a/x-pack/plugins/global_search_providers/public/providers/get_app_results.test.ts b/x-pack/plugins/global_search_providers/public/providers/get_app_results.test.ts
index 3db9fcc3368522..db64e2972e9324 100644
--- a/x-pack/plugins/global_search_providers/public/providers/get_app_results.test.ts
+++ b/x-pack/plugins/global_search_providers/public/providers/get_app_results.test.ts
@@ -120,6 +120,11 @@ describe('getAppResults', () => {
         ],
         keywords: [],
       }),
+      createApp({
+        id: 'AppNotSearchable',
+        title: 'App 1 not searchable',
+        searchable: false,
+      }),
     ];
 
     expect(getAppResults('', apps).length).toBe(1);
diff --git a/x-pack/plugins/global_search_providers/public/providers/get_app_results.ts b/x-pack/plugins/global_search_providers/public/providers/get_app_results.ts
index 136b0d6076e69b..ece173777f3e17 100644
--- a/x-pack/plugins/global_search_providers/public/providers/get_app_results.ts
+++ b/x-pack/plugins/global_search_providers/public/providers/get_app_results.ts
@@ -31,7 +31,8 @@ export const getAppResults = (
       .flatMap((app) =>
         term.length > 0
           ? flattenDeepLinks(app)
-          : [
+          : app.searchable
+          ? [
               {
                 id: app.id,
                 app,
@@ -40,6 +41,7 @@ export const getAppResults = (
                 keywords: app.keywords ?? [],
               },
             ]
+          : []
       )
       .map((appLink) => ({
         appLink,
diff --git a/x-pack/plugins/graph/public/application.ts b/x-pack/plugins/graph/public/application.ts
index 0b80e18f3fdb27..26e86bbc3d886b 100644
--- a/x-pack/plugins/graph/public/application.ts
+++ b/x-pack/plugins/graph/public/application.ts
@@ -31,7 +31,7 @@ import {
 } from 'kibana/public';
 // @ts-ignore
 import { initGraphApp } from './app';
-import { Plugin as DataPlugin, IndexPatternsContract } from '../../../../src/plugins/data/public';
+import { DataPlugin, IndexPatternsContract } from '../../../../src/plugins/data/public';
 import { LicensingPluginStart } from '../../licensing/public';
 import { checkLicense } from '../common/check_license';
 import { NavigationPublicPluginStart as NavigationStart } from '../../../../src/plugins/navigation/public';
diff --git a/x-pack/plugins/graph/public/types/workspace_state.ts b/x-pack/plugins/graph/public/types/workspace_state.ts
index 73d76cfd9cc572..e511a2eb5c7798 100644
--- a/x-pack/plugins/graph/public/types/workspace_state.ts
+++ b/x-pack/plugins/graph/public/types/workspace_state.ts
@@ -5,9 +5,9 @@
  * 2.0.
  */
 
+import { JsonObject } from '@kbn/common-utils';
 import { FontawesomeIcon } from '../helpers/style_choices';
 import { WorkspaceField, AdvancedSettings } from './app_state';
-import { JsonObject } from '../../../../../src/plugins/kibana_utils/public';
 
 export interface WorkspaceNode {
   x: number;
diff --git a/x-pack/plugins/infra/README.md b/x-pack/plugins/infra/README.md
index 5bff47e7a55e14..9097faa0aa2b56 100644
--- a/x-pack/plugins/infra/README.md
+++ b/x-pack/plugins/infra/README.md
@@ -80,17 +80,16 @@ life-cycle of a PR looks like the following:
    backported later. The checklist in the PR description template can be used
    to guide the progress of the PR.
 2. **Label the PR**: To ensure that a newly created PR gets the attention of
-   the @elastic/infra-logs-ui team, the following label should be applied to
+   the @elastic/logs-metrics-ui team, the following label should be applied to
    PRs:
-   * `Team:infra-logs-ui`
-   * `Feature:Infra UI` if it relates to the *Intrastructure UI*
+   * `Team:logs-metrics-ui`
+   * `Feature:Metrics UI` if it relates to the *Metrics UI*
    * `Feature:Logs UI` if it relates to the *Logs UI*
-   * `[zube]: In Progress` to track the stage of the PR
    * Version labels for merge and backport targets (see [Kibana's contribution
-     procedures]), usually:
+     procedures](https://www.elastic.co/guide/en/kibana/master/contributing.html)), usually:
      * the version that `master` currently represents
      * the version of the next minor release
-   * Release note labels (see [Kibana's contribution procedures])
+   * Release note labels (see [Kibana's contribution procedures](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process))
      * `release_note:enhancement` if the PR contains a new feature or enhancement
      * `release_note:fix` if the PR contains an external-facing fix
      * `release_note:breaking` if the PR contains a breaking change
@@ -100,14 +99,13 @@ life-cycle of a PR looks like the following:
        to unreleased code or documentation changes
 3. **Satisfy CI**: The PR will automatically be picked up by the CI system,
    which will run the full test suite as well as some additional checks. A
-   comment containing `jenkins, test this` can be used to manually trigger a CI
+   comment containing `@elasticmachine merge upstream` or `retest` can be used to manually trigger a CI
    run. The result will be reported on the PR itself. Out of courtesy for the
    reviewers the checks should pass before requesting reviews.
 4. **Request reviews**: Once the PR is ready for reviews it can be marked as
-   such by [changing the PR state to ready].  In addition the label `[zube]: In
-   Progress` should be replaced with `[zube]: In Review` and `review`. If the
+   such by [changing the PR state to ready]. If the
    GitHub automation doesn't automatically request a review from
-   `@elastic/infra-logs-ui` it should be requested manually.
+   `@elastic/logs-metrics-ui` it should be requested manually.
 5. **Incorporate review feedback**: Usually one reviewer's approval is
    sufficient. Particularly complicated or cross-cutting concerns might warrant
    multiple reviewers.
diff --git a/x-pack/plugins/infra/common/typed_json.ts b/x-pack/plugins/infra/common/typed_json.ts
index 5b7bbdcfbc07bd..44409ab433a601 100644
--- a/x-pack/plugins/infra/common/typed_json.ts
+++ b/x-pack/plugins/infra/common/typed_json.ts
@@ -6,7 +6,7 @@
  */
 
 import * as rt from 'io-ts';
-import { JsonArray, JsonObject, JsonValue } from '../../../../src/plugins/kibana_utils/common';
+import { JsonArray, JsonObject, JsonValue } from '@kbn/common-utils';
 
 export { JsonArray, JsonObject, JsonValue };
 
diff --git a/x-pack/plugins/infra/public/alerting/common/components/metrics_alert_dropdown.tsx b/x-pack/plugins/infra/public/alerting/common/components/metrics_alert_dropdown.tsx
index 3b9193db65e1d0..41867053c3a0fa 100644
--- a/x-pack/plugins/infra/public/alerting/common/components/metrics_alert_dropdown.tsx
+++ b/x-pack/plugins/infra/public/alerting/common/components/metrics_alert_dropdown.tsx
@@ -134,7 +134,13 @@ export const MetricsAlertDropdown = () => {
         panelPaddingSize="none"
         anchorPosition="downLeft"
         button={
-          <EuiButtonEmpty iconSide={'right'} iconType={'arrowDown'} onClick={openPopover}>
+          <EuiButtonEmpty
+            size="xs"
+            color="text"
+            iconSide={'right'}
+            iconType={'arrowDown'}
+            onClick={openPopover}
+          >
             <FormattedMessage id="xpack.infra.alerting.alertsButton" defaultMessage="Alerts" />
           </EuiButtonEmpty>
         }
diff --git a/x-pack/plugins/infra/public/alerting/log_threshold/components/alert_dropdown.tsx b/x-pack/plugins/infra/public/alerting/log_threshold/components/alert_dropdown.tsx
index 7cd6295cdcf408..66c77fbf875a45 100644
--- a/x-pack/plugins/infra/public/alerting/log_threshold/components/alert_dropdown.tsx
+++ b/x-pack/plugins/infra/public/alerting/log_threshold/components/alert_dropdown.tsx
@@ -83,7 +83,13 @@ export const AlertDropdown = () => {
       <EuiPopover
         panelPaddingSize="none"
         button={
-          <EuiButtonEmpty iconSide={'right'} iconType={'arrowDown'} onClick={openPopover}>
+          <EuiButtonEmpty
+            size="xs"
+            color="text"
+            iconSide={'right'}
+            iconType={'arrowDown'}
+            onClick={openPopover}
+          >
             <FormattedMessage id="xpack.infra.alerting.logs.alertsButton" defaultMessage="Alerts" />
           </EuiButtonEmpty>
         }
diff --git a/x-pack/plugins/infra/public/components/log_stream/log_stream.tsx b/x-pack/plugins/infra/public/components/log_stream/log_stream.tsx
index 44d78591fbf2f3..0087d559a42e60 100644
--- a/x-pack/plugins/infra/public/components/log_stream/log_stream.tsx
+++ b/x-pack/plugins/infra/public/components/log_stream/log_stream.tsx
@@ -7,6 +7,7 @@
 
 import React, { useMemo, useCallback, useEffect } from 'react';
 import { noop } from 'lodash';
+import { JsonValue } from '@kbn/common-utils';
 import { DataPublicPluginStart, esQuery, Filter } from '../../../../../../src/plugins/data/public';
 import { euiStyled } from '../../../../../../src/plugins/kibana_react/common';
 import { LogEntryCursor } from '../../../common/log_entry';
@@ -17,7 +18,6 @@ import { BuiltEsQuery, useLogStream } from '../../containers/logs/log_stream';
 
 import { ScrollableLogTextStreamView } from '../logging/log_text_stream';
 import { LogColumnRenderConfiguration } from '../../utils/log_column_render_configuration';
-import { JsonValue } from '../../../../../../src/plugins/kibana_utils/common';
 import { Query } from '../../../../../../src/plugins/data/common';
 import { LogStreamErrorBoundary } from './log_stream_error_boundary';
 
diff --git a/x-pack/plugins/infra/public/components/logging/log_datepicker.tsx b/x-pack/plugins/infra/public/components/logging/log_datepicker.tsx
index b146da53caf6f6..4f396ca7da4951 100644
--- a/x-pack/plugins/infra/public/components/logging/log_datepicker.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_datepicker.tsx
@@ -6,7 +6,7 @@
  */
 
 import React, { useCallback } from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiSuperDatePicker, EuiButtonEmpty } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSuperDatePicker, EuiButton } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 interface LogDatepickerProps {
@@ -49,24 +49,19 @@ export const LogDatepicker: React.FC<LogDatepickerProps> = ({
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         {isStreaming ? (
-          <EuiButtonEmpty
-            color="primary"
-            iconType="pause"
-            iconSide="left"
-            onClick={onStopStreaming}
-          >
+          <EuiButton color="primary" iconType="pause" iconSide="left" onClick={onStopStreaming}>
             <FormattedMessage
               id="xpack.infra.logs.stopStreamingButtonLabel"
               defaultMessage="Stop streaming"
             />
-          </EuiButtonEmpty>
+          </EuiButton>
         ) : (
-          <EuiButtonEmpty iconType="play" iconSide="left" onClick={onStartStreaming}>
+          <EuiButton color="primary" iconType="play" iconSide="left" onClick={onStartStreaming}>
             <FormattedMessage
               id="xpack.infra.logs.startStreamingButtonLabel"
               defaultMessage="Stream live"
             />
-          </EuiButtonEmpty>
+          </EuiButton>
         )}
       </EuiFlexItem>
     </EuiFlexGroup>
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/field_value.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/field_value.tsx
index 29e511b2467e10..9cffef270219e4 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/field_value.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/field_value.tsx
@@ -7,8 +7,8 @@
 
 import stringify from 'json-stable-stringify';
 import React from 'react';
+import { JsonArray, JsonValue } from '@kbn/common-utils';
 import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
-import { JsonArray, JsonValue } from '../../../../../../../src/plugins/kibana_utils/common';
 import { ActiveHighlightMarker, highlightFieldValue, HighlightMarker } from './highlighting';
 
 export const FieldValue: React.FC<{
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_field_column.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_field_column.tsx
index 4fffa8eb0ee021..33e81756552d8e 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_field_column.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_field_column.tsx
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { JsonValue } from '../../../../../../../src/plugins/kibana_utils/common';
+import { JsonValue } from '@kbn/common-utils';
 import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
 import { LogColumn } from '../../../../common/log_entry';
 import { isFieldColumn, isHighlightFieldColumn } from '../../../utils/log_entry';
diff --git a/x-pack/plugins/infra/public/containers/logs/log_analysis/api/ml_setup_module_api.ts b/x-pack/plugins/infra/public/containers/logs/log_analysis/api/ml_setup_module_api.ts
index ea1567d6056f1d..6304471e818fa9 100644
--- a/x-pack/plugins/infra/public/containers/logs/log_analysis/api/ml_setup_module_api.ts
+++ b/x-pack/plugins/infra/public/containers/logs/log_analysis/api/ml_setup_module_api.ts
@@ -21,6 +21,7 @@ interface RequestArgs {
   jobOverrides?: SetupMlModuleJobOverrides[];
   datafeedOverrides?: SetupMlModuleDatafeedOverrides[];
   query?: object;
+  useDedicatedIndex?: boolean;
 }
 
 export const callSetupMlModuleAPI = async (requestArgs: RequestArgs, fetch: HttpHandler) => {
@@ -34,6 +35,7 @@ export const callSetupMlModuleAPI = async (requestArgs: RequestArgs, fetch: Http
     jobOverrides = [],
     datafeedOverrides = [],
     query,
+    useDedicatedIndex = false,
   } = requestArgs;
 
   const response = await fetch(`/api/ml/modules/setup/${moduleId}`, {
@@ -48,6 +50,7 @@ export const callSetupMlModuleAPI = async (requestArgs: RequestArgs, fetch: Http
         jobOverrides,
         datafeedOverrides,
         query,
+        useDedicatedIndex,
       })
     ),
   });
@@ -78,6 +81,7 @@ const setupMlModuleRequestParamsRT = rt.intersection([
     startDatafeed: rt.boolean,
     jobOverrides: rt.array(setupMlModuleJobOverridesRT),
     datafeedOverrides: rt.array(setupMlModuleDatafeedOverridesRT),
+    useDedicatedIndex: rt.boolean,
   }),
   rt.exact(
     rt.partial({
diff --git a/x-pack/plugins/infra/public/containers/logs/log_analysis/modules/log_entry_categories/module_descriptor.ts b/x-pack/plugins/infra/public/containers/logs/log_analysis/modules/log_entry_categories/module_descriptor.ts
index af2bd1802042a4..6823ed173a740c 100644
--- a/x-pack/plugins/infra/public/containers/logs/log_analysis/modules/log_entry_categories/module_descriptor.ts
+++ b/x-pack/plugins/infra/public/containers/logs/log_analysis/modules/log_entry_categories/module_descriptor.ts
@@ -124,6 +124,7 @@ const setUpModule = async (
       jobOverrides,
       datafeedOverrides,
       query,
+      useDedicatedIndex: true,
     },
     fetch
   );
diff --git a/x-pack/plugins/infra/public/containers/logs/log_analysis/modules/log_entry_rate/module_descriptor.ts b/x-pack/plugins/infra/public/containers/logs/log_analysis/modules/log_entry_rate/module_descriptor.ts
index 9704afd80e9ea6..c4c939d0ebb9d5 100644
--- a/x-pack/plugins/infra/public/containers/logs/log_analysis/modules/log_entry_rate/module_descriptor.ts
+++ b/x-pack/plugins/infra/public/containers/logs/log_analysis/modules/log_entry_rate/module_descriptor.ts
@@ -116,6 +116,7 @@ const setUpModule = async (
       jobOverrides,
       datafeedOverrides,
       query,
+      useDedicatedIndex: true,
     },
     fetch
   );
diff --git a/x-pack/plugins/infra/public/pages/logs/page_content.tsx b/x-pack/plugins/infra/public/pages/logs/page_content.tsx
index 35e24700619f8d..c7b145b4b01431 100644
--- a/x-pack/plugins/infra/public/pages/logs/page_content.tsx
+++ b/x-pack/plugins/infra/public/pages/logs/page_content.tsx
@@ -76,9 +76,9 @@ export const LogsPageContent: React.FunctionComponent = () => {
 
       {setHeaderActionMenu && (
         <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu}>
-          <EuiFlexGroup gutterSize={'none'} alignItems={'center'} responsive={false}>
+          <EuiFlexGroup gutterSize={'xs'} alignItems={'center'} responsive={false}>
             <EuiFlexItem grow={false}>
-              <EuiButtonEmpty iconType="gear" {...settingsLinkProps}>
+              <EuiButtonEmpty size={'xs'} color={'text'} {...settingsLinkProps}>
                 {settingsTabTitle}
               </EuiButtonEmpty>
             </EuiFlexItem>
diff --git a/x-pack/plugins/infra/public/pages/metrics/index.tsx b/x-pack/plugins/infra/public/pages/metrics/index.tsx
index cda72e96012fe4..e52d1e90d7efd2 100644
--- a/x-pack/plugins/infra/public/pages/metrics/index.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/index.tsx
@@ -84,9 +84,9 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => {
 
                   {setHeaderActionMenu && (
                     <HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu}>
-                      <EuiFlexGroup alignItems="center" gutterSize="none" responsive={false}>
+                      <EuiFlexGroup alignItems="center" gutterSize={'xs'} responsive={false}>
                         <EuiFlexItem grow={false}>
-                          <EuiButtonEmpty iconType="gear" {...settingsLinkProps}>
+                          <EuiButtonEmpty size={'xs'} color={'text'} {...settingsLinkProps}>
                             {settingsTabTitle}
                           </EuiButtonEmpty>
                         </EuiFlexItem>
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/ml/anomaly_detection/anomaly_detection_flyout.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/ml/anomaly_detection/anomaly_detection_flyout.tsx
index 5438209ae9c6b5..d2cd4f87a53422 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/ml/anomaly_detection/anomaly_detection_flyout.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/ml/anomaly_detection/anomaly_detection_flyout.tsx
@@ -51,6 +51,8 @@ export const AnomalyDetectionFlyout = () => {
   return (
     <>
       <EuiButtonEmpty
+        size="xs"
+        color="text"
         iconSide={'left'}
         iconType={'inspect'}
         onClick={openFlyout}
diff --git a/x-pack/plugins/infra/public/utils/log_column_render_configuration.tsx b/x-pack/plugins/infra/public/utils/log_column_render_configuration.tsx
index 3758e02e77312b..a6adc716e02fbc 100644
--- a/x-pack/plugins/infra/public/utils/log_column_render_configuration.tsx
+++ b/x-pack/plugins/infra/public/utils/log_column_render_configuration.tsx
@@ -6,7 +6,7 @@
  */
 
 import { ReactNode } from 'react';
-import { JsonValue } from '../../../../../src/plugins/kibana_utils/common';
+import { JsonValue } from '@kbn/common-utils';
 
 /**
  * Interface for common configuration properties, regardless of the column type.
diff --git a/x-pack/plugins/infra/server/lib/adapters/framework/adapter_types.ts b/x-pack/plugins/infra/server/lib/adapters/framework/adapter_types.ts
index 1231a19f80ca25..1657d41d0b7936 100644
--- a/x-pack/plugins/infra/server/lib/adapters/framework/adapter_types.ts
+++ b/x-pack/plugins/infra/server/lib/adapters/framework/adapter_types.ts
@@ -8,6 +8,7 @@
 import { GenericParams, SearchResponse } from 'elasticsearch';
 import { Lifecycle } from '@hapi/hapi';
 import { UsageCollectionSetup } from 'src/plugins/usage_collection/server';
+import { JsonArray, JsonValue } from '@kbn/common-utils';
 import { RouteConfig, RouteMethod } from '../../../../../../../src/core/server';
 import {
   PluginSetup as DataPluginSetup,
@@ -19,7 +20,6 @@ import { PluginSetupContract as FeaturesPluginSetup } from '../../../../../../pl
 import { SpacesPluginSetup } from '../../../../../../plugins/spaces/server';
 import { PluginSetupContract as AlertingPluginContract } from '../../../../../alerting/server';
 import { MlPluginSetup } from '../../../../../ml/server';
-import { JsonArray, JsonValue } from '../../../../../../../src/plugins/kibana_utils/common';
 
 export interface InfraServerPluginSetupDeps {
   data: DataPluginSetup;
diff --git a/x-pack/plugins/infra/server/lib/adapters/log_entries/kibana_log_entries_adapter.ts b/x-pack/plugins/infra/server/lib/adapters/log_entries/kibana_log_entries_adapter.ts
index 3aaa747b945a82..9f2e9e2713bbc7 100644
--- a/x-pack/plugins/infra/server/lib/adapters/log_entries/kibana_log_entries_adapter.ts
+++ b/x-pack/plugins/infra/server/lib/adapters/log_entries/kibana_log_entries_adapter.ts
@@ -11,7 +11,7 @@ import { constant, identity } from 'fp-ts/lib/function';
 import { pipe } from 'fp-ts/lib/pipeable';
 import * as runtimeTypes from 'io-ts';
 import { compact } from 'lodash';
-import { JsonArray } from '../../../../../../../src/plugins/kibana_utils/common';
+import { JsonArray } from '@kbn/common-utils';
 import type { InfraPluginRequestHandlerContext } from '../../../types';
 import {
   LogEntriesAdapter,
diff --git a/x-pack/plugins/infra/server/lib/domains/log_entries_domain/log_entries_domain.ts b/x-pack/plugins/infra/server/lib/domains/log_entries_domain/log_entries_domain.ts
index ad8650bbb0fb65..f8268570710f2c 100644
--- a/x-pack/plugins/infra/server/lib/domains/log_entries_domain/log_entries_domain.ts
+++ b/x-pack/plugins/infra/server/lib/domains/log_entries_domain/log_entries_domain.ts
@@ -6,7 +6,8 @@
  */
 
 import type { estypes } from '@elastic/elasticsearch';
-import { JsonObject } from '../../../../../../../src/plugins/kibana_utils/common';
+import { JsonObject } from '@kbn/common-utils';
+
 import type { InfraPluginRequestHandlerContext } from '../../../types';
 
 import {
diff --git a/x-pack/plugins/infra/server/routes/snapshot/lib/get_metrics_aggregations.ts b/x-pack/plugins/infra/server/routes/snapshot/lib/get_metrics_aggregations.ts
index 0878131a69f0e6..33060f428b7ff3 100644
--- a/x-pack/plugins/infra/server/routes/snapshot/lib/get_metrics_aggregations.ts
+++ b/x-pack/plugins/infra/server/routes/snapshot/lib/get_metrics_aggregations.ts
@@ -6,7 +6,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { JsonObject } from '../../../../../../../src/plugins/kibana_utils/common';
+import { JsonObject } from '@kbn/common-utils';
 import {
   InventoryItemType,
   MetricsUIAggregation,
diff --git a/x-pack/plugins/infra/server/services/log_entries/message/message.ts b/x-pack/plugins/infra/server/services/log_entries/message/message.ts
index 83d9aa6c8954ca..2deee584f5187a 100644
--- a/x-pack/plugins/infra/server/services/log_entries/message/message.ts
+++ b/x-pack/plugins/infra/server/services/log_entries/message/message.ts
@@ -5,8 +5,8 @@
  * 2.0.
  */
 
+import { JsonArray, JsonValue } from '@kbn/common-utils';
 import { LogMessagePart } from '../../../../common/log_entry';
-import { JsonArray, JsonValue } from '../../../../../../../src/plugins/kibana_utils/common';
 import {
   LogMessageFormattingCondition,
   LogMessageFormattingFieldValueConditionValue,
diff --git a/x-pack/plugins/infra/server/services/log_entries/message/rule_types.ts b/x-pack/plugins/infra/server/services/log_entries/message/rule_types.ts
index 4760382fd9bdd0..56d1b38e7e3902 100644
--- a/x-pack/plugins/infra/server/services/log_entries/message/rule_types.ts
+++ b/x-pack/plugins/infra/server/services/log_entries/message/rule_types.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { JsonValue } from '../../../../../../../src/plugins/kibana_utils/common';
+import { JsonValue } from '@kbn/common-utils';
 
 export interface LogMessageFormattingRule {
   when: LogMessageFormattingCondition;
diff --git a/x-pack/plugins/infra/server/utils/serialized_query.ts b/x-pack/plugins/infra/server/utils/serialized_query.ts
index 4f813d4fb137f3..4169e123d85322 100644
--- a/x-pack/plugins/infra/server/utils/serialized_query.ts
+++ b/x-pack/plugins/infra/server/utils/serialized_query.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { JsonObject } from '../../../../../src/plugins/kibana_utils/common';
+import { JsonObject } from '@kbn/common-utils';
 
 export const parseFilterQuery = (
   filterQuery: string | null | undefined
diff --git a/x-pack/plugins/infra/server/utils/typed_search_strategy.ts b/x-pack/plugins/infra/server/utils/typed_search_strategy.ts
index 546fd90a2da501..2482694474b0ed 100644
--- a/x-pack/plugins/infra/server/utils/typed_search_strategy.ts
+++ b/x-pack/plugins/infra/server/utils/typed_search_strategy.ts
@@ -7,7 +7,7 @@
 
 import * as rt from 'io-ts';
 import stringify from 'json-stable-stringify';
-import { JsonValue } from '../../../../../src/plugins/kibana_utils/common';
+import { JsonValue } from '@kbn/common-utils';
 import { jsonValueRT } from '../../common/typed_json';
 import { SearchStrategyError } from '../../common/search_strategies/common/errors';
 import { ShardFailure } from './elasticsearch_runtime_types';
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/circle.test.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/circle.test.tsx
new file mode 100644
index 00000000000000..e29bb2ac6e92ec
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/circle.test.tsx
@@ -0,0 +1,114 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { act } from 'react-dom/test-utils';
+import { setup, SetupResult, getProcessorValue } from './processor.helpers';
+
+const CIRCLE_TYPE = 'circle';
+
+describe('Processor: Circle', () => {
+  let onUpdate: jest.Mock;
+  let testBed: SetupResult;
+
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
+  beforeEach(async () => {
+    onUpdate = jest.fn();
+
+    await act(async () => {
+      testBed = await setup({
+        value: {
+          processors: [],
+        },
+        onFlyoutOpen: jest.fn(),
+        onUpdate,
+      });
+    });
+    testBed.component.update();
+    const {
+      actions: { addProcessor, addProcessorType },
+    } = testBed;
+    // Open the processor flyout
+    addProcessor();
+
+    // Add type (the other fields are not visible until a type is selected)
+    await addProcessorType(CIRCLE_TYPE);
+  });
+
+  test('prevents form submission if required fields are not provided', async () => {
+    const {
+      actions: { saveNewProcessor },
+      form,
+    } = testBed;
+
+    // Click submit button with only the type defined
+    await saveNewProcessor();
+
+    // Expect form error as "field" and "shape_type" are required parameters
+    expect(form.getErrorsMessages()).toEqual([
+      'A field value is required.',
+      'A shape type value is required.',
+    ]);
+  });
+
+  test('saves with required parameter values', async () => {
+    const {
+      actions: { saveNewProcessor },
+      form,
+    } = testBed;
+
+    // Add "field" value (required)
+    form.setInputValue('fieldNameField.input', 'field_1');
+    // Save the field
+    form.setSelectValue('shapeSelectorField', 'shape');
+    // Set the error distance
+    form.setInputValue('errorDistanceField.input', '10');
+
+    await saveNewProcessor();
+
+    const processors = getProcessorValue(onUpdate, CIRCLE_TYPE);
+
+    expect(processors[0].circle).toEqual({
+      field: 'field_1',
+      error_distance: 10,
+      shape_type: 'shape',
+    });
+  });
+
+  test('allows optional parameters to be set', async () => {
+    const {
+      actions: { saveNewProcessor },
+      form,
+    } = testBed;
+
+    // Add "field" value (required)
+    form.setInputValue('fieldNameField.input', 'field_1');
+    // Select the shape
+    form.setSelectValue('shapeSelectorField', 'geo_shape');
+    // Add "target_field" value
+    form.setInputValue('targetField.input', 'target_field');
+
+    form.setInputValue('errorDistanceField.input', '10');
+
+    // Save the field with new changes
+    await saveNewProcessor();
+
+    const processors = getProcessorValue(onUpdate, CIRCLE_TYPE);
+    expect(processors[0].circle).toEqual({
+      field: 'field_1',
+      error_distance: 10,
+      shape_type: 'geo_shape',
+      target_field: 'target_field',
+    });
+  });
+});
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/processor.helpers.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/processor.helpers.tsx
index c00f09b2d2b06c..15e8c323b1308e 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/processor.helpers.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/processor.helpers.tsx
@@ -151,6 +151,8 @@ type TestSubject =
   | 'keepOriginalField.input'
   | 'removeIfSuccessfulField.input'
   | 'targetFieldsField.input'
+  | 'shapeSelectorField'
+  | 'errorDistanceField.input'
   | 'separatorValueField.input'
   | 'quoteValueField.input'
   | 'emptyValueField.input'
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/circle.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/circle.tsx
index acb480df6d35f0..74a7f37d841aee 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/circle.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/circle.tsx
@@ -97,6 +97,7 @@ export const Circle: FunctionComponent = () => {
       />
 
       <UseField
+        data-test-subj="errorDistanceField"
         config={fieldsConfig.error_distance}
         component={NumericField}
         path="fields.error_distance"
@@ -105,6 +106,7 @@ export const Circle: FunctionComponent = () => {
       <UseField
         componentProps={{
           euiFieldProps: {
+            'data-test-subj': 'shapeSelectorField',
             options: [
               {
                 value: 'shape',
diff --git a/x-pack/plugins/lens/public/app_plugin/app.tsx b/x-pack/plugins/lens/public/app_plugin/app.tsx
index 2256a05c51e120..95068204d5eb41 100644
--- a/x-pack/plugins/lens/public/app_plugin/app.tsx
+++ b/x-pack/plugins/lens/public/app_plugin/app.tsx
@@ -222,6 +222,7 @@ export function App({
         persistedDoc: appState.persistedDoc,
         onAppLeave,
         redirectTo,
+        originatingApp: incomingState?.originatingApp,
         ...lensAppServices,
       },
       saveProps,
diff --git a/x-pack/plugins/lens/public/app_plugin/mounter.tsx b/x-pack/plugins/lens/public/app_plugin/mounter.tsx
index 46d2009756d2ce..8e59f90c958f91 100644
--- a/x-pack/plugins/lens/public/app_plugin/mounter.tsx
+++ b/x-pack/plugins/lens/public/app_plugin/mounter.tsx
@@ -52,7 +52,7 @@ export async function getLensServices(
   startDependencies: LensPluginStartDependencies,
   attributeService: () => Promise<LensAttributeService>
 ): Promise<LensAppServices> {
-  const { data, navigation, embeddable, savedObjectsTagging } = startDependencies;
+  const { data, navigation, embeddable, savedObjectsTagging, usageCollection } = startDependencies;
 
   const storage = new Storage(localStorage);
   const stateTransfer = embeddable?.getStateTransfer();
@@ -63,6 +63,7 @@ export async function getLensServices(
     storage,
     navigation,
     stateTransfer,
+    usageCollection,
     savedObjectsTagging,
     attributeService: await attributeService(),
     http: coreStart.http,
diff --git a/x-pack/plugins/lens/public/app_plugin/save_modal_container.tsx b/x-pack/plugins/lens/public/app_plugin/save_modal_container.tsx
index 27e8031f5fb6b8..a65c8e6732e448 100644
--- a/x-pack/plugins/lens/public/app_plugin/save_modal_container.tsx
+++ b/x-pack/plugins/lens/public/app_plugin/save_modal_container.tsx
@@ -9,6 +9,7 @@ import React, { useEffect, useState } from 'react';
 import { ChromeStart, NotificationsStart } from 'kibana/public';
 import { i18n } from '@kbn/i18n';
 import { partition, uniq } from 'lodash';
+import { METRIC_TYPE } from '@kbn/analytics';
 import { SaveModal } from './save_modal';
 import { LensAppProps, LensAppServices } from './types';
 import type { SaveProps } from './app';
@@ -112,6 +113,7 @@ export function SaveModalContainer({
             attributeService,
             redirectTo,
             redirectToOrigin,
+            originatingApp,
             getIsByValueMode: () => false,
             onAppLeave: () => {},
           },
@@ -178,6 +180,7 @@ export const runSaveLensVisualization = async (
     lastKnownDoc?: Document;
     getIsByValueMode: () => boolean;
     persistedDoc?: Document;
+    originatingApp?: string;
   } & ExtraProps &
     LensAppServices,
   saveProps: SaveProps,
@@ -190,6 +193,7 @@ export const runSaveLensVisualization = async (
   const {
     chrome,
     initialInput,
+    originatingApp,
     lastKnownDoc,
     persistedDoc,
     savedObjectsClient,
@@ -197,6 +201,7 @@ export const runSaveLensVisualization = async (
     notifications,
     stateTransfer,
     attributeService,
+    usageCollection,
     savedObjectsTagging,
     getIsByValueMode,
     redirectToOrigin,
@@ -209,6 +214,9 @@ export const runSaveLensVisualization = async (
     persistedDoc && savedObjectsTagging
       ? savedObjectsTagging.ui.getTagIdsFromReferences(persistedDoc.references)
       : [];
+  if (usageCollection) {
+    usageCollection.reportUiCounter(originatingApp || 'visualize', METRIC_TYPE.CLICK, 'lens:save');
+  }
 
   let references = lastKnownDoc.references;
   if (savedObjectsTagging) {
diff --git a/x-pack/plugins/lens/public/app_plugin/types.ts b/x-pack/plugins/lens/public/app_plugin/types.ts
index d1e2d1cbdfc637..b253e76aa14071 100644
--- a/x-pack/plugins/lens/public/app_plugin/types.ts
+++ b/x-pack/plugins/lens/public/app_plugin/types.ts
@@ -18,6 +18,7 @@ import {
   SavedObjectsStart,
 } from '../../../../../src/core/public';
 import { DataPublicPluginStart } from '../../../../../src/plugins/data/public';
+import { UsageCollectionStart } from '../../../../../src/plugins/usage_collection/public';
 import { DashboardStart } from '../../../../../src/plugins/dashboard/public';
 import { LensEmbeddableInput } from '../editor_frame_service/embeddable/embeddable';
 import { NavigationPublicPluginStart } from '../../../../../src/plugins/navigation/public';
@@ -97,6 +98,7 @@ export interface LensAppServices {
   uiSettings: IUiSettingsClient;
   application: ApplicationStart;
   notifications: NotificationsStart;
+  usageCollection?: UsageCollectionStart;
   stateTransfer: EmbeddableStateTransfer;
   navigation: NavigationPublicPluginStart;
   attributeService: LensAttributeService;
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/formula/formula.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/formula/formula.tsx
index 3ed50906908762..6d3ab6a7f3082f 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/formula/formula.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/formula/formula.tsx
@@ -100,28 +100,11 @@ export const formulaOperation: OperationDefinition<
     return [
       {
         type: 'function',
-        function: 'mapColumn',
+        function: currentColumn.references.length ? 'mathColumn' : 'mapColumn',
         arguments: {
           id: [columnId],
           name: [label || defaultLabel],
-          exp: [
-            {
-              type: 'expression',
-              chain: currentColumn.references.length
-                ? [
-                    {
-                      type: 'function',
-                      function: 'math',
-                      arguments: {
-                        expression: [
-                          currentColumn.references.length ? `"${currentColumn.references[0]}"` : ``,
-                        ],
-                      },
-                    },
-                  ]
-                : [],
-            },
-          ],
+          expression: [currentColumn.references.length ? `"${currentColumn.references[0]}"` : ''],
         },
       },
     ];
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/formula/math.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/formula/math.tsx
index 527af324b5b054..52522a18604aa0 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/formula/math.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/formula/math.tsx
@@ -45,25 +45,12 @@ export const mathOperation: OperationDefinition<MathIndexPatternColumn, 'managed
     return [
       {
         type: 'function',
-        function: 'mapColumn',
+        function: 'mathColumn',
         arguments: {
           id: [columnId],
           name: [columnId],
-          exp: [
-            {
-              type: 'expression',
-              chain: [
-                {
-                  type: 'function',
-                  function: 'math',
-                  arguments: {
-                    expression: [astToString(column.params.tinymathAst)],
-                    onError: ['null'],
-                  },
-                },
-              ],
-            },
-          ],
+          expression: [astToString(column.params.tinymathAst)],
+          onError: ['null'],
         },
       },
     ];
diff --git a/x-pack/plugins/lens/public/plugin.ts b/x-pack/plugins/lens/public/plugin.ts
index 6d90691e2173ae..328bea5def557e 100644
--- a/x-pack/plugins/lens/public/plugin.ts
+++ b/x-pack/plugins/lens/public/plugin.ts
@@ -6,7 +6,7 @@
  */
 
 import { AppMountParameters, CoreSetup, CoreStart } from 'kibana/public';
-import { UsageCollectionSetup } from 'src/plugins/usage_collection/public';
+import { UsageCollectionSetup, UsageCollectionStart } from 'src/plugins/usage_collection/public';
 import { DataPublicPluginSetup, DataPublicPluginStart } from '../../../../src/plugins/data/public';
 import { EmbeddableSetup, EmbeddableStart } from '../../../../src/plugins/embeddable/public';
 import { DashboardStart } from '../../../../src/plugins/dashboard/public';
@@ -81,6 +81,7 @@ export interface LensPluginStartDependencies {
   savedObjectsTagging?: SavedObjectTaggingPluginStart;
   presentationUtil: PresentationUtilPluginStart;
   indexPatternFieldEditor: IndexPatternFieldEditorStart;
+  usageCollection?: UsageCollectionStart;
 }
 
 export interface LensPublicStart {
diff --git a/x-pack/plugins/lens/public/shared_components/coloring/palette_configuration.tsx b/x-pack/plugins/lens/public/shared_components/coloring/palette_configuration.tsx
index df01b3e57cd7df..f71bda986a8bba 100644
--- a/x-pack/plugins/lens/public/shared_components/coloring/palette_configuration.tsx
+++ b/x-pack/plugins/lens/public/shared_components/coloring/palette_configuration.tsx
@@ -115,9 +115,24 @@ export function CustomizablePalette({
           />
         </EuiFormRow>
         <EuiFormRow
-          label={i18n.translate('xpack.lens.table.dynamicColoring.continuity.label', {
-            defaultMessage: 'Color continuity',
-          })}
+          label={
+            <>
+              {i18n.translate('xpack.lens.table.dynamicColoring.continuity.label', {
+                defaultMessage: 'Color continuity',
+              })}{' '}
+              <EuiIconTip
+                content={i18n.translate(
+                  'xpack.lens.table.dynamicColoring.customPalette.continuityHelp',
+                  {
+                    defaultMessage:
+                      'Specify how colors appear before the first color stop, and after the last color stop.',
+                  }
+                )}
+                position="top"
+                size="s"
+              />
+            </>
+          }
           display="rowCompressed"
         >
           <EuiSuperSelect
diff --git a/x-pack/plugins/lens/public/vis_type_alias.ts b/x-pack/plugins/lens/public/vis_type_alias.ts
index b9a526c71180cf..5b48ef8b31923a 100644
--- a/x-pack/plugins/lens/public/vis_type_alias.ts
+++ b/x-pack/plugins/lens/public/vis_type_alias.ts
@@ -42,6 +42,7 @@ export const getLensAliasConfig = (): VisTypeAlias => ({
           icon: 'lensApp',
           stage: 'production',
           savedObjectType: type,
+          type: 'lens',
           typeTitle: i18n.translate('xpack.lens.visTypeAlias.type', { defaultMessage: 'Lens' }),
         };
       },
diff --git a/x-pack/plugins/ml/common/types/es_client.ts b/x-pack/plugins/ml/common/types/es_client.ts
index 67adda6b24c18a..29a7a81aa56939 100644
--- a/x-pack/plugins/ml/common/types/es_client.ts
+++ b/x-pack/plugins/ml/common/types/es_client.ts
@@ -7,9 +7,9 @@
 
 import { estypes } from '@elastic/elasticsearch';
 
+import { JsonObject } from '@kbn/common-utils';
 import { buildEsQuery } from '../../../../../src/plugins/data/common/es_query/es_query';
 import type { DslQuery } from '../../../../../src/plugins/data/common/es_query/kuery';
-import type { JsonObject } from '../../../../../src/plugins/kibana_utils/common';
 
 import { isPopulatedObject } from '../util/object_utils';
 
diff --git a/x-pack/plugins/ml/server/models/data_recognizer/modules/logs_ui_categories/ml/log_entry_categories_count.json b/x-pack/plugins/ml/server/models/data_recognizer/modules/logs_ui_categories/ml/log_entry_categories_count.json
index ad7da3330bb6cd..90f88275cb6d0b 100644
--- a/x-pack/plugins/ml/server/models/data_recognizer/modules/logs_ui_categories/ml/log_entry_categories_count.json
+++ b/x-pack/plugins/ml/server/models/data_recognizer/modules/logs_ui_categories/ml/log_entry_categories_count.json
@@ -22,7 +22,7 @@
     ],
     "per_partition_categorization": {
       "enabled": true,
-      "stop_on_warn": false
+      "stop_on_warn": true
     }
   },
   "analysis_limits": {
@@ -38,6 +38,6 @@
   },
   "custom_settings": {
     "created_by": "ml-module-logs-ui-categories",
-    "job_revision": 1
+    "job_revision": 2
   }
 }
diff --git a/x-pack/plugins/observability/public/application/index.tsx b/x-pack/plugins/observability/public/application/index.tsx
index f8dce3ce1d487e..69ee6fa19cf0f7 100644
--- a/x-pack/plugins/observability/public/application/index.tsx
+++ b/x-pack/plugins/observability/public/application/index.tsx
@@ -6,30 +6,25 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import React, { MouseEvent, useEffect } from 'react';
+import React from 'react';
 import ReactDOM from 'react-dom';
 import { Route, Router, Switch } from 'react-router-dom';
-import { EuiThemeProvider } from '../../../../../src/plugins/kibana_react/common';
+import { ConfigSchema } from '..';
 import { AppMountParameters, APP_WRAPPER_CLASS, CoreStart } from '../../../../../src/core/public';
+import { EuiThemeProvider } from '../../../../../src/plugins/kibana_react/common';
 import {
   KibanaContextProvider,
   RedirectAppLinks,
 } from '../../../../../src/plugins/kibana_react/public';
+import { Storage } from '../../../../../src/plugins/kibana_utils/public';
+import type { LazyObservabilityPageTemplateProps } from '../components/shared/page_template/lazy_page_template';
+import { HasDataContextProvider } from '../context/has_data_context';
 import { PluginContext } from '../context/plugin_context';
-import { usePluginContext } from '../hooks/use_plugin_context';
 import { useRouteParams } from '../hooks/use_route_params';
 import { ObservabilityPublicPluginsStart } from '../plugin';
-import type { LazyObservabilityPageTemplateProps } from '../components/shared/page_template/lazy_page_template';
-import { HasDataContextProvider } from '../context/has_data_context';
-import { Breadcrumbs, routes } from '../routes';
-import { Storage } from '../../../../../src/plugins/kibana_utils/public';
-import { ConfigSchema } from '..';
+import { routes } from '../routes';
 import { ObservabilityRuleTypeRegistry } from '../rules/create_observability_rule_type_registry';
 
-function getTitleFromBreadCrumbs(breadcrumbs: Breadcrumbs) {
-  return breadcrumbs.map(({ text }) => text).reverse();
-}
-
 function App() {
   return (
     <>
@@ -38,27 +33,6 @@ function App() {
           const path = key as keyof typeof routes;
           const route = routes[path];
           const Wrapper = () => {
-            const { core } = usePluginContext();
-
-            useEffect(() => {
-              const href = core.http.basePath.prepend('/app/observability');
-              const breadcrumbs = [
-                {
-                  href,
-                  text: i18n.translate('xpack.observability.observability.breadcrumb.', {
-                    defaultMessage: 'Observability',
-                  }),
-                  onClick: (event: MouseEvent<HTMLAnchorElement>) => {
-                    event.preventDefault();
-                    core.application.navigateToUrl(href);
-                  },
-                },
-                ...route.breadcrumb,
-              ];
-              core.chrome.setBreadcrumbs(breadcrumbs);
-              core.chrome.docTitle.change(getTitleFromBreadCrumbs(breadcrumbs));
-            }, [core]);
-
             const params = useRouteParams(path);
             return route.handler(params);
           };
diff --git a/x-pack/plugins/observability/public/components/app/cases/case_view/index.tsx b/x-pack/plugins/observability/public/components/app/cases/case_view/index.tsx
index 3267f7bb17cce6..728333ac8c544f 100644
--- a/x-pack/plugins/observability/public/components/app/cases/case_view/index.tsx
+++ b/x-pack/plugins/observability/public/components/app/cases/case_view/index.tsx
@@ -7,6 +7,7 @@
 
 import React, { useCallback, useState } from 'react';
 import {
+  casesBreadcrumbs,
   getCaseDetailsUrl,
   getCaseDetailsUrlWithCommentId,
   getCaseUrl,
@@ -17,7 +18,7 @@ import { Case } from '../../../../../../cases/common';
 import { useFetchAlertData } from './helpers';
 import { useKibana } from '../../../../utils/kibana_react';
 import { CASES_APP_ID } from '../constants';
-import { casesBreadcrumbs, useBreadcrumbs } from '../../../../hooks/use_breadcrumbs';
+import { useBreadcrumbs } from '../../../../hooks/use_breadcrumbs';
 
 interface Props {
   caseId: string;
diff --git a/x-pack/plugins/observability/public/hooks/use_breadcrumbs.test.tsx b/x-pack/plugins/observability/public/hooks/use_breadcrumbs.test.tsx
new file mode 100644
index 00000000000000..d033ecc2069cdf
--- /dev/null
+++ b/x-pack/plugins/observability/public/hooks/use_breadcrumbs.test.tsx
@@ -0,0 +1,116 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { renderHook } from '@testing-library/react-hooks';
+import React, { ReactNode } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { CoreStart } from '../../../../../src/core/public';
+import { createKibanaReactContext } from '../../../../../src/plugins/kibana_react/public';
+import { useBreadcrumbs } from './use_breadcrumbs';
+
+const setBreadcrumbs = jest.fn();
+const setTitle = jest.fn();
+const kibanaServices = ({
+  application: { getUrlForApp: () => {}, navigateToApp: () => {} },
+  chrome: { setBreadcrumbs, docTitle: { change: setTitle } },
+  uiSettings: { get: () => true },
+} as unknown) as Partial<CoreStart>;
+const KibanaContext = createKibanaReactContext(kibanaServices);
+
+function Wrapper({ children }: { children?: ReactNode }) {
+  return (
+    <MemoryRouter>
+      <KibanaContext.Provider>{children}</KibanaContext.Provider>
+    </MemoryRouter>
+  );
+}
+
+describe('useBreadcrumbs', () => {
+  afterEach(() => {
+    setBreadcrumbs.mockClear();
+    setTitle.mockClear();
+  });
+
+  describe('when setBreadcrumbs and setTitle are not defined', () => {
+    it('does not set breadcrumbs or the title', () => {
+      renderHook(() => useBreadcrumbs([]), {
+        wrapper: ({ children }) => (
+          <MemoryRouter>
+            <KibanaContext.Provider
+              services={
+                ({ ...kibanaServices, chrome: { docTitle: {} } } as unknown) as Partial<CoreStart>
+              }
+            >
+              {children}
+            </KibanaContext.Provider>
+          </MemoryRouter>
+        ),
+      });
+
+      expect(setBreadcrumbs).not.toHaveBeenCalled();
+      expect(setTitle).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('with an empty array', () => {
+    it('sets the overview breadcrumb', () => {
+      renderHook(() => useBreadcrumbs([]), { wrapper: Wrapper });
+
+      expect(setBreadcrumbs).toHaveBeenCalledWith([
+        { href: '/overview', onClick: expect.any(Function), text: 'Observability' },
+      ]);
+    });
+
+    it('sets the overview title', () => {
+      renderHook(() => useBreadcrumbs([]), { wrapper: Wrapper });
+
+      expect(setTitle).toHaveBeenCalledWith(['Observability']);
+    });
+  });
+
+  describe('given breadcrumbs', () => {
+    it('sets the breadcrumbs', () => {
+      renderHook(
+        () =>
+          useBreadcrumbs([
+            { text: 'One', href: '/one' },
+            {
+              text: 'Two',
+            },
+          ]),
+        { wrapper: Wrapper }
+      );
+
+      expect(setBreadcrumbs).toHaveBeenCalledWith([
+        { href: '/overview', onClick: expect.any(Function), text: 'Observability' },
+        {
+          href: '/one',
+          onClick: expect.any(Function),
+          text: 'One',
+        },
+        {
+          text: 'Two',
+        },
+      ]);
+    });
+
+    it('sets the title', () => {
+      renderHook(
+        () =>
+          useBreadcrumbs([
+            { text: 'One', href: '/one' },
+            {
+              text: 'Two',
+            },
+          ]),
+        { wrapper: Wrapper }
+      );
+
+      expect(setTitle).toHaveBeenCalledWith(['Two', 'One', 'Observability']);
+    });
+  });
+});
diff --git a/x-pack/plugins/observability/public/hooks/use_breadcrumbs.ts b/x-pack/plugins/observability/public/hooks/use_breadcrumbs.ts
index 090031e314fd1a..241a978d36948b 100644
--- a/x-pack/plugins/observability/public/hooks/use_breadcrumbs.ts
+++ b/x-pack/plugins/observability/public/hooks/use_breadcrumbs.ts
@@ -5,14 +5,13 @@
  * 2.0.
  */
 
-import { ChromeBreadcrumb } from 'kibana/public';
 import { i18n } from '@kbn/i18n';
+import { ChromeBreadcrumb } from 'kibana/public';
 import { MouseEvent, useEffect } from 'react';
-import { EuiBreadcrumb } from '@elastic/eui';
-import { useQueryParams } from './use_query_params';
 import { useKibana } from '../utils/kibana_react';
+import { useQueryParams } from './use_query_params';
 
-function handleBreadcrumbClick(
+function addClickHandlers(
   breadcrumbs: ChromeBreadcrumb[],
   navigateToHref?: (url: string) => Promise<void>
 ) {
@@ -31,52 +30,37 @@ function handleBreadcrumbClick(
   }));
 }
 
-export const makeBaseBreadcrumb = (href: string): EuiBreadcrumb => {
-  return {
-    text: i18n.translate('xpack.observability.breadcrumbs.observability', {
-      defaultMessage: 'Observability',
-    }),
-    href,
-  };
-};
-export const casesBreadcrumbs = {
-  cases: {
-    text: i18n.translate('xpack.observability.breadcrumbs.observability.cases', {
-      defaultMessage: 'Cases',
-    }),
-  },
-  create: {
-    text: i18n.translate('xpack.observability.breadcrumbs.observability.cases.create', {
-      defaultMessage: 'Create',
-    }),
-  },
-  configure: {
-    text: i18n.translate('xpack.observability.breadcrumbs.observability.cases.configure', {
-      defaultMessage: 'Configure',
-    }),
-  },
-};
+function getTitleFromBreadCrumbs(breadcrumbs: ChromeBreadcrumb[]) {
+  return breadcrumbs.map(({ text }) => text?.toString() ?? '').reverse();
+}
+
 export const useBreadcrumbs = (extraCrumbs: ChromeBreadcrumb[]) => {
   const params = useQueryParams();
 
   const {
     services: {
-      chrome: { setBreadcrumbs },
+      chrome: { docTitle, setBreadcrumbs },
       application: { getUrlForApp, navigateToUrl },
     },
   } = useKibana();
-
+  const setTitle = docTitle.change;
   const appPath = getUrlForApp('observability-overview') ?? '';
-  const navigate = navigateToUrl;
 
   useEffect(() => {
+    const breadcrumbs = [
+      {
+        text: i18n.translate('xpack.observability.breadcrumbs.observabilityLinkText', {
+          defaultMessage: 'Observability',
+        }),
+        href: appPath + '/overview',
+      },
+      ...extraCrumbs,
+    ];
     if (setBreadcrumbs) {
-      setBreadcrumbs(
-        handleBreadcrumbClick(
-          [makeBaseBreadcrumb(appPath + '/overview')].concat(extraCrumbs),
-          navigate
-        )
-      );
+      setBreadcrumbs(addClickHandlers(breadcrumbs, navigateToUrl));
+    }
+    if (setTitle) {
+      setTitle(getTitleFromBreadCrumbs(breadcrumbs));
     }
-  }, [appPath, extraCrumbs, navigate, params, setBreadcrumbs]);
+  }, [appPath, extraCrumbs, navigateToUrl, params, setBreadcrumbs, setTitle]);
 };
diff --git a/x-pack/plugins/observability/public/pages/alerts/index.tsx b/x-pack/plugins/observability/public/pages/alerts/index.tsx
index bd926f3a326bf7..6f696a70665ce6 100644
--- a/x-pack/plugins/observability/public/pages/alerts/index.tsx
+++ b/x-pack/plugins/observability/public/pages/alerts/index.tsx
@@ -12,6 +12,7 @@ import { useHistory } from 'react-router-dom';
 import { ParsedTechnicalFields } from '../../../../rule_registry/common/parse_technical_fields';
 import type { AlertStatus } from '../../../common/typings';
 import { ExperimentalBadge } from '../../components/shared/experimental_badge';
+import { useBreadcrumbs } from '../../hooks/use_breadcrumbs';
 import { useFetcher } from '../../hooks/use_fetcher';
 import { usePluginContext } from '../../hooks/use_plugin_context';
 import { RouteParams } from '../../routes';
@@ -44,6 +45,14 @@ export function AlertsPage({ routeParams }: AlertsPageProps) {
     query: { rangeFrom = 'now-15m', rangeTo = 'now', kuery = '', status = 'open' },
   } = routeParams;
 
+  useBreadcrumbs([
+    {
+      text: i18n.translate('xpack.observability.breadcrumbs.alertsLinkText', {
+        defaultMessage: 'Alerts',
+      }),
+    },
+  ]);
+
   // In a future milestone we'll have a page dedicated to rule management in
   // observability. For now link to the settings page.
   const manageDetectionRulesHref = prepend(
diff --git a/x-pack/plugins/observability/public/pages/cases/all_cases.tsx b/x-pack/plugins/observability/public/pages/cases/all_cases.tsx
index 4131cdc40738f2..f73f3b4cf57d75 100644
--- a/x-pack/plugins/observability/public/pages/cases/all_cases.tsx
+++ b/x-pack/plugins/observability/public/pages/cases/all_cases.tsx
@@ -14,10 +14,15 @@ import { permissionsReadOnlyErrorMessage, CaseCallOut } from '../../components/a
 import { CaseFeatureNoPermissions } from './feature_no_permissions';
 import { useGetUserCasesPermissions } from '../../hooks/use_get_user_cases_permissions';
 import { usePluginContext } from '../../hooks/use_plugin_context';
+import { casesBreadcrumbs } from './links';
+import { useBreadcrumbs } from '../../hooks/use_breadcrumbs';
 
 export const AllCasesPage = React.memo(() => {
   const userPermissions = useGetUserCasesPermissions();
   const { ObservabilityPageTemplate } = usePluginContext();
+
+  useBreadcrumbs([casesBreadcrumbs.cases]);
+
   return userPermissions == null || userPermissions?.read ? (
     <>
       {userPermissions != null && !userPermissions?.crud && userPermissions?.read && (
diff --git a/x-pack/plugins/observability/public/pages/cases/configure_cases.tsx b/x-pack/plugins/observability/public/pages/cases/configure_cases.tsx
index acc6bdf68fba75..2986c1ff34e11c 100644
--- a/x-pack/plugins/observability/public/pages/cases/configure_cases.tsx
+++ b/x-pack/plugins/observability/public/pages/cases/configure_cases.tsx
@@ -14,8 +14,8 @@ import { CASES_APP_ID, CASES_OWNER } from '../../components/app/cases/constants'
 import { useKibana } from '../../utils/kibana_react';
 import { useGetUserCasesPermissions } from '../../hooks/use_get_user_cases_permissions';
 import { usePluginContext } from '../../hooks/use_plugin_context';
-import { casesBreadcrumbs, useBreadcrumbs } from '../../hooks/use_breadcrumbs';
-import { getCaseUrl, useFormatUrl } from './links';
+import { useBreadcrumbs } from '../../hooks/use_breadcrumbs';
+import { casesBreadcrumbs, getCaseUrl, useFormatUrl } from './links';
 
 const ButtonEmpty = styled(EuiButtonEmpty)`
   display: block;
diff --git a/x-pack/plugins/observability/public/pages/cases/create_case.tsx b/x-pack/plugins/observability/public/pages/cases/create_case.tsx
index d0e25e6263075b..11f6d62da61033 100644
--- a/x-pack/plugins/observability/public/pages/cases/create_case.tsx
+++ b/x-pack/plugins/observability/public/pages/cases/create_case.tsx
@@ -14,8 +14,8 @@ import { CASES_APP_ID } from '../../components/app/cases/constants';
 import { useKibana } from '../../utils/kibana_react';
 import { useGetUserCasesPermissions } from '../../hooks/use_get_user_cases_permissions';
 import { usePluginContext } from '../../hooks/use_plugin_context';
-import { getCaseUrl, useFormatUrl } from './links';
-import { casesBreadcrumbs, useBreadcrumbs } from '../../hooks/use_breadcrumbs';
+import { casesBreadcrumbs, getCaseUrl, useFormatUrl } from './links';
+import { useBreadcrumbs } from '../../hooks/use_breadcrumbs';
 
 const ButtonEmpty = styled(EuiButtonEmpty)`
   display: block;
diff --git a/x-pack/plugins/observability/public/pages/cases/links.ts b/x-pack/plugins/observability/public/pages/cases/links.ts
index 768d74ec4e7ee3..9b2f464a0e8471 100644
--- a/x-pack/plugins/observability/public/pages/cases/links.ts
+++ b/x-pack/plugins/observability/public/pages/cases/links.ts
@@ -5,10 +5,29 @@
  * 2.0.
  */
 
-import { useCallback } from 'react';
+import { i18n } from '@kbn/i18n';
 import { isEmpty } from 'lodash/fp';
+import { useCallback } from 'react';
 import { useKibana } from '../../utils/kibana_react';
 
+export const casesBreadcrumbs = {
+  cases: {
+    text: i18n.translate('xpack.observability.breadcrumbs.casesLinkText', {
+      defaultMessage: 'Cases',
+    }),
+  },
+  create: {
+    text: i18n.translate('xpack.observability.breadcrumbs.casesCreateLinkText', {
+      defaultMessage: 'Create',
+    }),
+  },
+  configure: {
+    text: i18n.translate('xpack.observability.breadcrumbs.casesConfigureLinkText', {
+      defaultMessage: 'Configure',
+    }),
+  },
+};
+
 export const getCaseDetailsUrl = ({ id, subCaseId }: { id: string; subCaseId?: string }) => {
   if (subCaseId) {
     return `/${encodeURIComponent(id)}/sub-cases/${encodeURIComponent(subCaseId)}`;
diff --git a/x-pack/plugins/observability/public/pages/landing/index.tsx b/x-pack/plugins/observability/public/pages/landing/index.tsx
index 46c99bffbcc698..28d3784c65c4ae 100644
--- a/x-pack/plugins/observability/public/pages/landing/index.tsx
+++ b/x-pack/plugins/observability/public/pages/landing/index.tsx
@@ -21,6 +21,7 @@ import React, { useContext } from 'react';
 import styled, { ThemeContext } from 'styled-components';
 import { FleetPanel } from '../../components/app/fleet_panel';
 import { ObservabilityHeaderMenu } from '../../components/app/header';
+import { useBreadcrumbs } from '../../hooks/use_breadcrumbs';
 import { usePluginContext } from '../../hooks/use_plugin_context';
 import { useTrackPageview } from '../../hooks/use_track_metric';
 import { appsSection } from '../home/section';
@@ -33,6 +34,13 @@ const EuiCardWithoutPadding = styled(EuiCard)`
 export function LandingPage() {
   useTrackPageview({ app: 'observability-overview', path: 'landing' });
   useTrackPageview({ app: 'observability-overview', path: 'landing', delay: 15000 });
+  useBreadcrumbs([
+    {
+      text: i18n.translate('xpack.observability.breadcrumbs.landingLinkText', {
+        defaultMessage: 'Getting started',
+      }),
+    },
+  ]);
 
   const { core, ObservabilityPageTemplate } = usePluginContext();
   const theme = useContext(ThemeContext);
diff --git a/x-pack/plugins/observability/public/pages/overview/index.tsx b/x-pack/plugins/observability/public/pages/overview/index.tsx
index 4cb6792d501952..89398ad16f1988 100644
--- a/x-pack/plugins/observability/public/pages/overview/index.tsx
+++ b/x-pack/plugins/observability/public/pages/overview/index.tsx
@@ -16,6 +16,7 @@ import { NewsFeed } from '../../components/app/news_feed';
 import { Resources } from '../../components/app/resources';
 import { AlertsSection } from '../../components/app/section/alerts';
 import { DatePicker } from '../../components/shared/date_picker';
+import { useBreadcrumbs } from '../../hooks/use_breadcrumbs';
 import { useFetcher } from '../../hooks/use_fetcher';
 import { useHasData } from '../../hooks/use_has_data';
 import { usePluginContext } from '../../hooks/use_plugin_context';
@@ -39,6 +40,14 @@ function calculateBucketSize({ start, end }: { start?: number; end?: number }) {
 export function OverviewPage({ routeParams }: Props) {
   useTrackPageview({ app: 'observability-overview', path: 'overview' });
   useTrackPageview({ app: 'observability-overview', path: 'overview', delay: 15000 });
+  useBreadcrumbs([
+    {
+      text: i18n.translate('xpack.observability.breadcrumbs.overviewLinkText', {
+        defaultMessage: 'Overview',
+      }),
+    },
+  ]);
+
   const { core, ObservabilityPageTemplate } = usePluginContext();
 
   const { relativeStart, relativeEnd, absoluteStart, absoluteEnd } = useTimeRange();
diff --git a/x-pack/plugins/observability/public/routes/index.tsx b/x-pack/plugins/observability/public/routes/index.tsx
index a2a67a42bd166a..92f51aeff9bd63 100644
--- a/x-pack/plugins/observability/public/routes/index.tsx
+++ b/x-pack/plugins/observability/public/routes/index.tsx
@@ -5,21 +5,19 @@
  * 2.0.
  */
 
-import React from 'react';
 import * as t from 'io-ts';
-import { i18n } from '@kbn/i18n';
+import React from 'react';
+import { alertStatusRt } from '../../common/typings';
+import { ExploratoryViewPage } from '../components/shared/exploratory_view';
+import { AlertsPage } from '../pages/alerts';
+import { AllCasesPage } from '../pages/cases/all_cases';
+import { CaseDetailsPage } from '../pages/cases/case_details';
+import { ConfigureCasesPage } from '../pages/cases/configure_cases';
+import { CreateCasePage } from '../pages/cases/create_case';
 import { HomePage } from '../pages/home';
 import { LandingPage } from '../pages/landing';
 import { OverviewPage } from '../pages/overview';
 import { jsonRt } from './json_rt';
-import { AlertsPage } from '../pages/alerts';
-import { CreateCasePage } from '../pages/cases/create_case';
-import { ExploratoryViewPage } from '../components/shared/exploratory_view';
-import { CaseDetailsPage } from '../pages/cases/case_details';
-import { ConfigureCasesPage } from '../pages/cases/configure_cases';
-import { AllCasesPage } from '../pages/cases/all_cases';
-import { casesBreadcrumbs } from '../hooks/use_breadcrumbs';
-import { alertStatusRt } from '../../common/typings';
 
 export type RouteParams<T extends keyof typeof routes> = DecodeParams<typeof routes[T]['params']>;
 
@@ -27,8 +25,6 @@ type DecodeParams<TParams extends Params | undefined> = {
   [key in keyof TParams]: TParams[key] extends t.Any ? t.TypeOf<TParams[key]> : never;
 };
 
-export type Breadcrumbs = Array<{ text: string }>;
-
 export interface Params {
   query?: t.HasProps;
   path?: t.HasProps;
@@ -40,26 +36,12 @@ export const routes = {
       return <HomePage />;
     },
     params: {},
-    breadcrumb: [
-      {
-        text: i18n.translate('xpack.observability.home.breadcrumb', {
-          defaultMessage: 'Overview',
-        }),
-      },
-    ],
   },
   '/landing': {
     handler: () => {
       return <LandingPage />;
     },
     params: {},
-    breadcrumb: [
-      {
-        text: i18n.translate('xpack.observability.landing.breadcrumb', {
-          defaultMessage: 'Getting started',
-        }),
-      },
-    ],
   },
   '/overview': {
     handler: ({ query }: any) => {
@@ -73,34 +55,24 @@ export const routes = {
         refreshInterval: jsonRt.pipe(t.number),
       }),
     },
-    breadcrumb: [
-      {
-        text: i18n.translate('xpack.observability.overview.breadcrumb', {
-          defaultMessage: 'Overview',
-        }),
-      },
-    ],
   },
   '/cases': {
     handler: () => {
       return <AllCasesPage />;
     },
     params: {},
-    breadcrumb: [casesBreadcrumbs.cases],
   },
   '/cases/create': {
     handler: () => {
       return <CreateCasePage />;
     },
     params: {},
-    breadcrumb: [casesBreadcrumbs.cases, casesBreadcrumbs.create],
   },
   '/cases/configure': {
     handler: () => {
       return <ConfigureCasesPage />;
     },
     params: {},
-    breadcrumb: [casesBreadcrumbs.cases, casesBreadcrumbs.configure],
   },
   '/cases/:detailName': {
     handler: () => {
@@ -111,7 +83,6 @@ export const routes = {
         detailName: t.string,
       }),
     },
-    breadcrumb: [casesBreadcrumbs.cases],
   },
   '/alerts': {
     handler: (routeParams: any) => {
@@ -127,13 +98,6 @@ export const routes = {
         refreshInterval: jsonRt.pipe(t.number),
       }),
     },
-    breadcrumb: [
-      {
-        text: i18n.translate('xpack.observability.alerts.breadcrumb', {
-          defaultMessage: 'Alerts',
-        }),
-      },
-    ],
   },
   '/exploratory-view': {
     handler: () => {
@@ -147,12 +111,5 @@ export const routes = {
         refreshInterval: jsonRt.pipe(t.number),
       }),
     },
-    breadcrumb: [
-      {
-        text: i18n.translate('xpack.observability.overview.exploratoryView', {
-          defaultMessage: 'Analyze data',
-        }),
-      },
-    ],
   },
 };
diff --git a/x-pack/plugins/observability/server/lib/rules/get_top_alerts.ts b/x-pack/plugins/observability/server/lib/rules/get_top_alerts.ts
index 9560de6ec00ff0..db8191136686a1 100644
--- a/x-pack/plugins/observability/server/lib/rules/get_top_alerts.ts
+++ b/x-pack/plugins/observability/server/lib/rules/get_top_alerts.ts
@@ -4,7 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { ALERT_UUID, TIMESTAMP } from '@kbn/rule-data-utils/target/technical_field_names';
+import { EVENT_KIND, TIMESTAMP } from '@kbn/rule-data-utils/target/technical_field_names';
 import { RuleDataClient } from '../../../../rule_registry/server';
 import type { AlertStatus } from '../../../common/typings';
 import { kqlQuery, rangeQuery, alertStatusQuery } from '../../utils/queries';
@@ -28,13 +28,15 @@ export async function getTopAlerts({
     body: {
       query: {
         bool: {
-          filter: [...rangeQuery(start, end), ...kqlQuery(kuery), ...alertStatusQuery(status)],
+          filter: [
+            ...rangeQuery(start, end),
+            ...kqlQuery(kuery),
+            ...alertStatusQuery(status),
+            { term: { [EVENT_KIND]: 'signal' } },
+          ],
         },
       },
       fields: ['*'],
-      collapse: {
-        field: ALERT_UUID,
-      },
       size,
       sort: {
         [TIMESTAMP]: 'desc',
diff --git a/x-pack/plugins/osquery/common/typed_json.ts b/x-pack/plugins/osquery/common/typed_json.ts
index fb24b1dc0db5e3..8ce6907beb80bd 100644
--- a/x-pack/plugins/osquery/common/typed_json.ts
+++ b/x-pack/plugins/osquery/common/typed_json.ts
@@ -7,7 +7,7 @@
 
 import { DslQuery, Filter } from 'src/plugins/data/common';
 
-import { JsonObject } from '../../../../src/plugins/kibana_utils/common';
+import { JsonObject } from '@kbn/common-utils';
 
 export type ESQuery =
   | ESRangeQuery
diff --git a/x-pack/plugins/osquery/public/action_results/action_results_summary.tsx b/x-pack/plugins/osquery/public/action_results/action_results_summary.tsx
index 23277976968a98..23eaaeac1439d4 100644
--- a/x-pack/plugins/osquery/public/action_results/action_results_summary.tsx
+++ b/x-pack/plugins/osquery/public/action_results/action_results_summary.tsx
@@ -132,7 +132,7 @@ const ActionResultsSummaryComponent: React.FC<ActionResultsSummaryProps> = ({
       <EuiLink
         className="eui-textTruncate"
         href={getUrlForApp(PLUGIN_ID, {
-          path: `#` + pagePathGetters.fleet_agent_details({ agentId }),
+          path: `#` + pagePathGetters.agent_details({ agentId }),
         })}
         target="_blank"
       >
diff --git a/x-pack/plugins/osquery/public/results/results_table.tsx b/x-pack/plugins/osquery/public/results/results_table.tsx
index affc600847284c..6ff60d30d23bf7 100644
--- a/x-pack/plugins/osquery/public/results/results_table.tsx
+++ b/x-pack/plugins/osquery/public/results/results_table.tsx
@@ -66,7 +66,7 @@ const ResultsTableComponent: React.FC<ResultsTableComponentProps> = ({
   const getFleetAppUrl = useCallback(
     (agentId) =>
       getUrlForApp('fleet', {
-        path: `#` + pagePathGetters.fleet_agent_details({ agentId }),
+        path: `#` + pagePathGetters.agent_details({ agentId }),
       }),
     [getUrlForApp]
   );
diff --git a/x-pack/plugins/reporting/server/config/config.ts b/x-pack/plugins/reporting/server/config/config.ts
index 69eafba994b74f..cd4dbd7c19956c 100644
--- a/x-pack/plugins/reporting/server/config/config.ts
+++ b/x-pack/plugins/reporting/server/config/config.ts
@@ -6,8 +6,7 @@
  */
 
 import { get } from 'lodash';
-import { Observable } from 'rxjs';
-import { first, map } from 'rxjs/operators';
+import { first } from 'rxjs/operators';
 import { CoreSetup, PluginInitializerContext } from 'src/core/server';
 import { LevelLogger } from '../lib';
 import { createConfig$ } from './create_config';
@@ -43,7 +42,6 @@ interface Config<BaseType> {
 }
 
 interface KbnServerConfigType {
-  path: { data: Observable<string> };
   server: {
     basePath: string;
     host: string;
@@ -68,9 +66,6 @@ export const buildConfig = async (
   const serverInfo = http.getServerInfo();
 
   const kbnConfig = {
-    path: {
-      data: initContext.config.legacy.globalConfig$.pipe(map((c) => c.path.data)),
-    },
     server: {
       basePath: core.http.basePath.serverBasePath,
       host: serverInfo.hostname,
diff --git a/x-pack/plugins/rollup/kibana.json b/x-pack/plugins/rollup/kibana.json
index 725b563c3674f3..10541d9a4ebddc 100644
--- a/x-pack/plugins/rollup/kibana.json
+++ b/x-pack/plugins/rollup/kibana.json
@@ -5,7 +5,6 @@
   "server": true,
   "ui": true,
   "requiredPlugins": [
-    "indexPatternManagement",
     "management",
     "licensing",
     "features"
diff --git a/x-pack/plugins/rollup/public/plugin.ts b/x-pack/plugins/rollup/public/plugin.ts
index 17e352e1a44729..0d345e326193c7 100644
--- a/x-pack/plugins/rollup/public/plugin.ts
+++ b/x-pack/plugins/rollup/public/plugin.ts
@@ -12,14 +12,13 @@ import { rollupBadgeExtension, rollupToggleExtension } from './extend_index_mana
 import { RollupIndexPatternCreationConfig } from './index_pattern_creation/rollup_index_pattern_creation_config';
 // @ts-ignore
 import { RollupIndexPatternListConfig } from './index_pattern_list/rollup_index_pattern_list_config';
-import { CONFIG_ROLLUPS, UIM_APP_NAME } from '../common';
+import { UIM_APP_NAME } from '../common';
 import {
   FeatureCatalogueCategory,
   HomePublicPluginSetup,
 } from '../../../../src/plugins/home/public';
 import { ManagementSetup } from '../../../../src/plugins/management/public';
 import { IndexManagementPluginSetup } from '../../index_management/public';
-import { IndexPatternManagementSetup } from '../../../../src/plugins/index_pattern_management/public';
 // @ts-ignore
 import { setHttp, init as initDocumentation } from './crud_app/services/index';
 import { setNotifications, setFatalErrors, setUiStatsReporter } from './kibana_services';
@@ -29,20 +28,13 @@ export interface RollupPluginSetupDependencies {
   home?: HomePublicPluginSetup;
   management: ManagementSetup;
   indexManagement?: IndexManagementPluginSetup;
-  indexPatternManagement: IndexPatternManagementSetup;
   usageCollection?: UsageCollectionSetup;
 }
 
 export class RollupPlugin implements Plugin {
   setup(
     core: CoreSetup,
-    {
-      home,
-      management,
-      indexManagement,
-      indexPatternManagement,
-      usageCollection,
-    }: RollupPluginSetupDependencies
+    { home, management, indexManagement, usageCollection }: RollupPluginSetupDependencies
   ) {
     setFatalErrors(core.fatalErrors);
     if (usageCollection) {
@@ -54,13 +46,6 @@ export class RollupPlugin implements Plugin {
       indexManagement.extensionsService.addToggle(rollupToggleExtension);
     }
 
-    const isRollupIndexPatternsEnabled = core.uiSettings.get(CONFIG_ROLLUPS);
-
-    if (isRollupIndexPatternsEnabled) {
-      indexPatternManagement.creation.addCreationConfig(RollupIndexPatternCreationConfig);
-      indexPatternManagement.list.addListConfig(RollupIndexPatternListConfig);
-    }
-
     if (home) {
       home.featureCatalogue.register({
         id: 'rollup_jobs',
diff --git a/x-pack/plugins/rollup/tsconfig.json b/x-pack/plugins/rollup/tsconfig.json
index 9b994d1710ffc2..6885081ce4bdd1 100644
--- a/x-pack/plugins/rollup/tsconfig.json
+++ b/x-pack/plugins/rollup/tsconfig.json
@@ -16,7 +16,6 @@
   "references": [
     { "path": "../../../src/core/tsconfig.json" },
     // required plugins
-    { "path": "../../../src/plugins/index_pattern_management/tsconfig.json" },
     { "path": "../../../src/plugins/management/tsconfig.json" },
     { "path": "../licensing/tsconfig.json" },
     { "path": "../features/tsconfig.json" },
diff --git a/x-pack/plugins/rule_registry/README.md b/x-pack/plugins/rule_registry/README.md
index e12c2b29ed3738..3fe6305a0d9f6e 100644
--- a/x-pack/plugins/rule_registry/README.md
+++ b/x-pack/plugins/rule_registry/README.md
@@ -111,9 +111,6 @@ const response = await ruleDataClient.getReader().search({
     },
     size: 100,
     fields: ['*'],
-    collapse: {
-      field: ALERT_UUID,
-    },
     sort: {
       '@timestamp': 'desc',
     },
diff --git a/x-pack/plugins/rule_registry/server/rule_data_client/create_rule_data_client_mock.ts b/x-pack/plugins/rule_registry/server/rule_data_client/create_rule_data_client_mock.ts
new file mode 100644
index 00000000000000..18f3c21fafc155
--- /dev/null
+++ b/x-pack/plugins/rule_registry/server/rule_data_client/create_rule_data_client_mock.ts
@@ -0,0 +1,42 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { Assign } from '@kbn/utility-types';
+import type { RuleDataClient } from '.';
+import { RuleDataReader, RuleDataWriter } from './types';
+
+type MockInstances<T extends Record<string, any>> = {
+  [K in keyof T]: T[K] extends (...args: infer TArgs) => infer TReturn
+    ? jest.MockInstance<TReturn, TArgs>
+    : never;
+};
+
+export function createRuleDataClientMock() {
+  const bulk = jest.fn();
+  const search = jest.fn();
+  const getDynamicIndexPattern = jest.fn();
+
+  return ({
+    createOrUpdateWriteTarget: jest.fn(({ namespace }) => Promise.resolve()),
+    getReader: jest.fn(() => ({
+      getDynamicIndexPattern,
+      search,
+    })),
+    getWriter: jest.fn(() => ({
+      bulk,
+    })),
+  } as unknown) as Assign<
+    RuleDataClient & Omit<MockInstances<RuleDataClient>, 'options' | 'getClusterClient'>,
+    {
+      getWriter: (
+        ...args: Parameters<RuleDataClient['getWriter']>
+      ) => MockInstances<RuleDataWriter>;
+      getReader: (
+        ...args: Parameters<RuleDataClient['getReader']>
+      ) => MockInstances<RuleDataReader>;
+    }
+  >;
+}
diff --git a/x-pack/plugins/rule_registry/server/rule_data_client/index.ts b/x-pack/plugins/rule_registry/server/rule_data_client/index.ts
index cd7467c903e52b..cb336580ca3540 100644
--- a/x-pack/plugins/rule_registry/server/rule_data_client/index.ts
+++ b/x-pack/plugins/rule_registry/server/rule_data_client/index.ts
@@ -4,6 +4,8 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+
+import { isEmpty } from 'lodash';
 import type { estypes } from '@elastic/elasticsearch';
 import { ResponseError } from '@elastic/elasticsearch/lib/errors';
 import { IndexPatternsFetcher } from '../../../../../src/plugins/data/server';
@@ -44,15 +46,26 @@ export class RuleDataClient implements IRuleDataClient {
         const clusterClient = await this.getClusterClient();
         const indexPatternsFetcher = new IndexPatternsFetcher(clusterClient);
 
-        const fields = await indexPatternsFetcher.getFieldsForWildcard({
-          pattern: index,
-        });
-
-        return {
-          fields,
-          timeFieldName: '@timestamp',
-          title: index,
-        };
+        try {
+          const fields = await indexPatternsFetcher.getFieldsForWildcard({
+            pattern: index,
+          });
+
+          return {
+            fields,
+            timeFieldName: '@timestamp',
+            title: index,
+          };
+        } catch (err) {
+          if (err.output?.payload?.code === 'no_matching_indices') {
+            return {
+              fields: [],
+              timeFieldName: '@timestamp',
+              title: index,
+            };
+          }
+          throw err;
+        }
       },
     };
   }
@@ -127,6 +140,12 @@ export class RuleDataClient implements IRuleDataClient {
 
     const mappings: estypes.MappingTypeMapping = simulateResponse.template.mappings;
 
+    if (isEmpty(mappings)) {
+      throw new Error(
+        'No mappings would be generated for this index, possibly due to failed/misconfigured bootstrapping'
+      );
+    }
+
     await clusterClient.indices.putMapping({ index: `${alias}*`, body: mappings });
   }
 }
diff --git a/x-pack/plugins/rule_registry/server/utils/create_lifecycle_rule_type.test.ts b/x-pack/plugins/rule_registry/server/utils/create_lifecycle_rule_type.test.ts
new file mode 100644
index 00000000000000..85e69eb51fd02f
--- /dev/null
+++ b/x-pack/plugins/rule_registry/server/utils/create_lifecycle_rule_type.test.ts
@@ -0,0 +1,381 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { schema } from '@kbn/config-schema';
+import { loggerMock } from '@kbn/logging/target/mocks';
+import { castArray, omit, mapValues } from 'lodash';
+import { RuleDataClient } from '../rule_data_client';
+import { createRuleDataClientMock } from '../rule_data_client/create_rule_data_client_mock';
+import { createLifecycleRuleTypeFactory } from './create_lifecycle_rule_type_factory';
+
+type RuleTestHelpers = ReturnType<typeof createRule>;
+
+function createRule() {
+  const ruleDataClientMock = createRuleDataClientMock();
+
+  const factory = createLifecycleRuleTypeFactory({
+    ruleDataClient: (ruleDataClientMock as unknown) as RuleDataClient,
+    logger: loggerMock.create(),
+  });
+
+  let nextAlerts: Array<{ id: string; fields: Record<string, any> }> = [];
+
+  const type = factory({
+    actionGroups: [
+      {
+        id: 'warning',
+        name: 'warning',
+      },
+    ],
+    defaultActionGroupId: 'warning',
+    executor: async ({ services }) => {
+      nextAlerts.forEach((alert) => {
+        services.alertWithLifecycle(alert);
+      });
+      nextAlerts = [];
+    },
+    id: 'test_type',
+    minimumLicenseRequired: 'basic',
+    name: 'Test type',
+    producer: 'test',
+    actionVariables: {
+      context: [],
+      params: [],
+      state: [],
+    },
+    validate: {
+      params: schema.object({}, { unknowns: 'allow' }),
+    },
+  });
+
+  let state: Record<string, any> = {};
+  let previousStartedAt: Date | null;
+  const createdAt = new Date('2021-06-16T09:00:00.000Z');
+
+  const scheduleActions = jest.fn();
+
+  const alertInstanceFactory = () => {
+    return {
+      scheduleActions,
+    } as any;
+  };
+
+  return {
+    alertWithLifecycle: async (alerts: Array<{ id: string; fields: Record<string, any> }>) => {
+      nextAlerts = alerts;
+
+      const startedAt = new Date((previousStartedAt ?? createdAt).getTime() + 60000);
+
+      scheduleActions.mockClear();
+
+      state = await type.executor({
+        alertId: 'alertId',
+        createdBy: 'createdBy',
+        name: 'name',
+        params: {},
+        previousStartedAt,
+        startedAt,
+        rule: {
+          actions: [],
+          consumer: 'consumer',
+          createdAt,
+          createdBy: 'createdBy',
+          enabled: true,
+          name: 'name',
+          notifyWhen: 'onActionGroupChange',
+          producer: 'producer',
+          ruleTypeId: 'ruleTypeId',
+          ruleTypeName: 'ruleTypeName',
+          schedule: {
+            interval: '1m',
+          },
+          tags: ['tags'],
+          throttle: null,
+          updatedAt: createdAt,
+          updatedBy: 'updatedBy',
+        },
+        services: {
+          alertInstanceFactory,
+          savedObjectsClient: {} as any,
+          scopedClusterClient: {} as any,
+        },
+        spaceId: 'spaceId',
+        state,
+        tags: ['tags'],
+        updatedBy: 'updatedBy',
+        namespace: 'namespace',
+      });
+
+      previousStartedAt = startedAt;
+    },
+    scheduleActions,
+    ruleDataClientMock,
+  };
+}
+
+describe('createLifecycleRuleTypeFactory', () => {
+  describe('with a new rule', () => {
+    let helpers: RuleTestHelpers;
+
+    beforeEach(() => {
+      helpers = createRule();
+    });
+
+    describe('when alerts are new', () => {
+      beforeEach(async () => {
+        await helpers.alertWithLifecycle([
+          {
+            id: 'opbeans-java',
+            fields: {
+              'service.name': 'opbeans-java',
+            },
+          },
+          {
+            id: 'opbeans-node',
+            fields: {
+              'service.name': 'opbeans-node',
+            },
+          },
+        ]);
+      });
+
+      it('writes the correct alerts', () => {
+        expect(helpers.ruleDataClientMock.getWriter().bulk).toHaveBeenCalledTimes(1);
+
+        const body = helpers.ruleDataClientMock.getWriter().bulk.mock.calls[0][0].body!;
+
+        const documents = body.filter((op: any) => !('index' in op)) as any[];
+
+        const evaluationDocuments = documents.filter((doc) => doc['event.kind'] === 'event');
+        const alertDocuments = documents.filter((doc) => doc['event.kind'] === 'signal');
+
+        expect(evaluationDocuments.length).toBe(2);
+        expect(alertDocuments.length).toBe(2);
+
+        expect(
+          alertDocuments.every((doc) => doc['kibana.rac.alert.status'] === 'open')
+        ).toBeTruthy();
+
+        expect(
+          alertDocuments.every((doc) => doc['kibana.rac.alert.duration.us'] === 0)
+        ).toBeTruthy();
+
+        expect(alertDocuments.every((doc) => doc['event.action'] === 'open')).toBeTruthy();
+
+        expect(documents.map((doc) => omit(doc, 'kibana.rac.alert.uuid'))).toMatchInlineSnapshot(`
+          Array [
+            Object {
+              "@timestamp": "2021-06-16T09:01:00.000Z",
+              "event.action": "open",
+              "event.kind": "event",
+              "kibana.rac.alert.duration.us": 0,
+              "kibana.rac.alert.id": "opbeans-java",
+              "kibana.rac.alert.producer": "test",
+              "kibana.rac.alert.start": "2021-06-16T09:01:00.000Z",
+              "kibana.rac.alert.status": "open",
+              "rule.category": "Test type",
+              "rule.id": "test_type",
+              "rule.name": "name",
+              "rule.uuid": "alertId",
+              "service.name": "opbeans-java",
+              "tags": Array [
+                "tags",
+              ],
+            },
+            Object {
+              "@timestamp": "2021-06-16T09:01:00.000Z",
+              "event.action": "open",
+              "event.kind": "event",
+              "kibana.rac.alert.duration.us": 0,
+              "kibana.rac.alert.id": "opbeans-node",
+              "kibana.rac.alert.producer": "test",
+              "kibana.rac.alert.start": "2021-06-16T09:01:00.000Z",
+              "kibana.rac.alert.status": "open",
+              "rule.category": "Test type",
+              "rule.id": "test_type",
+              "rule.name": "name",
+              "rule.uuid": "alertId",
+              "service.name": "opbeans-node",
+              "tags": Array [
+                "tags",
+              ],
+            },
+            Object {
+              "@timestamp": "2021-06-16T09:01:00.000Z",
+              "event.action": "open",
+              "event.kind": "signal",
+              "kibana.rac.alert.duration.us": 0,
+              "kibana.rac.alert.id": "opbeans-java",
+              "kibana.rac.alert.producer": "test",
+              "kibana.rac.alert.start": "2021-06-16T09:01:00.000Z",
+              "kibana.rac.alert.status": "open",
+              "rule.category": "Test type",
+              "rule.id": "test_type",
+              "rule.name": "name",
+              "rule.uuid": "alertId",
+              "service.name": "opbeans-java",
+              "tags": Array [
+                "tags",
+              ],
+            },
+            Object {
+              "@timestamp": "2021-06-16T09:01:00.000Z",
+              "event.action": "open",
+              "event.kind": "signal",
+              "kibana.rac.alert.duration.us": 0,
+              "kibana.rac.alert.id": "opbeans-node",
+              "kibana.rac.alert.producer": "test",
+              "kibana.rac.alert.start": "2021-06-16T09:01:00.000Z",
+              "kibana.rac.alert.status": "open",
+              "rule.category": "Test type",
+              "rule.id": "test_type",
+              "rule.name": "name",
+              "rule.uuid": "alertId",
+              "service.name": "opbeans-node",
+              "tags": Array [
+                "tags",
+              ],
+            },
+          ]
+        `);
+      });
+    });
+
+    describe('when alerts are active', () => {
+      beforeEach(async () => {
+        await helpers.alertWithLifecycle([
+          {
+            id: 'opbeans-java',
+            fields: {
+              'service.name': 'opbeans-java',
+            },
+          },
+          {
+            id: 'opbeans-node',
+            fields: {
+              'service.name': 'opbeans-node',
+            },
+          },
+        ]);
+
+        await helpers.alertWithLifecycle([
+          {
+            id: 'opbeans-java',
+            fields: {
+              'service.name': 'opbeans-java',
+            },
+          },
+          {
+            id: 'opbeans-node',
+            fields: {
+              'service.name': 'opbeans-node',
+            },
+          },
+        ]);
+      });
+
+      it('writes the correct alerts', () => {
+        expect(helpers.ruleDataClientMock.getWriter().bulk).toHaveBeenCalledTimes(2);
+
+        const body = helpers.ruleDataClientMock.getWriter().bulk.mock.calls[1][0].body!;
+
+        const documents = body.filter((op: any) => !('index' in op)) as any[];
+
+        const evaluationDocuments = documents.filter((doc) => doc['event.kind'] === 'event');
+        const alertDocuments = documents.filter((doc) => doc['event.kind'] === 'signal');
+
+        expect(evaluationDocuments.length).toBe(2);
+        expect(alertDocuments.length).toBe(2);
+
+        expect(
+          alertDocuments.every((doc) => doc['kibana.rac.alert.status'] === 'open')
+        ).toBeTruthy();
+        expect(alertDocuments.every((doc) => doc['event.action'] === 'active')).toBeTruthy();
+
+        expect(alertDocuments.every((doc) => doc['kibana.rac.alert.duration.us'] > 0)).toBeTruthy();
+      });
+    });
+
+    describe('when alerts recover', () => {
+      beforeEach(async () => {
+        await helpers.alertWithLifecycle([
+          {
+            id: 'opbeans-java',
+            fields: {
+              'service.name': 'opbeans-java',
+            },
+          },
+          {
+            id: 'opbeans-node',
+            fields: {
+              'service.name': 'opbeans-node',
+            },
+          },
+        ]);
+
+        const lastOpbeansNodeDoc = helpers.ruleDataClientMock
+          .getWriter()
+          .bulk.mock.calls[0][0].body?.concat()
+          .reverse()
+          .find(
+            (doc: any) => !('index' in doc) && doc['service.name'] === 'opbeans-node'
+          ) as Record<string, any>;
+
+        const stored = mapValues(lastOpbeansNodeDoc, (val) => {
+          return castArray(val);
+        });
+
+        helpers.ruleDataClientMock.getReader().search.mockResolvedValueOnce({
+          hits: {
+            hits: [{ fields: stored } as any],
+            total: {
+              value: 1,
+              relation: 'eq',
+            },
+          },
+          took: 0,
+          timed_out: false,
+          _shards: {
+            failed: 0,
+            successful: 1,
+            total: 1,
+          },
+        });
+
+        await helpers.alertWithLifecycle([
+          {
+            id: 'opbeans-java',
+            fields: {
+              'service.name': 'opbeans-java',
+            },
+          },
+        ]);
+      });
+
+      it('writes the correct alerts', () => {
+        expect(helpers.ruleDataClientMock.getWriter().bulk).toHaveBeenCalledTimes(2);
+
+        const body = helpers.ruleDataClientMock.getWriter().bulk.mock.calls[1][0].body!;
+
+        const documents = body.filter((op: any) => !('index' in op)) as any[];
+
+        const opbeansJavaAlertDoc = documents.find(
+          (doc) => castArray(doc['service.name'])[0] === 'opbeans-java'
+        );
+        const opbeansNodeAlertDoc = documents.find(
+          (doc) => castArray(doc['service.name'])[0] === 'opbeans-node'
+        );
+
+        expect(opbeansJavaAlertDoc['event.action']).toBe('active');
+        expect(opbeansJavaAlertDoc['kibana.rac.alert.status']).toBe('open');
+
+        expect(opbeansNodeAlertDoc['event.action']).toBe('close');
+        expect(opbeansNodeAlertDoc['kibana.rac.alert.status']).toBe('closed');
+      });
+    });
+  });
+});
diff --git a/x-pack/plugins/rule_registry/server/utils/create_lifecycle_rule_type_factory.ts b/x-pack/plugins/rule_registry/server/utils/create_lifecycle_rule_type_factory.ts
index b523dd6770b9f3..c2e0ae7c151ca0 100644
--- a/x-pack/plugins/rule_registry/server/utils/create_lifecycle_rule_type_factory.ts
+++ b/x-pack/plugins/rule_registry/server/utils/create_lifecycle_rule_type_factory.ts
@@ -32,7 +32,7 @@ import { AlertTypeWithExecutor } from '../types';
 import { ParsedTechnicalFields, parseTechnicalFields } from '../../common/parse_technical_fields';
 import { getRuleExecutorData } from './get_rule_executor_data';
 
-type LifecycleAlertService<TAlertInstanceContext extends Record<string, unknown>> = (alert: {
+export type LifecycleAlertService<TAlertInstanceContext extends Record<string, unknown>> = (alert: {
   id: string;
   fields: Record<string, unknown>;
 }) => AlertInstance<AlertInstanceState, TAlertInstanceContext, string>;
@@ -179,7 +179,7 @@ export const createLifecycleRuleTypeFactory: CreateLifecycleRuleTypeFactory = ({
           ...alertData,
           ...ruleExecutorData,
           [TIMESTAMP]: timestamp,
-          [EVENT_KIND]: 'state',
+          [EVENT_KIND]: 'event',
           [ALERT_ID]: alertId,
         };
 
@@ -221,8 +221,29 @@ export const createLifecycleRuleTypeFactory: CreateLifecycleRuleTypeFactory = ({
       });
 
       if (eventsToIndex.length) {
+        const alertEvents: Map<string, ParsedTechnicalFields> = new Map();
+
+        for (const event of eventsToIndex) {
+          const uuid = event[ALERT_UUID]!;
+          let storedEvent = alertEvents.get(uuid);
+          if (!storedEvent) {
+            storedEvent = event;
+          }
+          alertEvents.set(uuid, {
+            ...storedEvent,
+            [EVENT_KIND]: 'signal',
+          });
+        }
+
         await ruleDataClient.getWriter().bulk({
-          body: eventsToIndex.flatMap((event) => [{ index: {} }, event]),
+          body: eventsToIndex
+            .flatMap((event) => [{ index: {} }, event])
+            .concat(
+              Array.from(alertEvents.values()).flatMap((event) => [
+                { index: { _id: event[ALERT_UUID]! } },
+                event,
+              ])
+            ),
         });
       }
 
@@ -238,7 +259,7 @@ export const createLifecycleRuleTypeFactory: CreateLifecycleRuleTypeFactory = ({
       );
 
       return {
-        wrapped: nextWrappedState,
+        wrapped: nextWrappedState ?? {},
         trackedAlerts: nextTrackedAlerts,
       };
     },
diff --git a/x-pack/plugins/security_solution/common/endpoint/data_generators/base_data_generator.ts b/x-pack/plugins/security_solution/common/endpoint/data_generators/base_data_generator.ts
index 35c976fbdfb1d1..1f3d4307197f8a 100644
--- a/x-pack/plugins/security_solution/common/endpoint/data_generators/base_data_generator.ts
+++ b/x-pack/plugins/security_solution/common/endpoint/data_generators/base_data_generator.ts
@@ -48,9 +48,14 @@ export class BaseDataGenerator<GeneratedDoc extends {} = {}> {
     return new Date(now - this.randomChoice(DAY_OFFSETS)).toISOString();
   }
 
-  /** Generate either `true` or `false` */
-  protected randomBoolean(): boolean {
-    return this.random() < 0.5;
+  /**
+   * Generate either `true` or `false`. By default, the boolean is calculated by determining if a
+   * float is less than `0.5`, but that can be adjusted via the input argument
+   *
+   * @param isLessThan
+   */
+  protected randomBoolean(isLessThan: number = 0.5): boolean {
+    return this.random() < isLessThan;
   }
 
   /** generate random OS family value */
diff --git a/x-pack/plugins/security_solution/common/endpoint/data_generators/fleet_action_generator.ts b/x-pack/plugins/security_solution/common/endpoint/data_generators/fleet_action_generator.ts
index af799de782f48c..6cc5ab7f084476 100644
--- a/x-pack/plugins/security_solution/common/endpoint/data_generators/fleet_action_generator.ts
+++ b/x-pack/plugins/security_solution/common/endpoint/data_generators/fleet_action_generator.ts
@@ -13,7 +13,7 @@ import { EndpointAction, EndpointActionResponse, ISOLATION_ACTIONS } from '../ty
 const ISOLATION_COMMANDS: ISOLATION_ACTIONS[] = ['isolate', 'unisolate'];
 
 export class FleetActionGenerator extends BaseDataGenerator {
-  /** Generate an Action */
+  /** Generate a random endpoint Action (isolate or unisolate) */
   generate(overrides: DeepPartial<EndpointAction> = {}): EndpointAction {
     const timeStamp = new Date(this.randomPastDate());
 
@@ -35,6 +35,14 @@ export class FleetActionGenerator extends BaseDataGenerator {
     );
   }
 
+  generateIsolateAction(overrides: DeepPartial<EndpointAction> = {}): EndpointAction {
+    return merge(this.generate({ data: { command: 'isolate' } }), overrides);
+  }
+
+  generateUnIsolateAction(overrides: DeepPartial<EndpointAction> = {}): EndpointAction {
+    return merge(this.generate({ data: { command: 'unisolate' } }), overrides);
+  }
+
   /** Generates an action response */
   generateResponse(overrides: DeepPartial<EndpointActionResponse> = {}): EndpointActionResponse {
     const timeStamp = new Date();
@@ -56,6 +64,14 @@ export class FleetActionGenerator extends BaseDataGenerator {
     );
   }
 
+  randomFloat(): number {
+    return this.random();
+  }
+
+  randomN(max: number): number {
+    return super.randomN(max);
+  }
+
   protected randomIsolateCommand() {
     return this.randomChoice(ISOLATION_COMMANDS);
   }
diff --git a/x-pack/plugins/security_solution/common/endpoint/generate_data.ts b/x-pack/plugins/security_solution/common/endpoint/generate_data.ts
index 7e03d9b61fc10e..b08d5649540db7 100644
--- a/x-pack/plugins/security_solution/common/endpoint/generate_data.ts
+++ b/x-pack/plugins/security_solution/common/endpoint/generate_data.ts
@@ -422,6 +422,14 @@ export class EndpointDocGenerator extends BaseDataGenerator {
     this.commonInfo.Endpoint.policy.applied.status = this.randomChoice(POLICY_RESPONSE_STATUSES);
   }
 
+  /**
+   * Update the common host metadata - essentially creating an entire new endpoint metadata record
+   * when the `.generateHostMetadata()` is subsequently called
+   */
+  public updateCommonInfo() {
+    this.commonInfo = this.createHostData();
+  }
+
   /**
    * Parses an index and returns the data stream fields extracted from the index.
    *
@@ -439,7 +447,7 @@ export class EndpointDocGenerator extends BaseDataGenerator {
 
   private createHostData(): HostInfo {
     const hostName = this.randomHostname();
-    const isIsolated = this.randomBoolean();
+    const isIsolated = this.randomBoolean(0.3);
 
     return {
       agent: {
diff --git a/x-pack/plugins/security_solution/common/endpoint/index_data.ts b/x-pack/plugins/security_solution/common/endpoint/index_data.ts
index 4996d90288ca9a..959db0d964aaec 100644
--- a/x-pack/plugins/security_solution/common/endpoint/index_data.ts
+++ b/x-pack/plugins/security_solution/common/endpoint/index_data.ts
@@ -13,6 +13,8 @@ import { AxiosResponse } from 'axios';
 import { EndpointDocGenerator, Event, TreeOptions } from './generate_data';
 import { firstNonNullValue } from './models/ecs_safety_helpers';
 import {
+  AGENT_ACTIONS_INDEX,
+  AGENT_ACTIONS_RESULTS_INDEX,
   AGENT_POLICY_API_ROUTES,
   CreateAgentPolicyRequest,
   CreateAgentPolicyResponse,
@@ -25,7 +27,7 @@ import {
   PACKAGE_POLICY_API_ROUTES,
 } from '../../../fleet/common';
 import { policyFactory as policyConfigFactory } from './models/policy_config';
-import { HostMetadata } from './types';
+import { EndpointAction, HostMetadata } from './types';
 import { KbnClientWithApiKeySupport } from '../../scripts/endpoint/kbn_client_with_api_key_support';
 import { FleetAgentGenerator } from './data_generators/fleet_agent_generator';
 import { FleetActionGenerator } from './data_generators/fleet_action_generator';
@@ -409,36 +411,97 @@ const indexFleetActionsForHost = async (
 ): Promise<void> => {
   const ES_INDEX_OPTIONS = { headers: { 'X-elastic-product-origin': 'fleet' } };
   const agentId = endpointHost.elastic.agent.id;
+  const total = fleetActionGenerator.randomN(5);
 
-  for (let i = 0; i < 5; i++) {
+  for (let i = 0; i < total; i++) {
     // create an action
-    const isolateAction = fleetActionGenerator.generate({
+    const action = fleetActionGenerator.generate({
       data: { comment: 'data generator: this host is bad' },
     });
 
-    isolateAction.agents = [agentId];
+    action.agents = [agentId];
 
     await esClient.index(
       {
-        index: '.fleet-actions',
-        body: isolateAction,
+        index: AGENT_ACTIONS_INDEX,
+        body: action,
       },
       ES_INDEX_OPTIONS
     );
 
     // Create an action response for the above
-    const unIsolateAction = fleetActionGenerator.generateResponse({
-      action_id: isolateAction.action_id,
+    const actionResponse = fleetActionGenerator.generateResponse({
+      action_id: action.action_id,
       agent_id: agentId,
-      action_data: isolateAction.data,
+      action_data: action.data,
     });
 
     await esClient.index(
       {
-        index: '.fleet-actions-results',
-        body: unIsolateAction,
+        index: AGENT_ACTIONS_RESULTS_INDEX,
+        body: actionResponse,
       },
       ES_INDEX_OPTIONS
     );
   }
+
+  // Add edge cases (maybe)
+  if (fleetActionGenerator.randomFloat() < 0.3) {
+    const randomFloat = fleetActionGenerator.randomFloat();
+
+    // 60% of the time just add either an Isoalte -OR- an UnIsolate action
+    if (randomFloat < 0.6) {
+      let action: EndpointAction;
+
+      if (randomFloat < 0.3) {
+        // add a pending isolation
+        action = fleetActionGenerator.generateIsolateAction({
+          '@timestamp': new Date().toISOString(),
+        });
+      } else {
+        // add a pending UN-isolation
+        action = fleetActionGenerator.generateUnIsolateAction({
+          '@timestamp': new Date().toISOString(),
+        });
+      }
+
+      action.agents = [agentId];
+
+      await esClient.index(
+        {
+          index: AGENT_ACTIONS_INDEX,
+          body: action,
+        },
+        ES_INDEX_OPTIONS
+      );
+    } else {
+      // Else (40% of the time) add a pending isolate AND pending un-isolate
+      const action1 = fleetActionGenerator.generateIsolateAction({
+        '@timestamp': new Date().toISOString(),
+      });
+      const action2 = fleetActionGenerator.generateUnIsolateAction({
+        '@timestamp': new Date().toISOString(),
+      });
+
+      action1.agents = [agentId];
+      action2.agents = [agentId];
+
+      await Promise.all([
+        esClient.index(
+          {
+            index: AGENT_ACTIONS_INDEX,
+            body: action1,
+          },
+          ES_INDEX_OPTIONS
+        ),
+        esClient.index(
+          {
+            index: AGENT_ACTIONS_INDEX,
+            body: action2,
+          },
+          ES_INDEX_OPTIONS
+        ),
+      ]);
+    }
+  }
 };
diff --git a/x-pack/plugins/security_solution/common/license/mocks.ts b/x-pack/plugins/security_solution/common/license/mocks.ts
new file mode 100644
index 00000000000000..f352932b446139
--- /dev/null
+++ b/x-pack/plugins/security_solution/common/license/mocks.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
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { LicenseService } from './license';
+
+export const createLicenseServiceMock = (): jest.Mocked<LicenseService> => {
+  return ({
+    start: jest.fn(),
+    stop: jest.fn(),
+    getLicenseInformation: jest.fn(),
+    getLicenseInformation$: jest.fn(),
+    isAtLeast: jest.fn(),
+    isGoldPlus: jest.fn().mockReturnValue(true),
+    isPlatinumPlus: jest.fn().mockReturnValue(true),
+    isEnterprise: jest.fn().mockReturnValue(true),
+  } as unknown) as jest.Mocked<LicenseService>;
+};
diff --git a/x-pack/plugins/security_solution/common/typed_json.ts b/x-pack/plugins/security_solution/common/typed_json.ts
index fb24b1dc0db5e3..8ce6907beb80bd 100644
--- a/x-pack/plugins/security_solution/common/typed_json.ts
+++ b/x-pack/plugins/security_solution/common/typed_json.ts
@@ -7,7 +7,7 @@
 
 import { DslQuery, Filter } from 'src/plugins/data/common';
 
-import { JsonObject } from '../../../../src/plugins/kibana_utils/common';
+import { JsonObject } from '@kbn/common-utils';
 
 export type ESQuery =
   | ESRangeQuery
diff --git a/x-pack/plugins/security_solution/public/common/components/endpoint/host_isolation/endpoint_host_isolation_status.test.tsx b/x-pack/plugins/security_solution/public/common/components/endpoint/host_isolation/endpoint_host_isolation_status.test.tsx
new file mode 100644
index 00000000000000..44405748b6373b
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/common/components/endpoint/host_isolation/endpoint_host_isolation_status.test.tsx
@@ -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
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import {
+  EndpointHostIsolationStatus,
+  EndpointHostIsolationStatusProps,
+} from './endpoint_host_isolation_status';
+import { AppContextTestRender, createAppRootMockRenderer } from '../../../mock/endpoint';
+
+describe('when using the EndpointHostIsolationStatus component', () => {
+  let render: (
+    renderProps?: Partial<EndpointHostIsolationStatusProps>
+  ) => ReturnType<AppContextTestRender['render']>;
+
+  beforeEach(() => {
+    const appContext = createAppRootMockRenderer();
+    render = (renderProps = {}) =>
+      appContext.render(
+        <EndpointHostIsolationStatus
+          {...{
+            'data-test-subj': 'test',
+            isIsolated: false,
+            pendingUnIsolate: 0,
+            pendingIsolate: 0,
+            ...renderProps,
+          }}
+        />
+      );
+  });
+
+  it('should render `null` if not isolated and nothing is pending', () => {
+    const renderResult = render();
+    expect(renderResult.container.textContent).toBe('');
+  });
+
+  it('should show `Isolated` when no pending actions and isolated', () => {
+    const { getByTestId } = render({ isIsolated: true });
+    expect(getByTestId('test').textContent).toBe('Isolated');
+  });
+
+  it.each([
+    ['Isolating pending', { pendingIsolate: 2 }],
+    ['Unisolating pending', { pendingUnIsolate: 2 }],
+    ['4 actions pending', { isIsolated: true, pendingUnIsolate: 2, pendingIsolate: 2 }],
+  ])('should show %s}', (expectedLabel, componentProps) => {
+    const { getByTestId } = render(componentProps);
+    expect(getByTestId('test').textContent).toBe(expectedLabel);
+    // Validate that the text color is set to `subdued`
+    expect(getByTestId('test-pending').classList.contains('euiTextColor--subdued')).toBe(true);
+  });
+});
diff --git a/x-pack/plugins/security_solution/public/common/components/endpoint/host_isolation/endpoint_host_isolation_status.tsx b/x-pack/plugins/security_solution/public/common/components/endpoint/host_isolation/endpoint_host_isolation_status.tsx
index 5cde22de697386..0fe3a8e4337cb2 100644
--- a/x-pack/plugins/security_solution/public/common/components/endpoint/host_isolation/endpoint_host_isolation_status.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/endpoint/host_isolation/endpoint_host_isolation_status.tsx
@@ -6,8 +6,9 @@
  */
 
 import React, { memo, useMemo } from 'react';
-import { EuiBadge, EuiTextColor } from '@elastic/eui';
+import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiTextColor, EuiToolTip } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { useTestIdGenerator } from '../../../../management/components/hooks/use_test_id_generator';
 
 export interface EndpointHostIsolationStatusProps {
   isIsolated: boolean;
@@ -15,6 +16,7 @@ export interface EndpointHostIsolationStatusProps {
   pendingIsolate?: number;
   /** the count of pending unisoalte actions */
   pendingUnIsolate?: number;
+  'data-test-subj'?: string;
 }
 
 /**
@@ -23,7 +25,9 @@ export interface EndpointHostIsolationStatusProps {
  * (`null` is returned)
  */
 export const EndpointHostIsolationStatus = memo<EndpointHostIsolationStatusProps>(
-  ({ isIsolated, pendingIsolate = 0, pendingUnIsolate = 0 }) => {
+  ({ isIsolated, pendingIsolate = 0, pendingUnIsolate = 0, 'data-test-subj': dataTestSubj }) => {
+    const getTestId = useTestIdGenerator(dataTestSubj);
+
     return useMemo(() => {
       // If nothing is pending and host is not currently isolated, then render nothing
       if (!isIsolated && !pendingIsolate && !pendingUnIsolate) {
@@ -33,7 +37,7 @@ export const EndpointHostIsolationStatus = memo<EndpointHostIsolationStatusProps
       // If nothing is pending, but host is isolated, then show isolation badge
       if (!pendingIsolate && !pendingUnIsolate) {
         return (
-          <EuiBadge color="hollow">
+          <EuiBadge color="hollow" data-test-subj={dataTestSubj}>
             <FormattedMessage
               id="xpack.securitySolution.endpoint.hostIsolationStatus.isolated"
               defaultMessage="Isolated"
@@ -43,15 +47,57 @@ export const EndpointHostIsolationStatus = memo<EndpointHostIsolationStatusProps
       }
 
       // If there are multiple types of pending isolation actions, then show count of actions with tooltip that displays breakdown
-      // TODO:PT implement edge case
-      // if () {
-      //
-      // }
+      if (pendingIsolate && pendingUnIsolate) {
+        return (
+          <EuiBadge color="hollow" data-test-subj={dataTestSubj}>
+            <EuiToolTip
+              display="block"
+              anchorClassName="eui-textTruncate"
+              content={
+                <div data-test-subj={getTestId('tooltipContent')}>
+                  <div>
+                    <FormattedMessage
+                      id="xpack.securitySolution.endpoint.hostIsolationStatus.tooltipPendingActions"
+                      defaultMessage="Pending actions:"
+                    />
+                  </div>
+                  <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween">
+                    <EuiFlexItem grow>
+                      <FormattedMessage
+                        id="xpack.securitySolution.endpoint.hostIsolationStatus.tooltipPendingIsolate"
+                        defaultMessage="Isolate"
+                      />
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false}>{pendingIsolate}</EuiFlexItem>
+                  </EuiFlexGroup>
+                  <EuiFlexGroup gutterSize="none">
+                    <EuiFlexItem grow>
+                      <FormattedMessage
+                        id="xpack.securitySolution.endpoint.hostIsolationStatus.tooltipPendingUnIsolate"
+                        defaultMessage="Unisolate"
+                      />
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false}>{pendingUnIsolate}</EuiFlexItem>
+                  </EuiFlexGroup>
+                </div>
+              }
+            >
+              <EuiTextColor color="subdued" data-test-subj={getTestId('pending')}>
+                <FormattedMessage
+                  id="xpack.securitySolution.endpoint.hostIsolationStatus.multiplePendingActions"
+                  defaultMessage="{count} actions pending"
+                  values={{ count: pendingIsolate + pendingUnIsolate }}
+                />
+              </EuiTextColor>
+            </EuiToolTip>
+          </EuiBadge>
+        );
+      }
 
       // Show 'pending [un]isolate' depending on what's pending
       return (
-        <EuiBadge color="hollow">
-          <EuiTextColor color="subdued">
+        <EuiBadge color="hollow" data-test-subj={dataTestSubj}>
+          <EuiTextColor color="subdued" data-test-subj={getTestId('pending')}>
             {pendingIsolate ? (
               <FormattedMessage
                 id="xpack.securitySolution.endpoint.hostIsolationStatus.isIsolating"
@@ -66,7 +112,7 @@ export const EndpointHostIsolationStatus = memo<EndpointHostIsolationStatusProps
           </EuiTextColor>
         </EuiBadge>
       );
-    }, [isIsolated, pendingIsolate, pendingUnIsolate]);
+    }, [dataTestSubj, getTestId, isIsolated, pendingIsolate, pendingUnIsolate]);
   }
 );
 
diff --git a/x-pack/plugins/security_solution/public/common/hooks/__mocks__/use_license.ts b/x-pack/plugins/security_solution/public/common/hooks/__mocks__/use_license.ts
new file mode 100644
index 00000000000000..2d34e4b22a14e9
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/common/hooks/__mocks__/use_license.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
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { createLicenseServiceMock } from '../../../../common/license/mocks';
+
+export const licenseService = createLicenseServiceMock();
+export const useLicense = () => licenseService;
diff --git a/x-pack/plugins/security_solution/public/common/lib/endpoint_pending_actions/endpoint_pending_actions.test.ts b/x-pack/plugins/security_solution/public/common/lib/endpoint_pending_actions/endpoint_pending_actions.test.ts
new file mode 100644
index 00000000000000..a90f9a3508cd81
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/common/lib/endpoint_pending_actions/endpoint_pending_actions.test.ts
@@ -0,0 +1,37 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { KibanaServices } from '../kibana';
+import { coreMock } from '../../../../../../../src/core/public/mocks';
+import { fetchPendingActionsByAgentId } from './endpoint_pending_actions';
+import { pendingActionsHttpMock, pendingActionsResponseMock } from './mocks';
+import { ACTION_STATUS_ROUTE } from '../../../../common/endpoint/constants';
+
+jest.mock('../kibana');
+
+describe('when using endpoint pending actions api service', () => {
+  let coreHttp: ReturnType<typeof coreMock.createStart>['http'];
+
+  beforeEach(() => {
+    const coreStartMock = coreMock.createStart();
+    coreHttp = coreStartMock.http;
+    pendingActionsHttpMock(coreHttp);
+    (KibanaServices.get as jest.Mock).mockReturnValue(coreStartMock);
+  });
+
+  it('should call the endpont pending action status API', async () => {
+    const agentIdList = ['111-111', '222-222'];
+    const response = await fetchPendingActionsByAgentId(agentIdList);
+
+    expect(response).toEqual(pendingActionsResponseMock());
+    expect(coreHttp.get).toHaveBeenCalledWith(ACTION_STATUS_ROUTE, {
+      query: {
+        agent_ids: agentIdList,
+      },
+    });
+  });
+});
diff --git a/x-pack/plugins/security_solution/public/common/lib/endpoint_pending_actions/mocks.ts b/x-pack/plugins/security_solution/public/common/lib/endpoint_pending_actions/mocks.ts
new file mode 100644
index 00000000000000..4c3822b07d88c2
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/common/lib/endpoint_pending_actions/mocks.ts
@@ -0,0 +1,63 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import {
+  PendingActionsRequestQuery,
+  PendingActionsResponse,
+} from '../../../../common/endpoint/types';
+import {
+  httpHandlerMockFactory,
+  ResponseProvidersInterface,
+} from '../../mock/endpoint/http_handler_mock_factory';
+import { ACTION_STATUS_ROUTE } from '../../../../common/endpoint/constants';
+
+export const pendingActionsResponseMock = (): PendingActionsResponse => ({
+  data: [
+    {
+      agent_id: '111-111',
+      pending_actions: {},
+    },
+    {
+      agent_id: '222-222',
+      pending_actions: {
+        isolate: 1,
+      },
+    },
+  ],
+});
+
+export type PendingActionsHttpMockInterface = ResponseProvidersInterface<{
+  pendingActions: () => PendingActionsResponse;
+}>;
+
+export const pendingActionsHttpMock = httpHandlerMockFactory<PendingActionsHttpMockInterface>([
+  {
+    id: 'pendingActions',
+    method: 'get',
+    path: ACTION_STATUS_ROUTE,
+    /** Will build a response based on the number of agent ids received. */
+    handler: (options) => {
+      const agentIds = (options.query as PendingActionsRequestQuery).agent_ids as string[];
+
+      if (agentIds.length) {
+        return {
+          data: agentIds.map((id, index) => ({
+            agent_id: id,
+            pending_actions:
+              index % 2 // index's of the array that are not divisible by 2 will will have `isolate: 1`
+                ? {
+                    isolate: 1,
+                  }
+                : {},
+          })),
+        };
+      }
+
+      return pendingActionsResponseMock();
+    },
+  },
+]);
diff --git a/x-pack/plugins/security_solution/public/common/lib/keury/index.ts b/x-pack/plugins/security_solution/public/common/lib/keury/index.ts
index bd026f486471f1..a71524f9e02a86 100644
--- a/x-pack/plugins/security_solution/public/common/lib/keury/index.ts
+++ b/x-pack/plugins/security_solution/public/common/lib/keury/index.ts
@@ -7,6 +7,7 @@
 
 import { isEmpty, isString, flow } from 'lodash/fp';
 
+import { JsonObject } from '@kbn/common-utils';
 import {
   EsQueryConfig,
   Query,
@@ -15,7 +16,6 @@ import {
   esKuery,
   IIndexPattern,
 } from '../../../../../../../src/plugins/data/public';
-import { JsonObject } from '../../../../../../../src/plugins/kibana_utils/public';
 
 export const convertKueryToElasticSearchQuery = (
   kueryExpression: string,
diff --git a/x-pack/plugins/security_solution/public/common/mock/endpoint/http_handler_mock_factory.ts b/x-pack/plugins/security_solution/public/common/mock/endpoint/http_handler_mock_factory.ts
index 2df16fc1e21b0a..dc93ea8168a3f6 100644
--- a/x-pack/plugins/security_solution/public/common/mock/endpoint/http_handler_mock_factory.ts
+++ b/x-pack/plugins/security_solution/public/common/mock/endpoint/http_handler_mock_factory.ts
@@ -7,12 +7,7 @@
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import type {
-  HttpFetchOptions,
-  HttpFetchOptionsWithPath,
-  HttpHandler,
-  HttpStart,
-} from 'kibana/public';
+import type { HttpFetchOptions, HttpFetchOptionsWithPath, HttpStart } from 'kibana/public';
 import { merge } from 'lodash';
 import { act } from '@testing-library/react';
 
@@ -102,7 +97,7 @@ interface RouteMock<R extends ResponseProvidersInterface = ResponseProvidersInte
    * The handler for providing a response to for this API call.
    * It should return the "raw" value, __NOT__ a `Promise`
    */
-  handler: (...args: Parameters<HttpHandler>) => any;
+  handler: (options: HttpFetchOptionsWithPath) => any;
   /**
    * A function that returns a promise. The API response will be delayed until this promise is
    * resolved. This can be helpful when wanting to test an intermediate UI state while the API
@@ -203,14 +198,25 @@ export const httpHandlerMockFactory = <R extends ResponseProvidersInterface = {}
         const routeMock = methodMocks.find((handler) => pathMatchesPattern(handler.path, path));
 
         if (routeMock) {
-          markApiCallAsHandled(responseProvider[routeMock.id].mockDelay);
-
-          await responseProvider[routeMock.id].mockDelay();
-
           // Use the handler defined for the HTTP Mocked interface (not the one passed on input to
           // the factory) for retrieving the response value because that one could have had its
           // response value manipulated by the individual test case.
-          return responseProvider[routeMock.id](...args);
+
+          markApiCallAsHandled(responseProvider[routeMock.id].mockDelay);
+          await responseProvider[routeMock.id].mockDelay();
+
+          const fetchOptions: HttpFetchOptionsWithPath = isHttpFetchOptionsWithPath(args[0])
+            ? args[0]
+            : {
+                // Ignore below is needed because the http service methods are defined via an overloaded interface.
+                // If the first argument is NOT fetch with options, then we know that its a string and `args` has
+                // a potential for being of `.length` 2.
+                // @ts-ignore
+                ...(args[1] || {}),
+                path: args[0],
+              };
+
+          return responseProvider[routeMock.id](fetchOptions);
         } else if (priorMockedFunction) {
           return priorMockedFunction(...args);
         }
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/mocks.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/mocks.ts
index 3a3ad47f9f5754..de05fa949b487e 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/mocks.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/mocks.ts
@@ -23,7 +23,16 @@ import {
   HOST_METADATA_GET_ROUTE,
   HOST_METADATA_LIST_ROUTE,
 } from '../../../../common/endpoint/constants';
-import { AGENT_POLICY_API_ROUTES, GetAgentPoliciesResponse } from '../../../../../fleet/common';
+import {
+  AGENT_POLICY_API_ROUTES,
+  EPM_API_ROUTES,
+  GetAgentPoliciesResponse,
+  GetPackagesResponse,
+} from '../../../../../fleet/common';
+import {
+  PendingActionsHttpMockInterface,
+  pendingActionsHttpMock,
+} from '../../../common/lib/endpoint_pending_actions/mocks';
 
 type EndpointMetadataHttpMocksInterface = ResponseProvidersInterface<{
   metadataList: () => HostResultList;
@@ -40,11 +49,15 @@ export const endpointMetadataHttpMocks = httpHandlerMockFactory<EndpointMetadata
 
         return {
           hosts: Array.from({ length: 10 }, () => {
-            return {
+            const endpoint = {
               metadata: generator.generateHostMetadata(),
               host_status: HostStatus.UNHEALTHY,
               query_strategy_version: MetadataQueryStrategyVersions.VERSION_2,
             };
+
+            generator.updateCommonInfo();
+
+            return endpoint;
           }),
           total: 10,
           request_page_size: 10,
@@ -88,6 +101,7 @@ export const endpointPolicyResponseHttpMock = httpHandlerMockFactory<EndpointPol
 
 type FleetApisHttpMockInterface = ResponseProvidersInterface<{
   agentPolicy: () => GetAgentPoliciesResponse;
+  packageList: () => GetPackagesResponse;
 }>;
 export const fleetApisHttpMock = httpHandlerMockFactory<FleetApisHttpMockInterface>([
   {
@@ -113,11 +127,24 @@ export const fleetApisHttpMock = httpHandlerMockFactory<FleetApisHttpMockInterfa
       };
     },
   },
+  {
+    id: 'packageList',
+    method: 'get',
+    path: EPM_API_ROUTES.LIST_PATTERN,
+    handler() {
+      const generator = new EndpointDocGenerator('seed');
+
+      return {
+        response: [generator.generateEpmPackage()],
+      };
+    },
+  },
 ]);
 
 type EndpointPageHttpMockInterface = EndpointMetadataHttpMocksInterface &
   EndpointPolicyResponseHttpMockInterface &
-  FleetApisHttpMockInterface;
+  FleetApisHttpMockInterface &
+  PendingActionsHttpMockInterface;
 /**
  * HTTP Mocks that support the Endpoint List and Details page
  */
@@ -125,4 +152,5 @@ export const endpointPageHttpMock = composeHttpHandlerMocks<EndpointPageHttpMock
   endpointMetadataHttpMocks,
   endpointPolicyResponseHttpMock,
   fleetApisHttpMock,
+  pendingActionsHttpMock,
 ]);
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/action.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/action.ts
index a8885b904d9c8d..5b5bac3a0a6e19 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/action.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/action.ts
@@ -159,6 +159,10 @@ export type EndpointDetailsActivityLogChanged = Action<'endpointDetailsActivityL
   payload: EndpointState['endpointDetails']['activityLog']['logData'];
 };
 
+export type EndpointPendingActionsStateChanged = Action<'endpointPendingActionsStateChanged'> & {
+  payload: EndpointState['endpointPendingActions'];
+};
+
 export type EndpointAction =
   | ServerReturnedEndpointList
   | ServerFailedToReturnEndpointList
@@ -186,4 +190,5 @@ export type EndpointAction =
   | ServerFailedToReturnAgenstWithEndpointsTotal
   | ServerFailedToReturnEndpointsTotal
   | EndpointIsolationRequest
-  | EndpointIsolationRequestStateChange;
+  | EndpointIsolationRequestStateChange
+  | EndpointPendingActionsStateChanged;
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/builders.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/builders.ts
index 273b4279851fd3..d43f361a0e6bb8 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/builders.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/builders.ts
@@ -7,7 +7,7 @@
 
 import { Immutable } from '../../../../../common/endpoint/types';
 import { DEFAULT_POLL_INTERVAL } from '../../../common/constants';
-import { createUninitialisedResourceState } from '../../../state';
+import { createLoadedResourceState, createUninitialisedResourceState } from '../../../state';
 import { EndpointState } from '../types';
 
 export const initialEndpointPageState = (): Immutable<EndpointState> => {
@@ -53,5 +53,6 @@ export const initialEndpointPageState = (): Immutable<EndpointState> => {
     policyVersionInfo: undefined,
     hostStatus: undefined,
     isolationRequestState: createUninitialisedResourceState(),
+    endpointPendingActions: createLoadedResourceState(new Map()),
   };
 };
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/index.test.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/index.test.ts
index 455c6538bcdf26..7f7c5f84f8bffd 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/index.test.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/index.test.ts
@@ -77,6 +77,10 @@ describe('EndpointList store concerns', () => {
         isolationRequestState: {
           type: 'UninitialisedResourceState',
         },
+        endpointPendingActions: {
+          data: new Map(),
+          type: 'LoadedResourceState',
+        },
       });
     });
 
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/middleware.test.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/middleware.test.ts
index 130f8a56fd0267..52da30fabf95a1 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/middleware.test.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/middleware.test.ts
@@ -43,6 +43,7 @@ import {
   hostIsolationResponseMock,
 } from '../../../../common/lib/endpoint_isolation/mocks';
 import { FleetActionGenerator } from '../../../../../common/endpoint/data_generators/fleet_action_generator';
+import { endpointPageHttpMock } from '../mocks';
 
 jest.mock('../../policy/store/services/ingest', () => ({
   sendGetAgentConfigList: () => Promise.resolve({ items: [] }),
@@ -55,6 +56,7 @@ jest.mock('../../../../common/lib/kibana');
 type EndpointListStore = Store<Immutable<EndpointState>, Immutable<AppAction>>;
 
 describe('endpoint list middleware', () => {
+  const getKibanaServicesMock = KibanaServices.get as jest.Mock;
   let fakeCoreStart: jest.Mocked<CoreStart>;
   let depsStart: DepsStartMock;
   let fakeHttpServices: jest.Mocked<HttpSetup>;
@@ -69,6 +71,17 @@ describe('endpoint list middleware', () => {
     return mockEndpointResultList({ request_page_size: 1, request_page_index: 1, total: 10 });
   };
 
+  const dispatchUserChangedUrlToEndpointList = (locationOverrides: Partial<Location> = {}) => {
+    dispatch({
+      type: 'userChangedUrl',
+      payload: {
+        ...history.location,
+        pathname: getEndpointListPath({ name: 'endpointList' }),
+        ...locationOverrides,
+      },
+    });
+  };
+
   beforeEach(() => {
     fakeCoreStart = coreMock.createStart({ basePath: '/mock' });
     depsStart = depsStartMock();
@@ -81,6 +94,7 @@ describe('endpoint list middleware', () => {
     getState = store.getState;
     dispatch = store.dispatch;
     history = createBrowserHistory();
+    getKibanaServicesMock.mockReturnValue(fakeCoreStart);
   });
 
   it('handles `userChangedUrl`', async () => {
@@ -88,13 +102,7 @@ describe('endpoint list middleware', () => {
     fakeHttpServices.post.mockResolvedValue(apiResponse);
     expect(fakeHttpServices.post).not.toHaveBeenCalled();
 
-    dispatch({
-      type: 'userChangedUrl',
-      payload: {
-        ...history.location,
-        pathname: getEndpointListPath({ name: 'endpointList' }),
-      },
-    });
+    dispatchUserChangedUrlToEndpointList();
     await waitForAction('serverReturnedEndpointList');
     expect(fakeHttpServices.post).toHaveBeenCalledWith('/api/endpoint/metadata', {
       body: JSON.stringify({
@@ -111,13 +119,7 @@ describe('endpoint list middleware', () => {
     expect(fakeHttpServices.post).not.toHaveBeenCalled();
 
     // First change the URL
-    dispatch({
-      type: 'userChangedUrl',
-      payload: {
-        ...history.location,
-        pathname: getEndpointListPath({ name: 'endpointList' }),
-      },
-    });
+    dispatchUserChangedUrlToEndpointList();
     await waitForAction('serverReturnedEndpointList');
 
     // Then request the Endpoint List
@@ -135,7 +137,6 @@ describe('endpoint list middleware', () => {
   });
 
   describe('handling of IsolateEndpointHost action', () => {
-    const getKibanaServicesMock = KibanaServices.get as jest.Mock;
     const dispatchIsolateEndpointHost = (action: ISOLATION_ACTIONS = 'isolate') => {
       dispatch({
         type: 'endpointIsolationRequest',
@@ -149,7 +150,6 @@ describe('endpoint list middleware', () => {
 
     beforeEach(() => {
       isolateApiResponseHandlers = hostIsolationHttpMocks(fakeHttpServices);
-      getKibanaServicesMock.mockReturnValue(fakeCoreStart);
     });
 
     it('should set Isolation state to loading', async () => {
@@ -224,14 +224,7 @@ describe('endpoint list middleware', () => {
       selected_endpoint: endpointList.hosts[0].metadata.agent.id,
     });
     const dispatchUserChangedUrl = () => {
-      dispatch({
-        type: 'userChangedUrl',
-        payload: {
-          ...history.location,
-          pathname: '/endpoints',
-          search: `?${search.split('?').pop()}`,
-        },
-      });
+      dispatchUserChangedUrlToEndpointList({ search: `?${search.split('?').pop()}` });
     };
 
     const fleetActionGenerator = new FleetActionGenerator(Math.random().toString());
@@ -300,4 +293,39 @@ describe('endpoint list middleware', () => {
       expect(activityLogData).toEqual(getMockEndpointActivityLog());
     });
   });
+
+  describe('handle Endpoint Pending Actions state actions', () => {
+    let mockedApis: ReturnType<typeof endpointPageHttpMock>;
+
+    beforeEach(() => {
+      mockedApis = endpointPageHttpMock(fakeHttpServices);
+    });
+
+    it('should include all agents ids from the list when calling API', async () => {
+      const loadingPendingActions = waitForAction('endpointPendingActionsStateChanged', {
+        validate: (action) => isLoadedResourceState(action.payload),
+      });
+
+      dispatchUserChangedUrlToEndpointList();
+      await loadingPendingActions;
+
+      expect(mockedApis.responseProvider.pendingActions).toHaveBeenCalledWith({
+        path: expect.any(String),
+        query: {
+          agent_ids: [
+            '6db499e5-4927-4350-abb8-d8318e7d0eec',
+            'c082dda9-1847-4997-8eda-f1192d95bec3',
+            '8aa1cd61-cc25-4783-afb5-0eefc4919c07',
+            '47fe24c1-7370-419a-9732-3ff38bf41272',
+            '0d2b2fa7-a9cd-49fc-ad5f-0252c642290e',
+            'f480092d-0445-4bf3-9c96-8a3d5cb97824',
+            '3850e676-0940-4c4b-aaca-571bd1bc66d9',
+            '46efcc7a-086a-47a3-8f09-c4ecd6d2d917',
+            'afa55826-b81b-4440-a2ac-0644d77a3fc6',
+            '25b49e50-cb5c-43df-824f-67b8cf697d9d',
+          ],
+        },
+      });
+    });
+  });
 });
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/middleware.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/middleware.ts
index aa0afe5ec980a3..4f96223e8b7897 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/middleware.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/middleware.ts
@@ -34,8 +34,9 @@ import {
   getActivityLogData,
   getActivityLogDataPaging,
   getLastLoadedActivityLogData,
+  detailsData,
 } from './selectors';
-import { EndpointState, PolicyIds } from '../types';
+import { AgentIdsPendingActions, EndpointState, PolicyIds } from '../types';
 import {
   sendGetEndpointSpecificPackagePolicies,
   sendGetEndpointSecurityPackage,
@@ -59,9 +60,13 @@ import { isolateHost, unIsolateHost } from '../../../../common/lib/endpoint_isol
 import { AppAction } from '../../../../common/store/actions';
 import { resolvePathVariables } from '../../../../common/utils/resolve_path_variables';
 import { ServerReturnedEndpointPackageInfo } from './action';
+import { fetchPendingActionsByAgentId } from '../../../../common/lib/endpoint_pending_actions';
 
 type EndpointPageStore = ImmutableMiddlewareAPI<EndpointState, AppAction>;
 
+// eslint-disable-next-line no-console
+const logError = console.error;
+
 export const endpointMiddlewareFactory: ImmutableMiddlewareFactory<EndpointState> = (
   coreStart,
   depsStart
@@ -110,6 +115,8 @@ export const endpointMiddlewareFactory: ImmutableMiddlewareFactory<EndpointState
           payload: endpointResponse,
         });
 
+        loadEndpointsPendingActions(store);
+
         try {
           const endpointsTotalCount = await endpointsTotal(coreStart.http);
           dispatch({
@@ -156,8 +163,7 @@ export const endpointMiddlewareFactory: ImmutableMiddlewareFactory<EndpointState
           }
         } catch (error) {
           // Ignore Errors, since this should not hinder the user's ability to use the UI
-          // eslint-disable-next-line no-console
-          console.error(error);
+          logError(error);
         }
       } catch (error) {
         dispatch({
@@ -277,8 +283,7 @@ export const endpointMiddlewareFactory: ImmutableMiddlewareFactory<EndpointState
             }
           } catch (error) {
             // Ignore Errors, since this should not hinder the user's ability to use the UI
-            // eslint-disable-next-line no-console
-            console.error(error);
+            logError(error);
           }
         } catch (error) {
           dispatch({
@@ -323,8 +328,7 @@ export const endpointMiddlewareFactory: ImmutableMiddlewareFactory<EndpointState
           }
         } catch (error) {
           // Ignore Errors, since this should not hinder the user's ability to use the UI
-          // eslint-disable-next-line no-console
-          console.error(error);
+          logError(error);
         }
       } catch (error) {
         dispatch({
@@ -333,6 +337,8 @@ export const endpointMiddlewareFactory: ImmutableMiddlewareFactory<EndpointState
         });
       }
 
+      loadEndpointsPendingActions(store);
+
       // call the activity log api
       dispatch({
         type: 'endpointDetailsActivityLogChanged',
@@ -512,10 +518,8 @@ const endpointsTotal = async (http: HttpStart): Promise<number> => {
       })
     ).total;
   } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error(`error while trying to check for total endpoints`);
-    // eslint-disable-next-line no-console
-    console.error(error);
+    logError(`error while trying to check for total endpoints`);
+    logError(error);
   }
   return 0;
 };
@@ -524,10 +528,8 @@ const doEndpointsExist = async (http: HttpStart): Promise<boolean> => {
   try {
     return (await endpointsTotal(http)) > 0;
   } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error(`error while trying to check if endpoints exist`);
-    // eslint-disable-next-line no-console
-    console.error(error);
+    logError(`error while trying to check if endpoints exist`);
+    logError(error);
   }
   return false;
 };
@@ -586,7 +588,51 @@ async function getEndpointPackageInfo(
     });
   } catch (error) {
     // Ignore Errors, since this should not hinder the user's ability to use the UI
-    // eslint-disable-next-line no-console
-    console.error(error);
+    logError(error);
   }
 }
+
+/**
+ * retrieves the Endpoint pending actions for all of the existing endpoints being displayed on the list
+ * or the details tab.
+ *
+ * @param store
+ */
+const loadEndpointsPendingActions = async ({
+  getState,
+  dispatch,
+}: EndpointPageStore): Promise<void> => {
+  const state = getState();
+  const detailsEndpoint = detailsData(state);
+  const listEndpoints = listData(state);
+  const agentsIds = new Set<string>();
+
+  // get all agent ids for the endpoints in the list
+  if (detailsEndpoint) {
+    agentsIds.add(detailsEndpoint.elastic.agent.id);
+  }
+
+  for (const endpointInfo of listEndpoints) {
+    agentsIds.add(endpointInfo.metadata.elastic.agent.id);
+  }
+
+  if (agentsIds.size === 0) {
+    return;
+  }
+
+  try {
+    const { data: pendingActions } = await fetchPendingActionsByAgentId(Array.from(agentsIds));
+    const agentIdToPendingActions: AgentIdsPendingActions = new Map();
+
+    for (const pendingAction of pendingActions) {
+      agentIdToPendingActions.set(pendingAction.agent_id, pendingAction.pending_actions);
+    }
+
+    dispatch({
+      type: 'endpointPendingActionsStateChanged',
+      payload: createLoadedResourceState(agentIdToPendingActions),
+    });
+  } catch (error) {
+    logError(error);
+  }
+};
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/reducer.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/reducer.ts
index b580664512eb66..9460c27dfe705d 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/reducer.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/reducer.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EndpointDetailsActivityLogChanged } from './action';
+import { EndpointDetailsActivityLogChanged, EndpointPendingActionsStateChanged } from './action';
 import {
   isOnEndpointPage,
   hasSelectedEndpoint,
@@ -41,6 +41,19 @@ const handleEndpointDetailsActivityLogChanged: CaseReducer<EndpointDetailsActivi
   };
 };
 
+const handleEndpointPendingActionsStateChanged: CaseReducer<EndpointPendingActionsStateChanged> = (
+  state,
+  action
+) => {
+  if (isOnEndpointPage(state)) {
+    return {
+      ...state,
+      endpointPendingActions: action.payload,
+    };
+  }
+  return state;
+};
+
 /* eslint-disable-next-line complexity */
 export const endpointListReducer: StateReducer = (state = initialEndpointPageState(), action) => {
   if (action.type === 'serverReturnedEndpointList') {
@@ -141,6 +154,8 @@ export const endpointListReducer: StateReducer = (state = initialEndpointPageSta
     };
   } else if (action.type === 'endpointDetailsActivityLogChanged') {
     return handleEndpointDetailsActivityLogChanged(state, action);
+  } else if (action.type === 'endpointPendingActionsStateChanged') {
+    return handleEndpointPendingActionsStateChanged(state, action);
   } else if (action.type === 'serverReturnedPoliciesForOnboarding') {
     return {
       ...state,
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/selectors.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/selectors.ts
index 2b567d1ad53b58..d9be85377c81d7 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/selectors.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/selectors.ts
@@ -18,6 +18,7 @@ import {
   MetadataQueryStrategyVersions,
   HostStatus,
   ActivityLog,
+  HostMetadata,
 } from '../../../../../common/endpoint/types';
 import { EndpointState, EndpointIndexUIQueryParams } from '../types';
 import { extractListPaginationParams } from '../../../common/routing';
@@ -36,6 +37,7 @@ import {
 
 import { ServerApiError } from '../../../../common/types';
 import { isEndpointHostIsolated } from '../../../../common/utils/validators';
+import { EndpointHostIsolationStatusProps } from '../../../../common/components/endpoint/host_isolation';
 
 export const listData = (state: Immutable<EndpointState>) => state.hosts;
 
@@ -412,3 +414,40 @@ export const getActivityLogError: (
 export const getIsEndpointHostIsolated = createSelector(detailsData, (details) => {
   return (details && isEndpointHostIsolated(details)) || false;
 });
+
+export const getEndpointPendingActionsState = (
+  state: Immutable<EndpointState>
+): Immutable<EndpointState['endpointPendingActions']> => {
+  return state.endpointPendingActions;
+};
+
+/**
+ * Returns a function (callback) that can be used to retrieve the props for the `EndpointHostIsolationStatus`
+ * component for a given Endpoint
+ */
+export const getEndpointHostIsolationStatusPropsCallback: (
+  state: Immutable<EndpointState>
+) => (endpoint: HostMetadata) => EndpointHostIsolationStatusProps = createSelector(
+  getEndpointPendingActionsState,
+  (pendingActionsState) => {
+    return (endpoint: HostMetadata) => {
+      let pendingIsolate = 0;
+      let pendingUnIsolate = 0;
+
+      if (isLoadedResourceState(pendingActionsState)) {
+        const endpointPendingActions = pendingActionsState.data.get(endpoint.elastic.agent.id);
+
+        if (endpointPendingActions) {
+          pendingIsolate = endpointPendingActions?.isolate ?? 0;
+          pendingUnIsolate = endpointPendingActions?.unisolate ?? 0;
+        }
+      }
+
+      return {
+        isIsolated: isEndpointHostIsolated(endpoint),
+        pendingIsolate,
+        pendingUnIsolate,
+      };
+    };
+  }
+);
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/types.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/types.ts
index eed2182d41809d..59aa2bd15dd74a 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/types.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/types.ts
@@ -16,6 +16,7 @@ import {
   MetadataQueryStrategyVersions,
   HostStatus,
   HostIsolationResponse,
+  EndpointPendingActions,
 } from '../../../../common/endpoint/types';
 import { ServerApiError } from '../../../common/types';
 import { GetPackagesResponse } from '../../../../../fleet/common';
@@ -94,10 +95,18 @@ export interface EndpointState {
   policyVersionInfo?: HostInfo['policy_info'];
   /** The status of the host, which is mapped to the Elastic Agent status in Fleet */
   hostStatus?: HostStatus;
-  /* Host isolation state */
+  /** Host isolation request state for a single endpoint */
   isolationRequestState: AsyncResourceState<HostIsolationResponse>;
+  /**
+   * Holds a map of `agentId` to `EndpointPendingActions` that is used by both the list and details view
+   * Getting pending endpoint actions is "supplemental" data, so there is no need to show other Async
+   * states other than Loaded
+   */
+  endpointPendingActions: AsyncResourceState<AgentIdsPendingActions>;
 }
 
+export type AgentIdsPendingActions = Map<string, EndpointPendingActions['pending_actions']>;
+
 /**
  * packagePolicy contains a list of Package Policy IDs (received via Endpoint metadata policy response) mapped to a boolean whether they exist or not.
  * agentPolicy contains a list of existing Package Policy Ids mapped to an associated Fleet parent Agent Config.
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/components/endpoint_agent_status.test.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/components/endpoint_agent_status.test.tsx
new file mode 100644
index 00000000000000..9010bb5785c1d4
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/components/endpoint_agent_status.test.tsx
@@ -0,0 +1,90 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import {
+  AppContextTestRender,
+  createAppRootMockRenderer,
+} from '../../../../../common/mock/endpoint';
+import { endpointPageHttpMock } from '../../mocks';
+import { act } from '@testing-library/react';
+import { EndpointAgentStatus, EndpointAgentStatusProps } from './endpoint_agent_status';
+import { HostMetadata, HostStatus } from '../../../../../../common/endpoint/types';
+import { isLoadedResourceState } from '../../../../state';
+import { KibanaServices } from '../../../../../common/lib/kibana';
+
+jest.mock('../../../../../common/lib/kibana');
+
+describe('When using the EndpointAgentStatus component', () => {
+  let render: (
+    props: EndpointAgentStatusProps
+  ) => Promise<ReturnType<AppContextTestRender['render']>>;
+  let waitForAction: AppContextTestRender['middlewareSpy']['waitForAction'];
+  let renderResult: ReturnType<AppContextTestRender['render']>;
+  let httpMocks: ReturnType<typeof endpointPageHttpMock>;
+  let endpointMeta: HostMetadata;
+
+  beforeEach(() => {
+    const mockedContext = createAppRootMockRenderer();
+
+    (KibanaServices.get as jest.Mock).mockReturnValue(mockedContext.startServices);
+    httpMocks = endpointPageHttpMock(mockedContext.coreStart.http);
+    waitForAction = mockedContext.middlewareSpy.waitForAction;
+    endpointMeta = httpMocks.responseProvider.metadataList().hosts[0].metadata;
+    render = async (props: EndpointAgentStatusProps) => {
+      renderResult = mockedContext.render(<EndpointAgentStatus {...props} />);
+      return renderResult;
+    };
+
+    act(() => {
+      mockedContext.history.push('/endpoints');
+    });
+  });
+
+  it.each([
+    ['Healthy', 'healthy'],
+    ['Unhealthy', 'unhealthy'],
+    ['Updating', 'updating'],
+    ['Offline', 'offline'],
+    ['Inactive', 'inactive'],
+    ['Unhealthy', 'someUnknownValueHere'],
+  ])('should show agent status of %s', async (expectedLabel, hostStatus) => {
+    await render({ hostStatus: hostStatus as HostStatus, endpointMetadata: endpointMeta });
+    expect(renderResult.getByTestId('rowHostStatus').textContent).toEqual(expectedLabel);
+  });
+
+  describe('and host is isolated or pending isolation', () => {
+    beforeEach(async () => {
+      // Ensure pending action api sets pending action for the test endpoint metadata
+      const pendingActionsResponseProvider = httpMocks.responseProvider.pendingActions.getMockImplementation();
+      httpMocks.responseProvider.pendingActions.mockImplementation((...args) => {
+        const response = pendingActionsResponseProvider!(...args);
+        response.data.some((pendingAction) => {
+          if (pendingAction.agent_id === endpointMeta.elastic.agent.id) {
+            pendingAction.pending_actions.isolate = 1;
+            return true;
+          }
+          return false;
+        });
+        return response;
+      });
+
+      const loadingPendingActions = waitForAction('endpointPendingActionsStateChanged', {
+        validate: (action) => isLoadedResourceState(action.payload),
+      });
+
+      await render({ hostStatus: HostStatus.HEALTHY, endpointMetadata: endpointMeta });
+      await loadingPendingActions;
+    });
+
+    it('should show host pending action', () => {
+      expect(renderResult.getByTestId('rowIsolationStatus').textContent).toEqual(
+        'Isolating pending'
+      );
+    });
+  });
+});
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/components/endpoint_agent_status.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/components/endpoint_agent_status.tsx
new file mode 100644
index 00000000000000..94db233972d670
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/components/endpoint_agent_status.tsx
@@ -0,0 +1,59 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { memo } from 'react';
+import { EuiBadge, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import styled from 'styled-components';
+import { HostInfo, HostMetadata } from '../../../../../../common/endpoint/types';
+import { HOST_STATUS_TO_BADGE_COLOR } from '../host_constants';
+import { EndpointHostIsolationStatus } from '../../../../../common/components/endpoint/host_isolation';
+import { useEndpointSelector } from '../hooks';
+import { getEndpointHostIsolationStatusPropsCallback } from '../../store/selectors';
+
+const EuiFlexGroupStyled = styled(EuiFlexGroup)`
+  .isolation-status {
+    margin-left: ${({ theme }) => theme.eui.paddingSizes.s};
+  }
+`;
+
+export interface EndpointAgentStatusProps {
+  hostStatus: HostInfo['host_status'];
+  endpointMetadata: HostMetadata;
+}
+export const EndpointAgentStatus = memo<EndpointAgentStatusProps>(
+  ({ endpointMetadata, hostStatus }) => {
+    const getEndpointIsolationStatusProps = useEndpointSelector(
+      getEndpointHostIsolationStatusPropsCallback
+    );
+
+    return (
+      <EuiFlexGroupStyled gutterSize="none" responsive={false} className="eui-textTruncate">
+        <EuiFlexItem grow={false}>
+          <EuiBadge
+            color={hostStatus != null ? HOST_STATUS_TO_BADGE_COLOR[hostStatus] : 'warning'}
+            data-test-subj="rowHostStatus"
+          >
+            <FormattedMessage
+              id="xpack.securitySolution.endpoint.list.hostStatusValue"
+              defaultMessage="{hostStatus, select, healthy {Healthy} unhealthy {Unhealthy} updating {Updating} offline {Offline} inactive {Inactive} other {Unhealthy}}"
+              values={{ hostStatus }}
+            />
+          </EuiBadge>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false} className="eui-textTruncate isolation-status">
+          <EndpointHostIsolationStatus
+            data-test-subj="rowIsolationStatus"
+            {...getEndpointIsolationStatusProps(endpointMetadata)}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroupStyled>
+    );
+  }
+);
+
+EndpointAgentStatus.displayName = 'EndpointAgentStatus';
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/components/actions_menu.test.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/components/actions_menu.test.tsx
index 356d44a8105287..04708ea90cd349 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/components/actions_menu.test.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/components/actions_menu.test.tsx
@@ -15,8 +15,10 @@ import React from 'react';
 import { act } from '@testing-library/react';
 import { endpointPageHttpMock } from '../../../mocks';
 import { fireEvent } from '@testing-library/dom';
+import { licenseService } from '../../../../../../common/hooks/use_license';
 
 jest.mock('../../../../../../common/lib/kibana');
+jest.mock('../../../../../../common/hooks/use_license');
 
 describe('When using the Endpoint Details Actions Menu', () => {
   let render: () => Promise<ReturnType<AppContextTestRender['render']>>;
@@ -112,4 +114,25 @@ describe('When using the Endpoint Details Actions Menu', () => {
       expect(coreStart.application.navigateToApp).toHaveBeenCalled();
     });
   });
+
+  describe('and license is NOT PlatinumPlus', () => {
+    const licenseServiceMock = licenseService as jest.Mocked<typeof licenseService>;
+
+    beforeEach(() => licenseServiceMock.isPlatinumPlus.mockReturnValue(false));
+
+    afterEach(() => licenseServiceMock.isPlatinumPlus.mockReturnValue(true));
+
+    it('should not show the `isoalte` action', async () => {
+      setEndpointMetadataResponse();
+      await render();
+      expect(renderResult.queryByTestId('isolateLink')).toBeNull();
+    });
+
+    it('should still show `unisolate` action for endpoints that are currently isolated', async () => {
+      setEndpointMetadataResponse(true);
+      await render();
+      expect(renderResult.queryByTestId('isolateLink')).toBeNull();
+      expect(renderResult.getByTestId('unIsolateLink')).not.toBeNull();
+    });
+  });
 });
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/endpoint_details.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/endpoint_details.tsx
index 38404a5c6c11ff..64ea575c37d798 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/endpoint_details.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/endpoint_details.tsx
@@ -23,7 +23,7 @@ import { isPolicyOutOfDate } from '../../utils';
 import { HostInfo, HostMetadata, HostStatus } from '../../../../../../common/endpoint/types';
 import { useEndpointSelector } from '../hooks';
 import { policyResponseStatus, uiQueryParams } from '../../store/selectors';
-import { POLICY_STATUS_TO_BADGE_COLOR, HOST_STATUS_TO_BADGE_COLOR } from '../host_constants';
+import { POLICY_STATUS_TO_BADGE_COLOR } from '../host_constants';
 import { FormattedDateAndTime } from '../../../../../common/components/endpoint/formatted_date_time';
 import { useNavigateByRouterEventHandler } from '../../../../../common/hooks/endpoint/use_navigate_by_router_event_handler';
 import { getEndpointDetailsPath } from '../../../../common/routing';
@@ -31,6 +31,7 @@ import { SecurityPageName } from '../../../../../app/types';
 import { useFormatUrl } from '../../../../../common/components/link_to';
 import { EndpointPolicyLink } from '../components/endpoint_policy_link';
 import { OutOfDate } from '../components/out_of_date';
+import { EndpointAgentStatus } from '../components/endpoint_agent_status';
 
 const HostIds = styled(EuiListGroupItem)`
   margin-top: 0;
@@ -88,20 +89,7 @@ export const EndpointDetails = memo(
           title: i18n.translate('xpack.securitySolution.endpoint.details.agentStatus', {
             defaultMessage: 'Agent Status',
           }),
-          description: (
-            <EuiBadge
-              color={HOST_STATUS_TO_BADGE_COLOR[hostStatus] || 'warning'}
-              data-test-subj="hostDetailsAgentStatusBadge"
-            >
-              <EuiText size="m">
-                <FormattedMessage
-                  id="xpack.securitySolution.endpoint.list.hostStatusValue"
-                  defaultMessage="{hostStatus, select, healthy {Healthy} unhealthy {Unhealthy} updating {Updating} offline {Offline} inactive {Inactive} other {Unhealthy}}"
-                  values={{ hostStatus }}
-                />
-              </EuiText>
-            </EuiBadge>
-          ),
+          description: <EndpointAgentStatus hostStatus={hostStatus} endpointMetadata={details} />,
         },
         {
           title: i18n.translate('xpack.securitySolution.endpoint.details.lastSeen', {
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/hooks/use_endpoint_action_items.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/hooks/use_endpoint_action_items.tsx
index 31069b1939ce98..7c38c935a0b9f3 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/hooks/use_endpoint_action_items.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/hooks/use_endpoint_action_items.tsx
@@ -17,7 +17,8 @@ import { useEndpointSelector } from './hooks';
 import { agentPolicies, uiQueryParams } from '../../store/selectors';
 import { useKibana } from '../../../../../common/lib/kibana';
 import { ContextMenuItemNavByRouterProps } from '../components/context_menu_item_nav_by_rotuer';
-import { isEndpointHostIsolated } from '../../../../../common/utils/validators/is_endpoint_host_isolated';
+import { isEndpointHostIsolated } from '../../../../../common/utils/validators';
+import { useLicense } from '../../../../../common/hooks/use_license';
 
 /**
  * Returns a list (array) of actions for an individual endpoint
@@ -26,6 +27,7 @@ import { isEndpointHostIsolated } from '../../../../../common/utils/validators/i
 export const useEndpointActionItems = (
   endpointMetadata: MaybeImmutable<HostMetadata> | undefined
 ): ContextMenuItemNavByRouterProps[] => {
+  const isPlatinumPlus = useLicense().isPlatinumPlus();
   const { formatUrl } = useFormatUrl(SecurityPageName.administration);
   const fleetAgentPolicies = useEndpointSelector(agentPolicies);
   const allCurrentUrlParams = useEndpointSelector(uiQueryParams);
@@ -58,40 +60,48 @@ export const useEndpointActionItems = (
         selected_endpoint: endpointId,
       });
 
+      const isolationActions = [];
+
+      if (isIsolated) {
+        // Un-isolate is always available to users regardless of license level
+        isolationActions.push({
+          'data-test-subj': 'unIsolateLink',
+          icon: 'logoSecurity',
+          key: 'unIsolateHost',
+          navigateAppId: MANAGEMENT_APP_ID,
+          navigateOptions: {
+            path: endpointUnIsolatePath,
+          },
+          href: formatUrl(endpointUnIsolatePath),
+          children: (
+            <FormattedMessage
+              id="xpack.securitySolution.endpoint.actions.unIsolateHost"
+              defaultMessage="Unisolate host"
+            />
+          ),
+        });
+      } else if (isPlatinumPlus) {
+        // For Platinum++ licenses, users also have ability to isolate
+        isolationActions.push({
+          'data-test-subj': 'isolateLink',
+          icon: 'logoSecurity',
+          key: 'isolateHost',
+          navigateAppId: MANAGEMENT_APP_ID,
+          navigateOptions: {
+            path: endpointIsolatePath,
+          },
+          href: formatUrl(endpointIsolatePath),
+          children: (
+            <FormattedMessage
+              id="xpack.securitySolution.endpoint.actions.isolateHost"
+              defaultMessage="Isolate host"
+            />
+          ),
+        });
+      }
+
       return [
-        isIsolated
-          ? {
-              'data-test-subj': 'unIsolateLink',
-              icon: 'logoSecurity',
-              key: 'unIsolateHost',
-              navigateAppId: MANAGEMENT_APP_ID,
-              navigateOptions: {
-                path: endpointUnIsolatePath,
-              },
-              href: formatUrl(endpointUnIsolatePath),
-              children: (
-                <FormattedMessage
-                  id="xpack.securitySolution.endpoint.actions.unIsolateHost"
-                  defaultMessage="Unisolate host"
-                />
-              ),
-            }
-          : {
-              'data-test-subj': 'isolateLink',
-              icon: 'logoSecurity',
-              key: 'isolateHost',
-              navigateAppId: MANAGEMENT_APP_ID,
-              navigateOptions: {
-                path: endpointIsolatePath,
-              },
-              href: formatUrl(endpointIsolatePath),
-              children: (
-                <FormattedMessage
-                  id="xpack.securitySolution.endpoint.actions.isolateHost"
-                  defaultMessage="Isolate host"
-                />
-              ),
-            },
+        ...isolationActions,
         {
           'data-test-subj': 'hostLink',
           icon: 'logoSecurity',
@@ -138,13 +148,13 @@ export const useEndpointActionItems = (
           navigateAppId: 'fleet',
           navigateOptions: {
             path: `#${
-              pagePathGetters.fleet_agent_details({
+              pagePathGetters.agent_details({
                 agentId: fleetAgentId,
               })[1]
             }`,
           },
           href: `${getUrlForApp('fleet')}#${
-            pagePathGetters.fleet_agent_details({
+            pagePathGetters.agent_details({
               agentId: fleetAgentId,
             })[1]
           }`,
@@ -162,13 +172,13 @@ export const useEndpointActionItems = (
           navigateAppId: 'fleet',
           navigateOptions: {
             path: `#${
-              pagePathGetters.fleet_agent_details({
+              pagePathGetters.agent_details({
                 agentId: fleetAgentId,
               })[1]
             }/activity?openReassignFlyout=true`,
           },
           href: `${getUrlForApp('fleet')}#${
-            pagePathGetters.fleet_agent_details({
+            pagePathGetters.agent_details({
               agentId: fleetAgentId,
             })[1]
           }/activity?openReassignFlyout=true`,
@@ -183,5 +193,12 @@ export const useEndpointActionItems = (
     }
 
     return [];
-  }, [allCurrentUrlParams, endpointMetadata, fleetAgentPolicies, formatUrl, getUrlForApp]);
+  }, [
+    allCurrentUrlParams,
+    endpointMetadata,
+    fleetAgentPolicies,
+    formatUrl,
+    getUrlForApp,
+    isPlatinumPlus,
+  ]);
 };
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx
index 86f1e32e751eeb..14f9662ad9b0bb 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx
@@ -37,6 +37,7 @@ import {
   isUninitialisedResourceState,
 } from '../../../state';
 import { getCurrentIsolationRequestState } from '../store/selectors';
+import { licenseService } from '../../../../common/hooks/use_license';
 
 // not sure why this can't be imported from '../../../../common/mock/formatted_relative';
 // but sure enough it needs to be inline in this one file
@@ -59,6 +60,7 @@ jest.mock('../../policy/store/services/ingest', () => {
 });
 
 jest.mock('../../../../common/lib/kibana');
+jest.mock('../../../../common/hooks/use_license');
 
 describe('when on the endpoint list page', () => {
   const docGenerator = new EndpointDocGenerator();
@@ -70,6 +72,9 @@ describe('when on the endpoint list page', () => {
   let coreStart: AppContextTestRender['coreStart'];
   let middlewareSpy: AppContextTestRender['middlewareSpy'];
   let abortSpy: jest.SpyInstance;
+
+  (licenseService as jest.Mocked<typeof licenseService>).isPlatinumPlus.mockReturnValue(true);
+
   beforeAll(() => {
     const mockAbort = new AbortController();
     mockAbort.abort();
@@ -1108,13 +1113,13 @@ describe('when on the endpoint list page', () => {
     });
     it('navigates to the Ingest Agent Details page', async () => {
       const agentDetailsLink = await renderResult.findByTestId('agentDetailsLink');
-      expect(agentDetailsLink.getAttribute('href')).toEqual(`/app/fleet#/fleet/agents/${agentId}`);
+      expect(agentDetailsLink.getAttribute('href')).toEqual(`/app/fleet#/agents/${agentId}`);
     });
 
     it('navigates to the Ingest Agent Details page with policy reassign', async () => {
       const agentPolicyReassignLink = await renderResult.findByTestId('agentPolicyReassignLink');
       expect(agentPolicyReassignLink.getAttribute('href')).toEqual(
-        `/app/fleet#/fleet/agents/${agentId}/activity?openReassignFlyout=true`
+        `/app/fleet#/agents/${agentId}/activity?openReassignFlyout=true`
       );
     });
   });
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx
index 4d1ab0f3de8252..d1dab3dd07a7e3 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx
@@ -31,11 +31,7 @@ import { EndpointDetailsFlyout } from './details';
 import * as selectors from '../store/selectors';
 import { useEndpointSelector } from './hooks';
 import { isPolicyOutOfDate } from '../utils';
-import {
-  HOST_STATUS_TO_BADGE_COLOR,
-  POLICY_STATUS_TO_BADGE_COLOR,
-  POLICY_STATUS_TO_TEXT,
-} from './host_constants';
+import { POLICY_STATUS_TO_BADGE_COLOR, POLICY_STATUS_TO_TEXT } from './host_constants';
 import { useNavigateByRouterEventHandler } from '../../../../common/hooks/endpoint/use_navigate_by_router_event_handler';
 import { CreateStructuredSelector } from '../../../../common/store';
 import { Immutable, HostInfo } from '../../../../../common/endpoint/types';
@@ -59,6 +55,7 @@ import { AdministrationListPage } from '../../../components/administration_list_
 import { useKibana } from '../../../../../../../../src/plugins/kibana_react/public';
 import { LinkToApp } from '../../../../common/components/endpoint/link_to_app';
 import { TableRowActions } from './components/table_row_actions';
+import { EndpointAgentStatus } from './components/endpoint_agent_status';
 
 const MAX_PAGINATED_ITEM = 9999;
 
@@ -97,6 +94,7 @@ const EndpointListNavLink = memo<{
 });
 EndpointListNavLink.displayName = 'EndpointListNavLink';
 
+// FIXME: this needs refactoring - we are pulling in all selectors from endpoint, which includes many more than what the list uses
 const selector = (createStructuredSelector as CreateStructuredSelector)(selectors);
 export const EndpointList = () => {
   const history = useHistory();
@@ -279,19 +277,9 @@ export const EndpointList = () => {
           defaultMessage: 'Agent Status',
         }),
         // eslint-disable-next-line react/display-name
-        render: (hostStatus: HostInfo['host_status']) => {
+        render: (hostStatus: HostInfo['host_status'], endpointInfo) => {
           return (
-            <EuiBadge
-              color={hostStatus != null ? HOST_STATUS_TO_BADGE_COLOR[hostStatus] : 'warning'}
-              data-test-subj="rowHostStatus"
-              className="eui-textTruncate"
-            >
-              <FormattedMessage
-                id="xpack.securitySolution.endpoint.list.hostStatusValue"
-                defaultMessage="{hostStatus, select, healthy {Healthy} unhealthy {Unhealthy} updating {Updating} offline {Offline} inactive {Inactive} other {Unhealthy}}"
-                values={{ hostStatus }}
-              />
-            </EuiBadge>
+            <EndpointAgentStatus hostStatus={hostStatus} endpointMetadata={endpointInfo.metadata} />
           );
         },
       },
@@ -527,12 +515,12 @@ export const EndpointList = () => {
                   agentsLink: (
                     <LinkToApp
                       appId="fleet"
-                      appPath={`#${pagePathGetters.fleet_agent_list({
+                      appPath={`#${pagePathGetters.agent_list({
                         kuery: 'packages : "endpoint"',
                       })}`}
                       href={`${services?.application?.getUrlForApp(
                         'fleet'
-                      )}#${pagePathGetters.fleet_agent_list({
+                      )}#${pagePathGetters.agent_list({
                         kuery: 'packages : "endpoint"',
                       })}`}
                     >
diff --git a/x-pack/plugins/security_solution/public/management/pages/event_filters/view/components/event_filter_delete_modal.tsx b/x-pack/plugins/security_solution/public/management/pages/event_filters/view/components/event_filter_delete_modal.tsx
index 74a023965a57d5..653469d304978c 100644
--- a/x-pack/plugins/security_solution/public/management/pages/event_filters/view/components/event_filter_delete_modal.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/event_filters/view/components/event_filter_delete_modal.tsx
@@ -91,7 +91,7 @@ export const EventFilterDeleteModal = memo<{}>(() => {
             <FormattedMessage
               id="xpack.securitySolution.eventFilters.deletionDialog.mainMessage"
               defaultMessage='You are removing event filter "{name}".'
-              values={{ name: <strong>{eventFilter?.name}</strong> }}
+              values={{ name: <b className="eui-textBreakWord">{eventFilter?.name}</b> }}
             />
           </p>
           <p>
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_package_custom_extension/components/fleet_event_filters_card.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_package_custom_extension/components/fleet_event_filters_card.tsx
index be3cba5eb43181..5588cdbe81e3ed 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_package_custom_extension/components/fleet_event_filters_card.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_package_custom_extension/components/fleet_event_filters_card.tsx
@@ -20,7 +20,7 @@ import {
   GetExceptionSummaryResponse,
   ListPageRouteState,
 } from '../../../../../../../../common/endpoint/types';
-import { PLUGIN_ID as FLEET_PLUGIN_ID } from '../../../../../../../../../fleet/common';
+import { INTEGRATIONS_PLUGIN_ID } from '../../../../../../../../../fleet/common';
 import { MANAGEMENT_APP_ID } from '../../../../../../common/constants';
 import { useToasts } from '../../../../../../../common/lib/kibana';
 import { LinkWithIcon } from './link_with_icon';
@@ -68,19 +68,21 @@ export const FleetEventFiltersCard = memo<PackageCustomExtensionComponentProps>(
   }, [eventFiltersApi, toasts]);
 
   const eventFiltersRouteState = useMemo<ListPageRouteState>(() => {
-    const fleetPackageCustomUrlPath = `#${pagePathGetters.integration_details_custom({ pkgkey })}`;
+    const fleetPackageCustomUrlPath = `#${
+      pagePathGetters.integration_details_custom({ pkgkey })[1]
+    }`;
     return {
       backButtonLabel: i18n.translate(
         'xpack.securitySolution.endpoint.fleetCustomExtension.backButtonLabel',
         { defaultMessage: 'Back to Endpoint Integration' }
       ),
       onBackButtonNavigateTo: [
-        FLEET_PLUGIN_ID,
+        INTEGRATIONS_PLUGIN_ID,
         {
           path: fleetPackageCustomUrlPath,
         },
       ],
-      backButtonUrl: getUrlForApp(FLEET_PLUGIN_ID, {
+      backButtonUrl: getUrlForApp(INTEGRATIONS_PLUGIN_ID, {
         path: fleetPackageCustomUrlPath,
       }),
     };
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_package_custom_extension/components/fleet_trusted_apps_card.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_package_custom_extension/components/fleet_trusted_apps_card.tsx
index ed3ba10c1e62bb..f1c9cb13a27dc5 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_package_custom_extension/components/fleet_trusted_apps_card.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_package_custom_extension/components/fleet_trusted_apps_card.tsx
@@ -20,7 +20,7 @@ import {
   ListPageRouteState,
   GetExceptionSummaryResponse,
 } from '../../../../../../../../common/endpoint/types';
-import { PLUGIN_ID as FLEET_PLUGIN_ID } from '../../../../../../../../../fleet/common';
+import { INTEGRATIONS_PLUGIN_ID } from '../../../../../../../../../fleet/common';
 import { MANAGEMENT_APP_ID } from '../../../../../../common/constants';
 import { useToasts } from '../../../../../../../common/lib/kibana';
 import { LinkWithIcon } from './link_with_icon';
@@ -68,24 +68,26 @@ export const FleetTrustedAppsCard = memo<PackageCustomExtensionComponentProps>((
   const trustedAppsListUrlPath = getTrustedAppsListPath();
 
   const trustedAppRouteState = useMemo<ListPageRouteState>(() => {
-    const fleetPackageCustomUrlPath = `#${pagePathGetters.integration_details_custom({ pkgkey })}`;
+    const fleetPackageCustomUrlPath = `#${
+      pagePathGetters.integration_details_custom({ pkgkey })[1]
+    }`;
+
     return {
       backButtonLabel: i18n.translate(
         'xpack.securitySolution.endpoint.fleetCustomExtension.backButtonLabel',
         { defaultMessage: 'Back to Endpoint Integration' }
       ),
       onBackButtonNavigateTo: [
-        FLEET_PLUGIN_ID,
+        INTEGRATIONS_PLUGIN_ID,
         {
           path: fleetPackageCustomUrlPath,
         },
       ],
-      backButtonUrl: getUrlForApp(FLEET_PLUGIN_ID, {
+      backButtonUrl: getUrlForApp(INTEGRATIONS_PLUGIN_ID, {
         path: fleetPackageCustomUrlPath,
       }),
     };
   }, [getUrlForApp, pkgkey]);
-
   return (
     <EuiPanel paddingSize="l">
       <StyledEuiFlexGridGroup alignItems="baseline" justifyContent="center">
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.test.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.test.tsx
index d01ccea5ba1f4a..1766048a3985aa 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.test.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.test.tsx
@@ -17,17 +17,7 @@ import { policyListApiPathHandlers } from '../store/test_mock_utils';
 import { licenseService } from '../../../../common/hooks/use_license';
 
 jest.mock('../../../../common/components/link_to');
-jest.mock('../../../../common/hooks/use_license', () => {
-  const licenseServiceInstance = {
-    isPlatinumPlus: jest.fn(),
-  };
-  return {
-    licenseService: licenseServiceInstance,
-    useLicense: () => {
-      return licenseServiceInstance;
-    },
-  };
-});
+jest.mock('../../../../common/hooks/use_license');
 
 describe('Policy Details', () => {
   type FindReactWrapperResponse = ReturnType<ReturnType<typeof render>['find']>;
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/__snapshots__/trusted_app_deletion_dialog.test.tsx.snap b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/__snapshots__/trusted_app_deletion_dialog.test.tsx.snap
index 5ab58914ff8b1c..0343ab62b9773d 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/__snapshots__/trusted_app_deletion_dialog.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/__snapshots__/trusted_app_deletion_dialog.test.tsx.snap
@@ -56,9 +56,11 @@ exports[`TrustedAppDeletionDialog renders correctly when deletion failed 1`] = `
               >
                 <p>
                   You are removing trusted application "
-                  <strong>
+                  <b
+                    class="eui-textBreakWord"
+                  >
                     trusted app 3
-                  </strong>
+                  </b>
                   ".
                 </p>
                 <p>
@@ -158,9 +160,11 @@ exports[`TrustedAppDeletionDialog renders correctly when deletion is in progress
               >
                 <p>
                   You are removing trusted application "
-                  <strong>
+                  <b
+                    class="eui-textBreakWord"
+                  >
                     trusted app 3
-                  </strong>
+                  </b>
                   ".
                 </p>
                 <p>
@@ -265,9 +269,11 @@ exports[`TrustedAppDeletionDialog renders correctly when dialog started 1`] = `
               >
                 <p>
                   You are removing trusted application "
-                  <strong>
+                  <b
+                    class="eui-textBreakWord"
+                  >
                     trusted app 3
-                  </strong>
+                  </b>
                   ".
                 </p>
                 <p>
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_app_card/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_app_card/__snapshots__/index.test.tsx.snap
index 47728eacf4cddf..7439245bc95719 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_app_card/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_app_card/__snapshots__/index.test.tsx.snap
@@ -53,7 +53,7 @@ exports[`trusted_app_card TrustedAppCard should render correctly 1`] = `
   <ItemPropertySummary
     name="Modified By"
     value={
-      <Memo(FormattedDate)
+      <TextFieldValue
         className="eui-textTruncate"
         fieldName="Modified By"
         value="someone"
@@ -177,7 +177,7 @@ exports[`trusted_app_card TrustedAppCard should trim long texts 1`] = `
   <ItemPropertySummary
     name="Modified By"
     value={
-      <Memo(FormattedDate)
+      <TextFieldValue
         className="eui-textTruncate"
         fieldName="Modified By"
         value="someone"
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_app_card/index.tsx b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_app_card/index.tsx
index c2c464a5356202..2016e43f53c426 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_app_card/index.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_app_card/index.tsx
@@ -133,7 +133,7 @@ export const TrustedAppCard = memo<TrustedAppCardProps>(
         <ItemDetailsPropertySummary
           name={PROPERTY_TITLES.updated_by}
           value={
-            <FormattedDate
+            <TextFieldValue
               fieldName={PROPERTY_TITLES.updated_by}
               value={trustedApp.updated_by}
               className="eui-textTruncate"
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_grid/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_grid/__snapshots__/index.test.tsx.snap
index 7e89c9723c9ddc..e984ea5bb1711f 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_grid/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_grid/__snapshots__/index.test.tsx.snap
@@ -514,7 +514,13 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
                   <dd
                     class="euiDescriptionList__description c4 eui-textBreakWord"
                   >
-                    someone
+                    <span
+                      class="euiToolTipAnchor eui-textTruncate"
+                    >
+                      <span>
+                        someone
+                      </span>
+                    </span>
                   </dd>
                   <dt
                     class="euiDescriptionList__title c3"
@@ -803,7 +809,13 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
                   <dd
                     class="euiDescriptionList__description c4 eui-textBreakWord"
                   >
-                    someone
+                    <span
+                      class="euiToolTipAnchor eui-textTruncate"
+                    >
+                      <span>
+                        someone
+                      </span>
+                    </span>
                   </dd>
                   <dt
                     class="euiDescriptionList__title c3"
@@ -1092,7 +1104,13 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
                   <dd
                     class="euiDescriptionList__description c4 eui-textBreakWord"
                   >
-                    someone
+                    <span
+                      class="euiToolTipAnchor eui-textTruncate"
+                    >
+                      <span>
+                        someone
+                      </span>
+                    </span>
                   </dd>
                   <dt
                     class="euiDescriptionList__title c3"
@@ -1381,7 +1399,13 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
                   <dd
                     class="euiDescriptionList__description c4 eui-textBreakWord"
                   >
-                    someone
+                    <span
+                      class="euiToolTipAnchor eui-textTruncate"
+                    >
+                      <span>
+                        someone
+                      </span>
+                    </span>
                   </dd>
                   <dt
                     class="euiDescriptionList__title c3"
@@ -1670,7 +1694,13 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
                   <dd
                     class="euiDescriptionList__description c4 eui-textBreakWord"
                   >
-                    someone
+                    <span
+                      class="euiToolTipAnchor eui-textTruncate"
+                    >
+                      <span>
+                        someone
+                      </span>
+                    </span>
                   </dd>
                   <dt
                     class="euiDescriptionList__title c3"
@@ -1959,7 +1989,13 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
                   <dd
                     class="euiDescriptionList__description c4 eui-textBreakWord"
                   >
-                    someone
+                    <span
+                      class="euiToolTipAnchor eui-textTruncate"
+                    >
+                      <span>
+                        someone
+                      </span>
+                    </span>
                   </dd>
                   <dt
                     class="euiDescriptionList__title c3"
@@ -2248,7 +2284,13 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
                   <dd
                     class="euiDescriptionList__description c4 eui-textBreakWord"
                   >
-                    someone
+                    <span
+                      class="euiToolTipAnchor eui-textTruncate"
+                    >
+                      <span>
+                        someone
+                      </span>
+                    </span>
                   </dd>
                   <dt
                     class="euiDescriptionList__title c3"
@@ -2537,7 +2579,13 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
                   <dd
                     class="euiDescriptionList__description c4 eui-textBreakWord"
                   >
-                    someone
+                    <span
+                      class="euiToolTipAnchor eui-textTruncate"
+                    >
+                      <span>
+                        someone
+                      </span>
+                    </span>
                   </dd>
                   <dt
                     class="euiDescriptionList__title c3"
@@ -2826,7 +2874,13 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
                   <dd
                     class="euiDescriptionList__description c4 eui-textBreakWord"
                   >
-                    someone
+                    <span
+                      class="euiToolTipAnchor eui-textTruncate"
+                    >
+                      <span>
+                        someone
+                      </span>
+                    </span>
                   </dd>
                   <dt
                     class="euiDescriptionList__title c3"
@@ -3115,7 +3169,13 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
                   <dd
                     class="euiDescriptionList__description c4 eui-textBreakWord"
                   >
-                    someone
+                    <span
+                      class="euiToolTipAnchor eui-textTruncate"
+                    >
+                      <span>
+                        someone
+                      </span>
+                    </span>
                   </dd>
                   <dt
                     class="euiDescriptionList__title c3"
@@ -3712,7 +3772,13 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
                   <dd
                     class="euiDescriptionList__description c4 eui-textBreakWord"
                   >
-                    someone
+                    <span
+                      class="euiToolTipAnchor eui-textTruncate"
+                    >
+                      <span>
+                        someone
+                      </span>
+                    </span>
                   </dd>
                   <dt
                     class="euiDescriptionList__title c3"
@@ -4001,7 +4067,13 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
                   <dd
                     class="euiDescriptionList__description c4 eui-textBreakWord"
                   >
-                    someone
+                    <span
+                      class="euiToolTipAnchor eui-textTruncate"
+                    >
+                      <span>
+                        someone
+                      </span>
+                    </span>
                   </dd>
                   <dt
                     class="euiDescriptionList__title c3"
@@ -4290,7 +4362,13 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
                   <dd
                     class="euiDescriptionList__description c4 eui-textBreakWord"
                   >
-                    someone
+                    <span
+                      class="euiToolTipAnchor eui-textTruncate"
+                    >
+                      <span>
+                        someone
+                      </span>
+                    </span>
                   </dd>
                   <dt
                     class="euiDescriptionList__title c3"
@@ -4579,7 +4657,13 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
                   <dd
                     class="euiDescriptionList__description c4 eui-textBreakWord"
                   >
-                    someone
+                    <span
+                      class="euiToolTipAnchor eui-textTruncate"
+                    >
+                      <span>
+                        someone
+                      </span>
+                    </span>
                   </dd>
                   <dt
                     class="euiDescriptionList__title c3"
@@ -4868,7 +4952,13 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
                   <dd
                     class="euiDescriptionList__description c4 eui-textBreakWord"
                   >
-                    someone
+                    <span
+                      class="euiToolTipAnchor eui-textTruncate"
+                    >
+                      <span>
+                        someone
+                      </span>
+                    </span>
                   </dd>
                   <dt
                     class="euiDescriptionList__title c3"
@@ -5157,7 +5247,13 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
                   <dd
                     class="euiDescriptionList__description c4 eui-textBreakWord"
                   >
-                    someone
+                    <span
+                      class="euiToolTipAnchor eui-textTruncate"
+                    >
+                      <span>
+                        someone
+                      </span>
+                    </span>
                   </dd>
                   <dt
                     class="euiDescriptionList__title c3"
@@ -5446,7 +5542,13 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
                   <dd
                     class="euiDescriptionList__description c4 eui-textBreakWord"
                   >
-                    someone
+                    <span
+                      class="euiToolTipAnchor eui-textTruncate"
+                    >
+                      <span>
+                        someone
+                      </span>
+                    </span>
                   </dd>
                   <dt
                     class="euiDescriptionList__title c3"
@@ -5735,7 +5837,13 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
                   <dd
                     class="euiDescriptionList__description c4 eui-textBreakWord"
                   >
-                    someone
+                    <span
+                      class="euiToolTipAnchor eui-textTruncate"
+                    >
+                      <span>
+                        someone
+                      </span>
+                    </span>
                   </dd>
                   <dt
                     class="euiDescriptionList__title c3"
@@ -6024,7 +6132,13 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
                   <dd
                     class="euiDescriptionList__description c4 eui-textBreakWord"
                   >
-                    someone
+                    <span
+                      class="euiToolTipAnchor eui-textTruncate"
+                    >
+                      <span>
+                        someone
+                      </span>
+                    </span>
                   </dd>
                   <dt
                     class="euiDescriptionList__title c3"
@@ -6313,7 +6427,13 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
                   <dd
                     class="euiDescriptionList__description c4 eui-textBreakWord"
                   >
-                    someone
+                    <span
+                      class="euiToolTipAnchor eui-textTruncate"
+                    >
+                      <span>
+                        someone
+                      </span>
+                    </span>
                   </dd>
                   <dt
                     class="euiDescriptionList__title c3"
@@ -6867,7 +6987,13 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
                   <dd
                     class="euiDescriptionList__description c4 eui-textBreakWord"
                   >
-                    someone
+                    <span
+                      class="euiToolTipAnchor eui-textTruncate"
+                    >
+                      <span>
+                        someone
+                      </span>
+                    </span>
                   </dd>
                   <dt
                     class="euiDescriptionList__title c3"
@@ -7156,7 +7282,13 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
                   <dd
                     class="euiDescriptionList__description c4 eui-textBreakWord"
                   >
-                    someone
+                    <span
+                      class="euiToolTipAnchor eui-textTruncate"
+                    >
+                      <span>
+                        someone
+                      </span>
+                    </span>
                   </dd>
                   <dt
                     class="euiDescriptionList__title c3"
@@ -7445,7 +7577,13 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
                   <dd
                     class="euiDescriptionList__description c4 eui-textBreakWord"
                   >
-                    someone
+                    <span
+                      class="euiToolTipAnchor eui-textTruncate"
+                    >
+                      <span>
+                        someone
+                      </span>
+                    </span>
                   </dd>
                   <dt
                     class="euiDescriptionList__title c3"
@@ -7734,7 +7872,13 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
                   <dd
                     class="euiDescriptionList__description c4 eui-textBreakWord"
                   >
-                    someone
+                    <span
+                      class="euiToolTipAnchor eui-textTruncate"
+                    >
+                      <span>
+                        someone
+                      </span>
+                    </span>
                   </dd>
                   <dt
                     class="euiDescriptionList__title c3"
@@ -8023,7 +8167,13 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
                   <dd
                     class="euiDescriptionList__description c4 eui-textBreakWord"
                   >
-                    someone
+                    <span
+                      class="euiToolTipAnchor eui-textTruncate"
+                    >
+                      <span>
+                        someone
+                      </span>
+                    </span>
                   </dd>
                   <dt
                     class="euiDescriptionList__title c3"
@@ -8312,7 +8462,13 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
                   <dd
                     class="euiDescriptionList__description c4 eui-textBreakWord"
                   >
-                    someone
+                    <span
+                      class="euiToolTipAnchor eui-textTruncate"
+                    >
+                      <span>
+                        someone
+                      </span>
+                    </span>
                   </dd>
                   <dt
                     class="euiDescriptionList__title c3"
@@ -8601,7 +8757,13 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
                   <dd
                     class="euiDescriptionList__description c4 eui-textBreakWord"
                   >
-                    someone
+                    <span
+                      class="euiToolTipAnchor eui-textTruncate"
+                    >
+                      <span>
+                        someone
+                      </span>
+                    </span>
                   </dd>
                   <dt
                     class="euiDescriptionList__title c3"
@@ -8890,7 +9052,13 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
                   <dd
                     class="euiDescriptionList__description c4 eui-textBreakWord"
                   >
-                    someone
+                    <span
+                      class="euiToolTipAnchor eui-textTruncate"
+                    >
+                      <span>
+                        someone
+                      </span>
+                    </span>
                   </dd>
                   <dt
                     class="euiDescriptionList__title c3"
@@ -9179,7 +9347,13 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
                   <dd
                     class="euiDescriptionList__description c4 eui-textBreakWord"
                   >
-                    someone
+                    <span
+                      class="euiToolTipAnchor eui-textTruncate"
+                    >
+                      <span>
+                        someone
+                      </span>
+                    </span>
                   </dd>
                   <dt
                     class="euiDescriptionList__title c3"
@@ -9468,7 +9642,13 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
                   <dd
                     class="euiDescriptionList__description c4 eui-textBreakWord"
                   >
-                    someone
+                    <span
+                      class="euiToolTipAnchor eui-textTruncate"
+                    >
+                      <span>
+                        someone
+                      </span>
+                    </span>
                   </dd>
                   <dt
                     class="euiDescriptionList__title c3"
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_list/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_list/__snapshots__/index.test.tsx.snap
index 2bb498ee2d463c..543ca9695fce21 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_list/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_list/__snapshots__/index.test.tsx.snap
@@ -862,7 +862,13 @@ exports[`TrustedAppsList renders correctly when item details expanded 1`] = `
                         <dd
                           class="euiDescriptionList__description c2 eui-textBreakWord"
                         >
-                          someone
+                          <span
+                            class="euiToolTipAnchor eui-textTruncate"
+                          >
+                            <span>
+                              someone
+                            </span>
+                          </span>
                         </dd>
                         <dt
                           class="euiDescriptionList__title c1"
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_app_deletion_dialog.tsx b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_app_deletion_dialog.tsx
index bffd9806103721..3afa2642eba121 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_app_deletion_dialog.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_app_deletion_dialog.tsx
@@ -45,7 +45,7 @@ const getTranslations = (entry: Immutable<TrustedApp> | undefined) => ({
     <FormattedMessage
       id="xpack.securitySolution.trustedapps.deletionDialog.mainMessage"
       defaultMessage='You are removing trusted application "{name}".'
-      values={{ name: <strong>{entry?.name}</strong> }}
+      values={{ name: <b className="eui-textBreakWord">{entry?.name}</b> }}
     />
   ),
   subMessage: (
diff --git a/x-pack/plugins/security_solution/server/endpoint/routes/actions/isolation.ts b/x-pack/plugins/security_solution/server/endpoint/routes/actions/isolation.ts
index 8c1eb611cb5a1a..c54c12981c7710 100644
--- a/x-pack/plugins/security_solution/server/endpoint/routes/actions/isolation.ts
+++ b/x-pack/plugins/security_solution/server/endpoint/routes/actions/isolation.ts
@@ -156,9 +156,7 @@ export const isolationRequestHandler = function (
     commentLines.push(`${isolate ? 'I' : 'Uni'}solate action was sent to the following Agents:`);
     // lines of markdown links, inside a code block
 
-    commentLines.push(
-      `${agentIDs.map((a) => `- [${a}](/app/fleet#/fleet/agents/${a})`).join('\n')}`
-    );
+    commentLines.push(`${agentIDs.map((a) => `- [${a}](/app/fleet#/agents/${a})`).join('\n')}`);
     if (req.body.comment) {
       commentLines.push(`\n\nWith Comment:\n> ${req.body.comment}`);
     }
diff --git a/x-pack/plugins/security_solution/server/endpoint/routes/resolver/queries/events.ts b/x-pack/plugins/security_solution/server/endpoint/routes/resolver/queries/events.ts
index 28a220c6f048a6..70e74356188c76 100644
--- a/x-pack/plugins/security_solution/server/endpoint/routes/resolver/queries/events.ts
+++ b/x-pack/plugins/security_solution/server/endpoint/routes/resolver/queries/events.ts
@@ -6,10 +6,10 @@
  */
 
 import type { IScopedClusterClient } from 'kibana/server';
+import { JsonObject } from '@kbn/common-utils';
 import { parseFilterQuery } from '../../../../utils/serialized_query';
 import { SafeResolverEvent } from '../../../../../common/endpoint/types';
 import { PaginationBuilder } from '../utils/pagination';
-import { JsonObject } from '../../../../../../../../src/plugins/kibana_utils/common';
 
 interface TimeRange {
   from: string;
diff --git a/x-pack/plugins/security_solution/server/endpoint/routes/resolver/tree/queries/descendants.ts b/x-pack/plugins/security_solution/server/endpoint/routes/resolver/tree/queries/descendants.ts
index bf9b3ce6aa8f3a..331f622951515e 100644
--- a/x-pack/plugins/security_solution/server/endpoint/routes/resolver/tree/queries/descendants.ts
+++ b/x-pack/plugins/security_solution/server/endpoint/routes/resolver/tree/queries/descendants.ts
@@ -7,8 +7,8 @@
 
 import type { ApiResponse, estypes } from '@elastic/elasticsearch';
 import { IScopedClusterClient } from 'src/core/server';
+import { JsonObject, JsonValue } from '@kbn/common-utils';
 import { FieldsObject, ResolverSchema } from '../../../../../../common/endpoint/types';
-import { JsonObject, JsonValue } from '../../../../../../../../../src/plugins/kibana_utils/common';
 import { NodeID, TimeRange, docValueFields, validIDs } from '../utils/index';
 
 interface DescendantsParams {
diff --git a/x-pack/plugins/security_solution/server/endpoint/routes/resolver/tree/queries/lifecycle.ts b/x-pack/plugins/security_solution/server/endpoint/routes/resolver/tree/queries/lifecycle.ts
index f9780d1469756e..7de038ccc9ae45 100644
--- a/x-pack/plugins/security_solution/server/endpoint/routes/resolver/tree/queries/lifecycle.ts
+++ b/x-pack/plugins/security_solution/server/endpoint/routes/resolver/tree/queries/lifecycle.ts
@@ -6,8 +6,8 @@
  */
 
 import { IScopedClusterClient } from 'src/core/server';
+import { JsonObject, JsonValue } from '@kbn/common-utils';
 import { FieldsObject, ResolverSchema } from '../../../../../../common/endpoint/types';
-import { JsonObject, JsonValue } from '../../../../../../../../../src/plugins/kibana_utils/common';
 import { NodeID, TimeRange, docValueFields, validIDs } from '../utils/index';
 
 interface LifecycleParams {
diff --git a/x-pack/plugins/security_solution/server/endpoint/routes/resolver/tree/queries/stats.ts b/x-pack/plugins/security_solution/server/endpoint/routes/resolver/tree/queries/stats.ts
index 24c97ad88b26ae..f21259980d464f 100644
--- a/x-pack/plugins/security_solution/server/endpoint/routes/resolver/tree/queries/stats.ts
+++ b/x-pack/plugins/security_solution/server/endpoint/routes/resolver/tree/queries/stats.ts
@@ -6,7 +6,7 @@
  */
 
 import { IScopedClusterClient } from 'src/core/server';
-import { JsonObject } from '../../../../../../../../../src/plugins/kibana_utils/common';
+import { JsonObject } from '@kbn/common-utils';
 import { EventStats, ResolverSchema } from '../../../../../../common/endpoint/types';
 import { NodeID, TimeRange } from '../utils/index';
 
diff --git a/x-pack/plugins/security_solution/server/endpoint/routes/resolver/utils/pagination.ts b/x-pack/plugins/security_solution/server/endpoint/routes/resolver/utils/pagination.ts
index befd69bdcf953c..24fc447173ba6c 100644
--- a/x-pack/plugins/security_solution/server/endpoint/routes/resolver/utils/pagination.ts
+++ b/x-pack/plugins/security_solution/server/endpoint/routes/resolver/utils/pagination.ts
@@ -5,12 +5,12 @@
  * 2.0.
  */
 
+import { JsonObject } from '@kbn/common-utils';
 import { SafeResolverEvent } from '../../../../../common/endpoint/types';
 import {
   eventIDSafeVersion,
   timestampSafeVersion,
 } from '../../../../../common/endpoint/models/event';
-import { JsonObject } from '../../../../../../../../src/plugins/kibana_utils/common';
 
 type SearchAfterFields = [number, string];
 
diff --git a/x-pack/plugins/security_solution/server/endpoint/types.ts b/x-pack/plugins/security_solution/server/endpoint/types.ts
index b3c7e58afe9915..6076aa9af635bf 100644
--- a/x-pack/plugins/security_solution/server/endpoint/types.ts
+++ b/x-pack/plugins/security_solution/server/endpoint/types.ts
@@ -8,9 +8,9 @@
 import { LoggerFactory } from 'kibana/server';
 
 import { SearchResponse } from '@elastic/elasticsearch/api/types';
+import { JsonObject } from '@kbn/common-utils';
 import { ConfigType } from '../config';
 import { EndpointAppContextService } from './endpoint_app_context_services';
-import { JsonObject } from '../../../../../src/plugins/kibana_utils/common';
 import { HostMetadata, MetadataQueryStrategyVersions } from '../../common/endpoint/types';
 import { ExperimentalFeatures } from '../../common/experimental_features';
 
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/executors/eql.test.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/executors/eql.test.ts
index 947e7d573173ea..e7af3d484dfbd2 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/executors/eql.test.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/executors/eql.test.ts
@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import dateMath from '@elastic/datemath';
 import { loggingSystemMock } from 'src/core/server/mocks';
 import { alertsMock, AlertServicesMock } from '../../../../../../alerting/server/mocks';
 import { eqlExecutor } from './eql';
@@ -23,6 +24,7 @@ describe('eql_executor', () => {
   let logger: ReturnType<typeof loggingSystemMock.createLogger>;
   let alertServices: AlertServicesMock;
   (getIndexVersion as jest.Mock).mockReturnValue(SIGNALS_TEMPLATE_VERSION);
+  const params = getEqlRuleParams();
   const eqlSO = {
     id: '04128c15-0d1b-4716-a4c5-46997ac7f3bd',
     type: 'alert',
@@ -40,10 +42,15 @@ describe('eql_executor', () => {
         interval: '5m',
       },
       throttle: 'no_actions',
-      params: getEqlRuleParams(),
+      params,
     },
     references: [],
   };
+  const tuple = {
+    from: dateMath.parse(params.from)!,
+    to: dateMath.parse(params.to)!,
+    maxSignals: params.maxSignals,
+  };
   const searchAfterSize = 7;
 
   beforeEach(() => {
@@ -64,6 +71,7 @@ describe('eql_executor', () => {
       const exceptionItems = [getExceptionListItemSchemaMock({ entries: [getEntryListMock()] })];
       const response = await eqlExecutor({
         rule: eqlSO,
+        tuple,
         exceptionItems,
         services: alertServices,
         version,
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/executors/eql.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/executors/eql.ts
index 28d1f3e19baeed..a187b730696829 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/executors/eql.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/executors/eql.ts
@@ -28,6 +28,7 @@ import {
   AlertAttributes,
   BulkCreate,
   EqlSignalSearchResponse,
+  RuleRangeTuple,
   SearchAfterAndBulkCreateReturnType,
   WrappedSignalHit,
 } from '../types';
@@ -35,6 +36,7 @@ import { createSearchAfterReturnType, makeFloatString, wrapSignal } from '../uti
 
 export const eqlExecutor = async ({
   rule,
+  tuple,
   exceptionItems,
   services,
   version,
@@ -43,6 +45,7 @@ export const eqlExecutor = async ({
   bulkCreate,
 }: {
   rule: SavedObject<AlertAttributes<EqlRuleParams>>;
+  tuple: RuleRangeTuple;
   exceptionItems: ExceptionListItemSchema[];
   services: AlertServices<AlertInstanceState, AlertInstanceContext, 'default'>;
   version: string;
@@ -81,8 +84,8 @@ export const eqlExecutor = async ({
   const request = buildEqlSearchRequest(
     ruleParams.query,
     inputIndex,
-    ruleParams.from,
-    ruleParams.to,
+    tuple.from.toISOString(),
+    tuple.to.toISOString(),
     searchAfterSize,
     ruleParams.timestampOverride,
     exceptionItems,
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/executors/ml.test.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/executors/ml.test.ts
index 25a9d2c3f510fe..89c1392cb67ba7 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/executors/ml.test.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/executors/ml.test.ts
@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import dateMath from '@elastic/datemath';
 import { loggingSystemMock } from 'src/core/server/mocks';
 import { alertsMock, AlertServicesMock } from '../../../../../../alerting/server/mocks';
 import { mlExecutor } from './ml';
@@ -26,7 +27,13 @@ describe('ml_executor', () => {
   const exceptionItems = [getExceptionListItemSchemaMock()];
   let logger: ReturnType<typeof loggingSystemMock.createLogger>;
   let alertServices: AlertServicesMock;
-  const mlSO = sampleRuleSO(getMlRuleParams());
+  const params = getMlRuleParams();
+  const mlSO = sampleRuleSO(params);
+  const tuple = {
+    from: dateMath.parse(params.from)!,
+    to: dateMath.parse(params.to)!,
+    maxSignals: params.maxSignals,
+  };
   const buildRuleMessage = buildRuleMessageFactory({
     id: mlSO.id,
     ruleId: mlSO.attributes.params.ruleId,
@@ -60,6 +67,7 @@ describe('ml_executor', () => {
     await expect(
       mlExecutor({
         rule: mlSO,
+        tuple,
         ml: undefined,
         exceptionItems,
         services: alertServices,
@@ -76,6 +84,7 @@ describe('ml_executor', () => {
     jobsSummaryMock.mockResolvedValue([]);
     const response = await mlExecutor({
       rule: mlSO,
+      tuple,
       ml: mlMock,
       exceptionItems,
       services: alertServices,
@@ -101,6 +110,7 @@ describe('ml_executor', () => {
 
     const response = await mlExecutor({
       rule: mlSO,
+      tuple,
       ml: mlMock,
       exceptionItems,
       services: alertServices,
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/executors/ml.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/executors/ml.ts
index f5c7d8822b51f0..20c4cb16dadc8d 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/executors/ml.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/executors/ml.ts
@@ -21,11 +21,12 @@ import { bulkCreateMlSignals } from '../bulk_create_ml_signals';
 import { filterEventsAgainstList } from '../filters/filter_events_against_list';
 import { findMlSignals } from '../find_ml_signals';
 import { BuildRuleMessage } from '../rule_messages';
-import { AlertAttributes, BulkCreate, WrapHits } from '../types';
+import { AlertAttributes, BulkCreate, RuleRangeTuple, WrapHits } from '../types';
 import { createErrorsFromShard, createSearchAfterReturnType, mergeReturns } from '../utils';
 
 export const mlExecutor = async ({
   rule,
+  tuple,
   ml,
   listClient,
   exceptionItems,
@@ -36,6 +37,7 @@ export const mlExecutor = async ({
   wrapHits,
 }: {
   rule: SavedObject<AlertAttributes<MachineLearningRuleParams>>;
+  tuple: RuleRangeTuple;
   ml: SetupPlugins['ml'];
   listClient: ListClient;
   exceptionItems: ExceptionListItemSchema[];
@@ -88,8 +90,8 @@ export const mlExecutor = async ({
     savedObjectsClient: services.savedObjectsClient,
     jobIds: ruleParams.machineLearningJobId,
     anomalyThreshold: ruleParams.anomalyThreshold,
-    from: ruleParams.from,
-    to: ruleParams.to,
+    from: tuple.from.toISOString(),
+    to: tuple.to.toISOString(),
     exceptionItems,
   });
 
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/executors/query.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/executors/query.ts
index 9d76a06afa2755..385c01c2f1cda1 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/executors/query.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/executors/query.ts
@@ -24,7 +24,7 @@ import { QueryRuleParams, SavedQueryRuleParams } from '../../schemas/rule_schema
 
 export const queryExecutor = async ({
   rule,
-  tuples,
+  tuple,
   listClient,
   exceptionItems,
   services,
@@ -37,7 +37,7 @@ export const queryExecutor = async ({
   wrapHits,
 }: {
   rule: SavedObject<AlertAttributes<QueryRuleParams | SavedQueryRuleParams>>;
-  tuples: RuleRangeTuple[];
+  tuple: RuleRangeTuple;
   listClient: ListClient;
   exceptionItems: ExceptionListItemSchema[];
   services: AlertServices<AlertInstanceState, AlertInstanceContext, 'default'>;
@@ -63,7 +63,7 @@ export const queryExecutor = async ({
   });
 
   return searchAfterAndBulkCreate({
-    tuples,
+    tuple,
     listClient,
     exceptionsList: exceptionItems,
     ruleSO: rule,
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/executors/threat_match.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/executors/threat_match.ts
index 078eb8362069cf..d0e22f696b222e 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/executors/threat_match.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/executors/threat_match.ts
@@ -23,7 +23,7 @@ import { ThreatRuleParams } from '../../schemas/rule_schemas';
 
 export const threatMatchExecutor = async ({
   rule,
-  tuples,
+  tuple,
   listClient,
   exceptionItems,
   services,
@@ -36,7 +36,7 @@ export const threatMatchExecutor = async ({
   wrapHits,
 }: {
   rule: SavedObject<AlertAttributes<ThreatRuleParams>>;
-  tuples: RuleRangeTuple[];
+  tuple: RuleRangeTuple;
   listClient: ListClient;
   exceptionItems: ExceptionListItemSchema[];
   services: AlertServices<AlertInstanceState, AlertInstanceContext, 'default'>;
@@ -51,7 +51,7 @@ export const threatMatchExecutor = async ({
   const ruleParams = rule.attributes.params;
   const inputIndex = await getInputIndex(services, version, ruleParams.index);
   return createThreatSignals({
-    tuples,
+    tuple,
     threatMapping: ruleParams.threatMapping,
     query: ruleParams.query,
     inputIndex,
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/executors/threshold.test.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/executors/threshold.test.ts
index f03e8b8a147aea..3906c669222386 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/executors/threshold.test.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/executors/threshold.test.ts
@@ -5,18 +5,23 @@
  * 2.0.
  */
 
+import dateMath from '@elastic/datemath';
 import { loggingSystemMock } from 'src/core/server/mocks';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { elasticsearchClientMock } from 'src/core/server/elasticsearch/client/mocks';
 import { alertsMock, AlertServicesMock } from '../../../../../../alerting/server/mocks';
 import { thresholdExecutor } from './threshold';
 import { getExceptionListItemSchemaMock } from '../../../../../../lists/common/schemas/response/exception_list_item_schema.mock';
 import { getEntryListMock } from '../../../../../../lists/common/schemas/types/entry_list.mock';
 import { getThresholdRuleParams } from '../../schemas/rule_schemas.mock';
 import { buildRuleMessageFactory } from '../rule_messages';
+import { sampleEmptyDocSearchResults } from '../__mocks__/es_results';
 
 describe('threshold_executor', () => {
   const version = '8.0.0';
   let logger: ReturnType<typeof loggingSystemMock.createLogger>;
   let alertServices: AlertServicesMock;
+  const params = getThresholdRuleParams();
   const thresholdSO = {
     id: '04128c15-0d1b-4716-a4c5-46997ac7f3bd',
     type: 'alert',
@@ -34,10 +39,15 @@ describe('threshold_executor', () => {
         interval: '5m',
       },
       throttle: 'no_actions',
-      params: getThresholdRuleParams(),
+      params,
     },
     references: [],
   };
+  const tuple = {
+    from: dateMath.parse(params.from)!,
+    to: dateMath.parse(params.to)!,
+    maxSignals: params.maxSignals,
+  };
   const buildRuleMessage = buildRuleMessageFactory({
     id: thresholdSO.id,
     ruleId: thresholdSO.attributes.params.ruleId,
@@ -47,6 +57,9 @@ describe('threshold_executor', () => {
 
   beforeEach(() => {
     alertServices = alertsMock.createAlertServices();
+    alertServices.scopedClusterClient.asCurrentUser.search.mockResolvedValue(
+      elasticsearchClientMock.createSuccessTransportRequestPromise(sampleEmptyDocSearchResults())
+    );
     logger = loggingSystemMock.createLogger();
   });
 
@@ -55,14 +68,20 @@ describe('threshold_executor', () => {
       const exceptionItems = [getExceptionListItemSchemaMock({ entries: [getEntryListMock()] })];
       const response = await thresholdExecutor({
         rule: thresholdSO,
-        tuples: [],
+        tuple,
         exceptionItems,
         services: alertServices,
         version,
         logger,
         buildRuleMessage,
         startedAt: new Date(),
-        bulkCreate: jest.fn(),
+        bulkCreate: jest.fn().mockImplementation((hits) => ({
+          errors: [],
+          success: true,
+          bulkCreateDuration: '0',
+          createdItemsCount: 0,
+          createdItems: [],
+        })),
         wrapHits: jest.fn(),
       });
       expect(response.warningMessages.length).toEqual(1);
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/executors/threshold.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/executors/threshold.ts
index 5e23128c9c148a..378d68fc13d2a9 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/executors/threshold.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/executors/threshold.ts
@@ -39,7 +39,7 @@ import { BuildRuleMessage } from '../rule_messages';
 
 export const thresholdExecutor = async ({
   rule,
-  tuples,
+  tuple,
   exceptionItems,
   services,
   version,
@@ -50,7 +50,7 @@ export const thresholdExecutor = async ({
   wrapHits,
 }: {
   rule: SavedObject<AlertAttributes<ThresholdRuleParams>>;
-  tuples: RuleRangeTuple[];
+  tuple: RuleRangeTuple;
   exceptionItems: ExceptionListItemSchema[];
   services: AlertServices<AlertInstanceState, AlertInstanceContext, 'default'>;
   version: string;
@@ -70,90 +70,88 @@ export const thresholdExecutor = async ({
   }
   const inputIndex = await getInputIndex(services, version, ruleParams.index);
 
-  for (const tuple of tuples) {
-    const {
-      thresholdSignalHistory,
-      searchErrors: previousSearchErrors,
-    } = await getThresholdSignalHistory({
-      indexPattern: [ruleParams.outputIndex],
-      from: tuple.from.toISOString(),
-      to: tuple.to.toISOString(),
-      services,
-      logger,
-      ruleId: ruleParams.ruleId,
-      bucketByFields: ruleParams.threshold.field,
-      timestampOverride: ruleParams.timestampOverride,
-      buildRuleMessage,
-    });
+  const {
+    thresholdSignalHistory,
+    searchErrors: previousSearchErrors,
+  } = await getThresholdSignalHistory({
+    indexPattern: [ruleParams.outputIndex],
+    from: tuple.from.toISOString(),
+    to: tuple.to.toISOString(),
+    services,
+    logger,
+    ruleId: ruleParams.ruleId,
+    bucketByFields: ruleParams.threshold.field,
+    timestampOverride: ruleParams.timestampOverride,
+    buildRuleMessage,
+  });
 
-    const bucketFilters = await getThresholdBucketFilters({
-      thresholdSignalHistory,
-      timestampOverride: ruleParams.timestampOverride,
-    });
+  const bucketFilters = await getThresholdBucketFilters({
+    thresholdSignalHistory,
+    timestampOverride: ruleParams.timestampOverride,
+  });
+
+  const esFilter = await getFilter({
+    type: ruleParams.type,
+    filters: ruleParams.filters ? ruleParams.filters.concat(bucketFilters) : bucketFilters,
+    language: ruleParams.language,
+    query: ruleParams.query,
+    savedId: ruleParams.savedId,
+    services,
+    index: inputIndex,
+    lists: exceptionItems,
+  });
+
+  const {
+    searchResult: thresholdResults,
+    searchErrors,
+    searchDuration: thresholdSearchDuration,
+  } = await findThresholdSignals({
+    inputIndexPattern: inputIndex,
+    from: tuple.from.toISOString(),
+    to: tuple.to.toISOString(),
+    services,
+    logger,
+    filter: esFilter,
+    threshold: ruleParams.threshold,
+    timestampOverride: ruleParams.timestampOverride,
+    buildRuleMessage,
+  });
 
-    const esFilter = await getFilter({
-      type: ruleParams.type,
-      filters: ruleParams.filters ? ruleParams.filters.concat(bucketFilters) : bucketFilters,
-      language: ruleParams.language,
-      query: ruleParams.query,
-      savedId: ruleParams.savedId,
-      services,
-      index: inputIndex,
-      lists: exceptionItems,
-    });
+  const {
+    success,
+    bulkCreateDuration,
+    createdItemsCount,
+    createdItems,
+    errors,
+  } = await bulkCreateThresholdSignals({
+    someResult: thresholdResults,
+    ruleSO: rule,
+    filter: esFilter,
+    services,
+    logger,
+    inputIndexPattern: inputIndex,
+    signalsIndex: ruleParams.outputIndex,
+    startedAt,
+    from: tuple.from.toDate(),
+    thresholdSignalHistory,
+    bulkCreate,
+    wrapHits,
+  });
 
-    const {
+  result = mergeReturns([
+    result,
+    createSearchAfterReturnTypeFromResponse({
       searchResult: thresholdResults,
-      searchErrors,
-      searchDuration: thresholdSearchDuration,
-    } = await findThresholdSignals({
-      inputIndexPattern: inputIndex,
-      from: tuple.from.toISOString(),
-      to: tuple.to.toISOString(),
-      services,
-      logger,
-      filter: esFilter,
-      threshold: ruleParams.threshold,
       timestampOverride: ruleParams.timestampOverride,
-      buildRuleMessage,
-    });
-
-    const {
+    }),
+    createSearchAfterReturnType({
       success,
-      bulkCreateDuration,
-      createdItemsCount,
-      createdItems,
-      errors,
-    } = await bulkCreateThresholdSignals({
-      someResult: thresholdResults,
-      ruleSO: rule,
-      filter: esFilter,
-      services,
-      logger,
-      inputIndexPattern: inputIndex,
-      signalsIndex: ruleParams.outputIndex,
-      startedAt,
-      from: tuple.from.toDate(),
-      thresholdSignalHistory,
-      bulkCreate,
-      wrapHits,
-    });
-
-    result = mergeReturns([
-      result,
-      createSearchAfterReturnTypeFromResponse({
-        searchResult: thresholdResults,
-        timestampOverride: ruleParams.timestampOverride,
-      }),
-      createSearchAfterReturnType({
-        success,
-        errors: [...errors, ...previousSearchErrors, ...searchErrors],
-        createdSignalsCount: createdItemsCount,
-        createdSignals: createdItems,
-        bulkCreateTimes: bulkCreateDuration ? [bulkCreateDuration] : [],
-        searchAfterTimes: [thresholdSearchDuration],
-      }),
-    ]);
-  }
+      errors: [...errors, ...previousSearchErrors, ...searchErrors],
+      createdSignalsCount: createdItemsCount,
+      createdSignals: createdItems,
+      bulkCreateTimes: bulkCreateDuration ? [bulkCreateDuration] : [],
+      searchAfterTimes: [thresholdSearchDuration],
+    }),
+  ]);
   return result;
 };
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/search_after_bulk_create.test.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/search_after_bulk_create.test.ts
index e4eb7e854f670f..184b49c2d6c7b9 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/search_after_bulk_create.test.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/search_after_bulk_create.test.ts
@@ -44,14 +44,14 @@ describe('searchAfterAndBulkCreate', () => {
   const sampleParams = getQueryRuleParams();
   const ruleSO = sampleRuleSO(getQueryRuleParams());
   sampleParams.maxSignals = 30;
-  let tuples: RuleRangeTuple[];
+  let tuple: RuleRangeTuple;
   beforeEach(() => {
     jest.clearAllMocks();
     listClient = listMock.getListClient();
     listClient.searchListItemByValues = jest.fn().mockResolvedValue([]);
     inputIndexPattern = ['auditbeat-*'];
     mockService = alertsMock.createAlertServices();
-    ({ tuples } = getRuleRangeTuples({
+    tuple = getRuleRangeTuples({
       logger: mockLogger,
       previousStartedAt: new Date(),
       from: sampleParams.from,
@@ -59,7 +59,7 @@ describe('searchAfterAndBulkCreate', () => {
       interval: '5m',
       maxSignals: sampleParams.maxSignals,
       buildRuleMessage,
-    }));
+    }).tuples[0];
     bulkCreate = bulkCreateFactory(
       mockLogger,
       mockService.scopedClusterClient.asCurrentUser,
@@ -174,7 +174,7 @@ describe('searchAfterAndBulkCreate', () => {
     ];
 
     const { success, createdSignalsCount, lastLookBackDate } = await searchAfterAndBulkCreate({
-      tuples,
+      tuple,
       ruleSO,
       listClient,
       exceptionsList: [exceptionItem],
@@ -279,7 +279,7 @@ describe('searchAfterAndBulkCreate', () => {
     ];
     const { success, createdSignalsCount, lastLookBackDate } = await searchAfterAndBulkCreate({
       ruleSO,
-      tuples,
+      tuple,
       listClient,
       exceptionsList: [exceptionItem],
       services: mockService,
@@ -357,7 +357,7 @@ describe('searchAfterAndBulkCreate', () => {
     ];
     const { success, createdSignalsCount, lastLookBackDate } = await searchAfterAndBulkCreate({
       ruleSO,
-      tuples,
+      tuple,
       listClient,
       exceptionsList: [exceptionItem],
       services: mockService,
@@ -416,7 +416,7 @@ describe('searchAfterAndBulkCreate', () => {
     ];
     const { success, createdSignalsCount, lastLookBackDate } = await searchAfterAndBulkCreate({
       ruleSO,
-      tuples,
+      tuple,
       listClient,
       exceptionsList: [exceptionItem],
       services: mockService,
@@ -495,7 +495,7 @@ describe('searchAfterAndBulkCreate', () => {
 
     const { success, createdSignalsCount, lastLookBackDate } = await searchAfterAndBulkCreate({
       ruleSO,
-      tuples,
+      tuple,
       listClient,
       exceptionsList: [],
       services: mockService,
@@ -550,7 +550,7 @@ describe('searchAfterAndBulkCreate', () => {
     ];
     const { success, createdSignalsCount, lastLookBackDate } = await searchAfterAndBulkCreate({
       ruleSO,
-      tuples,
+      tuple,
       listClient,
       exceptionsList: [exceptionItem],
       services: mockService,
@@ -569,11 +569,6 @@ describe('searchAfterAndBulkCreate', () => {
     expect(mockService.scopedClusterClient.asCurrentUser.search).toHaveBeenCalledTimes(1);
     expect(createdSignalsCount).toEqual(0); // should not create any signals because all events were in the allowlist
     expect(lastLookBackDate).toEqual(new Date('2020-04-20T21:27:45+0000'));
-    // I don't like testing log statements since logs change but this is the best
-    // way I can think of to ensure this section is getting hit with this test case.
-    expect(((mockLogger.debug as unknown) as jest.Mock).mock.calls[7][0]).toContain(
-      'ran out of sort ids to sort on name: "fake name" id: "fake id" rule id: "fake rule id" signals index: "fakeindex"'
-    );
   });
 
   test('should return success when no sortId present but search results are in the allowlist', async () => {
@@ -627,7 +622,7 @@ describe('searchAfterAndBulkCreate', () => {
     ];
     const { success, createdSignalsCount, lastLookBackDate } = await searchAfterAndBulkCreate({
       ruleSO,
-      tuples,
+      tuple,
       listClient,
       exceptionsList: [exceptionItem],
       services: mockService,
@@ -701,7 +696,7 @@ describe('searchAfterAndBulkCreate', () => {
     );
     const { success, createdSignalsCount, lastLookBackDate } = await searchAfterAndBulkCreate({
       ruleSO,
-      tuples,
+      tuple,
       listClient,
       exceptionsList: [],
       services: mockService,
@@ -746,7 +741,7 @@ describe('searchAfterAndBulkCreate', () => {
     const { success, createdSignalsCount, lastLookBackDate } = await searchAfterAndBulkCreate({
       listClient,
       exceptionsList: [exceptionItem],
-      tuples,
+      tuple,
       ruleSO,
       services: mockService,
       logger: mockLogger,
@@ -793,7 +788,7 @@ describe('searchAfterAndBulkCreate', () => {
     const { success, createdSignalsCount, lastLookBackDate } = await searchAfterAndBulkCreate({
       listClient,
       exceptionsList: [exceptionItem],
-      tuples,
+      tuple,
       ruleSO,
       services: mockService,
       logger: mockLogger,
@@ -854,7 +849,7 @@ describe('searchAfterAndBulkCreate', () => {
     const { success, createdSignalsCount, lastLookBackDate } = await searchAfterAndBulkCreate({
       listClient,
       exceptionsList: [exceptionItem],
-      tuples,
+      tuple,
       ruleSO,
       services: mockService,
       logger: mockLogger,
@@ -979,7 +974,7 @@ describe('searchAfterAndBulkCreate', () => {
       errors,
     } = await searchAfterAndBulkCreate({
       ruleSO,
-      tuples,
+      tuple,
       listClient,
       exceptionsList: [],
       services: mockService,
@@ -1075,7 +1070,7 @@ describe('searchAfterAndBulkCreate', () => {
     const { success, createdSignalsCount, lastLookBackDate } = await searchAfterAndBulkCreate({
       enrichment: mockEnrichment,
       ruleSO,
-      tuples,
+      tuple,
       listClient,
       exceptionsList: [],
       services: mockService,
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/search_after_bulk_create.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/search_after_bulk_create.ts
index bb2e57b0606e59..eb4af0c38ce254 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/search_after_bulk_create.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/search_after_bulk_create.ts
@@ -23,7 +23,7 @@ import { SearchAfterAndBulkCreateParams, SearchAfterAndBulkCreateReturnType } fr
 
 // search_after through documents and re-index using bulk endpoint.
 export const searchAfterAndBulkCreate = async ({
-  tuples: totalToFromTuples,
+  tuple,
   ruleSO,
   exceptionsList,
   services,
@@ -49,150 +49,143 @@ export const searchAfterAndBulkCreate = async ({
   // to ensure we don't exceed maxSignals
   let signalsCreatedCount = 0;
 
-  const tuplesToBeLogged = [...totalToFromTuples];
-  logger.debug(buildRuleMessage(`totalToFromTuples: ${totalToFromTuples.length}`));
-
-  while (totalToFromTuples.length > 0) {
-    const tuple = totalToFromTuples.pop();
-    if (tuple == null || tuple.to == null || tuple.from == null) {
-      logger.error(buildRuleMessage(`[-] malformed date tuple`));
-      return createSearchAfterReturnType({
-        success: false,
-        errors: ['malformed date tuple'],
-      });
-    }
-    signalsCreatedCount = 0;
-    while (signalsCreatedCount < tuple.maxSignals) {
-      try {
-        let mergedSearchResults = createSearchResultReturnType();
-        logger.debug(buildRuleMessage(`sortIds: ${sortIds}`));
+  if (tuple == null || tuple.to == null || tuple.from == null) {
+    logger.error(buildRuleMessage(`[-] malformed date tuple`));
+    return createSearchAfterReturnType({
+      success: false,
+      errors: ['malformed date tuple'],
+    });
+  }
+  signalsCreatedCount = 0;
+  while (signalsCreatedCount < tuple.maxSignals) {
+    try {
+      let mergedSearchResults = createSearchResultReturnType();
+      logger.debug(buildRuleMessage(`sortIds: ${sortIds}`));
 
-        if (hasSortId) {
-          const { searchResult, searchDuration, searchErrors } = await singleSearchAfter({
-            buildRuleMessage,
-            searchAfterSortIds: sortIds,
-            index: inputIndexPattern,
-            from: tuple.from.toISOString(),
-            to: tuple.to.toISOString(),
-            services,
-            logger,
-            // @ts-expect-error please, declare a type explicitly instead of unknown
-            filter,
-            pageSize: Math.ceil(Math.min(tuple.maxSignals, pageSize)),
+      if (hasSortId) {
+        const { searchResult, searchDuration, searchErrors } = await singleSearchAfter({
+          buildRuleMessage,
+          searchAfterSortIds: sortIds,
+          index: inputIndexPattern,
+          from: tuple.from.toISOString(),
+          to: tuple.to.toISOString(),
+          services,
+          logger,
+          // @ts-expect-error please, declare a type explicitly instead of unknown
+          filter,
+          pageSize: Math.ceil(Math.min(tuple.maxSignals, pageSize)),
+          timestampOverride: ruleParams.timestampOverride,
+        });
+        mergedSearchResults = mergeSearchResults([mergedSearchResults, searchResult]);
+        toReturn = mergeReturns([
+          toReturn,
+          createSearchAfterReturnTypeFromResponse({
+            searchResult: mergedSearchResults,
             timestampOverride: ruleParams.timestampOverride,
-          });
-          mergedSearchResults = mergeSearchResults([mergedSearchResults, searchResult]);
-          toReturn = mergeReturns([
-            toReturn,
-            createSearchAfterReturnTypeFromResponse({
-              searchResult: mergedSearchResults,
-              timestampOverride: ruleParams.timestampOverride,
-            }),
-            createSearchAfterReturnType({
-              searchAfterTimes: [searchDuration],
-              errors: searchErrors,
-            }),
-          ]);
+          }),
+          createSearchAfterReturnType({
+            searchAfterTimes: [searchDuration],
+            errors: searchErrors,
+          }),
+        ]);
 
-          const lastSortIds = getSafeSortIds(
-            searchResult.hits.hits[searchResult.hits.hits.length - 1]?.sort
-          );
-          if (lastSortIds != null && lastSortIds.length !== 0) {
-            sortIds = lastSortIds;
-            hasSortId = true;
-          } else {
-            hasSortId = false;
-          }
+        const lastSortIds = getSafeSortIds(
+          searchResult.hits.hits[searchResult.hits.hits.length - 1]?.sort
+        );
+        if (lastSortIds != null && lastSortIds.length !== 0) {
+          sortIds = lastSortIds;
+          hasSortId = true;
+        } else {
+          hasSortId = false;
         }
+      }
+
+      // determine if there are any candidate signals to be processed
+      const totalHits = createTotalHitsFromSearchResult({ searchResult: mergedSearchResults });
+      logger.debug(buildRuleMessage(`totalHits: ${totalHits}`));
+      logger.debug(
+        buildRuleMessage(`searchResult.hit.hits.length: ${mergedSearchResults.hits.hits.length}`)
+      );
 
-        // determine if there are any candidate signals to be processed
-        const totalHits = createTotalHitsFromSearchResult({ searchResult: mergedSearchResults });
-        logger.debug(buildRuleMessage(`totalHits: ${totalHits}`));
+      if (totalHits === 0 || mergedSearchResults.hits.hits.length === 0) {
         logger.debug(
-          buildRuleMessage(`searchResult.hit.hits.length: ${mergedSearchResults.hits.hits.length}`)
+          buildRuleMessage(
+            `${
+              totalHits === 0 ? 'totalHits' : 'searchResult.hits.hits.length'
+            } was 0, exiting early`
+          )
         );
+        break;
+      }
 
-        if (totalHits === 0 || mergedSearchResults.hits.hits.length === 0) {
-          logger.debug(
-            buildRuleMessage(
-              `${
-                totalHits === 0 ? 'totalHits' : 'searchResult.hits.hits.length'
-              } was 0, exiting and moving on to next tuple`
-            )
-          );
-          break;
-        }
-
-        // filter out the search results that match with the values found in the list.
-        // the resulting set are signals to be indexed, given they are not duplicates
-        // of signals already present in the signals index.
-        const filteredEvents = await filterEventsAgainstList({
-          listClient,
-          exceptionsList,
-          logger,
-          eventSearchResult: mergedSearchResults,
-          buildRuleMessage,
-        });
-
-        // only bulk create if there are filteredEvents leftover
-        // if there isn't anything after going through the value list filter
-        // skip the call to bulk create and proceed to the next search_after,
-        // if there is a sort id to continue the search_after with.
-        if (filteredEvents.hits.hits.length !== 0) {
-          // make sure we are not going to create more signals than maxSignals allows
-          if (signalsCreatedCount + filteredEvents.hits.hits.length > tuple.maxSignals) {
-            filteredEvents.hits.hits = filteredEvents.hits.hits.slice(
-              0,
-              tuple.maxSignals - signalsCreatedCount
-            );
-          }
-          const enrichedEvents = await enrichment(filteredEvents);
-          const wrappedDocs = wrapHits(enrichedEvents.hits.hits);
+      // filter out the search results that match with the values found in the list.
+      // the resulting set are signals to be indexed, given they are not duplicates
+      // of signals already present in the signals index.
+      const filteredEvents = await filterEventsAgainstList({
+        listClient,
+        exceptionsList,
+        logger,
+        eventSearchResult: mergedSearchResults,
+        buildRuleMessage,
+      });
 
-          const {
-            bulkCreateDuration: bulkDuration,
-            createdItemsCount: createdCount,
-            createdItems,
-            success: bulkSuccess,
-            errors: bulkErrors,
-          } = await bulkCreate(wrappedDocs);
-          toReturn = mergeReturns([
-            toReturn,
-            createSearchAfterReturnType({
-              success: bulkSuccess,
-              createdSignalsCount: createdCount,
-              createdSignals: createdItems,
-              bulkCreateTimes: bulkDuration ? [bulkDuration] : undefined,
-              errors: bulkErrors,
-            }),
-          ]);
-          signalsCreatedCount += createdCount;
-          logger.debug(buildRuleMessage(`created ${createdCount} signals`));
-          logger.debug(buildRuleMessage(`signalsCreatedCount: ${signalsCreatedCount}`));
-          logger.debug(
-            buildRuleMessage(`enrichedEvents.hits.hits: ${enrichedEvents.hits.hits.length}`)
+      // only bulk create if there are filteredEvents leftover
+      // if there isn't anything after going through the value list filter
+      // skip the call to bulk create and proceed to the next search_after,
+      // if there is a sort id to continue the search_after with.
+      if (filteredEvents.hits.hits.length !== 0) {
+        // make sure we are not going to create more signals than maxSignals allows
+        if (signalsCreatedCount + filteredEvents.hits.hits.length > tuple.maxSignals) {
+          filteredEvents.hits.hits = filteredEvents.hits.hits.slice(
+            0,
+            tuple.maxSignals - signalsCreatedCount
           );
-
-          sendAlertTelemetryEvents(logger, eventsTelemetry, enrichedEvents, buildRuleMessage);
         }
+        const enrichedEvents = await enrichment(filteredEvents);
+        const wrappedDocs = wrapHits(enrichedEvents.hits.hits);
 
-        if (!hasSortId) {
-          logger.debug(buildRuleMessage('ran out of sort ids to sort on'));
-          break;
-        }
-      } catch (exc: unknown) {
-        logger.error(buildRuleMessage(`[-] search_after and bulk threw an error ${exc}`));
-        return mergeReturns([
+        const {
+          bulkCreateDuration: bulkDuration,
+          createdItemsCount: createdCount,
+          createdItems,
+          success: bulkSuccess,
+          errors: bulkErrors,
+        } = await bulkCreate(wrappedDocs);
+        toReturn = mergeReturns([
           toReturn,
           createSearchAfterReturnType({
-            success: false,
-            errors: [`${exc}`],
+            success: bulkSuccess,
+            createdSignalsCount: createdCount,
+            createdSignals: createdItems,
+            bulkCreateTimes: bulkDuration ? [bulkDuration] : undefined,
+            errors: bulkErrors,
           }),
         ]);
+        signalsCreatedCount += createdCount;
+        logger.debug(buildRuleMessage(`created ${createdCount} signals`));
+        logger.debug(buildRuleMessage(`signalsCreatedCount: ${signalsCreatedCount}`));
+        logger.debug(
+          buildRuleMessage(`enrichedEvents.hits.hits: ${enrichedEvents.hits.hits.length}`)
+        );
+
+        sendAlertTelemetryEvents(logger, eventsTelemetry, enrichedEvents, buildRuleMessage);
+      }
+
+      if (!hasSortId) {
+        logger.debug(buildRuleMessage('ran out of sort ids to sort on'));
+        break;
       }
+    } catch (exc: unknown) {
+      logger.error(buildRuleMessage(`[-] search_after and bulk threw an error ${exc}`));
+      return mergeReturns([
+        toReturn,
+        createSearchAfterReturnType({
+          success: false,
+          errors: [`${exc}`],
+        }),
+      ]);
     }
   }
   logger.debug(buildRuleMessage(`[+] completed bulk index of ${toReturn.createdSignalsCount}`));
-  toReturn.totalToFromTuples = tuplesToBeLogged;
   return toReturn;
 };
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_rule_alert_type.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_rule_alert_type.ts
index 0a2e22bc44b60e..bb1e50c14d4014 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_rule_alert_type.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_rule_alert_type.ts
@@ -235,74 +235,86 @@ export const signalRulesAlertType = ({
 
         if (isMlRule(type)) {
           const mlRuleSO = asTypeSpecificSO(savedObject, machineLearningRuleParams);
-          result = await mlExecutor({
-            rule: mlRuleSO,
-            ml,
-            listClient,
-            exceptionItems,
-            services,
-            logger,
-            buildRuleMessage,
-            bulkCreate,
-            wrapHits,
-          });
+          for (const tuple of tuples) {
+            result = await mlExecutor({
+              rule: mlRuleSO,
+              tuple,
+              ml,
+              listClient,
+              exceptionItems,
+              services,
+              logger,
+              buildRuleMessage,
+              bulkCreate,
+              wrapHits,
+            });
+          }
         } else if (isThresholdRule(type)) {
           const thresholdRuleSO = asTypeSpecificSO(savedObject, thresholdRuleParams);
-          result = await thresholdExecutor({
-            rule: thresholdRuleSO,
-            tuples,
-            exceptionItems,
-            services,
-            version,
-            logger,
-            buildRuleMessage,
-            startedAt,
-            bulkCreate,
-            wrapHits,
-          });
+          for (const tuple of tuples) {
+            result = await thresholdExecutor({
+              rule: thresholdRuleSO,
+              tuple,
+              exceptionItems,
+              services,
+              version,
+              logger,
+              buildRuleMessage,
+              startedAt,
+              bulkCreate,
+              wrapHits,
+            });
+          }
         } else if (isThreatMatchRule(type)) {
           const threatRuleSO = asTypeSpecificSO(savedObject, threatRuleParams);
-          result = await threatMatchExecutor({
-            rule: threatRuleSO,
-            tuples,
-            listClient,
-            exceptionItems,
-            services,
-            version,
-            searchAfterSize,
-            logger,
-            eventsTelemetry,
-            buildRuleMessage,
-            bulkCreate,
-            wrapHits,
-          });
+          for (const tuple of tuples) {
+            result = await threatMatchExecutor({
+              rule: threatRuleSO,
+              tuple,
+              listClient,
+              exceptionItems,
+              services,
+              version,
+              searchAfterSize,
+              logger,
+              eventsTelemetry,
+              buildRuleMessage,
+              bulkCreate,
+              wrapHits,
+            });
+          }
         } else if (isQueryRule(type)) {
           const queryRuleSO = validateQueryRuleTypes(savedObject);
-          result = await queryExecutor({
-            rule: queryRuleSO,
-            tuples,
-            listClient,
-            exceptionItems,
-            services,
-            version,
-            searchAfterSize,
-            logger,
-            eventsTelemetry,
-            buildRuleMessage,
-            bulkCreate,
-            wrapHits,
-          });
+          for (const tuple of tuples) {
+            result = await queryExecutor({
+              rule: queryRuleSO,
+              tuple,
+              listClient,
+              exceptionItems,
+              services,
+              version,
+              searchAfterSize,
+              logger,
+              eventsTelemetry,
+              buildRuleMessage,
+              bulkCreate,
+              wrapHits,
+            });
+          }
         } else if (isEqlRule(type)) {
           const eqlRuleSO = asTypeSpecificSO(savedObject, eqlRuleParams);
-          result = await eqlExecutor({
-            rule: eqlRuleSO,
-            exceptionItems,
-            services,
-            version,
-            searchAfterSize,
-            bulkCreate,
-            logger,
-          });
+          for (const tuple of tuples) {
+            result = await eqlExecutor({
+              rule: eqlRuleSO,
+              tuple,
+              exceptionItems,
+              services,
+              version,
+              searchAfterSize,
+              bulkCreate,
+              logger,
+            });
+          }
         } else {
           throw new Error(`unknown rule type ${type}`);
         }
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/threat_mapping/create_threat_signal.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/threat_mapping/create_threat_signal.ts
index 3e30a08f1ae69c..806f5e47608e40 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/threat_mapping/create_threat_signal.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/threat_mapping/create_threat_signal.ts
@@ -13,7 +13,7 @@ import { CreateThreatSignalOptions } from './types';
 import { SearchAfterAndBulkCreateReturnType } from '../types';
 
 export const createThreatSignal = async ({
-  tuples,
+  tuple,
   threatMapping,
   threatEnrichment,
   query,
@@ -70,7 +70,7 @@ export const createThreatSignal = async ({
     );
 
     const result = await searchAfterAndBulkCreate({
-      tuples,
+      tuple,
       listClient,
       exceptionsList: exceptionItems,
       ruleSO,
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/threat_mapping/create_threat_signals.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/threat_mapping/create_threat_signals.ts
index 5054ab1b2cca50..169a820392a6e6 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/threat_mapping/create_threat_signals.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/threat_mapping/create_threat_signals.ts
@@ -15,7 +15,7 @@ import { combineConcurrentResults } from './utils';
 import { buildThreatEnrichment } from './build_threat_enrichment';
 
 export const createThreatSignals = async ({
-  tuples,
+  tuple,
   threatMapping,
   query,
   inputIndex,
@@ -104,7 +104,7 @@ export const createThreatSignals = async ({
     const concurrentSearchesPerformed = chunks.map<Promise<SearchAfterAndBulkCreateReturnType>>(
       (slicedChunk) =>
         createThreatSignal({
-          tuples,
+          tuple,
           threatEnrichment,
           threatMapping,
           query,
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/threat_mapping/types.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/threat_mapping/types.ts
index 34b064b0f88053..ded79fc647ac41 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/threat_mapping/types.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/threat_mapping/types.ts
@@ -40,7 +40,7 @@ import { ThreatRuleParams } from '../../schemas/rule_schemas';
 export type SortOrderOrUndefined = 'asc' | 'desc' | undefined;
 
 export interface CreateThreatSignalsOptions {
-  tuples: RuleRangeTuple[];
+  tuple: RuleRangeTuple;
   threatMapping: ThreatMapping;
   query: string;
   inputIndex: string[];
@@ -70,7 +70,7 @@ export interface CreateThreatSignalsOptions {
 }
 
 export interface CreateThreatSignalOptions {
-  tuples: RuleRangeTuple[];
+  tuple: RuleRangeTuple;
   threatMapping: ThreatMapping;
   threatEnrichment: SignalsEnrichment;
   query: string;
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/types.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/types.ts
index c35eb04ba12707..8a6ce91b2575ab 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/types.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/types.ts
@@ -262,11 +262,11 @@ export type WrapHits = (
 ) => Array<BaseHit<{ '@timestamp': string }>>;
 
 export interface SearchAfterAndBulkCreateParams {
-  tuples: Array<{
+  tuple: {
     to: moment.Moment;
     from: moment.Moment;
     maxSignals: number;
-  }>;
+  };
   ruleSO: SavedObject<AlertAttributes>;
   services: AlertServices<AlertInstanceState, AlertInstanceContext, 'default'>;
   listClient: ListClient;
diff --git a/x-pack/plugins/security_solution/server/lib/telemetry/sender.ts b/x-pack/plugins/security_solution/server/lib/telemetry/sender.ts
index baf4fb2d2cfd0d..2b3c002a9b2aeb 100644
--- a/x-pack/plugins/security_solution/server/lib/telemetry/sender.ts
+++ b/x-pack/plugins/security_solution/server/lib/telemetry/sender.ts
@@ -347,6 +347,9 @@ const allowlistBaseEventFields: AllowlistFields = {
     direction: true,
   },
   registry: {
+    data: {
+      strings: true,
+    },
     hive: true,
     key: true,
     path: true,
diff --git a/x-pack/plugins/security_solution/server/utils/serialized_query.ts b/x-pack/plugins/security_solution/server/utils/serialized_query.ts
index fb5009eefa3180..7f8603ccab4b76 100644
--- a/x-pack/plugins/security_solution/server/utils/serialized_query.ts
+++ b/x-pack/plugins/security_solution/server/utils/serialized_query.ts
@@ -7,7 +7,7 @@
 
 import { isEmpty, isPlainObject, isString } from 'lodash/fp';
 
-import { JsonObject } from '../../../../../src/plugins/kibana_utils/common';
+import { JsonObject } from '@kbn/common-utils';
 
 export const parseFilterQuery = (filterQuery: string): JsonObject => {
   try {
diff --git a/x-pack/plugins/task_manager/server/config.test.ts b/x-pack/plugins/task_manager/server/config.test.ts
index 85a139956ae966..947b1fd84467e1 100644
--- a/x-pack/plugins/task_manager/server/config.test.ts
+++ b/x-pack/plugins/task_manager/server/config.test.ts
@@ -20,6 +20,7 @@ describe('config validation', () => {
         "monitored_aggregated_stats_refresh_rate": 60000,
         "monitored_stats_required_freshness": 4000,
         "monitored_stats_running_average_window": 50,
+        "monitored_stats_warn_delayed_task_start_in_seconds": 60,
         "monitored_task_execution_thresholds": Object {
           "custom": Object {},
           "default": Object {
@@ -68,6 +69,7 @@ describe('config validation', () => {
         "monitored_aggregated_stats_refresh_rate": 60000,
         "monitored_stats_required_freshness": 4000,
         "monitored_stats_running_average_window": 50,
+        "monitored_stats_warn_delayed_task_start_in_seconds": 60,
         "monitored_task_execution_thresholds": Object {
           "custom": Object {},
           "default": Object {
@@ -103,6 +105,7 @@ describe('config validation', () => {
         "monitored_aggregated_stats_refresh_rate": 60000,
         "monitored_stats_required_freshness": 4000,
         "monitored_stats_running_average_window": 50,
+        "monitored_stats_warn_delayed_task_start_in_seconds": 60,
         "monitored_task_execution_thresholds": Object {
           "custom": Object {
             "alerting:always-fires": Object {
diff --git a/x-pack/plugins/task_manager/server/config.ts b/x-pack/plugins/task_manager/server/config.ts
index 3ebfe7da7c3f9b..5dee66cf113b28 100644
--- a/x-pack/plugins/task_manager/server/config.ts
+++ b/x-pack/plugins/task_manager/server/config.ts
@@ -18,6 +18,7 @@ export const DEFAULT_VERSION_CONFLICT_THRESHOLD = 80;
 // Refresh aggregated monitored stats at a default rate of once a minute
 export const DEFAULT_MONITORING_REFRESH_RATE = 60 * 1000;
 export const DEFAULT_MONITORING_STATS_RUNNING_AVERGAE_WINDOW = 50;
+export const DEFAULT_MONITORING_STATS_WARN_DELAYED_TASK_START_IN_SECONDS = 60;
 
 export const taskExecutionFailureThresholdSchema = schema.object(
   {
@@ -109,6 +110,10 @@ export const configSchema = schema.object(
         defaultValue: {},
       }),
     }),
+    /* The amount of seconds we allow a task to delay before printing a warning server log */
+    monitored_stats_warn_delayed_task_start_in_seconds: schema.number({
+      defaultValue: DEFAULT_MONITORING_STATS_WARN_DELAYED_TASK_START_IN_SECONDS,
+    }),
   },
   {
     validate: (config) => {
diff --git a/x-pack/plugins/task_manager/server/integration_tests/managed_configuration.test.ts b/x-pack/plugins/task_manager/server/integration_tests/managed_configuration.test.ts
index f7ea6cea538577..f6ee8d8a78ddce 100644
--- a/x-pack/plugins/task_manager/server/integration_tests/managed_configuration.test.ts
+++ b/x-pack/plugins/task_manager/server/integration_tests/managed_configuration.test.ts
@@ -37,6 +37,7 @@ describe('managed configuration', () => {
       version_conflict_threshold: 80,
       max_poll_inactivity_cycles: 10,
       monitored_aggregated_stats_refresh_rate: 60000,
+      monitored_stats_warn_delayed_task_start_in_seconds: 60,
       monitored_stats_required_freshness: 4000,
       monitored_stats_running_average_window: 50,
       request_capacity: 1000,
diff --git a/x-pack/plugins/task_manager/server/lib/calculate_health_status.mock.ts b/x-pack/plugins/task_manager/server/lib/calculate_health_status.mock.ts
new file mode 100644
index 00000000000000..f34a26560133b2
--- /dev/null
+++ b/x-pack/plugins/task_manager/server/lib/calculate_health_status.mock.ts
@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+const createCalculateHealthStatusMock = () => {
+  return jest.fn();
+};
+
+export const calculateHealthStatusMock = {
+  create: createCalculateHealthStatusMock,
+};
diff --git a/x-pack/plugins/task_manager/server/lib/calculate_health_status.ts b/x-pack/plugins/task_manager/server/lib/calculate_health_status.ts
new file mode 100644
index 00000000000000..7a6bc598621001
--- /dev/null
+++ b/x-pack/plugins/task_manager/server/lib/calculate_health_status.ts
@@ -0,0 +1,79 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { isString } from 'lodash';
+import { JsonValue } from '@kbn/common-utils';
+import { HealthStatus, RawMonitoringStats } from '../monitoring';
+import { TaskManagerConfig } from '../config';
+
+export function calculateHealthStatus(
+  summarizedStats: RawMonitoringStats,
+  config: TaskManagerConfig
+): HealthStatus {
+  const now = Date.now();
+
+  // if "hot" health stats are any more stale than monitored_stats_required_freshness (pollInterval +1s buffer by default)
+  // consider the system unhealthy
+  const requiredHotStatsFreshness: number = config.monitored_stats_required_freshness;
+
+  // if "cold" health stats are any more stale than the configured refresh (+ a buffer), consider the system unhealthy
+  const requiredColdStatsFreshness: number = config.monitored_aggregated_stats_refresh_rate * 1.5;
+
+  /**
+   * If the monitored stats aren't fresh, return a red status
+   */
+  const healthStatus =
+    hasStatus(summarizedStats.stats, HealthStatus.Error) ||
+    hasExpiredHotTimestamps(summarizedStats, now, requiredHotStatsFreshness) ||
+    hasExpiredColdTimestamps(summarizedStats, now, requiredColdStatsFreshness)
+      ? HealthStatus.Error
+      : hasStatus(summarizedStats.stats, HealthStatus.Warning)
+      ? HealthStatus.Warning
+      : HealthStatus.OK;
+  return healthStatus;
+}
+
+function hasStatus(stats: RawMonitoringStats['stats'], status: HealthStatus): boolean {
+  return Object.values(stats)
+    .map((stat) => stat?.status === status)
+    .includes(true);
+}
+
+/**
+ * If certain "hot" stats are not fresh, then the _health api will should return a Red status
+ * @param monitoringStats The monitored stats
+ * @param now The time to compare against
+ * @param requiredFreshness How fresh should these stats be
+ */
+function hasExpiredHotTimestamps(
+  monitoringStats: RawMonitoringStats,
+  now: number,
+  requiredFreshness: number
+): boolean {
+  const diff =
+    now -
+    getOldestTimestamp(
+      monitoringStats.last_update,
+      monitoringStats.stats.runtime?.value.polling.last_successful_poll
+    );
+  return diff > requiredFreshness;
+}
+
+function hasExpiredColdTimestamps(
+  monitoringStats: RawMonitoringStats,
+  now: number,
+  requiredFreshness: number
+): boolean {
+  return now - getOldestTimestamp(monitoringStats.stats.workload?.timestamp) > requiredFreshness;
+}
+
+function getOldestTimestamp(...timestamps: Array<JsonValue | undefined>): number {
+  const validTimestamps = timestamps
+    .map((timestamp) => (isString(timestamp) ? Date.parse(timestamp) : NaN))
+    .filter((timestamp) => !isNaN(timestamp));
+  return validTimestamps.length ? Math.min(...validTimestamps) : 0;
+}
diff --git a/x-pack/plugins/rollup/public/index_pattern_creation/components/rollup_prompt/index.js b/x-pack/plugins/task_manager/server/lib/log_health_metrics.mock.ts
similarity index 63%
rename from x-pack/plugins/rollup/public/index_pattern_creation/components/rollup_prompt/index.js
rename to x-pack/plugins/task_manager/server/lib/log_health_metrics.mock.ts
index 1d9eff8227c0ac..96c0f686ad61e7 100644
--- a/x-pack/plugins/rollup/public/index_pattern_creation/components/rollup_prompt/index.js
+++ b/x-pack/plugins/task_manager/server/lib/log_health_metrics.mock.ts
@@ -5,4 +5,10 @@
  * 2.0.
  */
 
-export { RollupPrompt } from './rollup_prompt';
+const createLogHealthMetricsMock = () => {
+  return jest.fn();
+};
+
+export const logHealthMetricsMock = {
+  create: createLogHealthMetricsMock,
+};
diff --git a/x-pack/plugins/task_manager/server/lib/log_health_metrics.test.ts b/x-pack/plugins/task_manager/server/lib/log_health_metrics.test.ts
new file mode 100644
index 00000000000000..ccbbf81ebfa31b
--- /dev/null
+++ b/x-pack/plugins/task_manager/server/lib/log_health_metrics.test.ts
@@ -0,0 +1,262 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { merge } from 'lodash';
+import { loggingSystemMock } from 'src/core/server/mocks';
+import { configSchema, TaskManagerConfig } from '../config';
+import { HealthStatus } from '../monitoring';
+import { TaskPersistence } from '../monitoring/task_run_statistics';
+import { MonitoredHealth } from '../routes/health';
+import { logHealthMetrics } from './log_health_metrics';
+import { Logger } from '../../../../../src/core/server';
+
+jest.mock('./calculate_health_status', () => ({
+  calculateHealthStatus: jest.fn(),
+}));
+
+describe('logHealthMetrics', () => {
+  afterEach(() => {
+    const { calculateHealthStatus } = jest.requireMock('./calculate_health_status');
+    (calculateHealthStatus as jest.Mock<HealthStatus>).mockReset();
+  });
+  it('should log as debug if status is OK', () => {
+    const logger = loggingSystemMock.create().get();
+    const config = getTaskManagerConfig({
+      monitored_stats_warn_delayed_task_start_in_seconds: 60,
+    });
+    const health = getMockMonitoredHealth();
+
+    logHealthMetrics(health, logger, config);
+
+    const firstDebug = JSON.parse(
+      (logger as jest.Mocked<Logger>).debug.mock.calls[0][0].replace('Latest Monitored Stats: ', '')
+    );
+    expect(firstDebug).toMatchObject(health);
+  });
+
+  it('should log as warn if status is Warn', () => {
+    const logger = loggingSystemMock.create().get();
+    const config = getTaskManagerConfig({
+      monitored_stats_warn_delayed_task_start_in_seconds: 60,
+    });
+    const health = getMockMonitoredHealth();
+    const { calculateHealthStatus } = jest.requireMock('./calculate_health_status');
+    (calculateHealthStatus as jest.Mock<HealthStatus>).mockImplementation(
+      () => HealthStatus.Warning
+    );
+
+    logHealthMetrics(health, logger, config);
+
+    const logMessage = JSON.parse(
+      ((logger as jest.Mocked<Logger>).warn.mock.calls[0][0] as string).replace(
+        'Latest Monitored Stats: ',
+        ''
+      )
+    );
+    expect(logMessage).toMatchObject(health);
+  });
+
+  it('should log as error if status is Error', () => {
+    const logger = loggingSystemMock.create().get();
+    const config = getTaskManagerConfig({
+      monitored_stats_warn_delayed_task_start_in_seconds: 60,
+    });
+    const health = getMockMonitoredHealth();
+    const { calculateHealthStatus } = jest.requireMock('./calculate_health_status');
+    (calculateHealthStatus as jest.Mock<HealthStatus>).mockImplementation(() => HealthStatus.Error);
+
+    logHealthMetrics(health, logger, config);
+
+    const logMessage = JSON.parse(
+      ((logger as jest.Mocked<Logger>).error.mock.calls[0][0] as string).replace(
+        'Latest Monitored Stats: ',
+        ''
+      )
+    );
+    expect(logMessage).toMatchObject(health);
+  });
+
+  it('should log as warn if drift exceeds the threshold', () => {
+    const logger = loggingSystemMock.create().get();
+    const config = getTaskManagerConfig({
+      monitored_stats_warn_delayed_task_start_in_seconds: 60,
+    });
+    const health = getMockMonitoredHealth({
+      stats: {
+        runtime: {
+          value: {
+            drift: {
+              p99: 60000,
+            },
+          },
+        },
+      },
+    });
+
+    logHealthMetrics(health, logger, config);
+
+    expect((logger as jest.Mocked<Logger>).warn.mock.calls[0][0] as string).toBe(
+      `Detected delay task start of 60s (which exceeds configured value of 60s)`
+    );
+
+    const secondMessage = JSON.parse(
+      ((logger as jest.Mocked<Logger>).warn.mock.calls[1][0] as string).replace(
+        `Latest Monitored Stats: `,
+        ''
+      )
+    );
+    expect(secondMessage).toMatchObject(health);
+  });
+
+  it('should log as debug if there are no stats', () => {
+    const logger = loggingSystemMock.create().get();
+    const config = getTaskManagerConfig({
+      monitored_stats_warn_delayed_task_start_in_seconds: 60,
+    });
+    const health = {
+      id: '1',
+      status: HealthStatus.OK,
+      timestamp: new Date().toISOString(),
+      last_update: new Date().toISOString(),
+      stats: {},
+    };
+
+    logHealthMetrics(health, logger, config);
+
+    const firstDebug = JSON.parse(
+      (logger as jest.Mocked<Logger>).debug.mock.calls[0][0].replace('Latest Monitored Stats: ', '')
+    );
+    expect(firstDebug).toMatchObject(health);
+  });
+
+  it('should ignore capacity estimation status', () => {
+    const logger = loggingSystemMock.create().get();
+    const config = getTaskManagerConfig({
+      monitored_stats_warn_delayed_task_start_in_seconds: 60,
+    });
+    const health = getMockMonitoredHealth({
+      stats: {
+        capacity_estimation: {
+          status: HealthStatus.Warning,
+        },
+      },
+    });
+
+    logHealthMetrics(health, logger, config);
+
+    const { calculateHealthStatus } = jest.requireMock('./calculate_health_status');
+    expect(calculateHealthStatus).toBeCalledTimes(1);
+    expect(calculateHealthStatus.mock.calls[0][0].stats.capacity_estimation).toBeUndefined();
+  });
+});
+
+function getMockMonitoredHealth(overrides = {}): MonitoredHealth {
+  const stub: MonitoredHealth = {
+    id: '1',
+    status: HealthStatus.OK,
+    timestamp: new Date().toISOString(),
+    last_update: new Date().toISOString(),
+    stats: {
+      configuration: {
+        timestamp: new Date().toISOString(),
+        status: HealthStatus.OK,
+        value: {
+          max_workers: 10,
+          poll_interval: 3000,
+          max_poll_inactivity_cycles: 10,
+          request_capacity: 1000,
+          monitored_aggregated_stats_refresh_rate: 5000,
+          monitored_stats_running_average_window: 50,
+          monitored_task_execution_thresholds: {
+            default: {
+              error_threshold: 90,
+              warn_threshold: 80,
+            },
+            custom: {},
+          },
+        },
+      },
+      workload: {
+        timestamp: new Date().toISOString(),
+        status: HealthStatus.OK,
+        value: {
+          count: 4,
+          task_types: {
+            actions_telemetry: { count: 2, status: { idle: 2 } },
+            alerting_telemetry: { count: 1, status: { idle: 1 } },
+            session_cleanup: { count: 1, status: { idle: 1 } },
+          },
+          schedule: [],
+          overdue: 0,
+          overdue_non_recurring: 0,
+          estimatedScheduleDensity: [],
+          non_recurring: 20,
+          owner_ids: 2,
+          estimated_schedule_density: [],
+          capacity_requirments: {
+            per_minute: 150,
+            per_hour: 360,
+            per_day: 820,
+          },
+        },
+      },
+      runtime: {
+        timestamp: new Date().toISOString(),
+        status: HealthStatus.OK,
+        value: {
+          drift: {
+            p50: 1000,
+            p90: 2000,
+            p95: 2500,
+            p99: 3000,
+          },
+          drift_by_type: {},
+          load: {
+            p50: 1000,
+            p90: 2000,
+            p95: 2500,
+            p99: 3000,
+          },
+          execution: {
+            duration: {},
+            duration_by_persistence: {},
+            persistence: {
+              [TaskPersistence.Recurring]: 10,
+              [TaskPersistence.NonRecurring]: 10,
+              [TaskPersistence.Ephemeral]: 10,
+            },
+            result_frequency_percent_as_number: {},
+          },
+          polling: {
+            last_successful_poll: new Date().toISOString(),
+            duration: [500, 400, 3000],
+            claim_conflicts: [0, 100, 75],
+            claim_mismatches: [0, 100, 75],
+            result_frequency_percent_as_number: [
+              'NoTasksClaimed',
+              'NoTasksClaimed',
+              'NoTasksClaimed',
+            ],
+          },
+        },
+      },
+    },
+  };
+  return (merge(stub, overrides) as unknown) as MonitoredHealth;
+}
+
+function getTaskManagerConfig(overrides: Partial<TaskManagerConfig> = {}) {
+  return configSchema.validate(
+    overrides.monitored_stats_required_freshness
+      ? {
+          // use `monitored_stats_required_freshness` as poll interval otherwise we might
+          // fail validation as it must be greather than the poll interval
+          poll_interval: overrides.monitored_stats_required_freshness,
+          ...overrides,
+        }
+      : overrides
+  );
+}
diff --git a/x-pack/plugins/task_manager/server/lib/log_health_metrics.ts b/x-pack/plugins/task_manager/server/lib/log_health_metrics.ts
new file mode 100644
index 00000000000000..1c98b3272a82da
--- /dev/null
+++ b/x-pack/plugins/task_manager/server/lib/log_health_metrics.ts
@@ -0,0 +1,47 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { isEmpty } from 'lodash';
+import { Logger } from '../../../../../src/core/server';
+import { HealthStatus } from '../monitoring';
+import { TaskManagerConfig } from '../config';
+import { MonitoredHealth } from '../routes/health';
+import { calculateHealthStatus } from './calculate_health_status';
+
+export function logHealthMetrics(
+  monitoredHealth: MonitoredHealth,
+  logger: Logger,
+  config: TaskManagerConfig
+) {
+  const healthWithoutCapacity: MonitoredHealth = {
+    ...monitoredHealth,
+    stats: {
+      ...monitoredHealth.stats,
+      capacity_estimation: undefined,
+    },
+  };
+  const statusWithoutCapacity = calculateHealthStatus(healthWithoutCapacity, config);
+  let logAsWarn = statusWithoutCapacity === HealthStatus.Warning;
+  const logAsError =
+    statusWithoutCapacity === HealthStatus.Error && !isEmpty(monitoredHealth.stats);
+  const driftInSeconds = (monitoredHealth.stats.runtime?.value.drift.p99 ?? 0) / 1000;
+
+  if (driftInSeconds >= config.monitored_stats_warn_delayed_task_start_in_seconds) {
+    logger.warn(
+      `Detected delay task start of ${driftInSeconds}s (which exceeds configured value of ${config.monitored_stats_warn_delayed_task_start_in_seconds}s)`
+    );
+    logAsWarn = true;
+  }
+
+  if (logAsError) {
+    logger.error(`Latest Monitored Stats: ${JSON.stringify(monitoredHealth)}`);
+  } else if (logAsWarn) {
+    logger.warn(`Latest Monitored Stats: ${JSON.stringify(monitoredHealth)}`);
+  } else {
+    logger.debug(`Latest Monitored Stats: ${JSON.stringify(monitoredHealth)}`);
+  }
+}
diff --git a/x-pack/plugins/task_manager/server/monitoring/capacity_estimation.ts b/x-pack/plugins/task_manager/server/monitoring/capacity_estimation.ts
index 35eb0dfca7a6bc..073112f94e049b 100644
--- a/x-pack/plugins/task_manager/server/monitoring/capacity_estimation.ts
+++ b/x-pack/plugins/task_manager/server/monitoring/capacity_estimation.ts
@@ -7,7 +7,7 @@
 
 import { mapValues } from 'lodash';
 import stats from 'stats-lite';
-import { JsonObject } from 'src/plugins/kibana_utils/common';
+import { JsonObject } from '@kbn/common-utils';
 import { RawMonitoringStats, RawMonitoredStat, HealthStatus } from './monitoring_stats_stream';
 import { AveragedStat } from './task_run_calcultors';
 import { TaskPersistenceTypes } from './task_run_statistics';
diff --git a/x-pack/plugins/task_manager/server/monitoring/configuration_statistics.test.ts b/x-pack/plugins/task_manager/server/monitoring/configuration_statistics.test.ts
index b8f047836b750d..39a7658fb09e40 100644
--- a/x-pack/plugins/task_manager/server/monitoring/configuration_statistics.test.ts
+++ b/x-pack/plugins/task_manager/server/monitoring/configuration_statistics.test.ts
@@ -23,6 +23,7 @@ describe('Configuration Statistics Aggregator', () => {
       max_poll_inactivity_cycles: 10,
       request_capacity: 1000,
       monitored_aggregated_stats_refresh_rate: 5000,
+      monitored_stats_warn_delayed_task_start_in_seconds: 60,
       monitored_stats_running_average_window: 50,
       monitored_task_execution_thresholds: {
         default: {
diff --git a/x-pack/plugins/task_manager/server/monitoring/monitoring_stats_stream.test.ts b/x-pack/plugins/task_manager/server/monitoring/monitoring_stats_stream.test.ts
index 7e13e25457ed68..01bd86ec96db6b 100644
--- a/x-pack/plugins/task_manager/server/monitoring/monitoring_stats_stream.test.ts
+++ b/x-pack/plugins/task_manager/server/monitoring/monitoring_stats_stream.test.ts
@@ -9,7 +9,7 @@ import { TaskManagerConfig } from '../config';
 import { of, Subject } from 'rxjs';
 import { take, bufferCount } from 'rxjs/operators';
 import { createMonitoringStatsStream, AggregatedStat } from './monitoring_stats_stream';
-import { JsonValue } from 'src/plugins/kibana_utils/common';
+import { JsonValue } from '@kbn/common-utils';
 
 beforeEach(() => {
   jest.resetAllMocks();
@@ -27,6 +27,7 @@ describe('createMonitoringStatsStream', () => {
     max_poll_inactivity_cycles: 10,
     request_capacity: 1000,
     monitored_aggregated_stats_refresh_rate: 5000,
+    monitored_stats_warn_delayed_task_start_in_seconds: 60,
     monitored_stats_running_average_window: 50,
     monitored_task_execution_thresholds: {
       default: {
diff --git a/x-pack/plugins/task_manager/server/monitoring/monitoring_stats_stream.ts b/x-pack/plugins/task_manager/server/monitoring/monitoring_stats_stream.ts
index 8338bf3197162e..0d3b6ebf56de65 100644
--- a/x-pack/plugins/task_manager/server/monitoring/monitoring_stats_stream.ts
+++ b/x-pack/plugins/task_manager/server/monitoring/monitoring_stats_stream.ts
@@ -9,7 +9,7 @@ import { merge, of, Observable } from 'rxjs';
 import { map, scan } from 'rxjs/operators';
 import { set } from '@elastic/safer-lodash-set';
 import { Logger } from 'src/core/server';
-import { JsonObject } from 'src/plugins/kibana_utils/common';
+import { JsonObject } from '@kbn/common-utils';
 import { TaskStore } from '../task_store';
 import { TaskPollingLifecycle } from '../polling_lifecycle';
 import {
@@ -51,7 +51,6 @@ interface MonitoredStat<T> {
   timestamp: string;
   value: T;
 }
-
 export type RawMonitoredStat<T extends JsonObject> = MonitoredStat<T> & {
   status: HealthStatus;
 };
diff --git a/x-pack/plugins/task_manager/server/monitoring/runtime_statistics_aggregator.ts b/x-pack/plugins/task_manager/server/monitoring/runtime_statistics_aggregator.ts
index 0a6db350a88b9a..799ea054596c0a 100644
--- a/x-pack/plugins/task_manager/server/monitoring/runtime_statistics_aggregator.ts
+++ b/x-pack/plugins/task_manager/server/monitoring/runtime_statistics_aggregator.ts
@@ -6,7 +6,7 @@
  */
 
 import { Observable } from 'rxjs';
-import { JsonValue } from 'src/plugins/kibana_utils/common';
+import { JsonValue } from '@kbn/common-utils';
 
 export interface AggregatedStat<Stat = JsonValue> {
   key: string;
diff --git a/x-pack/plugins/task_manager/server/monitoring/task_run_calcultors.ts b/x-pack/plugins/task_manager/server/monitoring/task_run_calcultors.ts
index 4e2e689b71c88d..b0611437d87bec 100644
--- a/x-pack/plugins/task_manager/server/monitoring/task_run_calcultors.ts
+++ b/x-pack/plugins/task_manager/server/monitoring/task_run_calcultors.ts
@@ -6,7 +6,7 @@
  */
 
 import stats from 'stats-lite';
-import { JsonObject } from 'src/plugins/kibana_utils/common';
+import { JsonObject } from '@kbn/common-utils';
 import { isUndefined, countBy, mapValues } from 'lodash';
 
 export interface AveragedStat extends JsonObject {
diff --git a/x-pack/plugins/task_manager/server/monitoring/task_run_statistics.ts b/x-pack/plugins/task_manager/server/monitoring/task_run_statistics.ts
index eb6cb0796c33cc..b792f4ca475f93 100644
--- a/x-pack/plugins/task_manager/server/monitoring/task_run_statistics.ts
+++ b/x-pack/plugins/task_manager/server/monitoring/task_run_statistics.ts
@@ -7,7 +7,7 @@
 
 import { combineLatest, Observable } from 'rxjs';
 import { filter, startWith, map } from 'rxjs/operators';
-import { JsonObject, JsonValue } from 'src/plugins/kibana_utils/common';
+import { JsonObject, JsonValue } from '@kbn/common-utils';
 import { isNumber, mapValues } from 'lodash';
 import { AggregatedStatProvider, AggregatedStat } from './runtime_statistics_aggregator';
 import { TaskLifecycleEvent } from '../polling_lifecycle';
diff --git a/x-pack/plugins/task_manager/server/monitoring/workload_statistics.ts b/x-pack/plugins/task_manager/server/monitoring/workload_statistics.ts
index 669f6198325485..abd86be522f0cd 100644
--- a/x-pack/plugins/task_manager/server/monitoring/workload_statistics.ts
+++ b/x-pack/plugins/task_manager/server/monitoring/workload_statistics.ts
@@ -8,7 +8,7 @@
 import { combineLatest, Observable, timer } from 'rxjs';
 import { mergeMap, map, filter, switchMap, catchError } from 'rxjs/operators';
 import { Logger } from 'src/core/server';
-import { JsonObject } from 'src/plugins/kibana_utils/common';
+import { JsonObject } from '@kbn/common-utils';
 import { keyBy, mapValues } from 'lodash';
 import { estypes } from '@elastic/elasticsearch';
 import { AggregatedStatProvider } from './runtime_statistics_aggregator';
diff --git a/x-pack/plugins/task_manager/server/plugin.test.ts b/x-pack/plugins/task_manager/server/plugin.test.ts
index 45db18a3e83857..6c7f722d4c5255 100644
--- a/x-pack/plugins/task_manager/server/plugin.test.ts
+++ b/x-pack/plugins/task_manager/server/plugin.test.ts
@@ -25,6 +25,7 @@ describe('TaskManagerPlugin', () => {
         max_poll_inactivity_cycles: 10,
         request_capacity: 1000,
         monitored_aggregated_stats_refresh_rate: 5000,
+        monitored_stats_warn_delayed_task_start_in_seconds: 60,
         monitored_stats_required_freshness: 5000,
         monitored_stats_running_average_window: 50,
         monitored_task_execution_thresholds: {
@@ -55,6 +56,7 @@ describe('TaskManagerPlugin', () => {
         max_poll_inactivity_cycles: 10,
         request_capacity: 1000,
         monitored_aggregated_stats_refresh_rate: 5000,
+        monitored_stats_warn_delayed_task_start_in_seconds: 60,
         monitored_stats_required_freshness: 5000,
         monitored_stats_running_average_window: 50,
         monitored_task_execution_thresholds: {
diff --git a/x-pack/plugins/task_manager/server/polling_lifecycle.test.ts b/x-pack/plugins/task_manager/server/polling_lifecycle.test.ts
index f733bb6bfdf2a8..66c6805e9160ef 100644
--- a/x-pack/plugins/task_manager/server/polling_lifecycle.test.ts
+++ b/x-pack/plugins/task_manager/server/polling_lifecycle.test.ts
@@ -45,6 +45,7 @@ describe('TaskPollingLifecycle', () => {
       max_poll_inactivity_cycles: 10,
       request_capacity: 1000,
       monitored_aggregated_stats_refresh_rate: 5000,
+      monitored_stats_warn_delayed_task_start_in_seconds: 60,
       monitored_stats_required_freshness: 5000,
       monitored_stats_running_average_window: 50,
       monitored_task_execution_thresholds: {
diff --git a/x-pack/plugins/task_manager/server/routes/health.test.ts b/x-pack/plugins/task_manager/server/routes/health.test.ts
index ae883585e7085e..c14eb7e10b7261 100644
--- a/x-pack/plugins/task_manager/server/routes/health.test.ts
+++ b/x-pack/plugins/task_manager/server/routes/health.test.ts
@@ -14,10 +14,19 @@ import { healthRoute } from './health';
 import { mockHandlerArguments } from './_mock_handler_arguments';
 import { sleep } from '../test_utils';
 import { loggingSystemMock } from '../../../../../src/core/server/mocks';
-import { Logger } from '../../../../../src/core/server';
-import { MonitoringStats, RawMonitoringStats, summarizeMonitoringStats } from '../monitoring';
+import {
+  HealthStatus,
+  MonitoringStats,
+  RawMonitoringStats,
+  summarizeMonitoringStats,
+} from '../monitoring';
 import { ServiceStatusLevels } from 'src/core/server';
 import { configSchema, TaskManagerConfig } from '../config';
+import { calculateHealthStatusMock } from '../lib/calculate_health_status.mock';
+
+jest.mock('../lib/log_health_metrics', () => ({
+  logHealthMetrics: jest.fn(),
+}));
 
 describe('healthRoute', () => {
   beforeEach(() => {
@@ -38,6 +47,9 @@ describe('healthRoute', () => {
   it('logs the Task Manager stats at a fixed interval', async () => {
     const router = httpServiceMock.createRouter();
     const logger = loggingSystemMock.create().get();
+    const calculateHealthStatus = calculateHealthStatusMock.create();
+    calculateHealthStatus.mockImplementation(() => HealthStatus.OK);
+    const { logHealthMetrics } = jest.requireMock('../lib/log_health_metrics');
 
     const mockStat = mockHealthStats();
     await sleep(10);
@@ -55,6 +67,7 @@ describe('healthRoute', () => {
       id,
       getTaskManagerConfig({
         monitored_stats_required_freshness: 1000,
+        monitored_stats_warn_delayed_task_start_in_seconds: 100,
         monitored_aggregated_stats_refresh_rate: 60000,
       })
     );
@@ -65,35 +78,137 @@ describe('healthRoute', () => {
     await sleep(600);
     stats$.next(nextMockStat);
 
-    const firstDebug = JSON.parse(
-      (logger as jest.Mocked<Logger>).debug.mock.calls[0][0].replace('Latest Monitored Stats: ', '')
-    );
-    expect(firstDebug).toMatchObject({
+    expect(logHealthMetrics).toBeCalledTimes(2);
+    expect(logHealthMetrics.mock.calls[0][0]).toMatchObject({
       id,
       timestamp: expect.any(String),
       status: expect.any(String),
       ...ignoreCapacityEstimation(summarizeMonitoringStats(mockStat, getTaskManagerConfig({}))),
     });
+    expect(logHealthMetrics.mock.calls[1][0]).toMatchObject({
+      id,
+      timestamp: expect.any(String),
+      status: expect.any(String),
+      ...ignoreCapacityEstimation(summarizeMonitoringStats(nextMockStat, getTaskManagerConfig({}))),
+    });
+  });
 
-    const secondDebug = JSON.parse(
-      (logger as jest.Mocked<Logger>).debug.mock.calls[1][0].replace('Latest Monitored Stats: ', '')
+  it(`logs at a warn level if the status is warning`, async () => {
+    const router = httpServiceMock.createRouter();
+    const logger = loggingSystemMock.create().get();
+    const calculateHealthStatus = calculateHealthStatusMock.create();
+    calculateHealthStatus.mockImplementation(() => HealthStatus.Warning);
+    const { logHealthMetrics } = jest.requireMock('../lib/log_health_metrics');
+
+    const warnRuntimeStat = mockHealthStats();
+    const warnConfigurationStat = mockHealthStats();
+    const warnWorkloadStat = mockHealthStats();
+
+    const stats$ = new Subject<MonitoringStats>();
+
+    const id = uuid.v4();
+    healthRoute(
+      router,
+      stats$,
+      logger,
+      id,
+      getTaskManagerConfig({
+        monitored_stats_required_freshness: 1000,
+        monitored_stats_warn_delayed_task_start_in_seconds: 120,
+        monitored_aggregated_stats_refresh_rate: 60000,
+      })
     );
-    expect(secondDebug).not.toMatchObject({
+
+    stats$.next(warnRuntimeStat);
+    await sleep(1001);
+    stats$.next(warnConfigurationStat);
+    await sleep(1001);
+    stats$.next(warnWorkloadStat);
+
+    expect(logHealthMetrics).toBeCalledTimes(3);
+    expect(logHealthMetrics.mock.calls[0][0]).toMatchObject({
       id,
       timestamp: expect.any(String),
       status: expect.any(String),
       ...ignoreCapacityEstimation(
-        summarizeMonitoringStats(skippedMockStat, getTaskManagerConfig({}))
+        summarizeMonitoringStats(warnRuntimeStat, getTaskManagerConfig({}))
       ),
     });
-    expect(secondDebug).toMatchObject({
+    expect(logHealthMetrics.mock.calls[1][0]).toMatchObject({
       id,
       timestamp: expect.any(String),
       status: expect.any(String),
-      ...ignoreCapacityEstimation(summarizeMonitoringStats(nextMockStat, getTaskManagerConfig({}))),
+      ...ignoreCapacityEstimation(
+        summarizeMonitoringStats(warnConfigurationStat, getTaskManagerConfig({}))
+      ),
     });
+    expect(logHealthMetrics.mock.calls[2][0]).toMatchObject({
+      id,
+      timestamp: expect.any(String),
+      status: expect.any(String),
+      ...ignoreCapacityEstimation(
+        summarizeMonitoringStats(warnWorkloadStat, getTaskManagerConfig({}))
+      ),
+    });
+  });
 
-    expect(logger.debug).toHaveBeenCalledTimes(2);
+  it(`logs at an error level if the status is error`, async () => {
+    const router = httpServiceMock.createRouter();
+    const logger = loggingSystemMock.create().get();
+    const calculateHealthStatus = calculateHealthStatusMock.create();
+    calculateHealthStatus.mockImplementation(() => HealthStatus.Error);
+    const { logHealthMetrics } = jest.requireMock('../lib/log_health_metrics');
+
+    const errorRuntimeStat = mockHealthStats();
+    const errorConfigurationStat = mockHealthStats();
+    const errorWorkloadStat = mockHealthStats();
+
+    const stats$ = new Subject<MonitoringStats>();
+
+    const id = uuid.v4();
+    healthRoute(
+      router,
+      stats$,
+      logger,
+      id,
+      getTaskManagerConfig({
+        monitored_stats_required_freshness: 1000,
+        monitored_stats_warn_delayed_task_start_in_seconds: 120,
+        monitored_aggregated_stats_refresh_rate: 60000,
+      })
+    );
+
+    stats$.next(errorRuntimeStat);
+    await sleep(1001);
+    stats$.next(errorConfigurationStat);
+    await sleep(1001);
+    stats$.next(errorWorkloadStat);
+
+    expect(logHealthMetrics).toBeCalledTimes(3);
+    expect(logHealthMetrics.mock.calls[0][0]).toMatchObject({
+      id,
+      timestamp: expect.any(String),
+      status: expect.any(String),
+      ...ignoreCapacityEstimation(
+        summarizeMonitoringStats(errorRuntimeStat, getTaskManagerConfig({}))
+      ),
+    });
+    expect(logHealthMetrics.mock.calls[1][0]).toMatchObject({
+      id,
+      timestamp: expect.any(String),
+      status: expect.any(String),
+      ...ignoreCapacityEstimation(
+        summarizeMonitoringStats(errorConfigurationStat, getTaskManagerConfig({}))
+      ),
+    });
+    expect(logHealthMetrics.mock.calls[2][0]).toMatchObject({
+      id,
+      timestamp: expect.any(String),
+      status: expect.any(String),
+      ...ignoreCapacityEstimation(
+        summarizeMonitoringStats(errorWorkloadStat, getTaskManagerConfig({}))
+      ),
+    });
   });
 
   it('returns a error status if the overall stats have not been updated within the required hot freshness', async () => {
diff --git a/x-pack/plugins/task_manager/server/routes/health.ts b/x-pack/plugins/task_manager/server/routes/health.ts
index cc2f6c6630e56d..b5d8a23ba55575 100644
--- a/x-pack/plugins/task_manager/server/routes/health.ts
+++ b/x-pack/plugins/task_manager/server/routes/health.ts
@@ -15,8 +15,6 @@ import {
 import { Observable, Subject } from 'rxjs';
 import { tap, map } from 'rxjs/operators';
 import { throttleTime } from 'rxjs/operators';
-import { isString } from 'lodash';
-import { JsonValue } from 'src/plugins/kibana_utils/common';
 import { Logger, ServiceStatus, ServiceStatusLevels } from '../../../../../src/core/server';
 import {
   MonitoringStats,
@@ -25,8 +23,14 @@ import {
   RawMonitoringStats,
 } from '../monitoring';
 import { TaskManagerConfig } from '../config';
+import { logHealthMetrics } from '../lib/log_health_metrics';
+import { calculateHealthStatus } from '../lib/calculate_health_status';
 
-type MonitoredHealth = RawMonitoringStats & { id: string; status: HealthStatus; timestamp: string };
+export type MonitoredHealth = RawMonitoringStats & {
+  id: string;
+  status: HealthStatus;
+  timestamp: string;
+};
 
 const LEVEL_SUMMARY = {
   [ServiceStatusLevels.available.toString()]: 'Task Manager is healthy',
@@ -54,26 +58,12 @@ export function healthRoute(
   // consider the system unhealthy
   const requiredHotStatsFreshness: number = config.monitored_stats_required_freshness;
 
-  // if "cold" health stats are any more stale than the configured refresh (+ a buffer), consider the system unhealthy
-  const requiredColdStatsFreshness: number = config.monitored_aggregated_stats_refresh_rate * 1.5;
-
-  function calculateStatus(monitoredStats: MonitoringStats): MonitoredHealth {
+  function getHealthStatus(monitoredStats: MonitoringStats) {
+    const summarizedStats = summarizeMonitoringStats(monitoredStats, config);
+    const status = calculateHealthStatus(summarizedStats, config);
     const now = Date.now();
     const timestamp = new Date(now).toISOString();
-    const summarizedStats = summarizeMonitoringStats(monitoredStats, config);
-
-    /**
-     * If the monitored stats aren't fresh, return a red status
-     */
-    const healthStatus =
-      hasStatus(summarizedStats.stats, HealthStatus.Error) ||
-      hasExpiredHotTimestamps(summarizedStats, now, requiredHotStatsFreshness) ||
-      hasExpiredColdTimestamps(summarizedStats, now, requiredColdStatsFreshness)
-        ? HealthStatus.Error
-        : hasStatus(summarizedStats.stats, HealthStatus.Warning)
-        ? HealthStatus.Warning
-        : HealthStatus.OK;
-    return { id: taskManagerId, timestamp, status: healthStatus, ...summarizedStats };
+    return { id: taskManagerId, timestamp, status, ...summarizedStats };
   }
 
   const serviceStatus$: Subject<TaskManagerServiceStatus> = new Subject<TaskManagerServiceStatus>();
@@ -90,11 +80,11 @@ export function healthRoute(
       }),
       // Only calculate the summerized stats (calculates all runnign averages and evaluates state)
       // when needed by throttling down to the requiredHotStatsFreshness
-      map((stats) => withServiceStatus(calculateStatus(stats)))
+      map((stats) => withServiceStatus(getHealthStatus(stats)))
     )
     .subscribe(([monitoredHealth, serviceStatus]) => {
       serviceStatus$.next(serviceStatus);
-      logger.debug(`Latest Monitored Stats: ${JSON.stringify(monitoredHealth)}`);
+      logHealthMetrics(monitoredHealth, logger, config);
     });
 
   router.get(
@@ -109,7 +99,7 @@ export function healthRoute(
     ): Promise<IKibanaResponse> {
       return res.ok({
         body: lastMonitoredStats
-          ? calculateStatus(lastMonitoredStats)
+          ? getHealthStatus(lastMonitoredStats)
           : { id: taskManagerId, timestamp: new Date().toISOString(), status: HealthStatus.Error },
       });
     }
@@ -134,45 +124,3 @@ export function withServiceStatus(
     },
   ];
 }
-
-/**
- * If certain "hot" stats are not fresh, then the _health api will should return a Red status
- * @param monitoringStats The monitored stats
- * @param now The time to compare against
- * @param requiredFreshness How fresh should these stats be
- */
-function hasExpiredHotTimestamps(
-  monitoringStats: RawMonitoringStats,
-  now: number,
-  requiredFreshness: number
-): boolean {
-  return (
-    now -
-      getOldestTimestamp(
-        monitoringStats.last_update,
-        monitoringStats.stats.runtime?.value.polling.last_successful_poll
-      ) >
-    requiredFreshness
-  );
-}
-
-function hasExpiredColdTimestamps(
-  monitoringStats: RawMonitoringStats,
-  now: number,
-  requiredFreshness: number
-): boolean {
-  return now - getOldestTimestamp(monitoringStats.stats.workload?.timestamp) > requiredFreshness;
-}
-
-function hasStatus(stats: RawMonitoringStats['stats'], status: HealthStatus): boolean {
-  return Object.values(stats)
-    .map((stat) => stat?.status === status)
-    .includes(true);
-}
-
-function getOldestTimestamp(...timestamps: Array<JsonValue | undefined>): number {
-  const validTimestamps = timestamps
-    .map((timestamp) => (isString(timestamp) ? Date.parse(timestamp) : NaN))
-    .filter((timestamp) => !isNaN(timestamp));
-  return validTimestamps.length ? Math.min(...validTimestamps) : 0;
-}
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index c67dd383a2ea2c..90203fdb6b6eec 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -8829,7 +8829,6 @@
     "xpack.fleet.agentList.addButton": "エージェントの追加",
     "xpack.fleet.agentList.agentUpgradeLabel": "アップグレードが利用可能です",
     "xpack.fleet.agentList.clearFiltersLinkText": "フィルターを消去",
-    "xpack.fleet.agentList.enrollButton": "エージェントの追加",
     "xpack.fleet.agentList.errorFetchingDataTitle": "エージェントの取り込みエラー",
     "xpack.fleet.agentList.forceUnenrollOneButton": "強制的に登録解除する",
     "xpack.fleet.agentList.hostColumnTitle": "ホスト",
@@ -8903,8 +8902,6 @@
     "xpack.fleet.agentPolicyList.noAgentPoliciesPrompt": "エージェントポリシーがありません",
     "xpack.fleet.agentPolicyList.noFilteredAgentPoliciesPrompt": "エージェントポリシーが見つかりません。{clearFiltersLink}",
     "xpack.fleet.agentPolicyList.packagePoliciesCountColumnTitle": "統合",
-    "xpack.fleet.agentPolicyList.pageSubtitle": "エージェントポリシーを使用すると、エージェントとエージェントが収集するデータを管理できます。",
-    "xpack.fleet.agentPolicyList.pageTitle": "エージェントポリシー",
     "xpack.fleet.agentPolicyList.reloadAgentPoliciesButtonText": "再読み込み",
     "xpack.fleet.agentPolicyList.updatedOnColumnTitle": "最終更新日",
     "xpack.fleet.agentPolicySummaryLine.hostedPolicyTooltip": "このポリシーはFleet外で管理されます。このポリシーに関連するほとんどのアクションは使用できません。",
@@ -8914,8 +8911,6 @@
     "xpack.fleet.agentReassignPolicy.flyoutTitle": "新しいエージェントポリシーを割り当てる",
     "xpack.fleet.agentReassignPolicy.selectPolicyLabel": "エージェントポリシー",
     "xpack.fleet.agentReassignPolicy.successSingleNotificationTitle": "エージェントポリシーが再割り当てされました",
-    "xpack.fleet.agents.pageSubtitle": "ポリシーの更新を管理し、任意のサイズのエージェントのグループにデプロイします。",
-    "xpack.fleet.agents.pageTitle": "エージェント",
     "xpack.fleet.agentsInitializationErrorMessageTitle": "Elasticエージェントの集中管理を初期化できません",
     "xpack.fleet.agentStatus.healthyLabel": "正常",
     "xpack.fleet.agentStatus.inactiveLabel": "非アクティブ",
@@ -8924,13 +8919,10 @@
     "xpack.fleet.agentStatus.updatingLabel": "更新中",
     "xpack.fleet.appNavigation.agentsLinkText": "エージェント",
     "xpack.fleet.appNavigation.dataStreamsLinkText": "データストリーム",
-    "xpack.fleet.appNavigation.overviewLinkText": "概要",
     "xpack.fleet.appNavigation.policiesLinkText": "ポリシー",
     "xpack.fleet.appNavigation.sendFeedbackButton": "フィードバックを送信",
     "xpack.fleet.appNavigation.settingsButton": "Fleet 設定",
     "xpack.fleet.appTitle": "Fleet",
-    "xpack.fleet.betaBadge.labelText": "ベータ",
-    "xpack.fleet.betaBadge.tooltipText": "このプラグインは本番環境用ではありません。バグについてはディスカッションフォーラムで報告してください。",
     "xpack.fleet.breadcrumbs.addPackagePolicyPageTitle": "統合の追加",
     "xpack.fleet.breadcrumbs.agentsPageTitle": "エージェント",
     "xpack.fleet.breadcrumbs.allIntegrationsPageTitle": "すべて",
@@ -8939,8 +8931,6 @@
     "xpack.fleet.breadcrumbs.editPackagePolicyPageTitle": "統合の編集",
     "xpack.fleet.breadcrumbs.enrollmentTokensPageTitle": "登録トークン",
     "xpack.fleet.breadcrumbs.installedIntegrationsPageTitle": "インストール済み",
-    "xpack.fleet.breadcrumbs.integrationsPageTitle": "統合",
-    "xpack.fleet.breadcrumbs.overviewPageTitle": "概要",
     "xpack.fleet.breadcrumbs.policiesPageTitle": "ポリシー",
     "xpack.fleet.config.invalidPackageVersionError": "有効なサーバーまたはキーワード「latest」でなければなりません",
     "xpack.fleet.copyAgentPolicy.confirmModal.cancelButtonLabel": "キャンセル",
@@ -8999,8 +8989,6 @@
     "xpack.fleet.dataStreamList.namespaceColumnTitle": "名前空間",
     "xpack.fleet.dataStreamList.noDataStreamsPrompt": "データストリームがありません",
     "xpack.fleet.dataStreamList.noFilteredDataStreamsMessage": "一致するデータストリームが見つかりません",
-    "xpack.fleet.dataStreamList.pageSubtitle": "エージェントが作成したデータを管理します。",
-    "xpack.fleet.dataStreamList.pageTitle": "データストリーム",
     "xpack.fleet.dataStreamList.reloadDataStreamsButtonText": "再読み込み",
     "xpack.fleet.dataStreamList.searchPlaceholderTitle": "データストリームをフィルター",
     "xpack.fleet.dataStreamList.sizeColumnTitle": "サイズ",
@@ -9189,8 +9177,6 @@
     "xpack.fleet.integrations.updatePackage.updatePackageButtonLabel": "最新バージョンに更新",
     "xpack.fleet.invalidLicenseDescription": "現在のライセンスは期限切れです。登録されたビートエージェントは引き続き動作しますが、Elastic Fleet インターフェイスにアクセスするには有効なライセンスが必要です。",
     "xpack.fleet.invalidLicenseTitle": "ライセンスの期限切れ",
-    "xpack.fleet.listTabs.agentTitle": "エージェント",
-    "xpack.fleet.listTabs.enrollmentTokensTitle": "登録トークン",
     "xpack.fleet.namespaceValidation.invalidCharactersErrorMessage": "名前空間に無効な文字が含まれています",
     "xpack.fleet.namespaceValidation.lowercaseErrorMessage": "名前空間は小文字で指定する必要があります",
     "xpack.fleet.namespaceValidation.requiredErrorMessage": "名前空間は必須です",
@@ -9203,33 +9189,8 @@
     "xpack.fleet.noAccess.accessDeniedDescription": "Elastic Fleet にアクセスする権限がありません。Elastic Fleet を使用するには、このアプリケーションの読み取り権または全権を含むユーザーロールが必要です。",
     "xpack.fleet.noAccess.accessDeniedTitle": "アクセスが拒否されました",
     "xpack.fleet.oldAppTitle": "Ingest Manager",
-    "xpack.fleet.overviewAgentActiveTitle": "アクティブ",
-    "xpack.fleet.overviewAgentErrorTitle": "エラー",
-    "xpack.fleet.overviewAgentOfflineTitle": "オフライン",
-    "xpack.fleet.overviewAgentTotalTitle": "合計エージェント数",
-    "xpack.fleet.overviewDatastreamNamespacesTitle": "名前空間",
-    "xpack.fleet.overviewDatastreamSizeTitle": "合計サイズ",
-    "xpack.fleet.overviewDatastreamTotalTitle": "データストリーム",
-    "xpack.fleet.overviewIntegrationsInstalledTitle": "インストール済み",
-    "xpack.fleet.overviewIntegrationsTotalTitle": "合計利用可能数",
-    "xpack.fleet.overviewIntegrationsUpdatesAvailableTitle": "更新が可能です",
-    "xpack.fleet.overviewPackagePolicyTitle": "使用済みの統合",
-    "xpack.fleet.overviewPageAgentsPanelTitle": "エージェント",
-    "xpack.fleet.overviewPageDataStreamsPanelAction": "データストリームを表示",
-    "xpack.fleet.overviewPageDataStreamsPanelTitle": "データストリーム",
-    "xpack.fleet.overviewPageDataStreamsPanelTooltip": "エージェントが収集するデータはさまざまなデータストリームに整理されます。",
-    "xpack.fleet.overviewPageEnrollAgentButton": "エージェントの追加",
-    "xpack.fleet.overviewPageFleetPanelAction": "エージェントを表示",
-    "xpack.fleet.overviewPageFleetPanelTooltip": "Fleetを使用して、中央の場所からエージェントを登録し、ポリシーを管理します。",
-    "xpack.fleet.overviewPageIntegrationsPanelAction": "統合を表示",
-    "xpack.fleet.overviewPageIntegrationsPanelTitle": "統合",
-    "xpack.fleet.overviewPageIntegrationsPanelTooltip": "Elastic Stackの統合を参照し、インストールします。統合をエージェントポリシーに追加し、データの送信を開始します。",
-    "xpack.fleet.overviewPagePoliciesPanelAction": "ポリシーを表示",
-    "xpack.fleet.overviewPagePoliciesPanelTitle": "エージェントポリシー",
-    "xpack.fleet.overviewPagePoliciesPanelTooltip": "エージェントポリシーを使用すると、エージェントが収集するデータを管理できます。",
     "xpack.fleet.overviewPageSubtitle": "Elasticエージェントとポリシーを中央の場所で管理します。",
     "xpack.fleet.overviewPageTitle": "Fleet",
-    "xpack.fleet.overviewPolicyTotalTitle": "合計利用可能数",
     "xpack.fleet.packagePolicyInputOverrideError": "パッケージ{packageName}には入力タイプ{inputType}が存在しません。",
     "xpack.fleet.packagePolicyStreamOverrideError": "パッケージ{packageName}の{inputType}にはデータストリーム{streamSet}が存在しません",
     "xpack.fleet.packagePolicyStreamVarOverrideError": "パッケージ{packageName}の{inputType}の{streamSet}にはVar {varName}が存在しません",
@@ -17261,7 +17222,6 @@
     "xpack.monitoring.updateLicenseButtonLabel": "ライセンスを更新",
     "xpack.monitoring.updateLicenseTitle": "ライセンスの更新",
     "xpack.monitoring.useAvailableLicenseDescription": "すでに新しいライセンスがある場合は、今すぐアップロードしてください。",
-    "xpack.observability.alerts.breadcrumb": "アラート",
     "xpack.observability.alerts.manageDetectionRulesButtonLabel": "検出ルールの管理",
     "xpack.observability.alerts.searchBarPlaceholder": "\"domain\": \"ecommerce\" AND (\"service.name\":\"ProductCatalogService\" …)",
     "xpack.observability.alertsDisclaimerLinkText": "アラートとアクション",
@@ -17282,7 +17242,6 @@
     "xpack.observability.alertsTable.triggeredColumnDescription": "実行済み",
     "xpack.observability.alertsTable.viewInAppButtonLabel": "アプリで表示",
     "xpack.observability.alertsTitle": "アラート",
-    "xpack.observability.breadcrumbs.observability": "オブザーバビリティ",
     "xpack.observability.emptySection.apps.alert.description": "503 エラーが累積していますか?サービスは応答していますか?CPUとRAMの使用量が跳ね上がっていますか?このような警告を、事後にではなく、発生と同時に把握しましょう。",
     "xpack.observability.emptySection.apps.alert.link": "アラートの作成",
     "xpack.observability.emptySection.apps.alert.title": "アラートが見つかりません。",
@@ -17358,15 +17317,12 @@
     "xpack.observability.formatters.secondsTimeUnitLabel": "s",
     "xpack.observability.formatters.secondsTimeUnitLabelExtended": "秒",
     "xpack.observability.home.addData": "データの追加",
-    "xpack.observability.home.breadcrumb": "概要",
     "xpack.observability.home.getStatedButton": "使ってみる",
     "xpack.observability.home.sectionsubtitle": "ログ、メトリック、トレースを大規模に、1つのスタックにまとめて、環境内のあらゆる場所で生じるイベントの監視、分析、対応を行います。",
     "xpack.observability.home.sectionTitle": "エコシステム全体の一元的な可視性",
-    "xpack.observability.landing.breadcrumb": "はじめて使う",
     "xpack.observability.news.readFullStory": "詳細なストーリーを読む",
     "xpack.observability.news.title": "新機能",
     "xpack.observability.notAvailable": "N/A",
-    "xpack.observability.observability.breadcrumb.": "オブザーバビリティ",
     "xpack.observability.overview.alert.allTypes": "すべてのタイプ",
     "xpack.observability.overview.alert.appLink": "アラートを管理",
     "xpack.observability.overview.alert.view": "表示",
@@ -17376,7 +17332,6 @@
     "xpack.observability.overview.apm.services": "サービス",
     "xpack.observability.overview.apm.throughput": "スループット",
     "xpack.observability.overview.apm.title": "APM",
-    "xpack.observability.overview.breadcrumb": "概要",
     "xpack.observability.overview.exploratoryView": "調査ビュー",
     "xpack.observability.overview.exploratoryView.lensDisabled": "Lensアプリを使用できません。調査ビューを使用するには、Lensを有効にしてください。",
     "xpack.observability.overview.loadingObservability": "オブザーバビリティを読み込んでいます",
@@ -18014,15 +17969,15 @@
     "xpack.rollupJobs.detailPanel.jobActionMenu.buttonLabel": "管理",
     "xpack.rollupJobs.detailPanel.loadingLabel": "ロールアップジョブを読み込み中...",
     "xpack.rollupJobs.detailPanel.notFoundLabel": "ロールアップジョブが見つかりません",
-    "xpack.rollupJobs.editRollupIndexPattern.createIndex.defaultButtonDescription": "要約データに制限された集約を実行します。",
-    "xpack.rollupJobs.editRollupIndexPattern.createIndex.defaultButtonText": "ロールアップインデックスパターン",
-    "xpack.rollupJobs.editRollupIndexPattern.createIndex.defaultTypeName": "ロールアップインデックスパターン",
-    "xpack.rollupJobs.editRollupIndexPattern.createIndex.indexLabel": "ロールアップ",
-    "xpack.rollupJobs.editRollupIndexPattern.createIndex.noMatchError": "ロールアップインデックスパターンエラー：ロールアップインデックスの 1 つと一致している必要があります",
-    "xpack.rollupJobs.editRollupIndexPattern.createIndex.tooManyMatchesError": "ロールアップインデックスパターンエラー：一致できるロールアップインデックスは 1 つだけです",
-    "xpack.rollupJobs.editRollupIndexPattern.createIndex.uncaughtError": "ロールアップインデックスパターンエラー：{error}",
-    "xpack.rollupJobs.editRollupIndexPattern.rollupPrompt.betaCalloutParagraph1Text": "ロールアップインデックスパターンのKibanaのサポートはベータ版です。保存された検索、可視化、ダッシュボードでこれらのパターンを使用すると問題が発生する場合があります。Timelionや機械学習などの一部の高度な機能ではサポートされていません。",
-    "xpack.rollupJobs.editRollupIndexPattern.rollupPrompt.betaCalloutParagraph2Text": "ロールアップインデックスパターンは、1つのロールアップインデックスとゼロ以上の標準インデックスと一致させることができます。ロールアップインデックスパターンでは、メトリック、フィールド、間隔、アグリゲーションが制限されています。ロールアップインデックスは、1つのジョブ構成があるインデックス、または複数のジョブと互換する構成があるインデックスに制限されています。",
+    "indexPatternManagement.editRollupIndexPattern.createIndex.defaultButtonDescription": "要約データに制限された集約を実行します。",
+    "indexPatternManagement.editRollupIndexPattern.createIndex.defaultButtonText": "ロールアップインデックスパターン",
+    "indexPatternManagement.editRollupIndexPattern.createIndex.defaultTypeName": "ロールアップインデックスパターン",
+    "indexPatternManagement.editRollupIndexPattern.createIndex.indexLabel": "ロールアップ",
+    "indexPatternManagement.editRollupIndexPattern.createIndex.noMatchError": "ロールアップインデックスパターンエラー：ロールアップインデックスの 1 つと一致している必要があります",
+    "indexPatternManagement.editRollupIndexPattern.createIndex.tooManyMatchesError": "ロールアップインデックスパターンエラー：一致できるロールアップインデックスは 1 つだけです",
+    "indexPatternManagement.editRollupIndexPattern.createIndex.uncaughtError": "ロールアップインデックスパターンエラー：{error}",
+    "indexPatternManagement.editRollupIndexPattern.rollupPrompt.betaCalloutParagraph1Text": "ロールアップインデックスパターンのKibanaのサポートはベータ版です。保存された検索、可視化、ダッシュボードでこれらのパターンを使用すると問題が発生する場合があります。Timelionや機械学習などの一部の高度な機能ではサポートされていません。",
+    "indexPatternManagement.editRollupIndexPattern.rollupPrompt.betaCalloutParagraph2Text": "ロールアップインデックスパターンは、1つのロールアップインデックスとゼロ以上の標準インデックスと一致させることができます。ロールアップインデックスパターンでは、メトリック、フィールド、間隔、アグリゲーションが制限されています。ロールアップインデックスは、1つのジョブ構成があるインデックス、または複数のジョブと互換する構成があるインデックスに制限されています。",
     "xpack.rollupJobs.featureCatalogueDescription": "今後の分析用に履歴データを小さなインデックスに要約して格納します。",
     "xpack.rollupJobs.indexMgmtBadge.rollupLabel": "ロールアップ",
     "xpack.rollupJobs.indexMgmtToggle.toggleLabel": "ロールアップインデックスを含める",
@@ -24296,8 +24251,6 @@
     "xpack.watcher.sections.watchEdit.json.titlePanel.editWatchTitle": "{watchName}を編集",
     "xpack.watcher.sections.watchEdit.loadingWatchDescription": "ウォッチの読み込み中…",
     "xpack.watcher.sections.watchEdit.loadingWatchVisualizationDescription": "ウォッチビジュアライゼーションを読み込み中…",
-    "xpack.watcher.sections.watchEdit.monitoring.edit.calloutDescriptionText": "ウォッチ'{watchName}'はシステムウォッチであるため、編集できません。{watchStatusLink}",
-    "xpack.watcher.sections.watchEdit.monitoring.edit.calloutTitleText": "このウォッチは編集できません。",
     "xpack.watcher.sections.watchEdit.monitoring.header.watchLinkTitle": "ウォッチステータスを表示します。",
     "xpack.watcher.sections.watchEdit.simulate.form.actionModesFieldLabel": "アクションモード",
     "xpack.watcher.sections.watchEdit.simulate.form.actionOverridesDescription": "ウォッチでアクションを実行またはスキップすることができるようにします。{actionsLink}",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index 23cde5dd1fcff4..a41a4cd7e5ae12 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -8906,7 +8906,6 @@
     "xpack.fleet.agentList.addButton": "添加代理",
     "xpack.fleet.agentList.agentUpgradeLabel": "升级可用",
     "xpack.fleet.agentList.clearFiltersLinkText": "清除筛选",
-    "xpack.fleet.agentList.enrollButton": "添加代理",
     "xpack.fleet.agentList.errorFetchingDataTitle": "获取代理时出错",
     "xpack.fleet.agentList.forceUnenrollOneButton": "强制取消注册",
     "xpack.fleet.agentList.hostColumnTitle": "主机",
@@ -8981,8 +8980,6 @@
     "xpack.fleet.agentPolicyList.noAgentPoliciesPrompt": "无代理策略",
     "xpack.fleet.agentPolicyList.noFilteredAgentPoliciesPrompt": "找不到任何代理策略。{clearFiltersLink}",
     "xpack.fleet.agentPolicyList.packagePoliciesCountColumnTitle": "集成",
-    "xpack.fleet.agentPolicyList.pageSubtitle": "使用代理策略管理代理及其收集的数据。",
-    "xpack.fleet.agentPolicyList.pageTitle": "代理策略",
     "xpack.fleet.agentPolicyList.reloadAgentPoliciesButtonText": "重新加载",
     "xpack.fleet.agentPolicyList.updatedOnColumnTitle": "上次更新时间",
     "xpack.fleet.agentPolicySummaryLine.hostedPolicyTooltip": "此策略是在 Fleet 外进行管理的。与此策略相关的操作多数不可用。",
@@ -8994,8 +8991,6 @@
     "xpack.fleet.agentReassignPolicy.policyDescription": "选定代理策略将收集 {count, plural, other {{countValue} 个集成} }的数据：",
     "xpack.fleet.agentReassignPolicy.selectPolicyLabel": "代理策略",
     "xpack.fleet.agentReassignPolicy.successSingleNotificationTitle": "代理策略已重新分配",
-    "xpack.fleet.agents.pageSubtitle": "管理策略更新并将其部署到一组任意大小的代理。",
-    "xpack.fleet.agents.pageTitle": "代理",
     "xpack.fleet.agentsInitializationErrorMessageTitle": "无法为 Elastic 代理初始化集中管理",
     "xpack.fleet.agentStatus.healthyLabel": "运行正常",
     "xpack.fleet.agentStatus.inactiveLabel": "非活动",
@@ -9004,13 +8999,10 @@
     "xpack.fleet.agentStatus.updatingLabel": "正在更新",
     "xpack.fleet.appNavigation.agentsLinkText": "代理",
     "xpack.fleet.appNavigation.dataStreamsLinkText": "数据流",
-    "xpack.fleet.appNavigation.overviewLinkText": "概览",
     "xpack.fleet.appNavigation.policiesLinkText": "策略",
     "xpack.fleet.appNavigation.sendFeedbackButton": "发送反馈",
     "xpack.fleet.appNavigation.settingsButton": "Fleet 设置",
     "xpack.fleet.appTitle": "Fleet",
-    "xpack.fleet.betaBadge.labelText": "公测版",
-    "xpack.fleet.betaBadge.tooltipText": "不推荐在生产环境中使用此插件。请在我们讨论论坛中报告错误。",
     "xpack.fleet.breadcrumbs.addPackagePolicyPageTitle": "添加集成",
     "xpack.fleet.breadcrumbs.agentsPageTitle": "代理",
     "xpack.fleet.breadcrumbs.allIntegrationsPageTitle": "全部",
@@ -9019,8 +9011,6 @@
     "xpack.fleet.breadcrumbs.editPackagePolicyPageTitle": "编辑集成",
     "xpack.fleet.breadcrumbs.enrollmentTokensPageTitle": "注册令牌",
     "xpack.fleet.breadcrumbs.installedIntegrationsPageTitle": "已安装",
-    "xpack.fleet.breadcrumbs.integrationsPageTitle": "集成",
-    "xpack.fleet.breadcrumbs.overviewPageTitle": "概览",
     "xpack.fleet.breadcrumbs.policiesPageTitle": "策略",
     "xpack.fleet.config.invalidPackageVersionError": "必须是有效的 semver 或关键字 `latest`",
     "xpack.fleet.copyAgentPolicy.confirmModal.cancelButtonLabel": "取消",
@@ -9081,8 +9071,6 @@
     "xpack.fleet.dataStreamList.namespaceColumnTitle": "命名空间",
     "xpack.fleet.dataStreamList.noDataStreamsPrompt": "无数据流",
     "xpack.fleet.dataStreamList.noFilteredDataStreamsMessage": "找不到匹配的数据流",
-    "xpack.fleet.dataStreamList.pageSubtitle": "管理您的代理创建的数据。",
-    "xpack.fleet.dataStreamList.pageTitle": "数据流",
     "xpack.fleet.dataStreamList.reloadDataStreamsButtonText": "重新加载",
     "xpack.fleet.dataStreamList.searchPlaceholderTitle": "筛选数据流",
     "xpack.fleet.dataStreamList.sizeColumnTitle": "大小",
@@ -9275,8 +9263,6 @@
     "xpack.fleet.integrations.updatePackage.updatePackageButtonLabel": "更新到最新版本",
     "xpack.fleet.invalidLicenseDescription": "您当前的许可证已过期。已注册 Beats 代理将继续工作，但您需要有效的许可证，才能访问 Elastic Fleet 界面。",
     "xpack.fleet.invalidLicenseTitle": "已过期许可证",
-    "xpack.fleet.listTabs.agentTitle": "代理",
-    "xpack.fleet.listTabs.enrollmentTokensTitle": "注册令牌",
     "xpack.fleet.namespaceValidation.invalidCharactersErrorMessage": "命名空间包含无效字符",
     "xpack.fleet.namespaceValidation.lowercaseErrorMessage": "命名空间必须小写",
     "xpack.fleet.namespaceValidation.requiredErrorMessage": "“命名空间”必填",
@@ -9289,33 +9275,8 @@
     "xpack.fleet.noAccess.accessDeniedDescription": "您无权访问 Elastic Fleet。要使用 Elastic Fleet，您需要包含此应用程序读取权限或所有权限的用户角色。",
     "xpack.fleet.noAccess.accessDeniedTitle": "访问被拒绝",
     "xpack.fleet.oldAppTitle": "采集管理器",
-    "xpack.fleet.overviewAgentActiveTitle": "活动",
-    "xpack.fleet.overviewAgentErrorTitle": "错误",
-    "xpack.fleet.overviewAgentOfflineTitle": "脱机",
-    "xpack.fleet.overviewAgentTotalTitle": "代理总数",
-    "xpack.fleet.overviewDatastreamNamespacesTitle": "命名空间",
-    "xpack.fleet.overviewDatastreamSizeTitle": "总大小",
-    "xpack.fleet.overviewDatastreamTotalTitle": "数据流",
-    "xpack.fleet.overviewIntegrationsInstalledTitle": "已安装",
-    "xpack.fleet.overviewIntegrationsTotalTitle": "可用总计",
-    "xpack.fleet.overviewIntegrationsUpdatesAvailableTitle": "可用更新",
-    "xpack.fleet.overviewPackagePolicyTitle": "已使用的集成",
-    "xpack.fleet.overviewPageAgentsPanelTitle": "代理",
-    "xpack.fleet.overviewPageDataStreamsPanelAction": "查看数据流",
-    "xpack.fleet.overviewPageDataStreamsPanelTitle": "数据流",
-    "xpack.fleet.overviewPageDataStreamsPanelTooltip": "您的代理收集的数据组织到各种数据流中。",
-    "xpack.fleet.overviewPageEnrollAgentButton": "添加代理",
-    "xpack.fleet.overviewPageFleetPanelAction": "查看代理",
-    "xpack.fleet.overviewPageFleetPanelTooltip": "使用 Fleet 注册代理并从中央位置管理其策略。",
-    "xpack.fleet.overviewPageIntegrationsPanelAction": "查看集成",
-    "xpack.fleet.overviewPageIntegrationsPanelTitle": "集成",
-    "xpack.fleet.overviewPageIntegrationsPanelTooltip": "浏览并安装适用于 Elastic Stack 的集成。将集成添加到您的代理策略，以开始发送数据。",
-    "xpack.fleet.overviewPagePoliciesPanelAction": "查看策略",
-    "xpack.fleet.overviewPagePoliciesPanelTitle": "代理策略",
-    "xpack.fleet.overviewPagePoliciesPanelTooltip": "使用代理策略控制您的代理收集的数据。",
     "xpack.fleet.overviewPageSubtitle": "在集中位置管理 Elastic 代理及其策略。",
     "xpack.fleet.overviewPageTitle": "Fleet",
-    "xpack.fleet.overviewPolicyTotalTitle": "可用总计",
     "xpack.fleet.packagePolicyInputOverrideError": "输入类型 {inputType} 在软件包 {packageName} 上不存在",
     "xpack.fleet.packagePolicyStreamOverrideError": "数据流 {streamSet} 在软件包 {packageName} 的 {inputType} 上不存在",
     "xpack.fleet.packagePolicyStreamVarOverrideError": "变量 {varName} 在软件包 {packageName} 的 {inputType} 的 {streamSet} 上不存在",
@@ -17497,7 +17458,6 @@
     "xpack.monitoring.updateLicenseButtonLabel": "更新许可证",
     "xpack.monitoring.updateLicenseTitle": "更新您的许可证",
     "xpack.monitoring.useAvailableLicenseDescription": "如果您已经持有新的许可证，请立即上传。",
-    "xpack.observability.alerts.breadcrumb": "告警",
     "xpack.observability.alerts.manageDetectionRulesButtonLabel": "管理检测规则",
     "xpack.observability.alerts.searchBarPlaceholder": "\"domain\": \"ecommerce\" AND (\"service.name\":\"ProductCatalogService\" …)",
     "xpack.observability.alertsDisclaimerLinkText": "告警和操作",
@@ -17518,7 +17478,6 @@
     "xpack.observability.alertsTable.triggeredColumnDescription": "已触发",
     "xpack.observability.alertsTable.viewInAppButtonLabel": "在应用中查看",
     "xpack.observability.alertsTitle": "告警",
-    "xpack.observability.breadcrumbs.observability": "可观测性",
     "xpack.observability.emptySection.apps.alert.description": "503 错误是否越来越多？服务是否响应？CPU 和 RAM 利用率是否激增？实时查看警告，而不是事后再进行剖析。",
     "xpack.observability.emptySection.apps.alert.link": "创建告警",
     "xpack.observability.emptySection.apps.alert.title": "未找到告警。",
@@ -17594,15 +17553,12 @@
     "xpack.observability.formatters.secondsTimeUnitLabel": "s",
     "xpack.observability.formatters.secondsTimeUnitLabelExtended": "秒",
     "xpack.observability.home.addData": "添加数据",
-    "xpack.observability.home.breadcrumb": "概览",
     "xpack.observability.home.getStatedButton": "开始使用",
     "xpack.observability.home.sectionsubtitle": "通过根据需要将日志、指标和跟踪都置于单个堆栈上，来监测、分析和响应环境中任何位置发生的事件。",
     "xpack.observability.home.sectionTitle": "整个生态系统的统一可见性",
-    "xpack.observability.landing.breadcrumb": "入门",
     "xpack.observability.news.readFullStory": "详细了解",
     "xpack.observability.news.title": "最新动态",
     "xpack.observability.notAvailable": "不可用",
-    "xpack.observability.observability.breadcrumb.": "可观测性",
     "xpack.observability.overview.alert.allTypes": "所有类型",
     "xpack.observability.overview.alert.appLink": "管理告警",
     "xpack.observability.overview.alert.view": "查看",
@@ -17612,7 +17568,6 @@
     "xpack.observability.overview.apm.services": "服务",
     "xpack.observability.overview.apm.throughput": "吞吐量",
     "xpack.observability.overview.apm.title": "APM",
-    "xpack.observability.overview.breadcrumb": "概览",
     "xpack.observability.overview.exploratoryView": "浏览视图",
     "xpack.observability.overview.exploratoryView.lensDisabled": "Lens 应用不可用，请启用 Lens 以使用浏览视图。",
     "xpack.observability.overview.loadingObservability": "正在加载可观测性",
@@ -18254,15 +18209,15 @@
     "xpack.rollupJobs.detailPanel.jobActionMenu.buttonLabel": "管理",
     "xpack.rollupJobs.detailPanel.loadingLabel": "正在加载汇总/打包作业……",
     "xpack.rollupJobs.detailPanel.notFoundLabel": "未找到汇总/打包作业",
-    "xpack.rollupJobs.editRollupIndexPattern.createIndex.defaultButtonDescription": "针对汇总数据执行有限聚合",
-    "xpack.rollupJobs.editRollupIndexPattern.createIndex.defaultButtonText": "汇总/打包索引模式",
-    "xpack.rollupJobs.editRollupIndexPattern.createIndex.defaultTypeName": "汇总/打包索引模式",
-    "xpack.rollupJobs.editRollupIndexPattern.createIndex.indexLabel": "汇总/打包",
-    "xpack.rollupJobs.editRollupIndexPattern.createIndex.noMatchError": "汇总/打包索引模式错误：必须匹配一个汇总/打包索引",
-    "xpack.rollupJobs.editRollupIndexPattern.createIndex.tooManyMatchesError": "汇总/打包索引模式错误：只能匹配一个汇总/打包索引",
-    "xpack.rollupJobs.editRollupIndexPattern.createIndex.uncaughtError": "汇总索引模式错误：{error}",
-    "xpack.rollupJobs.editRollupIndexPattern.rollupPrompt.betaCalloutParagraph1Text": "Kibana 对汇总/打包索引模式的支持处于公测版状态。将这些模式用于已保存搜索、可视化以及仪表板可能会遇到问题。某些高级功能，如 Timelion 和 Machine Learning，不支持这些模式。",
-    "xpack.rollupJobs.editRollupIndexPattern.rollupPrompt.betaCalloutParagraph2Text": "可以根据一个汇总/打包索引和零个或更多常规索引匹配汇总/打包索引模式。汇总/打包索引模式的指标、字段、时间间隔和聚合有限。汇总/打包索引仅限于具有一个作业配置或多个作业配置兼容的索引。",
+    "indexPatternManagement.editRollupIndexPattern.createIndex.defaultButtonDescription": "针对汇总数据执行有限聚合",
+    "indexPatternManagement.editRollupIndexPattern.createIndex.defaultButtonText": "汇总/打包索引模式",
+    "indexPatternManagement.editRollupIndexPattern.createIndex.defaultTypeName": "汇总/打包索引模式",
+    "indexPatternManagement.editRollupIndexPattern.createIndex.indexLabel": "汇总/打包",
+    "indexPatternManagement.editRollupIndexPattern.createIndex.noMatchError": "汇总/打包索引模式错误：必须匹配一个汇总/打包索引",
+    "indexPatternManagement.editRollupIndexPattern.createIndex.tooManyMatchesError": "汇总/打包索引模式错误：只能匹配一个汇总/打包索引",
+    "indexPatternManagement.editRollupIndexPattern.createIndex.uncaughtError": "汇总索引模式错误：{error}",
+    "indexPatternManagement.editRollupIndexPattern.rollupPrompt.betaCalloutParagraph1Text": "Kibana 对汇总/打包索引模式的支持处于公测版状态。将这些模式用于已保存搜索、可视化以及仪表板可能会遇到问题。某些高级功能，如 Timelion 和 Machine Learning，不支持这些模式。",
+    "indexPatternManagement.editRollupIndexPattern.rollupPrompt.betaCalloutParagraph2Text": "可以根据一个汇总/打包索引和零个或更多常规索引匹配汇总/打包索引模式。汇总/打包索引模式的指标、字段、时间间隔和聚合有限。汇总/打包索引仅限于具有一个作业配置或多个作业配置兼容的索引。",
     "xpack.rollupJobs.featureCatalogueDescription": "汇总历史数据并将其存储在较小的索引中以供将来分析。",
     "xpack.rollupJobs.indexMgmtBadge.rollupLabel": "汇总/打包",
     "xpack.rollupJobs.indexMgmtToggle.toggleLabel": "包括汇总索引",
@@ -24666,8 +24621,6 @@
     "xpack.watcher.sections.watchEdit.json.titlePanel.editWatchTitle": "编辑 {watchName}",
     "xpack.watcher.sections.watchEdit.loadingWatchDescription": "正在加载监视……",
     "xpack.watcher.sections.watchEdit.loadingWatchVisualizationDescription": "正在加载监视可视化……",
-    "xpack.watcher.sections.watchEdit.monitoring.edit.calloutDescriptionText": "监视“{watchName}”为系统监视，无法编辑。{watchStatusLink}",
-    "xpack.watcher.sections.watchEdit.monitoring.edit.calloutTitleText": "此监视无法编辑。",
     "xpack.watcher.sections.watchEdit.monitoring.header.watchLinkTitle": "查看监视状态。",
     "xpack.watcher.sections.watchEdit.simulate.form.actionModesFieldLabel": "操作模式",
     "xpack.watcher.sections.watchEdit.simulate.form.actionOverridesDescription": "允许监视执行或跳过操作。{actionsLink}",
diff --git a/x-pack/plugins/uptime/public/components/common/header/action_menu_content.tsx b/x-pack/plugins/uptime/public/components/common/header/action_menu_content.tsx
index ac7c8ae0a95c65..da32ffd41853bc 100644
--- a/x-pack/plugins/uptime/public/components/common/header/action_menu_content.tsx
+++ b/x-pack/plugins/uptime/public/components/common/header/action_menu_content.tsx
@@ -49,19 +49,19 @@ export function ActionMenuContent(): React.ReactElement {
   );
 
   return (
-    <EuiHeaderLinks>
+    <EuiHeaderLinks gutterSize="xs">
       <EuiHeaderSectionItem>
         <EuiButtonEmpty
+          size="xs"
           aria-label={i18n.translate('xpack.uptime.page_header.settingsLink.label', {
             defaultMessage: 'Navigate to the Uptime settings page',
           })}
-          color="primary"
+          color="text"
           data-test-subj="settings-page-link"
           href={history.createHref({
             pathname: SETTINGS_ROUTE,
             search: stringifyUrlParams(params, true),
           })}
-          iconType="gear"
         >
           <FormattedMessage id="xpack.uptime.page_header.settingsLink" defaultMessage="Settings" />
         </EuiButtonEmpty>
@@ -72,12 +72,13 @@ export function ActionMenuContent(): React.ReactElement {
       <EuiHeaderSectionItem>
         <EuiToolTip position="top" content={<p>{ANALYZE_MESSAGE}</p>}>
           <EuiButtonEmpty
+            size="xs"
             aria-label={i18n.translate('xpack.uptime.page_header.analyzeData.label', {
               defaultMessage:
                 'Navigate to the "Analyze Data" view to visualize Synthetics/User data',
             })}
             href={syntheticExploratoryViewLink}
-            color="primary"
+            color="text"
             iconType="visBarVerticalStacked"
           >
             {ANALYZE_DATA}
diff --git a/x-pack/plugins/uptime/public/components/fleet_package/contexts/http_context.tsx b/x-pack/plugins/uptime/public/components/fleet_package/contexts/http_context.tsx
new file mode 100644
index 00000000000000..d1306836afa9c8
--- /dev/null
+++ b/x-pack/plugins/uptime/public/components/fleet_package/contexts/http_context.tsx
@@ -0,0 +1,60 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { createContext, useContext, useMemo, useState } from 'react';
+import { IHTTPSimpleFields, ConfigKeys, ScheduleUnit, DataStream } from '../types';
+
+interface IHTTPSimpleFieldsContext {
+  setFields: React.Dispatch<React.SetStateAction<IHTTPSimpleFields>>;
+  fields: IHTTPSimpleFields;
+  defaultValues: IHTTPSimpleFields;
+}
+
+interface IHTTPSimpleFieldsContextProvider {
+  children: React.ReactNode;
+  defaultValues?: IHTTPSimpleFields;
+}
+
+export const initialValues = {
+  [ConfigKeys.URLS]: '',
+  [ConfigKeys.MAX_REDIRECTS]: '0',
+  [ConfigKeys.MONITOR_TYPE]: DataStream.HTTP,
+  [ConfigKeys.SCHEDULE]: {
+    number: '3',
+    unit: ScheduleUnit.MINUTES,
+  },
+  [ConfigKeys.APM_SERVICE_NAME]: '',
+  [ConfigKeys.TAGS]: [],
+  [ConfigKeys.TIMEOUT]: '16',
+};
+
+const defaultContext: IHTTPSimpleFieldsContext = {
+  setFields: (_fields: React.SetStateAction<IHTTPSimpleFields>) => {
+    throw new Error(
+      'setFields was not initialized for HTTP Simple Fields, set it when you invoke the context'
+    );
+  },
+  fields: initialValues, // mutable
+  defaultValues: initialValues, // immutable
+};
+
+export const HTTPSimpleFieldsContext = createContext(defaultContext);
+
+export const HTTPSimpleFieldsContextProvider = ({
+  children,
+  defaultValues = initialValues,
+}: IHTTPSimpleFieldsContextProvider) => {
+  const [fields, setFields] = useState<IHTTPSimpleFields>(defaultValues);
+
+  const value = useMemo(() => {
+    return { fields, setFields, defaultValues };
+  }, [fields, defaultValues]);
+
+  return <HTTPSimpleFieldsContext.Provider value={value} children={children} />;
+};
+
+export const useHTTPSimpleFieldsContext = () => useContext(HTTPSimpleFieldsContext);
diff --git a/x-pack/plugins/uptime/public/components/fleet_package/contexts/http_provider.tsx b/x-pack/plugins/uptime/public/components/fleet_package/contexts/http_provider.tsx
new file mode 100644
index 00000000000000..e48de76862e24a
--- /dev/null
+++ b/x-pack/plugins/uptime/public/components/fleet_package/contexts/http_provider.tsx
@@ -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
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { ReactNode } from 'react';
+import { IHTTPSimpleFields, IHTTPAdvancedFields, ITLSFields, ConfigKeys } from '../types';
+import {
+  HTTPSimpleFieldsContextProvider,
+  HTTPAdvancedFieldsContextProvider,
+  TLSFieldsContextProvider,
+} from '.';
+
+interface HTTPContextProviderProps {
+  defaultValues?: any;
+  children: ReactNode;
+}
+
+export const HTTPContextProvider = ({ defaultValues, children }: HTTPContextProviderProps) => {
+  const httpAdvancedFields: IHTTPAdvancedFields | undefined = defaultValues
+    ? {
+        [ConfigKeys.USERNAME]: defaultValues[ConfigKeys.USERNAME],
+        [ConfigKeys.PASSWORD]: defaultValues[ConfigKeys.PASSWORD],
+        [ConfigKeys.PROXY_URL]: defaultValues[ConfigKeys.PROXY_URL],
+        [ConfigKeys.RESPONSE_BODY_CHECK_NEGATIVE]:
+          defaultValues[ConfigKeys.RESPONSE_BODY_CHECK_NEGATIVE],
+        [ConfigKeys.RESPONSE_BODY_CHECK_POSITIVE]:
+          defaultValues[ConfigKeys.RESPONSE_BODY_CHECK_POSITIVE],
+        [ConfigKeys.RESPONSE_BODY_INDEX]: defaultValues[ConfigKeys.RESPONSE_BODY_INDEX],
+        [ConfigKeys.RESPONSE_HEADERS_CHECK]: defaultValues[ConfigKeys.RESPONSE_HEADERS_CHECK],
+        [ConfigKeys.RESPONSE_HEADERS_INDEX]: defaultValues[ConfigKeys.RESPONSE_HEADERS_INDEX],
+        [ConfigKeys.RESPONSE_STATUS_CHECK]: defaultValues[ConfigKeys.RESPONSE_STATUS_CHECK],
+        [ConfigKeys.REQUEST_BODY_CHECK]: defaultValues[ConfigKeys.REQUEST_BODY_CHECK],
+        [ConfigKeys.REQUEST_HEADERS_CHECK]: defaultValues[ConfigKeys.REQUEST_HEADERS_CHECK],
+        [ConfigKeys.REQUEST_METHOD_CHECK]: defaultValues[ConfigKeys.REQUEST_METHOD_CHECK],
+      }
+    : undefined;
+  const httpSimpleFields: IHTTPSimpleFields | undefined = defaultValues
+    ? {
+        [ConfigKeys.APM_SERVICE_NAME]: defaultValues[ConfigKeys.APM_SERVICE_NAME],
+        [ConfigKeys.MAX_REDIRECTS]: defaultValues[ConfigKeys.MAX_REDIRECTS],
+        [ConfigKeys.MONITOR_TYPE]: defaultValues[ConfigKeys.MONITOR_TYPE],
+        [ConfigKeys.SCHEDULE]: defaultValues[ConfigKeys.SCHEDULE],
+        [ConfigKeys.TAGS]: defaultValues[ConfigKeys.TAGS],
+        [ConfigKeys.TIMEOUT]: defaultValues[ConfigKeys.TIMEOUT],
+        [ConfigKeys.URLS]: defaultValues[ConfigKeys.URLS],
+      }
+    : undefined;
+  const tlsFields: ITLSFields | undefined = defaultValues
+    ? {
+        [ConfigKeys.TLS_CERTIFICATE_AUTHORITIES]:
+          defaultValues[ConfigKeys.TLS_CERTIFICATE_AUTHORITIES],
+        [ConfigKeys.TLS_CERTIFICATE]: defaultValues[ConfigKeys.TLS_CERTIFICATE],
+        [ConfigKeys.TLS_KEY]: defaultValues[ConfigKeys.TLS_KEY],
+        [ConfigKeys.TLS_KEY_PASSPHRASE]: defaultValues[ConfigKeys.TLS_KEY_PASSPHRASE],
+        [ConfigKeys.TLS_VERIFICATION_MODE]: defaultValues[ConfigKeys.TLS_VERIFICATION_MODE],
+        [ConfigKeys.TLS_VERSION]: defaultValues[ConfigKeys.TLS_VERSION],
+      }
+    : undefined;
+  return (
+    <HTTPAdvancedFieldsContextProvider defaultValues={httpAdvancedFields}>
+      <HTTPSimpleFieldsContextProvider defaultValues={httpSimpleFields}>
+        <TLSFieldsContextProvider defaultValues={tlsFields}>{children}</TLSFieldsContextProvider>
+      </HTTPSimpleFieldsContextProvider>
+    </HTTPAdvancedFieldsContextProvider>
+  );
+};
diff --git a/x-pack/plugins/uptime/public/components/fleet_package/contexts/icmp_context.tsx b/x-pack/plugins/uptime/public/components/fleet_package/contexts/icmp_context.tsx
new file mode 100644
index 00000000000000..93c67c6133ce9f
--- /dev/null
+++ b/x-pack/plugins/uptime/public/components/fleet_package/contexts/icmp_context.tsx
@@ -0,0 +1,61 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { createContext, useContext, useMemo, useState } from 'react';
+import { IICMPSimpleFields, ConfigKeys, ScheduleUnit, DataStream } from '../types';
+
+interface IICMPSimpleFieldsContext {
+  setFields: React.Dispatch<React.SetStateAction<IICMPSimpleFields>>;
+  fields: IICMPSimpleFields;
+  defaultValues: IICMPSimpleFields;
+}
+
+interface IICMPSimpleFieldsContextProvider {
+  children: React.ReactNode;
+  defaultValues?: IICMPSimpleFields;
+}
+
+export const initialValues = {
+  [ConfigKeys.HOSTS]: '',
+  [ConfigKeys.MAX_REDIRECTS]: '0',
+  [ConfigKeys.MONITOR_TYPE]: DataStream.ICMP,
+  [ConfigKeys.SCHEDULE]: {
+    number: '3',
+    unit: ScheduleUnit.MINUTES,
+  },
+  [ConfigKeys.APM_SERVICE_NAME]: '',
+  [ConfigKeys.TAGS]: [],
+  [ConfigKeys.TIMEOUT]: '16',
+  [ConfigKeys.WAIT]: '1',
+};
+
+const defaultContext: IICMPSimpleFieldsContext = {
+  setFields: (_fields: React.SetStateAction<IICMPSimpleFields>) => {
+    throw new Error(
+      'setFields was not initialized for ICMP Simple Fields, set it when you invoke the context'
+    );
+  },
+  fields: initialValues, // mutable
+  defaultValues: initialValues, // immutable
+};
+
+export const ICMPSimpleFieldsContext = createContext(defaultContext);
+
+export const ICMPSimpleFieldsContextProvider = ({
+  children,
+  defaultValues = initialValues,
+}: IICMPSimpleFieldsContextProvider) => {
+  const [fields, setFields] = useState<IICMPSimpleFields>(defaultValues);
+
+  const value = useMemo(() => {
+    return { fields, setFields, defaultValues };
+  }, [fields, defaultValues]);
+
+  return <ICMPSimpleFieldsContext.Provider value={value} children={children} />;
+};
+
+export const useICMPSimpleFieldsContext = () => useContext(ICMPSimpleFieldsContext);
diff --git a/x-pack/plugins/uptime/public/components/fleet_package/contexts/index.ts b/x-pack/plugins/uptime/public/components/fleet_package/contexts/index.ts
index bea3e9d5641a57..f84a4e75df922a 100644
--- a/x-pack/plugins/uptime/public/components/fleet_package/contexts/index.ts
+++ b/x-pack/plugins/uptime/public/components/fleet_package/contexts/index.ts
@@ -6,11 +6,29 @@
  */
 
 export {
-  SimpleFieldsContext,
-  SimpleFieldsContextProvider,
-  initialValues as defaultSimpleFields,
-  useSimpleFieldsContext,
-} from './simple_fields_context';
+  MonitorTypeContext,
+  MonitorTypeContextProvider,
+  initialValue as defaultMonitorType,
+  useMonitorTypeContext,
+} from './monitor_type_context';
+export {
+  HTTPSimpleFieldsContext,
+  HTTPSimpleFieldsContextProvider,
+  initialValues as defaultHTTPSimpleFields,
+  useHTTPSimpleFieldsContext,
+} from './http_context';
+export {
+  TCPSimpleFieldsContext,
+  TCPSimpleFieldsContextProvider,
+  initialValues as defaultTCPSimpleFields,
+  useTCPSimpleFieldsContext,
+} from './tcp_context';
+export {
+  ICMPSimpleFieldsContext,
+  ICMPSimpleFieldsContextProvider,
+  initialValues as defaultICMPSimpleFields,
+  useICMPSimpleFieldsContext,
+} from './icmp_context';
 export {
   TCPAdvancedFieldsContext,
   TCPAdvancedFieldsContextProvider,
@@ -29,3 +47,5 @@ export {
   initialValues as defaultTLSFields,
   useTLSFieldsContext,
 } from './tls_fields_context';
+export { HTTPContextProvider } from './http_provider';
+export { TCPContextProvider } from './tcp_provider';
diff --git a/x-pack/plugins/uptime/public/components/fleet_package/contexts/monitor_type_context.tsx b/x-pack/plugins/uptime/public/components/fleet_package/contexts/monitor_type_context.tsx
new file mode 100644
index 00000000000000..6e9a5de83c2fe1
--- /dev/null
+++ b/x-pack/plugins/uptime/public/components/fleet_package/contexts/monitor_type_context.tsx
@@ -0,0 +1,47 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { createContext, useContext, useMemo, useState } from 'react';
+import { DataStream } from '../types';
+
+interface IMonitorTypeFieldsContext {
+  setMonitorType: React.Dispatch<React.SetStateAction<DataStream>>;
+  monitorType: DataStream;
+  defaultValue: DataStream;
+}
+
+interface IMonitorTypeFieldsContextProvider {
+  children: React.ReactNode;
+  defaultValue?: DataStream;
+}
+
+export const initialValue = DataStream.HTTP;
+
+const defaultContext: IMonitorTypeFieldsContext = {
+  setMonitorType: (_monitorType: React.SetStateAction<DataStream>) => {
+    throw new Error('setMonitorType was not initialized, set it when you invoke the context');
+  },
+  monitorType: initialValue, // mutable
+  defaultValue: initialValue, // immutable
+};
+
+export const MonitorTypeContext = createContext(defaultContext);
+
+export const MonitorTypeContextProvider = ({
+  children,
+  defaultValue = initialValue,
+}: IMonitorTypeFieldsContextProvider) => {
+  const [monitorType, setMonitorType] = useState<DataStream>(defaultValue);
+
+  const value = useMemo(() => {
+    return { monitorType, setMonitorType, defaultValue };
+  }, [monitorType, defaultValue]);
+
+  return <MonitorTypeContext.Provider value={value} children={children} />;
+};
+
+export const useMonitorTypeContext = () => useContext(MonitorTypeContext);
diff --git a/x-pack/plugins/uptime/public/components/fleet_package/contexts/simple_fields_context.tsx b/x-pack/plugins/uptime/public/components/fleet_package/contexts/simple_fields_context.tsx
deleted file mode 100644
index 1d981ed4c2c8fb..00000000000000
--- a/x-pack/plugins/uptime/public/components/fleet_package/contexts/simple_fields_context.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
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React, { createContext, useContext, useMemo, useState } from 'react';
-import { ISimpleFields, ConfigKeys, ScheduleUnit, DataStream } from '../types';
-
-interface ISimpleFieldsContext {
-  setFields: React.Dispatch<React.SetStateAction<ISimpleFields>>;
-  fields: ISimpleFields;
-  defaultValues: ISimpleFields;
-}
-
-interface ISimpleFieldsContextProvider {
-  children: React.ReactNode;
-  defaultValues?: ISimpleFields;
-}
-
-export const initialValues = {
-  [ConfigKeys.HOSTS]: '',
-  [ConfigKeys.MAX_REDIRECTS]: '0',
-  [ConfigKeys.MONITOR_TYPE]: DataStream.HTTP,
-  [ConfigKeys.SCHEDULE]: {
-    number: '3',
-    unit: ScheduleUnit.MINUTES,
-  },
-  [ConfigKeys.APM_SERVICE_NAME]: '',
-  [ConfigKeys.TAGS]: [],
-  [ConfigKeys.TIMEOUT]: '16',
-  [ConfigKeys.URLS]: '',
-  [ConfigKeys.WAIT]: '1',
-};
-
-const defaultContext: ISimpleFieldsContext = {
-  setFields: (_fields: React.SetStateAction<ISimpleFields>) => {
-    throw new Error('setSimpleFields was not initialized, set it when you invoke the context');
-  },
-  fields: initialValues, // mutable
-  defaultValues: initialValues, // immutable
-};
-
-export const SimpleFieldsContext = createContext(defaultContext);
-
-export const SimpleFieldsContextProvider = ({
-  children,
-  defaultValues = initialValues,
-}: ISimpleFieldsContextProvider) => {
-  const [fields, setFields] = useState<ISimpleFields>(defaultValues);
-
-  const value = useMemo(() => {
-    return { fields, setFields, defaultValues };
-  }, [fields, defaultValues]);
-
-  return <SimpleFieldsContext.Provider value={value} children={children} />;
-};
-
-export const useSimpleFieldsContext = () => useContext(SimpleFieldsContext);
diff --git a/x-pack/plugins/uptime/public/components/fleet_package/contexts/tcp_context.tsx b/x-pack/plugins/uptime/public/components/fleet_package/contexts/tcp_context.tsx
new file mode 100644
index 00000000000000..6020a7ff2bff8d
--- /dev/null
+++ b/x-pack/plugins/uptime/public/components/fleet_package/contexts/tcp_context.tsx
@@ -0,0 +1,60 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { createContext, useContext, useMemo, useState } from 'react';
+import { ITCPSimpleFields, ConfigKeys, ScheduleUnit, DataStream } from '../types';
+
+interface ITCPSimpleFieldsContext {
+  setFields: React.Dispatch<React.SetStateAction<ITCPSimpleFields>>;
+  fields: ITCPSimpleFields;
+  defaultValues: ITCPSimpleFields;
+}
+
+interface ITCPSimpleFieldsContextProvider {
+  children: React.ReactNode;
+  defaultValues?: ITCPSimpleFields;
+}
+
+export const initialValues = {
+  [ConfigKeys.HOSTS]: '',
+  [ConfigKeys.MAX_REDIRECTS]: '0',
+  [ConfigKeys.MONITOR_TYPE]: DataStream.TCP,
+  [ConfigKeys.SCHEDULE]: {
+    number: '3',
+    unit: ScheduleUnit.MINUTES,
+  },
+  [ConfigKeys.APM_SERVICE_NAME]: '',
+  [ConfigKeys.TAGS]: [],
+  [ConfigKeys.TIMEOUT]: '16',
+};
+
+const defaultContext: ITCPSimpleFieldsContext = {
+  setFields: (_fields: React.SetStateAction<ITCPSimpleFields>) => {
+    throw new Error(
+      'setFields was not initialized for TCP Simple Fields, set it when you invoke the context'
+    );
+  },
+  fields: initialValues, // mutable
+  defaultValues: initialValues, // immutable
+};
+
+export const TCPSimpleFieldsContext = createContext(defaultContext);
+
+export const TCPSimpleFieldsContextProvider = ({
+  children,
+  defaultValues = initialValues,
+}: ITCPSimpleFieldsContextProvider) => {
+  const [fields, setFields] = useState<ITCPSimpleFields>(defaultValues);
+
+  const value = useMemo(() => {
+    return { fields, setFields, defaultValues };
+  }, [fields, defaultValues]);
+
+  return <TCPSimpleFieldsContext.Provider value={value} children={children} />;
+};
+
+export const useTCPSimpleFieldsContext = () => useContext(TCPSimpleFieldsContext);
diff --git a/x-pack/plugins/uptime/public/components/fleet_package/contexts/tcp_provider.tsx b/x-pack/plugins/uptime/public/components/fleet_package/contexts/tcp_provider.tsx
new file mode 100644
index 00000000000000..666839803f4d67
--- /dev/null
+++ b/x-pack/plugins/uptime/public/components/fleet_package/contexts/tcp_provider.tsx
@@ -0,0 +1,62 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { ReactNode } from 'react';
+import { ConfigKeys, ITCPSimpleFields, ITCPAdvancedFields, ITLSFields } from '../types';
+import {
+  TCPSimpleFieldsContextProvider,
+  TCPAdvancedFieldsContextProvider,
+  TLSFieldsContextProvider,
+} from '.';
+
+interface TCPContextProviderProps {
+  defaultValues?: any;
+  children: ReactNode;
+}
+
+/**
+ * Exports Synthetics-specific package policy instructions
+ * for use in the Ingest app create / edit package policy
+ */
+export const TCPContextProvider = ({ defaultValues, children }: TCPContextProviderProps) => {
+  const tcpSimpleFields: ITCPSimpleFields | undefined = defaultValues
+    ? {
+        [ConfigKeys.APM_SERVICE_NAME]: defaultValues[ConfigKeys.APM_SERVICE_NAME],
+        [ConfigKeys.HOSTS]: defaultValues[ConfigKeys.HOSTS],
+        [ConfigKeys.MONITOR_TYPE]: defaultValues[ConfigKeys.MONITOR_TYPE],
+        [ConfigKeys.SCHEDULE]: defaultValues[ConfigKeys.SCHEDULE],
+        [ConfigKeys.TAGS]: defaultValues[ConfigKeys.TAGS],
+        [ConfigKeys.TIMEOUT]: defaultValues[ConfigKeys.TIMEOUT],
+      }
+    : undefined;
+  const tcpAdvancedFields: ITCPAdvancedFields | undefined = defaultValues
+    ? {
+        [ConfigKeys.PROXY_URL]: defaultValues[ConfigKeys.PROXY_URL],
+        [ConfigKeys.PROXY_USE_LOCAL_RESOLVER]: defaultValues[ConfigKeys.PROXY_USE_LOCAL_RESOLVER],
+        [ConfigKeys.RESPONSE_RECEIVE_CHECK]: defaultValues[ConfigKeys.RESPONSE_RECEIVE_CHECK],
+        [ConfigKeys.REQUEST_SEND_CHECK]: defaultValues[ConfigKeys.REQUEST_SEND_CHECK],
+      }
+    : undefined;
+  const tlsFields: ITLSFields | undefined = defaultValues
+    ? {
+        [ConfigKeys.TLS_CERTIFICATE_AUTHORITIES]:
+          defaultValues[ConfigKeys.TLS_CERTIFICATE_AUTHORITIES],
+        [ConfigKeys.TLS_CERTIFICATE]: defaultValues[ConfigKeys.TLS_CERTIFICATE],
+        [ConfigKeys.TLS_KEY]: defaultValues[ConfigKeys.TLS_KEY],
+        [ConfigKeys.TLS_KEY_PASSPHRASE]: defaultValues[ConfigKeys.TLS_KEY_PASSPHRASE],
+        [ConfigKeys.TLS_VERIFICATION_MODE]: defaultValues[ConfigKeys.TLS_VERIFICATION_MODE],
+        [ConfigKeys.TLS_VERSION]: defaultValues[ConfigKeys.TLS_VERSION],
+      }
+    : undefined;
+  return (
+    <TCPAdvancedFieldsContextProvider defaultValues={tcpAdvancedFields}>
+      <TCPSimpleFieldsContextProvider defaultValues={tcpSimpleFields}>
+        <TLSFieldsContextProvider defaultValues={tlsFields}>{children}</TLSFieldsContextProvider>
+      </TCPSimpleFieldsContextProvider>
+    </TCPAdvancedFieldsContextProvider>
+  );
+};
diff --git a/x-pack/plugins/uptime/public/components/fleet_package/custom_fields.test.tsx b/x-pack/plugins/uptime/public/components/fleet_package/custom_fields.test.tsx
index b5fec58d4da850..e114ea72b8f49c 100644
--- a/x-pack/plugins/uptime/public/components/fleet_package/custom_fields.test.tsx
+++ b/x-pack/plugins/uptime/public/components/fleet_package/custom_fields.test.tsx
@@ -9,18 +9,15 @@ import React from 'react';
 import { fireEvent, waitFor } from '@testing-library/react';
 import { render } from '../../lib/helper/rtl_helpers';
 import {
-  SimpleFieldsContextProvider,
-  HTTPAdvancedFieldsContextProvider,
-  TCPAdvancedFieldsContextProvider,
-  TLSFieldsContextProvider,
-  defaultSimpleFields,
-  defaultTLSFields,
-  defaultHTTPAdvancedFields,
-  defaultTCPAdvancedFields,
+  TCPContextProvider,
+  HTTPContextProvider,
+  ICMPSimpleFieldsContextProvider,
+  MonitorTypeContextProvider,
 } from './contexts';
 import { CustomFields } from './custom_fields';
 import { ConfigKeys, DataStream, ScheduleUnit } from './types';
 import { validate as centralValidation } from './validation';
+import { defaultConfig } from './synthetics_policy_create_extension';
 
 // ensures that fields appropriately match to their label
 jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({
@@ -29,25 +26,21 @@ jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({
 
 const defaultValidation = centralValidation[DataStream.HTTP];
 
-const defaultConfig = {
-  ...defaultSimpleFields,
-  ...defaultTLSFields,
-  ...defaultHTTPAdvancedFields,
-  ...defaultTCPAdvancedFields,
-};
+const defaultHTTPConfig = defaultConfig[DataStream.HTTP];
+const defaultTCPConfig = defaultConfig[DataStream.TCP];
 
 describe('<CustomFields />', () => {
   const WrappedComponent = ({ validate = defaultValidation, typeEditable = false }) => {
     return (
-      <HTTPAdvancedFieldsContextProvider>
-        <TLSFieldsContextProvider>
-          <TCPAdvancedFieldsContextProvider>
-            <SimpleFieldsContextProvider>
+      <HTTPContextProvider>
+        <MonitorTypeContextProvider>
+          <TCPContextProvider>
+            <ICMPSimpleFieldsContextProvider>
               <CustomFields validate={validate} typeEditable={typeEditable} />
-            </SimpleFieldsContextProvider>
-          </TCPAdvancedFieldsContextProvider>
-        </TLSFieldsContextProvider>
-      </HTTPAdvancedFieldsContextProvider>
+            </ICMPSimpleFieldsContextProvider>
+          </TCPContextProvider>
+        </MonitorTypeContextProvider>
+      </HTTPContextProvider>
     );
   };
 
@@ -63,20 +56,20 @@ describe('<CustomFields />', () => {
     const timeout = getByLabelText('Timeout in seconds') as HTMLInputElement;
     expect(monitorType).not.toBeInTheDocument();
     expect(url).toBeInTheDocument();
-    expect(url.value).toEqual(defaultConfig[ConfigKeys.URLS]);
+    expect(url.value).toEqual(defaultHTTPConfig[ConfigKeys.URLS]);
     expect(proxyUrl).toBeInTheDocument();
-    expect(proxyUrl.value).toEqual(defaultConfig[ConfigKeys.PROXY_URL]);
+    expect(proxyUrl.value).toEqual(defaultHTTPConfig[ConfigKeys.PROXY_URL]);
     expect(monitorIntervalNumber).toBeInTheDocument();
-    expect(monitorIntervalNumber.value).toEqual(defaultConfig[ConfigKeys.SCHEDULE].number);
+    expect(monitorIntervalNumber.value).toEqual(defaultHTTPConfig[ConfigKeys.SCHEDULE].number);
     expect(monitorIntervalUnit).toBeInTheDocument();
-    expect(monitorIntervalUnit.value).toEqual(defaultConfig[ConfigKeys.SCHEDULE].unit);
+    expect(monitorIntervalUnit.value).toEqual(defaultHTTPConfig[ConfigKeys.SCHEDULE].unit);
     // expect(tags).toBeInTheDocument();
     expect(apmServiceName).toBeInTheDocument();
-    expect(apmServiceName.value).toEqual(defaultConfig[ConfigKeys.APM_SERVICE_NAME]);
+    expect(apmServiceName.value).toEqual(defaultHTTPConfig[ConfigKeys.APM_SERVICE_NAME]);
     expect(maxRedirects).toBeInTheDocument();
-    expect(maxRedirects.value).toEqual(`${defaultConfig[ConfigKeys.MAX_REDIRECTS]}`);
+    expect(maxRedirects.value).toEqual(`${defaultHTTPConfig[ConfigKeys.MAX_REDIRECTS]}`);
     expect(timeout).toBeInTheDocument();
-    expect(timeout.value).toEqual(`${defaultConfig[ConfigKeys.TIMEOUT]}`);
+    expect(timeout.value).toEqual(`${defaultHTTPConfig[ConfigKeys.TIMEOUT]}`);
 
     // ensure other monitor type options are not in the DOM
     expect(queryByLabelText('Host')).not.toBeInTheDocument();
@@ -116,11 +109,15 @@ describe('<CustomFields />', () => {
     expect(verificationMode).toBeInTheDocument();
 
     await waitFor(() => {
-      expect(ca.value).toEqual(defaultConfig[ConfigKeys.TLS_CERTIFICATE_AUTHORITIES].value);
-      expect(clientKey.value).toEqual(defaultConfig[ConfigKeys.TLS_KEY].value);
-      expect(clientKeyPassphrase.value).toEqual(defaultConfig[ConfigKeys.TLS_KEY_PASSPHRASE].value);
-      expect(clientCertificate.value).toEqual(defaultConfig[ConfigKeys.TLS_CERTIFICATE].value);
-      expect(verificationMode.value).toEqual(defaultConfig[ConfigKeys.TLS_VERIFICATION_MODE].value);
+      expect(ca.value).toEqual(defaultHTTPConfig[ConfigKeys.TLS_CERTIFICATE_AUTHORITIES].value);
+      expect(clientKey.value).toEqual(defaultHTTPConfig[ConfigKeys.TLS_KEY].value);
+      expect(clientKeyPassphrase.value).toEqual(
+        defaultHTTPConfig[ConfigKeys.TLS_KEY_PASSPHRASE].value
+      );
+      expect(clientCertificate.value).toEqual(defaultHTTPConfig[ConfigKeys.TLS_CERTIFICATE].value);
+      expect(verificationMode.value).toEqual(
+        defaultHTTPConfig[ConfigKeys.TLS_VERIFICATION_MODE].value
+      );
     });
   });
 
@@ -157,14 +154,14 @@ describe('<CustomFields />', () => {
     );
     const monitorType = getByLabelText('Monitor Type') as HTMLInputElement;
     expect(monitorType).toBeInTheDocument();
-    expect(monitorType.value).toEqual(defaultConfig[ConfigKeys.MONITOR_TYPE]);
+    expect(monitorType.value).toEqual(defaultHTTPConfig[ConfigKeys.MONITOR_TYPE]);
     fireEvent.change(monitorType, { target: { value: DataStream.TCP } });
 
     // expect tcp fields to be in the DOM
     const host = getByLabelText('Host:Port') as HTMLInputElement;
 
     expect(host).toBeInTheDocument();
-    expect(host.value).toEqual(defaultConfig[ConfigKeys.HOSTS]);
+    expect(host.value).toEqual(defaultTCPConfig[ConfigKeys.HOSTS]);
 
     // expect HTTP fields not to be in the DOM
     expect(queryByLabelText('URL')).not.toBeInTheDocument();
diff --git a/x-pack/plugins/uptime/public/components/fleet_package/custom_fields.tsx b/x-pack/plugins/uptime/public/components/fleet_package/custom_fields.tsx
index e6703a6eaa97cd..0d9291261b82d6 100644
--- a/x-pack/plugins/uptime/public/components/fleet_package/custom_fields.tsx
+++ b/x-pack/plugins/uptime/public/components/fleet_package/custom_fields.tsx
@@ -5,28 +5,26 @@
  * 2.0.
  */
 
-import React, { useEffect, useState, memo } from 'react';
+import React, { useState, memo } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiForm,
   EuiFormRow,
-  EuiFieldText,
-  EuiFieldNumber,
   EuiSelect,
   EuiSpacer,
   EuiDescribedFormGroup,
   EuiCheckbox,
 } from '@elastic/eui';
-import { ConfigKeys, DataStream, ISimpleFields, Validation } from './types';
-import { useSimpleFieldsContext } from './contexts';
+import { ConfigKeys, DataStream, Validation } from './types';
+import { useMonitorTypeContext } from './contexts';
 import { TLSFields, TLSRole } from './tls_fields';
-import { ComboBox } from './combo_box';
-import { OptionalLabel } from './optional_label';
-import { HTTPAdvancedFields } from './http_advanced_fields';
-import { TCPAdvancedFields } from './tcp_advanced_fields';
-import { ScheduleField } from './schedule_field';
+import { HTTPSimpleFields } from './http/simple_fields';
+import { HTTPAdvancedFields } from './http/advanced_fields';
+import { TCPSimpleFields } from './tcp/simple_fields';
+import { TCPAdvancedFields } from './tcp/advanced_fields';
+import { ICMPSimpleFields } from './icmp/simple_fields';
 
 interface Props {
   typeEditable?: boolean;
@@ -37,26 +35,22 @@ interface Props {
 export const CustomFields = memo<Props>(
   ({ typeEditable = false, isTLSEnabled: defaultIsTLSEnabled = false, validate }) => {
     const [isTLSEnabled, setIsTLSEnabled] = useState<boolean>(defaultIsTLSEnabled);
-    const { fields, setFields, defaultValues } = useSimpleFieldsContext();
-    const { type } = fields;
+    const { monitorType, setMonitorType } = useMonitorTypeContext();
 
-    const isHTTP = fields[ConfigKeys.MONITOR_TYPE] === DataStream.HTTP;
-    const isTCP = fields[ConfigKeys.MONITOR_TYPE] === DataStream.TCP;
-    const isICMP = fields[ConfigKeys.MONITOR_TYPE] === DataStream.ICMP;
+    const isHTTP = monitorType === DataStream.HTTP;
+    const isTCP = monitorType === DataStream.TCP;
 
-    // reset monitor type specific fields any time a monitor type is switched
-    useEffect(() => {
-      if (typeEditable) {
-        setFields((prevFields: ISimpleFields) => ({
-          ...prevFields,
-          [ConfigKeys.HOSTS]: defaultValues[ConfigKeys.HOSTS],
-          [ConfigKeys.URLS]: defaultValues[ConfigKeys.URLS],
-        }));
+    const renderSimpleFields = (type: DataStream) => {
+      switch (type) {
+        case DataStream.HTTP:
+          return <HTTPSimpleFields validate={validate} />;
+        case DataStream.ICMP:
+          return <ICMPSimpleFields validate={validate} />;
+        case DataStream.TCP:
+          return <TCPSimpleFields validate={validate} />;
+        default:
+          return null;
       }
-    }, [defaultValues, type, typeEditable, setFields]);
-
-    const handleInputChange = ({ value, configKey }: { value: unknown; configKey: ConfigKeys }) => {
-      setFields((prevFields) => ({ ...prevFields, [configKey]: value }));
     };
 
     return (
@@ -88,7 +82,7 @@ export const CustomFields = memo<Props>(
                       defaultMessage="Monitor Type"
                     />
                   }
-                  isInvalid={!!validate[ConfigKeys.MONITOR_TYPE]?.(fields[ConfigKeys.MONITOR_TYPE])}
+                  isInvalid={!!validate[ConfigKeys.MONITOR_TYPE]?.(monitorType)}
                   error={
                     <FormattedMessage
                       id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.monitorType.error"
@@ -98,281 +92,13 @@ export const CustomFields = memo<Props>(
                 >
                   <EuiSelect
                     options={dataStreamOptions}
-                    value={fields[ConfigKeys.MONITOR_TYPE]}
-                    onChange={(event) =>
-                      handleInputChange({
-                        value: event.target.value,
-                        configKey: ConfigKeys.MONITOR_TYPE,
-                      })
-                    }
+                    value={monitorType}
+                    onChange={(event) => setMonitorType(event.target.value as DataStream)}
                     data-test-subj="syntheticsMonitorTypeField"
                   />
                 </EuiFormRow>
               )}
-              {isHTTP && (
-                <EuiFormRow
-                  label={
-                    <FormattedMessage
-                      id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.URL"
-                      defaultMessage="URL"
-                    />
-                  }
-                  isInvalid={!!validate[ConfigKeys.URLS]?.(fields[ConfigKeys.URLS])}
-                  error={
-                    <FormattedMessage
-                      id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.URL.error"
-                      defaultMessage="URL is required"
-                    />
-                  }
-                >
-                  <EuiFieldText
-                    value={fields[ConfigKeys.URLS]}
-                    onChange={(event) =>
-                      handleInputChange({ value: event.target.value, configKey: ConfigKeys.URLS })
-                    }
-                    data-test-subj="syntheticsUrlField"
-                  />
-                </EuiFormRow>
-              )}
-              {isTCP && (
-                <EuiFormRow
-                  label={
-                    <FormattedMessage
-                      id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.tcp.hosts"
-                      defaultMessage="Host:Port"
-                    />
-                  }
-                  isInvalid={!!validate[ConfigKeys.HOSTS]?.(fields[ConfigKeys.HOSTS])}
-                  error={
-                    <FormattedMessage
-                      id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.tcp.hosts.error"
-                      defaultMessage="Host and port are required"
-                    />
-                  }
-                >
-                  <EuiFieldText
-                    value={fields[ConfigKeys.HOSTS]}
-                    onChange={(event) =>
-                      handleInputChange({
-                        value: event.target.value,
-                        configKey: ConfigKeys.HOSTS,
-                      })
-                    }
-                    data-test-subj="syntheticsTCPHostField"
-                  />
-                </EuiFormRow>
-              )}
-              {isICMP && (
-                <EuiFormRow
-                  label={
-                    <FormattedMessage
-                      id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.icmp.hosts"
-                      defaultMessage="Host"
-                    />
-                  }
-                  isInvalid={!!validate[ConfigKeys.HOSTS]?.(fields[ConfigKeys.HOSTS])}
-                  error={
-                    <FormattedMessage
-                      id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.icmp.hosts.error"
-                      defaultMessage="Host is required"
-                    />
-                  }
-                >
-                  <EuiFieldText
-                    value={fields[ConfigKeys.HOSTS]}
-                    onChange={(event) =>
-                      handleInputChange({
-                        value: event.target.value,
-                        configKey: ConfigKeys.HOSTS,
-                      })
-                    }
-                    data-test-subj="syntheticsICMPHostField"
-                  />
-                </EuiFormRow>
-              )}
-              <EuiFormRow
-                id="syntheticsFleetScheduleField--number syntheticsFleetScheduleField--unit"
-                label={
-                  <FormattedMessage
-                    id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.monitorInterval"
-                    defaultMessage="Monitor interval"
-                  />
-                }
-                isInvalid={!!validate[ConfigKeys.SCHEDULE]?.(fields[ConfigKeys.SCHEDULE])}
-                error={
-                  <FormattedMessage
-                    id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.monitorInterval.error"
-                    defaultMessage="Monitor interval is required"
-                  />
-                }
-              >
-                <ScheduleField
-                  onChange={(schedule) =>
-                    handleInputChange({
-                      value: schedule,
-                      configKey: ConfigKeys.SCHEDULE,
-                    })
-                  }
-                  number={fields[ConfigKeys.SCHEDULE].number}
-                  unit={fields[ConfigKeys.SCHEDULE].unit}
-                />
-              </EuiFormRow>
-              {isICMP && (
-                <EuiFormRow
-                  label={
-                    <FormattedMessage
-                      id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.wait.label"
-                      defaultMessage="Wait in seconds"
-                    />
-                  }
-                  isInvalid={!!validate[ConfigKeys.WAIT]?.(fields[ConfigKeys.WAIT])}
-                  error={
-                    <FormattedMessage
-                      id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.wait.error"
-                      defaultMessage="Wait must be 0 or greater"
-                    />
-                  }
-                  labelAppend={<OptionalLabel />}
-                  helpText={
-                    <FormattedMessage
-                      id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.wait.helpText"
-                      defaultMessage="The duration to wait before emitting another ICMP Echo Request if no response is received."
-                    />
-                  }
-                >
-                  <EuiFieldNumber
-                    min={0}
-                    value={fields[ConfigKeys.WAIT]}
-                    onChange={(event) =>
-                      handleInputChange({ value: event.target.value, configKey: ConfigKeys.WAIT })
-                    }
-                    step={'any'}
-                  />
-                </EuiFormRow>
-              )}
-              <EuiFormRow
-                label={
-                  <FormattedMessage
-                    id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.APMServiceName.label"
-                    defaultMessage="APM service name"
-                  />
-                }
-                labelAppend={<OptionalLabel />}
-                helpText={
-                  <FormattedMessage
-                    id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.APMServiceName.helpText"
-                    defaultMessage="APM service name for this monitor. Corresponds to the service.name ECS field. Set this when monitoring an app that is also using APM to enable integrations between Uptime and APM data in Kibana."
-                  />
-                }
-              >
-                <EuiFieldText
-                  value={fields[ConfigKeys.APM_SERVICE_NAME]}
-                  onChange={(event) =>
-                    handleInputChange({
-                      value: event.target.value,
-                      configKey: ConfigKeys.APM_SERVICE_NAME,
-                    })
-                  }
-                  data-test-subj="syntheticsAPMServiceName"
-                />
-              </EuiFormRow>
-              {isHTTP && (
-                <EuiFormRow
-                  label={
-                    <FormattedMessage
-                      id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.maxRedirects"
-                      defaultMessage="Max redirects"
-                    />
-                  }
-                  isInvalid={
-                    !!validate[ConfigKeys.MAX_REDIRECTS]?.(fields[ConfigKeys.MAX_REDIRECTS])
-                  }
-                  error={
-                    <FormattedMessage
-                      id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.maxRedirects.error"
-                      defaultMessage="Max redirects must be 0 or greater"
-                    />
-                  }
-                  labelAppend={<OptionalLabel />}
-                  helpText={
-                    <FormattedMessage
-                      id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.maxRedirects.helpText"
-                      defaultMessage="The total number of redirections to follow."
-                    />
-                  }
-                >
-                  <EuiFieldNumber
-                    min={0}
-                    value={fields[ConfigKeys.MAX_REDIRECTS]}
-                    onChange={(event) =>
-                      handleInputChange({
-                        value: event.target.value,
-                        configKey: ConfigKeys.MAX_REDIRECTS,
-                      })
-                    }
-                  />
-                </EuiFormRow>
-              )}
-              <EuiFormRow
-                label={
-                  <FormattedMessage
-                    id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.timeout.label"
-                    defaultMessage="Timeout in seconds"
-                  />
-                }
-                isInvalid={
-                  !!validate[ConfigKeys.TIMEOUT]?.(
-                    fields[ConfigKeys.TIMEOUT],
-                    fields[ConfigKeys.SCHEDULE].number,
-                    fields[ConfigKeys.SCHEDULE].unit
-                  )
-                }
-                error={
-                  <FormattedMessage
-                    id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.timeout.error"
-                    defaultMessage="Timeout must be 0 or greater and less than schedule interval"
-                  />
-                }
-                helpText={
-                  <FormattedMessage
-                    id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.timeout.helpText"
-                    defaultMessage="The total time allowed for testing the connection and exchanging data."
-                  />
-                }
-              >
-                <EuiFieldNumber
-                  min={0}
-                  value={fields[ConfigKeys.TIMEOUT]}
-                  onChange={(event) =>
-                    handleInputChange({
-                      value: event.target.value,
-                      configKey: ConfigKeys.TIMEOUT,
-                    })
-                  }
-                  step={'any'}
-                />
-              </EuiFormRow>
-              <EuiFormRow
-                label={
-                  <FormattedMessage
-                    id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.tags.label"
-                    defaultMessage="Tags"
-                  />
-                }
-                labelAppend={<OptionalLabel />}
-                helpText={
-                  <FormattedMessage
-                    id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.tags.helpText"
-                    defaultMessage="A list of tags that will be sent with the monitor event. Press enter to add a new tab. Displayed in Uptime and enables searching by tag."
-                  />
-                }
-              >
-                <ComboBox
-                  selectedOptions={fields[ConfigKeys.TAGS]}
-                  onChange={(value) => handleInputChange({ value, configKey: ConfigKeys.TAGS })}
-                  data-test-subj="syntheticsTags"
-                />
-              </EuiFormRow>
+              {renderSimpleFields(monitorType)}
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiDescribedFormGroup>
diff --git a/x-pack/plugins/uptime/public/components/fleet_package/http_advanced_fields.test.tsx b/x-pack/plugins/uptime/public/components/fleet_package/http/advanced_fields.test.tsx
similarity index 95%
rename from x-pack/plugins/uptime/public/components/fleet_package/http_advanced_fields.test.tsx
rename to x-pack/plugins/uptime/public/components/fleet_package/http/advanced_fields.test.tsx
index b1a37be1bffb67..69c1d897f7847d 100644
--- a/x-pack/plugins/uptime/public/components/fleet_package/http_advanced_fields.test.tsx
+++ b/x-pack/plugins/uptime/public/components/fleet_package/http/advanced_fields.test.tsx
@@ -7,14 +7,14 @@
 
 import React from 'react';
 import { fireEvent } from '@testing-library/react';
-import { render } from '../../lib/helper/rtl_helpers';
-import { HTTPAdvancedFields } from './http_advanced_fields';
-import { ConfigKeys, DataStream, HTTPMethod, IHTTPAdvancedFields, Validation } from './types';
+import { render } from '../../../lib/helper/rtl_helpers';
+import { HTTPAdvancedFields } from './advanced_fields';
+import { ConfigKeys, DataStream, HTTPMethod, IHTTPAdvancedFields, Validation } from '../types';
 import {
   HTTPAdvancedFieldsContextProvider,
   defaultHTTPAdvancedFields as defaultConfig,
-} from './contexts';
-import { validate as centralValidation } from './validation';
+} from '../contexts';
+import { validate as centralValidation } from '../validation';
 
 jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({
   htmlIdGenerator: () => () => `id-${Math.random()}`,
diff --git a/x-pack/plugins/uptime/public/components/fleet_package/http_advanced_fields.tsx b/x-pack/plugins/uptime/public/components/fleet_package/http/advanced_fields.tsx
similarity index 97%
rename from x-pack/plugins/uptime/public/components/fleet_package/http_advanced_fields.tsx
rename to x-pack/plugins/uptime/public/components/fleet_package/http/advanced_fields.tsx
index 568ff526efb6e9..aeaa452c38db96 100644
--- a/x-pack/plugins/uptime/public/components/fleet_package/http_advanced_fields.tsx
+++ b/x-pack/plugins/uptime/public/components/fleet_package/http/advanced_fields.tsx
@@ -20,15 +20,15 @@ import {
   EuiFieldPassword,
 } from '@elastic/eui';
 
-import { useHTTPAdvancedFieldsContext } from './contexts';
+import { useHTTPAdvancedFieldsContext } from '../contexts';
 
-import { ConfigKeys, HTTPMethod, Validation } from './types';
+import { ConfigKeys, HTTPMethod, Validation } from '../types';
 
-import { OptionalLabel } from './optional_label';
-import { HeaderField } from './header_field';
-import { RequestBodyField } from './request_body_field';
-import { ResponseBodyIndexField } from './index_response_body_field';
-import { ComboBox } from './combo_box';
+import { OptionalLabel } from '../optional_label';
+import { HeaderField } from '../header_field';
+import { RequestBodyField } from '../request_body_field';
+import { ResponseBodyIndexField } from '../index_response_body_field';
+import { ComboBox } from '../combo_box';
 
 interface Props {
   validate: Validation;
diff --git a/x-pack/plugins/uptime/public/components/fleet_package/http/simple_fields.tsx b/x-pack/plugins/uptime/public/components/fleet_package/http/simple_fields.tsx
new file mode 100644
index 00000000000000..d17b8c997e9e8d
--- /dev/null
+++ b/x-pack/plugins/uptime/public/components/fleet_package/http/simple_fields.tsx
@@ -0,0 +1,200 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { memo } from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiFormRow, EuiFieldText, EuiFieldNumber } from '@elastic/eui';
+import { ConfigKeys, Validation } from '../types';
+import { useHTTPSimpleFieldsContext } from '../contexts';
+import { ComboBox } from '../combo_box';
+import { OptionalLabel } from '../optional_label';
+import { ScheduleField } from '../schedule_field';
+
+interface Props {
+  validate: Validation;
+}
+
+export const HTTPSimpleFields = memo<Props>(({ validate }) => {
+  const { fields, setFields } = useHTTPSimpleFieldsContext();
+  const handleInputChange = ({ value, configKey }: { value: unknown; configKey: ConfigKeys }) => {
+    setFields((prevFields) => ({ ...prevFields, [configKey]: value }));
+  };
+
+  return (
+    <>
+      <EuiFormRow
+        label={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.URL"
+            defaultMessage="URL"
+          />
+        }
+        isInvalid={!!validate[ConfigKeys.URLS]?.(fields[ConfigKeys.URLS])}
+        error={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.URL.error"
+            defaultMessage="URL is required"
+          />
+        }
+      >
+        <EuiFieldText
+          value={fields[ConfigKeys.URLS]}
+          onChange={(event) =>
+            handleInputChange({ value: event.target.value, configKey: ConfigKeys.URLS })
+          }
+          data-test-subj="syntheticsUrlField"
+        />
+      </EuiFormRow>
+      <EuiFormRow
+        id="syntheticsFleetScheduleField--number syntheticsFleetScheduleField--unit"
+        label={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.monitorInterval"
+            defaultMessage="Monitor interval"
+          />
+        }
+        isInvalid={!!validate[ConfigKeys.SCHEDULE]?.(fields[ConfigKeys.SCHEDULE])}
+        error={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.monitorInterval.error"
+            defaultMessage="Monitor interval is required"
+          />
+        }
+      >
+        <ScheduleField
+          onChange={(schedule) =>
+            handleInputChange({
+              value: schedule,
+              configKey: ConfigKeys.SCHEDULE,
+            })
+          }
+          number={fields[ConfigKeys.SCHEDULE].number}
+          unit={fields[ConfigKeys.SCHEDULE].unit}
+        />
+      </EuiFormRow>
+      <EuiFormRow
+        label={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.APMServiceName.label"
+            defaultMessage="APM service name"
+          />
+        }
+        labelAppend={<OptionalLabel />}
+        helpText={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.APMServiceName.helpText"
+            defaultMessage="APM service name for this monitor. Corresponds to the service.name ECS field. Set this when monitoring an app that is also using APM to enable integrations between Uptime and APM data in Kibana."
+          />
+        }
+      >
+        <EuiFieldText
+          value={fields[ConfigKeys.APM_SERVICE_NAME]}
+          onChange={(event) =>
+            handleInputChange({
+              value: event.target.value,
+              configKey: ConfigKeys.APM_SERVICE_NAME,
+            })
+          }
+          data-test-subj="syntheticsAPMServiceName"
+        />
+      </EuiFormRow>
+      <EuiFormRow
+        label={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.maxRedirects"
+            defaultMessage="Max redirects"
+          />
+        }
+        isInvalid={!!validate[ConfigKeys.MAX_REDIRECTS]?.(fields[ConfigKeys.MAX_REDIRECTS])}
+        error={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.maxRedirects.error"
+            defaultMessage="Max redirects must be 0 or greater"
+          />
+        }
+        labelAppend={<OptionalLabel />}
+        helpText={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.maxRedirects.helpText"
+            defaultMessage="The total number of redirections to follow."
+          />
+        }
+      >
+        <EuiFieldNumber
+          min={0}
+          value={fields[ConfigKeys.MAX_REDIRECTS]}
+          onChange={(event) =>
+            handleInputChange({
+              value: event.target.value,
+              configKey: ConfigKeys.MAX_REDIRECTS,
+            })
+          }
+        />
+      </EuiFormRow>
+      <EuiFormRow
+        label={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.timeout.label"
+            defaultMessage="Timeout in seconds"
+          />
+        }
+        isInvalid={
+          !!validate[ConfigKeys.TIMEOUT]?.(
+            fields[ConfigKeys.TIMEOUT],
+            fields[ConfigKeys.SCHEDULE].number,
+            fields[ConfigKeys.SCHEDULE].unit
+          )
+        }
+        error={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.timeout.error"
+            defaultMessage="Timeout must be 0 or greater and less than schedule interval"
+          />
+        }
+        helpText={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.timeout.helpText"
+            defaultMessage="The total time allowed for testing the connection and exchanging data."
+          />
+        }
+      >
+        <EuiFieldNumber
+          min={0}
+          value={fields[ConfigKeys.TIMEOUT]}
+          onChange={(event) =>
+            handleInputChange({
+              value: event.target.value,
+              configKey: ConfigKeys.TIMEOUT,
+            })
+          }
+          step={'any'}
+        />
+      </EuiFormRow>
+      <EuiFormRow
+        label={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.tags.label"
+            defaultMessage="Tags"
+          />
+        }
+        labelAppend={<OptionalLabel />}
+        helpText={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.tags.helpText"
+            defaultMessage="A list of tags that will be sent with the monitor event. Press enter to add a new tab. Displayed in Uptime and enables searching by tag."
+          />
+        }
+      >
+        <ComboBox
+          selectedOptions={fields[ConfigKeys.TAGS]}
+          onChange={(value) => handleInputChange({ value, configKey: ConfigKeys.TAGS })}
+          data-test-subj="syntheticsTags"
+        />
+      </EuiFormRow>
+    </>
+  );
+});
diff --git a/x-pack/plugins/uptime/public/components/fleet_package/icmp/simple_fields.tsx b/x-pack/plugins/uptime/public/components/fleet_package/icmp/simple_fields.tsx
new file mode 100644
index 00000000000000..3ca07c70673677
--- /dev/null
+++ b/x-pack/plugins/uptime/public/components/fleet_package/icmp/simple_fields.tsx
@@ -0,0 +1,204 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { memo } from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiFormRow, EuiFieldText, EuiFieldNumber } from '@elastic/eui';
+import { ConfigKeys, Validation } from '../types';
+import { useICMPSimpleFieldsContext } from '../contexts';
+import { ComboBox } from '../combo_box';
+import { OptionalLabel } from '../optional_label';
+import { ScheduleField } from '../schedule_field';
+
+interface Props {
+  validate: Validation;
+}
+
+export const ICMPSimpleFields = memo<Props>(({ validate }) => {
+  const { fields, setFields } = useICMPSimpleFieldsContext();
+  const handleInputChange = ({ value, configKey }: { value: unknown; configKey: ConfigKeys }) => {
+    setFields((prevFields) => ({ ...prevFields, [configKey]: value }));
+  };
+
+  return (
+    <>
+      <EuiFormRow
+        label={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.icmp.hosts"
+            defaultMessage="Host"
+          />
+        }
+        isInvalid={!!validate[ConfigKeys.HOSTS]?.(fields[ConfigKeys.HOSTS])}
+        error={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.icmp.hosts.error"
+            defaultMessage="Host is required"
+          />
+        }
+      >
+        <EuiFieldText
+          value={fields[ConfigKeys.HOSTS]}
+          onChange={(event) =>
+            handleInputChange({
+              value: event.target.value,
+              configKey: ConfigKeys.HOSTS,
+            })
+          }
+          data-test-subj="syntheticsICMPHostField"
+        />
+      </EuiFormRow>
+      <EuiFormRow
+        id="syntheticsFleetScheduleField--number syntheticsFleetScheduleField--unit"
+        label={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.monitorInterval"
+            defaultMessage="Monitor interval"
+          />
+        }
+        isInvalid={!!validate[ConfigKeys.SCHEDULE]?.(fields[ConfigKeys.SCHEDULE])}
+        error={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.monitorInterval.error"
+            defaultMessage="Monitor interval is required"
+          />
+        }
+      >
+        <ScheduleField
+          onChange={(schedule) =>
+            handleInputChange({
+              value: schedule,
+              configKey: ConfigKeys.SCHEDULE,
+            })
+          }
+          number={fields[ConfigKeys.SCHEDULE].number}
+          unit={fields[ConfigKeys.SCHEDULE].unit}
+        />
+      </EuiFormRow>
+      <EuiFormRow
+        label={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.wait.label"
+            defaultMessage="Wait in seconds"
+          />
+        }
+        isInvalid={!!validate[ConfigKeys.WAIT]?.(fields[ConfigKeys.WAIT])}
+        error={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.wait.error"
+            defaultMessage="Wait must be 0 or greater"
+          />
+        }
+        labelAppend={<OptionalLabel />}
+        helpText={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.wait.helpText"
+            defaultMessage="The duration to wait before emitting another ICMP Echo Request if no response is received."
+          />
+        }
+      >
+        <EuiFieldNumber
+          min={0}
+          value={fields[ConfigKeys.WAIT]}
+          onChange={(event) =>
+            handleInputChange({
+              value: event.target.value,
+              configKey: ConfigKeys.WAIT,
+            })
+          }
+          step={'any'}
+        />
+      </EuiFormRow>
+      <EuiFormRow
+        label={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.APMServiceName.label"
+            defaultMessage="APM service name"
+          />
+        }
+        labelAppend={<OptionalLabel />}
+        helpText={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.APMServiceName.helpText"
+            defaultMessage="APM service name for this monitor. Corresponds to the service.name ECS field. Set this when monitoring an app that is also using APM to enable integrations between Uptime and APM data in Kibana."
+          />
+        }
+      >
+        <EuiFieldText
+          value={fields[ConfigKeys.APM_SERVICE_NAME]}
+          onChange={(event) =>
+            handleInputChange({
+              value: event.target.value,
+              configKey: ConfigKeys.APM_SERVICE_NAME,
+            })
+          }
+          data-test-subj="syntheticsAPMServiceName"
+        />
+      </EuiFormRow>
+      <EuiFormRow
+        label={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.timeout.label"
+            defaultMessage="Timeout in seconds"
+          />
+        }
+        isInvalid={
+          !!validate[ConfigKeys.TIMEOUT]?.(
+            fields[ConfigKeys.TIMEOUT],
+            fields[ConfigKeys.SCHEDULE].number,
+            fields[ConfigKeys.SCHEDULE].unit
+          )
+        }
+        error={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.timeout.error"
+            defaultMessage="Timeout must be 0 or greater and less than schedule interval"
+          />
+        }
+        helpText={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.timeout.helpText"
+            defaultMessage="The total time allowed for testing the connection and exchanging data."
+          />
+        }
+      >
+        <EuiFieldNumber
+          min={0}
+          value={fields[ConfigKeys.TIMEOUT]}
+          onChange={(event) =>
+            handleInputChange({
+              value: event.target.value,
+              configKey: ConfigKeys.TIMEOUT,
+            })
+          }
+          step={'any'}
+        />
+      </EuiFormRow>
+      <EuiFormRow
+        label={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.tags.label"
+            defaultMessage="Tags"
+          />
+        }
+        labelAppend={<OptionalLabel />}
+        helpText={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.tags.helpText"
+            defaultMessage="A list of tags that will be sent with the monitor event. Press enter to add a new tab. Displayed in Uptime and enables searching by tag."
+          />
+        }
+      >
+        <ComboBox
+          selectedOptions={fields[ConfigKeys.TAGS]}
+          onChange={(value) => handleInputChange({ value, configKey: ConfigKeys.TAGS })}
+          data-test-subj="syntheticsTags"
+        />
+      </EuiFormRow>
+    </>
+  );
+});
diff --git a/x-pack/plugins/uptime/public/components/fleet_package/synthetics_policy_create_extension.tsx b/x-pack/plugins/uptime/public/components/fleet_package/synthetics_policy_create_extension.tsx
index 1306308f8ba4e1..90e7e7d7bb7333 100644
--- a/x-pack/plugins/uptime/public/components/fleet_package/synthetics_policy_create_extension.tsx
+++ b/x-pack/plugins/uptime/public/components/fleet_package/synthetics_policy_create_extension.tsx
@@ -9,37 +9,62 @@ import React, { memo, useContext, useEffect } from 'react';
 import useDebounce from 'react-use/lib/useDebounce';
 import { PackagePolicyCreateExtensionComponentProps } from '../../../../fleet/public';
 import { useTrackPageview } from '../../../../observability/public';
-import { Config, ConfigKeys, DataStream } from './types';
+import { PolicyConfig, DataStream } from './types';
 import {
-  SimpleFieldsContext,
+  MonitorTypeContext,
   HTTPAdvancedFieldsContext,
   TCPAdvancedFieldsContext,
   TLSFieldsContext,
+  HTTPSimpleFieldsContext,
+  TCPSimpleFieldsContext,
+  ICMPSimpleFieldsContext,
+  defaultHTTPAdvancedFields,
+  defaultHTTPSimpleFields,
+  defaultICMPSimpleFields,
+  defaultTCPSimpleFields,
+  defaultTCPAdvancedFields,
+  defaultTLSFields,
 } from './contexts';
 import { CustomFields } from './custom_fields';
 import { useUpdatePolicy } from './use_update_policy';
 import { validate } from './validation';
 
+export const defaultConfig: PolicyConfig = {
+  [DataStream.HTTP]: {
+    ...defaultHTTPSimpleFields,
+    ...defaultHTTPAdvancedFields,
+    ...defaultTLSFields,
+  },
+  [DataStream.TCP]: {
+    ...defaultTCPSimpleFields,
+    ...defaultTCPAdvancedFields,
+    ...defaultTLSFields,
+  },
+  [DataStream.ICMP]: defaultICMPSimpleFields,
+};
+
 /**
  * Exports Synthetics-specific package policy instructions
  * for use in the Ingest app create / edit package policy
  */
 export const SyntheticsPolicyCreateExtension = memo<PackagePolicyCreateExtensionComponentProps>(
   ({ newPolicy, onChange }) => {
-    const { fields: simpleFields } = useContext(SimpleFieldsContext);
+    const { monitorType } = useContext(MonitorTypeContext);
+    const { fields: httpSimpleFields } = useContext(HTTPSimpleFieldsContext);
+    const { fields: tcpSimpleFields } = useContext(TCPSimpleFieldsContext);
+    const { fields: icmpSimpleFields } = useContext(ICMPSimpleFieldsContext);
     const { fields: httpAdvancedFields } = useContext(HTTPAdvancedFieldsContext);
     const { fields: tcpAdvancedFields } = useContext(TCPAdvancedFieldsContext);
     const { fields: tlsFields } = useContext(TLSFieldsContext);
-    const defaultConfig: Config = {
-      name: '',
-      ...simpleFields,
-      ...httpAdvancedFields,
-      ...tcpAdvancedFields,
-      ...tlsFields,
-    };
     useTrackPageview({ app: 'fleet', path: 'syntheticsCreate' });
     useTrackPageview({ app: 'fleet', path: 'syntheticsCreate', delay: 15000 });
-    const { config, setConfig } = useUpdatePolicy({ defaultConfig, newPolicy, onChange, validate });
+    const { setConfig } = useUpdatePolicy({
+      monitorType,
+      defaultConfig,
+      newPolicy,
+      onChange,
+      validate,
+    });
 
     // Fleet will initialize the create form with a default name for the integratin policy, however,
     // for synthetics, we want the user to explicitely type in a name to use as the monitor name,
@@ -57,24 +82,40 @@ export const SyntheticsPolicyCreateExtension = memo<PackagePolicyCreateExtension
 
     useDebounce(
       () => {
-        setConfig((prevConfig) => ({
-          ...prevConfig,
-          ...simpleFields,
-          ...httpAdvancedFields,
-          ...tcpAdvancedFields,
-          ...tlsFields,
-          // ensure proxyUrl is not overwritten
-          [ConfigKeys.PROXY_URL]:
-            simpleFields[ConfigKeys.MONITOR_TYPE] === DataStream.HTTP
-              ? httpAdvancedFields[ConfigKeys.PROXY_URL]
-              : tcpAdvancedFields[ConfigKeys.PROXY_URL],
-        }));
+        setConfig(() => {
+          switch (monitorType) {
+            case DataStream.HTTP:
+              return {
+                ...httpSimpleFields,
+                ...httpAdvancedFields,
+                ...tlsFields,
+              };
+            case DataStream.TCP:
+              return {
+                ...tcpSimpleFields,
+                ...tcpAdvancedFields,
+                ...tlsFields,
+              };
+            case DataStream.ICMP:
+              return {
+                ...icmpSimpleFields,
+              };
+          }
+        });
       },
       250,
-      [setConfig, simpleFields, httpAdvancedFields, tcpAdvancedFields, tlsFields]
+      [
+        setConfig,
+        httpSimpleFields,
+        tcpSimpleFields,
+        icmpSimpleFields,
+        httpAdvancedFields,
+        tcpAdvancedFields,
+        tlsFields,
+      ]
     );
 
-    return <CustomFields typeEditable validate={validate[config[ConfigKeys.MONITOR_TYPE]]} />;
+    return <CustomFields typeEditable validate={validate[monitorType]} />;
   }
 );
 SyntheticsPolicyCreateExtension.displayName = 'SyntheticsPolicyCreateExtension';
diff --git a/x-pack/plugins/uptime/public/components/fleet_package/synthetics_policy_create_extension_wrapper.test.tsx b/x-pack/plugins/uptime/public/components/fleet_package/synthetics_policy_create_extension_wrapper.test.tsx
index a16f2ba87d79ab..395b5d67abeb0b 100644
--- a/x-pack/plugins/uptime/public/components/fleet_package/synthetics_policy_create_extension_wrapper.test.tsx
+++ b/x-pack/plugins/uptime/public/components/fleet_package/synthetics_policy_create_extension_wrapper.test.tsx
@@ -9,22 +9,10 @@ import React from 'react';
 import { fireEvent, waitFor } from '@testing-library/react';
 import { render } from '../../lib/helper/rtl_helpers';
 import { NewPackagePolicy } from '../../../../fleet/public';
-import {
-  defaultSimpleFields,
-  defaultTLSFields,
-  defaultHTTPAdvancedFields,
-  defaultTCPAdvancedFields,
-} from './contexts';
 import { SyntheticsPolicyCreateExtensionWrapper } from './synthetics_policy_create_extension_wrapper';
+import { defaultConfig } from './synthetics_policy_create_extension';
 import { ConfigKeys, DataStream, ScheduleUnit, VerificationMode } from './types';
 
-const defaultConfig = {
-  ...defaultSimpleFields,
-  ...defaultTLSFields,
-  ...defaultHTTPAdvancedFields,
-  ...defaultTCPAdvancedFields,
-};
-
 // ensures that fields appropriately match to their label
 jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({
   htmlIdGenerator: () => () => `id-${Math.random()}`,
@@ -266,6 +254,9 @@ const defaultNewPolicy: NewPackagePolicy = {
   },
 };
 
+const defaultHTTPConfig = defaultConfig[DataStream.HTTP];
+const defaultTCPConfig = defaultConfig[DataStream.TCP];
+
 describe('<SyntheticsPolicyCreateExtension />', () => {
   const onChange = jest.fn();
   const WrappedComponent = ({ newPolicy = defaultNewPolicy }) => {
@@ -283,21 +274,21 @@ describe('<SyntheticsPolicyCreateExtension />', () => {
     const maxRedirects = getByLabelText('Max redirects') as HTMLInputElement;
     const timeout = getByLabelText('Timeout in seconds') as HTMLInputElement;
     expect(monitorType).toBeInTheDocument();
-    expect(monitorType.value).toEqual(defaultConfig[ConfigKeys.MONITOR_TYPE]);
+    expect(monitorType.value).toEqual(DataStream.HTTP);
     expect(url).toBeInTheDocument();
-    expect(url.value).toEqual(defaultConfig[ConfigKeys.URLS]);
+    expect(url.value).toEqual(defaultHTTPConfig[ConfigKeys.URLS]);
     expect(proxyUrl).toBeInTheDocument();
-    expect(proxyUrl.value).toEqual(defaultConfig[ConfigKeys.PROXY_URL]);
+    expect(proxyUrl.value).toEqual(defaultHTTPConfig[ConfigKeys.PROXY_URL]);
     expect(monitorIntervalNumber).toBeInTheDocument();
-    expect(monitorIntervalNumber.value).toEqual(defaultConfig[ConfigKeys.SCHEDULE].number);
+    expect(monitorIntervalNumber.value).toEqual(defaultHTTPConfig[ConfigKeys.SCHEDULE].number);
     expect(monitorIntervalUnit).toBeInTheDocument();
-    expect(monitorIntervalUnit.value).toEqual(defaultConfig[ConfigKeys.SCHEDULE].unit);
+    expect(monitorIntervalUnit.value).toEqual(defaultHTTPConfig[ConfigKeys.SCHEDULE].unit);
     expect(apmServiceName).toBeInTheDocument();
-    expect(apmServiceName.value).toEqual(defaultConfig[ConfigKeys.APM_SERVICE_NAME]);
+    expect(apmServiceName.value).toEqual(defaultHTTPConfig[ConfigKeys.APM_SERVICE_NAME]);
     expect(maxRedirects).toBeInTheDocument();
-    expect(maxRedirects.value).toEqual(`${defaultConfig[ConfigKeys.MAX_REDIRECTS]}`);
+    expect(maxRedirects.value).toEqual(`${defaultHTTPConfig[ConfigKeys.MAX_REDIRECTS]}`);
     expect(timeout).toBeInTheDocument();
-    expect(timeout.value).toEqual(`${defaultConfig[ConfigKeys.TIMEOUT]}`);
+    expect(timeout.value).toEqual(`${defaultHTTPConfig[ConfigKeys.TIMEOUT]}`);
 
     // ensure other monitor type options are not in the DOM
     expect(queryByLabelText('Host')).not.toBeInTheDocument();
@@ -425,7 +416,7 @@ describe('<SyntheticsPolicyCreateExtension />', () => {
     const { getByText, getByLabelText, queryByLabelText } = render(<WrappedComponent />);
     const monitorType = getByLabelText('Monitor Type') as HTMLInputElement;
     expect(monitorType).toBeInTheDocument();
-    expect(monitorType.value).toEqual(defaultConfig[ConfigKeys.MONITOR_TYPE]);
+    expect(monitorType.value).toEqual(DataStream.HTTP);
     fireEvent.change(monitorType, { target: { value: DataStream.TCP } });
 
     await waitFor(() => {
@@ -452,7 +443,7 @@ describe('<SyntheticsPolicyCreateExtension />', () => {
     const host = getByLabelText('Host:Port') as HTMLInputElement;
 
     expect(host).toBeInTheDocument();
-    expect(host.value).toEqual(defaultConfig[ConfigKeys.HOSTS]);
+    expect(host.value).toEqual(defaultTCPConfig[ConfigKeys.HOSTS]);
 
     // expect HTTP fields not to be in the DOM
     expect(queryByLabelText('URL')).not.toBeInTheDocument();
@@ -467,29 +458,6 @@ describe('<SyntheticsPolicyCreateExtension />', () => {
 
     fireEvent.change(monitorType, { target: { value: DataStream.ICMP } });
 
-    await waitFor(() => {
-      expect(onChange).toBeCalledWith({
-        isValid: false,
-        updatedPolicy: {
-          ...defaultNewPolicy,
-          inputs: [
-            {
-              ...defaultNewPolicy.inputs[0],
-              enabled: false,
-            },
-            {
-              ...defaultNewPolicy.inputs[1],
-              enabled: false,
-            },
-            {
-              ...defaultNewPolicy.inputs[2],
-              enabled: true,
-            },
-          ],
-        },
-      });
-    });
-
     // expect ICMP fields to be in the DOM
     expect(getByLabelText('Wait in seconds')).toBeInTheDocument();
 
@@ -721,23 +689,27 @@ describe('<SyntheticsPolicyCreateExtension />', () => {
 
     await waitFor(() => {
       fireEvent.change(ca, { target: { value: 'certificateAuthorities' } });
-      expect(ca.value).toEqual(defaultConfig[ConfigKeys.TLS_CERTIFICATE_AUTHORITIES].value);
+      expect(ca.value).toEqual(defaultHTTPConfig[ConfigKeys.TLS_CERTIFICATE_AUTHORITIES].value);
     });
     await waitFor(() => {
       fireEvent.change(clientCertificate, { target: { value: 'clientCertificate' } });
-      expect(clientCertificate.value).toEqual(defaultConfig[ConfigKeys.TLS_KEY].value);
+      expect(clientCertificate.value).toEqual(defaultHTTPConfig[ConfigKeys.TLS_KEY].value);
     });
     await waitFor(() => {
       fireEvent.change(clientKey, { target: { value: 'clientKey' } });
-      expect(clientKey.value).toEqual(defaultConfig[ConfigKeys.TLS_KEY].value);
+      expect(clientKey.value).toEqual(defaultHTTPConfig[ConfigKeys.TLS_KEY].value);
     });
     await waitFor(() => {
       fireEvent.change(clientKeyPassphrase, { target: { value: 'clientKeyPassphrase' } });
-      expect(clientKeyPassphrase.value).toEqual(defaultConfig[ConfigKeys.TLS_KEY_PASSPHRASE].value);
+      expect(clientKeyPassphrase.value).toEqual(
+        defaultHTTPConfig[ConfigKeys.TLS_KEY_PASSPHRASE].value
+      );
     });
     await waitFor(() => {
       fireEvent.change(verificationMode, { target: { value: VerificationMode.NONE } });
-      expect(verificationMode.value).toEqual(defaultConfig[ConfigKeys.TLS_VERIFICATION_MODE].value);
+      expect(verificationMode.value).toEqual(
+        defaultHTTPConfig[ConfigKeys.TLS_VERIFICATION_MODE].value
+      );
     });
 
     await waitFor(() => {
diff --git a/x-pack/plugins/uptime/public/components/fleet_package/synthetics_policy_create_extension_wrapper.tsx b/x-pack/plugins/uptime/public/components/fleet_package/synthetics_policy_create_extension_wrapper.tsx
index 688ee24bd2330a..88bb8e7871459d 100644
--- a/x-pack/plugins/uptime/public/components/fleet_package/synthetics_policy_create_extension_wrapper.tsx
+++ b/x-pack/plugins/uptime/public/components/fleet_package/synthetics_policy_create_extension_wrapper.tsx
@@ -9,9 +9,10 @@ import React, { memo } from 'react';
 import { PackagePolicyCreateExtensionComponentProps } from '../../../../fleet/public';
 import { SyntheticsPolicyCreateExtension } from './synthetics_policy_create_extension';
 import {
-  SimpleFieldsContextProvider,
-  HTTPAdvancedFieldsContextProvider,
-  TCPAdvancedFieldsContextProvider,
+  MonitorTypeContextProvider,
+  TCPContextProvider,
+  ICMPSimpleFieldsContextProvider,
+  HTTPContextProvider,
   TLSFieldsContextProvider,
 } from './contexts';
 
@@ -22,15 +23,17 @@ import {
 export const SyntheticsPolicyCreateExtensionWrapper = memo<PackagePolicyCreateExtensionComponentProps>(
   ({ newPolicy, onChange }) => {
     return (
-      <SimpleFieldsContextProvider>
-        <HTTPAdvancedFieldsContextProvider>
-          <TCPAdvancedFieldsContextProvider>
+      <MonitorTypeContextProvider>
+        <HTTPContextProvider>
+          <TCPContextProvider>
             <TLSFieldsContextProvider>
-              <SyntheticsPolicyCreateExtension newPolicy={newPolicy} onChange={onChange} />
+              <ICMPSimpleFieldsContextProvider>
+                <SyntheticsPolicyCreateExtension newPolicy={newPolicy} onChange={onChange} />
+              </ICMPSimpleFieldsContextProvider>
             </TLSFieldsContextProvider>
-          </TCPAdvancedFieldsContextProvider>
-        </HTTPAdvancedFieldsContextProvider>
-      </SimpleFieldsContextProvider>
+          </TCPContextProvider>
+        </HTTPContextProvider>
+      </MonitorTypeContextProvider>
     );
   }
 );
diff --git a/x-pack/plugins/uptime/public/components/fleet_package/synthetics_policy_edit_extension.tsx b/x-pack/plugins/uptime/public/components/fleet_package/synthetics_policy_edit_extension.tsx
index e29a5c6a363ed5..8a3c42c10bc14a 100644
--- a/x-pack/plugins/uptime/public/components/fleet_package/synthetics_policy_edit_extension.tsx
+++ b/x-pack/plugins/uptime/public/components/fleet_package/synthetics_policy_edit_extension.tsx
@@ -5,17 +5,20 @@
  * 2.0.
  */
 
-import React, { memo, useContext } from 'react';
+import React, { memo } from 'react';
 import useDebounce from 'react-use/lib/useDebounce';
 import { PackagePolicyEditExtensionComponentProps } from '../../../../fleet/public';
 import { useTrackPageview } from '../../../../observability/public';
 import {
-  SimpleFieldsContext,
-  HTTPAdvancedFieldsContext,
-  TCPAdvancedFieldsContext,
-  TLSFieldsContext,
+  useMonitorTypeContext,
+  useTCPSimpleFieldsContext,
+  useTCPAdvancedFieldsContext,
+  useICMPSimpleFieldsContext,
+  useHTTPSimpleFieldsContext,
+  useHTTPAdvancedFieldsContext,
+  useTLSFieldsContext,
 } from './contexts';
-import { Config, ConfigKeys, DataStream } from './types';
+import { PolicyConfig, DataStream } from './types';
 import { CustomFields } from './custom_fields';
 import { useUpdatePolicy } from './use_update_policy';
 import { validate } from './validation';
@@ -23,7 +26,7 @@ import { validate } from './validation';
 interface SyntheticsPolicyEditExtensionProps {
   newPolicy: PackagePolicyEditExtensionComponentProps['newPolicy'];
   onChange: PackagePolicyEditExtensionComponentProps['onChange'];
-  defaultConfig: Config;
+  defaultConfig: PolicyConfig;
   isTLSEnabled: boolean;
 }
 /**
@@ -34,37 +37,57 @@ export const SyntheticsPolicyEditExtension = memo<SyntheticsPolicyEditExtensionP
   ({ newPolicy, onChange, defaultConfig, isTLSEnabled }) => {
     useTrackPageview({ app: 'fleet', path: 'syntheticsEdit' });
     useTrackPageview({ app: 'fleet', path: 'syntheticsEdit', delay: 15000 });
-    const { fields: simpleFields } = useContext(SimpleFieldsContext);
-    const { fields: httpAdvancedFields } = useContext(HTTPAdvancedFieldsContext);
-    const { fields: tcpAdvancedFields } = useContext(TCPAdvancedFieldsContext);
-    const { fields: tlsFields } = useContext(TLSFieldsContext);
-    const { config, setConfig } = useUpdatePolicy({ defaultConfig, newPolicy, onChange, validate });
+    const { monitorType } = useMonitorTypeContext();
+    const { fields: httpSimpleFields } = useHTTPSimpleFieldsContext();
+    const { fields: tcpSimpleFields } = useTCPSimpleFieldsContext();
+    const { fields: icmpSimpleFields } = useICMPSimpleFieldsContext();
+    const { fields: httpAdvancedFields } = useHTTPAdvancedFieldsContext();
+    const { fields: tcpAdvancedFields } = useTCPAdvancedFieldsContext();
+    const { fields: tlsFields } = useTLSFieldsContext();
+    const { setConfig } = useUpdatePolicy({
+      defaultConfig,
+      newPolicy,
+      onChange,
+      validate,
+      monitorType,
+    });
 
     useDebounce(
       () => {
-        setConfig((prevConfig) => ({
-          ...prevConfig,
-          ...simpleFields,
-          ...httpAdvancedFields,
-          ...tcpAdvancedFields,
-          ...tlsFields,
-          // ensure proxyUrl is not overwritten
-          [ConfigKeys.PROXY_URL]:
-            simpleFields[ConfigKeys.MONITOR_TYPE] === DataStream.HTTP
-              ? httpAdvancedFields[ConfigKeys.PROXY_URL]
-              : tcpAdvancedFields[ConfigKeys.PROXY_URL],
-        }));
+        setConfig(() => {
+          switch (monitorType) {
+            case DataStream.HTTP:
+              return {
+                ...httpSimpleFields,
+                ...httpAdvancedFields,
+                ...tlsFields,
+              };
+            case DataStream.TCP:
+              return {
+                ...tcpSimpleFields,
+                ...tcpAdvancedFields,
+                ...tlsFields,
+              };
+            case DataStream.ICMP:
+              return {
+                ...icmpSimpleFields,
+              };
+          }
+        });
       },
       250,
-      [setConfig, simpleFields, httpAdvancedFields, tcpAdvancedFields, tlsFields]
+      [
+        setConfig,
+        httpSimpleFields,
+        httpAdvancedFields,
+        tcpSimpleFields,
+        tcpAdvancedFields,
+        icmpSimpleFields,
+        tlsFields,
+      ]
     );
 
-    return (
-      <CustomFields
-        isTLSEnabled={isTLSEnabled}
-        validate={validate[config[ConfigKeys.MONITOR_TYPE]]}
-      />
-    );
+    return <CustomFields isTLSEnabled={isTLSEnabled} validate={validate[monitorType]} />;
   }
 );
 SyntheticsPolicyEditExtension.displayName = 'SyntheticsPolicyEditExtension';
diff --git a/x-pack/plugins/uptime/public/components/fleet_package/synthetics_policy_edit_extension_wrapper.test.tsx b/x-pack/plugins/uptime/public/components/fleet_package/synthetics_policy_edit_extension_wrapper.test.tsx
index e6981b9a850e1f..fec6c504a445f0 100644
--- a/x-pack/plugins/uptime/public/components/fleet_package/synthetics_policy_edit_extension_wrapper.test.tsx
+++ b/x-pack/plugins/uptime/public/components/fleet_package/synthetics_policy_edit_extension_wrapper.test.tsx
@@ -11,25 +11,13 @@ import { render } from '../../lib/helper/rtl_helpers';
 import { NewPackagePolicy } from '../../../../fleet/public';
 import { SyntheticsPolicyEditExtensionWrapper } from './synthetics_policy_edit_extension_wrapper';
 import { ConfigKeys, DataStream, ScheduleUnit } from './types';
-import {
-  defaultSimpleFields,
-  defaultTLSFields,
-  defaultHTTPAdvancedFields,
-  defaultTCPAdvancedFields,
-} from './contexts';
+import { defaultConfig } from './synthetics_policy_create_extension';
 
 // ensures that fields appropriately match to their label
 jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({
   htmlIdGenerator: () => () => `id-${Math.random()}`,
 }));
 
-const defaultConfig = {
-  ...defaultSimpleFields,
-  ...defaultTLSFields,
-  ...defaultHTTPAdvancedFields,
-  ...defaultTCPAdvancedFields,
-};
-
 const defaultNewPolicy: NewPackagePolicy = {
   name: 'samplePolicyName',
   description: '',
@@ -277,6 +265,10 @@ const defaultCurrentPolicy: any = {
   created_by: '',
 };
 
+const defaultHTTPConfig = defaultConfig[DataStream.HTTP];
+const defaultICMPConfig = defaultConfig[DataStream.ICMP];
+const defaultTCPConfig = defaultConfig[DataStream.TCP];
+
 describe('<SyntheticsPolicyEditExtension />', () => {
   const onChange = jest.fn();
   const WrappedComponent = ({ policy = defaultCurrentPolicy, newPolicy = defaultNewPolicy }) => {
@@ -301,24 +293,24 @@ describe('<SyntheticsPolicyEditExtension />', () => {
     const verificationMode = getByLabelText('Verification mode') as HTMLInputElement;
     const enableTLSConfig = getByLabelText('Enable TLS configuration') as HTMLInputElement;
     expect(url).toBeInTheDocument();
-    expect(url.value).toEqual(defaultConfig[ConfigKeys.URLS]);
+    expect(url.value).toEqual(defaultHTTPConfig[ConfigKeys.URLS]);
     expect(proxyUrl).toBeInTheDocument();
-    expect(proxyUrl.value).toEqual(defaultConfig[ConfigKeys.PROXY_URL]);
+    expect(proxyUrl.value).toEqual(defaultHTTPConfig[ConfigKeys.PROXY_URL]);
     expect(monitorIntervalNumber).toBeInTheDocument();
-    expect(monitorIntervalNumber.value).toEqual(defaultConfig[ConfigKeys.SCHEDULE].number);
+    expect(monitorIntervalNumber.value).toEqual(defaultHTTPConfig[ConfigKeys.SCHEDULE].number);
     expect(monitorIntervalUnit).toBeInTheDocument();
-    expect(monitorIntervalUnit.value).toEqual(defaultConfig[ConfigKeys.SCHEDULE].unit);
+    expect(monitorIntervalUnit.value).toEqual(defaultHTTPConfig[ConfigKeys.SCHEDULE].unit);
     expect(apmServiceName).toBeInTheDocument();
-    expect(apmServiceName.value).toEqual(defaultConfig[ConfigKeys.APM_SERVICE_NAME]);
+    expect(apmServiceName.value).toEqual(defaultHTTPConfig[ConfigKeys.APM_SERVICE_NAME]);
     expect(maxRedirects).toBeInTheDocument();
-    expect(maxRedirects.value).toEqual(`${defaultConfig[ConfigKeys.MAX_REDIRECTS]}`);
+    expect(maxRedirects.value).toEqual(`${defaultHTTPConfig[ConfigKeys.MAX_REDIRECTS]}`);
     expect(timeout).toBeInTheDocument();
-    expect(timeout.value).toEqual(`${defaultConfig[ConfigKeys.TIMEOUT]}`);
+    expect(timeout.value).toEqual(`${defaultHTTPConfig[ConfigKeys.TIMEOUT]}`);
     // expect TLS settings to be in the document when at least one tls key is populated
     expect(enableTLSConfig.checked).toBe(true);
     expect(verificationMode).toBeInTheDocument();
     expect(verificationMode.value).toEqual(
-      `${defaultConfig[ConfigKeys.TLS_VERIFICATION_MODE].value}`
+      `${defaultHTTPConfig[ConfigKeys.TLS_VERIFICATION_MODE].value}`
     );
 
     // ensure other monitor type options are not in the DOM
@@ -651,15 +643,21 @@ describe('<SyntheticsPolicyEditExtension />', () => {
           streams: [
             {
               ...defaultNewPolicy.inputs[0].streams[0],
-              vars: Object.keys(httpVars || []).reduce<
-                Record<string, { value: undefined; type: string }>
-              >((acc, key) => {
-                acc[key] = {
-                  value: undefined,
-                  type: `${httpVars?.[key].type}`,
-                };
-                return acc;
-              }, {}),
+              vars: {
+                ...Object.keys(httpVars || []).reduce<
+                  Record<string, { value: undefined; type: string }>
+                >((acc, key) => {
+                  acc[key] = {
+                    value: undefined,
+                    type: `${httpVars?.[key].type}`,
+                  };
+                  return acc;
+                }, {}),
+                [ConfigKeys.MONITOR_TYPE]: {
+                  value: 'http',
+                  type: 'text',
+                },
+              },
             },
           ],
         },
@@ -680,19 +678,19 @@ describe('<SyntheticsPolicyEditExtension />', () => {
     const enableTLSConfig = getByLabelText('Enable TLS configuration') as HTMLInputElement;
 
     expect(url).toBeInTheDocument();
-    expect(url.value).toEqual(defaultConfig[ConfigKeys.URLS]);
+    expect(url.value).toEqual(defaultHTTPConfig[ConfigKeys.URLS]);
     expect(proxyUrl).toBeInTheDocument();
-    expect(proxyUrl.value).toEqual(defaultConfig[ConfigKeys.PROXY_URL]);
+    expect(proxyUrl.value).toEqual(defaultHTTPConfig[ConfigKeys.PROXY_URL]);
     expect(monitorIntervalNumber).toBeInTheDocument();
-    expect(monitorIntervalNumber.value).toEqual(defaultConfig[ConfigKeys.SCHEDULE].number);
+    expect(monitorIntervalNumber.value).toEqual(defaultHTTPConfig[ConfigKeys.SCHEDULE].number);
     expect(monitorIntervalUnit).toBeInTheDocument();
-    expect(monitorIntervalUnit.value).toEqual(defaultConfig[ConfigKeys.SCHEDULE].unit);
+    expect(monitorIntervalUnit.value).toEqual(defaultHTTPConfig[ConfigKeys.SCHEDULE].unit);
     expect(apmServiceName).toBeInTheDocument();
-    expect(apmServiceName.value).toEqual(defaultConfig[ConfigKeys.APM_SERVICE_NAME]);
+    expect(apmServiceName.value).toEqual(defaultHTTPConfig[ConfigKeys.APM_SERVICE_NAME]);
     expect(maxRedirects).toBeInTheDocument();
-    expect(maxRedirects.value).toEqual(`${defaultConfig[ConfigKeys.MAX_REDIRECTS]}`);
+    expect(maxRedirects.value).toEqual(`${defaultHTTPConfig[ConfigKeys.MAX_REDIRECTS]}`);
     expect(timeout).toBeInTheDocument();
-    expect(timeout.value).toEqual(`${defaultConfig[ConfigKeys.TIMEOUT]}`);
+    expect(timeout.value).toEqual(`${defaultHTTPConfig[ConfigKeys.TIMEOUT]}`);
 
     /* expect TLS settings not to be in the document when and Enable TLS settings not to be checked
      * when all TLS values are falsey */
@@ -709,7 +707,7 @@ describe('<SyntheticsPolicyEditExtension />', () => {
     await waitFor(() => {
       const requestMethod = getByLabelText('Request method') as HTMLInputElement;
       expect(requestMethod).toBeInTheDocument();
-      expect(requestMethod.value).toEqual(`${defaultConfig[ConfigKeys.REQUEST_METHOD_CHECK]}`);
+      expect(requestMethod.value).toEqual(`${defaultHTTPConfig[ConfigKeys.REQUEST_METHOD_CHECK]}`);
     });
   });
 
@@ -752,24 +750,24 @@ describe('<SyntheticsPolicyEditExtension />', () => {
     const { getByText, getByLabelText, queryByLabelText } = render(
       <WrappedComponent policy={currentPolicy} />
     );
-    const url = getByLabelText('Host:Port') as HTMLInputElement;
+    const host = getByLabelText('Host:Port') as HTMLInputElement;
     const proxyUrl = getByLabelText('Proxy URL') as HTMLInputElement;
     const monitorIntervalNumber = getByLabelText('Number') as HTMLInputElement;
     const monitorIntervalUnit = getByLabelText('Unit') as HTMLInputElement;
     const apmServiceName = getByLabelText('APM service name') as HTMLInputElement;
     const timeout = getByLabelText('Timeout in seconds') as HTMLInputElement;
-    expect(url).toBeInTheDocument();
-    expect(url.value).toEqual(defaultConfig[ConfigKeys.URLS]);
+    expect(host).toBeInTheDocument();
+    expect(host.value).toEqual(defaultTCPConfig[ConfigKeys.HOSTS]);
     expect(proxyUrl).toBeInTheDocument();
-    expect(proxyUrl.value).toEqual(defaultConfig[ConfigKeys.PROXY_URL]);
+    expect(proxyUrl.value).toEqual(defaultTCPConfig[ConfigKeys.PROXY_URL]);
     expect(monitorIntervalNumber).toBeInTheDocument();
-    expect(monitorIntervalNumber.value).toEqual(defaultConfig[ConfigKeys.SCHEDULE].number);
+    expect(monitorIntervalNumber.value).toEqual(defaultTCPConfig[ConfigKeys.SCHEDULE].number);
     expect(monitorIntervalUnit).toBeInTheDocument();
-    expect(monitorIntervalUnit.value).toEqual(defaultConfig[ConfigKeys.SCHEDULE].unit);
+    expect(monitorIntervalUnit.value).toEqual(defaultTCPConfig[ConfigKeys.SCHEDULE].unit);
     expect(apmServiceName).toBeInTheDocument();
-    expect(apmServiceName.value).toEqual(defaultConfig[ConfigKeys.APM_SERVICE_NAME]);
+    expect(apmServiceName.value).toEqual(defaultTCPConfig[ConfigKeys.APM_SERVICE_NAME]);
     expect(timeout).toBeInTheDocument();
-    expect(timeout.value).toEqual(`${defaultConfig[ConfigKeys.TIMEOUT]}`);
+    expect(timeout.value).toEqual(`${defaultTCPConfig[ConfigKeys.TIMEOUT]}`);
 
     // ensure other monitor type options are not in the DOM
     expect(queryByLabelText('Url')).not.toBeInTheDocument();
@@ -825,24 +823,24 @@ describe('<SyntheticsPolicyEditExtension />', () => {
     const { getByLabelText, queryByLabelText } = render(
       <WrappedComponent policy={currentPolicy} />
     );
-    const url = getByLabelText('Host') as HTMLInputElement;
+    const host = getByLabelText('Host') as HTMLInputElement;
     const monitorIntervalNumber = getByLabelText('Number') as HTMLInputElement;
     const monitorIntervalUnit = getByLabelText('Unit') as HTMLInputElement;
     const apmServiceName = getByLabelText('APM service name') as HTMLInputElement;
     const timeout = getByLabelText('Timeout in seconds') as HTMLInputElement;
     const wait = getByLabelText('Wait in seconds') as HTMLInputElement;
-    expect(url).toBeInTheDocument();
-    expect(url.value).toEqual(defaultConfig[ConfigKeys.URLS]);
+    expect(host).toBeInTheDocument();
+    expect(host.value).toEqual(defaultICMPConfig[ConfigKeys.HOSTS]);
     expect(monitorIntervalNumber).toBeInTheDocument();
-    expect(monitorIntervalNumber.value).toEqual(defaultConfig[ConfigKeys.SCHEDULE].number);
+    expect(monitorIntervalNumber.value).toEqual(defaultICMPConfig[ConfigKeys.SCHEDULE].number);
     expect(monitorIntervalUnit).toBeInTheDocument();
-    expect(monitorIntervalUnit.value).toEqual(defaultConfig[ConfigKeys.SCHEDULE].unit);
+    expect(monitorIntervalUnit.value).toEqual(defaultICMPConfig[ConfigKeys.SCHEDULE].unit);
     expect(apmServiceName).toBeInTheDocument();
-    expect(apmServiceName.value).toEqual(defaultConfig[ConfigKeys.APM_SERVICE_NAME]);
+    expect(apmServiceName.value).toEqual(defaultICMPConfig[ConfigKeys.APM_SERVICE_NAME]);
     expect(timeout).toBeInTheDocument();
-    expect(timeout.value).toEqual(`${defaultConfig[ConfigKeys.TIMEOUT]}`);
+    expect(timeout.value).toEqual(`${defaultICMPConfig[ConfigKeys.TIMEOUT]}`);
     expect(wait).toBeInTheDocument();
-    expect(wait.value).toEqual(`${defaultConfig[ConfigKeys.WAIT]}`);
+    expect(wait.value).toEqual(`${defaultICMPConfig[ConfigKeys.WAIT]}`);
 
     // ensure other monitor type options are not in the DOM
     expect(queryByLabelText('Url')).not.toBeInTheDocument();
diff --git a/x-pack/plugins/uptime/public/components/fleet_package/synthetics_policy_edit_extension_wrapper.tsx b/x-pack/plugins/uptime/public/components/fleet_package/synthetics_policy_edit_extension_wrapper.tsx
index 85b38e05fdbc89..0bafef61166d26 100644
--- a/x-pack/plugins/uptime/public/components/fleet_package/synthetics_policy_edit_extension_wrapper.tsx
+++ b/x-pack/plugins/uptime/public/components/fleet_package/synthetics_policy_edit_extension_wrapper.tsx
@@ -7,17 +7,26 @@
 
 import React, { memo, useMemo } from 'react';
 import { PackagePolicyEditExtensionComponentProps } from '../../../../fleet/public';
-import { Config, ConfigKeys, ContentType, contentTypesToMode } from './types';
+import {
+  PolicyConfig,
+  ConfigKeys,
+  ContentType,
+  DataStream,
+  ICustomFields,
+  contentTypesToMode,
+} from './types';
 import { SyntheticsPolicyEditExtension } from './synthetics_policy_edit_extension';
 import {
-  SimpleFieldsContextProvider,
-  HTTPAdvancedFieldsContextProvider,
-  TCPAdvancedFieldsContextProvider,
-  TLSFieldsContextProvider,
-  defaultSimpleFields,
+  MonitorTypeContextProvider,
+  HTTPContextProvider,
+  TCPContextProvider,
+  defaultTCPSimpleFields,
+  defaultHTTPSimpleFields,
+  defaultICMPSimpleFields,
   defaultHTTPAdvancedFields,
   defaultTCPAdvancedFields,
   defaultTLSFields,
+  ICMPSimpleFieldsContextProvider,
 } from './contexts';
 
 /**
@@ -26,21 +35,29 @@ import {
  */
 export const SyntheticsPolicyEditExtensionWrapper = memo<PackagePolicyEditExtensionComponentProps>(
   ({ policy: currentPolicy, newPolicy, onChange }) => {
-    const { enableTLS: isTLSEnabled, config: defaultConfig } = useMemo(() => {
-      const fallbackConfig: Config = {
-        name: '',
-        ...defaultSimpleFields,
-        ...defaultHTTPAdvancedFields,
-        ...defaultTCPAdvancedFields,
-        ...defaultTLSFields,
+    const { enableTLS: isTLSEnabled, config: defaultConfig, monitorType } = useMemo(() => {
+      const fallbackConfig: PolicyConfig = {
+        [DataStream.HTTP]: {
+          ...defaultHTTPSimpleFields,
+          ...defaultHTTPAdvancedFields,
+          ...defaultTLSFields,
+        },
+        [DataStream.TCP]: {
+          ...defaultTCPSimpleFields,
+          ...defaultTCPAdvancedFields,
+          ...defaultTLSFields,
+        },
+        [DataStream.ICMP]: defaultICMPSimpleFields,
       };
       let enableTLS = false;
       const getDefaultConfig = () => {
         const currentInput = currentPolicy.inputs.find((input) => input.enabled === true);
         const vars = currentInput?.streams[0]?.vars;
+        const type: DataStream = vars?.[ConfigKeys.MONITOR_TYPE].value as DataStream;
+        const fallbackConfigForMonitorType = fallbackConfig[type] as Partial<ICustomFields>;
 
         const configKeys: ConfigKeys[] = Object.values(ConfigKeys);
-        const formattedDefaultConfig = configKeys.reduce(
+        const formatttedDefaultConfigForMonitorType = configKeys.reduce(
           (acc: Record<string, unknown>, key: ConfigKeys) => {
             const value = vars?.[key]?.value;
             switch (key) {
@@ -59,12 +76,14 @@ export const SyntheticsPolicyEditExtensionWrapper = memo<PackagePolicyEditExtens
                     number,
                   };
                 } else {
-                  acc[key] = fallbackConfig[key];
+                  acc[key] = fallbackConfigForMonitorType[key];
                 }
                 break;
               case ConfigKeys.TIMEOUT:
               case ConfigKeys.WAIT:
-                acc[key] = value ? value.slice(0, value.length - 1) : fallbackConfig[key]; // remove unit
+                acc[key] = value
+                  ? value.slice(0, value.length - 1)
+                  : fallbackConfigForMonitorType[key]; // remove unit
                 break;
               case ConfigKeys.TAGS:
               case ConfigKeys.RESPONSE_BODY_CHECK_NEGATIVE:
@@ -72,35 +91,35 @@ export const SyntheticsPolicyEditExtensionWrapper = memo<PackagePolicyEditExtens
               case ConfigKeys.RESPONSE_STATUS_CHECK:
               case ConfigKeys.RESPONSE_HEADERS_CHECK:
               case ConfigKeys.REQUEST_HEADERS_CHECK:
-                acc[key] = value ? JSON.parse(value) : fallbackConfig[key];
+                acc[key] = value ? JSON.parse(value) : fallbackConfigForMonitorType[key];
                 break;
               case ConfigKeys.REQUEST_BODY_CHECK:
                 const headers = value
                   ? JSON.parse(vars?.[ConfigKeys.REQUEST_HEADERS_CHECK].value)
-                  : fallbackConfig[ConfigKeys.REQUEST_HEADERS_CHECK];
+                  : fallbackConfigForMonitorType[ConfigKeys.REQUEST_HEADERS_CHECK];
                 const requestBodyValue =
                   value !== null && value !== undefined
                     ? JSON.parse(value)
-                    : fallbackConfig[key].value;
-                let type = fallbackConfig[key].type;
+                    : fallbackConfigForMonitorType[key]?.value;
+                let requestBodyType = fallbackConfigForMonitorType[key]?.type;
                 Object.keys(headers || []).some((headerKey) => {
                   if (
                     headerKey === 'Content-Type' &&
                     contentTypesToMode[headers[headerKey] as ContentType]
                   ) {
-                    type = contentTypesToMode[headers[headerKey] as ContentType];
+                    requestBodyType = contentTypesToMode[headers[headerKey] as ContentType];
                     return true;
                   }
                 });
                 acc[key] = {
                   value: requestBodyValue,
-                  type,
+                  type: requestBodyType,
                 };
                 break;
               case ConfigKeys.TLS_KEY_PASSPHRASE:
               case ConfigKeys.TLS_VERIFICATION_MODE:
                 acc[key] = {
-                  value: value ?? fallbackConfig[key].value,
+                  value: value ?? fallbackConfigForMonitorType[key]?.value,
                   isEnabled: !!value,
                 };
                 if (!!value) {
@@ -112,7 +131,7 @@ export const SyntheticsPolicyEditExtensionWrapper = memo<PackagePolicyEditExtens
               case ConfigKeys.TLS_KEY:
               case ConfigKeys.TLS_VERSION:
                 acc[key] = {
-                  value: value ? JSON.parse(value) : fallbackConfig[key].value,
+                  value: value ? JSON.parse(value) : fallbackConfigForMonitorType[key]?.value,
                   isEnabled: !!value,
                 };
                 if (!!value) {
@@ -120,77 +139,39 @@ export const SyntheticsPolicyEditExtensionWrapper = memo<PackagePolicyEditExtens
                 }
                 break;
               default:
-                acc[key] = value ?? fallbackConfig[key];
+                acc[key] = value ?? fallbackConfigForMonitorType[key];
             }
             return acc;
           },
           {}
         );
 
-        return { config: (formattedDefaultConfig as unknown) as Config, enableTLS };
+        const formattedDefaultConfig: PolicyConfig = {
+          ...fallbackConfig,
+          [type]: formatttedDefaultConfigForMonitorType,
+        };
+
+        return { config: formattedDefaultConfig, enableTLS, monitorType: type };
       };
 
       return getDefaultConfig();
     }, [currentPolicy]);
 
-    const simpleFields = {
-      [ConfigKeys.APM_SERVICE_NAME]: defaultConfig[ConfigKeys.APM_SERVICE_NAME],
-      [ConfigKeys.HOSTS]: defaultConfig[ConfigKeys.HOSTS],
-      [ConfigKeys.MAX_REDIRECTS]: defaultConfig[ConfigKeys.MAX_REDIRECTS],
-      [ConfigKeys.MONITOR_TYPE]: defaultConfig[ConfigKeys.MONITOR_TYPE],
-      [ConfigKeys.SCHEDULE]: defaultConfig[ConfigKeys.SCHEDULE],
-      [ConfigKeys.TAGS]: defaultConfig[ConfigKeys.TAGS],
-      [ConfigKeys.TIMEOUT]: defaultConfig[ConfigKeys.TIMEOUT],
-      [ConfigKeys.URLS]: defaultConfig[ConfigKeys.URLS],
-      [ConfigKeys.WAIT]: defaultConfig[ConfigKeys.WAIT],
-    };
-    const httpAdvancedFields = {
-      [ConfigKeys.USERNAME]: defaultConfig[ConfigKeys.USERNAME],
-      [ConfigKeys.PASSWORD]: defaultConfig[ConfigKeys.PASSWORD],
-      [ConfigKeys.PROXY_URL]: defaultConfig[ConfigKeys.PROXY_URL],
-      [ConfigKeys.RESPONSE_BODY_CHECK_NEGATIVE]:
-        defaultConfig[ConfigKeys.RESPONSE_BODY_CHECK_NEGATIVE],
-      [ConfigKeys.RESPONSE_BODY_CHECK_POSITIVE]:
-        defaultConfig[ConfigKeys.RESPONSE_BODY_CHECK_POSITIVE],
-      [ConfigKeys.RESPONSE_BODY_INDEX]: defaultConfig[ConfigKeys.RESPONSE_BODY_INDEX],
-      [ConfigKeys.RESPONSE_HEADERS_CHECK]: defaultConfig[ConfigKeys.RESPONSE_HEADERS_CHECK],
-      [ConfigKeys.RESPONSE_HEADERS_INDEX]: defaultConfig[ConfigKeys.RESPONSE_HEADERS_INDEX],
-      [ConfigKeys.RESPONSE_STATUS_CHECK]: defaultConfig[ConfigKeys.RESPONSE_STATUS_CHECK],
-      [ConfigKeys.REQUEST_BODY_CHECK]: defaultConfig[ConfigKeys.REQUEST_BODY_CHECK],
-      [ConfigKeys.REQUEST_HEADERS_CHECK]: defaultConfig[ConfigKeys.REQUEST_HEADERS_CHECK],
-      [ConfigKeys.REQUEST_METHOD_CHECK]: defaultConfig[ConfigKeys.REQUEST_METHOD_CHECK],
-    };
-    const tcpAdvancedFields = {
-      [ConfigKeys.PROXY_URL]: defaultConfig[ConfigKeys.PROXY_URL],
-      [ConfigKeys.PROXY_USE_LOCAL_RESOLVER]: defaultConfig[ConfigKeys.PROXY_USE_LOCAL_RESOLVER],
-      [ConfigKeys.RESPONSE_RECEIVE_CHECK]: defaultConfig[ConfigKeys.RESPONSE_RECEIVE_CHECK],
-      [ConfigKeys.REQUEST_SEND_CHECK]: defaultConfig[ConfigKeys.REQUEST_SEND_CHECK],
-    };
-    const tlsFields = {
-      [ConfigKeys.TLS_CERTIFICATE_AUTHORITIES]:
-        defaultConfig[ConfigKeys.TLS_CERTIFICATE_AUTHORITIES],
-      [ConfigKeys.TLS_CERTIFICATE]: defaultConfig[ConfigKeys.TLS_CERTIFICATE],
-      [ConfigKeys.TLS_KEY]: defaultConfig[ConfigKeys.TLS_KEY],
-      [ConfigKeys.TLS_KEY_PASSPHRASE]: defaultConfig[ConfigKeys.TLS_KEY_PASSPHRASE],
-      [ConfigKeys.TLS_VERIFICATION_MODE]: defaultConfig[ConfigKeys.TLS_VERIFICATION_MODE],
-      [ConfigKeys.TLS_VERSION]: defaultConfig[ConfigKeys.TLS_VERSION],
-    };
-
     return (
-      <SimpleFieldsContextProvider defaultValues={simpleFields}>
-        <HTTPAdvancedFieldsContextProvider defaultValues={httpAdvancedFields}>
-          <TCPAdvancedFieldsContextProvider defaultValues={tcpAdvancedFields}>
-            <TLSFieldsContextProvider defaultValues={tlsFields}>
+      <MonitorTypeContextProvider defaultValue={monitorType}>
+        <HTTPContextProvider defaultValues={defaultConfig[DataStream.HTTP]}>
+          <TCPContextProvider defaultValues={defaultConfig[DataStream.TCP]}>
+            <ICMPSimpleFieldsContextProvider defaultValues={defaultConfig[DataStream.ICMP]}>
               <SyntheticsPolicyEditExtension
                 newPolicy={newPolicy}
                 onChange={onChange}
                 defaultConfig={defaultConfig}
                 isTLSEnabled={isTLSEnabled}
               />
-            </TLSFieldsContextProvider>
-          </TCPAdvancedFieldsContextProvider>
-        </HTTPAdvancedFieldsContextProvider>
-      </SimpleFieldsContextProvider>
+            </ICMPSimpleFieldsContextProvider>
+          </TCPContextProvider>
+        </HTTPContextProvider>
+      </MonitorTypeContextProvider>
     );
   }
 );
diff --git a/x-pack/plugins/uptime/public/components/fleet_package/tcp_advanced_fields.test.tsx b/x-pack/plugins/uptime/public/components/fleet_package/tcp/advanced_fields.test.tsx
similarity index 92%
rename from x-pack/plugins/uptime/public/components/fleet_package/tcp_advanced_fields.test.tsx
rename to x-pack/plugins/uptime/public/components/fleet_package/tcp/advanced_fields.test.tsx
index 77551f9aa80114..78a6724fc8cfbf 100644
--- a/x-pack/plugins/uptime/public/components/fleet_package/tcp_advanced_fields.test.tsx
+++ b/x-pack/plugins/uptime/public/components/fleet_package/tcp/advanced_fields.test.tsx
@@ -7,13 +7,13 @@
 
 import React from 'react';
 import { fireEvent } from '@testing-library/react';
-import { render } from '../../lib/helper/rtl_helpers';
-import { TCPAdvancedFields } from './tcp_advanced_fields';
+import { render } from '../../../lib/helper/rtl_helpers';
+import { TCPAdvancedFields } from './advanced_fields';
 import {
   TCPAdvancedFieldsContextProvider,
   defaultTCPAdvancedFields as defaultConfig,
-} from './contexts';
-import { ConfigKeys, ITCPAdvancedFields } from './types';
+} from '../contexts';
+import { ConfigKeys, ITCPAdvancedFields } from '../types';
 
 // ensures fields and labels map appropriately
 jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({
diff --git a/x-pack/plugins/uptime/public/components/fleet_package/tcp_advanced_fields.tsx b/x-pack/plugins/uptime/public/components/fleet_package/tcp/advanced_fields.tsx
similarity index 97%
rename from x-pack/plugins/uptime/public/components/fleet_package/tcp_advanced_fields.tsx
rename to x-pack/plugins/uptime/public/components/fleet_package/tcp/advanced_fields.tsx
index 161de0f0af8d0f..9db07afa559b9d 100644
--- a/x-pack/plugins/uptime/public/components/fleet_package/tcp_advanced_fields.tsx
+++ b/x-pack/plugins/uptime/public/components/fleet_package/tcp/advanced_fields.tsx
@@ -16,11 +16,11 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 
-import { useTCPAdvancedFieldsContext } from './contexts';
+import { useTCPAdvancedFieldsContext } from '../contexts';
 
-import { ConfigKeys } from './types';
+import { ConfigKeys } from '../types';
 
-import { OptionalLabel } from './optional_label';
+import { OptionalLabel } from '../optional_label';
 
 export const TCPAdvancedFields = () => {
   const { fields, setFields } = useTCPAdvancedFieldsContext();
diff --git a/x-pack/plugins/uptime/public/components/fleet_package/tcp/simple_fields.tsx b/x-pack/plugins/uptime/public/components/fleet_package/tcp/simple_fields.tsx
new file mode 100644
index 00000000000000..82c77a63611f2d
--- /dev/null
+++ b/x-pack/plugins/uptime/public/components/fleet_package/tcp/simple_fields.tsx
@@ -0,0 +1,171 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { memo } from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiFormRow, EuiFieldText, EuiFieldNumber } from '@elastic/eui';
+import { ConfigKeys, Validation } from '../types';
+import { useTCPSimpleFieldsContext } from '../contexts';
+import { ComboBox } from '../combo_box';
+import { OptionalLabel } from '../optional_label';
+import { ScheduleField } from '../schedule_field';
+
+interface Props {
+  validate: Validation;
+}
+
+export const TCPSimpleFields = memo<Props>(({ validate }) => {
+  const { fields, setFields } = useTCPSimpleFieldsContext();
+  const handleInputChange = ({ value, configKey }: { value: unknown; configKey: ConfigKeys }) => {
+    setFields((prevFields) => ({ ...prevFields, [configKey]: value }));
+  };
+
+  return (
+    <>
+      <EuiFormRow
+        label={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.tcp.hosts"
+            defaultMessage="Host:Port"
+          />
+        }
+        isInvalid={!!validate[ConfigKeys.HOSTS]?.(fields[ConfigKeys.HOSTS])}
+        error={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.tcp.hosts.error"
+            defaultMessage="Host and port are required"
+          />
+        }
+      >
+        <EuiFieldText
+          value={fields[ConfigKeys.HOSTS]}
+          onChange={(event) =>
+            handleInputChange({
+              value: event.target.value,
+              configKey: ConfigKeys.HOSTS,
+            })
+          }
+          data-test-subj="syntheticsTCPHostField"
+        />
+      </EuiFormRow>
+
+      <EuiFormRow
+        id="syntheticsFleetScheduleField--number syntheticsFleetScheduleField--unit"
+        label={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.monitorInterval"
+            defaultMessage="Monitor interval"
+          />
+        }
+        isInvalid={!!validate[ConfigKeys.SCHEDULE]?.(fields[ConfigKeys.SCHEDULE])}
+        error={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.monitorInterval.error"
+            defaultMessage="Monitor interval is required"
+          />
+        }
+      >
+        <ScheduleField
+          onChange={(schedule) =>
+            handleInputChange({
+              value: schedule,
+              configKey: ConfigKeys.SCHEDULE,
+            })
+          }
+          number={fields[ConfigKeys.SCHEDULE].number}
+          unit={fields[ConfigKeys.SCHEDULE].unit}
+        />
+      </EuiFormRow>
+      <EuiFormRow
+        label={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.APMServiceName.label"
+            defaultMessage="APM service name"
+          />
+        }
+        labelAppend={<OptionalLabel />}
+        helpText={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.APMServiceName.helpText"
+            defaultMessage="APM service name for this monitor. Corresponds to the service.name ECS field. Set this when monitoring an app that is also using APM to enable integrations between Uptime and APM data in Kibana."
+          />
+        }
+      >
+        <EuiFieldText
+          value={fields[ConfigKeys.APM_SERVICE_NAME]}
+          onChange={(event) =>
+            handleInputChange({
+              value: event.target.value,
+              configKey: ConfigKeys.APM_SERVICE_NAME,
+            })
+          }
+          data-test-subj="syntheticsAPMServiceName"
+        />
+      </EuiFormRow>
+      <EuiFormRow
+        label={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.timeout.label"
+            defaultMessage="Timeout in seconds"
+          />
+        }
+        isInvalid={
+          !!validate[ConfigKeys.TIMEOUT]?.(
+            fields[ConfigKeys.TIMEOUT],
+            fields[ConfigKeys.SCHEDULE].number,
+            fields[ConfigKeys.SCHEDULE].unit
+          )
+        }
+        error={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.timeout.error"
+            defaultMessage="Timeout must be 0 or greater and less than schedule interval"
+          />
+        }
+        helpText={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.timeout.helpText"
+            defaultMessage="The total time allowed for testing the connection and exchanging data."
+          />
+        }
+      >
+        <EuiFieldNumber
+          min={0}
+          value={fields[ConfigKeys.TIMEOUT]}
+          onChange={(event) =>
+            handleInputChange({
+              value: event.target.value,
+              configKey: ConfigKeys.TIMEOUT,
+            })
+          }
+          step={'any'}
+        />
+      </EuiFormRow>
+      <EuiFormRow
+        label={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.tags.label"
+            defaultMessage="Tags"
+          />
+        }
+        labelAppend={<OptionalLabel />}
+        helpText={
+          <FormattedMessage
+            id="xpack.uptime.createPackagePolicy.stepConfigure.monitorIntegrationSettingsSection.tags.helpText"
+            defaultMessage="A list of tags that will be sent with the monitor event. Press enter to add a new tab. Displayed in Uptime and enables searching by tag."
+          />
+        }
+      >
+        <ComboBox
+          selectedOptions={fields[ConfigKeys.TAGS]}
+          onChange={(value) => handleInputChange({ value, configKey: ConfigKeys.TAGS })}
+          data-test-subj="syntheticsTags"
+        />
+      </EuiFormRow>
+    </>
+  );
+});
diff --git a/x-pack/plugins/uptime/public/components/fleet_package/types.tsx b/x-pack/plugins/uptime/public/components/fleet_package/types.tsx
index 802d5f08fd6468..4d44b4f074e829 100644
--- a/x-pack/plugins/uptime/public/components/fleet_package/types.tsx
+++ b/x-pack/plugins/uptime/public/components/fleet_package/types.tsx
@@ -105,6 +105,28 @@ export interface ISimpleFields {
   [ConfigKeys.WAIT]: string;
 }
 
+export interface ICommonFields {
+  [ConfigKeys.MONITOR_TYPE]: DataStream;
+  [ConfigKeys.SCHEDULE]: { number: string; unit: ScheduleUnit };
+  [ConfigKeys.APM_SERVICE_NAME]: string;
+  [ConfigKeys.TIMEOUT]: string;
+  [ConfigKeys.TAGS]: string[];
+}
+
+export type IHTTPSimpleFields = {
+  [ConfigKeys.MAX_REDIRECTS]: string;
+  [ConfigKeys.URLS]: string;
+} & ICommonFields;
+
+export type ITCPSimpleFields = {
+  [ConfigKeys.HOSTS]: string;
+} & ICommonFields;
+
+export type IICMPSimpleFields = {
+  [ConfigKeys.HOSTS]: string;
+  [ConfigKeys.WAIT]: string;
+} & ICommonFields;
+
 export interface ITLSFields {
   [ConfigKeys.TLS_CERTIFICATE_AUTHORITIES]: {
     value: string;
@@ -154,11 +176,21 @@ export interface ITCPAdvancedFields {
   [ConfigKeys.REQUEST_SEND_CHECK]: string;
 }
 
-export type ICustomFields = ISimpleFields & ITLSFields & IHTTPAdvancedFields & ITCPAdvancedFields;
+export type HTTPFields = IHTTPSimpleFields & IHTTPAdvancedFields & ITLSFields;
+export type TCPFields = ITCPSimpleFields & ITCPAdvancedFields & ITLSFields;
+export type ICMPFields = IICMPSimpleFields;
+
+export type ICustomFields = HTTPFields &
+  TCPFields &
+  ICMPFields & {
+    [ConfigKeys.NAME]: string;
+  };
 
-export type Config = {
-  [ConfigKeys.NAME]: string;
-} & ICustomFields;
+export interface PolicyConfig {
+  [DataStream.HTTP]: HTTPFields;
+  [DataStream.TCP]: TCPFields;
+  [DataStream.ICMP]: ICMPFields;
+}
 
 export type Validation = Partial<Record<ConfigKeys, (value: unknown, ...args: any[]) => void>>;
 
diff --git a/x-pack/plugins/uptime/public/components/fleet_package/use_update_policy.test.tsx b/x-pack/plugins/uptime/public/components/fleet_package/use_update_policy.test.tsx
index 3732791f895dcb..5a62aec90032d9 100644
--- a/x-pack/plugins/uptime/public/components/fleet_package/use_update_policy.test.tsx
+++ b/x-pack/plugins/uptime/public/components/fleet_package/use_update_policy.test.tsx
@@ -10,20 +10,7 @@ import { act, renderHook } from '@testing-library/react-hooks';
 import { NewPackagePolicy } from '../../../../fleet/public';
 import { validate } from './validation';
 import { ConfigKeys, DataStream, TLSVersion } from './types';
-import {
-  defaultSimpleFields,
-  defaultTLSFields,
-  defaultHTTPAdvancedFields,
-  defaultTCPAdvancedFields,
-} from './contexts';
-
-const defaultConfig = {
-  name: '',
-  ...defaultSimpleFields,
-  ...defaultTLSFields,
-  ...defaultHTTPAdvancedFields,
-  ...defaultTCPAdvancedFields,
-};
+import { defaultConfig } from './synthetics_policy_create_extension';
 
 describe('useBarChartsHooks', () => {
   const newPolicy: NewPackagePolicy = {
@@ -269,10 +256,10 @@ describe('useBarChartsHooks', () => {
   it('handles http data stream', () => {
     const onChange = jest.fn();
     const { result } = renderHook((props) => useUpdatePolicy(props), {
-      initialProps: { defaultConfig, newPolicy, onChange, validate },
+      initialProps: { defaultConfig, newPolicy, onChange, validate, monitorType: DataStream.HTTP },
     });
 
-    expect(result.current.config).toMatchObject({ ...defaultConfig });
+    expect(result.current.config).toMatchObject({ ...defaultConfig[DataStream.HTTP] });
 
     // expect only http to be enabled
     expect(result.current.updatedPolicy.inputs[0].enabled).toBe(true);
@@ -281,28 +268,28 @@ describe('useBarChartsHooks', () => {
 
     expect(
       result.current.updatedPolicy.inputs[0]?.streams[0]?.vars?.[ConfigKeys.MONITOR_TYPE].value
-    ).toEqual(defaultConfig[ConfigKeys.MONITOR_TYPE]);
+    ).toEqual(defaultConfig[DataStream.HTTP][ConfigKeys.MONITOR_TYPE]);
     expect(
       result.current.updatedPolicy.inputs[0]?.streams[0]?.vars?.[ConfigKeys.URLS].value
-    ).toEqual(defaultConfig[ConfigKeys.URLS]);
+    ).toEqual(defaultConfig[DataStream.HTTP][ConfigKeys.URLS]);
     expect(
       result.current.updatedPolicy.inputs[0]?.streams[0]?.vars?.[ConfigKeys.SCHEDULE].value
     ).toEqual(
       JSON.stringify(
-        `@every ${defaultConfig[ConfigKeys.SCHEDULE].number}${
-          defaultConfig[ConfigKeys.SCHEDULE].unit
+        `@every ${defaultConfig[DataStream.HTTP][ConfigKeys.SCHEDULE].number}${
+          defaultConfig[DataStream.HTTP][ConfigKeys.SCHEDULE].unit
         }`
       )
     );
     expect(
       result.current.updatedPolicy.inputs[0]?.streams[0]?.vars?.[ConfigKeys.PROXY_URL].value
-    ).toEqual(defaultConfig[ConfigKeys.PROXY_URL]);
+    ).toEqual(defaultConfig[DataStream.HTTP][ConfigKeys.PROXY_URL]);
     expect(
       result.current.updatedPolicy.inputs[0]?.streams[0]?.vars?.[ConfigKeys.APM_SERVICE_NAME].value
-    ).toEqual(defaultConfig[ConfigKeys.APM_SERVICE_NAME]);
+    ).toEqual(defaultConfig[DataStream.HTTP][ConfigKeys.APM_SERVICE_NAME]);
     expect(
       result.current.updatedPolicy.inputs[0]?.streams[0]?.vars?.[ConfigKeys.TIMEOUT].value
-    ).toEqual(`${defaultConfig[ConfigKeys.TIMEOUT]}s`);
+    ).toEqual(`${defaultConfig[DataStream.HTTP][ConfigKeys.TIMEOUT]}s`);
     expect(
       result.current.updatedPolicy.inputs[0]?.streams[0]?.vars?.[
         ConfigKeys.RESPONSE_BODY_CHECK_POSITIVE
@@ -316,29 +303,29 @@ describe('useBarChartsHooks', () => {
     expect(
       result.current.updatedPolicy.inputs[0]?.streams[0]?.vars?.[ConfigKeys.RESPONSE_STATUS_CHECK]
         .value
-    ).toEqual(JSON.stringify(defaultConfig[ConfigKeys.RESPONSE_STATUS_CHECK]));
+    ).toEqual(null);
     expect(
       result.current.updatedPolicy.inputs[0]?.streams[0]?.vars?.[ConfigKeys.REQUEST_HEADERS_CHECK]
         .value
-    ).toEqual(JSON.stringify(defaultConfig[ConfigKeys.REQUEST_HEADERS_CHECK]));
+    ).toEqual(null);
     expect(
       result.current.updatedPolicy.inputs[0]?.streams[0]?.vars?.[ConfigKeys.RESPONSE_HEADERS_CHECK]
         .value
-    ).toEqual(JSON.stringify(defaultConfig[ConfigKeys.RESPONSE_HEADERS_CHECK]));
+    ).toEqual(null);
     expect(
       result.current.updatedPolicy.inputs[0]?.streams[0]?.vars?.[ConfigKeys.RESPONSE_BODY_INDEX]
         .value
-    ).toEqual(defaultConfig[ConfigKeys.RESPONSE_BODY_INDEX]);
+    ).toEqual(defaultConfig[DataStream.HTTP][ConfigKeys.RESPONSE_BODY_INDEX]);
     expect(
       result.current.updatedPolicy.inputs[0]?.streams[0]?.vars?.[ConfigKeys.RESPONSE_HEADERS_INDEX]
         .value
-    ).toEqual(defaultConfig[ConfigKeys.RESPONSE_HEADERS_INDEX]);
+    ).toEqual(defaultConfig[DataStream.HTTP][ConfigKeys.RESPONSE_HEADERS_INDEX]);
   });
 
   it('stringifies array values and returns null for empty array values', () => {
     const onChange = jest.fn();
     const { result } = renderHook((props) => useUpdatePolicy(props), {
-      initialProps: { defaultConfig, newPolicy, onChange, validate },
+      initialProps: { defaultConfig, newPolicy, onChange, validate, monitorType: DataStream.HTTP },
     });
 
     act(() => {
@@ -419,16 +406,8 @@ describe('useBarChartsHooks', () => {
 
   it('handles tcp data stream', () => {
     const onChange = jest.fn();
-    const tcpConfig = {
-      ...defaultConfig,
-      [ConfigKeys.MONITOR_TYPE]: DataStream.TCP,
-    };
     const { result } = renderHook((props) => useUpdatePolicy(props), {
-      initialProps: { defaultConfig, newPolicy, onChange, validate },
-    });
-
-    act(() => {
-      result.current.setConfig(tcpConfig);
+      initialProps: { defaultConfig, newPolicy, onChange, validate, monitorType: DataStream.TCP },
     });
 
     // expect only tcp to be enabled
@@ -443,55 +422,47 @@ describe('useBarChartsHooks', () => {
 
     expect(
       result.current.updatedPolicy.inputs[1]?.streams[0]?.vars?.[ConfigKeys.MONITOR_TYPE].value
-    ).toEqual(tcpConfig[ConfigKeys.MONITOR_TYPE]);
+    ).toEqual(defaultConfig[DataStream.TCP][ConfigKeys.MONITOR_TYPE]);
     expect(
       result.current.updatedPolicy.inputs[1]?.streams[0]?.vars?.[ConfigKeys.HOSTS].value
-    ).toEqual(defaultConfig[ConfigKeys.HOSTS]);
+    ).toEqual(defaultConfig[DataStream.TCP][ConfigKeys.HOSTS]);
     expect(
       result.current.updatedPolicy.inputs[1]?.streams[0]?.vars?.[ConfigKeys.SCHEDULE].value
     ).toEqual(
       JSON.stringify(
-        `@every ${defaultConfig[ConfigKeys.SCHEDULE].number}${
-          defaultConfig[ConfigKeys.SCHEDULE].unit
+        `@every ${defaultConfig[DataStream.TCP][ConfigKeys.SCHEDULE].number}${
+          defaultConfig[DataStream.TCP][ConfigKeys.SCHEDULE].unit
         }`
       )
     );
     expect(
       result.current.updatedPolicy.inputs[1]?.streams[0]?.vars?.[ConfigKeys.PROXY_URL].value
-    ).toEqual(tcpConfig[ConfigKeys.PROXY_URL]);
+    ).toEqual(defaultConfig[DataStream.TCP][ConfigKeys.PROXY_URL]);
     expect(
       result.current.updatedPolicy.inputs[0]?.streams[0]?.vars?.[ConfigKeys.APM_SERVICE_NAME].value
-    ).toEqual(tcpConfig[ConfigKeys.APM_SERVICE_NAME]);
+    ).toEqual(defaultConfig[DataStream.TCP][ConfigKeys.APM_SERVICE_NAME]);
     expect(
       result.current.updatedPolicy.inputs[1]?.streams[0]?.vars?.[ConfigKeys.TIMEOUT].value
-    ).toEqual(`${tcpConfig[ConfigKeys.TIMEOUT]}s`);
+    ).toEqual(`${defaultConfig[DataStream.TCP][ConfigKeys.TIMEOUT]}s`);
     expect(
       result.current.updatedPolicy.inputs[1]?.streams[0]?.vars?.[
         ConfigKeys.PROXY_USE_LOCAL_RESOLVER
       ].value
-    ).toEqual(tcpConfig[ConfigKeys.PROXY_USE_LOCAL_RESOLVER]);
+    ).toEqual(defaultConfig[DataStream.TCP][ConfigKeys.PROXY_USE_LOCAL_RESOLVER]);
     expect(
       result.current.updatedPolicy.inputs[1]?.streams[0]?.vars?.[ConfigKeys.RESPONSE_RECEIVE_CHECK]
         .value
-    ).toEqual(tcpConfig[ConfigKeys.RESPONSE_RECEIVE_CHECK]);
+    ).toEqual(defaultConfig[DataStream.TCP][ConfigKeys.RESPONSE_RECEIVE_CHECK]);
     expect(
       result.current.updatedPolicy.inputs[1]?.streams[0]?.vars?.[ConfigKeys.REQUEST_SEND_CHECK]
         .value
-    ).toEqual(tcpConfig[ConfigKeys.REQUEST_SEND_CHECK]);
+    ).toEqual(defaultConfig[DataStream.TCP][ConfigKeys.REQUEST_SEND_CHECK]);
   });
 
   it('handles icmp data stream', () => {
     const onChange = jest.fn();
-    const icmpConfig = {
-      ...defaultConfig,
-      [ConfigKeys.MONITOR_TYPE]: DataStream.ICMP,
-    };
     const { result } = renderHook((props) => useUpdatePolicy(props), {
-      initialProps: { defaultConfig, newPolicy, onChange, validate },
-    });
-
-    act(() => {
-      result.current.setConfig(icmpConfig);
+      initialProps: { defaultConfig, newPolicy, onChange, validate, monitorType: DataStream.ICMP },
     });
 
     // expect only icmp to be enabled
@@ -506,25 +477,27 @@ describe('useBarChartsHooks', () => {
 
     expect(
       result.current.updatedPolicy.inputs[2]?.streams[0]?.vars?.[ConfigKeys.MONITOR_TYPE].value
-    ).toEqual(icmpConfig[ConfigKeys.MONITOR_TYPE]);
+    ).toEqual(defaultConfig[DataStream.ICMP][ConfigKeys.MONITOR_TYPE]);
     expect(
       result.current.updatedPolicy.inputs[2]?.streams[0]?.vars?.[ConfigKeys.HOSTS].value
-    ).toEqual(icmpConfig[ConfigKeys.HOSTS]);
+    ).toEqual(defaultConfig[DataStream.ICMP][ConfigKeys.HOSTS]);
     expect(
       result.current.updatedPolicy.inputs[2]?.streams[0]?.vars?.[ConfigKeys.SCHEDULE].value
     ).toEqual(
       JSON.stringify(
-        `@every ${icmpConfig[ConfigKeys.SCHEDULE].number}${icmpConfig[ConfigKeys.SCHEDULE].unit}`
+        `@every ${defaultConfig[DataStream.ICMP][ConfigKeys.SCHEDULE].number}${
+          defaultConfig[DataStream.ICMP][ConfigKeys.SCHEDULE].unit
+        }`
       )
     );
     expect(
       result.current.updatedPolicy.inputs[0]?.streams[0]?.vars?.[ConfigKeys.APM_SERVICE_NAME].value
-    ).toEqual(defaultConfig[ConfigKeys.APM_SERVICE_NAME]);
+    ).toEqual(defaultConfig[DataStream.ICMP][ConfigKeys.APM_SERVICE_NAME]);
     expect(
       result.current.updatedPolicy.inputs[2]?.streams[0]?.vars?.[ConfigKeys.TIMEOUT].value
-    ).toEqual(`${icmpConfig[ConfigKeys.TIMEOUT]}s`);
+    ).toEqual(`${defaultConfig[DataStream.ICMP][ConfigKeys.TIMEOUT]}s`);
     expect(
       result.current.updatedPolicy.inputs[2]?.streams[0]?.vars?.[ConfigKeys.WAIT].value
-    ).toEqual(`${icmpConfig[ConfigKeys.WAIT]}s`);
+    ).toEqual(`${defaultConfig[DataStream.ICMP][ConfigKeys.WAIT]}s`);
   });
 });
diff --git a/x-pack/plugins/uptime/public/components/fleet_package/use_update_policy.ts b/x-pack/plugins/uptime/public/components/fleet_package/use_update_policy.ts
index cb11e9f9c4a9b1..2b2fb22866463f 100644
--- a/x-pack/plugins/uptime/public/components/fleet_package/use_update_policy.ts
+++ b/x-pack/plugins/uptime/public/components/fleet_package/use_update_policy.ts
@@ -6,10 +6,11 @@
  */
 import { useEffect, useRef, useState } from 'react';
 import { NewPackagePolicy } from '../../../../fleet/public';
-import { ConfigKeys, Config, DataStream, Validation } from './types';
+import { ConfigKeys, PolicyConfig, DataStream, Validation, ICustomFields } from './types';
 
 interface Props {
-  defaultConfig: Config;
+  monitorType: DataStream;
+  defaultConfig: PolicyConfig;
   newPolicy: NewPackagePolicy;
   onChange: (opts: {
     /** is current form state is valid */
@@ -20,22 +21,27 @@ interface Props {
   validate: Record<DataStream, Validation>;
 }
 
-export const useUpdatePolicy = ({ defaultConfig, newPolicy, onChange, validate }: Props) => {
+export const useUpdatePolicy = ({
+  monitorType,
+  defaultConfig,
+  newPolicy,
+  onChange,
+  validate,
+}: Props) => {
   const [updatedPolicy, setUpdatedPolicy] = useState<NewPackagePolicy>(newPolicy);
   // Update the integration policy with our custom fields
-  const [config, setConfig] = useState<Config>(defaultConfig);
-  const currentConfig = useRef<Config>(defaultConfig);
+  const [config, setConfig] = useState<Partial<ICustomFields>>(defaultConfig[monitorType]);
+  const currentConfig = useRef<Partial<ICustomFields>>(defaultConfig[monitorType]);
 
   useEffect(() => {
-    const { type } = config;
     const configKeys = Object.keys(config) as ConfigKeys[];
-    const validationKeys = Object.keys(validate[type]) as ConfigKeys[];
+    const validationKeys = Object.keys(validate[monitorType]) as ConfigKeys[];
     const configDidUpdate = configKeys.some((key) => config[key] !== currentConfig.current[key]);
     const isValid =
-      !!newPolicy.name && !validationKeys.find((key) => validate[type][key]?.(config[key]));
+      !!newPolicy.name && !validationKeys.find((key) => validate[monitorType][key]?.(config[key]));
     const formattedPolicy = { ...newPolicy };
     const currentInput = formattedPolicy.inputs.find(
-      (input) => input.type === `synthetics/${type}`
+      (input) => input.type === `synthetics/${monitorType}`
     );
     const dataStream = currentInput?.streams[0];
 
@@ -51,17 +57,19 @@ export const useUpdatePolicy = ({ defaultConfig, newPolicy, onChange, validate }
         if (configItem) {
           switch (key) {
             case ConfigKeys.SCHEDULE:
-              configItem.value = JSON.stringify(`@every ${config[key].number}${config[key].unit}`); // convert to cron
+              configItem.value = JSON.stringify(
+                `@every ${config[key]?.number}${config[key]?.unit}`
+              ); // convert to cron
               break;
             case ConfigKeys.RESPONSE_BODY_CHECK_NEGATIVE:
             case ConfigKeys.RESPONSE_BODY_CHECK_POSITIVE:
             case ConfigKeys.RESPONSE_STATUS_CHECK:
             case ConfigKeys.TAGS:
-              configItem.value = config[key].length ? JSON.stringify(config[key]) : null;
+              configItem.value = config[key]?.length ? JSON.stringify(config[key]) : null;
               break;
             case ConfigKeys.RESPONSE_HEADERS_CHECK:
             case ConfigKeys.REQUEST_HEADERS_CHECK:
-              configItem.value = Object.keys(config[key]).length
+              configItem.value = Object.keys(config?.[key] || []).length
                 ? JSON.stringify(config[key])
                 : null;
               break;
@@ -70,26 +78,26 @@ export const useUpdatePolicy = ({ defaultConfig, newPolicy, onChange, validate }
               configItem.value = config[key] ? `${config[key]}s` : null; // convert to cron
               break;
             case ConfigKeys.REQUEST_BODY_CHECK:
-              configItem.value = config[key].value ? JSON.stringify(config[key].value) : null; // only need value of REQUEST_BODY_CHECK for outputted policy
+              configItem.value = config[key]?.value ? JSON.stringify(config[key]?.value) : null; // only need value of REQUEST_BODY_CHECK for outputted policy
               break;
             case ConfigKeys.TLS_CERTIFICATE:
             case ConfigKeys.TLS_CERTIFICATE_AUTHORITIES:
             case ConfigKeys.TLS_KEY:
               configItem.value =
-                config[key].isEnabled && config[key].value
-                  ? JSON.stringify(config[key].value)
+                config[key]?.isEnabled && config[key]?.value
+                  ? JSON.stringify(config[key]?.value)
                   : null; // only add tls settings if they are enabled by the user
               break;
             case ConfigKeys.TLS_VERSION:
               configItem.value =
-                config[key].isEnabled && config[key].value.length
-                  ? JSON.stringify(config[key].value)
+                config[key]?.isEnabled && config[key]?.value.length
+                  ? JSON.stringify(config[key]?.value)
                   : null; // only add tls settings if they are enabled by the user
               break;
             case ConfigKeys.TLS_KEY_PASSPHRASE:
             case ConfigKeys.TLS_VERIFICATION_MODE:
               configItem.value =
-                config[key].isEnabled && config[key].value ? config[key].value : null; // only add tls settings if they are enabled by the user
+                config[key]?.isEnabled && config[key]?.value ? config[key]?.value : null; // only add tls settings if they are enabled by the user
               break;
             default:
               configItem.value =
@@ -104,7 +112,7 @@ export const useUpdatePolicy = ({ defaultConfig, newPolicy, onChange, validate }
         updatedPolicy: formattedPolicy,
       });
     }
-  }, [config, currentConfig, newPolicy, onChange, validate]);
+  }, [config, currentConfig, newPolicy, onChange, validate, monitorType]);
 
   // update our local config state ever time name, which is managed by fleet, changes
   useEffect(() => {
diff --git a/x-pack/plugins/uptime/public/components/fleet_package/validation.tsx b/x-pack/plugins/uptime/public/components/fleet_package/validation.tsx
index 5197cb9299e45e..f3057baf10381f 100644
--- a/x-pack/plugins/uptime/public/components/fleet_package/validation.tsx
+++ b/x-pack/plugins/uptime/public/components/fleet_package/validation.tsx
@@ -48,10 +48,6 @@ function validateTimeout({
 
 // validation functions return true when invalid
 const validateCommon = {
-  [ConfigKeys.MAX_REDIRECTS]: (value: unknown) =>
-    (!!value && !`${value}`.match(digitsOnly)) ||
-    parseFloat(value as ICustomFields[ConfigKeys.MAX_REDIRECTS]) < 0,
-  [ConfigKeys.MONITOR_TYPE]: (value: unknown) => !value,
   [ConfigKeys.SCHEDULE]: (value: unknown) => {
     const { number, unit } = value as ICustomFields[ConfigKeys.SCHEDULE];
     const parsedFloat = parseFloat(number);
@@ -84,6 +80,9 @@ const validateHTTP = {
     const headers = value as ICustomFields[ConfigKeys.REQUEST_HEADERS_CHECK];
     return validateHeaders<ICustomFields[ConfigKeys.REQUEST_HEADERS_CHECK]>(headers);
   },
+  [ConfigKeys.MAX_REDIRECTS]: (value: unknown) =>
+    (!!value && !`${value}`.match(digitsOnly)) ||
+    parseFloat(value as ICustomFields[ConfigKeys.MAX_REDIRECTS]) < 0,
   [ConfigKeys.URLS]: (value: unknown) => !value,
   ...validateCommon,
 };
diff --git a/x-pack/plugins/uptime/public/components/overview/alerts/toggle_alert_flyout_button.tsx b/x-pack/plugins/uptime/public/components/overview/alerts/toggle_alert_flyout_button.tsx
index fe507236569ec3..a1b745d07924ef 100644
--- a/x-pack/plugins/uptime/public/components/overview/alerts/toggle_alert_flyout_button.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/alerts/toggle_alert_flyout_button.tsx
@@ -124,6 +124,8 @@ export const ToggleAlertFlyoutButtonComponent: React.FC<Props> = ({
     <EuiPopover
       button={
         <EuiButtonEmpty
+          size="xs"
+          color="text"
           aria-label={ToggleFlyoutTranslations.toggleButtonAriaLabel}
           data-test-subj="xpack.uptime.alertsPopover.toggleButton"
           iconType="arrowDown"
diff --git a/x-pack/plugins/uptime/server/lib/alerts/status_check.ts b/x-pack/plugins/uptime/server/lib/alerts/status_check.ts
index 6a69921a36671e..c5a6ef877c47a4 100644
--- a/x-pack/plugins/uptime/server/lib/alerts/status_check.ts
+++ b/x-pack/plugins/uptime/server/lib/alerts/status_check.ts
@@ -8,10 +8,10 @@
 import { schema } from '@kbn/config-schema';
 import { i18n } from '@kbn/i18n';
 import Mustache from 'mustache';
+import { JsonObject } from '@kbn/common-utils';
 import { ActionGroupIdsOf } from '../../../../alerting/common';
 import { UptimeAlertTypeFactory } from './types';
 import { esKuery } from '../../../../../../src/plugins/data/server';
-import { JsonObject } from '../../../../../../src/plugins/kibana_utils/common';
 import {
   StatusCheckFilters,
   Ping,
diff --git a/x-pack/plugins/uptime/server/lib/requests/get_monitor_status.ts b/x-pack/plugins/uptime/server/lib/requests/get_monitor_status.ts
index c126de27158cc1..07047bd0be7bc5 100644
--- a/x-pack/plugins/uptime/server/lib/requests/get_monitor_status.ts
+++ b/x-pack/plugins/uptime/server/lib/requests/get_monitor_status.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { JsonObject } from 'src/plugins/kibana_utils/public';
+import { JsonObject } from '@kbn/common-utils';
 import { QueryDslQueryContainer } from '@elastic/elasticsearch/api/types';
 import { asMutableArray } from '../../../common/utils/as_mutable_array';
 import { UMElasticsearchQueryFn } from '../adapters';
diff --git a/x-pack/plugins/watcher/public/application/app.tsx b/x-pack/plugins/watcher/public/application/app.tsx
index 6c233a44830b54..98d10bce3b6b24 100644
--- a/x-pack/plugins/watcher/public/application/app.tsx
+++ b/x-pack/plugins/watcher/public/application/app.tsx
@@ -17,7 +17,7 @@ import {
 
 import { Router, Switch, Route, Redirect, withRouter, RouteComponentProps } from 'react-router-dom';
 
-import { EuiCallOut, EuiLink } from '@elastic/eui';
+import { EuiPageContent, EuiEmptyPrompt, EuiLink } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n/react';
 
@@ -62,24 +62,30 @@ export const App = (deps: AppDeps) => {
 
   if (!valid) {
     return (
-      <EuiCallOut
-        title={
-          <FormattedMessage
-            id="xpack.watcher.app.licenseErrorTitle"
-            defaultMessage="License error"
-          />
-        }
-        color="danger"
-        iconType="help"
-      >
-        {message}{' '}
-        <EuiLink href={deps.getUrlForApp('management', { path: 'stack/license_management/home' })}>
-          <FormattedMessage
-            id="xpack.watcher.app.licenseErrorLinkText"
-            defaultMessage="Manage your license."
-          />
-        </EuiLink>
-      </EuiCallOut>
+      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
+        <EuiEmptyPrompt
+          iconType="alert"
+          title={
+            <h1>
+              <FormattedMessage
+                id="xpack.watcher.app.licenseErrorTitle"
+                defaultMessage="License error"
+              />
+            </h1>
+          }
+          body={<p>{message}</p>}
+          actions={[
+            <EuiLink
+              href={deps.getUrlForApp('management', { path: 'stack/license_management/home' })}
+            >
+              <FormattedMessage
+                id="xpack.watcher.app.licenseErrorLinkText"
+                defaultMessage="Manage your license"
+              />
+            </EuiLink>,
+          ]}
+        />
+      </EuiPageContent>
     );
   }
   return (
diff --git a/x-pack/plugins/watcher/public/application/components/page_error/page_error.tsx b/x-pack/plugins/watcher/public/application/components/page_error/page_error.tsx
index ca05d390518f26..321b5c0e5e11b7 100644
--- a/x-pack/plugins/watcher/public/application/components/page_error/page_error.tsx
+++ b/x-pack/plugins/watcher/public/application/components/page_error/page_error.tsx
@@ -25,7 +25,7 @@ export function getPageErrorCode(errorOrErrors: any) {
   }
 }
 
-export function PageError({ errorCode, id }: { errorCode?: any; id?: any }) {
+export function PageError({ errorCode, id }: { errorCode?: number; id?: string }) {
   switch (errorCode) {
     case 404:
       return <PageErrorNotExist id={id} />;
diff --git a/x-pack/plugins/watcher/public/application/components/page_error/page_error_forbidden.tsx b/x-pack/plugins/watcher/public/application/components/page_error/page_error_forbidden.tsx
index c2e93c7f066001..56dc5c7dc22b53 100644
--- a/x-pack/plugins/watcher/public/application/components/page_error/page_error_forbidden.tsx
+++ b/x-pack/plugins/watcher/public/application/components/page_error/page_error_forbidden.tsx
@@ -13,8 +13,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 export function PageErrorForbidden() {
   return (
     <EuiEmptyPrompt
-      iconType="securityApp"
-      iconColor={undefined}
+      iconType="alert"
       title={
         <h1>
           <FormattedMessage
diff --git a/x-pack/plugins/watcher/public/application/components/page_error/page_error_not_exist.tsx b/x-pack/plugins/watcher/public/application/components/page_error/page_error_not_exist.tsx
index b50ffb299cffc2..0f8fd799e0dd6d 100644
--- a/x-pack/plugins/watcher/public/application/components/page_error/page_error_not_exist.tsx
+++ b/x-pack/plugins/watcher/public/application/components/page_error/page_error_not_exist.tsx
@@ -10,11 +10,10 @@ import React from 'react';
 import { EuiEmptyPrompt } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-export function PageErrorNotExist({ id }: { id: any }) {
+export function PageErrorNotExist({ id }: { id?: string }) {
   return (
     <EuiEmptyPrompt
-      iconType="search"
-      iconColor="primary"
+      iconType="alert"
       title={
         <h1>
           <FormattedMessage
@@ -25,11 +24,18 @@ export function PageErrorNotExist({ id }: { id: any }) {
       }
       body={
         <p>
-          <FormattedMessage
-            id="xpack.watcher.pageErrorNotExist.description"
-            defaultMessage="A watch with ID '{id}' could not be found."
-            values={{ id }}
-          />
+          {id ? (
+            <FormattedMessage
+              id="xpack.watcher.pageErrorNotExist.description"
+              defaultMessage="A watch with ID '{id}' could not be found."
+              values={{ id }}
+            />
+          ) : (
+            <FormattedMessage
+              id="xpack.watcher.pageErrorNotExist.noWatchIdDescription"
+              defaultMessage="A watch could not be found."
+            />
+          )}
         </p>
       }
     />
diff --git a/x-pack/plugins/watcher/public/application/sections/watch_edit/components/json_watch_edit/json_watch_edit.tsx b/x-pack/plugins/watcher/public/application/sections/watch_edit/components/json_watch_edit/json_watch_edit.tsx
index 8b5827fbd0fe0d..80931c3f60c05a 100644
--- a/x-pack/plugins/watcher/public/application/sections/watch_edit/components/json_watch_edit/json_watch_edit.tsx
+++ b/x-pack/plugins/watcher/public/application/sections/watch_edit/components/json_watch_edit/json_watch_edit.tsx
@@ -7,15 +7,7 @@
 
 import React, { useContext, useState } from 'react';
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiPageContent,
-  EuiSpacer,
-  EuiTab,
-  EuiTabs,
-  EuiTitle,
-} from '@elastic/eui';
+import { EuiPageHeader, EuiSpacer, EuiPageContentBody } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { ExecuteDetails } from '../../../../models/execute_details';
 import { getActionType } from '../../../../../../common/lib/get_action_type';
@@ -96,36 +88,31 @@ export const JsonWatchEdit = ({ pageTitle }: { pageTitle: string }) => {
   const hasExecuteWatchErrors = !!Object.keys(executeWatchErrors).find(
     (errorKey) => executeWatchErrors[errorKey].length >= 1
   );
+
   return (
-    <EuiPageContent>
-      <EuiFlexGroup>
-        <EuiFlexItem grow={false}>
-          <EuiTitle size="m">
-            <h1 data-test-subj="pageTitle">{pageTitle}</h1>
-          </EuiTitle>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-      <EuiTabs>
-        {WATCH_TABS.map((tab, index) => (
-          <EuiTab
-            onClick={() => {
-              setSelectedTab(tab.id);
-              setExecuteDetails(
-                new ExecuteDetails({
-                  ...executeDetails,
-                  actionModes: getActionModes(watchActions),
-                })
-              );
-            }}
-            isSelected={tab.id === selectedTab}
-            key={index}
-            data-test-subj="tab"
-          >
-            {tab.name}
-          </EuiTab>
-        ))}
-      </EuiTabs>
+    <EuiPageContentBody restrictWidth style={{ width: '100%' }}>
+      <EuiPageHeader
+        pageTitle={<span data-test-subj="pageTitle">{pageTitle}</span>}
+        bottomBorder
+        tabs={WATCH_TABS.map((tab, index) => ({
+          onClick: () => {
+            setSelectedTab(tab.id);
+            setExecuteDetails(
+              new ExecuteDetails({
+                ...executeDetails,
+                actionModes: getActionModes(watchActions),
+              })
+            );
+          },
+          isSelected: tab.id === selectedTab,
+          key: index,
+          'data-test-subj': 'tab',
+          label: tab.name,
+        }))}
+      />
+
       <EuiSpacer size="l" />
+
       {selectedTab === WATCH_SIMULATE_TAB && (
         <JsonWatchEditSimulate
           executeDetails={executeDetails}
@@ -135,7 +122,8 @@ export const JsonWatchEdit = ({ pageTitle }: { pageTitle: string }) => {
           watchActions={watchActions}
         />
       )}
+
       {selectedTab === WATCH_EDIT_TAB && <JsonWatchEditForm />}
-    </EuiPageContent>
+    </EuiPageContentBody>
   );
 };
diff --git a/x-pack/plugins/watcher/public/application/sections/watch_edit/components/monitoring_watch_edit/monitoring_watch_edit.tsx b/x-pack/plugins/watcher/public/application/sections/watch_edit/components/monitoring_watch_edit/monitoring_watch_edit.tsx
index 930c11340ce5e3..b00e4dc310e27e 100644
--- a/x-pack/plugins/watcher/public/application/sections/watch_edit/components/monitoring_watch_edit/monitoring_watch_edit.tsx
+++ b/x-pack/plugins/watcher/public/application/sections/watch_edit/components/monitoring_watch_edit/monitoring_watch_edit.tsx
@@ -7,16 +7,7 @@
 
 import React, { useContext } from 'react';
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiPageContent,
-  EuiSpacer,
-  EuiTitle,
-  EuiCallOut,
-  EuiText,
-  EuiLink,
-} from '@elastic/eui';
+import { EuiPageContent, EuiEmptyPrompt, EuiLink } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { WatchContext } from '../../watch_context';
 import { useAppContext } from '../../../../app_context';
@@ -27,46 +18,31 @@ export const MonitoringWatchEdit = ({ pageTitle }: { pageTitle: string }) => {
   const { watch } = useContext(WatchContext);
   const { history } = useAppContext();
 
-  const systemWatchTitle = (
-    <FormattedMessage
-      id="xpack.watcher.sections.watchEdit.monitoring.edit.calloutTitleText"
-      defaultMessage="This watch cannot be edited."
-    />
-  );
-
   const systemWatchMessage = (
     <FormattedMessage
       id="xpack.watcher.sections.watchEdit.monitoring.edit.calloutDescriptionText"
-      defaultMessage="Watch '{watchName}' is a system watch and cannot be edited. {watchStatusLink}"
+      defaultMessage="Watch '{watchName}' is a system watch and cannot be edited."
       values={{
         watchName: watch.name,
-        watchStatusLink: (
-          <EuiLink {...reactRouterNavigate(history, `/watches/watch/${watch.id}/status`)}>
-            <FormattedMessage
-              id="xpack.watcher.sections.watchEdit.monitoring.header.watchLinkTitle"
-              defaultMessage="View watch status."
-            />
-          </EuiLink>
-        ),
       }}
     />
   );
 
   return (
-    <EuiPageContent>
-      <EuiFlexGroup>
-        <EuiFlexItem grow={false}>
-          <EuiTitle size="m">
-            <h1>{pageTitle}</h1>
-          </EuiTitle>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-      <EuiSpacer size="s" />
-      <EuiCallOut title={systemWatchTitle} iconType="pin">
-        <EuiText>
-          <p>{systemWatchMessage}</p>
-        </EuiText>
-      </EuiCallOut>
+    <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
+      <EuiEmptyPrompt
+        iconType=""
+        title={<h1>{pageTitle}</h1>}
+        body={<p>{systemWatchMessage}</p>}
+        actions={[
+          <EuiLink {...reactRouterNavigate(history, `/watches/watch/${watch.id}/status`)}>
+            <FormattedMessage
+              id="xpack.watcher.sections.watchEdit.monitoring.header.watchLinkTitle"
+              defaultMessage="View watch status"
+            />
+          </EuiLink>,
+        ]}
+      />
     </EuiPageContent>
   );
 };
diff --git a/x-pack/plugins/watcher/public/application/sections/watch_edit/components/threshold_watch_edit/threshold_watch_edit.tsx b/x-pack/plugins/watcher/public/application/sections/watch_edit/components/threshold_watch_edit/threshold_watch_edit.tsx
index 2f89a3bc2be641..6587974363a802 100644
--- a/x-pack/plugins/watcher/public/application/sections/watch_edit/components/threshold_watch_edit/threshold_watch_edit.tsx
+++ b/x-pack/plugins/watcher/public/application/sections/watch_edit/components/threshold_watch_edit/threshold_watch_edit.tsx
@@ -18,13 +18,14 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiForm,
-  EuiPageContent,
   EuiPopover,
   EuiPopoverTitle,
   EuiSelect,
   EuiSpacer,
   EuiText,
   EuiTitle,
+  EuiPageHeader,
+  EuiPageContentBody,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -236,19 +237,15 @@ export const ThresholdWatchEdit = ({ pageTitle }: { pageTitle: string }) => {
   };
 
   return (
-    <EuiPageContent>
-      <EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd">
-        <EuiFlexItem grow={false}>
-          <EuiTitle size="m">
-            <h1 data-test-subj="pageTitle">{pageTitle}</h1>
-          </EuiTitle>
-          <EuiSpacer size="s" />
-          <EuiText size="s" color="subdued">
-            {watch.titleDescription}
-          </EuiText>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-      <EuiSpacer />
+    <EuiPageContentBody restrictWidth style={{ width: '100%' }}>
+      <EuiPageHeader
+        pageTitle={<span data-test-subj="pageTitle">{pageTitle}</span>}
+        description={watch.titleDescription}
+        bottomBorder
+      />
+
+      <EuiSpacer size="l" />
+
       <EuiForm data-test-subj="thresholdWatchForm">
         {serverError && (
           <Fragment>
@@ -957,6 +954,6 @@ export const ThresholdWatchEdit = ({ pageTitle }: { pageTitle: string }) => {
           close={() => setIsRequestVisible(false)}
         />
       ) : null}
-    </EuiPageContent>
+    </EuiPageContentBody>
   );
 };
diff --git a/x-pack/plugins/watcher/public/application/sections/watch_edit/components/watch_edit.tsx b/x-pack/plugins/watcher/public/application/sections/watch_edit/components/watch_edit.tsx
index 525ae077df655f..fa3c7e374f7b56 100644
--- a/x-pack/plugins/watcher/public/application/sections/watch_edit/components/watch_edit.tsx
+++ b/x-pack/plugins/watcher/public/application/sections/watch_edit/components/watch_edit.tsx
@@ -10,19 +10,20 @@ import { isEqual } from 'lodash';
 
 import { EuiPageContent } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-
 import { FormattedMessage } from '@kbn/i18n/react';
-import { Watch } from '../../../models/watch';
+
 import { WATCH_TYPES } from '../../../../../common/constants';
 import { BaseWatch } from '../../../../../common/types/watch_types';
-import { getPageErrorCode, PageError, SectionLoading, SectionError } from '../../../components';
+import { getPageErrorCode, PageError, SectionLoading } from '../../../components';
 import { loadWatch } from '../../../lib/api';
 import { listBreadcrumb, editBreadcrumb, createBreadcrumb } from '../../../lib/breadcrumbs';
+import { useAppContext } from '../../../app_context';
+import { Watch } from '../../../models/watch';
+import { PageError as GenericPageError } from '../../../shared_imports';
+import { WatchContext } from '../watch_context';
 import { JsonWatchEdit } from './json_watch_edit';
 import { ThresholdWatchEdit } from './threshold_watch_edit';
 import { MonitoringWatchEdit } from './monitoring_watch_edit';
-import { WatchContext } from '../watch_context';
-import { useAppContext } from '../../../app_context';
 
 const getTitle = (watch: BaseWatch) => {
   if (watch.isNew) {
@@ -115,7 +116,7 @@ export const WatchEdit = ({
           const loadedWatch = await loadWatch(id);
           dispatch({ command: 'setWatch', payload: loadedWatch });
         } catch (error) {
-          dispatch({ command: 'setError', payload: error });
+          dispatch({ command: 'setError', payload: error.body });
         }
       } else if (type) {
         const WatchType = Watch.getWatchTypes()[type];
@@ -135,36 +136,34 @@ export const WatchEdit = ({
   const errorCode = getPageErrorCode(loadError);
   if (errorCode) {
     return (
-      <EuiPageContent>
+      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
         <PageError errorCode={errorCode} id={id} />
       </EuiPageContent>
     );
-  }
-
-  if (loadError) {
+  } else if (loadError) {
     return (
-      <EuiPageContent>
-        <SectionError
-          title={
-            <FormattedMessage
-              id="xpack.watcher.sections.watchEdit.errorTitle"
-              defaultMessage="Error loading watch"
-            />
-          }
-          error={loadError}
-        />
-      </EuiPageContent>
+      <GenericPageError
+        title={
+          <FormattedMessage
+            id="xpack.watcher.sections.watchEdit.errorTitle"
+            defaultMessage="Error loading watch"
+          />
+        }
+        error={loadError}
+      />
     );
   }
 
   if (!watch) {
     return (
-      <SectionLoading>
-        <FormattedMessage
-          id="xpack.watcher.sections.watchEdit.loadingWatchDescription"
-          defaultMessage="Loading watch…"
-        />
-      </SectionLoading>
+      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
+        <SectionLoading>
+          <FormattedMessage
+            id="xpack.watcher.sections.watchEdit.loadingWatchDescription"
+            defaultMessage="Loading watch…"
+          />
+        </SectionLoading>
+      </EuiPageContent>
     );
   }
 
diff --git a/x-pack/plugins/watcher/public/application/sections/watch_list/components/watch_list.tsx b/x-pack/plugins/watcher/public/application/sections/watch_list/components/watch_list.tsx
index 0e89871063507e..31accef0b63691 100644
--- a/x-pack/plugins/watcher/public/application/sections/watch_list/components/watch_list.tsx
+++ b/x-pack/plugins/watcher/public/application/sections/watch_list/components/watch_list.tsx
@@ -11,25 +11,25 @@ import {
   CriteriaWithPagination,
   EuiButton,
   EuiButtonEmpty,
-  EuiFlexGroup,
-  EuiFlexItem,
   EuiInMemoryTable,
   EuiLink,
   EuiPageContent,
   EuiSpacer,
   EuiText,
-  EuiTitle,
   EuiToolTip,
   EuiEmptyPrompt,
   EuiButtonIcon,
   EuiPopover,
   EuiContextMenuPanel,
   EuiContextMenuItem,
+  EuiPageHeader,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { Moment } from 'moment';
 
+import { reactRouterNavigate } from '../../../../../../../../src/plugins/kibana_react/public';
+
 import { REFRESH_INTERVALS, PAGINATION, WATCH_TYPES } from '../../../../../common/constants';
 import { listBreadcrumb } from '../../../lib/breadcrumbs';
 import {
@@ -37,15 +37,13 @@ import {
   PageError,
   DeleteWatchesModal,
   WatchStatus,
-  SectionError,
   SectionLoading,
   Error,
 } from '../../../components';
 import { useLoadWatches } from '../../../lib/api';
 import { goToCreateThresholdAlert, goToCreateAdvancedWatch } from '../../../lib/navigation';
 import { useAppContext } from '../../../app_context';
-
-import { reactRouterNavigate } from '../../../../../../../../src/plugins/kibana_react/public';
+import { PageError as GenericPageError } from '../../../shared_imports';
 
 export const WatchList = () => {
   // hooks
@@ -173,21 +171,36 @@ export const WatchList = () => {
 
   if (isWatchesLoading) {
     return (
-      <SectionLoading>
-        <FormattedMessage
-          id="xpack.watcher.sections.watchList.loadingWatchesDescription"
-          defaultMessage="Loading watches…"
-        />
-      </SectionLoading>
+      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
+        <SectionLoading>
+          <FormattedMessage
+            id="xpack.watcher.sections.watchList.loadingWatchesDescription"
+            defaultMessage="Loading watches…"
+          />
+        </SectionLoading>
+      </EuiPageContent>
     );
   }
 
-  if (getPageErrorCode(error)) {
+  const errorCode = getPageErrorCode(error);
+  if (errorCode) {
     return (
-      <EuiPageContent>
-        <PageError />
+      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
+        <PageError errorCode={errorCode} />
       </EuiPageContent>
     );
+  } else if (error) {
+    return (
+      <GenericPageError
+        title={
+          <FormattedMessage
+            id="xpack.watcher.sections.watchList.errorTitle"
+            defaultMessage="Error loading watches"
+          />
+        }
+        error={(error as unknown) as Error}
+      />
+    );
   }
 
   if (availableWatches && availableWatches.length === 0) {
@@ -206,7 +219,7 @@ export const WatchList = () => {
     );
 
     return (
-      <EuiPageContent>
+      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
         <EuiEmptyPrompt
           iconType="managementApp"
           title={
@@ -227,19 +240,7 @@ export const WatchList = () => {
 
   let content;
 
-  if (error) {
-    content = (
-      <SectionError
-        title={
-          <FormattedMessage
-            id="xpack.watcher.sections.watchList.errorTitle"
-            defaultMessage="Error loading watches"
-          />
-        }
-        error={(error as unknown) as Error}
-      />
-    );
-  } else if (availableWatches) {
+  if (availableWatches) {
     const columns = [
       {
         field: 'id',
@@ -463,56 +464,46 @@ export const WatchList = () => {
     );
   }
 
-  if (content) {
-    return (
-      <EuiPageContent>
-        <DeleteWatchesModal
-          callback={(deleted?: string[]) => {
-            if (deleted) {
-              setDeletedWatches([...deletedWatches, ...watchesToDelete]);
-            }
-            setWatchesToDelete([]);
-          }}
-          watchesToDelete={watchesToDelete}
-        />
-
-        <EuiTitle size="l">
-          <EuiFlexGroup alignItems="center">
-            <EuiFlexItem grow={true}>
-              <h1 data-test-subj="appTitle">
-                <FormattedMessage
-                  id="xpack.watcher.sections.watchList.header"
-                  defaultMessage="Watcher"
-                />
-              </h1>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
-                href={watcherGettingStartedUrl}
-                target="_blank"
-                iconType="help"
-                data-test-subj="documentationLink"
-              >
-                <FormattedMessage
-                  id="xpack.watcher.sections.watchList.watcherGettingStartedDocsLinkText"
-                  defaultMessage="Watcher docs"
-                />
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiTitle>
-
-        <EuiSpacer size="s" />
-
-        <EuiText color="subdued">
-          <p>{watcherDescriptionText}</p>
-        </EuiText>
+  return (
+    <>
+      <EuiPageHeader
+        pageTitle={
+          <span data-test-subj="appTitle">
+            <FormattedMessage
+              id="xpack.watcher.sections.watchList.header"
+              defaultMessage="Watcher"
+            />
+          </span>
+        }
+        bottomBorder
+        rightSideItems={[
+          <EuiButtonEmpty
+            href={watcherGettingStartedUrl}
+            target="_blank"
+            iconType="help"
+            data-test-subj="documentationLink"
+          >
+            <FormattedMessage
+              id="xpack.watcher.sections.watchList.watcherGettingStartedDocsLinkText"
+              defaultMessage="Watcher docs"
+            />
+          </EuiButtonEmpty>,
+        ]}
+        description={watcherDescriptionText}
+      />
+      <DeleteWatchesModal
+        callback={(deleted?: string[]) => {
+          if (deleted) {
+            setDeletedWatches([...deletedWatches, ...watchesToDelete]);
+          }
+          setWatchesToDelete([]);
+        }}
+        watchesToDelete={watchesToDelete}
+      />
 
-        <EuiSpacer size="xl" />
+      <EuiSpacer size="l" />
 
-        {content}
-      </EuiPageContent>
-    );
-  }
-  return null;
+      {content}
+    </>
+  );
 };
diff --git a/x-pack/plugins/watcher/public/application/sections/watch_status/components/watch_status.tsx b/x-pack/plugins/watcher/public/application/sections/watch_status/components/watch_status.tsx
index 1e3548620339aa..73400b9ccaaa72 100644
--- a/x-pack/plugins/watcher/public/application/sections/watch_status/components/watch_status.tsx
+++ b/x-pack/plugins/watcher/public/application/sections/watch_status/components/watch_status.tsx
@@ -9,14 +9,10 @@ import React, { useEffect, useState } from 'react';
 import {
   EuiPageContent,
   EuiSpacer,
-  EuiTabs,
-  EuiTab,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiTitle,
   EuiToolTip,
   EuiBadge,
   EuiButtonEmpty,
+  EuiPageHeader,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -88,18 +84,20 @@ export const WatchStatus = ({
 
   if (isWatchDetailLoading) {
     return (
-      <SectionLoading>
-        <FormattedMessage
-          id="xpack.watcher.sections.watchStatus.loadingWatchDetailsDescription"
-          defaultMessage="Loading watch details…"
-        />
-      </SectionLoading>
+      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
+        <SectionLoading>
+          <FormattedMessage
+            id="xpack.watcher.sections.watchStatus.loadingWatchDetailsDescription"
+            defaultMessage="Loading watch details…"
+          />
+        </SectionLoading>
+      </EuiPageContent>
     );
   }
 
   if (errorCode) {
     return (
-      <EuiPageContent>
+      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
         <PageError errorCode={errorCode} id={id} />
       </EuiPageContent>
     );
@@ -156,20 +154,11 @@ export const WatchStatus = ({
 
     return (
       <WatchDetailsContext.Provider value={{ watchDetailError, watchDetail, isWatchDetailLoading }}>
-        <EuiPageContent>
-          <DeleteWatchesModal
-            callback={(deleted?: string[]) => {
-              if (deleted) {
-                goToWatchList();
-              }
-              setWatchesToDelete([]);
-            }}
-            watchesToDelete={watchesToDelete}
-          />
-          <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
-            <EuiFlexItem grow={false}>
-              <EuiTitle size="m">
-                <h1 data-test-subj="pageTitle">
+        <>
+          <EuiPageHeader
+            pageTitle={
+              <>
+                <span data-test-subj="pageTitle">
                   <FormattedMessage
                     id="xpack.watcher.sections.watchDetail.header"
                     defaultMessage="Current status for '{watch}'"
@@ -177,40 +166,41 @@ export const WatchStatus = ({
                       watch: watchName ? watchName : watchId,
                     }}
                   />
-                </h1>
-              </EuiTitle>
-            </EuiFlexItem>
-            {isSystemWatch ? (
-              <EuiFlexItem grow={false}>
-                <EuiToolTip
-                  content={
-                    <FormattedMessage
-                      id="xpack.watcher.sections.watchDetail.headerBadgeToolipText"
-                      defaultMessage="You cannot deactivate or delete a system watch."
-                    />
-                  }
-                >
-                  <EuiBadge color="hollow">
-                    <FormattedMessage
-                      id="xpack.watcher.sections.watchDetail.headerBadgeText"
-                      defaultMessage="System watch"
-                    />
-                  </EuiBadge>
-                </EuiToolTip>
-              </EuiFlexItem>
-            ) : (
-              <EuiFlexItem>
-                <EuiFlexGroup justifyContent="flexEnd">
-                  <EuiFlexItem grow={false}>
+                </span>
+                {isSystemWatch && (
+                  <>
+                    {' '}
+                    <EuiToolTip
+                      content={
+                        <FormattedMessage
+                          id="xpack.watcher.sections.watchDetail.headerBadgeToolipText"
+                          defaultMessage="You cannot deactivate or delete a system watch."
+                        />
+                      }
+                    >
+                      <EuiBadge color="hollow">
+                        <FormattedMessage
+                          id="xpack.watcher.sections.watchDetail.headerBadgeText"
+                          defaultMessage="System watch"
+                        />
+                      </EuiBadge>
+                    </EuiToolTip>
+                  </>
+                )}
+              </>
+            }
+            bottomBorder
+            rightSideItems={
+              isSystemWatch
+                ? []
+                : [
                     <EuiButtonEmpty
                       data-test-subj="toggleWatchActivationButton"
                       onClick={() => toggleWatchActivation()}
                       isLoading={isTogglingActivation}
                     >
                       {activationButtonText}
-                    </EuiButtonEmpty>
-                  </EuiFlexItem>
-                  <EuiFlexItem grow={false}>
+                    </EuiButtonEmpty>,
                     <EuiButtonEmpty
                       data-test-subj="deleteWatchButton"
                       onClick={() => {
@@ -223,30 +213,34 @@ export const WatchStatus = ({
                         id="xpack.watcher.sections.watchHistory.deleteWatchButtonLabel"
                         defaultMessage="Delete"
                       />
-                    </EuiButtonEmpty>
-                  </EuiFlexItem>
-                </EuiFlexGroup>
-              </EuiFlexItem>
-            )}
-          </EuiFlexGroup>
-          <EuiSpacer size="s" />
-          <EuiTabs>
-            {WATCH_STATUS_TABS.map((tab, index) => (
-              <EuiTab
-                onClick={() => {
-                  setSelectedTab(tab.id);
-                }}
-                isSelected={tab.id === selectedTab}
-                key={index}
-                data-test-subj="tab"
-              >
-                {tab.name}
-              </EuiTab>
-            ))}
-          </EuiTabs>
+                    </EuiButtonEmpty>,
+                  ]
+            }
+            tabs={WATCH_STATUS_TABS.map((tab, index) => ({
+              onClick: () => {
+                setSelectedTab(tab.id);
+              },
+              isSelected: tab.id === selectedTab,
+              key: index,
+              'data-test-subj': 'tab',
+              label: tab.name,
+            }))}
+          />
+
           <EuiSpacer size="l" />
+
           {selectedTab === WATCH_ACTIONS_TAB ? <WatchDetail /> : <WatchHistory />}
-        </EuiPageContent>
+
+          <DeleteWatchesModal
+            callback={(deleted?: string[]) => {
+              if (deleted) {
+                goToWatchList();
+              }
+              setWatchesToDelete([]);
+            }}
+            watchesToDelete={watchesToDelete}
+          />
+        </>
       </WatchDetailsContext.Provider>
     );
   }
diff --git a/x-pack/plugins/watcher/public/application/shared_imports.ts b/x-pack/plugins/watcher/public/application/shared_imports.ts
index e3eb11eda77b30..44bef3b0c4f5f6 100644
--- a/x-pack/plugins/watcher/public/application/shared_imports.ts
+++ b/x-pack/plugins/watcher/public/application/shared_imports.ts
@@ -12,4 +12,5 @@ export {
   sendRequest,
   useRequest,
   XJson,
+  PageError,
 } from '../../../../../src/plugins/es_ui_shared/public';
diff --git a/x-pack/test/api_integration/apis/ml/modules/index.ts b/x-pack/test/api_integration/apis/ml/modules/index.ts
index dae0044c47ccac..f6c36c61b998ca 100644
--- a/x-pack/test/api_integration/apis/ml/modules/index.ts
+++ b/x-pack/test/api_integration/apis/ml/modules/index.ts
@@ -13,6 +13,7 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) {
   const fleetPackages = ['apache-0.5.0', 'nginx-0.5.0'];
 
   // Failing: See https://github.com/elastic/kibana/issues/102282
+  // Failing: See https://github.com/elastic/kibana/issues/102283
   describe.skip('modules', function () {
     before(async () => {
       for (const fleetPackage of fleetPackages) {
diff --git a/x-pack/test/apm_api_integration/tests/alerts/rule_registry.ts b/x-pack/test/apm_api_integration/tests/alerts/rule_registry.ts
index 1f8d1144349dd5..3c2e98cfdae47c 100644
--- a/x-pack/test/apm_api_integration/tests/alerts/rule_registry.ts
+++ b/x-pack/test/apm_api_integration/tests/alerts/rule_registry.ts
@@ -8,6 +8,7 @@
 import expect from '@kbn/expect';
 import { merge, omit } from 'lodash';
 import { format } from 'url';
+import { EVENT_KIND } from '@kbn/rule-data-utils/target/technical_field_names';
 import { FtrProviderContext } from '../../common/ftr_provider_context';
 import { registry } from '../../common/registry';
 
@@ -259,7 +260,9 @@ export default function ApiTest({ getService }: FtrProviderContext) {
           index: ALERTS_INDEX_TARGET,
           body: {
             query: {
-              match_all: {},
+              term: {
+                [EVENT_KIND]: 'signal',
+              },
             },
             size: 1,
             sort: {
@@ -286,7 +289,9 @@ export default function ApiTest({ getService }: FtrProviderContext) {
           index: ALERTS_INDEX_TARGET,
           body: {
             query: {
-              match_all: {},
+              term: {
+                [EVENT_KIND]: 'signal',
+              },
             },
             size: 1,
             sort: {
@@ -313,7 +318,9 @@ export default function ApiTest({ getService }: FtrProviderContext) {
           index: ALERTS_INDEX_TARGET,
           body: {
             query: {
-              match_all: {},
+              term: {
+                [EVENT_KIND]: 'signal',
+              },
             },
             size: 1,
             sort: {
@@ -346,7 +353,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
               "open",
             ],
             "event.kind": Array [
-              "state",
+              "signal",
             ],
             "kibana.rac.alert.duration.us": Array [
               0,
@@ -416,7 +423,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
               "open",
             ],
             "event.kind": Array [
-              "state",
+              "signal",
             ],
             "kibana.rac.alert.duration.us": Array [
               0,
@@ -486,7 +493,9 @@ export default function ApiTest({ getService }: FtrProviderContext) {
           index: ALERTS_INDEX_TARGET,
           body: {
             query: {
-              match_all: {},
+              term: {
+                [EVENT_KIND]: 'signal',
+              },
             },
             size: 1,
             sort: {
@@ -521,7 +530,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
               "close",
             ],
             "event.kind": Array [
-              "state",
+              "signal",
             ],
             "kibana.rac.alert.evaluation.threshold": Array [
               30,
diff --git a/x-pack/test/apm_api_integration/tests/services/annotations.ts b/x-pack/test/apm_api_integration/tests/services/annotations.ts
index 9a634c9bf82470..34eadbe3c609ce 100644
--- a/x-pack/test/apm_api_integration/tests/services/annotations.ts
+++ b/x-pack/test/apm_api_integration/tests/services/annotations.ts
@@ -7,7 +7,7 @@
 
 import expect from '@kbn/expect';
 import { merge, cloneDeep, isPlainObject } from 'lodash';
-import { JsonObject } from 'src/plugins/kibana_utils/common';
+import { JsonObject } from '@kbn/common-utils';
 import { FtrProviderContext } from '../../common/ftr_provider_context';
 import { registry } from '../../common/registry';
 
diff --git a/x-pack/test/fleet_functional/apps/fleet/agents_page.ts b/x-pack/test/fleet_functional/apps/fleet/agents_page.ts
new file mode 100644
index 00000000000000..515eaa65f5310a
--- /dev/null
+++ b/x-pack/test/fleet_functional/apps/fleet/agents_page.ts
@@ -0,0 +1,38 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getPageObjects, getService }: FtrProviderContext) {
+  const { agentsPage } = getPageObjects(['agentsPage']);
+
+  describe('When in the Fleet application', function () {
+    this.tags(['ciGroup7']);
+
+    describe('and on the agents page', () => {
+      before(async () => {
+        await agentsPage.navigateToAgentsPage();
+      });
+
+      it('should show the agents tab', async () => {
+        await agentsPage.agentsTabExistsOrFail();
+      });
+
+      it('should show the agent policies tab', async () => {
+        await agentsPage.agentPoliciesTabExistsOrFail();
+      });
+
+      it('should show the enrollment tokens tab', async () => {
+        await agentsPage.enrollmentTokensTabExistsOrFail();
+      });
+
+      it('should show the data streams tab', async () => {
+        await agentsPage.dataStreamsTabExistsOrFail();
+      });
+    });
+  });
+}
diff --git a/x-pack/test/fleet_functional/apps/fleet/index.ts b/x-pack/test/fleet_functional/apps/fleet/index.ts
index 23a070cb799340..ec16e2d8571831 100644
--- a/x-pack/test/fleet_functional/apps/fleet/index.ts
+++ b/x-pack/test/fleet_functional/apps/fleet/index.ts
@@ -12,6 +12,6 @@ export default function (providerContext: FtrProviderContext) {
 
   describe('endpoint', function () {
     this.tags('ciGroup7');
-    loadTestFile(require.resolve('./overview_page'));
+    loadTestFile(require.resolve('./agents_page'));
   });
 }
diff --git a/x-pack/test/fleet_functional/apps/fleet/overview_page.ts b/x-pack/test/fleet_functional/apps/fleet/overview_page.ts
deleted file mode 100644
index 3d3b069665448b..00000000000000
--- a/x-pack/test/fleet_functional/apps/fleet/overview_page.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { FtrProviderContext } from '../../ftr_provider_context';
-
-export default function ({ getPageObjects, getService }: FtrProviderContext) {
-  const { overviewPage } = getPageObjects(['overviewPage']);
-
-  describe('When in the Fleet application', function () {
-    this.tags(['ciGroup7']);
-
-    describe('and on the Overview page', () => {
-      before(async () => {
-        await overviewPage.navigateToOverview();
-      });
-
-      it('should show the Integrations section', async () => {
-        await overviewPage.integrationsSectionExistsOrFail();
-      });
-
-      it('should show the Agents section', async () => {
-        await overviewPage.agentSectionExistsOrFail();
-      });
-
-      it('should show the Agent policies section', async () => {
-        await overviewPage.agentPolicySectionExistsOrFail();
-      });
-
-      it('should show the Data streams section', async () => {
-        await overviewPage.datastreamSectionExistsOrFail();
-      });
-    });
-  });
-}
diff --git a/x-pack/test/fleet_functional/page_objects/overview_page.ts b/x-pack/test/fleet_functional/page_objects/agents_page.ts
similarity index 55%
rename from x-pack/test/fleet_functional/page_objects/overview_page.ts
rename to x-pack/test/fleet_functional/page_objects/agents_page.ts
index 2fd351184c7fe9..99e9ebfdcc15a5 100644
--- a/x-pack/test/fleet_functional/page_objects/overview_page.ts
+++ b/x-pack/test/fleet_functional/page_objects/agents_page.ts
@@ -11,31 +11,32 @@ import { PLUGIN_ID } from '../../../plugins/fleet/common';
 // NOTE: import path below should be the deep path to the actual module - else we get CI errors
 import { pagePathGetters } from '../../../plugins/fleet/public/constants/page_paths';
 
-export function OverviewPage({ getService, getPageObjects }: FtrProviderContext) {
+export function AgentsPage({ getService, getPageObjects }: FtrProviderContext) {
   const pageObjects = getPageObjects(['common']);
   const testSubjects = getService('testSubjects');
 
   return {
-    async navigateToOverview() {
+    async navigateToAgentsPage() {
       await pageObjects.common.navigateToApp(PLUGIN_ID, {
-        hash: pagePathGetters.overview()[1],
+        // Fleet's "/" route should redirect to "/agents"
+        hash: pagePathGetters.base()[1],
       });
     },
 
-    async integrationsSectionExistsOrFail() {
-      await testSubjects.existOrFail('fleet-integrations-section');
+    async agentsTabExistsOrFail() {
+      await testSubjects.existOrFail('fleet-agents-tab');
     },
 
-    async agentPolicySectionExistsOrFail() {
-      await testSubjects.existOrFail('fleet-agent-policy-section');
+    async agentPoliciesTabExistsOrFail() {
+      await testSubjects.existOrFail('fleet-agent-policies-tab');
     },
 
-    async agentSectionExistsOrFail() {
-      await testSubjects.existOrFail('fleet-agent-section');
+    async enrollmentTokensTabExistsOrFail() {
+      await testSubjects.existOrFail('fleet-enrollment-tokens-tab');
     },
 
-    async datastreamSectionExistsOrFail() {
-      await testSubjects.existOrFail('fleet-datastream-section');
+    async dataStreamsTabExistsOrFail() {
+      await testSubjects.existOrFail('fleet-datastreams-tab');
     },
   };
 }
diff --git a/x-pack/test/fleet_functional/page_objects/index.ts b/x-pack/test/fleet_functional/page_objects/index.ts
index 2c534285146e54..f0543aa3c7e89e 100644
--- a/x-pack/test/fleet_functional/page_objects/index.ts
+++ b/x-pack/test/fleet_functional/page_objects/index.ts
@@ -6,9 +6,9 @@
  */
 
 import { pageObjects as xpackFunctionalPageObjects } from '../../functional/page_objects';
-import { OverviewPage } from './overview_page';
+import { AgentsPage } from './agents_page';
 
 export const pageObjects = {
   ...xpackFunctionalPageObjects,
-  overviewPage: OverviewPage,
+  agentsPage: AgentsPage,
 };
diff --git a/x-pack/test/functional/apps/canvas/lens.ts b/x-pack/test/functional/apps/canvas/lens.ts
index ed1bf246fae650..67ba40a99684ec 100644
--- a/x-pack/test/functional/apps/canvas/lens.ts
+++ b/x-pack/test/functional/apps/canvas/lens.ts
@@ -22,6 +22,10 @@ export default function canvasLensTest({ getService, getPageObjects }: FtrProvid
       });
     });
 
+    after(async () => {
+      await esArchiver.unload('x-pack/test/functional/es_archives/canvas/lens');
+    });
+
     it('renders lens visualization', async () => {
       await PageObjects.header.waitUntilLoadingHasFinished();
 
diff --git a/x-pack/test/functional/apps/index_patterns/feature_controls/index_patterns_security.ts b/x-pack/test/functional/apps/index_patterns/feature_controls/index_patterns_security.ts
index 04f251d247d1b5..52fcac769955c5 100644
--- a/x-pack/test/functional/apps/index_patterns/feature_controls/index_patterns_security.ts
+++ b/x-pack/test/functional/apps/index_patterns/feature_controls/index_patterns_security.ts
@@ -20,6 +20,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
   describe('security', () => {
     before(async () => {
       await esArchiver.load('x-pack/test/functional/es_archives/empty_kibana');
+      await esArchiver.loadIfNeeded('x-pack/test/functional/es_archives/logstash_functional');
     });
 
     after(async () => {
diff --git a/x-pack/test/functional/apps/lens/formula.ts b/x-pack/test/functional/apps/lens/formula.ts
index e9e5051c006f02..db7c680ac20af6 100644
--- a/x-pack/test/functional/apps/lens/formula.ts
+++ b/x-pack/test/functional/apps/lens/formula.ts
@@ -80,6 +80,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       let element = await find.byCssSelector('.monaco-editor');
       expect(await element.getVisibleText()).to.equal(`count(kql='Men\\'s Clothing ')`);
 
+      await PageObjects.common.sleep(100);
       await PageObjects.lens.typeFormula('count(kql=');
       input = await find.activeElement();
       await input.type(`Men\'s Clothing`);
diff --git a/x-pack/test/functional_with_es_ssl/apps/ml/alert_flyout.ts b/x-pack/test/functional_with_es_ssl/apps/ml/alert_flyout.ts
index 777e6fd598f454..ba7243efe1773f 100644
--- a/x-pack/test/functional_with_es_ssl/apps/ml/alert_flyout.ts
+++ b/x-pack/test/functional_with_es_ssl/apps/ml/alert_flyout.ts
@@ -67,8 +67,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
 
   let testJobId = '';
 
-  // Failing: See https://github.com/elastic/kibana/issues/102012
-  describe.skip('anomaly detection alert', function () {
+  describe('anomaly detection alert', function () {
     this.tags('ciGroup13');
 
     before(async () => {
@@ -119,11 +118,11 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
 
         await ml.testExecution.logTestStep('should preview the alert condition');
         await ml.alerting.assertPreviewButtonState(false);
-        await ml.alerting.setTestInterval('2y');
+        await ml.alerting.setTestInterval('5y');
         await ml.alerting.assertPreviewButtonState(true);
 
         // don't check the exact number provided by the backend, just make sure it's > 0
-        await ml.alerting.checkPreview(/Found [1-9]\d* anomalies in the last 2y/);
+        await ml.alerting.checkPreview(/Found [1-9]\d* anomal(y|ies) in the last 5y/);
 
         await ml.testExecution.logTestStep('should create an alert');
         await pageObjects.triggersActionsUI.setAlertName('ml-test-alert');
diff --git a/x-pack/test/functional_with_es_ssl/apps/uptime/alert_flyout.ts b/x-pack/test/functional_with_es_ssl/apps/uptime/alert_flyout.ts
index 7d235d9e181082..bbd212b61e4394 100644
--- a/x-pack/test/functional_with_es_ssl/apps/uptime/alert_flyout.ts
+++ b/x-pack/test/functional_with_es_ssl/apps/uptime/alert_flyout.ts
@@ -11,7 +11,8 @@ import { delay } from 'bluebird';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default ({ getPageObjects, getService }: FtrProviderContext) => {
-  describe('uptime alerts', () => {
+  // FLAKY: https://github.com/elastic/kibana/issues/101984
+  describe.skip('uptime alerts', () => {
     const pageObjects = getPageObjects(['common', 'uptime']);
     const supertest = getService('supertest');
     const retry = getService('retry');
diff --git a/x-pack/test/observability_api_integration/basic/tests/annotations.ts b/x-pack/test/observability_api_integration/basic/tests/annotations.ts
index 05bfba42dd59ca..4a2c7b68f612e9 100644
--- a/x-pack/test/observability_api_integration/basic/tests/annotations.ts
+++ b/x-pack/test/observability_api_integration/basic/tests/annotations.ts
@@ -6,7 +6,7 @@
  */
 
 import expect from '@kbn/expect';
-import { JsonObject } from 'src/plugins/kibana_utils/common';
+import { JsonObject } from '@kbn/common-utils';
 import { FtrProviderContext } from '../../common/ftr_provider_context';
 
 // eslint-disable-next-line import/no-default-export
diff --git a/x-pack/test/observability_api_integration/trial/tests/annotations.ts b/x-pack/test/observability_api_integration/trial/tests/annotations.ts
index 1ea3460060bc9f..b1ef717ddfd88b 100644
--- a/x-pack/test/observability_api_integration/trial/tests/annotations.ts
+++ b/x-pack/test/observability_api_integration/trial/tests/annotations.ts
@@ -6,7 +6,7 @@
  */
 
 import expect from '@kbn/expect';
-import { JsonObject } from 'src/plugins/kibana_utils/common';
+import { JsonObject } from '@kbn/common-utils';
 import { Annotation } from '../../../../plugins/observability/common/annotations';
 import { FtrProviderContext } from '../../common/ftr_provider_context';
 
diff --git a/x-pack/test/security_solution_endpoint/apps/endpoint/policy_details.ts b/x-pack/test/security_solution_endpoint/apps/endpoint/policy_details.ts
index 44348d1ad0d9c4..ae60935013d272 100644
--- a/x-pack/test/security_solution_endpoint/apps/endpoint/policy_details.ts
+++ b/x-pack/test/security_solution_endpoint/apps/endpoint/policy_details.ts
@@ -21,7 +21,8 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
   const testSubjects = getService('testSubjects');
   const policyTestResources = getService('policyTestResources');
 
-  describe('When on the Endpoint Policy Details Page', function () {
+  // FLAKY: https://github.com/elastic/kibana/issues/100296
+  describe.skip('When on the Endpoint Policy Details Page', function () {
     describe('with an invalid policy id', () => {
       it('should display an error', async () => {
         await pageObjects.policy.navigateToPolicyDetails('invalid-id');
@@ -756,8 +757,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
       });
     });
 
-    // FLAKY: https://github.com/elastic/kibana/issues/100296
-    describe.skip('when on Ingest Policy Edit Package Policy page', async () => {
+    describe('when on Ingest Policy Edit Package Policy page', async () => {
       let policyInfo: PolicyTestResourceInfo;
       beforeEach(async () => {
         // Create a policy and navigate to Ingest app
diff --git a/x-pack/test/security_solution_endpoint_api_int/apis/resolver/events.ts b/x-pack/test/security_solution_endpoint_api_int/apis/resolver/events.ts
index 073bc44e89e61f..b3aeb55eb38a12 100644
--- a/x-pack/test/security_solution_endpoint_api_int/apis/resolver/events.ts
+++ b/x-pack/test/security_solution_endpoint_api_int/apis/resolver/events.ts
@@ -6,7 +6,7 @@
  */
 
 import expect from '@kbn/expect';
-import { JsonObject } from 'src/plugins/kibana_utils/common';
+import { JsonObject } from '@kbn/common-utils';
 import { eventsIndexPattern } from '../../../../plugins/security_solution/common/endpoint/constants';
 import {
   eventIDSafeVersion,
diff --git a/yarn.lock b/yarn.lock
index a9a81585000b5e..353527731cb04e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2620,6 +2620,10 @@
   version "0.0.0"
   uid ""
 
+"@kbn/common-utils@link:bazel-bin/packages/kbn-common-utils":
+  version "0.0.0"
+  uid ""
+
 "@kbn/config-schema@link:bazel-bin/packages/kbn-config-schema":
   version "0.0.0"
   uid ""
@@ -20300,9 +20304,9 @@ normalize-url@^3.0.0:
   integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
 
 normalize-url@^4.1.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.0.tgz#453354087e6ca96957bd8f5baf753f5982142129"
-  integrity sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.1.tgz#0dd90cf1288ee1d1313b87081c9a5932ee48518a"
+  integrity sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA==
 
 now-and-later@^2.0.0:
   version "2.0.0"