diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 534b1cea6242f8..c366819c49dde8 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -9,8 +9,9 @@ Delete any items that are not applicable to this PR.
 - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/master/packages/kbn-i18n/README.md)
 - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials
 - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios
-- [ ] This was checked for [keyboard-only and screenreader accessibility](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Accessibility_testing_checklist)
-- [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)
+- [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
+- [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
+- [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
 - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers)
 
 ### For maintainers
diff --git a/src/plugins/dashboard/public/index.ts b/src/plugins/dashboard/public/index.ts
index 315afd61c7c44e..bf9a3b2b8a217c 100644
--- a/src/plugins/dashboard/public/index.ts
+++ b/src/plugins/dashboard/public/index.ts
@@ -31,7 +31,12 @@ export {
 } from './application';
 export { DashboardConstants, createDashboardEditUrl } from './dashboard_constants';
 
-export { DashboardStart, DashboardUrlGenerator, DashboardFeatureFlagConfig } from './plugin';
+export {
+  DashboardSetup,
+  DashboardStart,
+  DashboardUrlGenerator,
+  DashboardFeatureFlagConfig,
+} from './plugin';
 export {
   DASHBOARD_APP_URL_GENERATOR,
   createDashboardUrlGenerator,
diff --git a/src/plugins/dashboard/public/plugin.tsx b/src/plugins/dashboard/public/plugin.tsx
index eadb3cd207e4dc..52318ce2e39f30 100644
--- a/src/plugins/dashboard/public/plugin.tsx
+++ b/src/plugins/dashboard/public/plugin.tsx
@@ -145,7 +145,7 @@ interface StartDependencies {
   savedObjects: SavedObjectsStart;
 }
 
-export type Setup = void;
+export type DashboardSetup = void;
 
 export interface DashboardStart {
   getSavedDashboardLoader: () => SavedObjectLoader;
@@ -180,7 +180,7 @@ declare module '../../../plugins/ui_actions/public' {
 }
 
 export class DashboardPlugin
-  implements Plugin<Setup, DashboardStart, SetupDependencies, StartDependencies> {
+  implements Plugin<DashboardSetup, DashboardStart, SetupDependencies, StartDependencies> {
   constructor(private initializerContext: PluginInitializerContext) {}
 
   private appStateUpdater = new BehaviorSubject<AppUpdater>(() => ({}));
@@ -193,17 +193,8 @@ export class DashboardPlugin
 
   public setup(
     core: CoreSetup<StartDependencies, DashboardStart>,
-    {
-      share,
-      uiActions,
-      embeddable,
-      home,
-      kibanaLegacy,
-      urlForwarding,
-      data,
-      usageCollection,
-    }: SetupDependencies
-  ): Setup {
+    { share, uiActions, embeddable, home, urlForwarding, data, usageCollection }: SetupDependencies
+  ): DashboardSetup {
     this.dashboardFeatureFlagConfig = this.initializerContext.config.get<
       DashboardFeatureFlagConfig
     >();
diff --git a/src/plugins/discover/public/application/angular/doc_table/components/table_row.ts b/src/plugins/discover/public/application/angular/doc_table/components/table_row.ts
index e7fafde2e68d0d..4911f207f0a5f3 100644
--- a/src/plugins/discover/public/application/angular/doc_table/components/table_row.ts
+++ b/src/plugins/discover/public/application/angular/doc_table/components/table_row.ts
@@ -18,6 +18,7 @@
  */
 
 import { find, template } from 'lodash';
+import { stringify } from 'query-string';
 import $ from 'jquery';
 import rison from 'rison-node';
 import '../../doc_viewer';
@@ -25,7 +26,7 @@ import '../../doc_viewer';
 import openRowHtml from './table_row/open.html';
 import detailsHtml from './table_row/details.html';
 
-import { dispatchRenderComplete } from '../../../../../../kibana_utils/public';
+import { dispatchRenderComplete, url } from '../../../../../../kibana_utils/public';
 import { DOC_HIDE_TIME_COLUMN_SETTING } from '../../../../../common';
 import cellTemplateHtml from '../components/table_row/cell.html';
 import truncateByHeightTemplateHtml from '../components/table_row/truncate_by_height.html';
@@ -49,7 +50,7 @@ interface LazyScope extends ng.IScope {
   [key: string]: any;
 }
 
-export function createTableRowDirective($compile: ng.ICompileService, $httpParamSerializer: any) {
+export function createTableRowDirective($compile: ng.ICompileService) {
   const cellTemplate = template(noWhiteSpace(cellTemplateHtml));
   const truncateByHeightTemplate = template(noWhiteSpace(truncateByHeightTemplateHtml));
 
@@ -114,26 +115,25 @@ export function createTableRowDirective($compile: ng.ICompileService, $httpParam
       };
 
       $scope.getContextAppHref = () => {
-        const path = `#/context/${encodeURIComponent($scope.indexPattern.id)}/${encodeURIComponent(
-          $scope.row._id
-        )}`;
         const globalFilters: any = getServices().filterManager.getGlobalFilters();
         const appFilters: any = getServices().filterManager.getAppFilters();
-        const hash = $httpParamSerializer({
-          _g: encodeURI(
-            rison.encode({
+
+        const hash = stringify(
+          url.encodeQuery({
+            _g: rison.encode({
               filters: globalFilters || [],
-            })
-          ),
-          _a: encodeURI(
-            rison.encode({
+            }),
+            _a: rison.encode({
               columns: $scope.columns,
               filters: (appFilters || []).map(esFilters.disableFilter),
-            })
-          ),
-        });
+            }),
+          }),
+          { encode: false, sort: false }
+        );
 
-        return `${path}?${hash}`;
+        return `#/context/${encodeURIComponent($scope.indexPattern.id)}/${encodeURIComponent(
+          $scope.row._id
+        )}?${hash}`;
       };
 
       // create a tr element that lists the value for each *column*
diff --git a/src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_field.ts b/src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_field.ts
index bb4aae6eccae87..0119d86e92a360 100644
--- a/src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_field.ts
+++ b/src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_field.ts
@@ -464,24 +464,58 @@ export const useField = <T>(
     [errors]
   );
 
+  /**
+   * Handler to update the state and make sure the component is still mounted.
+   * When resetting the form, some field might get unmounted (e.g. a toggle on "true" becomes "false" and now certain fields should not be in the DOM).
+   * In that scenario there is a race condition in the "reset" method below, because the useState() hook is not synchronous.
+   *
+   * A better approach would be to have the state in a reducer and being able to update all values in a single dispatch action.
+   */
+  const updateStateIfMounted = useCallback(
+    (
+      state: 'isPristine' | 'isValidating' | 'isChangingValue' | 'isValidated' | 'errors' | 'value',
+      nextValue: any
+    ) => {
+      if (isMounted.current === false) {
+        return;
+      }
+
+      switch (state) {
+        case 'value':
+          return setValue(nextValue);
+        case 'errors':
+          return setErrors(nextValue);
+        case 'isChangingValue':
+          return setIsChangingValue(nextValue);
+        case 'isPristine':
+          return setPristine(nextValue);
+        case 'isValidated':
+          return setIsValidated(nextValue);
+        case 'isValidating':
+          return setValidating(nextValue);
+      }
+    },
+    [setValue]
+  );
+
   const reset: FieldHook<T>['reset'] = useCallback(
     (resetOptions = { resetValue: true }) => {
       const { resetValue = true, defaultValue: updatedDefaultValue } = resetOptions;
 
-      setPristine(true);
-      setValidating(false);
-      setIsChangingValue(false);
-      setIsValidated(false);
-      setErrors([]);
+      updateStateIfMounted('isPristine', true);
+      updateStateIfMounted('isValidating', false);
+      updateStateIfMounted('isChangingValue', false);
+      updateStateIfMounted('isValidated', false);
+      updateStateIfMounted('errors', []);
 
       if (resetValue) {
         hasBeenReset.current = true;
         const newValue = deserializeValue(updatedDefaultValue ?? defaultValue);
-        setValue(newValue);
+        updateStateIfMounted('value', newValue);
         return newValue;
       }
     },
-    [setValue, deserializeValue, defaultValue]
+    [updateStateIfMounted, deserializeValue, defaultValue]
   );
 
   // Don't take into account non blocker validation. Some are just warning (like trying to add a wrong ComboBox item)
diff --git a/src/plugins/share/public/index.ts b/src/plugins/share/public/index.ts
index e3d6c41a278cd9..950ecebeaadc74 100644
--- a/src/plugins/share/public/index.ts
+++ b/src/plugins/share/public/index.ts
@@ -40,4 +40,6 @@ export {
 
 import { SharePlugin } from './plugin';
 
+export { KibanaURL } from './kibana_url';
+
 export const plugin = () => new SharePlugin();
diff --git a/src/plugins/share/public/kibana_url.ts b/src/plugins/share/public/kibana_url.ts
new file mode 100644
index 00000000000000..40c3372579f6a2
--- /dev/null
+++ b/src/plugins/share/public/kibana_url.ts
@@ -0,0 +1,44 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+// TODO: Replace this logic with KibanaURL once it is available.
+// https://github.com/elastic/kibana/issues/64497
+export class KibanaURL {
+  public readonly path: string;
+  public readonly appName: string;
+  public readonly appPath: string;
+
+  constructor(path: string) {
+    const match = path.match(/^.*\/app\/([^\/#]+)(.+)$/);
+
+    if (!match) {
+      throw new Error('Unexpected URL path.');
+    }
+
+    const [, appName, appPath] = match;
+
+    if (!appName || !appPath) {
+      throw new Error('Could not parse URL path.');
+    }
+
+    this.path = path;
+    this.appName = appName;
+    this.appPath = appPath;
+  }
+}
diff --git a/src/plugins/telemetry/server/fetcher.test.ts b/src/plugins/telemetry/server/fetcher.test.ts
index 245adf59799cc9..45712df772e1c2 100644
--- a/src/plugins/telemetry/server/fetcher.test.ts
+++ b/src/plugins/telemetry/server/fetcher.test.ts
@@ -23,19 +23,93 @@ import { coreMock } from '../../../core/server/mocks';
 
 describe('FetcherTask', () => {
   describe('sendIfDue', () => {
-    it('returns undefined and warns when it fails to get telemetry configs', async () => {
+    it('stops when it fails to get telemetry configs', async () => {
       const initializerContext = coreMock.createPluginInitializerContext({});
       const fetcherTask = new FetcherTask(initializerContext);
       const mockError = new Error('Some message.');
-      fetcherTask['getCurrentConfigs'] = async () => {
-        throw mockError;
-      };
+      const getCurrentConfigs = jest.fn().mockRejectedValue(mockError);
+      const fetchTelemetry = jest.fn();
+      const sendTelemetry = jest.fn();
+      Object.assign(fetcherTask, {
+        getCurrentConfigs,
+        fetchTelemetry,
+        sendTelemetry,
+      });
       const result = await fetcherTask['sendIfDue']();
       expect(result).toBe(undefined);
+      expect(getCurrentConfigs).toBeCalledTimes(1);
+      expect(fetchTelemetry).toBeCalledTimes(0);
+      expect(sendTelemetry).toBeCalledTimes(0);
       expect(fetcherTask['logger'].warn).toBeCalledTimes(1);
       expect(fetcherTask['logger'].warn).toHaveBeenCalledWith(
-        `Error fetching telemetry configs: ${mockError}`
+        `Error getting telemetry configs. (${mockError})`
       );
     });
+
+    it('stops when all collectors are not ready', async () => {
+      const initializerContext = coreMock.createPluginInitializerContext({});
+      const fetcherTask = new FetcherTask(initializerContext);
+      const getCurrentConfigs = jest.fn().mockResolvedValue({});
+      const areAllCollectorsReady = jest.fn().mockResolvedValue(false);
+      const shouldSendReport = jest.fn().mockReturnValue(true);
+      const fetchTelemetry = jest.fn();
+      const sendTelemetry = jest.fn();
+      const updateReportFailure = jest.fn();
+
+      Object.assign(fetcherTask, {
+        getCurrentConfigs,
+        areAllCollectorsReady,
+        shouldSendReport,
+        fetchTelemetry,
+        updateReportFailure,
+        sendTelemetry,
+      });
+
+      await fetcherTask['sendIfDue']();
+
+      expect(fetchTelemetry).toBeCalledTimes(0);
+      expect(sendTelemetry).toBeCalledTimes(0);
+
+      expect(areAllCollectorsReady).toBeCalledTimes(1);
+      expect(updateReportFailure).toBeCalledTimes(0);
+      expect(fetcherTask['logger'].warn).toBeCalledTimes(1);
+      expect(fetcherTask['logger'].warn).toHaveBeenCalledWith(
+        `Error fetching usage. (Error: Not all collectors are ready.)`
+      );
+    });
+
+    it('fetches usage and send telemetry', async () => {
+      const initializerContext = coreMock.createPluginInitializerContext({});
+      const fetcherTask = new FetcherTask(initializerContext);
+      const mockTelemetryUrl = 'mock_telemetry_url';
+      const mockClusters = ['cluster_1', 'cluster_2'];
+      const getCurrentConfigs = jest.fn().mockResolvedValue({
+        telemetryUrl: mockTelemetryUrl,
+      });
+      const areAllCollectorsReady = jest.fn().mockResolvedValue(true);
+      const shouldSendReport = jest.fn().mockReturnValue(true);
+
+      const fetchTelemetry = jest.fn().mockResolvedValue(mockClusters);
+      const sendTelemetry = jest.fn();
+      const updateReportFailure = jest.fn();
+
+      Object.assign(fetcherTask, {
+        getCurrentConfigs,
+        areAllCollectorsReady,
+        shouldSendReport,
+        fetchTelemetry,
+        updateReportFailure,
+        sendTelemetry,
+      });
+
+      await fetcherTask['sendIfDue']();
+
+      expect(areAllCollectorsReady).toBeCalledTimes(1);
+      expect(fetchTelemetry).toBeCalledTimes(1);
+      expect(sendTelemetry).toBeCalledTimes(2);
+      expect(sendTelemetry).toHaveBeenNthCalledWith(1, mockTelemetryUrl, mockClusters[0]);
+      expect(sendTelemetry).toHaveBeenNthCalledWith(2, mockTelemetryUrl, mockClusters[1]);
+      expect(updateReportFailure).toBeCalledTimes(0);
+    });
   });
 });
diff --git a/src/plugins/telemetry/server/fetcher.ts b/src/plugins/telemetry/server/fetcher.ts
index 75cfac721bcd3b..e6d909965f5f71 100644
--- a/src/plugins/telemetry/server/fetcher.ts
+++ b/src/plugins/telemetry/server/fetcher.ts
@@ -22,7 +22,10 @@ import { Observable } from 'rxjs';
 import { take } from 'rxjs/operators';
 // @ts-ignore
 import fetch from 'node-fetch';
-import { TelemetryCollectionManagerPluginStart } from 'src/plugins/telemetry_collection_manager/server';
+import {
+  TelemetryCollectionManagerPluginStart,
+  UsageStatsPayload,
+} from 'src/plugins/telemetry_collection_manager/server';
 import {
   PluginInitializerContext,
   Logger,
@@ -94,6 +97,10 @@ export class FetcherTask {
     }
   }
 
+  private async areAllCollectorsReady() {
+    return (await this.telemetryCollectionManager?.areAllCollectorsReady()) ?? false;
+  }
+
   private async sendIfDue() {
     if (this.isSending) {
       return;
@@ -103,7 +110,7 @@ export class FetcherTask {
     try {
       telemetryConfig = await this.getCurrentConfigs();
     } catch (err) {
-      this.logger.warn(`Error fetching telemetry configs: ${err}`);
+      this.logger.warn(`Error getting telemetry configs. (${err})`);
       return;
     }
 
@@ -111,9 +118,22 @@ export class FetcherTask {
       return;
     }
 
+    let clusters: Array<UsageStatsPayload | string> = [];
+    this.isSending = true;
+
+    try {
+      const allCollectorsReady = await this.areAllCollectorsReady();
+      if (!allCollectorsReady) {
+        throw new Error('Not all collectors are ready.');
+      }
+      clusters = await this.fetchTelemetry();
+    } catch (err) {
+      this.logger.warn(`Error fetching usage. (${err})`);
+      this.isSending = false;
+      return;
+    }
+
     try {
-      this.isSending = true;
-      const clusters = await this.fetchTelemetry();
       const { telemetryUrl } = telemetryConfig;
       for (const cluster of clusters) {
         await this.sendTelemetry(telemetryUrl, cluster);
@@ -123,7 +143,7 @@ export class FetcherTask {
     } catch (err) {
       await this.updateReportFailure(telemetryConfig);
 
-      this.logger.warn(`Error sending telemetry usage data: ${err}`);
+      this.logger.warn(`Error sending telemetry usage data. (${err})`);
     }
     this.isSending = false;
   }
diff --git a/src/plugins/telemetry_collection_manager/server/index.ts b/src/plugins/telemetry_collection_manager/server/index.ts
index 8761c28e140951..36ab64731fe582 100644
--- a/src/plugins/telemetry_collection_manager/server/index.ts
+++ b/src/plugins/telemetry_collection_manager/server/index.ts
@@ -38,4 +38,5 @@ export {
   ClusterDetails,
   ClusterDetailsGetter,
   LicenseGetter,
+  UsageStatsPayload,
 } from './types';
diff --git a/src/plugins/telemetry_collection_manager/server/plugin.ts b/src/plugins/telemetry_collection_manager/server/plugin.ts
index e54e7451a670af..ff63262004cf5e 100644
--- a/src/plugins/telemetry_collection_manager/server/plugin.ts
+++ b/src/plugins/telemetry_collection_manager/server/plugin.ts
@@ -67,6 +67,7 @@ export class TelemetryCollectionManagerPlugin
       setCollection: this.setCollection.bind(this),
       getOptInStats: this.getOptInStats.bind(this),
       getStats: this.getStats.bind(this),
+      areAllCollectorsReady: this.areAllCollectorsReady.bind(this),
     };
   }
 
@@ -75,6 +76,7 @@ export class TelemetryCollectionManagerPlugin
       setCollection: this.setCollection.bind(this),
       getOptInStats: this.getOptInStats.bind(this),
       getStats: this.getStats.bind(this),
+      areAllCollectorsReady: this.areAllCollectorsReady.bind(this),
     };
   }
 
@@ -185,6 +187,10 @@ export class TelemetryCollectionManagerPlugin
     return [];
   }
 
+  private areAllCollectorsReady = async () => {
+    return await this.usageCollection?.areAllCollectorsReady();
+  };
+
   private getOptInStatsForCollection = async (
     collection: Collection,
     optInStatus: boolean,
diff --git a/src/plugins/telemetry_collection_manager/server/types.ts b/src/plugins/telemetry_collection_manager/server/types.ts
index 44970df30fd16b..3b0936fb73a602 100644
--- a/src/plugins/telemetry_collection_manager/server/types.ts
+++ b/src/plugins/telemetry_collection_manager/server/types.ts
@@ -34,6 +34,7 @@ export interface TelemetryCollectionManagerPluginSetup {
   ) => void;
   getOptInStats: TelemetryCollectionManagerPlugin['getOptInStats'];
   getStats: TelemetryCollectionManagerPlugin['getStats'];
+  areAllCollectorsReady: TelemetryCollectionManagerPlugin['areAllCollectorsReady'];
 }
 
 export interface TelemetryCollectionManagerPluginStart {
@@ -42,6 +43,7 @@ export interface TelemetryCollectionManagerPluginStart {
   ) => void;
   getOptInStats: TelemetryCollectionManagerPlugin['getOptInStats'];
   getStats: TelemetryCollectionManagerPlugin['getStats'];
+  areAllCollectorsReady: TelemetryCollectionManagerPlugin['areAllCollectorsReady'];
 }
 
 export interface TelemetryOptInStats {
diff --git a/src/plugins/usage_collection/README.md b/src/plugins/usage_collection/README.md
index 9955f9fac81ca0..aae633a956c482 100644
--- a/src/plugins/usage_collection/README.md
+++ b/src/plugins/usage_collection/README.md
@@ -325,3 +325,8 @@ By storing these metrics and their counts as key-value pairs, we can add more me
 to worry about exceeding the 1000-field soft limit in Elasticsearch.
 
 The only caveat is that it makes it harder to consume in Kibana when analysing each entry in the array separately. In the telemetry team we are working to find a solution to this.
+
+# Routes registered by this plugin
+
+- `/api/ui_metric/report`: Used by `ui_metrics` usage collector instances to report their usage data to the server
+- `/api/stats`: Get the metrics and usage ([details](./server/routes/stats/README.md))
diff --git a/src/plugins/usage_collection/server/collector/collector_set.ts b/src/plugins/usage_collection/server/collector/collector_set.ts
index 6861be7f4f76b1..7bf4e19c72cc0d 100644
--- a/src/plugins/usage_collection/server/collector/collector_set.ts
+++ b/src/plugins/usage_collection/server/collector/collector_set.ts
@@ -76,23 +76,27 @@ export class CollectorSet {
   };
 
   public areAllCollectorsReady = async (collectorSet: CollectorSet = this) => {
-    // Kept this for runtime validation in JS code.
     if (!(collectorSet instanceof CollectorSet)) {
       throw new Error(
         `areAllCollectorsReady method given bad collectorSet parameter: ` + typeof collectorSet
       );
     }
 
-    const collectorTypesNotReady = (
-      await Promise.all(
-        [...collectorSet.collectors.values()].map(async (collector) => {
-          if (!(await collector.isReady())) {
-            return collector.type;
-          }
-        })
-      )
-    ).filter((collectorType): collectorType is string => !!collectorType);
-    const allReady = collectorTypesNotReady.length === 0;
+    const collectors = [...collectorSet.collectors.values()];
+    const collectorsWithStatus = await Promise.all(
+      collectors.map(async (collector) => {
+        return {
+          isReady: await collector.isReady(),
+          collector,
+        };
+      })
+    );
+
+    const collectorsTypesNotReady = collectorsWithStatus
+      .filter((collectorWithStatus) => collectorWithStatus.isReady === false)
+      .map((collectorWithStatus) => collectorWithStatus.collector.type);
+
+    const allReady = collectorsTypesNotReady.length === 0;
 
     if (!allReady && this.maximumWaitTimeForAllCollectorsInS >= 0) {
       const nowTimestamp = +new Date();
@@ -102,10 +106,11 @@ export class CollectorSet {
       const timeLeftInMS = this.maximumWaitTimeForAllCollectorsInS * 1000 - timeWaitedInMS;
       if (timeLeftInMS <= 0) {
         this.logger.debug(
-          `All collectors are not ready (waiting for ${collectorTypesNotReady.join(',')}) ` +
+          `All collectors are not ready (waiting for ${collectorsTypesNotReady.join(',')}) ` +
             `but we have waited the required ` +
             `${this.maximumWaitTimeForAllCollectorsInS}s and will return data from all collectors that are ready.`
         );
+
         return true;
       } else {
         this.logger.debug(`All collectors are not ready. Waiting for ${timeLeftInMS}ms longer.`);
diff --git a/src/plugins/usage_collection/server/routes/stats/README.md b/src/plugins/usage_collection/server/routes/stats/README.md
new file mode 100644
index 00000000000000..09dabefbab44a3
--- /dev/null
+++ b/src/plugins/usage_collection/server/routes/stats/README.md
@@ -0,0 +1,20 @@
+# `/api/stats`
+
+This API returns the metrics for the Kibana server and usage stats. It allows the [Metricbeat Kibana module](https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-module-kibana.html) to collect the [stats metricset](https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-metricset-kibana-stats.html).
+
+By default, it returns the simplest level of stats; consisting of the Kibana server's ops metrics, version, status, and basic config like the server name, host, port, and locale.
+
+However, the information detailed above can be extended, with the combination of the following 3 query parameters:
+
+| Query Parameter | Default value | Description |
+|:----------------|:-------------:|:------------|
+|`extended`|`false`|When `true`, it adds `clusterUuid` and `usage`. The latter contains the information reported by all the Usage Collectors registered in the Kibana server. It may throw `503 Stats not ready` if any of the collectors is not fully initialized yet.|
+|`legacy`|`false`|By default, when `extended=true`, the key names of the data in `usage` are transformed into API-friendlier `snake_case` format (i.e.: `clusterUuid` is transformed to `cluster_uuid`). When this parameter is `true`, the data is returned as-is.|
+|`exclude_usage`|`false`|When `true`, and `extended=true`, it will report `clusterUuid` but no `usage`.|
+
+## Known use cases
+
+Metricbeat Kibana' stats metricset ([code](https://github.com/elastic/beats/blob/master/metricbeat/module/kibana/stats/stats.go)) uses this API to collect the metrics (every 10s) and usage (only once every 24h), and then reports them to the Monitoring cluster. They call this API in 2 ways:
+
+1. Metrics-only collection (every 10 seconds): `GET /api/stats?extended=true&legacy=true&exclude_usage=true`
+2. Metrics+usage (every 24 hours): `GET /api/stats?extended=true&legacy=true&exclude_usage=false`
diff --git a/src/plugins/usage_collection/server/routes/stats/index.ts b/src/plugins/usage_collection/server/routes/stats/index.ts
new file mode 100644
index 00000000000000..8871ee599e56bf
--- /dev/null
+++ b/src/plugins/usage_collection/server/routes/stats/index.ts
@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export { registerStatsRoute } from './stats';
diff --git a/src/plugins/usage_collection/server/routes/stats.ts b/src/plugins/usage_collection/server/routes/stats/stats.ts
similarity index 91%
rename from src/plugins/usage_collection/server/routes/stats.ts
rename to src/plugins/usage_collection/server/routes/stats/stats.ts
index ef5da2eb11ba6a..bee25fef669f17 100644
--- a/src/plugins/usage_collection/server/routes/stats.ts
+++ b/src/plugins/usage_collection/server/routes/stats/stats.ts
@@ -30,8 +30,8 @@ import {
   MetricsServiceSetup,
   ServiceStatus,
   ServiceStatusLevels,
-} from '../../../../core/server';
-import { CollectorSet } from '../collector';
+} from '../../../../../core/server';
+import { CollectorSet } from '../../collector';
 
 const STATS_NOT_READY_MESSAGE = i18n.translate('usageCollection.stats.notReadyMessage', {
   defaultMessage: 'Stats are not ready yet. Please try again later.',
@@ -101,10 +101,12 @@ export function registerStatsRoute({
       if (isExtended) {
         const callCluster = context.core.elasticsearch.legacy.client.callAsCurrentUser;
         const esClient = context.core.elasticsearch.client.asCurrentUser;
-        const collectorsReady = await collectorSet.areAllCollectorsReady();
 
-        if (shouldGetUsage && !collectorsReady) {
-          return res.customError({ statusCode: 503, body: { message: STATS_NOT_READY_MESSAGE } });
+        if (shouldGetUsage) {
+          const collectorsReady = await collectorSet.areAllCollectorsReady();
+          if (!collectorsReady) {
+            return res.customError({ statusCode: 503, body: { message: STATS_NOT_READY_MESSAGE } });
+          }
         }
 
         const usagePromise = shouldGetUsage ? getUsage(callCluster, esClient) : Promise.resolve({});
@@ -152,9 +154,8 @@ export function registerStatsRoute({
         }
       }
 
-      // Guranteed to resolve immediately due to replay effect on getOpsMetrics$
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      const { collected_at, ...lastMetrics } = await metrics
+      // Guaranteed to resolve immediately due to replay effect on getOpsMetrics$
+      const { collected_at: collectedAt, ...lastMetrics } = await metrics
         .getOpsMetrics$()
         .pipe(first())
         .toPromise();
@@ -173,7 +174,7 @@ export function registerStatsRoute({
           snapshot: SNAPSHOT_REGEX.test(config.kibanaVersion),
           status: ServiceStatusToLegacyState[overallStatus.level.toString()],
         },
-        last_updated: collected_at.toISOString(),
+        last_updated: collectedAt.toISOString(),
         collection_interval_in_millis: metrics.collectionInterval,
       });
 
diff --git a/x-pack/examples/ui_actions_enhanced_examples/README.md b/x-pack/examples/ui_actions_enhanced_examples/README.md
index ec049bbd33dec4..8096fdbf13cfdc 100644
--- a/x-pack/examples/ui_actions_enhanced_examples/README.md
+++ b/x-pack/examples/ui_actions_enhanced_examples/README.md
@@ -5,7 +5,8 @@ To run this example plugin, use the command `yarn start --run-examples`.
 
 ## Drilldown examples
 
-This plugin holds few examples on how to add drilldown types to dashboard.
+This plugin holds few examples on how to add drilldown types to dashboard. See
+`./public/drilldowns/` folder.
 
 To play with drilldowns, open any dashboard, click "Edit" to put it in *edit mode*.
 Now when opening context menu of dashboard panels you should see "Create drilldown" option.
@@ -34,3 +35,74 @@ One can see how middle-click or Ctrl + click behavior could be supported using
 ### `dashboard_to_discover_drilldown`
 
 `dashboard_to_discover_drilldown` shows how a real-world drilldown could look like.
+
+
+## Drilldown Manager examples
+
+*Drilldown Manager* is a collectio of code and React components that allows you
+to add drilldowns to any app. To see examples of how drilldows can be added to
+your app, run Kibana with `--run-examples` flag:
+
+```
+yarn start --run-examples
+```
+
+Then go to "Developer examples" and "UI Actions Enhanced", where you can see examples
+where *Drilldown Manager* is used outside of the Dashboard app:
+
+![image](https://user-images.githubusercontent.com/9773803/94044547-969a3400-fdce-11ea-826a-cbd0773a4000.png)
+
+These examples show how you can create your custom UI Actions triggers and add
+drilldowns to them, or use an embeddable in your app and add drilldows to it.
+
+
+### Trigger examples
+
+The `/public/triggers` folder shows how you can create custom triggers for your app.
+Triggers are things that trigger some action in UI, like "user click".
+
+Once you have defined your triggers, you need to register them in your plugin:
+
+```ts
+export class MyPlugin implements Plugin {
+  public setup(core, { uiActionsEnhanced: uiActions }: SetupDependencies) {
+    uiActions.registerTrigger(myTrigger);
+  }
+}
+```
+
+### `app1_hello_world_drilldown`
+
+`app1_hello_world_drilldown` is a basic example that shows how you can add the most
+basic drilldown to your custom trigger.
+
+### `appx_to_dashboard_drilldown`
+
+`app1_to_dashboard_drilldown` and `app2_to_dashboard_drilldown` show how the Dashboard
+drilldown can be used in other apps, outside of Dashboard.
+
+Basically you define it:
+
+```ts
+type Trigger = typeof MY_TRIGGER_TRIGGER;
+type Context = MyAppClickContext;
+
+export class App1ToDashboardDrilldown extends AbstractDashboardDrilldown<Trigger> {
+  public readonly supportedTriggers = () => [MY_TRIGGER] as Trigger[];
+
+  protected async getURL(config: Config, context: Context): Promise<KibanaURL> {
+    return 'https://...';
+  }
+}
+```
+
+and then you register it in your plugin:
+
+```ts
+export class MyPlugin implements Plugin {
+  public setup(core, { uiActionsEnhanced: uiActions }: SetupDependencies) {
+    const drilldown = new App2ToDashboardDrilldown(/* You can pass in dependencies here. */);
+    uiActions.registerDrilldown(drilldown);
+  }
+}
+```
diff --git a/x-pack/examples/ui_actions_enhanced_examples/kibana.json b/x-pack/examples/ui_actions_enhanced_examples/kibana.json
index 1bae09b488a2ea..4f5ac8519fe5ba 100644
--- a/x-pack/examples/ui_actions_enhanced_examples/kibana.json
+++ b/x-pack/examples/ui_actions_enhanced_examples/kibana.json
@@ -5,10 +5,21 @@
   "configPath": ["ui_actions_enhanced_examples"],
   "server": false,
   "ui": true,
-  "requiredPlugins": ["uiActions","uiActionsEnhanced", "data", "discover"],
+  "requiredPlugins": [
+    "uiActions",
+    "uiActionsEnhanced",
+    "data",
+    "discover",
+    "dashboard",
+    "dashboardEnhanced",
+    "developerExamples"
+  ],
   "optionalPlugins": [],
   "requiredBundles": [
+    "dashboardEnhanced",
+    "embeddable",
     "kibanaUtils",
-    "kibanaReact"
+    "kibanaReact",
+    "share"
   ]
 }
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/components/page/index.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/components/page/index.tsx
new file mode 100644
index 00000000000000..7b3e19ff94f0f3
--- /dev/null
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/components/page/index.tsx
@@ -0,0 +1,38 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import * as React from 'react';
+import {
+  EuiPageBody,
+  EuiPageContent,
+  EuiPageContentBody,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiTitle,
+} from '@elastic/eui';
+
+export interface PageProps {
+  title?: React.ReactNode;
+}
+
+export const Page: React.FC<PageProps> = ({ title = 'Untitled', children }) => {
+  return (
+    <EuiPageBody style={{ maxWidth: 1200, margin: '0 auto' }}>
+      <EuiPageHeader>
+        <EuiPageHeaderSection>
+          <EuiTitle size="l">
+            <h1>{title}</h1>
+          </EuiTitle>
+        </EuiPageHeaderSection>
+      </EuiPageHeader>
+      <EuiPageContent>
+        <EuiPageContentBody style={{ maxWidth: 800, margin: '0 auto' }}>
+          {children}
+        </EuiPageContentBody>
+      </EuiPageContent>
+    </EuiPageBody>
+  );
+};
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/components/section/index.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/components/section/index.tsx
new file mode 100644
index 00000000000000..399f44df5d4037
--- /dev/null
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/components/section/index.tsx
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './section';
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/components/section/section.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/components/section/section.tsx
new file mode 100644
index 00000000000000..2f210ad53ef7a6
--- /dev/null
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/components/section/section.tsx
@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiTitle, EuiSpacer } from '@elastic/eui';
+
+export interface Props {
+  title: React.ReactNode;
+}
+
+export const Section: React.FC<Props> = ({ title, children }) => {
+  return (
+    <section>
+      <EuiTitle size="m">
+        <h2>{title}</h2>
+      </EuiTitle>
+      <EuiSpacer />
+      {children}
+    </section>
+  );
+};
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/containers/app/app.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/containers/app/app.tsx
new file mode 100644
index 00000000000000..33f55a1c35bb4b
--- /dev/null
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/containers/app/app.tsx
@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiPage } from '@elastic/eui';
+import { Page } from '../../components/page';
+import { DrilldownsManager } from '../drilldowns_manager';
+
+export const App: React.FC = () => {
+  return (
+    <EuiPage>
+      <Page title={'UI Actions Enhanced'}>
+        <DrilldownsManager />
+      </Page>
+    </EuiPage>
+  );
+};
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/containers/app/index.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/containers/app/index.tsx
new file mode 100644
index 00000000000000..1460fdfef37e6f
--- /dev/null
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/containers/app/index.tsx
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './app';
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_manager/drilldowns_manager.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_manager/drilldowns_manager.tsx
new file mode 100644
index 00000000000000..3376e8b2df76ed
--- /dev/null
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_manager/drilldowns_manager.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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiHorizontalRule } from '@elastic/eui';
+import React from 'react';
+import { Section } from '../../components/section/section';
+import { SampleMlJob, SampleApp1ClickContext } from '../../triggers';
+import { DrilldownsWithoutEmbeddableExample } from '../drilldowns_without_embeddable_example';
+import { DrilldownsWithoutEmbeddableSingleButtonExample } from '../drilldowns_without_embeddable_single_button_example/drilldowns_without_embeddable_single_button_example';
+import { DrilldownsWithEmbeddableExample } from '../drilldowns_with_embeddable_example';
+
+export const job: SampleMlJob = {
+  job_id: '123',
+  job_type: 'anomaly_detector',
+  description: 'This is some ML job.',
+};
+
+export const context: SampleApp1ClickContext = { job };
+
+export const DrilldownsManager: React.FC = () => {
+  return (
+    <div>
+      <Section title={'Drilldowns Manager'}>
+        <DrilldownsWithoutEmbeddableExample />
+
+        <EuiHorizontalRule margin="xxl" />
+
+        <DrilldownsWithoutEmbeddableSingleButtonExample />
+
+        <EuiHorizontalRule margin="xxl" />
+
+        <DrilldownsWithEmbeddableExample />
+      </Section>
+    </div>
+  );
+};
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_manager/index.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_manager/index.tsx
new file mode 100644
index 00000000000000..1964b32c2d215c
--- /dev/null
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_manager/index.tsx
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './drilldowns_manager';
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_with_embeddable_example/drilldowns_with_embeddable_example.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_with_embeddable_example/drilldowns_with_embeddable_example.tsx
new file mode 100644
index 00000000000000..a90147d01e8b63
--- /dev/null
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_with_embeddable_example/drilldowns_with_embeddable_example.tsx
@@ -0,0 +1,134 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import {
+  EuiText,
+  EuiSpacer,
+  EuiContextMenuPanelDescriptor,
+  EuiButton,
+  EuiPopover,
+  EuiContextMenu,
+  EuiFlyout,
+  EuiCode,
+  EuiFlexItem,
+  EuiFlexGroup,
+} from '@elastic/eui';
+import { SampleMlJob, SampleApp1ClickContext } from '../../triggers';
+import { EmbeddableRoot } from '../../../../../../src/plugins/embeddable/public';
+import { ButtonEmbeddable } from '../../embeddables/button_embeddable';
+import { useUiActions } from '../../context';
+import { VALUE_CLICK_TRIGGER } from '../../../../../../src/plugins/ui_actions/public';
+
+export const job: SampleMlJob = {
+  job_id: '123',
+  job_type: 'anomaly_detector',
+  description: 'This is some ML job.',
+};
+
+export const context: SampleApp1ClickContext = { job };
+
+export const DrilldownsWithEmbeddableExample: React.FC = () => {
+  const { plugins, managerWithEmbeddable } = useUiActions();
+  const embeddable = React.useMemo(
+    () =>
+      new ButtonEmbeddable(
+        { id: 'DrilldownsWithEmbeddableExample' },
+        { uiActions: plugins.uiActionsEnhanced }
+      ),
+    [plugins.uiActionsEnhanced]
+  );
+  const [showManager, setShowManager] = React.useState(false);
+  const [openPopup, setOpenPopup] = React.useState(false);
+  const viewRef = React.useRef<'create' | 'manage'>('create');
+
+  const panels: EuiContextMenuPanelDescriptor[] = [
+    {
+      id: 0,
+      items: [
+        {
+          name: 'Create new view',
+          icon: 'plusInCircle',
+          onClick: () => {
+            setOpenPopup(false);
+            viewRef.current = 'create';
+            setShowManager((x) => !x);
+          },
+        },
+        {
+          name: 'Drilldown list view',
+          icon: 'list',
+          onClick: () => {
+            setOpenPopup(false);
+            viewRef.current = 'manage';
+            setShowManager((x) => !x);
+          },
+        },
+      ],
+    },
+  ];
+
+  const openManagerButton = showManager ? (
+    <EuiButton onClick={() => setShowManager(false)}>Close</EuiButton>
+  ) : (
+    <EuiPopover
+      id="contextMenuExample"
+      button={
+        <EuiButton
+          fill={!showManager}
+          iconType="arrowDown"
+          iconSide="right"
+          onClick={() => setOpenPopup((x) => !x)}
+        >
+          Open Drilldown Manager
+        </EuiButton>
+      }
+      isOpen={openPopup}
+      closePopover={() => setOpenPopup(false)}
+      panelPaddingSize="none"
+      withTitle
+      anchorPosition="downLeft"
+    >
+      <EuiContextMenu initialPanelId={0} panels={panels} />
+    </EuiPopover>
+  );
+
+  return (
+    <>
+      <EuiText>
+        <h3>With embeddable example</h3>
+        <p>
+          This example shows how drilldown manager can be added to an embeddable which executes{' '}
+          <EuiCode>VALUE_CLICK_TRIGGER</EuiCode> trigger. Below card is an embeddable which executes
+          <EuiCode>VALUE_CLICK_TRIGGER</EuiCode> when it is clicked on.
+        </p>
+      </EuiText>
+
+      <EuiSpacer />
+
+      <EuiFlexGroup>
+        <EuiFlexItem grow={false}>{openManagerButton}</EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <div style={{ maxWidth: 200 }}>
+            <EmbeddableRoot embeddable={embeddable} />
+          </div>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+
+      {showManager && (
+        <EuiFlyout onClose={() => setShowManager(false)} aria-labelledby="Drilldown Manager">
+          <plugins.uiActionsEnhanced.FlyoutManageDrilldowns
+            onClose={() => setShowManager(false)}
+            viewMode={viewRef.current}
+            dynamicActionManager={managerWithEmbeddable}
+            triggers={[VALUE_CLICK_TRIGGER]}
+            placeContext={{ embeddable }}
+          />
+        </EuiFlyout>
+      )}
+    </>
+  );
+};
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_with_embeddable_example/index.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_with_embeddable_example/index.tsx
new file mode 100644
index 00000000000000..ca2f7b1060f19d
--- /dev/null
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_with_embeddable_example/index.tsx
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './drilldowns_with_embeddable_example';
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_without_embeddable_example/drilldowns_without_embeddable_example.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_without_embeddable_example/drilldowns_without_embeddable_example.tsx
new file mode 100644
index 00000000000000..fb22e98e4a6d9b
--- /dev/null
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_without_embeddable_example/drilldowns_without_embeddable_example.tsx
@@ -0,0 +1,129 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import {
+  EuiText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButton,
+  EuiSpacer,
+  EuiFlyout,
+  EuiPopover,
+  EuiContextMenu,
+  EuiContextMenuPanelDescriptor,
+} from '@elastic/eui';
+import { useUiActions } from '../../context';
+import { SAMPLE_APP1_CLICK_TRIGGER, SampleMlJob, SampleApp1ClickContext } from '../../triggers';
+
+export const job: SampleMlJob = {
+  job_id: '123',
+  job_type: 'anomaly_detector',
+  description: 'This is some ML job.',
+};
+
+export const context: SampleApp1ClickContext = { job };
+
+export const DrilldownsWithoutEmbeddableExample: React.FC = () => {
+  const { plugins, managerWithoutEmbeddable } = useUiActions();
+  const [showManager, setShowManager] = React.useState(false);
+  const [openPopup, setOpenPopup] = React.useState(false);
+  const viewRef = React.useRef<'create' | 'manage'>('create');
+
+  const panels: EuiContextMenuPanelDescriptor[] = [
+    {
+      id: 0,
+      items: [
+        {
+          name: 'Create new view',
+          icon: 'plusInCircle',
+          onClick: () => {
+            setOpenPopup(false);
+            viewRef.current = 'create';
+            setShowManager((x) => !x);
+          },
+        },
+        {
+          name: 'Drilldown list view',
+          icon: 'list',
+          onClick: () => {
+            setOpenPopup(false);
+            viewRef.current = 'manage';
+            setShowManager((x) => !x);
+          },
+        },
+      ],
+    },
+  ];
+
+  const openManagerButton = showManager ? (
+    <EuiButton onClick={() => setShowManager(false)}>Close</EuiButton>
+  ) : (
+    <EuiPopover
+      id="contextMenuExample"
+      button={
+        <EuiButton
+          fill={!showManager}
+          iconType="arrowDown"
+          iconSide="right"
+          onClick={() => setOpenPopup((x) => !x)}
+        >
+          Open Drilldown Manager
+        </EuiButton>
+      }
+      isOpen={openPopup}
+      closePopover={() => setOpenPopup(false)}
+      panelPaddingSize="none"
+      withTitle
+      anchorPosition="downLeft"
+    >
+      <EuiContextMenu initialPanelId={0} panels={panels} />
+    </EuiPopover>
+  );
+
+  return (
+    <>
+      <EuiText>
+        <h3>Without embeddable example (app 1)</h3>
+        <p>
+          <em>Drilldown Manager</em> can be integrated into any app in Kibana. This example shows
+          that drilldown manager can be used in an app which does not use embeddables and executes
+          its custom UI Actions triggers.
+        </p>
+      </EuiText>
+
+      <EuiSpacer />
+
+      <EuiFlexGroup>
+        <EuiFlexItem grow={false}>{openManagerButton}</EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            color="secondary"
+            fill
+            iconType="play"
+            iconSide="left"
+            onClick={() =>
+              plugins.uiActionsEnhanced.executeTriggerActions(SAMPLE_APP1_CLICK_TRIGGER, context)
+            }
+          >
+            Execute click action
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+
+      {showManager && (
+        <EuiFlyout onClose={() => setShowManager(false)} aria-labelledby="Drilldown Manager">
+          <plugins.uiActionsEnhanced.FlyoutManageDrilldowns
+            onClose={() => setShowManager(false)}
+            viewMode={viewRef.current}
+            dynamicActionManager={managerWithoutEmbeddable}
+            triggers={[SAMPLE_APP1_CLICK_TRIGGER]}
+          />
+        </EuiFlyout>
+      )}
+    </>
+  );
+};
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_without_embeddable_example/index.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_without_embeddable_example/index.tsx
new file mode 100644
index 00000000000000..0dee7cf367b04c
--- /dev/null
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_without_embeddable_example/index.tsx
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './drilldowns_without_embeddable_example';
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_without_embeddable_single_button_example/drilldowns_without_embeddable_single_button_example.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_without_embeddable_single_button_example/drilldowns_without_embeddable_single_button_example.tsx
new file mode 100644
index 00000000000000..58d382fdc2a762
--- /dev/null
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_without_embeddable_single_button_example/drilldowns_without_embeddable_single_button_example.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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiText, EuiFlexGroup, EuiFlexItem, EuiButton, EuiSpacer, EuiFlyout } from '@elastic/eui';
+import { useUiActions } from '../../context';
+import { sampleApp2ClickContext, SAMPLE_APP2_CLICK_TRIGGER } from '../../triggers';
+
+export const DrilldownsWithoutEmbeddableSingleButtonExample: React.FC = () => {
+  const { plugins, managerWithoutEmbeddableSingleButton } = useUiActions();
+  const [showManager, setShowManager] = React.useState(false);
+  const viewRef = React.useRef<'create' | 'manage'>('create');
+
+  return (
+    <>
+      <EuiText>
+        <h3>Without embeddable example, single button (app 2)</h3>
+        <p>
+          This example is the same as <em>Without embeddable example</em> but it shows that
+          drilldown manager actions and user created drilldowns can be combined in one menu, this is
+          useful, for example, for Canvas where clicking on a Canvas element would show the combined
+          menu of drilldown manager actions and drilldown actions.
+        </p>
+      </EuiText>
+
+      <EuiSpacer />
+
+      <EuiFlexGroup>
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            color="secondary"
+            fill
+            iconType="play"
+            iconSide="left"
+            onClick={() =>
+              plugins.uiActionsEnhanced.executeTriggerActions(
+                SAMPLE_APP2_CLICK_TRIGGER,
+                sampleApp2ClickContext
+              )
+            }
+          >
+            Click this element
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+
+      {showManager && (
+        <EuiFlyout onClose={() => setShowManager(false)} aria-labelledby="Drilldown Manager">
+          <plugins.uiActionsEnhanced.FlyoutManageDrilldowns
+            onClose={() => setShowManager(false)}
+            viewMode={viewRef.current}
+            dynamicActionManager={managerWithoutEmbeddableSingleButton}
+            triggers={[SAMPLE_APP2_CLICK_TRIGGER]}
+          />
+        </EuiFlyout>
+      )}
+    </>
+  );
+};
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_without_embeddable_single_button_example/index.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_without_embeddable_single_button_example/index.tsx
new file mode 100644
index 00000000000000..74766309dc7236
--- /dev/null
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_without_embeddable_single_button_example/index.tsx
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './drilldowns_without_embeddable_single_button_example';
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/context/context.ts b/x-pack/examples/ui_actions_enhanced_examples/public/context/context.ts
new file mode 100644
index 00000000000000..2edb29eb5b28ae
--- /dev/null
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/context/context.ts
@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { createContext, useContext } from 'react';
+import { CoreStart } from 'src/core/public';
+import { UiActionsEnhancedDynamicActionManager } from '../../../../plugins/ui_actions_enhanced/public';
+import { StartDependencies } from '../plugin';
+
+export interface UiActionsExampleAppContextValue {
+  appBasePath: string;
+  core: CoreStart;
+  plugins: StartDependencies;
+  managerWithoutEmbeddable: UiActionsEnhancedDynamicActionManager;
+  managerWithoutEmbeddableSingleButton: UiActionsEnhancedDynamicActionManager;
+  managerWithEmbeddable: UiActionsEnhancedDynamicActionManager;
+}
+
+export const context = createContext<UiActionsExampleAppContextValue | null>(null);
+export const useUiActions = () => useContext(context)!;
diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/index.ts b/x-pack/examples/ui_actions_enhanced_examples/public/context/index.ts
similarity index 77%
rename from x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/index.ts
rename to x-pack/examples/ui_actions_enhanced_examples/public/context/index.ts
index c34290528d914b..94b69770505355 100644
--- a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/index.ts
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/context/index.ts
@@ -4,4 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { CollectConfigContainer } from './collect_config_container';
+export * from './context';
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app1_hello_world_drilldown/app1_hello_world_drilldown.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app1_hello_world_drilldown/app1_hello_world_drilldown.tsx
new file mode 100644
index 00000000000000..25de2f5953f31b
--- /dev/null
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app1_hello_world_drilldown/app1_hello_world_drilldown.tsx
@@ -0,0 +1,66 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiFieldText, EuiFormRow } from '@elastic/eui';
+import { reactToUiComponent } from '../../../../../../src/plugins/kibana_react/public';
+import { UiActionsEnhancedDrilldownDefinition as Drilldown } from '../../../../../plugins/ui_actions_enhanced/public';
+import { CollectConfigProps as CollectConfigPropsBase } from '../../../../../../src/plugins/kibana_utils/public';
+import { SAMPLE_APP1_CLICK_TRIGGER, SampleApp1ClickContext } from '../../triggers';
+import { SerializableState } from '../../../../../../src/plugins/kibana_utils/common';
+
+export interface Config extends SerializableState {
+  name: string;
+}
+
+type Trigger = typeof SAMPLE_APP1_CLICK_TRIGGER;
+type Context = SampleApp1ClickContext;
+
+export type CollectConfigProps = CollectConfigPropsBase<Config, { triggers: Trigger[] }>;
+
+export const APP1_HELLO_WORLD_DRILLDOWN = 'APP1_HELLO_WORLD_DRILLDOWN';
+
+export class App1HelloWorldDrilldown implements Drilldown<Config, Trigger> {
+  public readonly id = APP1_HELLO_WORLD_DRILLDOWN;
+
+  public readonly order = 8;
+
+  public readonly getDisplayName = () => 'Hello world (app 1)';
+
+  public readonly euiIcon = 'cheer';
+
+  supportedTriggers(): Trigger[] {
+    return [SAMPLE_APP1_CLICK_TRIGGER];
+  }
+
+  private readonly ReactCollectConfig: React.FC<CollectConfigProps> = ({
+    config,
+    onConfig,
+    context,
+  }) => (
+    <EuiFormRow label="Enter your name" fullWidth>
+      <EuiFieldText
+        fullWidth
+        value={config.name}
+        onChange={(event) => onConfig({ ...config, name: event.target.value })}
+      />
+    </EuiFormRow>
+  );
+
+  public readonly CollectConfig = reactToUiComponent(this.ReactCollectConfig);
+
+  public readonly createConfig = () => ({
+    name: '',
+  });
+
+  public readonly isConfigValid = (config: Config): config is Config => {
+    return !!config.name;
+  };
+
+  public readonly execute = async (config: Config, context: Context) => {
+    alert(`Hello, ${config.name}`);
+  };
+}
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app1_hello_world_drilldown/index.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app1_hello_world_drilldown/index.tsx
new file mode 100644
index 00000000000000..a92ba24d3f3452
--- /dev/null
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app1_hello_world_drilldown/index.tsx
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './app1_hello_world_drilldown';
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app1_to_dashboard_drilldown/app1_to_dashboard_drilldown.ts b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app1_to_dashboard_drilldown/app1_to_dashboard_drilldown.ts
new file mode 100644
index 00000000000000..058b52c78b4270
--- /dev/null
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app1_to_dashboard_drilldown/app1_to_dashboard_drilldown.ts
@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import {
+  DashboardEnhancedAbstractDashboardDrilldown as AbstractDashboardDrilldown,
+  DashboardEnhancedAbstractDashboardDrilldownConfig as Config,
+} from '../../../../../plugins/dashboard_enhanced/public';
+import { SAMPLE_APP1_CLICK_TRIGGER, SampleApp1ClickContext } from '../../triggers';
+import { KibanaURL } from '../../../../../../src/plugins/share/public';
+
+export const APP1_TO_DASHBOARD_DRILLDOWN = 'APP1_TO_DASHBOARD_DRILLDOWN';
+
+type Trigger = typeof SAMPLE_APP1_CLICK_TRIGGER;
+type Context = SampleApp1ClickContext;
+
+export class App1ToDashboardDrilldown extends AbstractDashboardDrilldown<Trigger> {
+  public readonly id = APP1_TO_DASHBOARD_DRILLDOWN;
+
+  public readonly supportedTriggers = () => [SAMPLE_APP1_CLICK_TRIGGER] as Trigger[];
+
+  protected async getURL(config: Config, context: Context): Promise<KibanaURL> {
+    const path = await this.urlGenerator.createUrl({
+      dashboardId: config.dashboardId,
+    });
+    const url = new KibanaURL(path);
+
+    return url;
+  }
+}
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app1_to_dashboard_drilldown/index.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app1_to_dashboard_drilldown/index.tsx
new file mode 100644
index 00000000000000..4c0c2c221496aa
--- /dev/null
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app1_to_dashboard_drilldown/index.tsx
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './app1_to_dashboard_drilldown';
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app2_to_dashboard_drilldown/app2_to_dashboard_drilldown.ts b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app2_to_dashboard_drilldown/app2_to_dashboard_drilldown.ts
new file mode 100644
index 00000000000000..33bf54d4b4cc20
--- /dev/null
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app2_to_dashboard_drilldown/app2_to_dashboard_drilldown.ts
@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import {
+  DashboardEnhancedAbstractDashboardDrilldown as AbstractDashboardDrilldown,
+  DashboardEnhancedAbstractDashboardDrilldownConfig as Config,
+} from '../../../../../plugins/dashboard_enhanced/public';
+import { SAMPLE_APP2_CLICK_TRIGGER, SampleApp2ClickContext } from '../../triggers';
+import { KibanaURL } from '../../../../../../src/plugins/share/public';
+
+export const APP2_TO_DASHBOARD_DRILLDOWN = 'APP2_TO_DASHBOARD_DRILLDOWN';
+
+type Trigger = typeof SAMPLE_APP2_CLICK_TRIGGER;
+type Context = SampleApp2ClickContext;
+
+export class App2ToDashboardDrilldown extends AbstractDashboardDrilldown<Trigger> {
+  public readonly id = APP2_TO_DASHBOARD_DRILLDOWN;
+
+  public readonly supportedTriggers = () => [SAMPLE_APP2_CLICK_TRIGGER] as Trigger[];
+
+  protected async getURL(config: Config, context: Context): Promise<KibanaURL> {
+    const path = await this.urlGenerator.createUrl({
+      dashboardId: config.dashboardId,
+    });
+    const url = new KibanaURL(path);
+
+    return url;
+  }
+}
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app2_to_dashboard_drilldown/index.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app2_to_dashboard_drilldown/index.tsx
new file mode 100644
index 00000000000000..ef09061115f439
--- /dev/null
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/app2_to_dashboard_drilldown/index.tsx
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './app2_to_dashboard_drilldown';
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_hello_world_drilldown/README.md b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_hello_world_drilldown/README.md
similarity index 100%
rename from x-pack/examples/ui_actions_enhanced_examples/public/dashboard_hello_world_drilldown/README.md
rename to x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_hello_world_drilldown/README.md
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_hello_world_drilldown/index.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_hello_world_drilldown/index.tsx
similarity index 83%
rename from x-pack/examples/ui_actions_enhanced_examples/public/dashboard_hello_world_drilldown/index.tsx
rename to x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_hello_world_drilldown/index.tsx
index cac5f0b29dc6ec..a7324f55301307 100644
--- a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_hello_world_drilldown/index.tsx
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_hello_world_drilldown/index.tsx
@@ -6,14 +6,14 @@
 
 import React from 'react';
 import { EuiFormRow, EuiFieldText } from '@elastic/eui';
-import { reactToUiComponent } from '../../../../../src/plugins/kibana_react/public';
-import { UiActionsEnhancedDrilldownDefinition as Drilldown } from '../../../../plugins/ui_actions_enhanced/public';
-import { ChartActionContext } from '../../../../../src/plugins/embeddable/public';
-import { CollectConfigProps } from '../../../../../src/plugins/kibana_utils/public';
+import { reactToUiComponent } from '../../../../../../src/plugins/kibana_react/public';
+import { UiActionsEnhancedDrilldownDefinition as Drilldown } from '../../../../../plugins/ui_actions_enhanced/public';
+import { ChartActionContext } from '../../../../../../src/plugins/embeddable/public';
+import { CollectConfigProps } from '../../../../../../src/plugins/kibana_utils/public';
 import {
   SELECT_RANGE_TRIGGER,
   VALUE_CLICK_TRIGGER,
-} from '../../../../../src/plugins/ui_actions/public';
+} from '../../../../../../src/plugins/ui_actions/public';
 
 export type ActionContext = ChartActionContext;
 
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_hello_world_only_range_select_drilldown/README.md b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_hello_world_only_range_select_drilldown/README.md
similarity index 100%
rename from x-pack/examples/ui_actions_enhanced_examples/public/dashboard_hello_world_only_range_select_drilldown/README.md
rename to x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_hello_world_only_range_select_drilldown/README.md
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_hello_world_only_range_select_drilldown/index.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_hello_world_only_range_select_drilldown/index.tsx
similarity index 81%
rename from x-pack/examples/ui_actions_enhanced_examples/public/dashboard_hello_world_only_range_select_drilldown/index.tsx
rename to x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_hello_world_only_range_select_drilldown/index.tsx
index fa2f0825f93357..24385bd6baa42f 100644
--- a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_hello_world_only_range_select_drilldown/index.tsx
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_hello_world_only_range_select_drilldown/index.tsx
@@ -6,12 +6,12 @@
 
 import React from 'react';
 import { EuiFormRow, EuiFieldText } from '@elastic/eui';
-import { reactToUiComponent } from '../../../../../src/plugins/kibana_react/public';
-import { UiActionsEnhancedDrilldownDefinition as Drilldown } from '../../../../plugins/ui_actions_enhanced/public';
-import { RangeSelectContext } from '../../../../../src/plugins/embeddable/public';
-import { CollectConfigProps } from '../../../../../src/plugins/kibana_utils/public';
-import { SELECT_RANGE_TRIGGER } from '../../../../../src/plugins/ui_actions/public';
-import { BaseActionFactoryContext } from '../../../../plugins/ui_actions_enhanced/public/dynamic_actions';
+import { reactToUiComponent } from '../../../../../../src/plugins/kibana_react/public';
+import { UiActionsEnhancedDrilldownDefinition as Drilldown } from '../../../../../plugins/ui_actions_enhanced/public';
+import { RangeSelectContext } from '../../../../../../src/plugins/embeddable/public';
+import { CollectConfigProps } from '../../../../../../src/plugins/kibana_utils/public';
+import { SELECT_RANGE_TRIGGER } from '../../../../../../src/plugins/ui_actions/public';
+import { BaseActionFactoryContext } from '../../../../../plugins/ui_actions_enhanced/public/dynamic_actions';
 
 export type Config = {
   name: string;
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/collect_config_container.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/collect_config_container.tsx
similarity index 100%
rename from x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/collect_config_container.tsx
rename to x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/collect_config_container.tsx
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/components/discover_drilldown_config/discover_drilldown_config.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/components/discover_drilldown_config/discover_drilldown_config.tsx
similarity index 100%
rename from x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/components/discover_drilldown_config/discover_drilldown_config.tsx
rename to x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/components/discover_drilldown_config/discover_drilldown_config.tsx
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/components/discover_drilldown_config/i18n.ts b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/components/discover_drilldown_config/i18n.ts
similarity index 100%
rename from x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/components/discover_drilldown_config/i18n.ts
rename to x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/components/discover_drilldown_config/i18n.ts
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/components/discover_drilldown_config/index.ts b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/components/discover_drilldown_config/index.ts
similarity index 100%
rename from x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/components/discover_drilldown_config/index.ts
rename to x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/components/discover_drilldown_config/index.ts
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/components/index.ts b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/components/index.ts
similarity index 100%
rename from x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/components/index.ts
rename to x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/components/index.ts
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/constants.ts b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/constants.ts
similarity index 100%
rename from x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/constants.ts
rename to x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/constants.ts
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/drilldown.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/drilldown.tsx
similarity index 88%
rename from x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/drilldown.tsx
rename to x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/drilldown.tsx
index ba8d7f395e738c..9cda534a340d66 100644
--- a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/drilldown.tsx
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/drilldown.tsx
@@ -5,15 +5,15 @@
  */
 
 import React from 'react';
-import { StartDependencies as Start } from '../plugin';
-import { reactToUiComponent } from '../../../../../src/plugins/kibana_react/public';
-import { StartServicesGetter } from '../../../../../src/plugins/kibana_utils/public';
+import { StartDependencies as Start } from '../../plugin';
+import { reactToUiComponent } from '../../../../../../src/plugins/kibana_react/public';
+import { StartServicesGetter } from '../../../../../../src/plugins/kibana_utils/public';
 import { ActionContext, Config, CollectConfigProps } from './types';
 import { CollectConfigContainer } from './collect_config_container';
 import { SAMPLE_DASHBOARD_TO_DISCOVER_DRILLDOWN } from './constants';
-import { UiActionsEnhancedDrilldownDefinition as Drilldown } from '../../../../plugins/ui_actions_enhanced/public';
+import { UiActionsEnhancedDrilldownDefinition as Drilldown } from '../../../../../plugins/ui_actions_enhanced/public';
 import { txtGoToDiscover } from './i18n';
-import { APPLY_FILTER_TRIGGER } from '../../../../../src/plugins/ui_actions/public';
+import { APPLY_FILTER_TRIGGER } from '../../../../../../src/plugins/ui_actions/public';
 
 const isOutputWithIndexPatterns = (
   output: unknown
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/i18n.ts b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/i18n.ts
similarity index 100%
rename from x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/i18n.ts
rename to x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/i18n.ts
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/index.ts b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/index.ts
similarity index 100%
rename from x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/index.ts
rename to x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/index.ts
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/types.ts b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/types.ts
similarity index 87%
rename from x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/types.ts
rename to x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/types.ts
index 692de571e8a00c..f0497780430d4a 100644
--- a/x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_discover_drilldown/types.ts
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/drilldowns/dashboard_to_discover_drilldown/types.ts
@@ -4,8 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { CollectConfigProps as CollectConfigPropsBase } from '../../../../../src/plugins/kibana_utils/public';
-import { ApplyGlobalFilterActionContext } from '../../../../../src/plugins/data/public';
+import { CollectConfigProps as CollectConfigPropsBase } from '../../../../../../src/plugins/kibana_utils/public';
+import { ApplyGlobalFilterActionContext } from '../../../../../../src/plugins/data/public';
 
 export type ActionContext = ApplyGlobalFilterActionContext;
 
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/embeddables/button_embeddable/button_embeddable.ts b/x-pack/examples/ui_actions_enhanced_examples/public/embeddables/button_embeddable/button_embeddable.ts
new file mode 100644
index 00000000000000..fcd0c9b94c988c
--- /dev/null
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/embeddables/button_embeddable/button_embeddable.ts
@@ -0,0 +1,53 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { createElement } from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import { AdvancedUiActionsStart } from '../../../../../plugins/ui_actions_enhanced/public';
+import { Embeddable, EmbeddableInput } from '../../../../../../src/plugins/embeddable/public';
+import { ButtonEmbeddableComponent } from './button_embeddable_component';
+import { VALUE_CLICK_TRIGGER } from '../../../../../../src/plugins/ui_actions/public';
+
+export const BUTTON_EMBEDDABLE = 'BUTTON_EMBEDDABLE';
+
+export interface ButtonEmbeddableParams {
+  uiActions: AdvancedUiActionsStart;
+}
+
+export class ButtonEmbeddable extends Embeddable {
+  type = BUTTON_EMBEDDABLE;
+
+  constructor(input: EmbeddableInput, private readonly params: ButtonEmbeddableParams) {
+    super(input, {});
+  }
+
+  reload() {}
+
+  private el?: HTMLElement;
+
+  public render(el: HTMLElement): void {
+    super.render(el);
+    this.el = el;
+    render(
+      createElement(ButtonEmbeddableComponent, {
+        onClick: () => {
+          this.params.uiActions.getTrigger(VALUE_CLICK_TRIGGER).exec({
+            embeddable: this,
+            data: {
+              data: [],
+            },
+          });
+        },
+      }),
+      el
+    );
+  }
+
+  public destroy() {
+    super.destroy();
+    if (this.el) unmountComponentAtNode(this.el);
+  }
+}
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/embeddables/button_embeddable/button_embeddable_component.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/embeddables/button_embeddable/button_embeddable_component.tsx
new file mode 100644
index 00000000000000..d810870de467b3
--- /dev/null
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/embeddables/button_embeddable/button_embeddable_component.tsx
@@ -0,0 +1,27 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import * as React from 'react';
+import { EuiCard, EuiFlexItem, EuiIcon } from '@elastic/eui';
+
+export interface ButtonEmbeddableComponentProps {
+  onClick: () => void;
+}
+
+export const ButtonEmbeddableComponent: React.FC<ButtonEmbeddableComponentProps> = ({
+  onClick,
+}) => {
+  return (
+    <EuiFlexItem>
+      <EuiCard
+        icon={<EuiIcon size="xxl" type={`logoKibana`} />}
+        title={`Click me!`}
+        description={'This embeddable fires "VALUE_CLICK" trigger on click'}
+        onClick={onClick}
+      />
+    </EuiFlexItem>
+  );
+};
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/embeddables/button_embeddable/index.ts b/x-pack/examples/ui_actions_enhanced_examples/public/embeddables/button_embeddable/index.ts
new file mode 100644
index 00000000000000..e3bfc9c7da4256
--- /dev/null
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/embeddables/button_embeddable/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './button_embeddable';
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/mount.tsx b/x-pack/examples/ui_actions_enhanced_examples/public/mount.tsx
new file mode 100644
index 00000000000000..b2909c636b5289
--- /dev/null
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/mount.tsx
@@ -0,0 +1,38 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import * as React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import { CoreSetup, AppMountParameters } from 'kibana/public';
+import { StartDependencies, UiActionsEnhancedExamplesStart } from './plugin';
+import { UiActionsExampleAppContextValue, context } from './context';
+
+export const mount = (
+  coreSetup: CoreSetup<StartDependencies, UiActionsEnhancedExamplesStart>
+) => async ({ appBasePath, element }: AppMountParameters) => {
+  const [
+    core,
+    plugins,
+    { managerWithoutEmbeddable, managerWithoutEmbeddableSingleButton, managerWithEmbeddable },
+  ] = await coreSetup.getStartServices();
+  const { App } = await import('./containers/app');
+
+  const deps: UiActionsExampleAppContextValue = {
+    appBasePath,
+    core,
+    plugins,
+    managerWithoutEmbeddable,
+    managerWithoutEmbeddableSingleButton,
+    managerWithEmbeddable,
+  };
+  const reactElement = (
+    <context.Provider value={deps}>
+      <App />
+    </context.Provider>
+  );
+  render(reactElement, element);
+  return () => unmountComponentAtNode(element);
+};
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/plugin.ts b/x-pack/examples/ui_actions_enhanced_examples/public/plugin.ts
index 3f0b64a2ac9ed8..c09f64f7b110b3 100644
--- a/x-pack/examples/ui_actions_enhanced_examples/public/plugin.ts
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/plugin.ts
@@ -4,44 +4,174 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Plugin, CoreSetup, CoreStart } from '../../../../src/core/public';
+import { createElement as h } from 'react';
+import { toMountPoint } from '../../../../src/plugins/kibana_react/public';
+import { Plugin, CoreSetup, CoreStart, AppNavLinkStatus } from '../../../../src/core/public';
 import { DataPublicPluginSetup, DataPublicPluginStart } from '../../../../src/plugins/data/public';
 import {
   AdvancedUiActionsSetup,
   AdvancedUiActionsStart,
 } from '../../../../x-pack/plugins/ui_actions_enhanced/public';
-import { DashboardHelloWorldDrilldown } from './dashboard_hello_world_drilldown';
-import { DashboardToDiscoverDrilldown } from './dashboard_to_discover_drilldown';
+import { DashboardHelloWorldDrilldown } from './drilldowns/dashboard_hello_world_drilldown';
+import { DashboardToDiscoverDrilldown } from './drilldowns/dashboard_to_discover_drilldown';
+import { App1ToDashboardDrilldown } from './drilldowns/app1_to_dashboard_drilldown';
+import { App1HelloWorldDrilldown } from './drilldowns/app1_hello_world_drilldown';
 import { createStartServicesGetter } from '../../../../src/plugins/kibana_utils/public';
 import { DiscoverSetup, DiscoverStart } from '../../../../src/plugins/discover/public';
-import { DashboardHelloWorldOnlyRangeSelectDrilldown } from './dashboard_hello_world_only_range_select_drilldown';
+import { DashboardSetup, DashboardStart } from '../../../../src/plugins/dashboard/public';
+import { DashboardHelloWorldOnlyRangeSelectDrilldown } from './drilldowns/dashboard_hello_world_only_range_select_drilldown';
+import { DeveloperExamplesSetup } from '../../../../examples/developer_examples/public';
+import {
+  sampleApp1ClickTrigger,
+  sampleApp2ClickTrigger,
+  SAMPLE_APP2_CLICK_TRIGGER,
+  SampleApp2ClickContext,
+  sampleApp2ClickContext,
+} from './triggers';
+import { mount } from './mount';
+import {
+  UiActionsEnhancedMemoryActionStorage,
+  UiActionsEnhancedDynamicActionManager,
+} from '../../../plugins/ui_actions_enhanced/public';
+import { App2ToDashboardDrilldown } from './drilldowns/app2_to_dashboard_drilldown';
 
 export interface SetupDependencies {
+  dashboard: DashboardSetup;
   data: DataPublicPluginSetup;
+  developerExamples: DeveloperExamplesSetup;
   discover: DiscoverSetup;
   uiActionsEnhanced: AdvancedUiActionsSetup;
 }
 
 export interface StartDependencies {
+  dashboard: DashboardStart;
   data: DataPublicPluginStart;
   discover: DiscoverStart;
   uiActionsEnhanced: AdvancedUiActionsStart;
 }
 
+export interface UiActionsEnhancedExamplesStart {
+  managerWithoutEmbeddable: UiActionsEnhancedDynamicActionManager;
+  managerWithoutEmbeddableSingleButton: UiActionsEnhancedDynamicActionManager;
+  managerWithEmbeddable: UiActionsEnhancedDynamicActionManager;
+}
+
 export class UiActionsEnhancedExamplesPlugin
-  implements Plugin<void, void, SetupDependencies, StartDependencies> {
+  implements Plugin<void, UiActionsEnhancedExamplesStart, SetupDependencies, StartDependencies> {
   public setup(
-    core: CoreSetup<StartDependencies>,
-    { uiActionsEnhanced: uiActions }: SetupDependencies
+    core: CoreSetup<StartDependencies, UiActionsEnhancedExamplesStart>,
+    { uiActionsEnhanced: uiActions, developerExamples }: SetupDependencies
   ) {
     const start = createStartServicesGetter(core.getStartServices);
 
     uiActions.registerDrilldown(new DashboardHelloWorldDrilldown());
     uiActions.registerDrilldown(new DashboardHelloWorldOnlyRangeSelectDrilldown());
     uiActions.registerDrilldown(new DashboardToDiscoverDrilldown({ start }));
+    uiActions.registerDrilldown(new App1HelloWorldDrilldown());
+    uiActions.registerDrilldown(new App1ToDashboardDrilldown({ start }));
+    uiActions.registerDrilldown(new App2ToDashboardDrilldown({ start }));
+
+    uiActions.registerTrigger(sampleApp1ClickTrigger);
+    uiActions.registerTrigger(sampleApp2ClickTrigger);
+
+    uiActions.addTriggerAction(SAMPLE_APP2_CLICK_TRIGGER, {
+      id: 'SINGLE_ELEMENT_EXAMPLE_OPEN_FLYOUT_AT_CREATE',
+      order: 2,
+      getDisplayName: () => 'Add drilldown',
+      getIconType: () => 'plusInCircle',
+      isCompatible: async ({ workpadId, elementId }: SampleApp2ClickContext) =>
+        workpadId === '123' && elementId === '456',
+      execute: async () => {
+        const { core: coreStart, plugins: pluginsStart, self } = start();
+        const handle = coreStart.overlays.openFlyout(
+          toMountPoint(
+            h(pluginsStart.uiActionsEnhanced.FlyoutManageDrilldowns, {
+              onClose: () => handle.close(),
+              viewMode: 'create',
+              dynamicActionManager: self.managerWithoutEmbeddableSingleButton,
+              triggers: [SAMPLE_APP2_CLICK_TRIGGER],
+              placeContext: {},
+            })
+          ),
+          {
+            ownFocus: true,
+          }
+        );
+      },
+    });
+    uiActions.addTriggerAction(SAMPLE_APP2_CLICK_TRIGGER, {
+      id: 'SINGLE_ELEMENT_EXAMPLE_OPEN_FLYOUT_AT_MANAGE',
+      order: 1,
+      getDisplayName: () => 'Manage drilldowns',
+      getIconType: () => 'list',
+      isCompatible: async ({ workpadId, elementId }: SampleApp2ClickContext) =>
+        workpadId === '123' && elementId === '456',
+      execute: async () => {
+        const { core: coreStart, plugins: pluginsStart, self } = start();
+        const handle = coreStart.overlays.openFlyout(
+          toMountPoint(
+            h(pluginsStart.uiActionsEnhanced.FlyoutManageDrilldowns, {
+              onClose: () => handle.close(),
+              viewMode: 'manage',
+              dynamicActionManager: self.managerWithoutEmbeddableSingleButton,
+              triggers: [SAMPLE_APP2_CLICK_TRIGGER],
+              placeContext: { sampleApp2ClickContext },
+            })
+          ),
+          {
+            ownFocus: true,
+          }
+        );
+      },
+    });
+
+    core.application.register({
+      id: 'ui_actions_enhanced-explorer',
+      title: 'UI Actions Enhanced Explorer',
+      navLinkStatus: AppNavLinkStatus.hidden,
+      mount: mount(core),
+    });
+
+    developerExamples.register({
+      appId: 'ui_actions_enhanced-explorer',
+      title: 'UI Actions Enhanced',
+      description: 'Examples of how to use drilldowns.',
+      links: [
+        {
+          label: 'README',
+          href:
+            'https://github.com/elastic/kibana/tree/master/x-pack/examples/ui_actions_enhanced_examples#ui-actions-enhanced-examples',
+          iconType: 'logoGithub',
+          size: 's',
+          target: '_blank',
+        },
+      ],
+    });
   }
 
-  public start(core: CoreStart, plugins: StartDependencies) {}
+  public start(core: CoreStart, plugins: StartDependencies): UiActionsEnhancedExamplesStart {
+    const managerWithoutEmbeddable = new UiActionsEnhancedDynamicActionManager({
+      storage: new UiActionsEnhancedMemoryActionStorage(),
+      isCompatible: async () => true,
+      uiActions: plugins.uiActionsEnhanced,
+    });
+    const managerWithoutEmbeddableSingleButton = new UiActionsEnhancedDynamicActionManager({
+      storage: new UiActionsEnhancedMemoryActionStorage(),
+      isCompatible: async () => true,
+      uiActions: plugins.uiActionsEnhanced,
+    });
+    const managerWithEmbeddable = new UiActionsEnhancedDynamicActionManager({
+      storage: new UiActionsEnhancedMemoryActionStorage(),
+      isCompatible: async () => true,
+      uiActions: plugins.uiActionsEnhanced,
+    });
+
+    return {
+      managerWithoutEmbeddable,
+      managerWithoutEmbeddableSingleButton,
+      managerWithEmbeddable,
+    };
+  }
 
   public stop() {}
 }
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/triggers/index.ts b/x-pack/examples/ui_actions_enhanced_examples/public/triggers/index.ts
new file mode 100644
index 00000000000000..554cb778934cbd
--- /dev/null
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/triggers/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './sample_app1_trigger';
+export * from './sample_app2_trigger';
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/triggers/sample_app1_trigger.ts b/x-pack/examples/ui_actions_enhanced_examples/public/triggers/sample_app1_trigger.ts
new file mode 100644
index 00000000000000..93a985626c6cd3
--- /dev/null
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/triggers/sample_app1_trigger.ts
@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { Trigger } from '../../../../../src/plugins/ui_actions/public';
+
+export const SAMPLE_APP1_CLICK_TRIGGER = 'SAMPLE_APP1_CLICK_TRIGGER';
+
+export const sampleApp1ClickTrigger: Trigger<'SAMPLE_APP1_CLICK_TRIGGER'> = {
+  id: SAMPLE_APP1_CLICK_TRIGGER,
+  title: 'App 1 trigger fired on click',
+  description: 'Could be a click on a ML job in ML app.',
+};
+
+declare module '../../../../../src/plugins/ui_actions/public' {
+  export interface TriggerContextMapping {
+    [SAMPLE_APP1_CLICK_TRIGGER]: SampleApp1ClickContext;
+  }
+}
+
+export interface SampleApp1ClickContext {
+  job: SampleMlJob;
+}
+
+export interface SampleMlJob {
+  job_id: string;
+  job_type: 'anomaly_detector';
+  description: string;
+}
diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/triggers/sample_app2_trigger.ts b/x-pack/examples/ui_actions_enhanced_examples/public/triggers/sample_app2_trigger.ts
new file mode 100644
index 00000000000000..664c99afc94a59
--- /dev/null
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/triggers/sample_app2_trigger.ts
@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { Trigger } from '../../../../../src/plugins/ui_actions/public';
+
+export const SAMPLE_APP2_CLICK_TRIGGER = 'SAMPLE_APP2_CLICK_TRIGGER';
+
+export const sampleApp2ClickTrigger: Trigger<'SAMPLE_APP2_CLICK_TRIGGER'> = {
+  id: SAMPLE_APP2_CLICK_TRIGGER,
+  title: 'App 2 trigger fired on click',
+  description: 'Could be a click on an element in Canvas app.',
+};
+
+declare module '../../../../../src/plugins/ui_actions/public' {
+  export interface TriggerContextMapping {
+    [SAMPLE_APP2_CLICK_TRIGGER]: SampleApp2ClickContext;
+  }
+}
+
+export interface SampleApp2ClickContext {
+  workpadId: string;
+  elementId: string;
+}
+
+export const sampleApp2ClickContext: SampleApp2ClickContext = {
+  workpadId: '123',
+  elementId: '456',
+};
diff --git a/x-pack/plugins/apm/public/components/alerting/ErrorCountAlertTrigger/index.stories.tsx b/x-pack/plugins/apm/public/components/alerting/ErrorCountAlertTrigger/index.stories.tsx
index c30cef7210a435..1a565ab8708bc5 100644
--- a/x-pack/plugins/apm/public/components/alerting/ErrorCountAlertTrigger/index.stories.tsx
+++ b/x-pack/plugins/apm/public/components/alerting/ErrorCountAlertTrigger/index.stories.tsx
@@ -4,8 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { storiesOf } from '@storybook/react';
 import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
 import { ErrorCountAlertTrigger } from '.';
 import { ApmPluginContextValue } from '../../../context/ApmPluginContext';
 import {
@@ -13,32 +13,35 @@ import {
   MockApmPluginContextWrapper,
 } from '../../../context/ApmPluginContext/MockApmPluginContext';
 
-storiesOf('app/ErrorCountAlertTrigger', module).add(
-  'example',
-  () => {
-    const params = {
-      threshold: 2,
-      window: '5m',
-    };
-
-    return (
+export default {
+  title: 'app/ErrorCountAlertTrigger',
+  component: ErrorCountAlertTrigger,
+  decorators: [
+    (Story: React.ComponentClass) => (
       <MockApmPluginContextWrapper
         value={(mockApmPluginContextValue as unknown) as ApmPluginContextValue}
       >
-        <div style={{ width: 400 }}>
-          <ErrorCountAlertTrigger
-            alertParams={params as any}
-            setAlertParams={() => undefined}
-            setAlertProperty={() => undefined}
-          />
-        </div>
+        <MemoryRouter>
+          <div style={{ width: 400 }}>
+            <Story />
+          </div>
+        </MemoryRouter>
       </MockApmPluginContextWrapper>
-    );
-  },
-  {
-    info: {
-      propTablesExclude: [ErrorCountAlertTrigger, MockApmPluginContextWrapper],
-      source: false,
-    },
-  }
-);
+    ),
+  ],
+};
+
+export function Example() {
+  const params = {
+    threshold: 2,
+    window: '5m',
+  };
+
+  return (
+    <ErrorCountAlertTrigger
+      alertParams={params as any}
+      setAlertParams={() => undefined}
+      setAlertProperty={() => undefined}
+    />
+  );
+}
diff --git a/x-pack/plugins/apm/public/components/alerting/fields.test.tsx b/x-pack/plugins/apm/public/components/alerting/fields.test.tsx
index 7ffb46d3dda492..5af05cedf7fa38 100644
--- a/x-pack/plugins/apm/public/components/alerting/fields.test.tsx
+++ b/x-pack/plugins/apm/public/components/alerting/fields.test.tsx
@@ -9,7 +9,7 @@ import { act, fireEvent, render } from '@testing-library/react';
 import { expectTextsInDocument } from '../../utils/testHelpers';
 
 describe('alerting fields', () => {
-  describe('Service Fiels', () => {
+  describe('Service Field', () => {
     it('renders with value', () => {
       const component = render(<ServiceField value="foo" />);
       expectTextsInDocument(component, ['foo']);
diff --git a/x-pack/plugins/apm/public/components/alerting/fields.tsx b/x-pack/plugins/apm/public/components/alerting/fields.tsx
index aac64649546cc3..858604d2baa2a7 100644
--- a/x-pack/plugins/apm/public/components/alerting/fields.tsx
+++ b/x-pack/plugins/apm/public/components/alerting/fields.tsx
@@ -43,7 +43,7 @@ export function EnvironmentField({
       })}
     >
       <EuiSelect
-        value={currentValue}
+        defaultValue={currentValue}
         options={options}
         onChange={onChange}
         compressed
@@ -75,7 +75,7 @@ export function TransactionTypeField({
     <PopoverExpression value={currentValue} title={label}>
       <EuiSelect
         data-test-subj="transactionTypeField"
-        value={currentValue}
+        defaultValue={currentValue}
         options={options}
         onChange={onChange}
         compressed
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/List.test.tsx b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/List.test.tsx
index a5a38da3d5d886..84b72b62248b0f 100644
--- a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/List.test.tsx
+++ b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/List.test.tsx
@@ -43,7 +43,6 @@ describe('ErrorGroupOverview -> List', () => {
       <MemoryRouter>
         <MockApmPluginContextWrapper>
           <MockUrlParamsContextProvider>
-            {/* @ts-expect-error invalid json props */}
             <ErrorGroupList items={props.items} serviceName="opbeans-python" />
           </MockUrlParamsContextProvider>
         </MockApmPluginContextWrapper>
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap
index 5183432b4ae0ff..f45b4913243ee5 100644
--- a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap
+++ b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap
@@ -454,30 +454,38 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
       Object {
         "culprit": "elasticapm.contrib.django.client.capture",
         "groupId": "a0ce2c8978ef92cdf2ff163ae28576ee",
+        "handled": true,
         "latestOccurrenceAt": "2018-01-10T10:06:37.561Z",
         "message": "About to blow up!",
         "occurrenceCount": 75,
+        "type": "AssertionError",
       },
       Object {
         "culprit": "opbeans.views.oopsie",
         "groupId": "f3ac95493913cc7a3cfec30a19d2120a",
+        "handled": true,
         "latestOccurrenceAt": "2018-01-10T10:06:37.630Z",
         "message": "AssertionError: ",
         "occurrenceCount": 75,
+        "type": "AssertionError",
       },
       Object {
         "culprit": "opbeans.tasks.update_stats",
         "groupId": "e90863d04b7a692435305f09bbe8c840",
+        "handled": true,
         "latestOccurrenceAt": "2018-01-10T10:06:36.859Z",
         "message": "AssertionError: Bad luck!",
         "occurrenceCount": 24,
+        "type": "AssertionError",
       },
       Object {
         "culprit": "opbeans.views.customer",
         "groupId": "8673d8bf7a032e387c101bafbab0d2bc",
+        "handled": true,
         "latestOccurrenceAt": "2018-01-10T10:06:13.211Z",
         "message": "Customer with ID 8517 not found",
         "occurrenceCount": 15,
+        "type": "AssertionError",
       },
     ]
   }
@@ -818,7 +826,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
                   query={
                     Object {
                       "end": "2018-01-10T10:06:41.050Z",
-                      "kuery": "error.exception.type:undefined",
+                      "kuery": "error.exception.type:AssertionError",
                       "page": 0,
                       "serviceName": "opbeans-python",
                       "start": "2018-01-10T09:51:41.050Z",
@@ -826,16 +834,21 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
                     }
                   }
                   serviceName="opbeans-python"
+                  title="AssertionError"
                 >
                   <EuiLink
                     className="c1"
-                    href="/basepath/app/apm/services/opbeans-python/errors?page=0&serviceName=opbeans-python&transactionType=request&start=2018-01-10T09:51:41.050Z&end=2018-01-10T10:06:41.050Z&kuery=error.exception.type:undefined"
+                    href="/basepath/app/apm/services/opbeans-python/errors?page=0&serviceName=opbeans-python&transactionType=request&start=2018-01-10T09:51:41.050Z&end=2018-01-10T10:06:41.050Z&kuery=error.exception.type:AssertionError"
+                    title="AssertionError"
                   >
                     <a
                       className="euiLink euiLink--primary c1"
-                      href="/basepath/app/apm/services/opbeans-python/errors?page=0&serviceName=opbeans-python&transactionType=request&start=2018-01-10T09:51:41.050Z&end=2018-01-10T10:06:41.050Z&kuery=error.exception.type:undefined"
+                      href="/basepath/app/apm/services/opbeans-python/errors?page=0&serviceName=opbeans-python&transactionType=request&start=2018-01-10T09:51:41.050Z&end=2018-01-10T10:06:41.050Z&kuery=error.exception.type:AssertionError"
                       rel="noreferrer"
-                    />
+                      title="AssertionError"
+                    >
+                      AssertionError
+                    </a>
                   </EuiLink>
                 </Styled(ErrorOverviewLink)>
               </div>
@@ -1052,7 +1065,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
                   query={
                     Object {
                       "end": "2018-01-10T10:06:41.050Z",
-                      "kuery": "error.exception.type:undefined",
+                      "kuery": "error.exception.type:AssertionError",
                       "page": 0,
                       "serviceName": "opbeans-python",
                       "start": "2018-01-10T09:51:41.050Z",
@@ -1060,16 +1073,21 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
                     }
                   }
                   serviceName="opbeans-python"
+                  title="AssertionError"
                 >
                   <EuiLink
                     className="c1"
-                    href="/basepath/app/apm/services/opbeans-python/errors?page=0&serviceName=opbeans-python&transactionType=request&start=2018-01-10T09:51:41.050Z&end=2018-01-10T10:06:41.050Z&kuery=error.exception.type:undefined"
+                    href="/basepath/app/apm/services/opbeans-python/errors?page=0&serviceName=opbeans-python&transactionType=request&start=2018-01-10T09:51:41.050Z&end=2018-01-10T10:06:41.050Z&kuery=error.exception.type:AssertionError"
+                    title="AssertionError"
                   >
                     <a
                       className="euiLink euiLink--primary c1"
-                      href="/basepath/app/apm/services/opbeans-python/errors?page=0&serviceName=opbeans-python&transactionType=request&start=2018-01-10T09:51:41.050Z&end=2018-01-10T10:06:41.050Z&kuery=error.exception.type:undefined"
+                      href="/basepath/app/apm/services/opbeans-python/errors?page=0&serviceName=opbeans-python&transactionType=request&start=2018-01-10T09:51:41.050Z&end=2018-01-10T10:06:41.050Z&kuery=error.exception.type:AssertionError"
                       rel="noreferrer"
-                    />
+                      title="AssertionError"
+                    >
+                      AssertionError
+                    </a>
                   </EuiLink>
                 </Styled(ErrorOverviewLink)>
               </div>
@@ -1286,7 +1304,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
                   query={
                     Object {
                       "end": "2018-01-10T10:06:41.050Z",
-                      "kuery": "error.exception.type:undefined",
+                      "kuery": "error.exception.type:AssertionError",
                       "page": 0,
                       "serviceName": "opbeans-python",
                       "start": "2018-01-10T09:51:41.050Z",
@@ -1294,16 +1312,21 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
                     }
                   }
                   serviceName="opbeans-python"
+                  title="AssertionError"
                 >
                   <EuiLink
                     className="c1"
-                    href="/basepath/app/apm/services/opbeans-python/errors?page=0&serviceName=opbeans-python&transactionType=request&start=2018-01-10T09:51:41.050Z&end=2018-01-10T10:06:41.050Z&kuery=error.exception.type:undefined"
+                    href="/basepath/app/apm/services/opbeans-python/errors?page=0&serviceName=opbeans-python&transactionType=request&start=2018-01-10T09:51:41.050Z&end=2018-01-10T10:06:41.050Z&kuery=error.exception.type:AssertionError"
+                    title="AssertionError"
                   >
                     <a
                       className="euiLink euiLink--primary c1"
-                      href="/basepath/app/apm/services/opbeans-python/errors?page=0&serviceName=opbeans-python&transactionType=request&start=2018-01-10T09:51:41.050Z&end=2018-01-10T10:06:41.050Z&kuery=error.exception.type:undefined"
+                      href="/basepath/app/apm/services/opbeans-python/errors?page=0&serviceName=opbeans-python&transactionType=request&start=2018-01-10T09:51:41.050Z&end=2018-01-10T10:06:41.050Z&kuery=error.exception.type:AssertionError"
                       rel="noreferrer"
-                    />
+                      title="AssertionError"
+                    >
+                      AssertionError
+                    </a>
                   </EuiLink>
                 </Styled(ErrorOverviewLink)>
               </div>
@@ -1520,7 +1543,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
                   query={
                     Object {
                       "end": "2018-01-10T10:06:41.050Z",
-                      "kuery": "error.exception.type:undefined",
+                      "kuery": "error.exception.type:AssertionError",
                       "page": 0,
                       "serviceName": "opbeans-python",
                       "start": "2018-01-10T09:51:41.050Z",
@@ -1528,16 +1551,21 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
                     }
                   }
                   serviceName="opbeans-python"
+                  title="AssertionError"
                 >
                   <EuiLink
                     className="c1"
-                    href="/basepath/app/apm/services/opbeans-python/errors?page=0&serviceName=opbeans-python&transactionType=request&start=2018-01-10T09:51:41.050Z&end=2018-01-10T10:06:41.050Z&kuery=error.exception.type:undefined"
+                    href="/basepath/app/apm/services/opbeans-python/errors?page=0&serviceName=opbeans-python&transactionType=request&start=2018-01-10T09:51:41.050Z&end=2018-01-10T10:06:41.050Z&kuery=error.exception.type:AssertionError"
+                    title="AssertionError"
                   >
                     <a
                       className="euiLink euiLink--primary c1"
-                      href="/basepath/app/apm/services/opbeans-python/errors?page=0&serviceName=opbeans-python&transactionType=request&start=2018-01-10T09:51:41.050Z&end=2018-01-10T10:06:41.050Z&kuery=error.exception.type:undefined"
+                      href="/basepath/app/apm/services/opbeans-python/errors?page=0&serviceName=opbeans-python&transactionType=request&start=2018-01-10T09:51:41.050Z&end=2018-01-10T10:06:41.050Z&kuery=error.exception.type:AssertionError"
                       rel="noreferrer"
-                    />
+                      title="AssertionError"
+                    >
+                      AssertionError
+                    </a>
                   </EuiLink>
                 </Styled(ErrorOverviewLink)>
               </div>
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/props.json b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/props.json
index 431a6c71b103bb..ad49cd048aee35 100644
--- a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/props.json
+++ b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/props.json
@@ -2,31 +2,39 @@
   "items": [
     {
       "message": "About to blow up!",
+      "type": "AssertionError",
       "occurrenceCount": 75,
       "culprit": "elasticapm.contrib.django.client.capture",
       "groupId": "a0ce2c8978ef92cdf2ff163ae28576ee",
-      "latestOccurrenceAt": "2018-01-10T10:06:37.561Z"
+      "latestOccurrenceAt": "2018-01-10T10:06:37.561Z",
+      "handled": true
     },
     {
       "message": "AssertionError: ",
+      "type": "AssertionError",
       "occurrenceCount": 75,
       "culprit": "opbeans.views.oopsie",
       "groupId": "f3ac95493913cc7a3cfec30a19d2120a",
-      "latestOccurrenceAt": "2018-01-10T10:06:37.630Z"
+      "latestOccurrenceAt": "2018-01-10T10:06:37.630Z",
+      "handled": true
     },
     {
       "message": "AssertionError: Bad luck!",
+      "type": "AssertionError",
       "occurrenceCount": 24,
       "culprit": "opbeans.tasks.update_stats",
       "groupId": "e90863d04b7a692435305f09bbe8c840",
-      "latestOccurrenceAt": "2018-01-10T10:06:36.859Z"
+      "latestOccurrenceAt": "2018-01-10T10:06:36.859Z",
+      "handled": true
     },
     {
       "message": "Customer with ID 8517 not found",
+      "type": "AssertionError",
       "occurrenceCount": 15,
       "culprit": "opbeans.views.customer",
       "groupId": "8673d8bf7a032e387c101bafbab0d2bc",
-      "latestOccurrenceAt": "2018-01-10T10:06:13.211Z"
+      "latestOccurrenceAt": "2018-01-10T10:06:13.211Z",
+      "handled": true
     }
   ],
   "location": {
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/__stories__/CoreVitals.stories.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/__stories__/CoreVitals.stories.tsx
index a611df00f1e653..6ab75469e2b104 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/__stories__/CoreVitals.stories.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/__stories__/CoreVitals.stories.tsx
@@ -4,90 +4,78 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { storiesOf } from '@storybook/react';
-import React from 'react';
+import React, { ComponentType } from 'react';
+import { IntlProvider } from 'react-intl';
+import { Observable } from 'rxjs';
+import { CoreStart } from 'src/core/public';
+import { createKibanaReactContext } from '../../../../../../../../../src/plugins/kibana_react/public';
 import { EuiThemeProvider } from '../../../../../../../observability/public';
 import { CoreVitalItem } from '../CoreVitalItem';
 import { LCP_LABEL } from '../translations';
 
-storiesOf('app/RumDashboard/WebCoreVitals', module)
-  .addDecorator((storyFn) => <EuiThemeProvider>{storyFn()}</EuiThemeProvider>)
-  .add(
-    'Basic',
-    () => {
-      return (
-        <CoreVitalItem
-          thresholds={{ good: '0.1', bad: '0.25' }}
-          title={LCP_LABEL}
-          value={'0.00s'}
-          loading={false}
-        />
-      );
-    },
-    {
-      info: {
-        propTables: false,
-        source: false,
-      },
-    }
-  )
-  .add(
-    '50% Good',
-    () => {
-      return (
-        <CoreVitalItem
-          thresholds={{ good: '0.1', bad: '0.25' }}
-          title={LCP_LABEL}
-          value={'0.00s'}
-          loading={false}
-          ranks={[50, 25, 25]}
-        />
-      );
-    },
-    {
-      info: {
-        propTables: false,
-        source: false,
-      },
-    }
-  )
-  .add(
-    '100% Bad',
-    () => {
-      return (
-        <CoreVitalItem
-          thresholds={{ good: '0.1', bad: '0.25' }}
-          title={LCP_LABEL}
-          value={'0.00s'}
-          loading={false}
-          ranks={[0, 0, 100]}
-        />
-      );
-    },
-    {
-      info: {
-        propTables: false,
-        source: false,
-      },
-    }
-  )
-  .add(
-    '100% Average',
-    () => {
-      return (
-        <CoreVitalItem
-          thresholds={{ good: '0.1', bad: '0.25' }}
-          title={LCP_LABEL}
-          value={'0.00s'}
-          loading={false}
-          ranks={[0, 100, 0]}
-        />
-      );
-    },
-    {
-      info: {
-        propTables: false,
-        source: false,
-      },
-    }
+const KibanaReactContext = createKibanaReactContext(({
+  uiSettings: { get: () => {}, get$: () => new Observable() },
+} as unknown) as Partial<CoreStart>);
+
+export default {
+  title: 'app/RumDashboard/CoreVitalItem',
+  component: CoreVitalItem,
+  decorators: [
+    (Story: ComponentType) => (
+      <IntlProvider locale="en">
+        <KibanaReactContext.Provider>
+          <EuiThemeProvider>
+            <Story />
+          </EuiThemeProvider>
+        </KibanaReactContext.Provider>
+      </IntlProvider>
+    ),
+  ],
+};
+
+export function Basic() {
+  return (
+    <CoreVitalItem
+      thresholds={{ good: '0.1', bad: '0.25' }}
+      title={LCP_LABEL}
+      value={'0.00s'}
+      loading={false}
+    />
+  );
+}
+
+export function FiftyPercentGood() {
+  return (
+    <CoreVitalItem
+      thresholds={{ good: '0.1', bad: '0.25' }}
+      title={LCP_LABEL}
+      value={'0.00s'}
+      loading={false}
+      ranks={[50, 25, 25]}
+    />
+  );
+}
+
+export function OneHundredPercentBad() {
+  return (
+    <CoreVitalItem
+      thresholds={{ good: '0.1', bad: '0.25' }}
+      title={LCP_LABEL}
+      value={'0.00s'}
+      loading={false}
+      ranks={[0, 0, 100]}
+    />
+  );
+}
+
+export function OneHundredPercentAverage() {
+  return (
+    <CoreVitalItem
+      thresholds={{ good: '0.1', bad: '0.25' }}
+      title={LCP_LABEL}
+      value={'0.00s'}
+      loading={false}
+      ranks={[0, 100, 0]}
+    />
   );
+}
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Popover.stories.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Popover.stories.tsx
index 55a0bddcc78180..70eb5eaf8e576c 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Popover.stories.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Popover.stories.tsx
@@ -4,132 +4,92 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { storiesOf } from '@storybook/react';
 import cytoscape from 'cytoscape';
 import { HttpSetup } from 'kibana/public';
-import React from 'react';
+import React, { ComponentType } from 'react';
 import { EuiThemeProvider } from '../../../../../../observability/public';
 import { MockApmPluginContextWrapper } from '../../../../context/ApmPluginContext/MockApmPluginContext';
 import { MockUrlParamsContextProvider } from '../../../../context/UrlParamsContext/MockUrlParamsContextProvider';
 import { createCallApmApi } from '../../../../services/rest/createCallApmApi';
 import { CytoscapeContext } from '../Cytoscape';
 import { Popover } from './';
-import { ServiceStatsList } from './ServiceStatsList';
+import exampleGroupedConnectionsData from '../__stories__/example_grouped_connections.json';
 
-storiesOf('app/ServiceMap/Popover', module)
-  .addDecorator((storyFn) => {
+export default {
+  title: 'app/ServiceMap/Popover',
+  component: Popover,
+  decorators: [
+    (Story: ComponentType) => {
+      const httpMock = ({
+        get: async () => ({
+          avgCpuUsage: 0.32809666568309237,
+          avgErrorRate: 0.556068173242986,
+          avgMemoryUsage: 0.5504868173242986,
+          transactionStats: {
+            avgRequestsPerMinute: 164.47222031860858,
+            avgTransactionDuration: 61634.38905590272,
+          },
+        }),
+      } as unknown) as HttpSetup;
+
+      createCallApmApi(httpMock);
+
+      return (
+        <EuiThemeProvider>
+          <MockUrlParamsContextProvider>
+            <MockApmPluginContextWrapper>
+              <div style={{ height: 325 }}>
+                <Story />
+              </div>
+            </MockApmPluginContextWrapper>
+          </MockUrlParamsContextProvider>
+        </EuiThemeProvider>
+      );
+    },
+  ],
+};
+
+export function Example() {
+  return <Popover />;
+}
+Example.decorators = [
+  (Story: ComponentType) => {
     const node = {
       data: { id: 'example service', 'service.name': 'example service' },
     };
-    const cy = cytoscape({ elements: [node] });
-    const httpMock = ({
-      get: async () => ({
-        avgCpuUsage: 0.32809666568309237,
-        avgErrorRate: 0.556068173242986,
-        avgMemoryUsage: 0.5504868173242986,
-        transactionStats: {
-          avgRequestsPerMinute: 164.47222031860858,
-          avgTransactionDuration: 61634.38905590272,
-        },
-      }),
-    } as unknown) as HttpSetup;
 
-    createCallApmApi(httpMock);
+    const cy = cytoscape({ elements: [node] });
 
     setTimeout(() => {
       cy.$id('example service').select();
     }, 0);
 
     return (
-      <EuiThemeProvider>
-        <MockUrlParamsContextProvider>
-          <MockApmPluginContextWrapper>
-            <CytoscapeContext.Provider value={cy}>
-              <div style={{ height: 325 }}>{storyFn()}</div>
-            </CytoscapeContext.Provider>
-          </MockApmPluginContextWrapper>
-        </MockUrlParamsContextProvider>
-      </EuiThemeProvider>
+      <CytoscapeContext.Provider value={cy}>
+        <Story />
+      </CytoscapeContext.Provider>
     );
-  })
-  .add(
-    'example',
-    () => {
-      return <Popover />;
-    },
-    {
-      info: {
-        propTablesExclude: [
-          CytoscapeContext.Provider,
-          EuiThemeProvider,
-          MockApmPluginContextWrapper,
-          MockUrlParamsContextProvider,
-          Popover,
-        ],
-        source: false,
-      },
-    }
-  );
+  },
+];
+
+export function Externals() {
+  return <Popover />;
+}
+Externals.decorators = [
+  (Story: ComponentType) => {
+    const node = {
+      data: exampleGroupedConnectionsData,
+    };
+    const cy = cytoscape({ elements: [node] });
+
+    setTimeout(() => {
+      cy.$id(exampleGroupedConnectionsData.id).select();
+    }, 0);
 
-storiesOf('app/ServiceMap/Popover/ServiceStatsList', module)
-  .addDecorator((storyFn) => <EuiThemeProvider>{storyFn()}</EuiThemeProvider>)
-  .add(
-    'example',
-    () => (
-      <ServiceStatsList
-        avgCpuUsage={0.32809666568309237}
-        avgMemoryUsage={0.5504868173242986}
-        transactionStats={{
-          avgRequestsPerMinute: 164.47222031860858,
-          avgTransactionDuration: 61634.38905590272,
-        }}
-        avgErrorRate={0.556068173242986}
-      />
-    ),
-    { info: { propTablesExclude: [EuiThemeProvider] } }
-  )
-  .add(
-    'loading',
-    () => (
-      <ServiceStatsList
-        avgCpuUsage={null}
-        avgErrorRate={null}
-        avgMemoryUsage={null}
-        transactionStats={{
-          avgRequestsPerMinute: null,
-          avgTransactionDuration: null,
-        }}
-      />
-    ),
-    { info: { propTablesExclude: [EuiThemeProvider] } }
-  )
-  .add(
-    'some null values',
-    () => (
-      <ServiceStatsList
-        avgCpuUsage={null}
-        avgErrorRate={0.615972134074397}
-        avgMemoryUsage={null}
-        transactionStats={{
-          avgRequestsPerMinute: 8.439583235652972,
-          avgTransactionDuration: 238792.54809512055,
-        }}
-      />
-    ),
-    { info: { propTablesExclude: [EuiThemeProvider] } }
-  )
-  .add(
-    'all null values',
-    () => (
-      <ServiceStatsList
-        avgCpuUsage={null}
-        avgErrorRate={null}
-        avgMemoryUsage={null}
-        transactionStats={{
-          avgRequestsPerMinute: null,
-          avgTransactionDuration: null,
-        }}
-      />
-    ),
-    { info: { propTablesExclude: [EuiThemeProvider] } }
-  );
+    return (
+      <CytoscapeContext.Provider value={cy}>
+        <Story />
+      </CytoscapeContext.Provider>
+    );
+  },
+];
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/service_stats_list.stories.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/service_stats_list.stories.tsx
new file mode 100644
index 00000000000000..052f9e9515751d
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/service_stats_list.stories.tsx
@@ -0,0 +1,63 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { ComponentType } from 'react';
+import { EuiThemeProvider } from '../../../../../../observability/public';
+import { ServiceStatsList } from './ServiceStatsList';
+
+export default {
+  title: 'app/ServiceMap/Popover/ServiceStatsList',
+  component: ServiceStatsList,
+  decorators: [
+    (Story: ComponentType) => (
+      <EuiThemeProvider>
+        <Story />
+      </EuiThemeProvider>
+    ),
+  ],
+};
+
+export function Example() {
+  return (
+    <ServiceStatsList
+      avgCpuUsage={0.32809666568309237}
+      avgMemoryUsage={0.5504868173242986}
+      transactionStats={{
+        avgRequestsPerMinute: 164.47222031860858,
+        avgTransactionDuration: 61634.38905590272,
+      }}
+      avgErrorRate={0.556068173242986}
+    />
+  );
+}
+
+export function SomeNullValues() {
+  return (
+    <ServiceStatsList
+      avgCpuUsage={null}
+      avgErrorRate={0.615972134074397}
+      avgMemoryUsage={null}
+      transactionStats={{
+        avgRequestsPerMinute: 8.439583235652972,
+        avgTransactionDuration: 238792.54809512055,
+      }}
+    />
+  );
+}
+
+export function AllNullValues() {
+  return (
+    <ServiceStatsList
+      avgCpuUsage={null}
+      avgErrorRate={null}
+      avgMemoryUsage={null}
+      transactionStats={{
+        avgRequestsPerMinute: null,
+        avgTransactionDuration: null,
+      }}
+    />
+  );
+}
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/Cytoscape.stories.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/Cytoscape.stories.tsx
index 5b50eb953d896e..ee334e2ae95671 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/Cytoscape.stories.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/Cytoscape.stories.tsx
@@ -5,332 +5,315 @@
  */
 
 import { EuiCard, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { storiesOf } from '@storybook/react';
 import cytoscape from 'cytoscape';
-import React from 'react';
+import React, { ComponentType } from 'react';
+import { EuiThemeProvider } from '../../../../../../observability/public';
 import { Cytoscape } from '../Cytoscape';
 import { iconForNode } from '../icons';
-import { EuiThemeProvider } from '../../../../../../observability/public';
+import { Centerer } from './centerer';
+
+export default {
+  title: 'app/ServiceMap/Cytoscape',
+  component: Cytoscape,
+  decorators: [
+    (Story: ComponentType) => (
+      <EuiThemeProvider>
+        <Story />
+      </EuiThemeProvider>
+    ),
+  ],
+};
+
+export function Example() {
+  const elements: cytoscape.ElementDefinition[] = [
+    {
+      data: {
+        id: 'opbeans-python',
+        'service.name': 'opbeans-python',
+        'agent.name': 'python',
+      },
+    },
+    {
+      data: {
+        id: 'opbeans-node',
+        'service.name': 'opbeans-node',
+        'agent.name': 'nodejs',
+      },
+    },
+    {
+      data: {
+        id: 'opbeans-ruby',
+        'service.name': 'opbeans-ruby',
+        'agent.name': 'ruby',
+      },
+    },
+    { data: { source: 'opbeans-python', target: 'opbeans-node' } },
+    {
+      data: {
+        bidirectional: true,
+        source: 'opbeans-python',
+        target: 'opbeans-ruby',
+      },
+    },
+  ];
+  const serviceName = 'opbeans-python';
 
-storiesOf('app/ServiceMap/Cytoscape', module)
-  .addDecorator((storyFn) => <EuiThemeProvider>{storyFn()}</EuiThemeProvider>)
-  .add(
-    'example',
-    () => {
-      const elements: cytoscape.ElementDefinition[] = [
-        {
-          data: {
-            id: 'opbeans-python',
-            'service.name': 'opbeans-python',
-            'agent.name': 'python',
-          },
-        },
-        {
-          data: {
-            id: 'opbeans-node',
-            'service.name': 'opbeans-node',
-            'agent.name': 'nodejs',
-          },
-        },
-        {
-          data: {
-            id: 'opbeans-ruby',
-            'service.name': 'opbeans-ruby',
-            'agent.name': 'ruby',
-          },
-        },
-        { data: { source: 'opbeans-python', target: 'opbeans-node' } },
-        {
-          data: {
-            bidirectional: true,
-            source: 'opbeans-python',
-            target: 'opbeans-ruby',
-          },
-        },
-      ];
-      const height = 300;
-      const serviceName = 'opbeans-python';
-      return (
-        <Cytoscape
-          elements={elements}
-          height={height}
-          serviceName={serviceName}
-        />
-      );
-    },
-    {
-      info: {
-        propTables: false,
-        source: false,
-      },
-    }
+  return (
+    <Cytoscape
+      elements={elements}
+      height={window.innerHeight}
+      serviceName={serviceName}
+    >
+      <Centerer />
+    </Cytoscape>
   );
+}
 
-storiesOf('app/ServiceMap/Cytoscape', module).add(
-  'node icons',
-  () => {
-    const cy = cytoscape();
-    const elements = [
-      { data: { id: 'default' } },
-      {
-        data: {
-          id: 'aws',
-          'span.type': 'aws',
-          'span.subtype': 'servicename',
-        },
-      },
-      { data: { id: 'cache', 'span.type': 'cache' } },
-      { data: { id: 'database', 'span.type': 'db' } },
-      {
-        data: {
-          id: 'cassandra',
-          'span.type': 'db',
-          'span.subtype': 'cassandra',
-        },
-      },
-      {
-        data: {
-          id: 'elasticsearch',
-          'span.type': 'db',
-          'span.subtype': 'elasticsearch',
-        },
-      },
-      {
-        data: {
-          id: 'mongodb',
-          'span.type': 'db',
-          'span.subtype': 'mongodb',
-        },
-      },
-      {
-        data: {
-          id: 'mysql',
-          'span.type': 'db',
-          'span.subtype': 'mysql',
-        },
-      },
-      {
-        data: {
-          id: 'postgresql',
-          'span.type': 'db',
-          'span.subtype': 'postgresql',
-        },
-      },
-      {
-        data: {
-          id: 'redis',
-          'span.type': 'db',
-          'span.subtype': 'redis',
-        },
-      },
-      { data: { id: 'external', 'span.type': 'external' } },
-      { data: { id: 'ext', 'span.type': 'ext' } },
-      {
-        data: {
-          id: 'graphql',
-          'span.type': 'external',
-          'span.subtype': 'graphql',
-        },
-      },
-      {
-        data: {
-          id: 'grpc',
-          'span.type': 'external',
-          'span.subtype': 'grpc',
-        },
-      },
-      {
-        data: {
-          id: 'websocket',
-          'span.type': 'external',
-          'span.subtype': 'websocket',
-        },
-      },
-      { data: { id: 'messaging', 'span.type': 'messaging' } },
-      {
-        data: {
-          id: 'jms',
-          'span.type': 'messaging',
-          'span.subtype': 'jms',
-        },
-      },
-      {
-        data: {
-          id: 'kafka',
-          'span.type': 'messaging',
-          'span.subtype': 'kafka',
-        },
-      },
-      { data: { id: 'template', 'span.type': 'template' } },
-      {
-        data: {
-          id: 'handlebars',
-          'span.type': 'template',
-          'span.subtype': 'handlebars',
-        },
-      },
-      {
-        data: {
-          id: 'dark',
-          'service.name': 'dark service',
-          'agent.name': 'dark',
-        },
-      },
-      {
-        data: {
-          id: 'dotnet',
-          'service.name': 'dotnet service',
-          'agent.name': 'dotnet',
-        },
-      },
-      {
-        data: {
-          id: 'dotNet',
-          'service.name': 'dotNet service',
-          'agent.name': 'dotNet',
-        },
-      },
-      {
-        data: {
-          id: 'go',
-          'service.name': 'go service',
-          'agent.name': 'go',
-        },
-      },
-      {
-        data: {
-          id: 'java',
-          'service.name': 'java service',
-          'agent.name': 'java',
-        },
-      },
-      {
-        data: {
-          id: 'RUM (js-base)',
-          'service.name': 'RUM service',
-          'agent.name': 'js-base',
-        },
-      },
-      {
-        data: {
-          id: 'RUM (rum-js)',
-          'service.name': 'RUM service',
-          'agent.name': 'rum-js',
-        },
-      },
-      {
-        data: {
-          id: 'nodejs',
-          'service.name': 'nodejs service',
-          'agent.name': 'nodejs',
-        },
-      },
-      {
-        data: {
-          id: 'php',
-          'service.name': 'php service',
-          'agent.name': 'php',
-        },
-      },
-      {
-        data: {
-          id: 'python',
-          'service.name': 'python service',
-          'agent.name': 'python',
-        },
-      },
-      {
-        data: {
-          id: 'ruby',
-          'service.name': 'ruby service',
-          'agent.name': 'ruby',
-        },
-      },
-    ];
-    cy.add(elements);
+export function NodeIcons() {
+  const cy = cytoscape();
+  const elements = [
+    { data: { id: 'default' } },
+    {
+      data: {
+        id: 'aws',
+        'span.type': 'aws',
+        'span.subtype': 'servicename',
+      },
+    },
+    { data: { id: 'cache', 'span.type': 'cache' } },
+    { data: { id: 'database', 'span.type': 'db' } },
+    {
+      data: {
+        id: 'cassandra',
+        'span.type': 'db',
+        'span.subtype': 'cassandra',
+      },
+    },
+    {
+      data: {
+        id: 'elasticsearch',
+        'span.type': 'db',
+        'span.subtype': 'elasticsearch',
+      },
+    },
+    {
+      data: {
+        id: 'mongodb',
+        'span.type': 'db',
+        'span.subtype': 'mongodb',
+      },
+    },
+    {
+      data: {
+        id: 'mysql',
+        'span.type': 'db',
+        'span.subtype': 'mysql',
+      },
+    },
+    {
+      data: {
+        id: 'postgresql',
+        'span.type': 'db',
+        'span.subtype': 'postgresql',
+      },
+    },
+    {
+      data: {
+        id: 'redis',
+        'span.type': 'db',
+        'span.subtype': 'redis',
+      },
+    },
+    { data: { id: 'external', 'span.type': 'external' } },
+    { data: { id: 'ext', 'span.type': 'ext' } },
+    {
+      data: {
+        id: 'graphql',
+        'span.type': 'external',
+        'span.subtype': 'graphql',
+      },
+    },
+    {
+      data: {
+        id: 'grpc',
+        'span.type': 'external',
+        'span.subtype': 'grpc',
+      },
+    },
+    {
+      data: {
+        id: 'websocket',
+        'span.type': 'external',
+        'span.subtype': 'websocket',
+      },
+    },
+    { data: { id: 'messaging', 'span.type': 'messaging' } },
+    {
+      data: {
+        id: 'jms',
+        'span.type': 'messaging',
+        'span.subtype': 'jms',
+      },
+    },
+    {
+      data: {
+        id: 'kafka',
+        'span.type': 'messaging',
+        'span.subtype': 'kafka',
+      },
+    },
+    { data: { id: 'template', 'span.type': 'template' } },
+    {
+      data: {
+        id: 'handlebars',
+        'span.type': 'template',
+        'span.subtype': 'handlebars',
+      },
+    },
+    {
+      data: {
+        id: 'dotnet',
+        'service.name': 'dotnet service',
+        'agent.name': 'dotnet',
+      },
+    },
+    {
+      data: {
+        id: 'dotNet',
+        'service.name': 'dotNet service',
+        'agent.name': 'dotNet',
+      },
+    },
+    {
+      data: {
+        id: 'go',
+        'service.name': 'go service',
+        'agent.name': 'go',
+      },
+    },
+    {
+      data: {
+        id: 'java',
+        'service.name': 'java service',
+        'agent.name': 'java',
+      },
+    },
+    {
+      data: {
+        id: 'RUM (js-base)',
+        'service.name': 'RUM service',
+        'agent.name': 'js-base',
+      },
+    },
+    {
+      data: {
+        id: 'RUM (rum-js)',
+        'service.name': 'RUM service',
+        'agent.name': 'rum-js',
+      },
+    },
+    {
+      data: {
+        id: 'nodejs',
+        'service.name': 'nodejs service',
+        'agent.name': 'nodejs',
+      },
+    },
+    {
+      data: {
+        id: 'opentelemetry',
+        'service.name': 'OpenTelemetry service',
+        'agent.name': 'otlp',
+      },
+    },
+    {
+      data: {
+        id: 'php',
+        'service.name': 'php service',
+        'agent.name': 'php',
+      },
+    },
+    {
+      data: {
+        id: 'python',
+        'service.name': 'python service',
+        'agent.name': 'python',
+      },
+    },
+    {
+      data: {
+        id: 'ruby',
+        'service.name': 'ruby service',
+        'agent.name': 'ruby',
+      },
+    },
+  ];
+  cy.add(elements);
 
-    return (
-      <EuiFlexGroup gutterSize="l" wrap={true}>
-        {cy.nodes().map((node) => (
-          <EuiFlexItem key={node.data('id')}>
-            <EuiCard
-              description={
-                <code style={{ textAlign: 'left', whiteSpace: 'nowrap' }}>
-                  agent.name: {node.data('agent.name') || 'undefined'}
-                  <br />
-                  span.type: {node.data('span.type') || 'undefined'}
-                  <br />
-                  span.subtype: {node.data('span.subtype') || 'undefined'}
-                </code>
-              }
-              icon={
-                <img
-                  alt={node.data('label')}
-                  src={iconForNode(node)}
-                  height={80}
-                  width={80}
-                />
-              }
-              title={node.data('id')}
-            />
-          </EuiFlexItem>
-        ))}
-      </EuiFlexGroup>
-    );
-  },
-  {
-    info: {
-      propTables: false,
-      source: false,
-    },
-  }
-);
+  return (
+    <EuiFlexGroup gutterSize="l" wrap={true}>
+      {cy.nodes().map((node) => (
+        <EuiFlexItem key={node.data('id')}>
+          <EuiCard
+            description={
+              <code style={{ textAlign: 'left', whiteSpace: 'nowrap' }}>
+                agent.name: {node.data('agent.name') || 'undefined'}
+                <br />
+                span.type: {node.data('span.type') || 'undefined'}
+                <br />
+                span.subtype: {node.data('span.subtype') || 'undefined'}
+              </code>
+            }
+            icon={
+              <img
+                alt={node.data('label')}
+                src={iconForNode(node)}
+                height={80}
+                width={80}
+              />
+            }
+            title={node.data('id')}
+          />
+        </EuiFlexItem>
+      ))}
+    </EuiFlexGroup>
+  );
+}
 
-storiesOf('app/ServiceMap/Cytoscape', module)
-  .addDecorator((storyFn) => <EuiThemeProvider>{storyFn()}</EuiThemeProvider>)
-  .add(
-    'node severity',
-    () => {
-      const elements = [
-        {
-          data: {
-            id: 'undefined',
-            'service.name': 'severity: undefined',
-            serviceAnomalyStats: { anomalyScore: undefined },
-          },
-        },
-        {
-          data: {
-            id: 'warning',
-            'service.name': 'severity: warning',
-            serviceAnomalyStats: { anomalyScore: 0 },
-          },
-        },
-        {
-          data: {
-            id: 'minor',
-            'service.name': 'severity: minor',
-            serviceAnomalyStats: { anomalyScore: 40 },
-          },
-        },
-        {
-          data: {
-            id: 'major',
-            'service.name': 'severity: major',
-            serviceAnomalyStats: { anomalyScore: 60 },
-          },
-        },
-        {
-          data: {
-            id: 'critical',
-            'service.name': 'severity: critical',
-            serviceAnomalyStats: { anomalyScore: 80 },
-          },
-        },
-      ];
-      return <Cytoscape elements={elements} height={600} />;
-    },
-    {
-      info: { propTables: false, source: false },
-    }
+export function NodeHealthStatus() {
+  const elements = [
+    {
+      data: {
+        id: 'undefined',
+        'service.name': 'undefined',
+        serviceAnomalyStats: { healthStatus: undefined },
+      },
+    },
+    {
+      data: {
+        id: 'healthy',
+        'service.name': 'healthy',
+        serviceAnomalyStats: { healthStatus: 'healthy' },
+      },
+    },
+    {
+      data: {
+        id: 'warning',
+        'service.name': 'warning',
+        serviceAnomalyStats: { healthStatus: 'warning' },
+      },
+    },
+    {
+      data: {
+        id: 'critical',
+        'service.name': 'critical',
+        serviceAnomalyStats: { healthStatus: 'critical' },
+      },
+    },
+  ];
+  return (
+    <Cytoscape elements={elements} height={window.innerHeight}>
+      <Centerer />
+    </Cytoscape>
   );
+}
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/CytoscapeExampleData.stories.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/CytoscapeExampleData.stories.tsx
deleted file mode 100644
index d8dcc71f5051d9..00000000000000
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/CytoscapeExampleData.stories.tsx
+++ /dev/null
@@ -1,275 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import {
-  EuiButton,
-  EuiCodeEditor,
-  EuiFieldNumber,
-  EuiFilePicker,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiForm,
-  EuiSpacer,
-  EuiToolTip,
-} from '@elastic/eui';
-import { storiesOf } from '@storybook/react';
-import React, { useEffect, useState } from 'react';
-import { EuiThemeProvider } from '../../../../../../observability/public';
-import { Cytoscape } from '../Cytoscape';
-import exampleResponseHipsterStore from './example_response_hipster_store.json';
-import exampleResponseOpbeansBeats from './example_response_opbeans_beats.json';
-import exampleResponseTodo from './example_response_todo.json';
-import exampleResponseOneDomainManyIPs from './example_response_one_domain_many_ips.json';
-import { generateServiceMapElements } from './generate_service_map_elements';
-
-const STORYBOOK_PATH = 'app/ServiceMap/Cytoscape/Example data';
-
-const SESSION_STORAGE_KEY = `${STORYBOOK_PATH}/pre-loaded map`;
-function getSessionJson() {
-  return window.sessionStorage.getItem(SESSION_STORAGE_KEY);
-}
-function setSessionJson(json: string) {
-  window.sessionStorage.setItem(SESSION_STORAGE_KEY, json);
-}
-
-const getCytoscapeHeight = () => window.innerHeight - 300;
-
-storiesOf(STORYBOOK_PATH, module)
-  .addDecorator((storyFn) => <EuiThemeProvider>{storyFn()}</EuiThemeProvider>)
-  .add(
-    'Generate map',
-    () => {
-      const [size, setSize] = useState<number>(10);
-      const [json, setJson] = useState<string>('');
-      const [elements, setElements] = useState<any[]>(
-        generateServiceMapElements({ size, hasAnomalies: true })
-      );
-      return (
-        <div>
-          <EuiFlexGroup>
-            <EuiFlexItem>
-              <EuiButton
-                onClick={() => {
-                  setElements(
-                    generateServiceMapElements({ size, hasAnomalies: true })
-                  );
-                  setJson('');
-                }}
-              >
-                Generate service map
-              </EuiButton>
-            </EuiFlexItem>
-            <EuiFlexItem>
-              <EuiToolTip position="right" content="Number of services">
-                <EuiFieldNumber
-                  placeholder="Size"
-                  value={size}
-                  onChange={(e) => setSize(e.target.valueAsNumber)}
-                />
-              </EuiToolTip>
-            </EuiFlexItem>
-            <EuiFlexItem>
-              <EuiButton
-                onClick={() => {
-                  setJson(JSON.stringify({ elements }, null, 2));
-                }}
-              >
-                Get JSON
-              </EuiButton>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-
-          <Cytoscape elements={elements} height={getCytoscapeHeight()} />
-
-          {json && (
-            <EuiCodeEditor
-              mode="json"
-              theme="github"
-              width="100%"
-              value={json}
-              setOptions={{ fontSize: '12px' }}
-              isReadOnly
-            />
-          )}
-        </div>
-      );
-    },
-    {
-      info: { propTables: false, source: false },
-    }
-  );
-
-storiesOf(STORYBOOK_PATH, module)
-  .addDecorator((storyFn) => <EuiThemeProvider>{storyFn()}</EuiThemeProvider>)
-  .add(
-    'Map from JSON',
-    () => {
-      const [json, setJson] = useState<string>(
-        getSessionJson() || JSON.stringify(exampleResponseTodo, null, 2)
-      );
-      const [error, setError] = useState<string | undefined>();
-
-      const [elements, setElements] = useState<any[]>([]);
-      useEffect(() => {
-        try {
-          setElements(JSON.parse(json).elements);
-        } catch (e) {
-          setError(e.message);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-      }, []);
-
-      return (
-        <div>
-          <Cytoscape elements={elements} height={getCytoscapeHeight()} />
-          <EuiForm isInvalid={error !== undefined} error={error}>
-            <EuiFlexGroup>
-              <EuiFlexItem>
-                <EuiCodeEditor
-                  mode="json"
-                  theme="github"
-                  width="100%"
-                  value={json}
-                  setOptions={{ fontSize: '12px' }}
-                  onChange={(value) => {
-                    setJson(value);
-                  }}
-                />
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <EuiFlexGroup direction="column">
-                  <EuiFilePicker
-                    display={'large'}
-                    fullWidth={true}
-                    style={{ height: '100%' }}
-                    initialPromptText="Upload a JSON file"
-                    onChange={(event) => {
-                      const item = event?.item(0);
-
-                      if (item) {
-                        const f = new FileReader();
-                        f.onload = (onloadEvent) => {
-                          const result = onloadEvent?.target?.result;
-                          if (typeof result === 'string') {
-                            setJson(result);
-                          }
-                        };
-                        f.readAsText(item);
-                      }
-                    }}
-                  />
-                  <EuiSpacer />
-                  <EuiButton
-                    onClick={() => {
-                      try {
-                        setElements(JSON.parse(json).elements);
-                        setSessionJson(json);
-                        setError(undefined);
-                      } catch (e) {
-                        setError(e.message);
-                      }
-                    }}
-                  >
-                    Render JSON
-                  </EuiButton>
-                </EuiFlexGroup>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiForm>
-        </div>
-      );
-    },
-    {
-      info: {
-        propTables: false,
-        source: false,
-        text: `
-      Enter JSON map data into the text box or upload a file and click "Render JSON" to see the results. You can enable a download button on the service map by putting
-
-      \`\`\`
-      sessionStorage.setItem('apm_debug', 'true')
-      \`\`\`
-
-      into the JavaScript console and reloading the page.`,
-      },
-    }
-  );
-
-storiesOf(STORYBOOK_PATH, module)
-  .addDecorator((storyFn) => <EuiThemeProvider>{storyFn()}</EuiThemeProvider>)
-  .add(
-    'Todo app',
-    () => {
-      return (
-        <div>
-          <Cytoscape
-            elements={exampleResponseTodo.elements}
-            height={getCytoscapeHeight()}
-          />
-        </div>
-      );
-    },
-    {
-      info: { propTables: false, source: false },
-    }
-  );
-
-storiesOf(STORYBOOK_PATH, module)
-  .addDecorator((storyFn) => <EuiThemeProvider>{storyFn()}</EuiThemeProvider>)
-  .add(
-    'Opbeans + beats',
-    () => {
-      return (
-        <div>
-          <Cytoscape
-            elements={exampleResponseOpbeansBeats.elements}
-            height={getCytoscapeHeight()}
-          />
-        </div>
-      );
-    },
-    {
-      info: { propTables: false, source: false },
-    }
-  );
-
-storiesOf(STORYBOOK_PATH, module)
-  .addDecorator((storyFn) => <EuiThemeProvider>{storyFn()}</EuiThemeProvider>)
-  .add(
-    'Hipster store',
-    () => {
-      return (
-        <div>
-          <Cytoscape
-            elements={exampleResponseHipsterStore.elements}
-            height={getCytoscapeHeight()}
-          />
-        </div>
-      );
-    },
-    {
-      info: { propTables: false, source: false },
-    }
-  );
-
-storiesOf(STORYBOOK_PATH, module)
-  .addDecorator((storyFn) => <EuiThemeProvider>{storyFn()}</EuiThemeProvider>)
-  .add(
-    'Node resolves one domain name to many IPs',
-    () => {
-      return (
-        <div>
-          <Cytoscape
-            elements={exampleResponseOneDomainManyIPs.elements}
-            height={getCytoscapeHeight()}
-          />
-        </div>
-      );
-    },
-    {
-      info: { propTables: false, source: false },
-    }
-  );
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/centerer.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/centerer.tsx
new file mode 100644
index 00000000000000..16dad1e03b5a65
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/centerer.tsx
@@ -0,0 +1,27 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { useContext, useEffect } from 'react';
+import { CytoscapeContext } from '../Cytoscape';
+
+// Component to center map on load
+export function Centerer() {
+  const cy = useContext(CytoscapeContext);
+
+  useEffect(() => {
+    if (cy) {
+      cy.one('layoutstop', (event) => {
+        event.cy.animate({
+          duration: 50,
+          center: { eles: '' },
+          fit: { eles: '', padding: 50 },
+        });
+      });
+    }
+  }, [cy]);
+
+  return null;
+}
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/cytoscape_example_data.stories.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/cytoscape_example_data.stories.tsx
new file mode 100644
index 00000000000000..0673735ba0adbb
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/cytoscape_example_data.stories.tsx
@@ -0,0 +1,228 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import {
+  EuiButton,
+  EuiCodeEditor,
+  EuiFieldNumber,
+  EuiFilePicker,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiForm,
+  EuiSpacer,
+  EuiToolTip,
+} from '@elastic/eui';
+import React, { ComponentType, useEffect, useState } from 'react';
+import { EuiThemeProvider } from '../../../../../../observability/public';
+import { Cytoscape } from '../Cytoscape';
+import { Centerer } from './centerer';
+import exampleResponseHipsterStore from './example_response_hipster_store.json';
+import exampleResponseOpbeansBeats from './example_response_opbeans_beats.json';
+import exampleResponseTodo from './example_response_todo.json';
+import { generateServiceMapElements } from './generate_service_map_elements';
+
+const STORYBOOK_PATH = 'app/ServiceMap/Cytoscape/Example data';
+
+const SESSION_STORAGE_KEY = `${STORYBOOK_PATH}/pre-loaded map`;
+function getSessionJson() {
+  return window.sessionStorage.getItem(SESSION_STORAGE_KEY);
+}
+function setSessionJson(json: string) {
+  window.sessionStorage.setItem(SESSION_STORAGE_KEY, json);
+}
+
+function getHeight() {
+  return window.innerHeight - 300;
+}
+
+export default {
+  title: 'app/ServiceMap/Cytoscape/Example data',
+  component: Cytoscape,
+  decorators: [
+    (Story: ComponentType) => (
+      <EuiThemeProvider>
+        <Story />
+      </EuiThemeProvider>
+    ),
+  ],
+};
+
+export function GenerateMap() {
+  const [size, setSize] = useState<number>(10);
+  const [json, setJson] = useState<string>('');
+  const [elements, setElements] = useState<any[]>(
+    generateServiceMapElements({ size, hasAnomalies: true })
+  );
+  return (
+    <div>
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <EuiButton
+            onClick={() => {
+              setElements(
+                generateServiceMapElements({ size, hasAnomalies: true })
+              );
+              setJson('');
+            }}
+          >
+            Generate service map
+          </EuiButton>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiToolTip position="right" content="Number of services">
+            <EuiFieldNumber
+              placeholder="Size"
+              value={size}
+              onChange={(e) => setSize(e.target.valueAsNumber)}
+            />
+          </EuiToolTip>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiButton
+            onClick={() => {
+              setJson(JSON.stringify({ elements }, null, 2));
+            }}
+          >
+            Get JSON
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+
+      <Cytoscape elements={elements} height={getHeight()}>
+        <Centerer />
+      </Cytoscape>
+
+      {json && (
+        <EuiCodeEditor
+          mode="json"
+          theme="github"
+          width="100%"
+          value={json}
+          setOptions={{ fontSize: '12px' }}
+          isReadOnly
+        />
+      )}
+    </div>
+  );
+}
+
+export function MapFromJSON() {
+  const [json, setJson] = useState<string>(
+    getSessionJson() || JSON.stringify(exampleResponseTodo, null, 2)
+  );
+  const [error, setError] = useState<string | undefined>();
+
+  const [elements, setElements] = useState<any[]>([]);
+  useEffect(() => {
+    try {
+      setElements(JSON.parse(json).elements);
+    } catch (e) {
+      setError(e.message);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div>
+      <Cytoscape elements={elements} height={getHeight()}>
+        <Centerer />
+      </Cytoscape>
+      <EuiForm isInvalid={error !== undefined} error={error}>
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiCodeEditor
+              mode="json"
+              theme="github"
+              width="100%"
+              value={json}
+              setOptions={{ fontSize: '12px' }}
+              onChange={(value) => {
+                setJson(value);
+              }}
+            />
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiFlexGroup direction="column">
+              <EuiFilePicker
+                display={'large'}
+                fullWidth={true}
+                style={{ height: '100%' }}
+                initialPromptText="Upload a JSON file"
+                onChange={(event) => {
+                  const item = event?.item(0);
+
+                  if (item) {
+                    const f = new FileReader();
+                    f.onload = (onloadEvent) => {
+                      const result = onloadEvent?.target?.result;
+                      if (typeof result === 'string') {
+                        setJson(result);
+                      }
+                    };
+                    f.readAsText(item);
+                  }
+                }}
+              />
+              <EuiSpacer />
+              <EuiButton
+                onClick={() => {
+                  try {
+                    setElements(JSON.parse(json).elements);
+                    setSessionJson(json);
+                    setError(undefined);
+                  } catch (e) {
+                    setError(e.message);
+                  }
+                }}
+              >
+                Render JSON
+              </EuiButton>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiForm>
+    </div>
+  );
+}
+
+export function TodoApp() {
+  return (
+    <div>
+      <Cytoscape
+        elements={exampleResponseTodo.elements}
+        height={window.innerHeight}
+      >
+        <Centerer />
+      </Cytoscape>
+    </div>
+  );
+}
+
+export function OpbeansAndBeats() {
+  return (
+    <div>
+      <Cytoscape
+        elements={exampleResponseOpbeansBeats.elements}
+        height={window.innerHeight}
+      >
+        <Centerer />
+      </Cytoscape>
+    </div>
+  );
+}
+
+export function HipsterStore() {
+  return (
+    <div>
+      <Cytoscape
+        elements={exampleResponseHipsterStore.elements}
+        height={window.innerHeight}
+      >
+        <Centerer />
+      </Cytoscape>
+    </div>
+  );
+}
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/example_grouped_connections.json b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/example_grouped_connections.json
new file mode 100644
index 00000000000000..55686f99f388a6
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/example_grouped_connections.json
@@ -0,0 +1,875 @@
+{
+  "id": "resourceGroup{elastic-co-frontend}",
+  "span.type": "external",
+  "label": "124 resources",
+  "groupedConnections": [
+    {
+      "label": "813-mam-392.mktoresp.com:443",
+      "span.subtype": "http",
+      "span.destination.service.resource": "813-mam-392.mktoresp.com:443",
+      "span.type": "external",
+      "id": ">813-mam-392.mktoresp.com:443"
+    },
+    {
+      "label": "813-mam-392.mktoutil.com:443",
+      "span.subtype": "http",
+      "span.destination.service.resource": "813-mam-392.mktoutil.com:443",
+      "span.type": "external",
+      "id": ">813-mam-392.mktoutil.com:443"
+    },
+    {
+      "label": "8d1f.com:443",
+      "span.subtype": "link",
+      "span.destination.service.resource": "8d1f.com:443",
+      "span.type": "resource",
+      "id": ">8d1f.com:443"
+    },
+    {
+      "label": "a.ssl-checking.com:443",
+      "span.subtype": "xmlhttprequest",
+      "span.destination.service.resource": "a.ssl-checking.com:443",
+      "span.type": "resource",
+      "id": ">a.ssl-checking.com:443"
+    },
+    {
+      "label": "a18132920325.cdn.optimizely.com:443",
+      "span.subtype": "iframe",
+      "span.destination.service.resource": "a18132920325.cdn.optimizely.com:443",
+      "span.type": "resource",
+      "id": ">a18132920325.cdn.optimizely.com:443"
+    },
+    {
+      "label": "api.contentstack.io:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "api.contentstack.io:443",
+      "span.type": "resource",
+      "id": ">api.contentstack.io:443"
+    },
+    {
+      "label": "assets.website-files.com:443",
+      "span.subtype": "css",
+      "span.destination.service.resource": "assets.website-files.com:443",
+      "span.type": "resource",
+      "id": ">assets.website-files.com:443"
+    },
+    {
+      "label": "bat.bing.com:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "bat.bing.com:443",
+      "span.type": "resource",
+      "id": ">bat.bing.com:443"
+    },
+    {
+      "label": "bid.g.doubleclick.net:443",
+      "span.subtype": "iframe",
+      "span.destination.service.resource": "bid.g.doubleclick.net:443",
+      "span.type": "resource",
+      "id": ">bid.g.doubleclick.net:443"
+    },
+    {
+      "label": "cdn.iubenda.com:443",
+      "span.subtype": "iframe",
+      "span.destination.service.resource": "cdn.iubenda.com:443",
+      "span.type": "resource",
+      "id": ">cdn.iubenda.com:443"
+    },
+    {
+      "label": "cdn.loom.com:443",
+      "span.subtype": "css",
+      "span.destination.service.resource": "cdn.loom.com:443",
+      "span.type": "resource",
+      "id": ">cdn.loom.com:443"
+    },
+    {
+      "label": "cdn.optimizely.com:443",
+      "span.subtype": "script",
+      "span.destination.service.resource": "cdn.optimizely.com:443",
+      "span.type": "resource",
+      "id": ">cdn.optimizely.com:443"
+    },
+    {
+      "label": "cdncache-a.akamaihd.net:443",
+      "span.subtype": "http",
+      "span.destination.service.resource": "cdncache-a.akamaihd.net:443",
+      "span.type": "external",
+      "id": ">cdncache-a.akamaihd.net:443"
+    },
+    {
+      "label": "cloud.githubusercontent.com:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "cloud.githubusercontent.com:443",
+      "span.type": "resource",
+      "id": ">cloud.githubusercontent.com:443"
+    },
+    {
+      "label": "config.privoxy.org:443",
+      "span.subtype": "script",
+      "span.destination.service.resource": "config.privoxy.org:443",
+      "span.type": "resource",
+      "id": ">config.privoxy.org:443"
+    },
+    {
+      "label": "connect.facebook.net:443",
+      "span.subtype": "script",
+      "span.destination.service.resource": "connect.facebook.net:443",
+      "span.type": "resource",
+      "id": ">connect.facebook.net:443"
+    },
+    {
+      "label": "dpx.airpr.com:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "dpx.airpr.com:443",
+      "span.type": "resource",
+      "id": ">dpx.airpr.com:443"
+    },
+    {
+      "label": "errors.client.optimizely.com:443",
+      "span.subtype": "http",
+      "span.destination.service.resource": "errors.client.optimizely.com:443",
+      "span.type": "external",
+      "id": ">errors.client.optimizely.com:443"
+    },
+    {
+      "label": "fonts.googleapis.com:443",
+      "span.subtype": "css",
+      "span.destination.service.resource": "fonts.googleapis.com:443",
+      "span.type": "resource",
+      "id": ">fonts.googleapis.com:443"
+    },
+    {
+      "label": "fonts.gstatic.com:443",
+      "span.subtype": "css",
+      "span.destination.service.resource": "fonts.gstatic.com:443",
+      "span.type": "resource",
+      "id": ">fonts.gstatic.com:443"
+    },
+    {
+      "label": "ga.clearbit.com:443",
+      "span.subtype": "script",
+      "span.destination.service.resource": "ga.clearbit.com:443",
+      "span.type": "resource",
+      "id": ">ga.clearbit.com:443"
+    },
+    {
+      "label": "gc.kis.v2.scr.kaspersky-labs.com:443",
+      "span.subtype": "script",
+      "span.destination.service.resource": "gc.kis.v2.scr.kaspersky-labs.com:443",
+      "span.type": "resource",
+      "id": ">gc.kis.v2.scr.kaspersky-labs.com:443"
+    },
+    {
+      "label": "googleads.g.doubleclick.net:443",
+      "span.subtype": "script",
+      "span.destination.service.resource": "googleads.g.doubleclick.net:443",
+      "span.type": "resource",
+      "id": ">googleads.g.doubleclick.net:443"
+    },
+    {
+      "label": "hits-i.iubenda.com:443",
+      "span.subtype": "http",
+      "span.destination.service.resource": "hits-i.iubenda.com:443",
+      "span.type": "external",
+      "id": ">hits-i.iubenda.com:443"
+    },
+    {
+      "label": "host-1r8dhi.api.swiftype.com:443",
+      "span.subtype": "http",
+      "span.destination.service.resource": "host-1r8dhi.api.swiftype.com:443",
+      "span.type": "external",
+      "id": ">host-1r8dhi.api.swiftype.com:443"
+    },
+    {
+      "label": "host-nm1h2z.api.swiftype.com:443",
+      "span.subtype": "http",
+      "span.destination.service.resource": "host-nm1h2z.api.swiftype.com:443",
+      "span.type": "external",
+      "id": ">host-nm1h2z.api.swiftype.com:443"
+    },
+    {
+      "label": "images.contentstack.io:443",
+      "span.subtype": "css",
+      "span.destination.service.resource": "images.contentstack.io:443",
+      "span.type": "resource",
+      "id": ">images.contentstack.io:443"
+    },
+    {
+      "label": "info.elastic.co:443",
+      "span.subtype": "iframe",
+      "span.destination.service.resource": "info.elastic.co:443",
+      "span.type": "resource",
+      "id": ">info.elastic.co:443"
+    },
+    {
+      "label": "info.elastic.co:80",
+      "span.subtype": "img",
+      "span.destination.service.resource": "info.elastic.co:80",
+      "span.type": "resource",
+      "id": ">info.elastic.co:80"
+    },
+    {
+      "label": "js.clearbit.com:443",
+      "span.subtype": "script",
+      "span.destination.service.resource": "js.clearbit.com:443",
+      "span.type": "resource",
+      "id": ">js.clearbit.com:443"
+    },
+    {
+      "label": "lh4.googleusercontent.com:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "lh4.googleusercontent.com:443",
+      "span.type": "resource",
+      "id": ">lh4.googleusercontent.com:443"
+    },
+    {
+      "label": "lh6.googleusercontent.com:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "lh6.googleusercontent.com:443",
+      "span.type": "resource",
+      "id": ">lh6.googleusercontent.com:443"
+    },
+    {
+      "label": "logx.optimizely.com:443",
+      "span.subtype": "http",
+      "span.destination.service.resource": "logx.optimizely.com:443",
+      "span.type": "external",
+      "id": ">logx.optimizely.com:443"
+    },
+    {
+      "label": "m98.prod2016.com:443",
+      "span.subtype": "http",
+      "span.destination.service.resource": "m98.prod2016.com:443",
+      "span.type": "external",
+      "id": ">m98.prod2016.com:443"
+    },
+    {
+      "label": "maps.googleapis.com:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "maps.googleapis.com:443",
+      "span.type": "resource",
+      "id": ">maps.googleapis.com:443"
+    },
+    {
+      "label": "maps.gstatic.com:443",
+      "span.subtype": "css",
+      "span.destination.service.resource": "maps.gstatic.com:443",
+      "span.type": "resource",
+      "id": ">maps.gstatic.com:443"
+    },
+    {
+      "label": "munchkin.marketo.net:443",
+      "span.subtype": "script",
+      "span.destination.service.resource": "munchkin.marketo.net:443",
+      "span.type": "resource",
+      "id": ">munchkin.marketo.net:443"
+    },
+    {
+      "label": "negbar.ad-blocker.org:443",
+      "span.subtype": "script",
+      "span.destination.service.resource": "negbar.ad-blocker.org:443",
+      "span.type": "resource",
+      "id": ">negbar.ad-blocker.org:443"
+    },
+    {
+      "label": "p.typekit.net:443",
+      "span.subtype": "css",
+      "span.destination.service.resource": "p.typekit.net:443",
+      "span.type": "resource",
+      "id": ">p.typekit.net:443"
+    },
+    {
+      "label": "platform.twitter.com:443",
+      "span.subtype": "iframe",
+      "span.destination.service.resource": "platform.twitter.com:443",
+      "span.type": "resource",
+      "id": ">platform.twitter.com:443"
+    },
+    {
+      "label": "play.vidyard.com:443",
+      "span.subtype": "iframe",
+      "span.destination.service.resource": "play.vidyard.com:443",
+      "span.type": "resource",
+      "id": ">play.vidyard.com:443"
+    },
+    {
+      "label": "px.ads.linkedin.com:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "px.ads.linkedin.com:443",
+      "span.type": "resource",
+      "id": ">px.ads.linkedin.com:443"
+    },
+    {
+      "label": "px.airpr.com:443",
+      "span.subtype": "script",
+      "span.destination.service.resource": "px.airpr.com:443",
+      "span.type": "resource",
+      "id": ">px.airpr.com:443"
+    },
+    {
+      "label": "q.quora.com:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "q.quora.com:443",
+      "span.type": "resource",
+      "id": ">q.quora.com:443"
+    },
+    {
+      "label": "risk.clearbit.com:443",
+      "span.subtype": "http",
+      "span.destination.service.resource": "risk.clearbit.com:443",
+      "span.type": "external",
+      "id": ">risk.clearbit.com:443"
+    },
+    {
+      "label": "rtp-static.marketo.com:443",
+      "span.subtype": "http",
+      "span.destination.service.resource": "rtp-static.marketo.com:443",
+      "span.type": "external",
+      "id": ">rtp-static.marketo.com:443"
+    },
+    {
+      "label": "rum.optimizely.com:443",
+      "span.subtype": "http",
+      "span.destination.service.resource": "rum.optimizely.com:443",
+      "span.type": "external",
+      "id": ">rum.optimizely.com:443"
+    },
+    {
+      "label": "s3-us-west-1.amazonaws.com:443",
+      "span.subtype": "script",
+      "span.destination.service.resource": "s3-us-west-1.amazonaws.com:443",
+      "span.type": "resource",
+      "id": ">s3-us-west-1.amazonaws.com:443"
+    },
+    {
+      "label": "sjrtp2-cdn.marketo.com:443",
+      "span.subtype": "script",
+      "span.destination.service.resource": "sjrtp2-cdn.marketo.com:443",
+      "span.type": "resource",
+      "id": ">sjrtp2-cdn.marketo.com:443"
+    },
+    {
+      "label": "sjrtp2.marketo.com:443",
+      "span.subtype": "http",
+      "span.destination.service.resource": "sjrtp2.marketo.com:443",
+      "span.type": "external",
+      "id": ">sjrtp2.marketo.com:443"
+    },
+    {
+      "label": "snap.licdn.com:443",
+      "span.subtype": "script",
+      "span.destination.service.resource": "snap.licdn.com:443",
+      "span.type": "resource",
+      "id": ">snap.licdn.com:443"
+    },
+    {
+      "label": "speakerdeck.com:443",
+      "span.subtype": "iframe",
+      "span.destination.service.resource": "speakerdeck.com:443",
+      "span.type": "resource",
+      "id": ">speakerdeck.com:443"
+    },
+    {
+      "label": "stag-static-www.elastic.co:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "stag-static-www.elastic.co:443",
+      "span.type": "resource",
+      "id": ">stag-static-www.elastic.co:443"
+    },
+    {
+      "label": "static-www.elastic.co:443",
+      "span.subtype": "css",
+      "span.destination.service.resource": "static-www.elastic.co:443",
+      "span.type": "resource",
+      "id": ">static-www.elastic.co:443"
+    },
+    {
+      "label": "stats.g.doubleclick.net:443",
+      "span.subtype": "http",
+      "span.destination.service.resource": "stats.g.doubleclick.net:443",
+      "span.type": "external",
+      "id": ">stats.g.doubleclick.net:443"
+    },
+    {
+      "label": "translate.google.com:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "translate.google.com:443",
+      "span.type": "resource",
+      "id": ">translate.google.com:443"
+    },
+    {
+      "label": "translate.googleapis.com:443",
+      "span.subtype": "link",
+      "span.destination.service.resource": "translate.googleapis.com:443",
+      "span.type": "resource",
+      "id": ">translate.googleapis.com:443"
+    },
+    {
+      "label": "use.typekit.net:443",
+      "span.subtype": "link",
+      "span.destination.service.resource": "use.typekit.net:443",
+      "span.type": "resource",
+      "id": ">use.typekit.net:443"
+    },
+    {
+      "label": "www.elastic.co:443",
+      "span.subtype": "browser-timing",
+      "span.destination.service.resource": "www.elastic.co:443",
+      "span.type": "external",
+      "id": ">www.elastic.co:443"
+    },
+    {
+      "label": "www.facebook.com:443",
+      "span.subtype": "beacon",
+      "span.destination.service.resource": "www.facebook.com:443",
+      "span.type": "resource",
+      "id": ">www.facebook.com:443"
+    },
+    {
+      "label": "www.google-analytics.com:443",
+      "span.subtype": "beacon",
+      "span.destination.service.resource": "www.google-analytics.com:443",
+      "span.type": "external",
+      "id": ">www.google-analytics.com:443"
+    },
+    {
+      "label": "www.google.ae:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.ae:443",
+      "span.type": "resource",
+      "id": ">www.google.ae:443"
+    },
+    {
+      "label": "www.google.al:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.al:443",
+      "span.type": "resource",
+      "id": ">www.google.al:443"
+    },
+    {
+      "label": "www.google.at:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.at:443",
+      "span.type": "resource",
+      "id": ">www.google.at:443"
+    },
+    {
+      "label": "www.google.ba:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.ba:443",
+      "span.type": "resource",
+      "id": ">www.google.ba:443"
+    },
+    {
+      "label": "www.google.be:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.be:443",
+      "span.type": "resource",
+      "id": ">www.google.be:443"
+    },
+    {
+      "label": "www.google.bg:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.bg:443",
+      "span.type": "resource",
+      "id": ">www.google.bg:443"
+    },
+    {
+      "label": "www.google.by:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.by:443",
+      "span.type": "resource",
+      "id": ">www.google.by:443"
+    },
+    {
+      "label": "www.google.ca:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.ca:443",
+      "span.type": "resource",
+      "id": ">www.google.ca:443"
+    },
+    {
+      "label": "www.google.ch:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.ch:443",
+      "span.type": "resource",
+      "id": ">www.google.ch:443"
+    },
+    {
+      "label": "www.google.cl:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.cl:443",
+      "span.type": "resource",
+      "id": ">www.google.cl:443"
+    },
+    {
+      "label": "www.google.co.cr:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.co.cr:443",
+      "span.type": "resource",
+      "id": ">www.google.co.cr:443"
+    },
+    {
+      "label": "www.google.co.id:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.co.id:443",
+      "span.type": "resource",
+      "id": ">www.google.co.id:443"
+    },
+    {
+      "label": "www.google.co.il:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.co.il:443",
+      "span.type": "resource",
+      "id": ">www.google.co.il:443"
+    },
+    {
+      "label": "www.google.co.in:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.co.in:443",
+      "span.type": "resource",
+      "id": ">www.google.co.in:443"
+    },
+    {
+      "label": "www.google.co.jp:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.co.jp:443",
+      "span.type": "resource",
+      "id": ">www.google.co.jp:443"
+    },
+    {
+      "label": "www.google.co.kr:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.co.kr:443",
+      "span.type": "resource",
+      "id": ">www.google.co.kr:443"
+    },
+    {
+      "label": "www.google.co.ma:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.co.ma:443",
+      "span.type": "resource",
+      "id": ">www.google.co.ma:443"
+    },
+    {
+      "label": "www.google.co.uk:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.co.uk:443",
+      "span.type": "resource",
+      "id": ">www.google.co.uk:443"
+    },
+    {
+      "label": "www.google.co.za:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.co.za:443",
+      "span.type": "resource",
+      "id": ">www.google.co.za:443"
+    },
+    {
+      "label": "www.google.com.ar:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.com.ar:443",
+      "span.type": "resource",
+      "id": ">www.google.com.ar:443"
+    },
+    {
+      "label": "www.google.com.au:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.com.au:443",
+      "span.type": "resource",
+      "id": ">www.google.com.au:443"
+    },
+    {
+      "label": "www.google.com.bo:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.com.bo:443",
+      "span.type": "resource",
+      "id": ">www.google.com.bo:443"
+    },
+    {
+      "label": "www.google.com.br:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.com.br:443",
+      "span.type": "resource",
+      "id": ">www.google.com.br:443"
+    },
+    {
+      "label": "www.google.com.co:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.com.co:443",
+      "span.type": "resource",
+      "id": ">www.google.com.co:443"
+    },
+    {
+      "label": "www.google.com.eg:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.com.eg:443",
+      "span.type": "resource",
+      "id": ">www.google.com.eg:443"
+    },
+    {
+      "label": "www.google.com.mm:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.com.mm:443",
+      "span.type": "resource",
+      "id": ">www.google.com.mm:443"
+    },
+    {
+      "label": "www.google.com.mx:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.com.mx:443",
+      "span.type": "resource",
+      "id": ">www.google.com.mx:443"
+    },
+    {
+      "label": "www.google.com.my:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.com.my:443",
+      "span.type": "resource",
+      "id": ">www.google.com.my:443"
+    },
+    {
+      "label": "www.google.com.pe:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.com.pe:443",
+      "span.type": "resource",
+      "id": ">www.google.com.pe:443"
+    },
+    {
+      "label": "www.google.com.sa:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.com.sa:443",
+      "span.type": "resource",
+      "id": ">www.google.com.sa:443"
+    },
+    {
+      "label": "www.google.com.sg:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.com.sg:443",
+      "span.type": "resource",
+      "id": ">www.google.com.sg:443"
+    },
+    {
+      "label": "www.google.com.tr:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.com.tr:443",
+      "span.type": "resource",
+      "id": ">www.google.com.tr:443"
+    },
+    {
+      "label": "www.google.com.ua:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.com.ua:443",
+      "span.type": "resource",
+      "id": ">www.google.com.ua:443"
+    },
+    {
+      "label": "www.google.com.uy:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.com.uy:443",
+      "span.type": "resource",
+      "id": ">www.google.com.uy:443"
+    },
+    {
+      "label": "www.google.com:443",
+      "span.subtype": "beacon",
+      "span.destination.service.resource": "www.google.com:443",
+      "span.type": "resource",
+      "id": ">www.google.com:443"
+    },
+    {
+      "label": "www.google.cz:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.cz:443",
+      "span.type": "resource",
+      "id": ">www.google.cz:443"
+    },
+    {
+      "label": "www.google.de:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.de:443",
+      "span.type": "resource",
+      "id": ">www.google.de:443"
+    },
+    {
+      "label": "www.google.dk:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.dk:443",
+      "span.type": "resource",
+      "id": ">www.google.dk:443"
+    },
+    {
+      "label": "www.google.es:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.es:443",
+      "span.type": "resource",
+      "id": ">www.google.es:443"
+    },
+    {
+      "label": "www.google.fr:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.fr:443",
+      "span.type": "resource",
+      "id": ">www.google.fr:443"
+    },
+    {
+      "label": "www.google.gr:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.gr:443",
+      "span.type": "resource",
+      "id": ">www.google.gr:443"
+    },
+    {
+      "label": "www.google.hu:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.hu:443",
+      "span.type": "resource",
+      "id": ">www.google.hu:443"
+    },
+    {
+      "label": "www.google.is:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.is:443",
+      "span.type": "resource",
+      "id": ">www.google.is:443"
+    },
+    {
+      "label": "www.google.it:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.it:443",
+      "span.type": "resource",
+      "id": ">www.google.it:443"
+    },
+    {
+      "label": "www.google.lk:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.lk:443",
+      "span.type": "resource",
+      "id": ">www.google.lk:443"
+    },
+    {
+      "label": "www.google.md:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.md:443",
+      "span.type": "resource",
+      "id": ">www.google.md:443"
+    },
+    {
+      "label": "www.google.mk:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.mk:443",
+      "span.type": "resource",
+      "id": ">www.google.mk:443"
+    },
+    {
+      "label": "www.google.nl:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.nl:443",
+      "span.type": "resource",
+      "id": ">www.google.nl:443"
+    },
+    {
+      "label": "www.google.no:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.no:443",
+      "span.type": "resource",
+      "id": ">www.google.no:443"
+    },
+    {
+      "label": "www.google.pl:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.pl:443",
+      "span.type": "resource",
+      "id": ">www.google.pl:443"
+    },
+    {
+      "label": "www.google.pt:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.pt:443",
+      "span.type": "resource",
+      "id": ">www.google.pt:443"
+    },
+    {
+      "label": "www.google.ro:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.ro:443",
+      "span.type": "resource",
+      "id": ">www.google.ro:443"
+    },
+    {
+      "label": "www.google.rs:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.rs:443",
+      "span.type": "resource",
+      "id": ">www.google.rs:443"
+    },
+    {
+      "label": "www.google.ru:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.ru:443",
+      "span.type": "resource",
+      "id": ">www.google.ru:443"
+    },
+    {
+      "label": "www.google.se:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.se:443",
+      "span.type": "resource",
+      "id": ">www.google.se:443"
+    },
+    {
+      "label": "www.google.tn:443",
+      "span.subtype": "img",
+      "span.destination.service.resource": "www.google.tn:443",
+      "span.type": "resource",
+      "id": ">www.google.tn:443"
+    },
+    {
+      "label": "www.googleadservices.com:443",
+      "span.subtype": "script",
+      "span.destination.service.resource": "www.googleadservices.com:443",
+      "span.type": "resource",
+      "id": ">www.googleadservices.com:443"
+    },
+    {
+      "label": "www.googletagmanager.com:443",
+      "span.subtype": "script",
+      "span.destination.service.resource": "www.googletagmanager.com:443",
+      "span.type": "resource",
+      "id": ">www.googletagmanager.com:443"
+    },
+    {
+      "label": "www.gstatic.com:443",
+      "span.subtype": "css",
+      "span.destination.service.resource": "www.gstatic.com:443",
+      "span.type": "resource",
+      "id": ">www.gstatic.com:443"
+    },
+    {
+      "label": "www.iubenda.com:443",
+      "span.subtype": "script",
+      "span.destination.service.resource": "www.iubenda.com:443",
+      "span.type": "resource",
+      "id": ">www.iubenda.com:443"
+    },
+    {
+      "label": "www.slideshare.net:443",
+      "span.subtype": "iframe",
+      "span.destination.service.resource": "www.slideshare.net:443",
+      "span.type": "resource",
+      "id": ">www.slideshare.net:443"
+    },
+    {
+      "label": "www.youtube.com:443",
+      "span.subtype": "iframe",
+      "span.destination.service.resource": "www.youtube.com:443",
+      "span.type": "resource",
+      "id": ">www.youtube.com:443"
+    },
+    {
+      "label": "x.clearbit.com:443",
+      "span.subtype": "http",
+      "span.destination.service.resource": "x.clearbit.com:443",
+      "span.type": "external",
+      "id": ">x.clearbit.com:443"
+    }
+  ]
+}
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/example_response_one_domain_many_ips.json b/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/example_response_one_domain_many_ips.json
deleted file mode 100644
index f9b8a273d8577c..00000000000000
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/example_response_one_domain_many_ips.json
+++ /dev/null
@@ -1,2122 +0,0 @@
-{
-  "elements": [
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.99:80",
-        "id": "artifact_api~>192.0.2.99:80",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "http",
-          "span.destination.service.resource": "192.0.2.99:80",
-          "span.type": "external",
-          "id": ">192.0.2.99:80",
-          "label": ">192.0.2.99:80"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.47:443",
-        "id": "artifact_api~>192.0.2.47:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.47:443",
-          "span.type": "external",
-          "id": ">192.0.2.47:443",
-          "label": ">192.0.2.47:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.13:443",
-        "id": "artifact_api~>192.0.2.13:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.13:443",
-          "span.type": "external",
-          "id": ">192.0.2.13:443",
-          "label": ">192.0.2.13:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.106:443",
-        "id": "artifact_api~>192.0.2.106:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.106:443",
-          "span.type": "external",
-          "id": ">192.0.2.106:443",
-          "label": ">192.0.2.106:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.83:443",
-        "id": "artifact_api~>192.0.2.83:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.83:443",
-          "span.type": "external",
-          "id": ">192.0.2.83:443",
-          "label": ">192.0.2.83:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.111:443",
-        "id": "artifact_api~>192.0.2.111:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.111:443",
-          "span.type": "external",
-          "id": ">192.0.2.111:443",
-          "label": ">192.0.2.111:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.189:443",
-        "id": "artifact_api~>192.0.2.189:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.189:443",
-          "span.type": "external",
-          "id": ">192.0.2.189:443",
-          "label": ">192.0.2.189:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.148:443",
-        "id": "artifact_api~>192.0.2.148:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.148:443",
-          "span.type": "external",
-          "id": ">192.0.2.148:443",
-          "label": ">192.0.2.148:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.39:443",
-        "id": "artifact_api~>192.0.2.39:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.39:443",
-          "span.type": "external",
-          "id": ">192.0.2.39:443",
-          "label": ">192.0.2.39:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.42:443",
-        "id": "artifact_api~>192.0.2.42:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.42:443",
-          "span.type": "external",
-          "id": ">192.0.2.42:443",
-          "label": ">192.0.2.42:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.240:443",
-        "id": "artifact_api~>192.0.2.240:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.240:443",
-          "span.type": "external",
-          "id": ">192.0.2.240:443",
-          "label": ">192.0.2.240:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.156:443",
-        "id": "artifact_api~>192.0.2.156:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.156:443",
-          "span.type": "external",
-          "id": ">192.0.2.156:443",
-          "label": ">192.0.2.156:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.245:443",
-        "id": "artifact_api~>192.0.2.245:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.245:443",
-          "span.type": "external",
-          "id": ">192.0.2.245:443",
-          "label": ">192.0.2.245:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.198:443",
-        "id": "artifact_api~>192.0.2.198:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.198:443",
-          "span.type": "external",
-          "id": ">192.0.2.198:443",
-          "label": ">192.0.2.198:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.77:443",
-        "id": "artifact_api~>192.0.2.77:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.77:443",
-          "span.type": "external",
-          "id": ">192.0.2.77:443",
-          "label": ">192.0.2.77:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.8:443",
-        "id": "artifact_api~>192.0.2.8:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.8:443",
-          "span.type": "external",
-          "id": ">192.0.2.8:443",
-          "label": ">192.0.2.8:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.69:443",
-        "id": "artifact_api~>192.0.2.69:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.69:443",
-          "span.type": "external",
-          "id": ">192.0.2.69:443",
-          "label": ">192.0.2.69:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.5:443",
-        "id": "artifact_api~>192.0.2.5:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.5:443",
-          "span.type": "external",
-          "id": ">192.0.2.5:443",
-          "label": ">192.0.2.5:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.139:443",
-        "id": "artifact_api~>192.0.2.139:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.139:443",
-          "span.type": "external",
-          "id": ">192.0.2.139:443",
-          "label": ">192.0.2.139:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.113:443",
-        "id": "artifact_api~>192.0.2.113:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.113:443",
-          "span.type": "external",
-          "id": ">192.0.2.113:443",
-          "label": ">192.0.2.113:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.2:443",
-        "id": "artifact_api~>192.0.2.2:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.2:443",
-          "span.type": "external",
-          "id": ">192.0.2.2:443",
-          "label": ">192.0.2.2:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.213:443",
-        "id": "artifact_api~>192.0.2.213:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.213:443",
-          "span.type": "external",
-          "id": ">192.0.2.213:443",
-          "label": ">192.0.2.213:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.153:443",
-        "id": "artifact_api~>192.0.2.153:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.153:443",
-          "span.type": "external",
-          "id": ">192.0.2.153:443",
-          "label": ">192.0.2.153:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.36:443",
-        "id": "artifact_api~>192.0.2.36:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.36:443",
-          "span.type": "external",
-          "id": ">192.0.2.36:443",
-          "label": ">192.0.2.36:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.164:443",
-        "id": "artifact_api~>192.0.2.164:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.164:443",
-          "span.type": "external",
-          "id": ">192.0.2.164:443",
-          "label": ">192.0.2.164:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.190:443",
-        "id": "artifact_api~>192.0.2.190:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.190:443",
-          "span.type": "external",
-          "id": ">192.0.2.190:443",
-          "label": ">192.0.2.190:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.9:443",
-        "id": "artifact_api~>192.0.2.9:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.9:443",
-          "span.type": "external",
-          "id": ">192.0.2.9:443",
-          "label": ">192.0.2.9:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.210:443",
-        "id": "artifact_api~>192.0.2.210:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.210:443",
-          "span.type": "external",
-          "id": ">192.0.2.210:443",
-          "label": ">192.0.2.210:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.21:443",
-        "id": "artifact_api~>192.0.2.21:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.21:443",
-          "span.type": "external",
-          "id": ">192.0.2.21:443",
-          "label": ">192.0.2.21:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.176:443",
-        "id": "artifact_api~>192.0.2.176:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.176:443",
-          "span.type": "external",
-          "id": ">192.0.2.176:443",
-          "label": ">192.0.2.176:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.81:443",
-        "id": "artifact_api~>192.0.2.81:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.81:443",
-          "span.type": "external",
-          "id": ">192.0.2.81:443",
-          "label": ">192.0.2.81:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.118:443",
-        "id": "artifact_api~>192.0.2.118:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.118:443",
-          "span.type": "external",
-          "id": ">192.0.2.118:443",
-          "label": ">192.0.2.118:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.103:443",
-        "id": "artifact_api~>192.0.2.103:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.103:443",
-          "span.type": "external",
-          "id": ">192.0.2.103:443",
-          "label": ">192.0.2.103:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.3:443",
-        "id": "artifact_api~>192.0.2.3:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.3:443",
-          "span.type": "external",
-          "id": ">192.0.2.3:443",
-          "label": ">192.0.2.3:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.135:443",
-        "id": "artifact_api~>192.0.2.135:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.135:443",
-          "span.type": "external",
-          "id": ">192.0.2.135:443",
-          "label": ">192.0.2.135:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.26:443",
-        "id": "artifact_api~>192.0.2.26:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.26:443",
-          "span.type": "external",
-          "id": ">192.0.2.26:443",
-          "label": ">192.0.2.26:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.185:443",
-        "id": "artifact_api~>192.0.2.185:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.185:443",
-          "span.type": "external",
-          "id": ">192.0.2.185:443",
-          "label": ">192.0.2.185:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.173:443",
-        "id": "artifact_api~>192.0.2.173:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.173:443",
-          "span.type": "external",
-          "id": ">192.0.2.173:443",
-          "label": ">192.0.2.173:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.45:443",
-        "id": "artifact_api~>192.0.2.45:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.45:443",
-          "span.type": "external",
-          "id": ">192.0.2.45:443",
-          "label": ">192.0.2.45:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.144:443",
-        "id": "artifact_api~>192.0.2.144:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.144:443",
-          "span.type": "external",
-          "id": ">192.0.2.144:443",
-          "label": ">192.0.2.144:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.165:443",
-        "id": "artifact_api~>192.0.2.165:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.165:443",
-          "span.type": "external",
-          "id": ">192.0.2.165:443",
-          "label": ">192.0.2.165:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.119:443",
-        "id": "artifact_api~>192.0.2.119:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.119:443",
-          "span.type": "external",
-          "id": ">192.0.2.119:443",
-          "label": ">192.0.2.119:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.186:443",
-        "id": "artifact_api~>192.0.2.186:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.186:443",
-          "span.type": "external",
-          "id": ">192.0.2.186:443",
-          "label": ">192.0.2.186:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.54:443",
-        "id": "artifact_api~>192.0.2.54:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.54:443",
-          "span.type": "external",
-          "id": ">192.0.2.54:443",
-          "label": ">192.0.2.54:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.23:443",
-        "id": "artifact_api~>192.0.2.23:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.23:443",
-          "span.type": "external",
-          "id": ">192.0.2.23:443",
-          "label": ">192.0.2.23:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.34:443",
-        "id": "artifact_api~>192.0.2.34:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.34:443",
-          "span.type": "external",
-          "id": ">192.0.2.34:443",
-          "label": ">192.0.2.34:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.169:443",
-        "id": "artifact_api~>192.0.2.169:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.169:443",
-          "span.type": "external",
-          "id": ">192.0.2.169:443",
-          "label": ">192.0.2.169:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.226:443",
-        "id": "artifact_api~>192.0.2.226:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.226:443",
-          "span.type": "external",
-          "id": ">192.0.2.226:443",
-          "label": ">192.0.2.226:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.82:443",
-        "id": "artifact_api~>192.0.2.82:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.82:443",
-          "span.type": "external",
-          "id": ">192.0.2.82:443",
-          "label": ">192.0.2.82:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.132:443",
-        "id": "artifact_api~>192.0.2.132:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.132:443",
-          "span.type": "external",
-          "id": ">192.0.2.132:443",
-          "label": ">192.0.2.132:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.78:443",
-        "id": "artifact_api~>192.0.2.78:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.78:443",
-          "span.type": "external",
-          "id": ">192.0.2.78:443",
-          "label": ">192.0.2.78:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.71:443",
-        "id": "artifact_api~>192.0.2.71:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.71:443",
-          "span.type": "external",
-          "id": ">192.0.2.71:443",
-          "label": ">192.0.2.71:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.48:443",
-        "id": "artifact_api~>192.0.2.48:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.48:443",
-          "span.type": "external",
-          "id": ">192.0.2.48:443",
-          "label": ">192.0.2.48:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.107:443",
-        "id": "artifact_api~>192.0.2.107:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.107:443",
-          "span.type": "external",
-          "id": ">192.0.2.107:443",
-          "label": ">192.0.2.107:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.239:443",
-        "id": "artifact_api~>192.0.2.239:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.239:443",
-          "span.type": "external",
-          "id": ">192.0.2.239:443",
-          "label": ">192.0.2.239:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.209:443",
-        "id": "artifact_api~>192.0.2.209:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.209:443",
-          "span.type": "external",
-          "id": ">192.0.2.209:443",
-          "label": ">192.0.2.209:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.248:443",
-        "id": "artifact_api~>192.0.2.248:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.248:443",
-          "span.type": "external",
-          "id": ">192.0.2.248:443",
-          "label": ">192.0.2.248:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.18:443",
-        "id": "artifact_api~>192.0.2.18:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.18:443",
-          "span.type": "external",
-          "id": ">192.0.2.18:443",
-          "label": ">192.0.2.18:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.228:443",
-        "id": "artifact_api~>192.0.2.228:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.228:443",
-          "span.type": "external",
-          "id": ">192.0.2.228:443",
-          "label": ">192.0.2.228:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.145:443",
-        "id": "artifact_api~>192.0.2.145:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.145:443",
-          "span.type": "external",
-          "id": ">192.0.2.145:443",
-          "label": ">192.0.2.145:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.25:443",
-        "id": "artifact_api~>192.0.2.25:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.25:443",
-          "span.type": "external",
-          "id": ">192.0.2.25:443",
-          "label": ">192.0.2.25:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.162:443",
-        "id": "artifact_api~>192.0.2.162:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.162:443",
-          "span.type": "external",
-          "id": ">192.0.2.162:443",
-          "label": ">192.0.2.162:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.202:443",
-        "id": "artifact_api~>192.0.2.202:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.202:443",
-          "span.type": "external",
-          "id": ">192.0.2.202:443",
-          "label": ">192.0.2.202:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.60:443",
-        "id": "artifact_api~>192.0.2.60:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.60:443",
-          "span.type": "external",
-          "id": ">192.0.2.60:443",
-          "label": ">192.0.2.60:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.59:443",
-        "id": "artifact_api~>192.0.2.59:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.59:443",
-          "span.type": "external",
-          "id": ">192.0.2.59:443",
-          "label": ">192.0.2.59:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.114:443",
-        "id": "artifact_api~>192.0.2.114:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.114:443",
-          "span.type": "external",
-          "id": ">192.0.2.114:443",
-          "label": ">192.0.2.114:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.215:443",
-        "id": "artifact_api~>192.0.2.215:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.215:443",
-          "span.type": "external",
-          "id": ">192.0.2.215:443",
-          "label": ">192.0.2.215:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.238:443",
-        "id": "artifact_api~>192.0.2.238:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.238:443",
-          "span.type": "external",
-          "id": ">192.0.2.238:443",
-          "label": ">192.0.2.238:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.160:443",
-        "id": "artifact_api~>192.0.2.160:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.160:443",
-          "span.type": "external",
-          "id": ">192.0.2.160:443",
-          "label": ">192.0.2.160:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "source": "artifact_api",
-        "target": ">192.0.2.70:443",
-        "id": "artifact_api~>192.0.2.70:443",
-        "sourceData": {
-          "id": "artifact_api",
-          "service.environment": "development",
-          "service.name": "artifact_api",
-          "agent.name": "nodejs",
-          "service.framework.name": "express"
-        },
-        "targetData": {
-          "span.subtype": "https",
-          "span.destination.service.resource": "192.0.2.70:443",
-          "span.type": "external",
-          "id": ">192.0.2.70:443",
-          "label": ">192.0.2.70:443"
-        }
-      }
-    },
-    {
-      "data": {
-        "id": "artifact_api",
-        "service.environment": "development",
-        "service.name": "artifact_api",
-        "agent.name": "nodejs",
-        "service.framework.name": "express"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "http",
-        "span.destination.service.resource": "192.0.2.99:80",
-        "span.type": "external",
-        "id": ">192.0.2.99:80",
-        "label": ">192.0.2.99:80"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.186:443",
-        "span.type": "external",
-        "id": ">192.0.2.186:443",
-        "label": ">192.0.2.186:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.78:443",
-        "span.type": "external",
-        "id": ">192.0.2.78:443",
-        "label": ">192.0.2.78:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.226:443",
-        "span.type": "external",
-        "id": ">192.0.2.226:443",
-        "label": ">192.0.2.226:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.245:443",
-        "span.type": "external",
-        "id": ">192.0.2.245:443",
-        "label": ">192.0.2.245:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.77:443",
-        "span.type": "external",
-        "id": ">192.0.2.77:443",
-        "label": ">192.0.2.77:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.2:443",
-        "span.type": "external",
-        "id": ">192.0.2.2:443",
-        "label": ">192.0.2.2:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.198:443",
-        "span.type": "external",
-        "id": ">192.0.2.198:443",
-        "label": ">192.0.2.198:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.113:443",
-        "span.type": "external",
-        "id": ">192.0.2.113:443",
-        "label": ">192.0.2.113:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.39:443",
-        "span.type": "external",
-        "id": ">192.0.2.39:443",
-        "label": ">192.0.2.39:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.83:443",
-        "span.type": "external",
-        "id": ">192.0.2.83:443",
-        "label": ">192.0.2.83:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.5:443",
-        "span.type": "external",
-        "id": ">192.0.2.5:443",
-        "label": ">192.0.2.5:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.165:443",
-        "span.type": "external",
-        "id": ">192.0.2.165:443",
-        "label": ">192.0.2.165:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.156:443",
-        "span.type": "external",
-        "id": ">192.0.2.156:443",
-        "label": ">192.0.2.156:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.132:443",
-        "span.type": "external",
-        "id": ">192.0.2.132:443",
-        "label": ">192.0.2.132:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.240:443",
-        "span.type": "external",
-        "id": ">192.0.2.240:443",
-        "label": ">192.0.2.240:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.54:443",
-        "span.type": "external",
-        "id": ">192.0.2.54:443",
-        "label": ">192.0.2.54:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.213:443",
-        "span.type": "external",
-        "id": ">192.0.2.213:443",
-        "label": ">192.0.2.213:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.81:443",
-        "span.type": "external",
-        "id": ">192.0.2.81:443",
-        "label": ">192.0.2.81:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.176:443",
-        "span.type": "external",
-        "id": ">192.0.2.176:443",
-        "label": ">192.0.2.176:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.82:443",
-        "span.type": "external",
-        "id": ">192.0.2.82:443",
-        "label": ">192.0.2.82:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.23:443",
-        "span.type": "external",
-        "id": ">192.0.2.23:443",
-        "label": ">192.0.2.23:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.189:443",
-        "span.type": "external",
-        "id": ">192.0.2.189:443",
-        "label": ">192.0.2.189:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.190:443",
-        "span.type": "external",
-        "id": ">192.0.2.190:443",
-        "label": ">192.0.2.190:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.119:443",
-        "span.type": "external",
-        "id": ">192.0.2.119:443",
-        "label": ">192.0.2.119:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.169:443",
-        "span.type": "external",
-        "id": ">192.0.2.169:443",
-        "label": ">192.0.2.169:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.210:443",
-        "span.type": "external",
-        "id": ">192.0.2.210:443",
-        "label": ">192.0.2.210:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.148:443",
-        "span.type": "external",
-        "id": ">192.0.2.148:443",
-        "label": ">192.0.2.148:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.26:443",
-        "span.type": "external",
-        "id": ">192.0.2.26:443",
-        "label": ">192.0.2.26:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.139:443",
-        "span.type": "external",
-        "id": ">192.0.2.139:443",
-        "label": ">192.0.2.139:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.111:443",
-        "span.type": "external",
-        "id": ">192.0.2.111:443",
-        "label": ">192.0.2.111:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.13:443",
-        "span.type": "external",
-        "id": ">192.0.2.13:443",
-        "label": ">192.0.2.13:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.36:443",
-        "span.type": "external",
-        "id": ">192.0.2.36:443",
-        "label": ">192.0.2.36:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.69:443",
-        "span.type": "external",
-        "id": ">192.0.2.69:443",
-        "label": ">192.0.2.69:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.173:443",
-        "span.type": "external",
-        "id": ">192.0.2.173:443",
-        "label": ">192.0.2.173:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.144:443",
-        "span.type": "external",
-        "id": ">192.0.2.144:443",
-        "label": ">192.0.2.144:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.135:443",
-        "span.type": "external",
-        "id": ">192.0.2.135:443",
-        "label": ">192.0.2.135:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.21:443",
-        "span.type": "external",
-        "id": ">192.0.2.21:443",
-        "label": ">192.0.2.21:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.118:443",
-        "span.type": "external",
-        "id": ">192.0.2.118:443",
-        "label": ">192.0.2.118:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.42:443",
-        "span.type": "external",
-        "id": ">192.0.2.42:443",
-        "label": ">192.0.2.42:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.106:443",
-        "span.type": "external",
-        "id": ">192.0.2.106:443",
-        "label": ">192.0.2.106:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.3:443",
-        "span.type": "external",
-        "id": ">192.0.2.3:443",
-        "label": ">192.0.2.3:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.34:443",
-        "span.type": "external",
-        "id": ">192.0.2.34:443",
-        "label": ">192.0.2.34:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.185:443",
-        "span.type": "external",
-        "id": ">192.0.2.185:443",
-        "label": ">192.0.2.185:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.153:443",
-        "span.type": "external",
-        "id": ">192.0.2.153:443",
-        "label": ">192.0.2.153:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.9:443",
-        "span.type": "external",
-        "id": ">192.0.2.9:443",
-        "label": ">192.0.2.9:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.164:443",
-        "span.type": "external",
-        "id": ">192.0.2.164:443",
-        "label": ">192.0.2.164:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.47:443",
-        "span.type": "external",
-        "id": ">192.0.2.47:443",
-        "label": ">192.0.2.47:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.45:443",
-        "span.type": "external",
-        "id": ">192.0.2.45:443",
-        "label": ">192.0.2.45:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.8:443",
-        "span.type": "external",
-        "id": ">192.0.2.8:443",
-        "label": ">192.0.2.8:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.103:443",
-        "span.type": "external",
-        "id": ">192.0.2.103:443",
-        "label": ">192.0.2.103:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.60:443",
-        "span.type": "external",
-        "id": ">192.0.2.60:443",
-        "label": ">192.0.2.60:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.202:443",
-        "span.type": "external",
-        "id": ">192.0.2.202:443",
-        "label": ">192.0.2.202:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.70:443",
-        "span.type": "external",
-        "id": ">192.0.2.70:443",
-        "label": ">192.0.2.70:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.114:443",
-        "span.type": "external",
-        "id": ">192.0.2.114:443",
-        "label": ">192.0.2.114:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.25:443",
-        "span.type": "external",
-        "id": ">192.0.2.25:443",
-        "label": ">192.0.2.25:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.209:443",
-        "span.type": "external",
-        "id": ">192.0.2.209:443",
-        "label": ">192.0.2.209:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.248:443",
-        "span.type": "external",
-        "id": ">192.0.2.248:443",
-        "label": ">192.0.2.248:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.18:443",
-        "span.type": "external",
-        "id": ">192.0.2.18:443",
-        "label": ">192.0.2.18:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.107:443",
-        "span.type": "external",
-        "id": ">192.0.2.107:443",
-        "label": ">192.0.2.107:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.160:443",
-        "span.type": "external",
-        "id": ">192.0.2.160:443",
-        "label": ">192.0.2.160:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.228:443",
-        "span.type": "external",
-        "id": ">192.0.2.228:443",
-        "label": ">192.0.2.228:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.215:443",
-        "span.type": "external",
-        "id": ">192.0.2.215:443",
-        "label": ">192.0.2.215:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.162:443",
-        "span.type": "external",
-        "id": ">192.0.2.162:443",
-        "label": ">192.0.2.162:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.238:443",
-        "span.type": "external",
-        "id": ">192.0.2.238:443",
-        "label": ">192.0.2.238:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.145:443",
-        "span.type": "external",
-        "id": ">192.0.2.145:443",
-        "label": ">192.0.2.145:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.239:443",
-        "span.type": "external",
-        "id": ">192.0.2.239:443",
-        "label": ">192.0.2.239:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.59:443",
-        "span.type": "external",
-        "id": ">192.0.2.59:443",
-        "label": ">192.0.2.59:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.71:443",
-        "span.type": "external",
-        "id": ">192.0.2.71:443",
-        "label": ">192.0.2.71:443"
-      }
-    },
-    {
-      "data": {
-        "span.subtype": "https",
-        "span.destination.service.resource": "192.0.2.48:443",
-        "span.type": "external",
-        "id": ">192.0.2.48:443",
-        "label": ">192.0.2.48:443"
-      }
-    },
-    {
-      "data": {
-        "service.name": "graphics-worker",
-        "agent.name": "nodejs",
-        "service.environment": null,
-        "service.framework.name": null,
-        "id": "graphics-worker"
-      }
-    }
-  ]
-}
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/EmptyBanner.test.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/empty_banner.test.tsx
similarity index 95%
rename from x-pack/plugins/apm/public/components/app/ServiceMap/EmptyBanner.test.tsx
rename to x-pack/plugins/apm/public/components/app/ServiceMap/empty_banner.test.tsx
index f314fbbb1fba0f..ae27d4d3baf759 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/EmptyBanner.test.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/empty_banner.test.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { act, wait } from '@testing-library/react';
+import { act, waitFor } from '@testing-library/react';
 import cytoscape from 'cytoscape';
 import React, { ReactNode } from 'react';
 import { MockApmPluginContextWrapper } from '../../../context/ApmPluginContext/MockApmPluginContext';
@@ -60,7 +60,7 @@ describe('EmptyBanner', () => {
 
       await act(async () => {
         cy.add({ data: { id: 'test id' } });
-        await wait(() => {
+        await waitFor(() => {
           expect(component.container.children.length).toBeGreaterThan(0);
         });
       });
diff --git a/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.tsx.snap b/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/service_overview.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.tsx.snap
rename to x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/service_overview.test.tsx.snap
diff --git a/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/ServiceOverview.test.tsx b/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/service_overview.test.tsx
similarity index 87%
rename from x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/ServiceOverview.test.tsx
rename to x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/service_overview.test.tsx
index d8c8f25616560f..06e9008d5aebed 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/ServiceOverview.test.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/service_overview.test.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { render, wait, waitForElement } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import { CoreStart } from 'kibana/public';
 import { merge } from 'lodash';
 import React, { FunctionComponent, ReactChild } from 'react';
@@ -129,11 +129,11 @@ describe('Service Overview -> View', () => {
       ],
     });
 
-    const { container, getByText } = renderServiceOverview();
+    const { container, findByText } = renderServiceOverview();
 
     // wait for requests to be made
-    await wait(() => expect(httpGet).toHaveBeenCalledTimes(1));
-    await waitForElement(() => getByText('My Python Service'));
+    await waitFor(() => expect(httpGet).toHaveBeenCalledTimes(1));
+    await findByText('My Python Service');
 
     expect(container.querySelectorAll('.euiTableRow')).toMatchSnapshot();
   });
@@ -145,16 +145,14 @@ describe('Service Overview -> View', () => {
       items: [],
     });
 
-    const { container, getByText } = renderServiceOverview();
+    const { container, findByText } = renderServiceOverview();
 
     // wait for requests to be made
-    await wait(() => expect(httpGet).toHaveBeenCalledTimes(1));
+    await waitFor(() => expect(httpGet).toHaveBeenCalledTimes(1));
 
     // wait for elements to be rendered
-    await waitForElement(() =>
-      getByText(
-        "Looks like you don't have any APM services installed. Let's add some!"
-      )
+    await findByText(
+      "Looks like you don't have any APM services installed. Let's add some!"
     );
 
     expect(container.querySelectorAll('.euiTableRow')).toMatchSnapshot();
@@ -167,11 +165,11 @@ describe('Service Overview -> View', () => {
       items: [],
     });
 
-    const { container, getByText } = renderServiceOverview();
+    const { container, findByText } = renderServiceOverview();
 
     // wait for requests to be made
-    await wait(() => expect(httpGet).toHaveBeenCalledTimes(1));
-    await waitForElement(() => getByText('No services found'));
+    await waitFor(() => expect(httpGet).toHaveBeenCalledTimes(1));
+    await findByText('No services found');
 
     expect(container.querySelectorAll('.euiTableRow')).toMatchSnapshot();
   });
@@ -187,7 +185,7 @@ describe('Service Overview -> View', () => {
       renderServiceOverview();
 
       // wait for requests to be made
-      await wait(() => expect(httpGet).toHaveBeenCalledTimes(1));
+      await waitFor(() => expect(httpGet).toHaveBeenCalledTimes(1));
 
       expect(addWarning).toHaveBeenLastCalledWith(
         expect.objectContaining({
@@ -208,7 +206,7 @@ describe('Service Overview -> View', () => {
       renderServiceOverview();
 
       // wait for requests to be made
-      await wait(() => expect(httpGet).toHaveBeenCalledTimes(1));
+      await waitFor(() => expect(httpGet).toHaveBeenCalledTimes(1));
 
       expect(addWarning).not.toHaveBeenCalled();
     });
@@ -234,7 +232,7 @@ describe('Service Overview -> View', () => {
       const { queryByText } = renderServiceOverview();
 
       // wait for requests to be made
-      await wait(() => expect(httpGet).toHaveBeenCalledTimes(1));
+      await waitFor(() => expect(httpGet).toHaveBeenCalledTimes(1));
 
       expect(queryByText('Health')).toBeNull();
     });
@@ -261,7 +259,7 @@ describe('Service Overview -> View', () => {
       const { queryAllByText } = renderServiceOverview();
 
       // wait for requests to be made
-      await wait(() => expect(httpGet).toHaveBeenCalledTimes(1));
+      await waitFor(() => expect(httpGet).toHaveBeenCalledTimes(1));
 
       expect(queryAllByText('Health').length).toBeGreaterThan(1);
     });
diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/LinkPreview.test.tsx b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/link_preview.test.tsx
similarity index 97%
rename from x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/LinkPreview.test.tsx
rename to x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/link_preview.test.tsx
index 62aa08c223bdeb..4ccfc5b3013e97 100644
--- a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/LinkPreview.test.tsx
+++ b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/link_preview.test.tsx
@@ -10,7 +10,7 @@ import {
   getNodeText,
   getByTestId,
   act,
-  wait,
+  waitFor,
 } from '@testing-library/react';
 import * as apmApi from '../../../../../../services/rest/createCallApmApi';
 
@@ -82,7 +82,7 @@ describe('LinkPreview', () => {
         filters={[{ key: '', value: '' }]}
       />
     );
-    await wait(() => expect(callApmApiSpy).toHaveBeenCalled());
+    await waitFor(() => expect(callApmApiSpy).toHaveBeenCalled());
     expect(getElementValue(container, 'preview-label')).toEqual('foo');
     expect(
       (getByTestId(container, 'preview-link') as HTMLAnchorElement).text
diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.test.tsx b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.test.tsx
index 56c420878cdba2..fea22e890dc10b 100644
--- a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.test.tsx
+++ b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.test.tsx
@@ -4,7 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { fireEvent, render, wait, RenderResult } from '@testing-library/react';
+import {
+  fireEvent,
+  render,
+  waitFor,
+  RenderResult,
+} from '@testing-library/react';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import * as apmApi from '../../../../../services/rest/createCallApmApi';
@@ -181,7 +186,7 @@ describe('CustomLink', () => {
       act(() => {
         fireEvent.click(editButtons[0]);
       });
-      await wait(() =>
+      await waitFor(() =>
         expect(component.queryByText('Create link')).toBeInTheDocument()
       );
       await act(async () => {
diff --git a/x-pack/plugins/apm/public/components/app/TraceLink/__test__/TraceLink.test.tsx b/x-pack/plugins/apm/public/components/app/TraceLink/trace_link.test.tsx
similarity index 83%
rename from x-pack/plugins/apm/public/components/app/TraceLink/__test__/TraceLink.test.tsx
rename to x-pack/plugins/apm/public/components/app/TraceLink/trace_link.test.tsx
index 8d37a8e54d87cb..e7c0400290dcb7 100644
--- a/x-pack/plugins/apm/public/components/app/TraceLink/__test__/TraceLink.test.tsx
+++ b/x-pack/plugins/apm/public/components/app/TraceLink/trace_link.test.tsx
@@ -3,18 +3,18 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { render } from '@testing-library/react';
+import { act, render, waitFor } from '@testing-library/react';
 import { shallow } from 'enzyme';
 import React, { ReactNode } from 'react';
 import { MemoryRouter, RouteComponentProps } from 'react-router-dom';
-import { TraceLink } from '../';
-import { ApmPluginContextValue } from '../../../../context/ApmPluginContext';
+import { TraceLink } from './';
+import { ApmPluginContextValue } from '../../../context/ApmPluginContext';
 import {
   mockApmPluginContextValue,
   MockApmPluginContextWrapper,
-} from '../../../../context/ApmPluginContext/MockApmPluginContext';
-import * as hooks from '../../../../hooks/useFetcher';
-import * as urlParamsHooks from '../../../../hooks/useUrlParams';
+} from '../../../context/ApmPluginContext/MockApmPluginContext';
+import * as hooks from '../../../hooks/useFetcher';
+import * as urlParamsHooks from '../../../hooks/useUrlParams';
 
 function Wrapper({ children }: { children?: ReactNode }) {
   return (
@@ -43,13 +43,18 @@ describe('TraceLink', () => {
     jest.clearAllMocks();
   });
 
-  it('renders a transition page', () => {
+  it('renders a transition page', async () => {
     const props = ({
       match: { params: { traceId: 'x' } },
     } as unknown) as RouteComponentProps<{ traceId: string }>;
-    const component = render(<TraceLink {...props} />, renderOptions);
+    let result;
+    act(() => {
+      const component = render(<TraceLink {...props} />, renderOptions);
 
-    expect(component.getByText('Fetching trace...')).toBeDefined();
+      result = component.getByText('Fetching trace...');
+    });
+    await waitFor(() => {});
+    expect(result).toBeDefined();
   });
 
   describe('when no transaction is found', () => {
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/WaterfallContainer.stories.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/WaterfallContainer.stories.tsx
index 8e3d0effb97a6d..e3ba02ce42c2e1 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/WaterfallContainer.stories.tsx
+++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/WaterfallContainer.stories.tsx
@@ -4,102 +4,95 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
-import { storiesOf } from '@storybook/react';
+import React, { ComponentType } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { EuiThemeProvider } from '../../../../../../../observability/public';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { TraceAPIResponse } from '../../../../../../server/lib/traces/get_trace';
+import { MockApmPluginContextWrapper } from '../../../../../context/ApmPluginContext/MockApmPluginContext';
 import { WaterfallContainer } from './index';
+import { getWaterfall } from './Waterfall/waterfall_helpers/waterfall_helpers';
 import {
+  inferredSpans,
   location,
-  urlParams,
   simpleTrace,
-  traceWithErrors,
   traceChildStartBeforeParent,
-  inferredSpans,
+  traceWithErrors,
+  urlParams,
 } from './waterfallContainer.stories.data';
-import { getWaterfall } from './Waterfall/waterfall_helpers/waterfall_helpers';
-import { EuiThemeProvider } from '../../../../../../../observability/public';
 
-storiesOf('app/TransactionDetails/Waterfall', module)
-  .addDecorator((storyFn) => <EuiThemeProvider>{storyFn()}</EuiThemeProvider>)
-  .add(
-    'example',
-    () => {
-      const waterfall = getWaterfall(
-        simpleTrace as TraceAPIResponse,
-        '975c8d5bfd1dd20b'
-      );
-      return (
-        <WaterfallContainer
-          location={location}
-          urlParams={urlParams}
-          waterfall={waterfall}
-          exceedsMax={false}
-        />
-      );
-    },
-    { info: { propTablesExclude: [EuiThemeProvider], source: false } }
+export default {
+  title: 'app/TransactionDetails/Waterfall',
+  component: WaterfallContainer,
+  decorators: [
+    (Story: ComponentType) => (
+      <MemoryRouter>
+        <EuiThemeProvider>
+          <MockApmPluginContextWrapper>
+            <Story />
+          </MockApmPluginContextWrapper>
+        </EuiThemeProvider>
+      </MemoryRouter>
+    ),
+  ],
+};
+
+export function Example() {
+  const waterfall = getWaterfall(
+    simpleTrace as TraceAPIResponse,
+    '975c8d5bfd1dd20b'
+  );
+  return (
+    <WaterfallContainer
+      location={location}
+      urlParams={urlParams}
+      waterfall={waterfall}
+      exceedsMax={false}
+    />
   );
+}
 
-storiesOf('app/TransactionDetails/Waterfall', module)
-  .addDecorator((storyFn) => <EuiThemeProvider>{storyFn()}</EuiThemeProvider>)
-  .add(
-    'with errors',
-    () => {
-      const waterfall = getWaterfall(
-        (traceWithErrors as unknown) as TraceAPIResponse,
-        '975c8d5bfd1dd20b'
-      );
-      return (
-        <WaterfallContainer
-          location={location}
-          urlParams={urlParams}
-          waterfall={waterfall}
-          exceedsMax={false}
-        />
-      );
-    },
-    { info: { propTablesExclude: [EuiThemeProvider], source: false } }
+export function WithErrors() {
+  const waterfall = getWaterfall(
+    (traceWithErrors as unknown) as TraceAPIResponse,
+    '975c8d5bfd1dd20b'
   );
+  return (
+    <WaterfallContainer
+      location={location}
+      urlParams={urlParams}
+      waterfall={waterfall}
+      exceedsMax={false}
+    />
+  );
+}
 
-storiesOf('app/TransactionDetails/Waterfall', module)
-  .addDecorator((storyFn) => <EuiThemeProvider>{storyFn()}</EuiThemeProvider>)
-  .add(
-    'child starts before parent',
-    () => {
-      const waterfall = getWaterfall(
-        traceChildStartBeforeParent as TraceAPIResponse,
-        '975c8d5bfd1dd20b'
-      );
-      return (
-        <WaterfallContainer
-          location={location}
-          urlParams={urlParams}
-          waterfall={waterfall}
-          exceedsMax={false}
-        />
-      );
-    },
-    { info: { propTablesExclude: [EuiThemeProvider], source: false } }
+export function ChildStartsBeforeParent() {
+  const waterfall = getWaterfall(
+    traceChildStartBeforeParent as TraceAPIResponse,
+    '975c8d5bfd1dd20b'
+  );
+  return (
+    <WaterfallContainer
+      location={location}
+      urlParams={urlParams}
+      waterfall={waterfall}
+      exceedsMax={false}
+    />
   );
+}
 
-storiesOf('app/TransactionDetails/Waterfall', module)
-  .addDecorator((storyFn) => <EuiThemeProvider>{storyFn()}</EuiThemeProvider>)
-  .add(
-    'inferred spans',
-    () => {
-      const waterfall = getWaterfall(
-        inferredSpans as TraceAPIResponse,
-        'f2387d37260d00bd'
-      );
-      return (
-        <WaterfallContainer
-          location={location}
-          urlParams={urlParams}
-          waterfall={waterfall}
-          exceedsMax={false}
-        />
-      );
-    },
-    { info: { propTablesExclude: [EuiThemeProvider], source: false } }
+export function InferredSpans() {
+  const waterfall = getWaterfall(
+    inferredSpans as TraceAPIResponse,
+    'f2387d37260d00bd'
+  );
+  return (
+    <WaterfallContainer
+      location={location}
+      urlParams={urlParams}
+      waterfall={waterfall}
+      exceedsMax={false}
+    />
   );
+}
diff --git a/x-pack/plugins/apm/public/components/app/TransactionOverview/TransactionList/TransactionList.stories.tsx b/x-pack/plugins/apm/public/components/app/TransactionOverview/TransactionList/TransactionList.stories.tsx
index a65589bdd147f8..049c5934813a22 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionOverview/TransactionList/TransactionList.stories.tsx
+++ b/x-pack/plugins/apm/public/components/app/TransactionOverview/TransactionList/TransactionList.stories.tsx
@@ -4,33 +4,45 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { storiesOf } from '@storybook/react';
-import React from 'react';
+import React, { ComponentType } from 'react';
+import { MemoryRouter } from 'react-router-dom';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { TransactionGroup } from '../../../../../server/lib/transaction_groups/fetcher';
+import { MockApmPluginContextWrapper } from '../../../../context/ApmPluginContext/MockApmPluginContext';
 import { TransactionList } from './';
 
-storiesOf('app/TransactionOverview/TransactionList', module).add(
-  'Single Row',
-  () => {
-    const items: TransactionGroup[] = [
-      {
-        key: {
-          ['service.name']: 'adminconsole',
-          ['transaction.name']:
-            'GET /api/v1/regions/azure-eastus2/clusters/elasticsearch/xc18de071deb4262be54baebf5f6a1ce/proxy/_snapshot/found-snapshots/_all',
-        },
-        transactionName:
+export default {
+  title: 'app/TransactionOverview/TransactionList',
+  component: TransactionList,
+  decorators: [
+    (Story: ComponentType) => (
+      <MockApmPluginContextWrapper>
+        <MemoryRouter>
+          <Story />
+        </MemoryRouter>
+      </MockApmPluginContextWrapper>
+    ),
+  ],
+};
+
+export function SingleRow() {
+  const items: TransactionGroup[] = [
+    {
+      key: {
+        ['service.name']: 'adminconsole',
+        ['transaction.name']:
           'GET /api/v1/regions/azure-eastus2/clusters/elasticsearch/xc18de071deb4262be54baebf5f6a1ce/proxy/_snapshot/found-snapshots/_all',
-        serviceName: 'adminconsole',
-        transactionType: 'request',
-        p95: 11974156,
-        averageResponseTime: 8087434.558974359,
-        transactionsPerMinute: 0.40625,
-        impact: 100,
       },
-    ];
+      transactionName:
+        'GET /api/v1/regions/azure-eastus2/clusters/elasticsearch/xc18de071deb4262be54baebf5f6a1ce/proxy/_snapshot/found-snapshots/_all',
+      serviceName: 'adminconsole',
+      transactionType: 'request',
+      p95: 11974156,
+      averageResponseTime: 8087434.558974359,
+      transactionsPerMinute: 0.40625,
+      impact: 100,
+    },
+  ];
 
-    return <TransactionList isLoading={false} items={items} />;
-  }
-);
+  return <TransactionList isLoading={false} items={items} />;
+}
diff --git a/x-pack/plugins/apm/public/components/shared/ApmHeader/ApmHeader.stories.tsx b/x-pack/plugins/apm/public/components/shared/ApmHeader/ApmHeader.stories.tsx
deleted file mode 100644
index c9b7c774098404..00000000000000
--- a/x-pack/plugins/apm/public/components/shared/ApmHeader/ApmHeader.stories.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { EuiTitle } from '@elastic/eui';
-import { storiesOf } from '@storybook/react';
-import React from 'react';
-import { MockApmPluginContextWrapper } from '../../../context/ApmPluginContext/MockApmPluginContext';
-import { ApmHeader } from './';
-
-storiesOf('shared/ApmHeader', module)
-  .addDecorator((storyFn) => {
-    return (
-      <MockApmPluginContextWrapper>{storyFn()}</MockApmPluginContextWrapper>
-    );
-  })
-  .add('Example', () => {
-    return (
-      <ApmHeader>
-        <EuiTitle size="l">
-          <h1>
-            GET
-            /api/v1/regions/azure-eastus2/clusters/elasticsearch/xc18de071deb4262be54baebf5f6a1ce/proxy/_snapshot/found-snapshots/_all
-          </h1>
-        </EuiTitle>
-      </ApmHeader>
-    );
-  });
diff --git a/x-pack/plugins/apm/public/components/shared/ApmHeader/apm_header.stories.tsx b/x-pack/plugins/apm/public/components/shared/ApmHeader/apm_header.stories.tsx
new file mode 100644
index 00000000000000..4078998bc7e3e8
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/shared/ApmHeader/apm_header.stories.tsx
@@ -0,0 +1,49 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiTitle } from '@elastic/eui';
+import React, { ComponentType } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { HttpSetup } from '../../../../../../../src/core/public';
+import { MockApmPluginContextWrapper } from '../../../context/ApmPluginContext/MockApmPluginContext';
+import { MockUrlParamsContextProvider } from '../../../context/UrlParamsContext/MockUrlParamsContextProvider';
+import { createCallApmApi } from '../../../services/rest/createCallApmApi';
+import { ApmHeader } from './';
+
+export default {
+  title: 'shared/ApmHeader',
+  component: ApmHeader,
+  decorators: [
+    (Story: ComponentType) => {
+      createCallApmApi(({} as unknown) as HttpSetup);
+
+      return (
+        <MockUrlParamsContextProvider
+          params={{ rangeFrom: 'now-15m', rangeTo: 'now' }}
+        >
+          <MockApmPluginContextWrapper>
+            <MemoryRouter>
+              <Story />
+            </MemoryRouter>
+          </MockApmPluginContextWrapper>
+        </MockUrlParamsContextProvider>
+      );
+    },
+  ],
+};
+
+export function Example() {
+  return (
+    <ApmHeader>
+      <EuiTitle size="l">
+        <h1>
+          GET
+          /api/v1/regions/azure-eastus2/clusters/elasticsearch/xc18de071deb4262be54baebf5f6a1ce/proxy/_snapshot/found-snapshots/_all
+        </h1>
+      </EuiTitle>
+    </ApmHeader>
+  );
+}
diff --git a/x-pack/plugins/apm/public/components/shared/DatePicker/__test__/DatePicker.test.tsx b/x-pack/plugins/apm/public/components/shared/DatePicker/date_picker.test.tsx
similarity index 91%
rename from x-pack/plugins/apm/public/components/shared/DatePicker/__test__/DatePicker.test.tsx
rename to x-pack/plugins/apm/public/components/shared/DatePicker/date_picker.test.tsx
index 9de70d50b25e17..efa827a0e5df84 100644
--- a/x-pack/plugins/apm/public/components/shared/DatePicker/__test__/DatePicker.test.tsx
+++ b/x-pack/plugins/apm/public/components/shared/DatePicker/date_picker.test.tsx
@@ -5,18 +5,18 @@
  */
 
 import { EuiSuperDatePicker } from '@elastic/eui';
-import { wait } from '@testing-library/react';
+import { waitFor } from '@testing-library/react';
 import { mount } from 'enzyme';
 import { createMemoryHistory } from 'history';
 import React, { ReactNode } from 'react';
 import { Router } from 'react-router-dom';
-import { MockApmPluginContextWrapper } from '../../../../context/ApmPluginContext/MockApmPluginContext';
+import { MockApmPluginContextWrapper } from '../../../context/ApmPluginContext/MockApmPluginContext';
 import {
   UrlParamsContext,
   useUiFilters,
-} from '../../../../context/UrlParamsContext';
-import { IUrlParams } from '../../../../context/UrlParamsContext/types';
-import { DatePicker } from '../index';
+} from '../../../context/UrlParamsContext';
+import { IUrlParams } from '../../../context/UrlParamsContext/types';
+import { DatePicker } from './';
 
 const history = createMemoryHistory();
 const mockHistoryPush = jest.spyOn(history, 'push');
@@ -124,7 +124,7 @@ describe('DatePicker', () => {
     });
     expect(mockRefreshTimeRange).not.toHaveBeenCalled();
     jest.advanceTimersByTime(1000);
-    await wait();
+    await waitFor(() => {});
     expect(mockRefreshTimeRange).toHaveBeenCalled();
     wrapper.unmount();
   });
@@ -134,7 +134,7 @@ describe('DatePicker', () => {
     mountDatePicker({ refreshPaused: true, refreshInterval: 1000 });
     expect(mockRefreshTimeRange).not.toHaveBeenCalled();
     jest.advanceTimersByTime(1000);
-    await wait();
+    await waitFor(() => {});
     expect(mockRefreshTimeRange).not.toHaveBeenCalled();
   });
 });
diff --git a/x-pack/plugins/apm/public/components/shared/LicensePrompt/LicensePrompt.stories.tsx b/x-pack/plugins/apm/public/components/shared/LicensePrompt/LicensePrompt.stories.tsx
index 45fa3dd3822660..1819e71a49753a 100644
--- a/x-pack/plugins/apm/public/components/shared/LicensePrompt/LicensePrompt.stories.tsx
+++ b/x-pack/plugins/apm/public/components/shared/LicensePrompt/LicensePrompt.stories.tsx
@@ -4,31 +4,31 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { storiesOf } from '@storybook/react';
-import React from 'react';
+import React, { ComponentType } from 'react';
+import { LicensePrompt } from '.';
 import {
   ApmPluginContext,
   ApmPluginContextValue,
 } from '../../../context/ApmPluginContext';
-import { LicensePrompt } from '.';
 
-storiesOf('app/LicensePrompt', module).add(
-  'example',
-  () => {
-    const contextMock = ({
-      core: { http: { basePath: { prepend: () => {} } } },
-    } as unknown) as ApmPluginContextValue;
+const contextMock = ({
+  core: { http: { basePath: { prepend: () => {} } } },
+} as unknown) as ApmPluginContextValue;
 
-    return (
+export default {
+  title: 'app/LicensePrompt',
+  component: LicensePrompt,
+  decorators: [
+    (Story: ComponentType) => (
       <ApmPluginContext.Provider value={contextMock}>
-        <LicensePrompt text="To create Feature name, you must be subscribed to an Elastic X license or above." />
+        <Story />{' '}
       </ApmPluginContext.Provider>
-    );
-  },
-  {
-    info: {
-      propTablesExclude: [ApmPluginContext.Provider, LicensePrompt],
-      source: false,
-    },
-  }
-);
+    ),
+  ],
+};
+
+export function Example() {
+  return (
+    <LicensePrompt text="To create Feature name, you must be subscribed to an Elastic X license or above." />
+  );
+}
diff --git a/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/__snapshots__/DiscoverTransactionButton.test.tsx.snap b/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/__snapshots__/discover_transaction_button.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/__snapshots__/DiscoverTransactionButton.test.tsx.snap
rename to x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/__snapshots__/discover_transaction_button.test.tsx.snap
diff --git a/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/DiscoverTransactionButton.test.tsx b/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/discover_transaction_button.test.tsx
similarity index 78%
rename from x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/DiscoverTransactionButton.test.tsx
rename to x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/discover_transaction_button.test.tsx
index 17dca4796ec749..4a68a5c0b4904a 100644
--- a/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/DiscoverTransactionButton.test.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/discover_transaction_button.test.tsx
@@ -11,12 +11,11 @@ import {
   DiscoverTransactionLink,
   getDiscoverQuery,
 } from '../DiscoverTransactionLink';
-import mockTransaction from './mockTransaction.json';
+import mockTransaction from './mock_transaction.json';
 
 describe('DiscoverTransactionLink component', () => {
   it('should render with data', () => {
-    // @ts-expect-error invalid json mock
-    const transaction: Transaction = mockTransaction;
+    const transaction = mockTransaction as Transaction;
 
     expect(
       shallow(<DiscoverTransactionLink transaction={transaction} />)
@@ -26,8 +25,7 @@ describe('DiscoverTransactionLink component', () => {
 
 describe('getDiscoverQuery', () => {
   it('should return the correct query params object', () => {
-    // @ts-expect-error invalid json mock
-    const transaction: Transaction = mockTransaction;
+    const transaction = mockTransaction as Transaction;
     const result = getDiscoverQuery(transaction);
     expect(result).toMatchSnapshot();
   });
diff --git a/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/mockTransaction.json b/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/mock_transaction.json
similarity index 98%
rename from x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/mockTransaction.json
rename to x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/mock_transaction.json
index 4d038cd7e8397a..6c08eedf50b06b 100644
--- a/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/mockTransaction.json
+++ b/x-pack/plugins/apm/public/components/shared/Links/DiscoverLinks/__test__/mock_transaction.json
@@ -1,6 +1,7 @@
 {
   "agent": {
     "hostname": "227453131a17",
+    "name": "go",
     "type": "apm-server",
     "version": "7.0.0"
   },
@@ -91,9 +92,7 @@
     },
     "name": "GET /api/products/:id/customers",
     "span_count": {
-      "dropped": {
-        "total": 0
-      },
+      "dropped": 0,
       "started": 1
     },
     "id": "8b60bd32ecc6e150",
diff --git a/x-pack/plugins/apm/public/components/shared/Links/apm/AnomalyDetectionSetupLink.test.tsx b/x-pack/plugins/apm/public/components/shared/Links/apm/anomaly_detection_setup_link.test.tsx
similarity index 96%
rename from x-pack/plugins/apm/public/components/shared/Links/apm/AnomalyDetectionSetupLink.test.tsx
rename to x-pack/plugins/apm/public/components/shared/Links/apm/anomaly_detection_setup_link.test.tsx
index 585ab22b5fb278..3f675f494a661b 100644
--- a/x-pack/plugins/apm/public/components/shared/Links/apm/AnomalyDetectionSetupLink.test.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Links/apm/anomaly_detection_setup_link.test.tsx
@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { render, fireEvent, wait } from '@testing-library/react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
 import { MissingJobsAlert } from './AnomalyDetectionSetupLink';
 import * as hooks from '../../../../hooks/useFetcher';
 
@@ -33,7 +33,7 @@ async function renderTooltipAnchor({
     fireEvent.mouseOver(toolTipAnchor);
 
     // wait for tooltip text to be in the DOM
-    await wait(() => {
+    await waitFor(() => {
       const toolTipText = baseElement.querySelector('.euiToolTipPopover')
         ?.textContent;
       expect(toolTipText).not.toBe(undefined);
diff --git a/x-pack/plugins/apm/public/context/UrlParamsContext/__tests__/UrlParamsContext.test.tsx b/x-pack/plugins/apm/public/context/UrlParamsContext/url_params_context.test.tsx
similarity index 94%
rename from x-pack/plugins/apm/public/context/UrlParamsContext/__tests__/UrlParamsContext.test.tsx
rename to x-pack/plugins/apm/public/context/UrlParamsContext/url_params_context.test.tsx
index 9989e568953f50..3a6ccce178cd4c 100644
--- a/x-pack/plugins/apm/public/context/UrlParamsContext/__tests__/UrlParamsContext.test.tsx
+++ b/x-pack/plugins/apm/public/context/UrlParamsContext/url_params_context.test.tsx
@@ -5,14 +5,14 @@
  */
 
 import * as React from 'react';
-import { UrlParamsContext, UrlParamsProvider } from '..';
+import { UrlParamsContext, UrlParamsProvider } from './';
 import { mount } from 'enzyme';
 import { Location, History } from 'history';
 import { MemoryRouter, Router } from 'react-router-dom';
 import moment from 'moment-timezone';
-import { IUrlParams } from '../types';
-import { getParsedDate } from '../helpers';
-import { wait } from '@testing-library/react';
+import { IUrlParams } from './types';
+import { getParsedDate } from './helpers';
+import { waitFor } from '@testing-library/react';
 
 function mountParams(location: Location) {
   return mount(
@@ -119,13 +119,13 @@ describe('UrlParamsContext', () => {
       </Router>
     );
 
-    await wait();
+    await waitFor(() => {});
 
     expect(calls.length).toBe(1);
 
     wrapper.find('button').simulate('click');
 
-    await wait();
+    await waitFor(() => {});
 
     expect(calls.length).toBe(2);
 
@@ -170,11 +170,11 @@ describe('UrlParamsContext', () => {
       </Router>
     );
 
-    await wait();
+    await waitFor(() => {});
 
     wrapper.find('button').simulate('click');
 
-    await wait();
+    await waitFor(() => {});
 
     const params = getDataFromOutput(wrapper);
     expect(params.start).toEqual('2000-06-14T00:00:00.000Z');
diff --git a/x-pack/plugins/apm/public/hooks/useFetcher.integration.test.tsx b/x-pack/plugins/apm/public/hooks/use_fetcher.integration.test.tsx
similarity index 94%
rename from x-pack/plugins/apm/public/hooks/useFetcher.integration.test.tsx
rename to x-pack/plugins/apm/public/hooks/use_fetcher.integration.test.tsx
index 0081662200b934..e837851828d94f 100644
--- a/x-pack/plugins/apm/public/hooks/useFetcher.integration.test.tsx
+++ b/x-pack/plugins/apm/public/hooks/use_fetcher.integration.test.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { render, wait } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import React from 'react';
 import { delay } from '../utils/testHelpers';
 import { useFetcher } from './useFetcher';
@@ -65,7 +65,7 @@ describe('when simulating race condition', () => {
   it('should render "Hello from Peter" after 200ms', async () => {
     jest.advanceTimersByTime(200);
 
-    await wait();
+    await waitFor(() => {});
 
     expect(renderSpy).lastCalledWith({
       data: 'Hello from Peter',
@@ -76,7 +76,7 @@ describe('when simulating race condition', () => {
 
   it('should render "Hello from Peter" after 600ms', async () => {
     jest.advanceTimersByTime(600);
-    await wait();
+    await waitFor(() => {});
 
     expect(renderSpy).lastCalledWith({
       data: 'Hello from Peter',
@@ -87,7 +87,7 @@ describe('when simulating race condition', () => {
 
   it('should should NOT have rendered "Hello from John" at any point', async () => {
     jest.advanceTimersByTime(600);
-    await wait();
+    await waitFor(() => {});
 
     expect(renderSpy).not.toHaveBeenCalledWith({
       data: 'Hello from John',
@@ -98,7 +98,7 @@ describe('when simulating race condition', () => {
 
   it('should send and receive calls in the right order', async () => {
     jest.advanceTimersByTime(600);
-    await wait();
+    await waitFor(() => {});
 
     expect(requestCallOrder).toEqual([
       ['request', 'John', 500],
diff --git a/x-pack/plugins/apm/public/utils/testHelpers.tsx b/x-pack/plugins/apm/public/utils/testHelpers.tsx
index 7826e9672a3bbe..f990c4387ddf12 100644
--- a/x-pack/plugins/apm/public/utils/testHelpers.tsx
+++ b/x-pack/plugins/apm/public/utils/testHelpers.tsx
@@ -12,7 +12,7 @@ import enzymeToJson from 'enzyme-to-json';
 import { Location } from 'history';
 import moment from 'moment';
 import { Moment } from 'moment-timezone';
-import { render, waitForElement } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { APMConfig } from '../../server';
@@ -75,10 +75,10 @@ export async function getRenderedHref(Component: React.FC, location: Location) {
       </MemoryRouter>
     </MockApmPluginContextWrapper>
   );
+  const a = el.container.querySelector('a');
 
-  await waitForElement(() => el.container.querySelector('a'));
+  await waitFor(() => {}, { container: a! });
 
-  const a = el.container.querySelector('a');
   return a ? a.getAttribute('href') : '';
 }
 
diff --git a/x-pack/plugins/apm/server/lib/service_map/group_resource_nodes.test.ts b/x-pack/plugins/apm/server/lib/service_map/group_resource_nodes.test.ts
index 23ef3f92e21a24..c3238963eedeed 100644
--- a/x-pack/plugins/apm/server/lib/service_map/group_resource_nodes.test.ts
+++ b/x-pack/plugins/apm/server/lib/service_map/group_resource_nodes.test.ts
@@ -4,14 +4,16 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { ConnectionElement } from '../../../common/service_map';
 import { groupResourceNodes } from './group_resource_nodes';
-import preGroupedData from './mock_responses/group_resource_nodes_pregrouped.json';
 import expectedGroupedData from './mock_responses/group_resource_nodes_grouped.json';
+import preGroupedData from './mock_responses/group_resource_nodes_pregrouped.json';
 
 describe('groupResourceNodes', () => {
   it('should group external nodes', () => {
-    // @ts-expect-error invalid json mock
-    const responseWithGroups = groupResourceNodes(preGroupedData);
+    const responseWithGroups = groupResourceNodes(
+      preGroupedData as { elements: ConnectionElement[] }
+    );
     expect(responseWithGroups.elements).toHaveLength(
       expectedGroupedData.elements.length
     );
diff --git a/x-pack/plugins/apm/server/lib/services/annotations/__fixtures__/no_versions.json b/x-pack/plugins/apm/server/lib/services/annotations/__fixtures__/no_versions.json
index fa5c63f1b9a543..863d4bed998e91 100644
--- a/x-pack/plugins/apm/server/lib/services/annotations/__fixtures__/no_versions.json
+++ b/x-pack/plugins/apm/server/lib/services/annotations/__fixtures__/no_versions.json
@@ -12,7 +12,7 @@
       "value": 10000,
       "relation": "gte"
     },
-    "max_score": null,
+    "max_score": 0,
     "hits": []
   },
   "aggregations": {
diff --git a/x-pack/plugins/apm/server/lib/services/annotations/__fixtures__/one_version.json b/x-pack/plugins/apm/server/lib/services/annotations/__fixtures__/one_version.json
index 56303909bcd6f3..d74f7bf82c2b9e 100644
--- a/x-pack/plugins/apm/server/lib/services/annotations/__fixtures__/one_version.json
+++ b/x-pack/plugins/apm/server/lib/services/annotations/__fixtures__/one_version.json
@@ -12,7 +12,7 @@
       "value": 10000,
       "relation": "gte"
     },
-    "max_score": null,
+    "max_score": 0,
     "hits": []
   },
   "aggregations": {
diff --git a/x-pack/plugins/apm/server/lib/services/annotations/index.test.ts b/x-pack/plugins/apm/server/lib/services/annotations/index.test.ts
index 9bd9c7b7a10404..f30b77f1477100 100644
--- a/x-pack/plugins/apm/server/lib/services/annotations/index.test.ts
+++ b/x-pack/plugins/apm/server/lib/services/annotations/index.test.ts
@@ -3,14 +3,18 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { getDerivedServiceAnnotations } from './get_derived_service_annotations';
 import {
-  SearchParamsMock,
+  ESSearchRequest,
+  ESSearchResponse,
+} from '../../../../typings/elasticsearch';
+import {
   inspectSearchParams,
+  SearchParamsMock,
 } from '../../../utils/test_helpers';
+import { getDerivedServiceAnnotations } from './get_derived_service_annotations';
+import multipleVersions from './__fixtures__/multiple_versions.json';
 import noVersions from './__fixtures__/no_versions.json';
 import oneVersion from './__fixtures__/one_version.json';
-import multipleVersions from './__fixtures__/multiple_versions.json';
 import versionsFirstSeen from './__fixtures__/versions_first_seen.json';
 
 describe('getServiceAnnotations', () => {
@@ -31,8 +35,14 @@ describe('getServiceAnnotations', () => {
             searchAggregatedTransactions: false,
           }),
         {
-          // @ts-expect-error invalid json mock
-          mockResponse: () => noVersions,
+          mockResponse: () =>
+            noVersions as ESSearchResponse<
+              unknown,
+              ESSearchRequest,
+              {
+                restTotalHitsAsInt: false;
+              }
+            >,
         }
       );
 
@@ -51,8 +61,14 @@ describe('getServiceAnnotations', () => {
             searchAggregatedTransactions: false,
           }),
         {
-          // @ts-expect-error invalid json mock
-          mockResponse: () => oneVersion,
+          mockResponse: () =>
+            oneVersion as ESSearchResponse<
+              unknown,
+              ESSearchRequest,
+              {
+                restTotalHitsAsInt: false;
+              }
+            >,
         }
       );
 
@@ -76,8 +92,14 @@ describe('getServiceAnnotations', () => {
             searchAggregatedTransactions: false,
           }),
         {
-          // @ts-expect-error invalid json mock
-          mockResponse: () => responses.shift(),
+          mockResponse: () =>
+            (responses.shift() as unknown) as ESSearchResponse<
+              unknown,
+              ESSearchRequest,
+              {
+                restTotalHitsAsInt: false;
+              }
+            >,
         }
       );
 
diff --git a/x-pack/plugins/dashboard_enhanced/kibana.json b/x-pack/plugins/dashboard_enhanced/kibana.json
index 264fa0438ea118..f79a69c9f4aba5 100644
--- a/x-pack/plugins/dashboard_enhanced/kibana.json
+++ b/x-pack/plugins/dashboard_enhanced/kibana.json
@@ -6,6 +6,7 @@
   "requiredPlugins": ["data", "uiActionsEnhanced", "embeddable", "dashboard", "share"],
   "configPath": ["xpack", "dashboardEnhanced"],
   "requiredBundles": [
+    "embeddable",
     "kibanaUtils",
     "embeddableEnhanced",
     "kibanaReact",
diff --git a/x-pack/plugins/dashboard_enhanced/public/index.ts b/x-pack/plugins/dashboard_enhanced/public/index.ts
index 53540a4a1ad2e9..8bc1dfc9d6c565 100644
--- a/x-pack/plugins/dashboard_enhanced/public/index.ts
+++ b/x-pack/plugins/dashboard_enhanced/public/index.ts
@@ -14,6 +14,12 @@ export {
   StartDependencies as DashboardEnhancedStartDependencies,
 } from './plugin';
 
+export {
+  AbstractDashboardDrilldown as DashboardEnhancedAbstractDashboardDrilldown,
+  AbstractDashboardDrilldownConfig as DashboardEnhancedAbstractDashboardDrilldownConfig,
+  AbstractDashboardDrilldownParams as DashboardEnhancedAbstractDashboardDrilldownParams,
+} from './services/drilldowns/abstract_dashboard_drilldown';
+
 export function plugin(context: PluginInitializerContext) {
   return new DashboardEnhancedPlugin(context);
 }
diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/abstract_dashboard_drilldown.tsx b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/abstract_dashboard_drilldown.tsx
new file mode 100644
index 00000000000000..b098d66619814e
--- /dev/null
+++ b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/abstract_dashboard_drilldown.tsx
@@ -0,0 +1,89 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { DataPublicPluginStart } from 'src/plugins/data/public';
+import { DashboardStart } from 'src/plugins/dashboard/public';
+import { reactToUiComponent } from '../../../../../../../src/plugins/kibana_react/public';
+import {
+  TriggerId,
+  TriggerContextMapping,
+} from '../../../../../../../src/plugins/ui_actions/public';
+import { CollectConfigContainer } from './components';
+import {
+  UiActionsEnhancedDrilldownDefinition as Drilldown,
+  UiActionsEnhancedBaseActionFactoryContext as BaseActionFactoryContext,
+  AdvancedUiActionsStart,
+} from '../../../../../ui_actions_enhanced/public';
+import { txtGoToDashboard } from './i18n';
+import {
+  StartServicesGetter,
+  CollectConfigProps,
+} from '../../../../../../../src/plugins/kibana_utils/public';
+import { KibanaURL } from '../../../../../../../src/plugins/share/public';
+import { Config } from './types';
+
+export interface Params {
+  start: StartServicesGetter<{
+    uiActionsEnhanced: AdvancedUiActionsStart;
+    data: DataPublicPluginStart;
+    dashboard: DashboardStart;
+  }>;
+}
+
+export abstract class AbstractDashboardDrilldown<T extends TriggerId>
+  implements Drilldown<Config, T, BaseActionFactoryContext<T>> {
+  constructor(protected readonly params: Params) {}
+
+  public abstract readonly id: string;
+
+  public abstract readonly supportedTriggers: () => T[];
+
+  protected abstract getURL(config: Config, context: TriggerContextMapping[T]): Promise<KibanaURL>;
+
+  public readonly order = 100;
+
+  public readonly getDisplayName = () => txtGoToDashboard;
+
+  public readonly euiIcon = 'dashboardApp';
+
+  private readonly ReactCollectConfig: React.FC<
+    CollectConfigProps<Config, BaseActionFactoryContext<T>>
+  > = (props) => <CollectConfigContainer {...props} params={this.params} />;
+
+  public readonly CollectConfig = reactToUiComponent(this.ReactCollectConfig);
+
+  public readonly createConfig = () => ({
+    dashboardId: '',
+    useCurrentFilters: true,
+    useCurrentDateRange: true,
+  });
+
+  public readonly isConfigValid = (config: Config): config is Config => {
+    if (!config.dashboardId) return false;
+    return true;
+  };
+
+  public readonly getHref = async (
+    config: Config,
+    context: TriggerContextMapping[T]
+  ): Promise<string> => {
+    const url = await this.getURL(config, context);
+    return url.path;
+  };
+
+  public readonly execute = async (config: Config, context: TriggerContextMapping[T]) => {
+    const url = await this.getURL(config, context);
+    await this.params.start().core.application.navigateToApp(url.appName, { path: url.appPath });
+  };
+
+  protected get urlGenerator() {
+    const urlGenerator = this.params.start().plugins.dashboard.dashboardUrlGenerator;
+    if (!urlGenerator)
+      throw new Error('Dashboard URL generator is required for dashboard drilldown.');
+    return urlGenerator;
+  }
+}
diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/collect_config_container.tsx b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/collect_config_container.tsx
similarity index 96%
rename from x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/collect_config_container.tsx
rename to x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/collect_config_container.tsx
index 5cbf65f7645dd5..ddae64d1c0e49a 100644
--- a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/collect_config_container.tsx
+++ b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/collect_config_container.tsx
@@ -11,8 +11,8 @@ import { SimpleSavedObject } from '../../../../../../../../src/core/public';
 import { DashboardDrilldownConfig } from './dashboard_drilldown_config';
 import { txtDestinationDashboardNotFound } from './i18n';
 import { CollectConfigProps } from '../../../../../../../../src/plugins/kibana_utils/public';
-import { Config, FactoryContext } from '../types';
-import { Params } from '../drilldown';
+import { Config } from '../types';
+import { Params } from '../abstract_dashboard_drilldown';
 
 const mergeDashboards = (
   dashboards: Array<EuiComboBoxOptionOption<string>>,
@@ -34,7 +34,7 @@ const dashboardSavedObjectToMenuItem = (
   label: savedObject.attributes.title,
 });
 
-interface DashboardDrilldownCollectConfigProps extends CollectConfigProps<Config, FactoryContext> {
+export interface DashboardDrilldownCollectConfigProps extends CollectConfigProps<Config, object> {
   params: Params;
 }
 
diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/dashboard_drilldown_config/dashboard_drilldown_config.stories.tsx b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/dashboard_drilldown_config/dashboard_drilldown_config.story.tsx
similarity index 100%
rename from x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/dashboard_drilldown_config/dashboard_drilldown_config.stories.tsx
rename to x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/dashboard_drilldown_config/dashboard_drilldown_config.story.tsx
diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/dashboard_drilldown_config/dashboard_drilldown_config.test.tsx b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/dashboard_drilldown_config/dashboard_drilldown_config.test.tsx
similarity index 100%
rename from x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/dashboard_drilldown_config/dashboard_drilldown_config.test.tsx
rename to x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/dashboard_drilldown_config/dashboard_drilldown_config.test.tsx
diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/dashboard_drilldown_config/dashboard_drilldown_config.tsx b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/dashboard_drilldown_config/dashboard_drilldown_config.tsx
similarity index 100%
rename from x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/dashboard_drilldown_config/dashboard_drilldown_config.tsx
rename to x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/dashboard_drilldown_config/dashboard_drilldown_config.tsx
diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/dashboard_drilldown_config/i18n.ts b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/dashboard_drilldown_config/i18n.ts
similarity index 100%
rename from x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/dashboard_drilldown_config/i18n.ts
rename to x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/dashboard_drilldown_config/i18n.ts
diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/dashboard_drilldown_config/index.ts b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/dashboard_drilldown_config/index.ts
similarity index 100%
rename from x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/dashboard_drilldown_config/index.ts
rename to x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/dashboard_drilldown_config/index.ts
diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/i18n.ts b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/i18n.ts
similarity index 100%
rename from x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/components/i18n.ts
rename to x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/i18n.ts
diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/index.ts b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/index.ts
similarity index 55%
rename from x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/index.ts
rename to x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/index.ts
index 49065a96b4f7b3..5ec560a55bdaf6 100644
--- a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/index.ts
+++ b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/components/index.ts
@@ -4,9 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { DASHBOARD_TO_DASHBOARD_DRILLDOWN } from './constants';
 export {
-  DashboardToDashboardDrilldown,
-  Params as DashboardToDashboardDrilldownParams,
-} from './drilldown';
-export { Config } from './types';
+  CollectConfigContainer,
+  DashboardDrilldownCollectConfigProps,
+} from './collect_config_container';
diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/i18n.ts b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/i18n.ts
similarity index 100%
rename from x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/i18n.ts
rename to x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/i18n.ts
diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/index.ts b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/index.ts
new file mode 100644
index 00000000000000..5fc823e3410941
--- /dev/null
+++ b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/index.ts
@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export {
+  AbstractDashboardDrilldown,
+  Params as AbstractDashboardDrilldownParams,
+} from './abstract_dashboard_drilldown';
+export { Config as AbstractDashboardDrilldownConfig } from './types';
diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/types.ts b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/types.ts
similarity index 100%
rename from x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/types.ts
rename to x-pack/plugins/dashboard_enhanced/public/services/drilldowns/abstract_dashboard_drilldown/types.ts
diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_create_drilldown/flyout_create_drilldown.tsx b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_create_drilldown/flyout_create_drilldown.tsx
index cd800baaf026e5..a2192808c2d401 100644
--- a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_create_drilldown/flyout_create_drilldown.tsx
+++ b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_create_drilldown/flyout_create_drilldown.tsx
@@ -83,7 +83,7 @@ export class FlyoutCreateDrilldownAction implements ActionByType<typeof OPEN_FLY
           onClose={() => handle.close()}
           viewMode={'create'}
           dynamicActionManager={embeddable.enhancements.dynamicActions}
-          supportedTriggers={ensureNestedTriggers(embeddable.supportedTriggers())}
+          triggers={ensureNestedTriggers(embeddable.supportedTriggers())}
           placeContext={{ embeddable }}
         />
       ),
diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_edit_drilldown/flyout_edit_drilldown.tsx b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_edit_drilldown/flyout_edit_drilldown.tsx
index 0469034094623f..56ef25005078b4 100644
--- a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_edit_drilldown/flyout_edit_drilldown.tsx
+++ b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_edit_drilldown/flyout_edit_drilldown.tsx
@@ -67,7 +67,7 @@ export class FlyoutEditDrilldownAction implements ActionByType<typeof OPEN_FLYOU
           onClose={() => handle.close()}
           viewMode={'manage'}
           dynamicActionManager={embeddable.enhancements.dynamicActions}
-          supportedTriggers={ensureNestedTriggers(embeddable.supportedTriggers())}
+          triggers={ensureNestedTriggers(embeddable.supportedTriggers())}
           placeContext={{ embeddable }}
         />
       ),
diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_drilldowns_services.ts b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_drilldowns_services.ts
index 4325e3309b898a..e1b6493be5200f 100644
--- a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_drilldowns_services.ts
+++ b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_drilldowns_services.ts
@@ -14,7 +14,7 @@ import {
   OPEN_FLYOUT_ADD_DRILLDOWN,
   OPEN_FLYOUT_EDIT_DRILLDOWN,
 } from './actions';
-import { DashboardToDashboardDrilldown } from './dashboard_to_dashboard_drilldown';
+import { EmbeddableToDashboardDrilldown } from './embeddable_to_dashboard_drilldown';
 import { createStartServicesGetter } from '../../../../../../src/plugins/kibana_utils/public';
 
 declare module '../../../../../../src/plugins/ui_actions/public' {
@@ -44,12 +44,6 @@ export class DashboardDrilldownsService {
     { uiActionsEnhanced: uiActions }: SetupDependencies
   ) {
     const start = createStartServicesGetter(core.getStartServices);
-    const getDashboardUrlGenerator = () => {
-      const urlGenerator = start().plugins.dashboard.dashboardUrlGenerator;
-      if (!urlGenerator)
-        throw new Error('dashboardUrlGenerator is required for dashboard to dashboard drilldown');
-      return urlGenerator;
-    };
 
     const actionFlyoutCreateDrilldown = new FlyoutCreateDrilldownAction({ start });
     uiActions.addTriggerAction(CONTEXT_MENU_TRIGGER, actionFlyoutCreateDrilldown);
@@ -57,10 +51,7 @@ export class DashboardDrilldownsService {
     const actionFlyoutEditDrilldown = new FlyoutEditDrilldownAction({ start });
     uiActions.addTriggerAction(CONTEXT_MENU_TRIGGER, actionFlyoutEditDrilldown);
 
-    const dashboardToDashboardDrilldown = new DashboardToDashboardDrilldown({
-      start,
-      getDashboardUrlGenerator,
-    });
+    const dashboardToDashboardDrilldown = new EmbeddableToDashboardDrilldown({ start });
     uiActions.registerDrilldown(dashboardToDashboardDrilldown);
   }
 }
diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/drilldown.tsx b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/drilldown.tsx
deleted file mode 100644
index 056feeb2b21678..00000000000000
--- a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/drilldown.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import React from 'react';
-import { reactToUiComponent } from '../../../../../../../src/plugins/kibana_react/public';
-import { APPLY_FILTER_TRIGGER } from '../../../../../../../src/plugins/ui_actions/public';
-import {
-  DashboardUrlGenerator,
-  DashboardUrlGeneratorState,
-} from '../../../../../../../src/plugins/dashboard/public';
-import { CollectConfigContainer } from './components';
-import { DASHBOARD_TO_DASHBOARD_DRILLDOWN } from './constants';
-import { UiActionsEnhancedDrilldownDefinition as Drilldown } from '../../../../../ui_actions_enhanced/public';
-import { txtGoToDashboard } from './i18n';
-import {
-  ApplyGlobalFilterActionContext,
-  esFilters,
-  isFilters,
-  isQuery,
-  isTimeRange,
-} from '../../../../../../../src/plugins/data/public';
-import { StartServicesGetter } from '../../../../../../../src/plugins/kibana_utils/public';
-import { StartDependencies } from '../../../plugin';
-import { Config, FactoryContext } from './types';
-import { SearchInput } from '../../../../../../../src/plugins/discover/public';
-
-export interface Params {
-  start: StartServicesGetter<Pick<StartDependencies, 'data' | 'uiActionsEnhanced'>>;
-  getDashboardUrlGenerator: () => DashboardUrlGenerator;
-}
-
-export class DashboardToDashboardDrilldown
-  implements Drilldown<Config, typeof APPLY_FILTER_TRIGGER, FactoryContext> {
-  constructor(protected readonly params: Params) {}
-
-  public readonly id = DASHBOARD_TO_DASHBOARD_DRILLDOWN;
-
-  public readonly order = 100;
-
-  public readonly getDisplayName = () => txtGoToDashboard;
-
-  public readonly euiIcon = 'dashboardApp';
-
-  private readonly ReactCollectConfig: React.FC<CollectConfigContainer['props']> = (props) => (
-    <CollectConfigContainer {...props} params={this.params} />
-  );
-
-  public readonly CollectConfig = reactToUiComponent(this.ReactCollectConfig);
-
-  public readonly createConfig = () => ({
-    dashboardId: '',
-    useCurrentFilters: true,
-    useCurrentDateRange: true,
-  });
-
-  public readonly isConfigValid = (config: Config): config is Config => {
-    if (!config.dashboardId) return false;
-    return true;
-  };
-
-  public supportedTriggers(): Array<typeof APPLY_FILTER_TRIGGER> {
-    return [APPLY_FILTER_TRIGGER];
-  }
-
-  public readonly getHref = async (
-    config: Config,
-    context: ApplyGlobalFilterActionContext
-  ): Promise<string> => {
-    return this.getDestinationUrl(config, context);
-  };
-
-  public readonly execute = async (config: Config, context: ApplyGlobalFilterActionContext) => {
-    const dashboardPath = await this.getDestinationUrl(config, context);
-    const dashboardHash = dashboardPath.split('#')[1];
-
-    await this.params.start().core.application.navigateToApp('dashboards', {
-      path: `#${dashboardHash}`,
-    });
-  };
-
-  private getDestinationUrl = async (
-    config: Config,
-    context: ApplyGlobalFilterActionContext
-  ): Promise<string> => {
-    const state: DashboardUrlGeneratorState = {
-      dashboardId: config.dashboardId,
-    };
-
-    if (context.embeddable) {
-      const input = context.embeddable.getInput() as Readonly<SearchInput>;
-      if (isQuery(input.query) && config.useCurrentFilters) state.query = input.query;
-
-      // if useCurrentDashboardDataRange is enabled, then preserve current time range
-      // if undefined is passed, then destination dashboard will figure out time range itself
-      // for brush event this time range would be overwritten
-      if (isTimeRange(input.timeRange) && config.useCurrentDateRange)
-        state.timeRange = input.timeRange;
-
-      // if useCurrentDashboardFilters enabled, then preserve all the filters (pinned and unpinned)
-      // otherwise preserve only pinned
-      if (isFilters(input.filters))
-        state.filters = config.useCurrentFilters
-          ? input.filters
-          : input.filters?.filter((f) => esFilters.isFilterPinned(f));
-    }
-
-    const {
-      restOfFilters: filtersFromEvent,
-      timeRange: timeRangeFromEvent,
-    } = esFilters.extractTimeRange(context.filters, context.timeFieldName);
-
-    if (filtersFromEvent) {
-      state.filters = [...(state.filters ?? []), ...filtersFromEvent];
-    }
-
-    if (timeRangeFromEvent) {
-      state.timeRange = timeRangeFromEvent;
-    }
-
-    return this.params.getDashboardUrlGenerator().createUrl(state);
-  };
-}
diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/constants.ts b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/constants.ts
similarity index 68%
rename from x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/constants.ts
rename to x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/constants.ts
index daefcf2d68cc53..922ec36619a4b9 100644
--- a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/constants.ts
+++ b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/constants.ts
@@ -5,10 +5,10 @@
  */
 
 /**
- * note:
- * don't change this string without carefull consideration,
- * because it is stored in saved objects.
+ * NOTE: DO NOT CHANGE THIS STRING WITHOUT CAREFUL CONSIDERATOIN, BECAUSE IT IS
+ * STORED IN SAVED OBJECTS.
+ *
  * Also temporary dashboard drilldown migration code inside embeddable plugin relies on it
  * x-pack/plugins/embeddable_enhanced/public/embeddables/embeddable_action_storage.ts
  */
-export const DASHBOARD_TO_DASHBOARD_DRILLDOWN = 'DASHBOARD_TO_DASHBOARD_DRILLDOWN';
+export const EMBEDDABLE_TO_DASHBOARD_DRILLDOWN = 'DASHBOARD_TO_DASHBOARD_DRILLDOWN';
diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/drilldown.test.tsx b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/embeddable_to_dashboard_drilldown.test.tsx
similarity index 88%
rename from x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/drilldown.test.tsx
rename to x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/embeddable_to_dashboard_drilldown.test.tsx
index 40fa469feb34b8..f6de2ba931c58d 100644
--- a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/drilldown.test.tsx
+++ b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/embeddable_to_dashboard_drilldown.test.tsx
@@ -4,8 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { DashboardToDashboardDrilldown } from './drilldown';
-import { Config } from './types';
+import { EmbeddableToDashboardDrilldown } from './embeddable_to_dashboard_drilldown';
+import { AbstractDashboardDrilldownConfig as Config } from '../abstract_dashboard_drilldown';
 import { coreMock, savedObjectsServiceMock } from '../../../../../../../src/core/public/mocks';
 import {
   Filter,
@@ -18,7 +18,6 @@ import {
   ApplyGlobalFilterActionContext,
   esFilters,
 } from '../../../../../../../src/plugins/data/public';
-// convenient to use real implementation here.
 import { createDashboardUrlGenerator } from '../../../../../../../src/plugins/dashboard/public/url_generator';
 import { UrlGeneratorsService } from '../../../../../../../src/plugins/share/public/url_generators';
 import { StartDependencies } from '../../../plugin';
@@ -26,7 +25,7 @@ import { SavedObjectLoader } from '../../../../../../../src/plugins/saved_object
 import { StartServicesGetter } from '../../../../../../../src/plugins/kibana_utils/public/core';
 
 describe('.isConfigValid()', () => {
-  const drilldown = new DashboardToDashboardDrilldown({} as any);
+  const drilldown = new EmbeddableToDashboardDrilldown({} as any);
 
   test('returns false for invalid config with missing dashboard id', () => {
     expect(
@@ -50,19 +49,19 @@ describe('.isConfigValid()', () => {
 });
 
 test('config component exist', () => {
-  const drilldown = new DashboardToDashboardDrilldown({} as any);
+  const drilldown = new EmbeddableToDashboardDrilldown({} as any);
   expect(drilldown.CollectConfig).toEqual(expect.any(Function));
 });
 
 test('initial config: switches are ON', () => {
-  const drilldown = new DashboardToDashboardDrilldown({} as any);
+  const drilldown = new EmbeddableToDashboardDrilldown({} as any);
   const { useCurrentDateRange, useCurrentFilters } = drilldown.createConfig();
   expect(useCurrentDateRange).toBe(true);
   expect(useCurrentFilters).toBe(true);
 });
 
 test('getHref is defined', () => {
-  const drilldown = new DashboardToDashboardDrilldown({} as any);
+  const drilldown = new EmbeddableToDashboardDrilldown({} as any);
   expect(drilldown.getHref).toBeDefined();
 });
 
@@ -84,7 +83,7 @@ describe('.execute() & getHref', () => {
     const getUrlForApp = jest.fn((app, opt) => `${app}/${opt.path}`);
     const savedObjectsClient = savedObjectsServiceMock.createStartContract().client;
 
-    const drilldown = new DashboardToDashboardDrilldown({
+    const drilldown = new EmbeddableToDashboardDrilldown({
       start: ((() => ({
         core: {
           application: {
@@ -97,19 +96,24 @@ describe('.execute() & getHref', () => {
         },
         plugins: {
           uiActionsEnhanced: {},
+          dashboard: {
+            dashboardUrlGenerator: new UrlGeneratorsService()
+              .setup(coreMock.createSetup())
+              .registerUrlGenerator(
+                createDashboardUrlGenerator(() =>
+                  Promise.resolve({
+                    appBasePath: 'xyz/app/dashboards',
+                    useHashedUrl: false,
+                    savedDashboardLoader: ({} as unknown) as SavedObjectLoader,
+                  })
+                )
+              ),
+          },
         },
         self: {},
-      })) as unknown) as StartServicesGetter<Pick<StartDependencies, 'data' | 'uiActionsEnhanced'>>,
-      getDashboardUrlGenerator: () =>
-        new UrlGeneratorsService().setup(coreMock.createSetup()).registerUrlGenerator(
-          createDashboardUrlGenerator(() =>
-            Promise.resolve({
-              appBasePath: 'test',
-              useHashedUrl: false,
-              savedDashboardLoader: ({} as unknown) as SavedObjectLoader,
-            })
-          )
-        ),
+      })) as unknown) as StartServicesGetter<
+        Pick<StartDependencies, 'data' | 'uiActionsEnhanced' | 'dashboard'>
+      >,
     });
 
     const completeConfig: Config = {
diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/embeddable_to_dashboard_drilldown.tsx b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/embeddable_to_dashboard_drilldown.tsx
new file mode 100644
index 00000000000000..25bc93ad38b368
--- /dev/null
+++ b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/embeddable_to_dashboard_drilldown.tsx
@@ -0,0 +1,83 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import {
+  TriggerContextMapping,
+  APPLY_FILTER_TRIGGER,
+} from '../../../../../../../src/plugins/ui_actions/public';
+import { DashboardUrlGeneratorState } from '../../../../../../../src/plugins/dashboard/public';
+import {
+  esFilters,
+  isFilters,
+  isQuery,
+  isTimeRange,
+} from '../../../../../../../src/plugins/data/public';
+import {
+  AbstractDashboardDrilldown,
+  AbstractDashboardDrilldownParams,
+  AbstractDashboardDrilldownConfig as Config,
+} from '../abstract_dashboard_drilldown';
+import { KibanaURL } from '../../../../../../../src/plugins/share/public';
+import { EMBEDDABLE_TO_DASHBOARD_DRILLDOWN } from './constants';
+
+type Trigger = typeof APPLY_FILTER_TRIGGER;
+type Context = TriggerContextMapping[Trigger];
+export type Params = AbstractDashboardDrilldownParams;
+
+/**
+ * This drilldown is the "Go to Dashboard" you can find in Dashboard app panles.
+ * This drilldown can be used on any embeddable and it is tied to embeddables
+ * in two ways: (1) it works with APPLY_FILTER_TRIGGER, which is usually executed
+ * by embeddables (but not necessarily); (2) its `getURL` method depends on
+ * `embeddable` field being present in `context`.
+ */
+export class EmbeddableToDashboardDrilldown extends AbstractDashboardDrilldown<Trigger> {
+  public readonly id = EMBEDDABLE_TO_DASHBOARD_DRILLDOWN;
+
+  public readonly supportedTriggers = () => [APPLY_FILTER_TRIGGER] as Trigger[];
+
+  protected async getURL(config: Config, context: Context): Promise<KibanaURL> {
+    const state: DashboardUrlGeneratorState = {
+      dashboardId: config.dashboardId,
+    };
+
+    if (context.embeddable) {
+      const input = context.embeddable.getInput();
+      if (isQuery(input.query) && config.useCurrentFilters) state.query = input.query;
+
+      // if useCurrentDashboardDataRange is enabled, then preserve current time range
+      // if undefined is passed, then destination dashboard will figure out time range itself
+      // for brush event this time range would be overwritten
+      if (isTimeRange(input.timeRange) && config.useCurrentDateRange)
+        state.timeRange = input.timeRange;
+
+      // if useCurrentDashboardFilters enabled, then preserve all the filters (pinned and unpinned)
+      // otherwise preserve only pinned
+      if (isFilters(input.filters))
+        state.filters = config.useCurrentFilters
+          ? input.filters
+          : input.filters?.filter((f) => esFilters.isFilterPinned(f));
+    }
+
+    const {
+      restOfFilters: filtersFromEvent,
+      timeRange: timeRangeFromEvent,
+    } = esFilters.extractTimeRange(context.filters, context.timeFieldName);
+
+    if (filtersFromEvent) {
+      state.filters = [...(state.filters ?? []), ...filtersFromEvent];
+    }
+
+    if (timeRangeFromEvent) {
+      state.timeRange = timeRangeFromEvent;
+    }
+
+    const path = await this.urlGenerator.createUrl(state);
+    const url = new KibanaURL(path);
+
+    return url;
+  }
+}
diff --git a/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/index.ts b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/index.ts
new file mode 100644
index 00000000000000..a48ab022242487
--- /dev/null
+++ b/x-pack/plugins/dashboard_enhanced/public/services/drilldowns/embeddable_to_dashboard_drilldown/index.ts
@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { EMBEDDABLE_TO_DASHBOARD_DRILLDOWN } from './constants';
+export {
+  EmbeddableToDashboardDrilldown,
+  Params as EmbeddableToDashboardDrilldownParams,
+} from './embeddable_to_dashboard_drilldown';
diff --git a/x-pack/plugins/discover_enhanced/kibana.json b/x-pack/plugins/discover_enhanced/kibana.json
index da95a0f21a0204..01a3624d3e3201 100644
--- a/x-pack/plugins/discover_enhanced/kibana.json
+++ b/x-pack/plugins/discover_enhanced/kibana.json
@@ -7,5 +7,5 @@
   "requiredPlugins": ["uiActions", "embeddable", "discover"],
   "optionalPlugins": ["share", "kibanaLegacy", "usageCollection"],
   "configPath": ["xpack", "discoverEnhanced"],
-  "requiredBundles": ["kibanaUtils", "data"]
+  "requiredBundles": ["kibanaUtils", "data", "share"]
 }
diff --git a/x-pack/plugins/discover_enhanced/public/actions/explore_data/abstract_explore_data_action.ts b/x-pack/plugins/discover_enhanced/public/actions/explore_data/abstract_explore_data_action.ts
index 36a844752a1c34..40e7691e621fd3 100644
--- a/x-pack/plugins/discover_enhanced/public/actions/explore_data/abstract_explore_data_action.ts
+++ b/x-pack/plugins/discover_enhanced/public/actions/explore_data/abstract_explore_data_action.ts
@@ -10,7 +10,7 @@ import { ViewMode, IEmbeddable } from '../../../../../../src/plugins/embeddable/
 import { StartServicesGetter } from '../../../../../../src/plugins/kibana_utils/public';
 import { KibanaLegacyStart } from '../../../../../../src/plugins/kibana_legacy/public';
 import { CoreStart } from '../../../../../../src/core/public';
-import { KibanaURL } from './kibana_url';
+import { KibanaURL } from '../../../../../../src/plugins/share/public';
 import * as shared from './shared';
 
 export const ACTION_EXPLORE_DATA = 'ACTION_EXPLORE_DATA';
diff --git a/x-pack/plugins/discover_enhanced/public/actions/explore_data/explore_data_chart_action.ts b/x-pack/plugins/discover_enhanced/public/actions/explore_data/explore_data_chart_action.ts
index 0a7be858691afe..52946b3dca7a1f 100644
--- a/x-pack/plugins/discover_enhanced/public/actions/explore_data/explore_data_chart_action.ts
+++ b/x-pack/plugins/discover_enhanced/public/actions/explore_data/explore_data_chart_action.ts
@@ -13,7 +13,7 @@ import {
   ApplyGlobalFilterActionContext,
   esFilters,
 } from '../../../../../../src/plugins/data/public';
-import { KibanaURL } from './kibana_url';
+import { KibanaURL } from '../../../../../../src/plugins/share/public';
 import * as shared from './shared';
 import { AbstractExploreDataAction } from './abstract_explore_data_action';
 
diff --git a/x-pack/plugins/discover_enhanced/public/actions/explore_data/explore_data_context_menu_action.ts b/x-pack/plugins/discover_enhanced/public/actions/explore_data/explore_data_context_menu_action.ts
index 6e748030fe1070..fdd096e718339d 100644
--- a/x-pack/plugins/discover_enhanced/public/actions/explore_data/explore_data_context_menu_action.ts
+++ b/x-pack/plugins/discover_enhanced/public/actions/explore_data/explore_data_context_menu_action.ts
@@ -7,7 +7,7 @@
 import { Action } from '../../../../../../src/plugins/ui_actions/public';
 import { EmbeddableContext } from '../../../../../../src/plugins/embeddable/public';
 import { DiscoverUrlGeneratorState } from '../../../../../../src/plugins/discover/public';
-import { KibanaURL } from './kibana_url';
+import { KibanaURL } from '../../../../../../src/plugins/share/public';
 import * as shared from './shared';
 import { AbstractExploreDataAction } from './abstract_explore_data_action';
 
diff --git a/x-pack/plugins/discover_enhanced/public/actions/explore_data/kibana_url.ts b/x-pack/plugins/discover_enhanced/public/actions/explore_data/kibana_url.ts
deleted file mode 100644
index 3c25fc2b3c3d15..00000000000000
--- a/x-pack/plugins/discover_enhanced/public/actions/explore_data/kibana_url.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-// TODO: Replace this logic with KibanaURL once it is available.
-// https://github.com/elastic/kibana/issues/64497
-export class KibanaURL {
-  public readonly path: string;
-  public readonly appName: string;
-  public readonly appPath: string;
-
-  constructor(path: string) {
-    const match = path.match(/^.*\/app\/([^\/#]+)(.+)$/);
-
-    if (!match) {
-      throw new Error('Unexpected Discover URL path.');
-    }
-
-    const [, appName, appPath] = match;
-
-    if (!appName || !appPath) {
-      throw new Error('Could not parse Discover URL path.');
-    }
-
-    this.path = path;
-    this.appName = appName;
-    this.appPath = appPath;
-  }
-}
diff --git a/x-pack/plugins/embeddable_enhanced/public/embeddables/embeddable_action_storage.test.ts b/x-pack/plugins/embeddable_enhanced/public/embeddables/embeddable_action_storage.test.ts
index fffb75451f8ac7..9856d3a558e24a 100644
--- a/x-pack/plugins/embeddable_enhanced/public/embeddables/embeddable_action_storage.test.ts
+++ b/x-pack/plugins/embeddable_enhanced/public/embeddables/embeddable_action_storage.test.ts
@@ -12,7 +12,6 @@ import {
 import { UiActionsEnhancedSerializedEvent } from '../../../ui_actions_enhanced/public';
 import { of } from '../../../../../src/plugins/kibana_utils/public';
 // use real const to make test fail in case someone accidentally changes it
-import { DASHBOARD_TO_DASHBOARD_DRILLDOWN } from '../../../dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown';
 import { APPLY_FILTER_TRIGGER } from '../../../../../src/plugins/ui_actions/public';
 
 class TestEmbeddable extends Embeddable<EmbeddableWithDynamicActionsInput> {
@@ -555,7 +554,7 @@ describe('EmbeddableActionStorage', () => {
                 eventId: '1',
                 triggers: [OTHER_TRIGGER],
                 action: {
-                  factoryId: DASHBOARD_TO_DASHBOARD_DRILLDOWN,
+                  factoryId: 'DASHBOARD_TO_DASHBOARD_DRILLDOWN',
                   name: '',
                   config: {},
                 },
diff --git a/x-pack/plugins/global_search/tsconfig.json b/x-pack/plugins/global_search/tsconfig.json
new file mode 100644
index 00000000000000..2d05328f445dfc
--- /dev/null
+++ b/x-pack/plugins/global_search/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "composite": true,
+    "outDir": "./target/types",
+    "emitDeclarationOnly": true,
+    "declaration": true,
+    "declarationMap": true
+  },
+  "include": [
+    "public/**/*",
+    "server/**/*",
+    "common/**/*",
+    "../../../typings/**/*"
+  ],
+  "references": [
+    { "path": "../../../src/core/tsconfig.json" },
+    { "path": "../licensing/tsconfig.json" }
+  ]
+}
+
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.test.ts b/x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.test.ts
index 06f57896d4900c..37df55f784252c 100644
--- a/x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.test.ts
+++ b/x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.test.ts
@@ -127,7 +127,7 @@ describe('Index Templates tab', () => {
         const indexTemplate = templates[i];
         const { name, indexPatterns, ilmPolicy, composedOf, template } = indexTemplate;
 
-        const hasContent = !!template.settings || !!template.mappings || !!template.aliases;
+        const hasContent = !!template?.settings || !!template?.mappings || !!template?.aliases;
         const ilmPolicyName = ilmPolicy && ilmPolicy.name ? ilmPolicy.name : '';
         const composedOfString = composedOf ? composedOf.join(',') : '';
 
@@ -152,7 +152,7 @@ describe('Index Templates tab', () => {
         const legacyIndexTemplate = legacyTemplates[i];
         const { name, indexPatterns, ilmPolicy, template } = legacyIndexTemplate;
 
-        const hasContent = !!template.settings || !!template.mappings || !!template.aliases;
+        const hasContent = !!template?.settings || !!template?.mappings || !!template?.aliases;
         const ilmPolicyName = ilmPolicy && ilmPolicy.name ? ilmPolicy.name : '';
 
         try {
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_clone.test.tsx b/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_clone.test.tsx
index 8b74e9fb0cdf88..f0c0128fd64631 100644
--- a/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_clone.test.tsx
+++ b/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_clone.test.tsx
@@ -112,7 +112,7 @@ describe('<TemplateClone />', () => {
         name: `${templateToClone.name}-copy`,
         indexPatterns: DEFAULT_INDEX_PATTERNS,
       };
-      // @ts-expect-error
+
       delete expected.template; // As no settings, mappings or aliases have been defined, no "template" param is sent
 
       expect(JSON.parse(JSON.parse(latestRequest.requestBody).body)).toEqual(expected);
diff --git a/x-pack/plugins/index_management/common/lib/template_serialization.ts b/x-pack/plugins/index_management/common/lib/template_serialization.ts
index 1803d89a40016a..bb7604f06c302d 100644
--- a/x-pack/plugins/index_management/common/lib/template_serialization.ts
+++ b/x-pack/plugins/index_management/common/lib/template_serialization.ts
@@ -85,7 +85,7 @@ export function deserializeTemplateList(
 ): TemplateListItem[] {
   return indexTemplates.map(({ name, index_template: templateSerialized }) => {
     const {
-      template: { mappings, settings, aliases },
+      template: { mappings, settings, aliases } = {},
       ...deserializedTemplate
     } = deserializeTemplate({ name, ...templateSerialized }, cloudManagedTemplatePrefix);
 
@@ -149,7 +149,7 @@ export function deserializeLegacyTemplateList(
 ): TemplateListItem[] {
   return Object.entries(indexTemplatesByName).map(([name, templateSerialized]) => {
     const {
-      template: { mappings, settings, aliases },
+      template: { mappings, settings, aliases } = {},
       ...deserializedTemplate
     } = deserializeLegacyTemplate({ name, ...templateSerialized }, cloudManagedTemplatePrefix);
 
diff --git a/x-pack/plugins/index_management/common/types/templates.ts b/x-pack/plugins/index_management/common/types/templates.ts
index eda00ec8191592..d1b51fe5b89bf1 100644
--- a/x-pack/plugins/index_management/common/types/templates.ts
+++ b/x-pack/plugins/index_management/common/types/templates.ts
@@ -13,7 +13,7 @@ import { Mappings } from './mappings';
  */
 export interface TemplateSerialized {
   index_patterns: string[];
-  template: {
+  template?: {
     settings?: IndexSettings;
     aliases?: Aliases;
     mappings?: Mappings;
@@ -33,7 +33,7 @@ export interface TemplateSerialized {
 export interface TemplateDeserialized {
   name: string;
   indexPatterns: string[];
-  template: {
+  template?: {
     settings?: IndexSettings;
     aliases?: Aliases;
     mappings?: Mappings;
diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/datatypes/other_datatype.test.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/datatypes/other_datatype.test.tsx
new file mode 100644
index 00000000000000..c1474b0ec67812
--- /dev/null
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/datatypes/other_datatype.test.tsx
@@ -0,0 +1,112 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { act } from 'react-dom/test-utils';
+
+import { componentHelpers, MappingsEditorTestBed } from '../helpers';
+
+const { setup, getMappingsEditorDataFactory } = componentHelpers.mappingsEditor;
+
+describe('Mappings editor: other datatype', () => {
+  /**
+   * Variable to store the mappings data forwarded to the consumer component
+   */
+  let data: any;
+  let onChangeHandler: jest.Mock = jest.fn();
+  let getMappingsEditorData = getMappingsEditorDataFactory(onChangeHandler);
+  let testBed: MappingsEditorTestBed;
+
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
+  beforeEach(() => {
+    onChangeHandler = jest.fn();
+    getMappingsEditorData = getMappingsEditorDataFactory(onChangeHandler);
+  });
+
+  test('allow to add custom field type', async () => {
+    await act(async () => {
+      testBed = setup({ onChange: onChangeHandler });
+    });
+    testBed.component.update();
+
+    const {
+      component,
+      actions: { addField },
+    } = testBed;
+
+    await addField('myField', 'other', 'customType');
+
+    const mappings = {
+      properties: {
+        myField: {
+          type: 'customType',
+        },
+      },
+    };
+
+    ({ data } = await getMappingsEditorData(component));
+    expect(data).toEqual(mappings);
+  });
+
+  test('allow to change a field type to a custom type', async () => {
+    const defaultMappings = {
+      properties: {
+        myField: {
+          type: 'text',
+        },
+      },
+    };
+
+    let updatedMappings = { ...defaultMappings };
+
+    await act(async () => {
+      testBed = setup({ value: defaultMappings, onChange: onChangeHandler });
+    });
+    testBed.component.update();
+
+    const {
+      component,
+      find,
+      form,
+      actions: { startEditField, updateFieldAndCloseFlyout },
+    } = testBed;
+
+    // Open the flyout to edit the field
+    await startEditField('myField');
+
+    // Change the field type
+    await act(async () => {
+      find('mappingsEditorFieldEdit.fieldType').simulate('change', [
+        {
+          label: 'other',
+          value: 'other',
+        },
+      ]);
+    });
+    component.update();
+
+    form.setInputValue('mappingsEditorFieldEdit.fieldSubType', 'customType');
+
+    // Save the field and close the flyout
+    await updateFieldAndCloseFlyout();
+
+    updatedMappings = {
+      properties: {
+        myField: {
+          type: 'customType',
+        },
+      },
+    };
+
+    ({ data } = await getMappingsEditorData(component));
+    expect(data).toEqual(updatedMappings);
+  });
+});
diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/helpers/mappings_editor.helpers.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/helpers/mappings_editor.helpers.tsx
index e123dea6ff2ff6..2eb56a97dc3a01 100644
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/helpers/mappings_editor.helpers.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/helpers/mappings_editor.helpers.tsx
@@ -149,7 +149,7 @@ const createActions = (testBed: TestBed<TestSubjects>) => {
     return { field: find(testSubject as TestSubjects), testSubject };
   };
 
-  const addField = async (name: string, type: string) => {
+  const addField = async (name: string, type: string, subType?: string) => {
     await act(async () => {
       form.setInputValue('nameParameterInput', name);
       find('createFieldForm.fieldType').simulate('change', [
@@ -160,6 +160,17 @@ const createActions = (testBed: TestBed<TestSubjects>) => {
       ]);
     });
 
+    component.update();
+
+    if (subType !== undefined) {
+      await act(async () => {
+        if (type === 'other') {
+          // subType is a text input
+          form.setInputValue('createFieldForm.fieldSubType', subType);
+        }
+      });
+    }
+
     await act(async () => {
       find('createFieldForm.addButton').simulate('click');
     });
diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/other_type_name_parameter.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/other_type_name_parameter.tsx
index 6004e484323a14..8043a0deaf8da9 100644
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/other_type_name_parameter.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/other_type_name_parameter.tsx
@@ -4,13 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import { i18n } from '@kbn/i18n';
-import { UseField, TextField, FieldConfig } from '../../../shared_imports';
-import { fieldValidators } from '../../../shared_imports';
-
-const { emptyField } = fieldValidators;
+import { UseField, TextField, FieldConfig, FieldHook } from '../../../shared_imports';
+import { getFieldConfig } from '../../../lib';
 
 /**
  * This is a special component that does not have an explicit entry in {@link PARAMETERS_DEFINITION}.
@@ -18,25 +16,69 @@ const { emptyField } = fieldValidators;
  * We use it to store the name of types unknown to the mappings editor in the "subType" path.
  */
 
+type FieldType = [{ value: string }];
+
+const typeParameterConfig = getFieldConfig('type');
+
 const fieldConfig: FieldConfig = {
   label: i18n.translate('xpack.idxMgmt.mappingsEditor.otherTypeNameFieldLabel', {
     defaultMessage: 'Type Name',
   }),
   defaultValue: '',
+  deserializer: typeParameterConfig.deserializer,
+  serializer: typeParameterConfig.serializer,
   validations: [
     {
-      validator: emptyField(
-        i18n.translate(
-          'xpack.idxMgmt.mappingsEditor.parameters.validations.otherTypeNameIsRequiredErrorMessage',
-          {
-            defaultMessage: 'The type name is required.',
-          }
-        )
-      ),
+      validator: ({ value: fieldValue }) => {
+        if ((fieldValue as FieldType)[0].value.trim() === '') {
+          return {
+            message: i18n.translate(
+              'xpack.idxMgmt.mappingsEditor.parameters.validations.otherTypeNameIsRequiredErrorMessage',
+              {
+                defaultMessage: 'The type name is required.',
+              }
+            ),
+          };
+        }
+      },
     },
   ],
 };
 
+interface Props {
+  field: FieldHook<FieldType>;
+}
+
+/**
+ * The "subType" parameter can be configured either with a ComboBox (when the type is known)
+ * or with a TextField (when the type is unknown). This causes its value to have different type
+ * (either an array of object either a string). In order to align both value and let the consumer of
+ * the value worry about a single type, we will create a custom TextField component that works with the
+ * array of object that the ComboBox works with.
+ */
+const CustomTextField = ({ field }: Props) => {
+  const { setValue } = field;
+
+  const transformedField: FieldHook<any> = {
+    ...field,
+    value: field.value[0]?.value ?? '',
+  };
+
+  const onChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setValue([{ value: e.target.value }]);
+    },
+    [setValue]
+  );
+
+  return (
+    <TextField
+      field={transformedField}
+      euiFieldProps={{ onChange, 'data-test-subj': 'fieldSubType' }}
+    />
+  );
+};
+
 export const OtherTypeNameParameter = () => (
-  <UseField path="subType" config={fieldConfig} component={TextField} />
+  <UseField path="subType" config={fieldConfig} component={CustomTextField} />
 );
diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field.tsx
index 95575124b6abdd..faa0c8c9dc7929 100644
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field.tsx
@@ -91,8 +91,8 @@ export const EditField = React.memo(({ form, field, allFields, exitEdit, updateF
           <FormDataProvider pathsToWatch={['type', 'subType']}>
             {({ type, subType }) => {
               const linkDocumentation =
-                documentationService.getTypeDocLink(subType?.[0].value) ||
-                documentationService.getTypeDocLink(type?.[0].value);
+                documentationService.getTypeDocLink(subType?.[0]?.value) ||
+                documentationService.getTypeDocLink(type?.[0]?.value);
 
               if (!linkDocumentation) {
                 return null;
diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/constants/parameters_definition.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/constants/parameters_definition.tsx
index 4c9786d88bfa2d..74cca4dae7817b 100644
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/constants/parameters_definition.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/constants/parameters_definition.tsx
@@ -168,7 +168,7 @@ export const PARAMETERS_DEFINITION: { [key in ParameterName]: ParameterDefinitio
             },
           ];
         }
-        return [];
+        return [{ value: '' }];
       },
       serializer: (fieldType: ComboBoxOption[] | undefined) =>
         fieldType && fieldType.length ? fieldType[0].value : fieldType,
diff --git a/x-pack/plugins/index_management/public/application/components/template_form/template_form.tsx b/x-pack/plugins/index_management/public/application/components/template_form/template_form.tsx
index 3a03835e859701..8e84abb5ce4953 100644
--- a/x-pack/plugins/index_management/public/application/components/template_form/template_form.tsx
+++ b/x-pack/plugins/index_management/public/application/components/template_form/template_form.tsx
@@ -117,7 +117,7 @@ export const TemplateForm = ({
   };
 
   const {
-    template: { settings, mappings, aliases },
+    template: { settings, mappings, aliases } = {},
     composedOf,
     _kbnMeta,
     ...logistics
@@ -170,18 +170,19 @@ export const TemplateForm = ({
   const cleanupTemplateObject = (template: TemplateDeserialized) => {
     const outputTemplate = { ...template };
 
-    if (outputTemplate.template.settings === undefined) {
-      delete outputTemplate.template.settings;
-    }
-    if (outputTemplate.template.mappings === undefined) {
-      delete outputTemplate.template.mappings;
-    }
-    if (outputTemplate.template.aliases === undefined) {
-      delete outputTemplate.template.aliases;
-    }
-    if (Object.keys(outputTemplate.template).length === 0) {
-      // @ts-expect-error
-      delete outputTemplate.template;
+    if (outputTemplate.template) {
+      if (outputTemplate.template.settings === undefined) {
+        delete outputTemplate.template.settings;
+      }
+      if (outputTemplate.template.mappings === undefined) {
+        delete outputTemplate.template.mappings;
+      }
+      if (outputTemplate.template.aliases === undefined) {
+        delete outputTemplate.template.aliases;
+      }
+      if (Object.keys(outputTemplate.template).length === 0) {
+        delete outputTemplate.template;
+      }
     }
 
     return outputTemplate;
diff --git a/x-pack/plugins/index_management/public/application/sections/home/template_list/template_details/template_details_content.tsx b/x-pack/plugins/index_management/public/application/sections/home/template_list/template_details/template_details_content.tsx
index 94891297c857e0..48083f324de3da 100644
--- a/x-pack/plugins/index_management/public/application/sections/home/template_list/template_details/template_details_content.tsx
+++ b/x-pack/plugins/index_management/public/application/sections/home/template_list/template_details/template_details_content.tsx
@@ -161,9 +161,7 @@ export const TemplateDetailsContent = ({
     }
 
     if (templateDetails) {
-      const {
-        template: { settings, mappings, aliases },
-      } = templateDetails;
+      const { template: { settings, mappings, aliases } = {} } = templateDetails;
 
       const tabToComponentMap: Record<string, React.ReactNode> = {
         [SUMMARY_TAB_ID]: <TabSummary templateDetails={templateDetails} />,
diff --git a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipeline_form.helpers.ts b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipeline_form.helpers.ts
index 752ffef51b43b5..dd354b49278365 100644
--- a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipeline_form.helpers.ts
+++ b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipeline_form.helpers.ts
@@ -3,38 +3,42 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+import { act } from 'react-dom/test-utils';
+
 import { TestBed } from '../../../../../test_utils';
 
 export const getFormActions = (testBed: TestBed) => {
-  const { find, form } = testBed;
+  const { find, form, component } = testBed;
 
   // User actions
-  const clickSubmitButton = () => {
-    find('submitButton').simulate('click');
-  };
+  const clickSubmitButton = async () => {
+    await act(async () => {
+      find('submitButton').simulate('click');
+    });
 
-  const clickAddDocumentsButton = () => {
-    find('addDocumentsButton').simulate('click');
+    component.update();
   };
 
-  const clickShowRequestLink = () => {
-    find('showRequestLink').simulate('click');
+  const clickShowRequestLink = async () => {
+    await act(async () => {
+      find('showRequestLink').simulate('click');
+    });
+
+    component.update();
   };
 
   const toggleVersionSwitch = () => {
-    form.toggleEuiSwitch('versionToggle');
-  };
+    act(() => {
+      form.toggleEuiSwitch('versionToggle');
+    });
 
-  const toggleOnFailureSwitch = () => {
-    form.toggleEuiSwitch('onFailureToggle');
+    component.update();
   };
 
   return {
     clickSubmitButton,
     clickShowRequestLink,
     toggleVersionSwitch,
-    toggleOnFailureSwitch,
-    clickAddDocumentsButton,
   };
 };
 
diff --git a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipelines_list.helpers.ts b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipelines_list.helpers.ts
index 43ca849e61aeec..6c446e8254f6bf 100644
--- a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipelines_list.helpers.ts
+++ b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipelines_list.helpers.ts
@@ -11,7 +11,6 @@ import {
   TestBed,
   TestBedConfig,
   findTestSubject,
-  nextTick,
 } from '../../../../../test_utils';
 import { PipelinesList } from '../../../public/application/sections/pipelines_list';
 import { WithAppDependencies } from './setup_environment';
@@ -32,13 +31,17 @@ export type PipelineListTestBed = TestBed<PipelineListTestSubjects> & {
 };
 
 const createActions = (testBed: TestBed) => {
-  const { find } = testBed;
-
   /**
    * User Actions
    */
-  const clickReloadButton = () => {
-    find('reloadButton').simulate('click');
+  const clickReloadButton = async () => {
+    const { component, find } = testBed;
+
+    await act(async () => {
+      find('reloadButton').simulate('click');
+    });
+
+    component.update();
   };
 
   const clickPipelineAt = async (index: number) => {
@@ -49,16 +52,19 @@ const createActions = (testBed: TestBed) => {
     await act(async () => {
       const { href } = pipelineLink.props();
       router.navigateTo(href!);
-      await nextTick();
-      component.update();
     });
+    component.update();
   };
 
   const clickActionMenu = (pipelineName: string) => {
     const { component } = testBed;
 
-    // When a table has > 2 actions, EUI displays an overflow menu with an id "<pipeline_name>-actions"
-    component.find(`div[id="${pipelineName}-actions"] button`).simulate('click');
+    act(() => {
+      // When a table has > 2 actions, EUI displays an overflow menu with an id "<pipeline_name>-actions"
+      component.find(`div[id="${pipelineName}-actions"] button`).simulate('click');
+    });
+
+    component.update();
   };
 
   const clickPipelineAction = (pipelineName: string, action: 'edit' | 'clone' | 'delete') => {
@@ -67,7 +73,11 @@ const createActions = (testBed: TestBed) => {
 
     clickActionMenu(pipelineName);
 
-    component.find('.euiContextMenuItem').at(actions.indexOf(action)).simulate('click');
+    act(() => {
+      component.find('.euiContextMenuItem').at(actions.indexOf(action)).simulate('click');
+    });
+
+    component.update();
   };
 
   return {
diff --git a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/setup_environment.tsx b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/setup_environment.tsx
index d9a0ac41153895..eff2572aea38d4 100644
--- a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/setup_environment.tsx
+++ b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/setup_environment.tsx
@@ -4,20 +4,20 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React from 'react';
+import axios from 'axios';
+import axiosXhrAdapter from 'axios/lib/adapters/xhr';
 import { LocationDescriptorObject } from 'history';
+import { HttpSetup } from 'kibana/public';
+
 import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public';
 import {
   notificationServiceMock,
-  fatalErrorsServiceMock,
   docLinksServiceMock,
-  injectedMetadataServiceMock,
   scopedHistoryMock,
 } from '../../../../../../src/core/public/mocks';
 
 import { usageCollectionPluginMock } from '../../../../../../src/plugins/usage_collection/public/mocks';
 
-import { HttpService } from '../../../../../../src/core/public/http';
-
 import {
   breadcrumbService,
   documentationService,
@@ -27,10 +27,7 @@ import {
 
 import { init as initHttpRequests } from './http_requests';
 
-const httpServiceSetupMock = new HttpService().setup({
-  injectedMetadata: injectedMetadataServiceMock.createSetupContract(),
-  fatalErrors: fatalErrorsServiceMock.createSetupContract(),
-});
+const mockHttpClient = axios.create({ adapter: axiosXhrAdapter });
 
 const history = scopedHistoryMock.create();
 history.createHref.mockImplementation((location: LocationDescriptorObject) => {
@@ -53,7 +50,7 @@ const appServices = {
 
 export const setupEnvironment = () => {
   uiMetricService.setup(usageCollectionPluginMock.createSetupContract());
-  apiService.setup(httpServiceSetupMock, uiMetricService);
+  apiService.setup((mockHttpClient as unknown) as HttpSetup, uiMetricService);
   documentationService.setup(docLinksServiceMock.createStartContract());
   breadcrumbService.setup(() => {});
 
diff --git a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_clone.test.tsx b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_clone.test.tsx
index f8e0030441ba00..6e0889ac55d4d3 100644
--- a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_clone.test.tsx
+++ b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_clone.test.tsx
@@ -28,8 +28,7 @@ jest.mock('@elastic/eui', () => {
   };
 });
 
-// FLAKY: https://github.com/elastic/kibana/issues/66856
-describe.skip('<PipelinesClone />', () => {
+describe('<PipelinesClone />', () => {
   let testBed: PipelinesCloneTestBed;
 
   const { server, httpRequestsMockHelpers } = setupEnvironment();
@@ -38,13 +37,14 @@ describe.skip('<PipelinesClone />', () => {
     server.restore();
   });
 
-  beforeEach(async () => {
-    httpRequestsMockHelpers.setLoadPipelineResponse(PIPELINE_TO_CLONE);
+  httpRequestsMockHelpers.setLoadPipelineResponse(PIPELINE_TO_CLONE);
 
+  beforeEach(async () => {
     await act(async () => {
       testBed = await setup();
-      await testBed.waitFor('pipelineForm');
     });
+
+    testBed.component.update();
   });
 
   test('should render the correct page header', () => {
@@ -61,12 +61,9 @@ describe.skip('<PipelinesClone />', () => {
 
   describe('form submission', () => {
     it('should send the correct payload', async () => {
-      const { actions, waitFor } = testBed;
+      const { actions } = testBed;
 
-      await act(async () => {
-        actions.clickSubmitButton();
-        await waitFor('pipelineForm', 0);
-      });
+      await actions.clickSubmitButton();
 
       const latestRequest = server.requests[server.requests.length - 1];
 
@@ -75,7 +72,7 @@ describe.skip('<PipelinesClone />', () => {
         name: `${PIPELINE_TO_CLONE.name}-copy`,
       };
 
-      expect(JSON.parse(latestRequest.requestBody)).toEqual(expected);
+      expect(JSON.parse(JSON.parse(latestRequest.requestBody).body)).toEqual(expected);
     });
   });
 });
diff --git a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_create.test.tsx b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_create.test.tsx
index 18ca71f2bb73a0..976627b1fa8a8e 100644
--- a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_create.test.tsx
+++ b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_create.test.tsx
@@ -6,7 +6,7 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 
-import { setupEnvironment, pageHelpers, nextTick } from './helpers';
+import { setupEnvironment, pageHelpers } from './helpers';
 import { PipelinesCreateTestBed } from './helpers/pipelines_create.helpers';
 
 import { nestedProcessorsErrorFixture } from './fixtures';
@@ -43,8 +43,9 @@ describe('<PipelinesCreate />', () => {
     beforeEach(async () => {
       await act(async () => {
         testBed = await setup();
-        await testBed.waitFor('pipelineForm');
       });
+
+      testBed.component.update();
     });
 
     test('should render the correct page header', () => {
@@ -60,28 +61,20 @@ describe('<PipelinesCreate />', () => {
     });
 
     test('should toggle the version field', async () => {
-      const { actions, component, exists } = testBed;
+      const { actions, exists } = testBed;
 
       // Version field should be hidden by default
       expect(exists('versionField')).toBe(false);
 
-      await act(async () => {
-        actions.toggleVersionSwitch();
-        await nextTick();
-        component.update();
-      });
+      actions.toggleVersionSwitch();
 
       expect(exists('versionField')).toBe(true);
     });
 
     test('should show the request flyout', async () => {
-      const { actions, component, find, exists } = testBed;
+      const { actions, find, exists } = testBed;
 
-      await act(async () => {
-        actions.clickShowRequestLink();
-        await nextTick();
-        component.update();
-      });
+      await actions.clickShowRequestLink();
 
       // Verify request flyout opens
       expect(exists('requestFlyout')).toBe(true);
@@ -92,23 +85,18 @@ describe('<PipelinesCreate />', () => {
       test('should prevent form submission if required fields are missing', async () => {
         const { form, actions, component, find } = testBed;
 
-        await act(async () => {
-          actions.clickSubmitButton();
-          await nextTick();
-          component.update();
-        });
+        await actions.clickSubmitButton();
 
         expect(form.getErrorsMessages()).toEqual(['Name is required.']);
         expect(find('submitButton').props().disabled).toEqual(true);
 
-        // Add required fields and verify button is enabled again
-        form.setInputValue('nameField.input', 'my_pipeline');
-
         await act(async () => {
-          await nextTick();
-          component.update();
+          // Add required fields and verify button is enabled again
+          form.setInputValue('nameField.input', 'my_pipeline');
         });
 
+        component.update();
+
         expect(find('submitButton').props().disabled).toEqual(false);
       });
     });
@@ -117,23 +105,27 @@ describe('<PipelinesCreate />', () => {
       beforeEach(async () => {
         await act(async () => {
           testBed = await setup();
+        });
 
-          const { waitFor, form } = testBed;
+        testBed.component.update();
+
+        await act(async () => {
+          testBed.form.setInputValue('nameField.input', 'my_pipeline');
+        });
 
-          await waitFor('pipelineForm');
+        testBed.component.update();
 
-          form.setInputValue('nameField.input', 'my_pipeline');
-          form.setInputValue('descriptionField.input', 'pipeline description');
+        await act(async () => {
+          testBed.form.setInputValue('descriptionField.input', 'pipeline description');
         });
+
+        testBed.component.update();
       });
 
       test('should send the correct payload', async () => {
-        const { actions, waitFor } = testBed;
+        const { actions } = testBed;
 
-        await act(async () => {
-          actions.clickSubmitButton();
-          await waitFor('pipelineForm', 0);
-        });
+        await actions.clickSubmitButton();
 
         const latestRequest = server.requests[server.requests.length - 1];
 
@@ -143,11 +135,11 @@ describe('<PipelinesCreate />', () => {
           processors: [],
         };
 
-        expect(JSON.parse(latestRequest.requestBody)).toEqual(expected);
+        expect(JSON.parse(JSON.parse(latestRequest.requestBody).body)).toEqual(expected);
       });
 
       test('should surface API errors from the request', async () => {
-        const { actions, find, exists, waitFor } = testBed;
+        const { actions, find, exists } = testBed;
 
         const error = {
           status: 409,
@@ -157,29 +149,29 @@ describe('<PipelinesCreate />', () => {
 
         httpRequestsMockHelpers.setCreatePipelineResponse(undefined, { body: error });
 
-        await act(async () => {
-          actions.clickSubmitButton();
-          await waitFor('savePipelineError');
-        });
+        await actions.clickSubmitButton();
 
         expect(exists('savePipelineError')).toBe(true);
         expect(find('savePipelineError').text()).toContain(error.message);
       });
 
       test('displays nested pipeline errors as a flat list', async () => {
-        const { actions, find, exists, waitFor } = testBed;
+        const { actions, find, exists, component } = testBed;
         httpRequestsMockHelpers.setCreatePipelineResponse(undefined, {
           body: nestedProcessorsErrorFixture,
         });
 
-        await act(async () => {
-          actions.clickSubmitButton();
-          await waitFor('savePipelineError');
-        });
+        await actions.clickSubmitButton();
 
         expect(exists('savePipelineError')).toBe(true);
         expect(exists('savePipelineError.showErrorsButton')).toBe(true);
-        find('savePipelineError.showErrorsButton').simulate('click');
+
+        await act(async () => {
+          find('savePipelineError.showErrorsButton').simulate('click');
+        });
+
+        component.update();
+
         expect(exists('savePipelineError.hideErrorsButton')).toBe(true);
         expect(exists('savePipelineError.showErrorsButton')).toBe(false);
         expect(find('savePipelineError').find('li').length).toBe(8);
diff --git a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_edit.test.tsx b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_edit.test.tsx
index 6c89216e347332..3fe7f5ec42710a 100644
--- a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_edit.test.tsx
+++ b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_edit.test.tsx
@@ -37,13 +37,14 @@ describe('<PipelinesEdit />', () => {
     server.restore();
   });
 
-  beforeEach(async () => {
-    httpRequestsMockHelpers.setLoadPipelineResponse(PIPELINE_TO_EDIT);
+  httpRequestsMockHelpers.setLoadPipelineResponse(PIPELINE_TO_EDIT);
 
+  beforeEach(async () => {
     await act(async () => {
       testBed = await setup();
-      await testBed.waitFor('pipelineForm');
     });
+
+    testBed.component.update();
   });
 
   test('should render the correct page header', () => {
@@ -68,15 +69,12 @@ describe('<PipelinesEdit />', () => {
   describe('form submission', () => {
     it('should send the correct payload with changed values', async () => {
       const UPDATED_DESCRIPTION = 'updated pipeline description';
-      const { actions, form, waitFor } = testBed;
+      const { actions, form } = testBed;
 
       // Make change to description field
       form.setInputValue('descriptionField.input', UPDATED_DESCRIPTION);
 
-      await act(async () => {
-        actions.clickSubmitButton();
-        await waitFor('pipelineForm', 0);
-      });
+      await actions.clickSubmitButton();
 
       const latestRequest = server.requests[server.requests.length - 1];
 
@@ -87,7 +85,7 @@ describe('<PipelinesEdit />', () => {
         description: UPDATED_DESCRIPTION,
       };
 
-      expect(JSON.parse(latestRequest.requestBody)).toEqual(expected);
+      expect(JSON.parse(JSON.parse(latestRequest.requestBody).body)).toEqual(expected);
     });
   });
 });
diff --git a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_list.test.ts b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_list.test.ts
index c0acc39ca35a1c..d29d38da80e470 100644
--- a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_list.test.ts
+++ b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_list.test.ts
@@ -8,7 +8,7 @@ import { act } from 'react-dom/test-utils';
 
 import { API_BASE_PATH } from '../../common/constants';
 
-import { setupEnvironment, pageHelpers, nextTick } from './helpers';
+import { setupEnvironment, pageHelpers } from './helpers';
 import { PipelineListTestBed } from './helpers/pipelines_list.helpers';
 
 const { setup } = pageHelpers.pipelinesList;
@@ -22,6 +22,14 @@ describe('<PipelinesList />', () => {
   });
 
   describe('With pipelines', () => {
+    beforeEach(async () => {
+      await act(async () => {
+        testBed = await setup();
+      });
+
+      testBed.component.update();
+    });
+
     const pipeline1 = {
       name: 'test_pipeline1',
       description: 'test_pipeline1 description',
@@ -38,16 +46,6 @@ describe('<PipelinesList />', () => {
 
     httpRequestsMockHelpers.setLoadPipelinesResponse(pipelines);
 
-    beforeEach(async () => {
-      testBed = await setup();
-
-      await act(async () => {
-        const { waitFor } = testBed;
-
-        await waitFor('pipelinesTable');
-      });
-    });
-
     test('should render the list view', async () => {
       const { exists, find, table } = testBed;
 
@@ -72,14 +70,10 @@ describe('<PipelinesList />', () => {
     });
 
     test('should reload the pipeline data', async () => {
-      const { component, actions } = testBed;
+      const { actions } = testBed;
       const totalRequests = server.requests.length;
 
-      await act(async () => {
-        actions.clickReloadButton();
-        await nextTick(100);
-        component.update();
-      });
+      await actions.clickReloadButton();
 
       expect(server.requests.length).toBe(totalRequests + 1);
       expect(server.requests[server.requests.length - 1].url).toBe(API_BASE_PATH);
@@ -118,33 +112,27 @@ describe('<PipelinesList />', () => {
 
       await act(async () => {
         confirmButton!.click();
-        await nextTick();
-        component.update();
       });
 
-      const latestRequest = server.requests[server.requests.length - 1];
+      component.update();
+
+      const deleteRequest = server.requests[server.requests.length - 2];
 
-      expect(latestRequest.method).toBe('DELETE');
-      expect(latestRequest.url).toBe(`${API_BASE_PATH}/${pipelineName}`);
-      expect(latestRequest.status).toEqual(200);
+      expect(deleteRequest.method).toBe('DELETE');
+      expect(deleteRequest.url).toBe(`${API_BASE_PATH}/${pipelineName}`);
+      expect(deleteRequest.status).toEqual(200);
     });
   });
 
   describe('No pipelines', () => {
-    beforeEach(async () => {
+    test('should display an empty prompt', async () => {
       httpRequestsMockHelpers.setLoadPipelinesResponse([]);
 
-      testBed = await setup();
-
       await act(async () => {
-        const { waitFor } = testBed;
-
-        await waitFor('emptyList');
+        testBed = await setup();
       });
-    });
-
-    test('should display an empty prompt', async () => {
-      const { exists, find } = testBed;
+      const { exists, component, find } = testBed;
+      component.update();
 
       expect(exists('sectionLoading')).toBe(false);
       expect(exists('emptyList')).toBe(true);
@@ -162,13 +150,11 @@ describe('<PipelinesList />', () => {
 
       httpRequestsMockHelpers.setLoadPipelinesResponse(undefined, { body: error });
 
-      testBed = await setup();
-
       await act(async () => {
-        const { waitFor } = testBed;
-
-        await waitFor('pipelineLoadError');
+        testBed = await setup();
       });
+
+      testBed.component.update();
     });
 
     test('should render an error message if error fetching pipelines', async () => {
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.tsx
index 10fb73df1ce1cb..72c25d6dff72d0 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.tsx
@@ -6,19 +6,9 @@
 import { act } from 'react-dom/test-utils';
 import React from 'react';
 
-import { notificationServiceMock, scopedHistoryMock } from 'src/core/public/mocks';
-
-import { LocationDescriptorObject } from 'history';
-import { KibanaContextProvider } from 'src/plugins/kibana_react/public';
 import { registerTestBed, TestBed } from '../../../../../../../test_utils';
-import { ProcessorsEditorContextProvider, Props, PipelineProcessorsEditor } from '../';
-
-import {
-  breadcrumbService,
-  uiMetricService,
-  documentationService,
-  apiService,
-} from '../../../services';
+import { Props } from '../';
+import { ProcessorsEditorWithDeps } from './processors_editor';
 
 jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
@@ -67,28 +57,8 @@ jest.mock('react-virtualized', () => {
   };
 });
 
-const history = scopedHistoryMock.create();
-history.createHref.mockImplementation((location: LocationDescriptorObject) => {
-  return `${location.pathname}?${location.search}`;
-});
-
-const appServices = {
-  breadcrumbs: breadcrumbService,
-  metric: uiMetricService,
-  documentation: documentationService,
-  api: apiService,
-  notifications: notificationServiceMock.createSetupContract(),
-  history,
-};
-
 const testBedSetup = registerTestBed<TestSubject>(
-  (props: Props) => (
-    <KibanaContextProvider services={appServices}>
-      <ProcessorsEditorContextProvider {...props}>
-        <PipelineProcessorsEditor onLoadJson={jest.fn()} />
-      </ProcessorsEditorContextProvider>
-    </KibanaContextProvider>
-  ),
+  (props: Props) => <ProcessorsEditorWithDeps {...props} />,
   {
     doMountAsync: false,
   }
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/processors_editor.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/processors_editor.tsx
new file mode 100644
index 00000000000000..8fb51ade921a9e
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/processors_editor.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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React from 'react';
+
+import { notificationServiceMock, scopedHistoryMock } from 'src/core/public/mocks';
+
+import { LocationDescriptorObject } from 'history';
+import { KibanaContextProvider } from 'src/plugins/kibana_react/public';
+import { ProcessorsEditorContextProvider, Props, PipelineProcessorsEditor } from '../';
+
+import {
+  breadcrumbService,
+  uiMetricService,
+  documentationService,
+  apiService,
+} from '../../../services';
+
+const history = scopedHistoryMock.create();
+history.createHref.mockImplementation((location: LocationDescriptorObject) => {
+  return `${location.pathname}?${location.search}`;
+});
+
+const appServices = {
+  breadcrumbs: breadcrumbService,
+  metric: uiMetricService,
+  documentation: documentationService,
+  api: apiService,
+  notifications: notificationServiceMock.createSetupContract(),
+  history,
+};
+
+export const ProcessorsEditorWithDeps: React.FunctionComponent<Props> = (props) => {
+  return (
+    <KibanaContextProvider services={appServices}>
+      <ProcessorsEditorContextProvider {...props}>
+        <PipelineProcessorsEditor onLoadJson={jest.fn()} />
+      </ProcessorsEditorContextProvider>
+    </KibanaContextProvider>
+  );
+};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/test_pipeline.helpers.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/test_pipeline.helpers.tsx
index 222e0a491e0d26..570d9878f7634d 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/test_pipeline.helpers.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/test_pipeline.helpers.tsx
@@ -8,26 +8,15 @@ import React from 'react';
 import axios from 'axios';
 import axiosXhrAdapter from 'axios/lib/adapters/xhr';
 
-import { notificationServiceMock, scopedHistoryMock } from 'src/core/public/mocks';
-
-import { LocationDescriptorObject } from 'history';
-import { KibanaContextProvider } from 'src/plugins/kibana_react/public';
 /* eslint-disable @kbn/eslint/no-restricted-paths */
 import { usageCollectionPluginMock } from 'src/plugins/usage_collection/public/mocks';
 
 import { registerTestBed, TestBed } from '../../../../../../../test_utils';
 import { stubWebWorker } from '../../../../../../../test_utils/stub_web_worker';
-
-import {
-  breadcrumbService,
-  uiMetricService,
-  documentationService,
-  apiService,
-} from '../../../services';
-
-import { ProcessorsEditorContextProvider, Props, PipelineProcessorsEditor } from '../';
-
+import { uiMetricService, apiService } from '../../../services';
+import { Props } from '../';
 import { initHttpRequests } from './http_requests.helpers';
+import { ProcessorsEditorWithDeps } from './processors_editor';
 
 stubWebWorker();
 
@@ -75,34 +64,8 @@ jest.mock('react-virtualized', () => {
   };
 });
 
-const history = scopedHistoryMock.create();
-history.createHref.mockImplementation((location: LocationDescriptorObject) => {
-  return `${location.pathname}?${location.search}`;
-});
-
-const appServices = {
-  breadcrumbs: breadcrumbService,
-  metric: uiMetricService,
-  documentation: documentationService,
-  api: apiService,
-  notifications: notificationServiceMock.createSetupContract(),
-  history,
-  uiSettings: {},
-  urlGenerators: {
-    getUrlGenerator: jest.fn().mockReturnValue({
-      createUrl: jest.fn(),
-    }),
-  },
-};
-
 const testBedSetup = registerTestBed<TestSubject>(
-  (props: Props) => (
-    <KibanaContextProvider services={appServices}>
-      <ProcessorsEditorContextProvider {...props}>
-        <PipelineProcessorsEditor onLoadJson={jest.fn()} />
-      </ProcessorsEditorContextProvider>
-    </KibanaContextProvider>
-  ),
+  (props: Props) => <ProcessorsEditorWithDeps {...props} />,
   {
     doMountAsync: false,
   }
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/inline_text_input.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/inline_text_input.tsx
index 74cb75e60f0509..a9e8028fd02eef 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/inline_text_input.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/inline_text_input.tsx
@@ -11,15 +11,23 @@ export interface Props {
   placeholder: string;
   ariaLabel: string;
   onChange: (value: string) => void;
-  disabled: boolean;
+  /**
+   * Whether the containing element of the text input can be focused.
+   *
+   * If it cannot be focused, this component cannot switch to showing
+   * the text input field.
+   *
+   * Defaults to false.
+   */
+  disabled?: boolean;
   text?: string;
 }
 
 function _InlineTextInput({
-  disabled,
   placeholder,
   text,
   ariaLabel,
+  disabled = false,
   onChange,
 }: Props): React.ReactElement<any, any> | null {
   const [isShowingTextInput, setIsShowingTextInput] = useState<boolean>(false);
@@ -75,7 +83,11 @@ function _InlineTextInput({
       />
     </div>
   ) : (
-    <div className={containerClasses} tabIndex={0} onFocus={() => setIsShowingTextInput(true)}>
+    <div
+      className={containerClasses}
+      tabIndex={disabled ? -1 : 0}
+      onFocus={() => setIsShowingTextInput(true)}
+    >
       <EuiText size="s" color="subdued">
         <div className="pipelineProcessorsEditor__item__description">
           {text || <em>{placeholder}</em>}
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx
index 13a4e0e2148fd1..dd7798a37dd4ef 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx
@@ -185,6 +185,7 @@ export const PipelineProcessorsEditorItem: FunctionComponent<Props> = memo(
                   color={isDimmed ? 'subdued' : undefined}
                 >
                   <EuiLink
+                    tabIndex={isEditorNotInIdleMode ? -1 : 0}
                     disabled={isEditorNotInIdleMode}
                     onClick={() => {
                       editor.setMode({
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/drop_zone_button.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/drop_zone_button.tsx
index 57ecb6f7f1187b..cd32e2ec54726a 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/drop_zone_button.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/drop_zone_button.tsx
@@ -7,11 +7,15 @@
 import { i18n } from '@kbn/i18n';
 import React, { FunctionComponent } from 'react';
 import classNames from 'classnames';
-import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
+import { EuiButtonIcon } from '@elastic/eui';
 
 export interface Props {
   isVisible: boolean;
   isDisabled: boolean;
+  /**
+   * Useful for buttons at the very top or bottom of lists to avoid any overflow.
+   */
+  compressed?: boolean;
   onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   'data-test-subj'?: string;
 }
@@ -29,7 +33,7 @@ const cannotMoveHereLabel = i18n.translate(
 );
 
 export const DropZoneButton: FunctionComponent<Props> = (props) => {
-  const { onClick, isDisabled, isVisible } = props;
+  const { onClick, isDisabled, isVisible, compressed } = props;
   const isUnavailable = isVisible && isDisabled;
   const containerClasses = classNames({
     // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -40,14 +44,16 @@ export const DropZoneButton: FunctionComponent<Props> = (props) => {
   const buttonClasses = classNames({
     // eslint-disable-next-line @typescript-eslint/naming-convention
     'pipelineProcessorsEditor__tree__dropZoneButton--visible': isVisible,
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    'pipelineProcessorsEditor__tree__dropZoneButton--compressed': compressed,
   });
 
-  const content = (
+  return (
     <div className={`pipelineProcessorsEditor__tree__dropZoneContainer ${containerClasses}`}>
       <EuiButtonIcon
         data-test-subj={props['data-test-subj']}
         className={`pipelineProcessorsEditor__tree__dropZoneButton ${buttonClasses}`}
-        aria-label={moveHereLabel}
+        aria-label={isUnavailable ? cannotMoveHereLabel : moveHereLabel}
         // We artificially disable the button so that hover and pointer events are
         // still enabled
         onClick={isDisabled ? () => {} : onClick}
@@ -55,15 +61,4 @@ export const DropZoneButton: FunctionComponent<Props> = (props) => {
       />
     </div>
   );
-
-  return isUnavailable ? (
-    <EuiToolTip
-      className="pipelineProcessorsEditor__tree__dropZoneContainer__toolTip"
-      content={cannotMoveHereLabel}
-    >
-      {content}
-    </EuiToolTip>
-  ) : (
-    content
-  );
 };
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/private_tree.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/private_tree.tsx
index 853772e5f8547a..cbff02070483a5 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/private_tree.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/private_tree.tsx
@@ -5,7 +5,7 @@
  */
 
 import React, { FunctionComponent, MutableRefObject, useEffect, useMemo } from 'react';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup } from '@elastic/eui';
 import { AutoSizer, List, WindowScroller } from 'react-virtualized';
 
 import { DropSpecialLocations } from '../../../constants';
@@ -82,50 +82,45 @@ export const PrivateTree: FunctionComponent<PrivateProps> = ({
     return (
       <>
         {idx === 0 ? (
-          <EuiFlexItem>
-            <DropZoneButton
-              data-test-subj={`dropButtonAbove-${stringifiedSelector}`}
-              onClick={(event) => {
-                event.preventDefault();
-                onAction({
-                  type: 'move',
-                  payload: {
-                    destination: selector.concat(DropSpecialLocations.top),
-                    source: movingProcessor!.selector,
-                  },
-                });
-              }}
-              isVisible={Boolean(movingProcessor)}
-              isDisabled={!movingProcessor || isDropZoneAboveDisabled(info, movingProcessor)}
-            />
-          </EuiFlexItem>
-        ) : undefined}
-        <EuiFlexItem>
-          <TreeNode
-            level={level}
-            processor={processor}
-            processorInfo={info}
-            onAction={onAction}
-            movingProcessor={movingProcessor}
-          />
-        </EuiFlexItem>
-        <EuiFlexItem>
           <DropZoneButton
-            data-test-subj={`dropButtonBelow-${stringifiedSelector}`}
-            isVisible={Boolean(movingProcessor)}
-            isDisabled={!movingProcessor || isDropZoneBelowDisabled(info, movingProcessor)}
+            data-test-subj={`dropButtonAbove-${stringifiedSelector}`}
             onClick={(event) => {
               event.preventDefault();
               onAction({
                 type: 'move',
                 payload: {
-                  destination: selector.concat(String(idx + 1)),
+                  destination: selector.concat(DropSpecialLocations.top),
                   source: movingProcessor!.selector,
                 },
               });
             }}
+            isVisible={Boolean(movingProcessor)}
+            isDisabled={!movingProcessor || isDropZoneAboveDisabled(info, movingProcessor)}
           />
-        </EuiFlexItem>
+        ) : undefined}
+        <TreeNode
+          level={level}
+          processor={processor}
+          processorInfo={info}
+          onAction={onAction}
+          movingProcessor={movingProcessor}
+        />
+        <DropZoneButton
+          compressed={level === 1 && idx + 1 === processors.length}
+          data-test-subj={`dropButtonBelow-${stringifiedSelector}`}
+          isVisible={Boolean(movingProcessor)}
+          isDisabled={!movingProcessor || isDropZoneBelowDisabled(info, movingProcessor)}
+          onClick={(event) => {
+            event.preventDefault();
+            onAction({
+              type: 'move',
+              payload: {
+                destination: selector.concat(String(idx + 1)),
+                source: movingProcessor!.selector,
+              },
+            });
+          }}
+        />
       </>
     );
   };
@@ -145,52 +140,50 @@ export const PrivateTree: FunctionComponent<PrivateProps> = ({
       <WindowScroller ref={windowScrollerRef} scrollElement={window}>
         {({ height, registerChild, isScrolling, onChildScroll, scrollTop }: any) => {
           return (
-            <EuiFlexGroup direction="column" responsive={false} gutterSize="none">
-              <AutoSizer disableHeight>
-                {({ width }) => {
-                  return (
-                    <div ref={registerChild}>
-                      <List
-                        ref={listRef}
-                        autoHeight
-                        height={height}
-                        width={width}
-                        overScanRowCount={5}
-                        isScrolling={isScrolling}
-                        onChildScroll={onChildScroll}
-                        scrollTop={scrollTop}
-                        rowCount={processors.length}
-                        rowHeight={({ index }) => {
-                          const processor = processors[index];
-                          return calculateItemHeight({
-                            processor,
-                            isFirstInArray: index === 0,
-                          });
-                        }}
-                        rowRenderer={({ index: idx, style }) => {
-                          const processor = processors[idx];
-                          const above = processors[idx - 1];
-                          const below = processors[idx + 1];
-                          const info: ProcessorInfo = {
-                            id: processor.id,
-                            selector: selectors[idx],
-                            aboveId: above?.id,
-                            belowId: below?.id,
-                          };
+            <AutoSizer disableHeight>
+              {({ width }) => {
+                return (
+                  <div style={{ width: '100%' }} ref={registerChild}>
+                    <List
+                      ref={listRef}
+                      autoHeight
+                      height={height}
+                      width={width}
+                      overScanRowCount={5}
+                      isScrolling={isScrolling}
+                      onChildScroll={onChildScroll}
+                      scrollTop={scrollTop}
+                      rowCount={processors.length}
+                      rowHeight={({ index }) => {
+                        const processor = processors[index];
+                        return calculateItemHeight({
+                          processor,
+                          isFirstInArray: index === 0,
+                        });
+                      }}
+                      rowRenderer={({ index: idx, style }) => {
+                        const processor = processors[idx];
+                        const above = processors[idx - 1];
+                        const below = processors[idx + 1];
+                        const info: ProcessorInfo = {
+                          id: processor.id,
+                          selector: selectors[idx],
+                          aboveId: above?.id,
+                          belowId: below?.id,
+                        };
 
-                          return (
-                            <div style={style} key={processor.id}>
-                              {renderRow({ processor, info, idx })}
-                            </div>
-                          );
-                        }}
-                        processors={processors}
-                      />
-                    </div>
-                  );
-                }}
-              </AutoSizer>
-            </EuiFlexGroup>
+                        return (
+                          <div style={style} key={processor.id}>
+                            {renderRow({ processor, info, idx })}
+                          </div>
+                        );
+                      }}
+                      processors={processors}
+                    />
+                  </div>
+                );
+              }}
+            </AutoSizer>
           );
         }}
       </WindowScroller>
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.scss b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.scss
index 25e4eb7320bf46..f1e399428cdf29 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.scss
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.scss
@@ -31,15 +31,14 @@
     }
   }
   $dropZoneButtonHeight: 60px;
-  $dropZoneButtonOffsetY: $dropZoneButtonHeight * -0.5;
+  $dropZoneButtonOffsetY: $dropZoneButtonHeight * 0.5;
 
   &__dropZoneButton {
     position: absolute;
     padding: 0;
     height: $dropZoneButtonHeight;
-    margin-top: $dropZoneButtonOffsetY;
+    margin-top: -$dropZoneButtonOffsetY;
     width: 100%;
-    opacity: 0;
     text-decoration: none !important;
     z-index: $dropZoneZIndex;
 
@@ -49,6 +48,10 @@
         transform: none !important;
       }
     }
+
+    &--compressed {
+      height: $dropZoneButtonOffsetY;
+    }
   }
 
   &__addProcessorButton {
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.tsx
index ffc0a1459b7914..46d237e1467e7a 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/processors_tree.tsx
@@ -98,9 +98,16 @@ export const ProcessorsTree: FunctionComponent<Props> = memo((props) => {
         />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <EuiFlexGroup responsive={false} alignItems="flexStart" gutterSize="none">
-          <EuiFlexItem data-test-subj={selectorToDataTestSubject(baseSelector)} grow={false}>
-            {!processors.length && (
+        <EuiFlexGroup
+          data-test-subj={selectorToDataTestSubject(baseSelector)}
+          responsive={false}
+          alignItems="flexStart"
+          gutterSize="none"
+          direction="column"
+        >
+          {!processors.length && (
+            // We want to make this dropzone the max length of its container
+            <EuiFlexItem style={{ width: '100%' }}>
               <DropZoneButton
                 data-test-subj="dropButtonEmptyTree"
                 isVisible={Boolean(movingProcessor)}
@@ -116,7 +123,9 @@ export const ProcessorsTree: FunctionComponent<Props> = memo((props) => {
                   });
                 }}
               />
-            )}
+            </EuiFlexItem>
+          )}
+          <EuiFlexItem grow={false}>
             <AddProcessorButton
               onClick={() => {
                 onAction({ type: 'addProcessor', payload: { target: baseSelector } });
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.scss
index f200e25453a2af..bd2789cf645c72 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.scss
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.scss
@@ -13,17 +13,7 @@
   animation: euiFlyout $euiAnimSpeedNormal $euiAnimSlightResistance;
 }
 
-.lnsDimensionContainer--noAnimation {
-  animation: none;
-}
-
 .lnsDimensionContainer__footer,
 .lnsDimensionContainer__header {
   padding: $euiSizeS;
 }
-
-.lnsDimensionContainer__trigger {
-  width: 100%;
-  display: block;
-  word-break: break-word;
-}
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx
index 19f4c0428260e1..8f1b441d1d285c 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx
@@ -16,89 +16,42 @@ import {
   EuiOutsideClickDetector,
 } from '@elastic/eui';
 
-import classNames from 'classnames';
 import { i18n } from '@kbn/i18n';
-import { VisualizationDimensionGroupConfig } from '../../../types';
-import { DimensionContainerState } from './types';
 
 export function DimensionContainer({
-  dimensionContainerState,
-  setDimensionContainerState,
-  groups,
-  accessor,
-  groupId,
-  trigger,
+  isOpen,
+  groupLabel,
+  handleClose,
   panel,
-  panelTitle,
 }: {
-  dimensionContainerState: DimensionContainerState;
-  setDimensionContainerState: (newState: DimensionContainerState) => void;
-  groups: VisualizationDimensionGroupConfig[];
-  accessor: string;
-  groupId: string;
-  trigger: React.ReactElement;
+  isOpen: boolean;
+  handleClose: () => void;
   panel: React.ReactElement;
-  panelTitle: React.ReactNode;
+  groupLabel: string;
 }) {
-  const [openByCreation, setIsOpenByCreation] = useState(
-    dimensionContainerState.openId === accessor
-  );
   const [focusTrapIsEnabled, setFocusTrapIsEnabled] = useState(false);
-  const [flyoutIsVisible, setFlyoutIsVisible] = useState(false);
-
-  const noMatch = dimensionContainerState.isOpen
-    ? !groups.some((d) => d.accessors.includes(accessor))
-    : false;
 
   const closeFlyout = () => {
-    setDimensionContainerState({
-      isOpen: false,
-      openId: null,
-      addingToGroupId: null,
-    });
-    setIsOpenByCreation(false);
+    handleClose();
     setFocusTrapIsEnabled(false);
-    setFlyoutIsVisible(false);
-  };
-
-  const openFlyout = () => {
-    setFlyoutIsVisible(true);
-    setTimeout(() => {
-      setFocusTrapIsEnabled(true);
-    }, 255);
   };
 
-  const flyoutShouldBeOpen =
-    dimensionContainerState.isOpen &&
-    (dimensionContainerState.openId === accessor ||
-      (noMatch && dimensionContainerState.addingToGroupId === groupId));
-
   useEffect(() => {
-    if (flyoutShouldBeOpen) {
-      openFlyout();
+    if (isOpen) {
+      // without setTimeout here the flyout pushes content when animating
+      setTimeout(() => {
+        setFocusTrapIsEnabled(true);
+      }, 255);
     }
-  });
+  }, [isOpen]);
 
-  useEffect(() => {
-    if (!flyoutShouldBeOpen) {
-      if (flyoutIsVisible) {
-        setFlyoutIsVisible(false);
-      }
-      if (focusTrapIsEnabled) {
-        setFocusTrapIsEnabled(false);
-      }
-    }
-  }, [flyoutShouldBeOpen, flyoutIsVisible, focusTrapIsEnabled]);
-
-  const flyout = flyoutIsVisible && (
+  return isOpen ? (
     <EuiFocusTrap disabled={!focusTrapIsEnabled} clickOutsideDisables={true}>
-      <EuiOutsideClickDetector onOutsideClick={closeFlyout} isDisabled={!flyoutIsVisible}>
+      <EuiOutsideClickDetector onOutsideClick={closeFlyout} isDisabled={!isOpen}>
         <div
           role="dialog"
           aria-labelledby="lnsDimensionContainerTitle"
-          className={classNames('lnsDimensionContainer', {
-            'lnsDimensionContainer--noAnimation': openByCreation,
-          })}
+          className="lnsDimensionContainer"
         >
           <EuiFlyoutHeader hasBorder className="lnsDimensionContainer__header">
             <EuiTitle size="xs">
@@ -109,7 +62,14 @@ export function DimensionContainer({
                 iconType="sortLeft"
                 flush="left"
               >
-                <strong>{panelTitle}</strong>
+                <strong>
+                  {i18n.translate('xpack.lens.configure.configurePanelTitle', {
+                    defaultMessage: '{groupLabel} configuration',
+                    values: {
+                      groupLabel,
+                    },
+                  })}
+                </strong>
               </EuiButtonEmpty>
             </EuiTitle>
           </EuiFlyoutHeader>
@@ -126,12 +86,5 @@ export function DimensionContainer({
         </div>
       </EuiOutsideClickDetector>
     </EuiFocusTrap>
-  );
-
-  return (
-    <>
-      {trigger}
-      {flyout}
-    </>
-  );
+  ) : null;
 }
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx
index a9e2d6dc696ab6..44dc22d20a4fe8 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx
@@ -14,7 +14,6 @@ import {
 } from '../../mocks';
 import { ChildDragDropProvider } from '../../../drag_drop';
 import { EuiFormRow } from '@elastic/eui';
-import { mount } from 'enzyme';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { Visualization } from '../../../types';
 import { LayerPanel } from './layer_panel';
@@ -211,7 +210,7 @@ describe('LayerPanel', () => {
             groupId: 'a',
             accessors: ['newid'],
             filterOperations: () => true,
-            supportsMoreColumns: false,
+            supportsMoreColumns: true,
             dataTestSubj: 'lnsGroup',
             enableDimensionEditor: true,
           },
@@ -220,11 +219,14 @@ describe('LayerPanel', () => {
       mockVisualization.renderDimensionEditor = jest.fn();
 
       const component = mountWithIntl(<LayerPanel {...getDefaultProps()} />);
+      act(() => {
+        component.find('[data-test-subj="lns-empty-dimension"]').first().simulate('click');
+      });
+      component.update();
 
-      const group = component.find('DimensionContainer');
-      const panel = mount(group.prop('panel'));
-
-      expect(panel.children()).toHaveLength(2);
+      const group = component.find('DimensionContainer').first();
+      const panel: React.ReactElement = group.prop('panel');
+      expect(panel.props.children).toHaveLength(2);
     });
 
     it('should keep the DimensionContainer open when configuring a new dimension', () => {
@@ -263,11 +265,8 @@ describe('LayerPanel', () => {
       });
 
       const component = mountWithIntl(<LayerPanel {...getDefaultProps()} />);
-
-      const group = component.find('DimensionContainer');
-      const triggerButton = mountWithIntl(group.prop('trigger'));
       act(() => {
-        triggerButton.find('[data-test-subj="lns-empty-dimension"]').first().simulate('click');
+        component.find('[data-test-subj="lns-empty-dimension"]').first().simulate('click');
       });
       component.update();
 
@@ -312,10 +311,8 @@ describe('LayerPanel', () => {
 
       const component = mountWithIntl(<LayerPanel {...getDefaultProps()} />);
 
-      const group = component.find('DimensionContainer');
-      const triggerButton = mountWithIntl(group.prop('trigger'));
       act(() => {
-        triggerButton.find('[data-test-subj="lns-empty-dimension"]').first().simulate('click');
+        component.find('[data-test-subj="lns-empty-dimension"]').first().simulate('click');
       });
       component.update();
       expect(component.find('EuiFlyoutHeader').exists()).toBe(true);
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
index ce2955da890d7c..e72bf75b010c3e 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
@@ -23,13 +23,11 @@ import { DragContext, DragDrop, ChildDragDropProvider } from '../../../drag_drop
 import { LayerSettings } from './layer_settings';
 import { trackUiEvent } from '../../../lens_ui_telemetry';
 import { generateId } from '../../../id_generator';
-import { ConfigPanelWrapperProps, DimensionContainerState } from './types';
+import { ConfigPanelWrapperProps, ActiveDimensionState } from './types';
 import { DimensionContainer } from './dimension_container';
 
-const initialDimensionContainerState = {
-  isOpen: false,
-  openId: null,
-  addingToGroupId: null,
+const initialActiveDimensionState = {
+  isNew: false,
 };
 
 function isConfiguration(
@@ -70,15 +68,15 @@ export function LayerPanel(
   }
 ) {
   const dragDropContext = useContext(DragContext);
-  const [dimensionContainerState, setDimensionContainerState] = useState<DimensionContainerState>(
-    initialDimensionContainerState
+  const [activeDimension, setActiveDimension] = useState<ActiveDimensionState>(
+    initialActiveDimensionState
   );
 
   const { framePublicAPI, layerId, isOnlyLayer, onRemoveLayer, dataTestSubj } = props;
   const datasourcePublicAPI = framePublicAPI.datasourceLayers[layerId];
 
   useEffect(() => {
-    setDimensionContainerState(initialDimensionContainerState);
+    setActiveDimension(initialActiveDimensionState);
   }, [props.activeVisualizationId]);
 
   if (
@@ -117,7 +115,7 @@ export function LayerPanel(
 
   const { groups } = activeVisualization.getConfiguration(layerVisualizationConfigProps);
   const isEmptyLayer = !groups.some((d) => d.accessors.length > 0);
-
+  const { activeId, activeGroup } = activeDimension;
   return (
     <ChildDragDropProvider {...dragDropContext}>
       <EuiPanel data-test-subj={dataTestSubj} className="lnsLayerPanel" paddingSize="s">
@@ -196,31 +194,6 @@ export function LayerPanel(
             >
               <>
                 {group.accessors.map((accessor) => {
-                  const datasourceDimensionEditor = (
-                    <NativeRenderer
-                      render={props.datasourceMap[datasourceId].renderDimensionEditor}
-                      nativeProps={{
-                        ...layerDatasourceConfigProps,
-                        core: props.core,
-                        columnId: accessor,
-                        filterOperations: group.filterOperations,
-                      }}
-                    />
-                  );
-                  const visDimensionEditor =
-                    activeVisualization.renderDimensionEditor && group.enableDimensionEditor ? (
-                      <div key={accessor} className="lnsLayerPanel__styleEditor">
-                        <NativeRenderer
-                          render={activeVisualization.renderDimensionEditor}
-                          nativeProps={{
-                            ...layerVisualizationConfigProps,
-                            groupId: group.groupId,
-                            accessor,
-                            setState: props.updateVisualization,
-                          }}
-                        />
-                      </div>
-                    ) : null;
                   return (
                     <DragDrop
                       key={accessor}
@@ -237,7 +210,7 @@ export function LayerPanel(
                           : 'add'
                       }
                       data-test-subj={group.dataTestSubj}
-                      draggable={!dimensionContainerState.isOpen}
+                      draggable={!activeId}
                       value={{ columnId: accessor, groupId: group.groupId, layerId }}
                       isValueEqual={isSameConfiguration}
                       label={group.groupLabel}
@@ -273,48 +246,26 @@ export function LayerPanel(
                       }}
                     >
                       <div className="lnsLayerPanel__dimension">
-                        <DimensionContainer
-                          dimensionContainerState={dimensionContainerState}
-                          setDimensionContainerState={setDimensionContainerState}
-                          groups={groups}
-                          accessor={accessor}
-                          groupId={group.groupId}
-                          trigger={
-                            <NativeRenderer
-                              render={props.datasourceMap[datasourceId].renderDimensionTrigger}
-                              nativeProps={{
-                                ...layerDatasourceConfigProps,
-                                columnId: accessor,
-                                filterOperations: group.filterOperations,
-                                suggestedPriority: group.suggestedPriority,
-                                onClick: () => {
-                                  if (dimensionContainerState.isOpen) {
-                                    setDimensionContainerState(initialDimensionContainerState);
-                                  } else {
-                                    setDimensionContainerState({
-                                      isOpen: true,
-                                      openId: accessor,
-                                      addingToGroupId: null, // not set for existing dimension
-                                    });
-                                  }
-                                },
-                              }}
-                            />
-                          }
-                          panel={
-                            <>
-                              {datasourceDimensionEditor}
-                              {visDimensionEditor}
-                            </>
-                          }
-                          panelTitle={i18n.translate('xpack.lens.configure.configurePanelTitle', {
-                            defaultMessage: '{groupLabel} configuration',
-                            values: {
-                              groupLabel: group.groupLabel,
+                        <NativeRenderer
+                          render={props.datasourceMap[datasourceId].renderDimensionTrigger}
+                          nativeProps={{
+                            ...layerDatasourceConfigProps,
+                            columnId: accessor,
+                            filterOperations: group.filterOperations,
+                            suggestedPriority: group.suggestedPriority,
+                            onClick: () => {
+                              if (activeId) {
+                                setActiveDimension(initialActiveDimensionState);
+                              } else {
+                                setActiveDimension({
+                                  isNew: false,
+                                  activeGroup: group,
+                                  activeId: accessor,
+                                });
+                              }
                             },
-                          })}
+                          }}
                         />
-
                         <EuiButtonIcon
                           data-test-subj="indexPattern-dimension-remove"
                           iconType="cross"
@@ -394,77 +345,32 @@ export function LayerPanel(
                     }}
                   >
                     <div className="lnsLayerPanel__dimension">
-                      <DimensionContainer
-                        dimensionContainerState={dimensionContainerState}
-                        setDimensionContainerState={setDimensionContainerState}
-                        groups={groups}
-                        accessor={newId}
-                        groupId={group.groupId}
-                        trigger={
-                          <EuiButtonEmpty
-                            className="lnsLayerPanel__triggerLink"
-                            color="text"
-                            size="xs"
-                            iconType="plusInCircleFilled"
-                            contentProps={{
-                              className: 'lnsLayerPanel__triggerLinkContent',
-                            }}
-                            data-test-subj="lns-empty-dimension"
-                            onClick={() => {
-                              if (dimensionContainerState.isOpen) {
-                                setDimensionContainerState(initialDimensionContainerState);
-                              } else {
-                                setDimensionContainerState({
-                                  isOpen: true,
-                                  openId: newId,
-                                  addingToGroupId: group.groupId,
-                                });
-                              }
-                            }}
-                          >
-                            <FormattedMessage
-                              id="xpack.lens.configure.emptyConfig"
-                              defaultMessage="Drop a field or click to add"
-                            />
-                          </EuiButtonEmpty>
-                        }
-                        panelTitle={i18n.translate('xpack.lens.configure.configurePanelTitle', {
-                          defaultMessage: '{groupLabel} configuration',
-                          values: {
-                            groupLabel: group.groupLabel,
-                          },
-                        })}
-                        panel={
-                          <NativeRenderer
-                            render={props.datasourceMap[datasourceId].renderDimensionEditor}
-                            nativeProps={{
-                              ...layerDatasourceConfigProps,
-                              core: props.core,
-                              columnId: newId,
-                              filterOperations: group.filterOperations,
-                              suggestedPriority: group.suggestedPriority,
-
-                              setState: (newState: unknown) => {
-                                props.updateAll(
-                                  datasourceId,
-                                  newState,
-                                  activeVisualization.setDimension({
-                                    layerId,
-                                    groupId: group.groupId,
-                                    columnId: newId,
-                                    prevState: props.visualizationState,
-                                  })
-                                );
-                                setDimensionContainerState({
-                                  isOpen: true,
-                                  openId: newId,
-                                  addingToGroupId: null, // clear now that dimension exists
-                                });
-                              },
-                            }}
-                          />
-                        }
-                      />
+                      <EuiButtonEmpty
+                        className="lnsLayerPanel__triggerLink"
+                        color="text"
+                        size="xs"
+                        iconType="plusInCircleFilled"
+                        contentProps={{
+                          className: 'lnsLayerPanel__triggerLinkContent',
+                        }}
+                        data-test-subj="lns-empty-dimension"
+                        onClick={() => {
+                          if (activeId) {
+                            setActiveDimension(initialActiveDimensionState);
+                          } else {
+                            setActiveDimension({
+                              isNew: true,
+                              activeGroup: group,
+                              activeId: newId,
+                            });
+                          }
+                        }}
+                      >
+                        <FormattedMessage
+                          id="xpack.lens.configure.emptyConfig"
+                          defaultMessage="Drop a field or click to add"
+                        />
+                      </EuiButtonEmpty>
                     </div>
                   </DragDrop>
                 ) : null}
@@ -472,6 +378,60 @@ export function LayerPanel(
             </EuiFormRow>
           );
         })}
+        <DimensionContainer
+          isOpen={!!activeId}
+          groupLabel={activeGroup?.groupLabel || ''}
+          handleClose={() => setActiveDimension(initialActiveDimensionState)}
+          panel={
+            <>
+              {activeGroup && activeId && (
+                <NativeRenderer
+                  render={props.datasourceMap[datasourceId].renderDimensionEditor}
+                  nativeProps={{
+                    ...layerDatasourceConfigProps,
+                    core: props.core,
+                    columnId: activeId,
+                    filterOperations: activeGroup.filterOperations,
+                    suggestedPriority: activeGroup?.suggestedPriority,
+                    setState: (newState: unknown) => {
+                      props.updateAll(
+                        datasourceId,
+                        newState,
+                        activeVisualization.setDimension({
+                          layerId,
+                          groupId: activeGroup.groupId,
+                          columnId: activeId,
+                          prevState: props.visualizationState,
+                        })
+                      );
+                      setActiveDimension({
+                        ...activeDimension,
+                        isNew: false,
+                      });
+                    },
+                  }}
+                />
+              )}
+              {activeGroup &&
+                activeId &&
+                !activeDimension.isNew &&
+                activeVisualization.renderDimensionEditor &&
+                activeGroup?.enableDimensionEditor && (
+                  <div className="lnsLayerPanel__styleEditor">
+                    <NativeRenderer
+                      render={activeVisualization.renderDimensionEditor}
+                      nativeProps={{
+                        ...layerVisualizationConfigProps,
+                        groupId: activeGroup.groupId,
+                        accessor: activeId,
+                        setState: props.updateVisualization,
+                      }}
+                    />
+                  </div>
+                )}
+            </>
+          }
+        />
 
         <EuiSpacer size="s" />
 
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/types.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/types.ts
index d42c5c3b99e53b..c172c6da6848c2 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/types.ts
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/types.ts
@@ -10,6 +10,7 @@ import {
   FramePublicAPI,
   Datasource,
   DatasourceDimensionEditorProps,
+  VisualizationDimensionGroupConfig,
 } from '../../../types';
 
 export interface ConfigPanelWrapperProps {
@@ -30,8 +31,8 @@ export interface ConfigPanelWrapperProps {
   core: DatasourceDimensionEditorProps['core'];
 }
 
-export interface DimensionContainerState {
-  isOpen: boolean;
-  openId: string | null;
-  addingToGroupId: string | null;
+export interface ActiveDimensionState {
+  isNew: boolean;
+  activeId?: string;
+  activeGroup?: VisualizationDimensionGroupConfig;
 }
diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js
index 4c87c3b374ff36..448d39db3e4441 100644
--- a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js
+++ b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js
@@ -672,7 +672,7 @@ class TimeseriesChartIntl extends Component {
 
       // if annotations are present, we extend yMax to avoid overlap
       // between annotation labels, chart lines and anomalies.
-      if (focusAnnotationData && focusAnnotationData.length > 0) {
+      if (showAnnotations && focusAnnotationData && focusAnnotationData.length > 0) {
         const levels = getAnnotationLevels(focusAnnotationData);
         const maxLevel = d3.max(Object.keys(levels).map((key) => levels[key]));
         // TODO needs revisiting to be a more robust normalization
diff --git a/x-pack/plugins/security/public/management/users/edit_user/edit_user_page.tsx b/x-pack/plugins/security/public/management/users/edit_user/edit_user_page.tsx
index 9eb2616cebb181..9a62187cffd337 100644
--- a/x-pack/plugins/security/public/management/users/edit_user/edit_user_page.tsx
+++ b/x-pack/plugins/security/public/management/users/edit_user/edit_user_page.tsx
@@ -536,7 +536,7 @@ export class EditUserPage extends Component<Props, State> {
 
               {isNewUser || showChangePasswordForm ? null : (
                 <EuiFormRow label="Password">
-                  <EuiLink onClick={this.toggleChangePasswordForm}>
+                  <EuiLink data-test-subj="changePassword" onClick={this.toggleChangePasswordForm}>
                     <FormattedMessage
                       id="xpack.security.management.users.editUser.changePasswordButtonLabel"
                       defaultMessage="Change password"
diff --git a/x-pack/plugins/security/public/management/users/users_grid/users_grid_page.tsx b/x-pack/plugins/security/public/management/users/users_grid/users_grid_page.tsx
index 50815808c48592..4825e2b119b7b5 100644
--- a/x-pack/plugins/security/public/management/users/users_grid/users_grid_page.tsx
+++ b/x-pack/plugins/security/public/management/users/users_grid/users_grid_page.tsx
@@ -192,6 +192,7 @@ export class UsersGridPage extends Component<Props, State> {
       toolsRight: this.renderToolsRight(),
       box: {
         incremental: true,
+        'data-test-subj': 'searchUsers',
       },
       onChange: (query: any) => {
         this.setState({
diff --git a/x-pack/plugins/security_solution/common/endpoint/types/index.ts b/x-pack/plugins/security_solution/common/endpoint/types/index.ts
index abb0ccee8d9097..0054c1f1abdd5f 100644
--- a/x-pack/plugins/security_solution/common/endpoint/types/index.ts
+++ b/x-pack/plugins/security_solution/common/endpoint/types/index.ts
@@ -718,7 +718,10 @@ export type SafeEndpointEvent = Partial<{
     forwarded_ip: ECSField<string>;
   }>;
   dns: Partial<{
-    question: Partial<{ name: ECSField<string> }>;
+    question: Partial<{
+      name: ECSField<string>;
+      type: ECSField<string>;
+    }>;
   }>;
   process: Partial<{
     entity_id: ECSField<string>;
diff --git a/x-pack/plugins/security_solution/cypress/integration/alerts_detection_rules_eql.spec.ts b/x-pack/plugins/security_solution/cypress/integration/alerts_detection_rules_eql.spec.ts
index ca7832603f13d2..a7ddba94bffd28 100644
--- a/x-pack/plugins/security_solution/cypress/integration/alerts_detection_rules_eql.spec.ts
+++ b/x-pack/plugins/security_solution/cypress/integration/alerts_detection_rules_eql.spec.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { eqlRule, indexPatterns } from '../objects/rule';
+import { eqlRule, eqlSequenceRule, indexPatterns } from '../objects/rule';
 
 import {
   ALERT_RULE_METHOD,
@@ -85,6 +85,7 @@ const expectedMitre = eqlRule.mitre
   .join('');
 const expectedNumberOfRules = 1;
 const expectedNumberOfAlerts = 7;
+const expectedNumberOfSequenceAlerts = 1;
 
 describe('Detection rules, EQL', () => {
   before(() => {
@@ -172,4 +173,43 @@ describe('Detection rules, EQL', () => {
     cy.get(ALERT_RULE_SEVERITY).first().should('have.text', eqlRule.severity.toLowerCase());
     cy.get(ALERT_RULE_RISK_SCORE).first().should('have.text', eqlRule.riskScore);
   });
+
+  it('Creates and activates a new EQL rule with a sequence', () => {
+    loginAndWaitForPageWithoutDateRange(DETECTIONS_URL);
+    waitForAlertsPanelToBeLoaded();
+    waitForAlertsIndexToBeCreated();
+    goToManageAlertsDetectionRules();
+    waitForLoadElasticPrebuiltDetectionRulesTableToBeLoaded();
+    goToCreateNewRule();
+    selectEqlRuleType();
+    fillDefineEqlRuleAndContinue(eqlSequenceRule);
+    fillAboutRuleAndContinue(eqlSequenceRule);
+    fillScheduleRuleAndContinue(eqlSequenceRule);
+    createAndActivateRule();
+
+    cy.get(CUSTOM_RULES_BTN).should('have.text', 'Custom rules (1)');
+
+    changeToThreeHundredRowsPerPage();
+    waitForRulesToBeLoaded();
+
+    cy.get(RULES_TABLE).then(($table) => {
+      cy.wrap($table.find(RULES_ROW).length).should('eql', expectedNumberOfRules);
+    });
+
+    filterByCustomRules();
+    goToRuleDetails();
+    refreshPage();
+    waitForTheRuleToBeExecuted();
+
+    cy.get(NUMBER_OF_ALERTS)
+      .invoke('text')
+      .then((numberOfAlertsText) => {
+        cy.wrap(parseInt(numberOfAlertsText, 10)).should('eql', expectedNumberOfSequenceAlerts);
+      });
+    cy.get(ALERT_RULE_NAME).first().should('have.text', eqlSequenceRule.name);
+    cy.get(ALERT_RULE_VERSION).first().should('have.text', '1');
+    cy.get(ALERT_RULE_METHOD).first().should('have.text', 'eql');
+    cy.get(ALERT_RULE_SEVERITY).first().should('have.text', eqlSequenceRule.severity.toLowerCase());
+    cy.get(ALERT_RULE_RISK_SCORE).first().should('have.text', eqlSequenceRule.riskScore);
+  });
 });
diff --git a/x-pack/plugins/security_solution/cypress/objects/rule.ts b/x-pack/plugins/security_solution/cypress/objects/rule.ts
index f375eccd902c48..0bb4c8e3560912 100644
--- a/x-pack/plugins/security_solution/cypress/objects/rule.ts
+++ b/x-pack/plugins/security_solution/cypress/objects/rule.ts
@@ -230,6 +230,25 @@ export const eqlRule: CustomRule = {
   lookBack,
 };
 
+export const eqlSequenceRule: CustomRule = {
+  customQuery:
+    'sequence with maxspan=30s\
+     [any where process.name == "which"]\
+     [any where process.name == "xargs"]',
+  name: 'New EQL Sequence Rule',
+  description: 'New EQL rule description.',
+  severity: 'High',
+  riskScore: '17',
+  tags: ['test', 'newRule'],
+  referenceUrls: ['https://www.google.com/', 'https://elastic.co/'],
+  falsePositivesExamples: ['False1', 'False2'],
+  mitre: [mitre1, mitre2],
+  note: '# test markdown',
+  timelineId: '0162c130-78be-11ea-9718-118a926974a4',
+  runsEvery,
+  lookBack,
+};
+
 export const indexPatterns = [
   'apm-*-transaction*',
   'auditbeat-*',
diff --git a/x-pack/plugins/security_solution/cypress/tasks/create_new_rule.ts b/x-pack/plugins/security_solution/cypress/tasks/create_new_rule.ts
index 914566a13a9a97..079c18b6abe6ef 100644
--- a/x-pack/plugins/security_solution/cypress/tasks/create_new_rule.ts
+++ b/x-pack/plugins/security_solution/cypress/tasks/create_new_rule.ts
@@ -223,7 +223,6 @@ export const fillDefineThresholdRuleAndContinue = (rule: ThresholdRule) => {
 
 export const fillDefineEqlRuleAndContinue = (rule: CustomRule) => {
   cy.get(EQL_QUERY_INPUT).type(rule.customQuery);
-  cy.get(EQL_QUERY_INPUT).invoke('text').should('eq', rule.customQuery);
   cy.get(DEFINE_CONTINUE_BUTTON).should('exist').click({ force: true });
 
   cy.get(EQL_QUERY_INPUT).should('not.exist');
diff --git a/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/action_wizard.tsx b/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/action_wizard.tsx
index e935798179402e..7a705f03c06509 100644
--- a/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/action_wizard.tsx
+++ b/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/action_wizard.tsx
@@ -80,7 +80,7 @@ export interface ActionWizardProps<
   /**
    * List of possible triggers in current context
    */
-  supportedTriggers: TriggerId[];
+  triggers: TriggerId[];
 
   triggerPickerDocsLink?: string;
 }
@@ -94,7 +94,7 @@ export const ActionWizard: React.FC<ActionWizardProps> = ({
   context,
   onSelectedTriggersChange,
   getTriggerInfo,
-  supportedTriggers,
+  triggers,
   triggerPickerDocsLink,
 }) => {
   // auto pick action factory if there is only 1 available
@@ -108,14 +108,14 @@ export const ActionWizard: React.FC<ActionWizardProps> = ({
 
   // auto pick selected trigger if none is picked
   if (currentActionFactory && !((context.triggers?.length ?? 0) > 0)) {
-    const triggers = getTriggersForActionFactory(currentActionFactory, supportedTriggers);
-    if (triggers.length > 0) {
-      onSelectedTriggersChange([triggers[0]]);
+    const actionTriggers = getTriggersForActionFactory(currentActionFactory, triggers);
+    if (actionTriggers.length > 0) {
+      onSelectedTriggersChange([actionTriggers[0]]);
     }
   }
 
   if (currentActionFactory && config) {
-    const allTriggers = getTriggersForActionFactory(currentActionFactory, supportedTriggers);
+    const allTriggers = getTriggersForActionFactory(currentActionFactory, triggers);
     return (
       <SelectedActionFactory
         actionFactory={currentActionFactory}
diff --git a/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/test_data.tsx b/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/test_data.tsx
index af930bfba6b8b6..9bb506b3ebf148 100644
--- a/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/test_data.tsx
+++ b/x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/test_data.tsx
@@ -254,7 +254,7 @@ export function Demo({ actionFactories }: { actionFactories: Array<ActionFactory
           });
         }}
         getTriggerInfo={mockGetTriggerInfo}
-        supportedTriggers={[VALUE_CLICK_TRIGGER, APPLY_FILTER_TRIGGER, SELECT_RANGE_TRIGGER]}
+        triggers={[VALUE_CLICK_TRIGGER, APPLY_FILTER_TRIGGER, SELECT_RANGE_TRIGGER]}
       />
       <div style={{ marginTop: '44px' }} />
       <hr />
diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.stories.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.stories.tsx
index daa56354289cf7..a909d2a27f454e 100644
--- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.stories.tsx
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.stories.tsx
@@ -34,7 +34,7 @@ storiesOf('components/FlyoutManageDrilldowns', module)
     <EuiFlyout onClose={() => {}}>
       <FlyoutManageDrilldowns
         dynamicActionManager={mockDynamicActionManager}
-        supportedTriggers={['VALUE_CLICK_TRIGGER', 'SELECT_RANGE_TRIGGER', 'FILTER_TRIGGER']}
+        triggers={['VALUE_CLICK_TRIGGER', 'SELECT_RANGE_TRIGGER', 'FILTER_TRIGGER']}
       />
     </EuiFlyout>
   ))
@@ -42,7 +42,7 @@ storiesOf('components/FlyoutManageDrilldowns', module)
     <EuiFlyout onClose={() => {}}>
       <FlyoutManageDrilldowns
         dynamicActionManager={mockDynamicActionManager}
-        supportedTriggers={['FILTER_TRIGGER']}
+        triggers={['FILTER_TRIGGER']}
       />
     </EuiFlyout>
   ));
diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.test.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.test.tsx
index 48dbd5a8641700..bef6834ed4c470 100644
--- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.test.tsx
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.test.tsx
@@ -19,7 +19,7 @@ import { TEST_SUBJ_DRILLDOWN_ITEM } from '../list_manage_drilldowns';
 import { WELCOME_MESSAGE_TEST_SUBJ } from '../drilldown_hello_bar';
 import { coreMock } from '../../../../../../../src/core/public/mocks';
 import { NotificationsStart } from 'kibana/public';
-import { toastDrilldownsCRUDError } from './i18n';
+import { toastDrilldownsCRUDError } from '../../hooks/i18n';
 
 const storage = new Storage(new StubBrowserStorage());
 const toasts = coreMock.createStart().notifications.toasts;
@@ -41,7 +41,7 @@ test('Allows to manage drilldowns', async () => {
   const screen = render(
     <FlyoutManageDrilldowns
       dynamicActionManager={mockDynamicActionManager}
-      supportedTriggers={mockSupportedTriggers}
+      triggers={mockSupportedTriggers}
     />
   );
 
@@ -115,7 +115,7 @@ test('Can delete multiple drilldowns', async () => {
   const screen = render(
     <FlyoutManageDrilldowns
       dynamicActionManager={mockDynamicActionManager}
-      supportedTriggers={mockSupportedTriggers}
+      triggers={mockSupportedTriggers}
     />
   );
   // wait for initial render. It is async because resolving compatible action factories is async
@@ -157,7 +157,7 @@ test('Create only mode', async () => {
       dynamicActionManager={mockDynamicActionManager}
       viewMode={'create'}
       onClose={onClose}
-      supportedTriggers={mockSupportedTriggers}
+      triggers={mockSupportedTriggers}
     />
   );
   // wait for initial render. It is async because resolving compatible action factories is async
@@ -181,7 +181,7 @@ test('After switching between action factories state is restored', async () => {
     <FlyoutManageDrilldowns
       dynamicActionManager={mockDynamicActionManager}
       viewMode={'create'}
-      supportedTriggers={mockSupportedTriggers}
+      triggers={mockSupportedTriggers}
     />
   );
   // wait for initial render. It is async because resolving compatible action factories is async
@@ -222,7 +222,7 @@ test("Error when can't save drilldown changes", async () => {
   const screen = render(
     <FlyoutManageDrilldowns
       dynamicActionManager={mockDynamicActionManager}
-      supportedTriggers={mockSupportedTriggers}
+      triggers={mockSupportedTriggers}
     />
   );
   // wait for initial render. It is async because resolving compatible action factories is async
@@ -245,7 +245,7 @@ test('Should show drilldown welcome message. Should be able to dismiss it', asyn
   let screen = render(
     <FlyoutManageDrilldowns
       dynamicActionManager={mockDynamicActionManager}
-      supportedTriggers={mockSupportedTriggers}
+      triggers={mockSupportedTriggers}
     />
   );
 
@@ -260,7 +260,7 @@ test('Should show drilldown welcome message. Should be able to dismiss it', asyn
   screen = render(
     <FlyoutManageDrilldowns
       dynamicActionManager={mockDynamicActionManager}
-      supportedTriggers={mockSupportedTriggers}
+      triggers={mockSupportedTriggers}
     />
   );
   // wait for initial render. It is async because resolving compatible action factories is async
@@ -272,7 +272,7 @@ test('Drilldown type is not shown if no supported trigger', async () => {
   const screen = render(
     <FlyoutManageDrilldowns
       dynamicActionManager={mockDynamicActionManager}
-      supportedTriggers={['VALUE_CLICK_TRIGGER']}
+      triggers={['VALUE_CLICK_TRIGGER']}
       viewMode={'create'}
     />
   );
@@ -286,7 +286,7 @@ test('Can pick a trigger', async () => {
   const screen = render(
     <FlyoutManageDrilldowns
       dynamicActionManager={mockDynamicActionManager}
-      supportedTriggers={mockSupportedTriggers}
+      triggers={mockSupportedTriggers}
       viewMode={'create'}
     />
   );
diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.tsx
index 272ec3edc9d29f..1f148de7b51782 100644
--- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.tsx
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.tsx
@@ -4,33 +4,25 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useEffect, useState, useMemo } from 'react';
+import React, { useState, useMemo } from 'react';
 import { ToastsStart } from 'kibana/public';
-import useMountedState from 'react-use/lib/useMountedState';
 import { intersection } from 'lodash';
 import { DrilldownWizardConfig, FlyoutDrilldownWizard } from '../flyout_drilldown_wizard';
 import { FlyoutListManageDrilldowns } from '../flyout_list_manage_drilldowns';
 import { IStorageWrapper } from '../../../../../../../src/plugins/kibana_utils/public';
 import { Trigger, TriggerId } from '../../../../../../../src/plugins/ui_actions/public';
-import { useContainerState } from '../../../../../../../src/plugins/kibana_utils/public';
 import { DrilldownListItem } from '../list_manage_drilldowns';
-import {
-  insufficientLicenseLevel,
-  invalidDrilldownType,
-  toastDrilldownCreated,
-  toastDrilldownDeleted,
-  toastDrilldownEdited,
-  toastDrilldownsCRUDError,
-  toastDrilldownsDeleted,
-} from './i18n';
+import { insufficientLicenseLevel, invalidDrilldownType } from './i18n';
 import {
   ActionFactory,
   BaseActionConfig,
   BaseActionFactoryContext,
   DynamicActionManager,
-  SerializedAction,
   SerializedEvent,
 } from '../../../dynamic_actions';
+import { useWelcomeMessage } from '../../hooks/use_welcome_message';
+import { useCompatibleActionFactoriesForCurrentContext } from '../../hooks/use_compatible_action_factories_for_current_context';
+import { useDrilldownsStateManager } from '../../hooks/use_drilldown_state_manager';
 import { ActionFactoryPlaceContext } from '../types';
 
 interface ConnectedFlyoutManageDrilldownsProps<
@@ -43,7 +35,7 @@ interface ConnectedFlyoutManageDrilldownsProps<
   /**
    * List of possible triggers in current context
    */
-  supportedTriggers: TriggerId[];
+  triggers: TriggerId[];
 
   /**
    * Extra action factory context passed into action factories CollectConfig, getIconType, getDisplayName and etc...
@@ -74,7 +66,7 @@ export function createFlyoutManageDrilldowns({
   toastService: ToastsStart;
   docsLink?: string;
   triggerPickerDocsLink?: string;
-}) {
+}): React.FC<ConnectedFlyoutManageDrilldownsProps> {
   const allActionFactoriesById = allActionFactories.reduce((acc, next) => {
     acc[next.id] = next;
     return acc;
@@ -84,8 +76,8 @@ export function createFlyoutManageDrilldowns({
     const isCreateOnly = props.viewMode === 'create';
 
     const factoryContext: BaseActionFactoryContext = useMemo(
-      () => ({ ...props.placeContext, triggers: props.supportedTriggers }),
-      [props.placeContext, props.supportedTriggers]
+      () => ({ ...props.placeContext, triggers: props.triggers }),
+      [props.placeContext, props.triggers]
     );
     const actionFactories = useCompatibleActionFactoriesForCurrentContext(
       allActionFactories,
@@ -210,7 +202,7 @@ export function createFlyoutManageDrilldowns({
             }}
             actionFactoryPlaceContext={props.placeContext}
             initialDrilldownWizardConfig={resolveInitialDrilldownWizardConfig()}
-            supportedTriggers={props.supportedTriggers}
+            supportedTriggers={props.triggers}
             getTrigger={getTrigger}
           />
         );
@@ -220,7 +212,7 @@ export function createFlyoutManageDrilldowns({
         // show trigger column in case if there is more then 1 possible trigger in current context
         const showTriggerColumn =
           intersection(
-            props.supportedTriggers,
+            props.triggers,
             actionFactories
               .map((factory) => factory.supportedTriggers())
               .reduce((res, next) => res.concat(next), [])
@@ -250,108 +242,3 @@ export function createFlyoutManageDrilldowns({
     }
   };
 }
-
-function useCompatibleActionFactoriesForCurrentContext<
-  Context extends BaseActionFactoryContext = BaseActionFactoryContext
->(actionFactories: ActionFactory[], context: Context) {
-  const [compatibleActionFactories, setCompatibleActionFactories] = useState<ActionFactory[]>();
-  useEffect(() => {
-    let canceled = false;
-    async function updateCompatibleFactoriesForContext() {
-      const compatibility = await Promise.all(
-        actionFactories.map((factory) => factory.isCompatible(context))
-      );
-      if (canceled) return;
-
-      const compatibleFactories = actionFactories.filter((_, i) => compatibility[i]);
-      const triggerSupportedFactories = compatibleFactories.filter((factory) =>
-        factory.supportedTriggers().some((trigger) => context.triggers.includes(trigger))
-      );
-      setCompatibleActionFactories(triggerSupportedFactories);
-    }
-    updateCompatibleFactoriesForContext();
-    return () => {
-      canceled = true;
-    };
-  }, [context, actionFactories, context.triggers]);
-
-  return compatibleActionFactories;
-}
-
-function useWelcomeMessage(storage: IStorageWrapper): [boolean, () => void] {
-  const key = `drilldowns:hidWelcomeMessage`;
-  const [hidWelcomeMessage, setHidWelcomeMessage] = useState<boolean>(storage.get(key) ?? false);
-
-  return [
-    !hidWelcomeMessage,
-    () => {
-      if (hidWelcomeMessage) return;
-      setHidWelcomeMessage(true);
-      storage.set(key, true);
-    },
-  ];
-}
-
-function useDrilldownsStateManager(actionManager: DynamicActionManager, toastService: ToastsStart) {
-  const { events: drilldowns } = useContainerState(actionManager.state);
-  const [isLoading, setIsLoading] = useState(false);
-  const isMounted = useMountedState();
-
-  async function run(op: () => Promise<void>) {
-    setIsLoading(true);
-    try {
-      await op();
-    } catch (e) {
-      toastService.addError(e, {
-        title: toastDrilldownsCRUDError,
-      });
-      if (!isMounted) return;
-      setIsLoading(false);
-      return;
-    }
-  }
-
-  async function createDrilldown(action: SerializedAction, selectedTriggers: TriggerId[]) {
-    await run(async () => {
-      await actionManager.createEvent(action, selectedTriggers);
-      toastService.addSuccess({
-        title: toastDrilldownCreated.title(action.name),
-        text: toastDrilldownCreated.text,
-      });
-    });
-  }
-
-  async function editDrilldown(
-    drilldownId: string,
-    action: SerializedAction,
-    selectedTriggers: TriggerId[]
-  ) {
-    await run(async () => {
-      await actionManager.updateEvent(drilldownId, action, selectedTriggers);
-      toastService.addSuccess({
-        title: toastDrilldownEdited.title(action.name),
-        text: toastDrilldownEdited.text,
-      });
-    });
-  }
-
-  async function deleteDrilldown(drilldownIds: string | string[]) {
-    await run(async () => {
-      drilldownIds = Array.isArray(drilldownIds) ? drilldownIds : [drilldownIds];
-      await actionManager.deleteEvents(drilldownIds);
-      toastService.addSuccess(
-        drilldownIds.length === 1
-          ? {
-              title: toastDrilldownDeleted.title,
-              text: toastDrilldownDeleted.text,
-            }
-          : {
-              title: toastDrilldownsDeleted.title(drilldownIds.length),
-              text: toastDrilldownsDeleted.text,
-            }
-      );
-    });
-  }
-
-  return { drilldowns, isLoading, createDrilldown, editDrilldown, deleteDrilldown };
-}
diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/i18n.ts b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/i18n.ts
index 4b2be5db0c5584..b684189a60feec 100644
--- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/i18n.ts
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/i18n.ts
@@ -6,87 +6,6 @@
 
 import { i18n } from '@kbn/i18n';
 
-export const toastDrilldownCreated = {
-  title: (drilldownName: string) =>
-    i18n.translate(
-      'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownCreatedTitle',
-      {
-        defaultMessage: 'Drilldown "{drilldownName}" created',
-        values: {
-          drilldownName,
-        },
-      }
-    ),
-  text: i18n.translate(
-    'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownCreatedText',
-    {
-      // TODO: remove `Save your dashboard before testing.` part
-      // when drilldowns are used not only in dashboard
-      // or after https://github.com/elastic/kibana/issues/65179 implemented
-      defaultMessage: 'Save your dashboard before testing.',
-    }
-  ),
-};
-
-export const toastDrilldownEdited = {
-  title: (drilldownName: string) =>
-    i18n.translate(
-      'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownEditedTitle',
-      {
-        defaultMessage: 'Drilldown "{drilldownName}" updated',
-        values: {
-          drilldownName,
-        },
-      }
-    ),
-  text: i18n.translate(
-    'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownEditedText',
-    {
-      defaultMessage: 'Save your dashboard before testing.',
-    }
-  ),
-};
-
-export const toastDrilldownDeleted = {
-  title: i18n.translate(
-    'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownDeletedTitle',
-    {
-      defaultMessage: 'Drilldown deleted',
-    }
-  ),
-  text: i18n.translate(
-    'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownDeletedText',
-    {
-      defaultMessage: 'Save your dashboard before testing.',
-    }
-  ),
-};
-
-export const toastDrilldownsDeleted = {
-  title: (n: number) =>
-    i18n.translate(
-      'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownsDeletedTitle',
-      {
-        defaultMessage: '{n} drilldowns deleted',
-        values: { n },
-      }
-    ),
-  text: i18n.translate(
-    'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownsDeletedText',
-    {
-      defaultMessage: 'Save your dashboard before testing.',
-    }
-  ),
-};
-
-export const toastDrilldownsCRUDError = i18n.translate(
-  'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownsCRUDErrorTitle',
-  {
-    defaultMessage: 'Error saving drilldown',
-    description: 'Title for generic error toast when persisting drilldown updates failed',
-  }
-);
-
 export const insufficientLicenseLevel = i18n.translate(
   'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.insufficientLicenseLevelError',
   {
diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_drilldown_wizard/flyout_drilldown_wizard.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_drilldown_wizard/flyout_drilldown_wizard.tsx
index c67a6bbdd30b65..d54bfe0af3b8bd 100644
--- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_drilldown_wizard/flyout_drilldown_wizard.tsx
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_drilldown_wizard/flyout_drilldown_wizard.tsx
@@ -230,7 +230,7 @@ export function FlyoutDrilldownWizard<
         actionFactories={drilldownActionFactories}
         actionFactoryContext={actionFactoryContext}
         onSelectedTriggersChange={setSelectedTriggers}
-        supportedTriggers={supportedTriggers}
+        triggers={supportedTriggers}
         getTriggerInfo={getTrigger}
         triggerPickerDocsLink={triggerPickerDocsLink}
       />
diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.stories.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.stories.tsx
index 9ab893f23b3986..386ec0fb0e62b9 100644
--- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.stories.tsx
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.stories.tsx
@@ -10,11 +10,7 @@ import { FormDrilldownWizard } from './index';
 import { Trigger, TriggerId } from '../../../../../../../src/plugins/ui_actions/public';
 
 const otherProps = {
-  supportedTriggers: [
-    'VALUE_CLICK_TRIGGER',
-    'SELECT_RANGE_TRIGGER',
-    'FILTER_TRIGGER',
-  ] as TriggerId[],
+  triggers: ['VALUE_CLICK_TRIGGER', 'SELECT_RANGE_TRIGGER', 'FILTER_TRIGGER'] as TriggerId[],
   getTriggerInfo: (id: TriggerId) => ({ id } as Trigger),
   onSelectedTriggersChange: () => {},
   actionFactoryContext: { triggers: [] as TriggerId[] },
diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.test.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.test.tsx
index 614679ed02a415..35a897913b537b 100644
--- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.test.tsx
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.test.tsx
@@ -13,11 +13,7 @@ import { Trigger, TriggerId } from '../../../../../../../src/plugins/ui_actions/
 
 const otherProps = {
   actionFactoryContext: { triggers: [] as TriggerId[] },
-  supportedTriggers: [
-    'VALUE_CLICK_TRIGGER',
-    'SELECT_RANGE_TRIGGER',
-    'FILTER_TRIGGER',
-  ] as TriggerId[],
+  triggers: ['VALUE_CLICK_TRIGGER', 'SELECT_RANGE_TRIGGER', 'FILTER_TRIGGER'] as TriggerId[],
   getTriggerInfo: (id: TriggerId) => ({ id } as Trigger),
   onSelectedTriggersChange: () => {},
 };
diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.tsx
index 45655c2634fe74..5f5b577706cf97 100644
--- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.tsx
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.tsx
@@ -6,7 +6,8 @@
 
 import React from 'react';
 import { EuiFieldText, EuiForm, EuiFormRow, EuiLink, EuiSpacer, EuiText } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiCallOut } from '@elastic/eui';
+import { EuiCode } from '@elastic/eui';
 import { txtDrilldownAction, txtNameOfDrilldown, txtUntitledDrilldown } from './i18n';
 import {
   ActionFactory,
@@ -15,6 +16,7 @@ import {
 } from '../../../dynamic_actions';
 import { ActionWizard } from '../../../components/action_wizard';
 import { Trigger, TriggerId } from '../../../../../../../src/plugins/ui_actions/public';
+import { txtGetMoreActions } from './i18n';
 
 const GET_MORE_ACTIONS_LINK = 'https://www.elastic.co/subscriptions';
 
@@ -46,7 +48,7 @@ export interface FormDrilldownWizardProps<
   /**
    * List of possible triggers in current context
    */
-  supportedTriggers: TriggerId[];
+  triggers: TriggerId[];
 
   triggerPickerDocsLink?: string;
 }
@@ -62,9 +64,20 @@ export const FormDrilldownWizard: React.FC<FormDrilldownWizardProps> = ({
   actionFactoryContext,
   onSelectedTriggersChange,
   getTriggerInfo,
-  supportedTriggers,
+  triggers,
   triggerPickerDocsLink,
 }) => {
+  if (!triggers || !triggers.length) {
+    // Below callout is not translated, because this message is only for developers.
+    return (
+      <EuiCallOut title="Sorry, there was an error" color="danger" iconType="alert">
+        <p>
+          No triggers provided in <EuiCode>trigger</EuiCode> prop.
+        </p>
+      </EuiCallOut>
+    );
+  }
+
   const nameFragment = (
     <EuiFormRow label={txtNameOfDrilldown}>
       <EuiFieldText
@@ -89,10 +102,7 @@ export const FormDrilldownWizard: React.FC<FormDrilldownWizardProps> = ({
         external
         data-test-subj={'getMoreActionsLink'}
       >
-        <FormattedMessage
-          id="xpack.uiActionsEnhanced.drilldowns.components.FormDrilldownWizard.getMoreActionsLinkLabel"
-          defaultMessage="Get more actions"
-        />
+        {txtGetMoreActions}
       </EuiLink>
     </EuiText>
   );
@@ -114,7 +124,7 @@ export const FormDrilldownWizard: React.FC<FormDrilldownWizardProps> = ({
         context={actionFactoryContext}
         onSelectedTriggersChange={onSelectedTriggersChange}
         getTriggerInfo={getTriggerInfo}
-        supportedTriggers={supportedTriggers}
+        triggers={triggers}
         triggerPickerDocsLink={triggerPickerDocsLink}
       />
     </EuiFormRow>
diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/i18n.ts b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/i18n.ts
index 9636b6e8a74e7a..bf0a012f559f80 100644
--- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/i18n.ts
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/i18n.ts
@@ -26,3 +26,10 @@ export const txtDrilldownAction = i18n.translate(
     defaultMessage: 'Action',
   }
 );
+
+export const txtGetMoreActions = i18n.translate(
+  'xpack.uiActionsEnhanced.drilldowns.components.FormDrilldownWizard.getMoreActionsLinkLabel',
+  {
+    defaultMessage: 'Get more actions',
+  }
+);
diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/hooks/i18n.ts b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/hooks/i18n.ts
new file mode 100644
index 00000000000000..e75ee2634aa43c
--- /dev/null
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/hooks/i18n.ts
@@ -0,0 +1,88 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const toastDrilldownCreated = {
+  title: (drilldownName: string) =>
+    i18n.translate(
+      'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownCreatedTitle',
+      {
+        defaultMessage: 'Drilldown "{drilldownName}" created',
+        values: {
+          drilldownName,
+        },
+      }
+    ),
+  text: i18n.translate(
+    'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownCreatedText',
+    {
+      // TODO: remove `Save your dashboard before testing.` part
+      // when drilldowns are used not only in dashboard
+      // or after https://github.com/elastic/kibana/issues/65179 implemented
+      defaultMessage: 'Save your dashboard before testing.',
+    }
+  ),
+};
+
+export const toastDrilldownEdited = {
+  title: (drilldownName: string) =>
+    i18n.translate(
+      'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownEditedTitle',
+      {
+        defaultMessage: 'Drilldown "{drilldownName}" updated',
+        values: {
+          drilldownName,
+        },
+      }
+    ),
+  text: i18n.translate(
+    'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownEditedText',
+    {
+      defaultMessage: 'Save your dashboard before testing.',
+    }
+  ),
+};
+
+export const toastDrilldownDeleted = {
+  title: i18n.translate(
+    'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownDeletedTitle',
+    {
+      defaultMessage: 'Drilldown deleted',
+    }
+  ),
+  text: i18n.translate(
+    'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownDeletedText',
+    {
+      defaultMessage: 'Save your dashboard before testing.',
+    }
+  ),
+};
+
+export const toastDrilldownsDeleted = {
+  title: (n: number) =>
+    i18n.translate(
+      'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownsDeletedTitle',
+      {
+        defaultMessage: '{n} drilldowns deleted',
+        values: { n },
+      }
+    ),
+  text: i18n.translate(
+    'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownsDeletedText',
+    {
+      defaultMessage: 'Save your dashboard before testing.',
+    }
+  ),
+};
+
+export const toastDrilldownsCRUDError = i18n.translate(
+  'xpack.uiActionsEnhanced.drilldowns.components.flyoutDrilldownWizard.toast.drilldownsCRUDErrorTitle',
+  {
+    defaultMessage: 'Error saving drilldown',
+    description: 'Title for generic error toast when persisting drilldown updates failed',
+  }
+);
diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/hooks/use_compatible_action_factories_for_current_context.ts b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/hooks/use_compatible_action_factories_for_current_context.ts
new file mode 100644
index 00000000000000..d99889045d469b
--- /dev/null
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/hooks/use_compatible_action_factories_for_current_context.ts
@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { useEffect, useState } from 'react';
+import { ActionFactory, BaseActionFactoryContext } from '../../dynamic_actions';
+
+export function useCompatibleActionFactoriesForCurrentContext<
+  Context extends BaseActionFactoryContext = BaseActionFactoryContext
+>(actionFactories: ActionFactory[], context: Context) {
+  const [compatibleActionFactories, setCompatibleActionFactories] = useState<ActionFactory[]>();
+  useEffect(() => {
+    let canceled = false;
+    async function updateCompatibleFactoriesForContext() {
+      const compatibility = await Promise.all(
+        actionFactories.map((factory) => factory.isCompatible(context))
+      );
+      if (canceled) return;
+
+      const compatibleFactories = actionFactories.filter((_, i) => compatibility[i]);
+      const triggerSupportedFactories = compatibleFactories.filter((factory) =>
+        factory.supportedTriggers().some((trigger) => context.triggers.includes(trigger))
+      );
+      setCompatibleActionFactories(triggerSupportedFactories);
+    }
+    updateCompatibleFactoriesForContext();
+    return () => {
+      canceled = true;
+    };
+  }, [context, actionFactories, context.triggers]);
+
+  return compatibleActionFactories;
+}
diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/hooks/use_drilldown_state_manager.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/hooks/use_drilldown_state_manager.tsx
new file mode 100644
index 00000000000000..b578e36ba06067
--- /dev/null
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/hooks/use_drilldown_state_manager.tsx
@@ -0,0 +1,86 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { useState } from 'react';
+import { ToastsStart } from 'kibana/public';
+import useMountedState from 'react-use/lib/useMountedState';
+import { TriggerId } from '../../../../../../src/plugins/ui_actions/public';
+import { useContainerState } from '../../../../../../src/plugins/kibana_utils/public';
+import {
+  toastDrilldownCreated,
+  toastDrilldownDeleted,
+  toastDrilldownEdited,
+  toastDrilldownsCRUDError,
+  toastDrilldownsDeleted,
+} from './i18n';
+import { DynamicActionManager, SerializedAction } from '../../dynamic_actions';
+
+export function useDrilldownsStateManager(
+  actionManager: DynamicActionManager,
+  toastService: ToastsStart
+) {
+  const { events: drilldowns } = useContainerState(actionManager.state);
+  const [isLoading, setIsLoading] = useState(false);
+  const isMounted = useMountedState();
+
+  async function run(op: () => Promise<void>) {
+    setIsLoading(true);
+    try {
+      await op();
+    } catch (e) {
+      toastService.addError(e, {
+        title: toastDrilldownsCRUDError,
+      });
+      if (!isMounted) return;
+      setIsLoading(false);
+      return;
+    }
+  }
+
+  async function createDrilldown(action: SerializedAction, selectedTriggers: TriggerId[]) {
+    await run(async () => {
+      await actionManager.createEvent(action, selectedTriggers);
+      toastService.addSuccess({
+        title: toastDrilldownCreated.title(action.name),
+        text: toastDrilldownCreated.text,
+      });
+    });
+  }
+
+  async function editDrilldown(
+    drilldownId: string,
+    action: SerializedAction,
+    selectedTriggers: TriggerId[]
+  ) {
+    await run(async () => {
+      await actionManager.updateEvent(drilldownId, action, selectedTriggers);
+      toastService.addSuccess({
+        title: toastDrilldownEdited.title(action.name),
+        text: toastDrilldownEdited.text,
+      });
+    });
+  }
+
+  async function deleteDrilldown(drilldownIds: string | string[]) {
+    await run(async () => {
+      drilldownIds = Array.isArray(drilldownIds) ? drilldownIds : [drilldownIds];
+      await actionManager.deleteEvents(drilldownIds);
+      toastService.addSuccess(
+        drilldownIds.length === 1
+          ? {
+              title: toastDrilldownDeleted.title,
+              text: toastDrilldownDeleted.text,
+            }
+          : {
+              title: toastDrilldownsDeleted.title(drilldownIds.length),
+              text: toastDrilldownsDeleted.text,
+            }
+      );
+    });
+  }
+
+  return { drilldowns, isLoading, createDrilldown, editDrilldown, deleteDrilldown };
+}
diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/hooks/use_welcome_message.ts b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/hooks/use_welcome_message.ts
new file mode 100644
index 00000000000000..89c9445b09a4b6
--- /dev/null
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/hooks/use_welcome_message.ts
@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { useState } from 'react';
+import { IStorageWrapper } from '../../../../../../src/plugins/kibana_utils/public';
+
+export function useWelcomeMessage(storage: IStorageWrapper): [boolean, () => void] {
+  const key = `drilldowns:hidWelcomeMessage`;
+  const [hideWelcomeMessage, setHideWelcomeMessage] = useState<boolean>(storage.get(key) ?? false);
+
+  return [
+    !hideWelcomeMessage,
+    () => {
+      if (hideWelcomeMessage) return;
+      setHideWelcomeMessage(true);
+      storage.set(key, true);
+    },
+  ];
+}
diff --git a/x-pack/test/accessibility/apps/users.ts b/x-pack/test/accessibility/apps/users.ts
new file mode 100644
index 00000000000000..b3426410962af8
--- /dev/null
+++ b/x-pack/test/accessibility/apps/users.ts
@@ -0,0 +1,106 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+// a11y tests for spaces, space selection and spacce creation and feature controls
+
+import { FtrProviderContext } from '../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const PageObjects = getPageObjects(['security', 'settings']);
+  const a11y = getService('a11y');
+  const esArchiver = getService('esArchiver');
+  const testSubjects = getService('testSubjects');
+  const retry = getService('retry');
+
+  describe('Kibana users page a11y tests', () => {
+    before(async () => {
+      await esArchiver.load('empty_kibana');
+      await PageObjects.security.clickElasticsearchUsers();
+    });
+
+    it('a11y test for user page', async () => {
+      await a11y.testAppSnapshot();
+    });
+
+    it('a11y test for search user bar', async () => {
+      await testSubjects.click('searchUsers');
+      await a11y.testAppSnapshot();
+    });
+
+    it('a11y test for searching a user', async () => {
+      await testSubjects.setValue('searchUsers', 'test');
+      await a11y.testAppSnapshot();
+      await testSubjects.setValue('searchUsers', '');
+    });
+
+    it('a11y test for toggle button for show reserved users only', async () => {
+      await retry.waitFor(
+        'show reserved users toggle button is visible',
+        async () => await testSubjects.exists('showReservedUsersSwitch')
+      );
+      await testSubjects.click('showReservedUsersSwitch');
+      await a11y.testAppSnapshot();
+      await testSubjects.click('showReservedUsersSwitch');
+    });
+
+    it('a11y test for toggle button for show reserved users only', async () => {
+      await retry.waitFor(
+        'show reserved users toggle button is visible',
+        async () => await testSubjects.exists('showReservedUsersSwitch')
+      );
+      await testSubjects.click('showReservedUsersSwitch');
+      await a11y.testAppSnapshot();
+      await testSubjects.click('showReservedUsersSwitch');
+    });
+
+    it('a11y test for create user panel', async () => {
+      await testSubjects.click('createUserButton');
+      await a11y.testAppSnapshot();
+    });
+
+    // https://github.com/elastic/eui/issues/2841
+    it.skip('a11y test for roles drop down', async () => {
+      await testSubjects.setValue('userFormUserNameInput', 'a11y');
+      await testSubjects.setValue('passwordInput', 'password');
+      await testSubjects.setValue('passwordConfirmationInput', 'password');
+      await testSubjects.setValue('userFormFullNameInput', 'a11y user');
+      await testSubjects.setValue('userFormEmailInput', 'example@example.com');
+      await testSubjects.click('rolesDropdown');
+      await a11y.testAppSnapshot();
+    });
+
+    it('a11y test for display of delete button on users page ', async () => {
+      await testSubjects.setValue('userFormUserNameInput', 'deleteA11y');
+      await testSubjects.setValue('passwordInput', 'password');
+      await testSubjects.setValue('passwordConfirmationInput', 'password');
+      await testSubjects.setValue('userFormFullNameInput', 'DeleteA11y user');
+      await testSubjects.setValue('userFormEmailInput', 'example@example.com');
+      await testSubjects.click('rolesDropdown');
+      await testSubjects.setValue('rolesDropdown', 'roleOption-apm_user');
+      await testSubjects.click('userFormSaveButton');
+      await testSubjects.click('checkboxSelectRow-deleteA11y');
+      await a11y.testAppSnapshot();
+    });
+
+    it('a11y test for delete user panel ', async () => {
+      await testSubjects.click('deleteUserButton');
+      await a11y.testAppSnapshot();
+    });
+
+    it('a11y test for edit user panel', async () => {
+      await testSubjects.click('confirmModalCancelButton');
+      await PageObjects.settings.clickLinkText('deleteA11y');
+      await a11y.testAppSnapshot();
+    });
+
+    // https://github.com/elastic/eui/issues/2841
+    it.skip('a11y test for Change password screen', async () => {
+      await PageObjects.settings.clickLinkText('deleteA11y');
+      await testSubjects.click('changePassword');
+      await a11y.testAppSnapshot();
+    });
+  });
+}
diff --git a/x-pack/test/accessibility/config.ts b/x-pack/test/accessibility/config.ts
index 915872d8b3fb07..5ea5c036964792 100644
--- a/x-pack/test/accessibility/config.ts
+++ b/x-pack/test/accessibility/config.ts
@@ -23,6 +23,7 @@ export default async function ({ readConfigFile }: FtrConfigProviderContext) {
       require.resolve('./apps/spaces'),
       require.resolve('./apps/advanced_settings'),
       require.resolve('./apps/dashboard_edit_panel'),
+      require.resolve('./apps/users'),
     ],
 
     pageObjects,
diff --git a/x-pack/test/functional/es_archives/endpoint/pipeline/dns/data.json.gz b/x-pack/test/functional/es_archives/endpoint/pipeline/dns/data.json.gz
new file mode 100644
index 00000000000000..5caab4767dbec9
Binary files /dev/null and b/x-pack/test/functional/es_archives/endpoint/pipeline/dns/data.json.gz differ
diff --git a/x-pack/test/ingest_manager_api_integration/config.ts b/x-pack/test/ingest_manager_api_integration/config.ts
index d11884667c48a0..193ac0d5974e60 100644
--- a/x-pack/test/ingest_manager_api_integration/config.ts
+++ b/x-pack/test/ingest_manager_api_integration/config.ts
@@ -12,7 +12,7 @@ import { defineDockerServersConfig } from '@kbn/test';
 // Docker image to use for Ingest Manager API integration tests.
 // This hash comes from the commit hash here: https://github.com/elastic/package-storage/commit
 export const dockerImage =
-  'docker.elastic.co/package-registry/distribution:a5132271ad37209d6978018bfe6e224546d719a8';
+  'docker.elastic.co/package-registry/distribution:fb58d670bafbac7e9e28baf6d6f99ba65cead548';
 
 export default async function ({ readConfigFile }: FtrConfigProviderContext) {
   const xPackAPITestsConfig = await readConfigFile(require.resolve('../api_integration/config.ts'));
diff --git a/x-pack/test/security_solution_endpoint_api_int/apis/package.ts b/x-pack/test/security_solution_endpoint_api_int/apis/package.ts
index 3b5873d1fe0cd6..afbf0dcd7bd13f 100644
--- a/x-pack/test/security_solution_endpoint_api_int/apis/package.ts
+++ b/x-pack/test/security_solution_endpoint_api_int/apis/package.ts
@@ -5,6 +5,10 @@
  */
 import expect from '@kbn/expect';
 import { SearchResponse } from 'elasticsearch';
+import {
+  ResolverPaginatedEvents,
+  SafeEndpointEvent,
+} from '../../../plugins/security_solution/common/endpoint/types';
 import { eventsIndexPattern } from '../../../plugins/security_solution/common/endpoint/constants';
 import {
   EndpointDocGenerator,
@@ -12,6 +16,7 @@ import {
 } from '../../../plugins/security_solution/common/endpoint/generate_data';
 import { FtrProviderContext } from '../ftr_provider_context';
 import { InsertedEvents, processEventsIndex } from '../services/resolver';
+import { deleteEventsStream } from './data_stream_helper';
 
 interface EventIngested {
   event: {
@@ -35,6 +40,8 @@ interface NetworkEvent {
 const networkIndex = 'logs-endpoint.events.network-default';
 
 export default function ({ getService }: FtrProviderContext) {
+  const esArchiver = getService('esArchiver');
+  const supertest = getService('supertest');
   const resolver = getService('resolverGenerator');
   const es = getService('es');
   const generator = new EndpointDocGenerator('data');
@@ -59,6 +66,72 @@ export default function ({ getService }: FtrProviderContext) {
   };
 
   describe('Endpoint package', () => {
+    describe('network processors', () => {
+      let networkIndexData: InsertedEvents;
+
+      after(async () => {
+        await resolver.deleteData(networkIndexData);
+      });
+
+      it('handles events without the `network.protocol` field being defined', async () => {
+        const eventWithoutNetworkObject = generator.generateEvent();
+        // ensure that `network.protocol` does not exist in the event to test that the pipeline handles those type of events
+        delete eventWithoutNetworkObject.network;
+
+        // this call will fail if the pipeline fails
+        networkIndexData = await resolver.insertEvents([eventWithoutNetworkObject], networkIndex);
+        const eventWithBothIPs = await searchForID<SafeEndpointEvent>(
+          networkIndexData.eventsInfo[0]._id
+        );
+
+        // ensure that the event was inserted into ES
+        expect(eventWithBothIPs.body.hits.hits[0]._source.event?.id).to.be(
+          eventWithoutNetworkObject.event?.id
+        );
+      });
+    });
+
+    describe('dns processor', () => {
+      before(async () => {
+        await esArchiver.load('endpoint/pipeline/dns', { useCreate: true });
+      });
+
+      after(async () => {
+        await deleteEventsStream(getService);
+      });
+
+      it('does not set dns.question.type if it is already populated', async () => {
+        // this id comes from the es archive file endpoint/pipeline/dns
+        const id = 'LrLSOVHVsFY94TAi++++++eF';
+        const { body }: { body: ResolverPaginatedEvents } = await supertest
+          .post(`/api/endpoint/resolver/events?limit=1`)
+          .set('kbn-xsrf', 'xxx')
+          .send({
+            filter: `event.id:"${id}"`,
+          })
+          .expect(200);
+        expect(body.events.length).to.eql(1);
+        expect((body.events[0] as SafeEndpointEvent).dns?.question?.name).to.eql('www.google.com');
+        expect((body.events[0] as SafeEndpointEvent).dns?.question?.type).to.eql('INVALID_VALUE');
+      });
+
+      it('sets dns.question.type if it is not populated', async () => {
+        // this id comes from the es archive file endpoint/pipeline/dns
+        const id = 'LrLSOVHVsFY94TAi++++++eP';
+        const { body }: { body: ResolverPaginatedEvents } = await supertest
+          .post(`/api/endpoint/resolver/events?limit=1`)
+          .set('kbn-xsrf', 'xxx')
+          .send({
+            filter: `event.id:"${id}"`,
+          })
+          .expect(200);
+        expect(body.events.length).to.eql(1);
+        expect((body.events[0] as SafeEndpointEvent).dns?.question?.name).to.eql('www.aol.com');
+        // This value is parsed out of the message field in the event. type 28 = AAAA
+        expect((body.events[0] as SafeEndpointEvent).dns?.question?.type).to.eql('AAAA');
+      });
+    });
+
     describe('ingested processor', () => {
       let event: Event;
       let genData: InsertedEvents;
@@ -92,6 +165,7 @@ export default function ({ getService }: FtrProviderContext) {
         const eventWithSourceOnly = generator.generateEvent({
           extensions: { source: { ip: '8.8.8.8' } },
         });
+
         networkIndexData = await resolver.insertEvents(
           [eventWithBothIPs, eventWithSourceOnly],
           networkIndex
diff --git a/x-pack/test/tsconfig.json b/x-pack/test/tsconfig.json
index 628f2edefb0790..8e378ff1f4a6af 100644
--- a/x-pack/test/tsconfig.json
+++ b/x-pack/test/tsconfig.json
@@ -20,6 +20,7 @@
     { "path": "../../src/core/tsconfig.json" },
     { "path": "../../src/plugins/kibana_utils/tsconfig.json" },
     { "path": "../../src/plugins/kibana_react/tsconfig.json" },
-    { "path": "../plugins/licensing/tsconfig.json" }
+    { "path": "../plugins/licensing/tsconfig.json" },
+    { "path": "../plugins/global_search/tsconfig.json" },
   ]
 }
diff --git a/x-pack/tsconfig.json b/x-pack/tsconfig.json
index 9a52aca381e87d..f751aac1806dd9 100644
--- a/x-pack/tsconfig.json
+++ b/x-pack/tsconfig.json
@@ -12,7 +12,8 @@
     "plugins/security_solution/cypress/**/*",
     "plugins/apm/e2e/cypress/**/*",
     "plugins/apm/scripts/**/*",
-    "plugins/licensing/**/*"
+    "plugins/licensing/**/*",
+    "plugins/global_search/**/*",
   ],
   "compilerOptions": {
     "paths": {
@@ -28,6 +29,7 @@
     { "path": "../src/core/tsconfig.json" },
     { "path": "../src/plugins/kibana_utils/tsconfig.json" },
     { "path": "../src/plugins/kibana_react/tsconfig.json" },
-    { "path": "./plugins/licensing/tsconfig.json" }
+    { "path": "./plugins/licensing/tsconfig.json" },
+    { "path": "./plugins/global_search/tsconfig.json" },
   ]
 }
diff --git a/x-pack/tsconfig.refs.json b/x-pack/tsconfig.refs.json
index 0b4c46b893aa82..a389bbcf0272bf 100644
--- a/x-pack/tsconfig.refs.json
+++ b/x-pack/tsconfig.refs.json
@@ -1,6 +1,7 @@
 {
   "include": [],
   "references": [
-    { "path": "./plugins/licensing/tsconfig.json" }
+    { "path": "./plugins/licensing/tsconfig.json" },
+    { "path": "./plugins/global_search/tsconfig.json" },
   ]
 }