From 9112b6c1f1ef6def9b1dc83f18276d9cbd24046b Mon Sep 17 00:00:00 2001
From: Josh Dover <me@joshdover.com>
Date: Thu, 30 Apr 2020 10:32:26 -0600
Subject: [PATCH 01/11] Avoid race condition between HttpServer.stop() and
 HttpServerSetup methods (#64487)

---
 src/core/server/http/http_server.test.ts | 58 ++++++++++++++++++++++++
 src/core/server/http/http_server.ts      | 28 +++++++++++-
 2 files changed, 85 insertions(+), 1 deletion(-)

diff --git a/src/core/server/http/http_server.test.ts b/src/core/server/http/http_server.test.ts
index 27db79bb94d252..4fb433b5c77ba5 100644
--- a/src/core/server/http/http_server.test.ts
+++ b/src/core/server/http/http_server.test.ts
@@ -1068,6 +1068,14 @@ describe('setup contract', () => {
       await create();
       expect(create()).rejects.toThrowError('A cookieSessionStorageFactory was already created');
     });
+
+    it('does not throw if called after stop', async () => {
+      const { createCookieSessionStorageFactory } = await server.setup(config);
+      await server.stop();
+      expect(() => {
+        createCookieSessionStorageFactory(cookieOptions);
+      }).not.toThrow();
+    });
   });
 
   describe('#isTlsEnabled', () => {
@@ -1113,4 +1121,54 @@ describe('setup contract', () => {
       expect(getServerInfo().protocol).toEqual('https');
     });
   });
+
+  describe('#registerStaticDir', () => {
+    it('does not throw if called after stop', async () => {
+      const { registerStaticDir } = await server.setup(config);
+      await server.stop();
+      expect(() => {
+        registerStaticDir('/path1/{path*}', '/path/to/resource');
+      }).not.toThrow();
+    });
+  });
+
+  describe('#registerOnPreAuth', () => {
+    test('does not throw if called after stop', async () => {
+      const { registerOnPreAuth } = await server.setup(config);
+      await server.stop();
+      expect(() => {
+        registerOnPreAuth((req, res) => res.unauthorized());
+      }).not.toThrow();
+    });
+  });
+
+  describe('#registerOnPostAuth', () => {
+    test('does not throw if called after stop', async () => {
+      const { registerOnPostAuth } = await server.setup(config);
+      await server.stop();
+      expect(() => {
+        registerOnPostAuth((req, res) => res.unauthorized());
+      }).not.toThrow();
+    });
+  });
+
+  describe('#registerOnPreResponse', () => {
+    test('does not throw if called after stop', async () => {
+      const { registerOnPreResponse } = await server.setup(config);
+      await server.stop();
+      expect(() => {
+        registerOnPreResponse((req, res, t) => t.next());
+      }).not.toThrow();
+    });
+  });
+
+  describe('#registerAuth', () => {
+    test('does not throw if called after stop', async () => {
+      const { registerAuth } = await server.setup(config);
+      await server.stop();
+      expect(() => {
+        registerAuth((req, res) => res.unauthorized());
+      }).not.toThrow();
+    });
+  });
 });
diff --git a/src/core/server/http/http_server.ts b/src/core/server/http/http_server.ts
index 77d3d99fb48cbd..92ac5220735a12 100644
--- a/src/core/server/http/http_server.ts
+++ b/src/core/server/http/http_server.ts
@@ -74,6 +74,7 @@ export class HttpServer {
   private registeredRouters = new Set<IRouter>();
   private authRegistered = false;
   private cookieSessionStorageCreated = false;
+  private stopped = false;
 
   private readonly log: Logger;
   private readonly authState: AuthStateStorage;
@@ -144,6 +145,10 @@ export class HttpServer {
     if (this.server === undefined) {
       throw new Error('Http server is not setup up yet');
     }
+    if (this.stopped) {
+      this.log.warn(`start called after stop`);
+      return;
+    }
     this.log.debug('starting http server');
 
     for (const router of this.registeredRouters) {
@@ -189,13 +194,13 @@ export class HttpServer {
   }
 
   public async stop() {
+    this.stopped = true;
     if (this.server === undefined) {
       return;
     }
 
     this.log.debug('stopping http server');
     await this.server.stop();
-    this.server = undefined;
   }
 
   private getAuthOption(
@@ -234,6 +239,9 @@ export class HttpServer {
     if (this.server === undefined) {
       throw new Error('Server is not created yet');
     }
+    if (this.stopped) {
+      this.log.warn(`setupConditionalCompression called after stop`);
+    }
 
     const { enabled, referrerWhitelist: list } = config.compression;
     if (!enabled) {
@@ -261,6 +269,9 @@ export class HttpServer {
     if (this.server === undefined) {
       throw new Error('Server is not created yet');
     }
+    if (this.stopped) {
+      this.log.warn(`registerOnPostAuth called after stop`);
+    }
 
     this.server.ext('onPostAuth', adoptToHapiOnPostAuthFormat(fn, this.log));
   }
@@ -269,6 +280,9 @@ export class HttpServer {
     if (this.server === undefined) {
       throw new Error('Server is not created yet');
     }
+    if (this.stopped) {
+      this.log.warn(`registerOnPreAuth called after stop`);
+    }
 
     this.server.ext('onRequest', adoptToHapiOnPreAuthFormat(fn, this.log));
   }
@@ -277,6 +291,9 @@ export class HttpServer {
     if (this.server === undefined) {
       throw new Error('Server is not created yet');
     }
+    if (this.stopped) {
+      this.log.warn(`registerOnPreResponse called after stop`);
+    }
 
     this.server.ext('onPreResponse', adoptToHapiOnPreResponseFormat(fn, this.log));
   }
@@ -288,6 +305,9 @@ export class HttpServer {
     if (this.server === undefined) {
       throw new Error('Server is not created yet');
     }
+    if (this.stopped) {
+      this.log.warn(`createCookieSessionStorageFactory called after stop`);
+    }
     if (this.cookieSessionStorageCreated) {
       throw new Error('A cookieSessionStorageFactory was already created');
     }
@@ -305,6 +325,9 @@ export class HttpServer {
     if (this.server === undefined) {
       throw new Error('Server is not created yet');
     }
+    if (this.stopped) {
+      this.log.warn(`registerAuth called after stop`);
+    }
     if (this.authRegistered) {
       throw new Error('Auth interceptor was already registered');
     }
@@ -348,6 +371,9 @@ export class HttpServer {
     if (this.server === undefined) {
       throw new Error('Http server is not setup up yet');
     }
+    if (this.stopped) {
+      this.log.warn(`registerStaticDir called after stop`);
+    }
 
     this.server.route({
       path,

From a7291fa8c82f06c6d2f488c3d5694f71893ff52e Mon Sep 17 00:00:00 2001
From: Jonathan Buttner <56361221+jonathan-buttner@users.noreply.github.com>
Date: Thu, 30 Apr 2020 13:03:08 -0400
Subject: [PATCH 02/11] [EPM] Adding support for nested fields (#64829)

* Allowing nested types to be merged with group

* Adding nested to case and handling other fields

* Cleaing up if logic

* Removing unneeded if statement

* Adding nested type to switch and more tests

* Keeping functions immutable
---
 .../elasticsearch/template/template.test.ts   | 106 ++++++++++--
 .../epm/elasticsearch/template/template.ts    |  43 ++++-
 .../server/services/epm/fields/field.test.ts  | 162 ++++++++++++++++++
 .../server/services/epm/fields/field.ts       |  54 +++++-
 4 files changed, 339 insertions(+), 26 deletions(-)

diff --git a/x-pack/plugins/ingest_manager/server/services/epm/elasticsearch/template/template.test.ts b/x-pack/plugins/ingest_manager/server/services/epm/elasticsearch/template/template.test.ts
index 25180244b02147..cacf84381dd88d 100644
--- a/x-pack/plugins/ingest_manager/server/services/epm/elasticsearch/template/template.test.ts
+++ b/x-pack/plugins/ingest_manager/server/services/epm/elasticsearch/template/template.test.ts
@@ -93,7 +93,7 @@ test('tests processing text field with multi fields', () => {
   const fields: Field[] = safeLoad(textWithMultiFieldsLiteralYml);
   const processedFields = processFields(fields);
   const mappings = generateMappings(processedFields);
-  expect(JSON.stringify(mappings)).toEqual(JSON.stringify(textWithMultiFieldsMapping));
+  expect(mappings).toEqual(textWithMultiFieldsMapping);
 });
 
 test('tests processing keyword field with multi fields', () => {
@@ -127,7 +127,7 @@ test('tests processing keyword field with multi fields', () => {
   const fields: Field[] = safeLoad(keywordWithMultiFieldsLiteralYml);
   const processedFields = processFields(fields);
   const mappings = generateMappings(processedFields);
-  expect(JSON.stringify(mappings)).toEqual(JSON.stringify(keywordWithMultiFieldsMapping));
+  expect(mappings).toEqual(keywordWithMultiFieldsMapping);
 });
 
 test('tests processing keyword field with multi fields with analyzed text field', () => {
@@ -159,7 +159,7 @@ test('tests processing keyword field with multi fields with analyzed text field'
   const fields: Field[] = safeLoad(keywordWithAnalyzedMultiFieldsLiteralYml);
   const processedFields = processFields(fields);
   const mappings = generateMappings(processedFields);
-  expect(JSON.stringify(mappings)).toEqual(JSON.stringify(keywordWithAnalyzedMultiFieldsMapping));
+  expect(mappings).toEqual(keywordWithAnalyzedMultiFieldsMapping);
 });
 
 test('tests processing object field with no other attributes', () => {
@@ -177,7 +177,7 @@ test('tests processing object field with no other attributes', () => {
   const fields: Field[] = safeLoad(objectFieldLiteralYml);
   const processedFields = processFields(fields);
   const mappings = generateMappings(processedFields);
-  expect(JSON.stringify(mappings)).toEqual(JSON.stringify(objectFieldMapping));
+  expect(mappings).toEqual(objectFieldMapping);
 });
 
 test('tests processing object field with enabled set to false', () => {
@@ -197,7 +197,7 @@ test('tests processing object field with enabled set to false', () => {
   const fields: Field[] = safeLoad(objectFieldEnabledFalseLiteralYml);
   const processedFields = processFields(fields);
   const mappings = generateMappings(processedFields);
-  expect(JSON.stringify(mappings)).toEqual(JSON.stringify(objectFieldEnabledFalseMapping));
+  expect(mappings).toEqual(objectFieldEnabledFalseMapping);
 });
 
 test('tests processing object field with dynamic set to false', () => {
@@ -217,7 +217,7 @@ test('tests processing object field with dynamic set to false', () => {
   const fields: Field[] = safeLoad(objectFieldDynamicFalseLiteralYml);
   const processedFields = processFields(fields);
   const mappings = generateMappings(processedFields);
-  expect(JSON.stringify(mappings)).toEqual(JSON.stringify(objectFieldDynamicFalseMapping));
+  expect(mappings).toEqual(objectFieldDynamicFalseMapping);
 });
 
 test('tests processing object field with dynamic set to true', () => {
@@ -237,7 +237,7 @@ test('tests processing object field with dynamic set to true', () => {
   const fields: Field[] = safeLoad(objectFieldDynamicTrueLiteralYml);
   const processedFields = processFields(fields);
   const mappings = generateMappings(processedFields);
-  expect(JSON.stringify(mappings)).toEqual(JSON.stringify(objectFieldDynamicTrueMapping));
+  expect(mappings).toEqual(objectFieldDynamicTrueMapping);
 });
 
 test('tests processing object field with dynamic set to strict', () => {
@@ -257,7 +257,7 @@ test('tests processing object field with dynamic set to strict', () => {
   const fields: Field[] = safeLoad(objectFieldDynamicStrictLiteralYml);
   const processedFields = processFields(fields);
   const mappings = generateMappings(processedFields);
-  expect(JSON.stringify(mappings)).toEqual(JSON.stringify(objectFieldDynamicStrictMapping));
+  expect(mappings).toEqual(objectFieldDynamicStrictMapping);
 });
 
 test('tests processing object field with property', () => {
@@ -282,7 +282,7 @@ test('tests processing object field with property', () => {
   const fields: Field[] = safeLoad(objectFieldWithPropertyLiteralYml);
   const processedFields = processFields(fields);
   const mappings = generateMappings(processedFields);
-  expect(JSON.stringify(mappings)).toEqual(JSON.stringify(objectFieldWithPropertyMapping));
+  expect(mappings).toEqual(objectFieldWithPropertyMapping);
 });
 
 test('tests processing object field with property, reverse order', () => {
@@ -291,10 +291,12 @@ test('tests processing object field with property, reverse order', () => {
   type: keyword
 - name: a
   type: object
+  dynamic: false
   `;
   const objectFieldWithPropertyReversedMapping = {
     properties: {
       a: {
+        dynamic: false,
         properties: {
           b: {
             ignore_above: 1024,
@@ -307,7 +309,91 @@ test('tests processing object field with property, reverse order', () => {
   const fields: Field[] = safeLoad(objectFieldWithPropertyReversedLiteralYml);
   const processedFields = processFields(fields);
   const mappings = generateMappings(processedFields);
-  expect(JSON.stringify(mappings)).toEqual(JSON.stringify(objectFieldWithPropertyReversedMapping));
+  expect(mappings).toEqual(objectFieldWithPropertyReversedMapping);
+});
+
+test('tests processing nested field with property', () => {
+  const nestedYaml = `
+  - name: a.b
+    type: keyword
+  - name: a
+    type: nested
+    dynamic: false
+    `;
+  const expectedMapping = {
+    properties: {
+      a: {
+        dynamic: false,
+        type: 'nested',
+        properties: {
+          b: {
+            ignore_above: 1024,
+            type: 'keyword',
+          },
+        },
+      },
+    },
+  };
+  const fields: Field[] = safeLoad(nestedYaml);
+  const processedFields = processFields(fields);
+  const mappings = generateMappings(processedFields);
+  expect(mappings).toEqual(expectedMapping);
+});
+
+test('tests processing nested field with property, nested field first', () => {
+  const nestedYaml = `
+  - name: a
+    type: nested
+    include_in_parent: true
+  - name: a.b
+    type: keyword
+    `;
+  const expectedMapping = {
+    properties: {
+      a: {
+        include_in_parent: true,
+        type: 'nested',
+        properties: {
+          b: {
+            ignore_above: 1024,
+            type: 'keyword',
+          },
+        },
+      },
+    },
+  };
+  const fields: Field[] = safeLoad(nestedYaml);
+  const processedFields = processFields(fields);
+  const mappings = generateMappings(processedFields);
+  expect(mappings).toEqual(expectedMapping);
+});
+
+test('tests processing nested leaf field with properties', () => {
+  const nestedYaml = `
+  - name: a
+    type: object
+    dynamic: false
+  - name: a.b
+    type: nested
+    enabled: false
+    `;
+  const expectedMapping = {
+    properties: {
+      a: {
+        dynamic: false,
+        properties: {
+          b: {
+            enabled: false,
+            type: 'nested',
+          },
+        },
+      },
+    },
+  };
+  const fields: Field[] = safeLoad(nestedYaml);
+  const processedFields = processFields(fields);
+  const mappings = generateMappings(processedFields);
+  expect(mappings).toEqual(expectedMapping);
 });
 
 test('tests constant_keyword field type handling', () => {
diff --git a/x-pack/plugins/ingest_manager/server/services/epm/elasticsearch/template/template.ts b/x-pack/plugins/ingest_manager/server/services/epm/elasticsearch/template/template.ts
index 9736f6d1cbd3cd..c45c7e706be588 100644
--- a/x-pack/plugins/ingest_manager/server/services/epm/elasticsearch/template/template.ts
+++ b/x-pack/plugins/ingest_manager/server/services/epm/elasticsearch/template/template.ts
@@ -71,7 +71,14 @@ export function generateMappings(fields: Field[]): IndexTemplateMappings {
 
       switch (type) {
         case 'group':
-          fieldProps = generateMappings(field.fields!);
+          fieldProps = { ...generateMappings(field.fields!), ...generateDynamicAndEnabled(field) };
+          break;
+        case 'group-nested':
+          fieldProps = {
+            ...generateMappings(field.fields!),
+            ...generateNestedProps(field),
+            type: 'nested',
+          };
           break;
         case 'integer':
           fieldProps.type = 'long';
@@ -95,13 +102,10 @@ export function generateMappings(fields: Field[]): IndexTemplateMappings {
           }
           break;
         case 'object':
-          fieldProps.type = 'object';
-          if (field.hasOwnProperty('enabled')) {
-            fieldProps.enabled = field.enabled;
-          }
-          if (field.hasOwnProperty('dynamic')) {
-            fieldProps.dynamic = field.dynamic;
-          }
+          fieldProps = { ...fieldProps, ...generateDynamicAndEnabled(field), type: 'object' };
+          break;
+        case 'nested':
+          fieldProps = { ...fieldProps, ...generateNestedProps(field), type: 'nested' };
           break;
         case 'array':
           // this assumes array fields were validated in an earlier step
@@ -128,6 +132,29 @@ export function generateMappings(fields: Field[]): IndexTemplateMappings {
   return { properties: props };
 }
 
+function generateDynamicAndEnabled(field: Field) {
+  const props: Properties = {};
+  if (field.hasOwnProperty('enabled')) {
+    props.enabled = field.enabled;
+  }
+  if (field.hasOwnProperty('dynamic')) {
+    props.dynamic = field.dynamic;
+  }
+  return props;
+}
+
+function generateNestedProps(field: Field) {
+  const props = generateDynamicAndEnabled(field);
+
+  if (field.hasOwnProperty('include_in_parent')) {
+    props.include_in_parent = field.include_in_parent;
+  }
+  if (field.hasOwnProperty('include_in_root')) {
+    props.include_in_root = field.include_in_root;
+  }
+  return props;
+}
+
 function generateMultiFields(fields: Fields): MultiFields {
   const multiFields: MultiFields = {};
   if (fields) {
diff --git a/x-pack/plugins/ingest_manager/server/services/epm/fields/field.test.ts b/x-pack/plugins/ingest_manager/server/services/epm/fields/field.test.ts
index 42989bb1e3ac91..f0ff4c61254524 100644
--- a/x-pack/plugins/ingest_manager/server/services/epm/fields/field.test.ts
+++ b/x-pack/plugins/ingest_manager/server/services/epm/fields/field.test.ts
@@ -210,4 +210,166 @@ describe('processFields', () => {
       JSON.stringify(objectFieldWithPropertyExpanded)
     );
   });
+
+  test('correctly handles properties of object type fields where object comes second', () => {
+    const nested = [
+      {
+        name: 'a.b',
+        type: 'keyword',
+      },
+      {
+        name: 'a',
+        type: 'object',
+        dynamic: true,
+      },
+    ];
+
+    const nestedExpanded = [
+      {
+        name: 'a',
+        type: 'group',
+        dynamic: true,
+        fields: [
+          {
+            name: 'b',
+            type: 'keyword',
+          },
+        ],
+      },
+    ];
+    expect(processFields(nested)).toEqual(nestedExpanded);
+  });
+
+  test('correctly handles properties of nested type fields', () => {
+    const nested = [
+      {
+        name: 'a',
+        type: 'nested',
+        dynamic: true,
+      },
+      {
+        name: 'a.b',
+        type: 'keyword',
+      },
+    ];
+
+    const nestedExpanded = [
+      {
+        name: 'a',
+        type: 'group-nested',
+        dynamic: true,
+        fields: [
+          {
+            name: 'b',
+            type: 'keyword',
+          },
+        ],
+      },
+    ];
+    expect(processFields(nested)).toEqual(nestedExpanded);
+  });
+
+  test('correctly handles properties of nested type where nested top level comes second', () => {
+    const nested = [
+      {
+        name: 'a.b',
+        type: 'keyword',
+      },
+      {
+        name: 'a',
+        type: 'nested',
+        dynamic: true,
+      },
+    ];
+
+    const nestedExpanded = [
+      {
+        name: 'a',
+        type: 'group-nested',
+        dynamic: true,
+        fields: [
+          {
+            name: 'b',
+            type: 'keyword',
+          },
+        ],
+      },
+    ];
+    expect(processFields(nested)).toEqual(nestedExpanded);
+  });
+
+  test('ignores redefinitions of an object field', () => {
+    const object = [
+      {
+        name: 'a',
+        type: 'object',
+        dynamic: true,
+      },
+      {
+        name: 'a',
+        type: 'object',
+        dynamic: false,
+      },
+    ];
+
+    const objectExpected = [
+      {
+        name: 'a',
+        type: 'object',
+        // should preserve the field that was parsed first which had dynamic: true
+        dynamic: true,
+      },
+    ];
+    expect(processFields(object)).toEqual(objectExpected);
+  });
+
+  test('ignores redefinitions of a nested field', () => {
+    const nested = [
+      {
+        name: 'a',
+        type: 'nested',
+        dynamic: true,
+      },
+      {
+        name: 'a',
+        type: 'nested',
+        dynamic: false,
+      },
+    ];
+
+    const nestedExpected = [
+      {
+        name: 'a',
+        type: 'nested',
+        // should preserve the field that was parsed first which had dynamic: true
+        dynamic: true,
+      },
+    ];
+    expect(processFields(nested)).toEqual(nestedExpected);
+  });
+
+  test('ignores redefinitions of a nested and object field', () => {
+    const nested = [
+      {
+        name: 'a',
+        type: 'nested',
+        dynamic: true,
+      },
+      {
+        name: 'a',
+        type: 'object',
+        dynamic: false,
+      },
+    ];
+
+    const nestedExpected = [
+      {
+        name: 'a',
+        type: 'nested',
+        // should preserve the field that was parsed first which had dynamic: true
+        dynamic: true,
+      },
+    ];
+    expect(processFields(nested)).toEqual(nestedExpected);
+  });
 });
diff --git a/x-pack/plugins/ingest_manager/server/services/epm/fields/field.ts b/x-pack/plugins/ingest_manager/server/services/epm/fields/field.ts
index edf7624d3f0d5b..abaf7ab5b0dfc4 100644
--- a/x-pack/plugins/ingest_manager/server/services/epm/fields/field.ts
+++ b/x-pack/plugins/ingest_manager/server/services/epm/fields/field.ts
@@ -28,6 +28,8 @@ export interface Field {
   object_type?: string;
   scaling_factor?: number;
   dynamic?: 'strict' | boolean;
+  include_in_parent?: boolean;
+  include_in_root?: boolean;
 
   // Kibana specific
   analyzed?: boolean;
@@ -108,18 +110,54 @@ function dedupFields(fields: Fields): Fields {
       return f.name === field.name;
     });
     if (found) {
+      // remove name, type, and fields from `field` variable so we avoid merging them into `found`
+      const { name, type, fields: nestedFields, ...importantFieldProps } = field;
+      /**
+       * There are a couple scenarios this if is trying to account for:
+       * Example 1
+       *  - name: a.b
+       *  - name: a
+       *  In this scenario found will be `group` and field could be either `object` or `nested`
+       * Example 2
+       *  - name: a
+       *  - name: a.b
+       *  In this scenario found could be `object` or `nested` and field will be group
+       */
       if (
-        (found.type === 'group' || found.type === 'object') &&
-        field.type === 'group' &&
-        field.fields
+        // only merge if found is a group and field is object, nested, or group.
+        // Or if found is object, or nested, and field is a group.
+        // This is to avoid merging two objects, or nested, or object with a nested.
+        (found.type === 'group' &&
+          (field.type === 'object' || field.type === 'nested' || field.type === 'group')) ||
+        ((found.type === 'object' || found.type === 'nested') && field.type === 'group')
       ) {
-        if (!found.fields) {
-          found.fields = [];
+        // if the new field has properties let's dedup and concat them with the already existing found variable in
+        // the array
+        if (field.fields) {
+          // if the found type was object or nested it won't have a fields array so let's initialize it
+          if (!found.fields) {
+            found.fields = [];
+          }
+          found.fields = dedupFields(found.fields.concat(field.fields));
         }
-        found.type = 'group';
-        found.fields = dedupFields(found.fields.concat(field.fields));
+
+        // if found already had fields or got new ones from the new field coming in we need to assign the right
+        // type to it
+        if (found.fields) {
+          // If this field is supposed to be `nested` and we have fields, we need to preserve the fact that it is
+          // supposed to be `nested` for when the template is actually generated
+          if (found.type === 'nested' || field.type === 'nested') {
+            found.type = 'group-nested';
+          } else {
+            // found was either `group` already or `object` so just set it to `group`
+            found.type = 'group';
+          }
+        }
+        // we need to merge in other properties (like `dynamic`) that might exist
+        Object.assign(found, importantFieldProps);
+        // if `field.type` wasn't group object or nested, then there's a conflict in types, so lets ignore it
       } else {
-        // only 'group' fields can be merged in this way
+        // only `group`, `object`, and `nested` fields can be merged in this way
         // XXX: don't abort on error for now
         // see discussion in https://github.com/elastic/kibana/pull/59894
         // throw new Error(

From 693a84aace273108d2ebf51b3a8d018cd97ed41c Mon Sep 17 00:00:00 2001
From: Mikhail Shustov <restrry@gmail.com>
Date: Thu, 30 Apr 2020 19:16:31 +0200
Subject: [PATCH 03/11] load SettingsOptions component lazily (#64638)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../vis_type_markdown/public/markdown_vis.ts  |  2 +-
 .../public/settings_options.tsx               |  4 ++-
 .../public/settings_options_lazy.tsx          | 30 +++++++++++++++++++
 3 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 src/plugins/vis_type_markdown/public/settings_options_lazy.tsx

diff --git a/src/plugins/vis_type_markdown/public/markdown_vis.ts b/src/plugins/vis_type_markdown/public/markdown_vis.ts
index b84d9638eb973d..3309330d7527c9 100644
--- a/src/plugins/vis_type_markdown/public/markdown_vis.ts
+++ b/src/plugins/vis_type_markdown/public/markdown_vis.ts
@@ -21,7 +21,7 @@ import { i18n } from '@kbn/i18n';
 
 import { MarkdownVisWrapper } from './markdown_vis_controller';
 import { MarkdownOptions } from './markdown_options';
-import { SettingsOptions } from './settings_options';
+import { SettingsOptions } from './settings_options_lazy';
 import { DefaultEditorSize } from '../../vis_default_editor/public';
 
 export const markdownVisDefinition = {
diff --git a/src/plugins/vis_type_markdown/public/settings_options.tsx b/src/plugins/vis_type_markdown/public/settings_options.tsx
index 6f6a80564ce076..bf4570db5d4a0d 100644
--- a/src/plugins/vis_type_markdown/public/settings_options.tsx
+++ b/src/plugins/vis_type_markdown/public/settings_options.tsx
@@ -52,4 +52,6 @@ function SettingsOptions({ stateParams, setValue }: VisOptionsProps<MarkdownVisP
   );
 }
 
-export { SettingsOptions };
+// default export required for React.Lazy
+// eslint-disable-next-line import/no-default-export
+export { SettingsOptions as default };
diff --git a/src/plugins/vis_type_markdown/public/settings_options_lazy.tsx b/src/plugins/vis_type_markdown/public/settings_options_lazy.tsx
new file mode 100644
index 00000000000000..a29e3a9341b6d3
--- /dev/null
+++ b/src/plugins/vis_type_markdown/public/settings_options_lazy.tsx
@@ -0,0 +1,30 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { lazy, Suspense } from 'react';
+import { EuiLoadingSpinner } from '@elastic/eui';
+
+// @ts-ignore
+const SettingsOptionsComponent = lazy(() => import('./settings_options'));
+
+export const SettingsOptions = (props: any) => (
+  <Suspense fallback={<EuiLoadingSpinner />}>
+    <SettingsOptionsComponent {...props} />
+  </Suspense>
+);

From 3442c25b9f7bf0dd5a8b6ad614f5e0e64b5d318a Mon Sep 17 00:00:00 2001
From: Mikhail Shustov <restrry@gmail.com>
Date: Thu, 30 Apr 2020 19:18:07 +0200
Subject: [PATCH 04/11] lazy load React components + VegaParser (#64749)

---
 .../vis_type_vega/public/vega_request_handler.ts    | 13 +++++++++----
 .../vis_type_vega/public/vega_visualization.js      |  4 ++--
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/plugins/vis_type_vega/public/vega_request_handler.ts b/src/plugins/vis_type_vega/public/vega_request_handler.ts
index 196e8fdcbafdac..efc02e368efa8e 100644
--- a/src/plugins/vis_type_vega/public/vega_request_handler.ts
+++ b/src/plugins/vis_type_vega/public/vega_request_handler.ts
@@ -19,8 +19,6 @@
 
 import { Filter, esQuery, TimeRange, Query } from '../../data/public';
 
-// @ts-ignore
-import { VegaParser } from './data_model/vega_parser';
 // @ts-ignore
 import { SearchCache } from './data_model/search_cache';
 // @ts-ignore
@@ -46,7 +44,12 @@ export function createVegaRequestHandler({
   const { timefilter } = data.query.timefilter;
   const timeCache = new TimeCache(timefilter, 3 * 1000);
 
-  return ({ timeRange, filters, query, visParams }: VegaRequestHandlerParams) => {
+  return async function vegaRequestHandler({
+    timeRange,
+    filters,
+    query,
+    visParams,
+  }: VegaRequestHandlerParams) {
     if (!searchCache) {
       searchCache = new SearchCache(getData().search.__LEGACY.esClient, {
         max: 10,
@@ -58,8 +61,10 @@ export function createVegaRequestHandler({
 
     const esQueryConfigs = esQuery.getEsQueryConfig(uiSettings);
     const filtersDsl = esQuery.buildEsQuery(undefined, query, filters, esQueryConfigs);
+    // @ts-ignore
+    const { VegaParser } = await import('./data_model/vega_parser');
     const vp = new VegaParser(visParams.spec, searchCache, timeCache, filtersDsl, serviceSettings);
 
-    return vp.parseAsync();
+    return await vp.parseAsync();
   };
 }
diff --git a/src/plugins/vis_type_vega/public/vega_visualization.js b/src/plugins/vis_type_vega/public/vega_visualization.js
index a6e911de7f0cb0..1fcb89f04457da 100644
--- a/src/plugins/vis_type_vega/public/vega_visualization.js
+++ b/src/plugins/vis_type_vega/public/vega_visualization.js
@@ -17,8 +17,6 @@
  * under the License.
  */
 import { i18n } from '@kbn/i18n';
-import { VegaView } from './vega_view/vega_view';
-import { VegaMapView } from './vega_view/vega_map_view';
 import { getNotifications, getData, getSavedObjects } from './services';
 
 export const createVegaVisualization = ({ serviceSettings }) =>
@@ -117,8 +115,10 @@ export const createVegaVisualization = ({ serviceSettings }) =>
 
         if (vegaParser.useMap) {
           const services = { toastService: getNotifications().toasts };
+          const { VegaMapView } = await import('./vega_view/vega_map_view');
           this._vegaView = new VegaMapView(vegaViewParams, services);
         } else {
+          const { VegaView } = await import('./vega_view/vega_view');
           this._vegaView = new VegaView(vegaViewParams);
         }
         await this._vegaView.init();

From 0efd02b49dbbc825f8694237dc74bfa7685682d3 Mon Sep 17 00:00:00 2001
From: Lee Drengenberg <lee.drengenberg@elastic.co>
Date: Thu, 30 Apr 2020 17:30:06 +0000
Subject: [PATCH 05/11] change createIndexPattern to do what it takes to make
 the indexPatternName* (#64646)

---
 .../apps/discover/_discover_histogram.js      |  2 +-
 .../apps/getting_started/_shakespeare.js      |  6 ++---
 .../_index_pattern_create_delete.js           |  5 +---
 test/functional/page_objects/settings_page.ts | 26 ++++++++++++++++---
 x-pack/test/functional/apps/graph/graph.ts    |  4 +--
 5 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/test/functional/apps/discover/_discover_histogram.js b/test/functional/apps/discover/_discover_histogram.js
index eeef3333aab0fc..dcd185eba00e6e 100644
--- a/test/functional/apps/discover/_discover_histogram.js
+++ b/test/functional/apps/discover/_discover_histogram.js
@@ -48,7 +48,7 @@ export default function({ getService, getPageObjects }) {
 
       log.debug('create long_window_logstash index pattern');
       // NOTE: long_window_logstash load does NOT create index pattern
-      await PageObjects.settings.createIndexPattern('long-window-logstash-');
+      await PageObjects.settings.createIndexPattern('long-window-logstash-*');
       await kibanaServer.uiSettings.replace(defaultSettings);
       await browser.refresh();
 
diff --git a/test/functional/apps/getting_started/_shakespeare.js b/test/functional/apps/getting_started/_shakespeare.js
index 9a4bb0081b7ad1..3a3d6b93e166bf 100644
--- a/test/functional/apps/getting_started/_shakespeare.js
+++ b/test/functional/apps/getting_started/_shakespeare.js
@@ -59,9 +59,9 @@ export default function({ getService, getPageObjects }) {
 
     it('should create shakespeare index pattern', async function() {
       log.debug('Create shakespeare index pattern');
-      await PageObjects.settings.createIndexPattern('shakes', null);
+      await PageObjects.settings.createIndexPattern('shakespeare', null);
       const patternName = await PageObjects.settings.getIndexPageHeading();
-      expect(patternName).to.be('shakes*');
+      expect(patternName).to.be('shakespeare');
     });
 
     // https://www.elastic.co/guide/en/kibana/current/tutorial-visualizing.html
@@ -74,7 +74,7 @@ export default function({ getService, getPageObjects }) {
       log.debug('create shakespeare vertical bar chart');
       await PageObjects.visualize.navigateToNewVisualization();
       await PageObjects.visualize.clickVerticalBarChart();
-      await PageObjects.visualize.clickNewSearch('shakes*');
+      await PageObjects.visualize.clickNewSearch('shakespeare');
       await PageObjects.visChart.waitForVisualization();
 
       const expectedChartValues = [111396];
diff --git a/test/functional/apps/management/_index_pattern_create_delete.js b/test/functional/apps/management/_index_pattern_create_delete.js
index 616e2297b2f510..2545b8f324d1b9 100644
--- a/test/functional/apps/management/_index_pattern_create_delete.js
+++ b/test/functional/apps/management/_index_pattern_create_delete.js
@@ -44,10 +44,7 @@ export default function({ getService, getPageObjects }) {
       it('should handle special charaters in template input', async () => {
         await PageObjects.settings.clickAddNewIndexPatternButton();
         await PageObjects.header.waitUntilLoadingHasFinished();
-        await PageObjects.settings.setIndexPatternField({
-          indexPatternName: '❤️',
-          expectWildcard: false,
-        });
+        await PageObjects.settings.setIndexPatternField('❤️');
         await PageObjects.header.waitUntilLoadingHasFinished();
 
         await retry.try(async () => {
diff --git a/test/functional/page_objects/settings_page.ts b/test/functional/page_objects/settings_page.ts
index 8864eda3823efe..81d22838d1e8b7 100644
--- a/test/functional/page_objects/settings_page.ts
+++ b/test/functional/page_objects/settings_page.ts
@@ -334,7 +334,7 @@ export function SettingsPageProvider({ getService, getPageObjects }: FtrProvider
         }
         await PageObjects.header.waitUntilLoadingHasFinished();
         await retry.try(async () => {
-          await this.setIndexPatternField({ indexPatternName });
+          await this.setIndexPatternField(indexPatternName);
         });
         await PageObjects.common.sleep(2000);
         await (await this.getCreateIndexPatternGoToStep2Button()).click();
@@ -375,14 +375,32 @@ export function SettingsPageProvider({ getService, getPageObjects }: FtrProvider
       return indexPatternId;
     }
 
-    async setIndexPatternField({ indexPatternName = 'logstash-', expectWildcard = true } = {}) {
+    async setIndexPatternField(indexPatternName = 'logstash-*') {
       log.debug(`setIndexPatternField(${indexPatternName})`);
       const field = await this.getIndexPatternField();
       await field.clearValue();
-      await field.type(indexPatternName, { charByChar: true });
+      if (
+        indexPatternName.charAt(0) === '*' &&
+        indexPatternName.charAt(indexPatternName.length - 1) === '*'
+      ) {
+        // this is a special case when the index pattern name starts with '*'
+        // like '*:makelogs-*' where the UI will not append *
+        await field.type(indexPatternName, { charByChar: true });
+      } else if (indexPatternName.charAt(indexPatternName.length - 1) === '*') {
+        // the common case where the UI will append '*' automatically so we won't type it
+        const tempName = indexPatternName.slice(0, -1);
+        await field.type(tempName, { charByChar: true });
+      } else {
+        // case where we don't want the * appended so we'll remove it if it was added
+        await field.type(indexPatternName, { charByChar: true });
+        const tempName = await field.getAttribute('value');
+        if (tempName.length > indexPatternName.length) {
+          await field.type(browser.keys.DELETE, { charByChar: true });
+        }
+      }
       const currentName = await field.getAttribute('value');
       log.debug(`setIndexPatternField set to ${currentName}`);
-      expect(currentName).to.eql(`${indexPatternName}${expectWildcard ? '*' : ''}`);
+      expect(currentName).to.eql(indexPatternName);
     }
 
     async getCreateIndexPatternGoToStep2Button() {
diff --git a/x-pack/test/functional/apps/graph/graph.ts b/x-pack/test/functional/apps/graph/graph.ts
index 2bbc39969370bf..fcf7298c5577ae 100644
--- a/x-pack/test/functional/apps/graph/graph.ts
+++ b/x-pack/test/functional/apps/graph/graph.ts
@@ -76,7 +76,7 @@ export default function({ getService, getPageObjects }: FtrProviderContext) {
     }
 
     it('should show correct node labels', async function() {
-      await PageObjects.graph.selectIndexPattern('secrepo*');
+      await PageObjects.graph.selectIndexPattern('secrepo');
       await buildGraph();
       const { nodes } = await PageObjects.graph.getGraphObjects();
       const circlesText = nodes.map(({ label }) => label);
@@ -120,7 +120,7 @@ export default function({ getService, getPageObjects }: FtrProviderContext) {
 
     it('should create new Graph workspace', async function() {
       await PageObjects.graph.newGraph();
-      await PageObjects.graph.selectIndexPattern('secrepo*');
+      await PageObjects.graph.selectIndexPattern('secrepo');
       const { nodes, edges } = await PageObjects.graph.getGraphObjects();
       expect(nodes).to.be.empty();
       expect(edges).to.be.empty();

From fc2f2446eb73c1af3119db60bdf65d96102de593 Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@elastic.co>
Date: Thu, 30 Apr 2020 20:08:30 +0200
Subject: [PATCH 06/11] fix: fix migration (#64894)

(cherry picked from commit 99b5982f1c6e0940acbe578d735aae31ddc57981)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 x-pack/plugins/lens/server/migrations.test.ts | 2 +-
 x-pack/plugins/lens/server/migrations.ts      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/lens/server/migrations.test.ts b/x-pack/plugins/lens/server/migrations.test.ts
index 4cc330d40efd7f..0541d9636577ba 100644
--- a/x-pack/plugins/lens/server/migrations.test.ts
+++ b/x-pack/plugins/lens/server/migrations.test.ts
@@ -160,7 +160,7 @@ describe('Lens migrations', () => {
   });
 
   describe('7.8.0 auto timestamp', () => {
-    const context = {} as SavedObjectMigrationContext;
+    const context = ({ log: { warning: () => {} } } as unknown) as SavedObjectMigrationContext;
 
     const example = {
       type: 'lens',
diff --git a/x-pack/plugins/lens/server/migrations.ts b/x-pack/plugins/lens/server/migrations.ts
index 583fba1a4a9992..a15e2b3692d026 100644
--- a/x-pack/plugins/lens/server/migrations.ts
+++ b/x-pack/plugins/lens/server/migrations.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { cloneDeep, flow } from 'lodash';
+import { cloneDeep } from 'lodash';
 import { fromExpression, toExpression, Ast, ExpressionFunctionAST } from '@kbn/interpreter/common';
 import { SavedObjectMigrationFn } from 'src/core/server';
 
@@ -156,5 +156,5 @@ export const migrations: Record<string, SavedObjectMigrationFn<any, any>> = {
   },
   // The order of these migrations matter, since the timefield migration relies on the aggConfigs
   // sitting directly on the esaggs as an argument and not a nested function (which lens_auto_date was).
-  '7.8.0': flow(removeLensAutoDate, addTimeFieldToEsaggs),
+  '7.8.0': (doc, context) => addTimeFieldToEsaggs(removeLensAutoDate(doc, context), context),
 };

From 8a304623d4bf2e3be16f4c2cd25aa734b0308f5e Mon Sep 17 00:00:00 2001
From: Jen Huang <its.jenetic@gmail.com>
Date: Thu, 30 Apr 2020 11:12:22 -0700
Subject: [PATCH 07/11] [Ingest] Agent config settings UI (#64854)

* Remove duplicate donut chart, move used donut chart closer to usage, clean up import paths

* Change delete agent config to only single delete and delete all its associated data sources

* Initial pass at settings tab

* Reuse existing create agent config form instead

* Fix delete api

* Prevent nav drawer from hiding bottom bar (save action area) content

* Remove delete config functionality from list page

* Prevent API from deleting config with agents enrolled

* Fix namespace populating in form

* Display confirmation modal to deploy to agents if agents are detected

* Adjust confirm delete copy

* Fix i18n checks

* Fix type check

* Fix it again

* De-dupe confirm modal

* Fix i18n

* Update agent config info after saving

* Adjust skip unassign from agent config option schema in delete datasource method
---
 .../common/types/rest_spec/agent_config.ts    |   8 +-
 .../hooks/use_request/agent_config.ts         |   8 +-
 .../applications/ingest_manager/index.scss    |  14 +
 .../applications/ingest_manager/index.tsx     |   1 +
 .../components/config_delete_provider.tsx     | 172 +++----
 .../agent_config/components/config_form.tsx   | 449 ++++++++++--------
 .../confirm_deploy_modal.tsx}                 |  16 +-
 .../sections/agent_config/components/index.ts |   1 +
 .../components/linked_agent_count.tsx         |   4 +-
 .../components/index.ts                       |   1 -
 .../create_datasource_page/index.tsx          |  28 +-
 .../details_page/components/config_form.tsx   |  94 ----
 .../details_page/components/donut_chart.tsx   |  65 ---
 .../details_page/components/edit_config.tsx   | 135 ------
 .../details_page/components/index.ts          |   2 -
 .../components/settings/index.tsx             | 216 +++++++++
 .../details_page/components/yaml/index.tsx    |   2 +-
 .../agent_config/details_page/hooks/index.ts  |   2 +-
 .../agent_config/details_page/index.tsx       |  33 +-
 .../edit_datasource_page/index.tsx            |   8 +-
 .../sections/fleet/agent_list_page/index.scss |   6 -
 .../components/donut_chart.tsx                |   0
 .../sections/fleet/components/list_layout.tsx |   6 +-
 .../ingest_manager/types/index.ts             |   4 +-
 .../server/routes/agent_config/handlers.ts    |  12 +-
 .../server/routes/agent_config/index.ts       |   4 +-
 .../server/services/agent_config.ts           |  57 ++-
 .../server/services/datasource.ts             |  20 +-
 .../server/types/rest_spec/agent_config.ts    |   4 +-
 .../translations/translations/ja-JP.json      |  26 -
 .../translations/translations/zh-CN.json      |  26 -
 31 files changed, 680 insertions(+), 744 deletions(-)
 create mode 100644 x-pack/plugins/ingest_manager/public/applications/ingest_manager/index.scss
 rename x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/{create_datasource_page/components/confirm_modal.tsx => components/confirm_deploy_modal.tsx} (76%)
 delete mode 100644 x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/config_form.tsx
 delete mode 100644 x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/donut_chart.tsx
 delete mode 100644 x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/edit_config.tsx
 create mode 100644 x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/settings/index.tsx
 delete mode 100644 x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/index.scss
 rename x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/{agent_list_page => }/components/donut_chart.tsx (100%)

diff --git a/x-pack/plugins/ingest_manager/common/types/rest_spec/agent_config.ts b/x-pack/plugins/ingest_manager/common/types/rest_spec/agent_config.ts
index 89d548d11dadb6..82d7fa51b20826 100644
--- a/x-pack/plugins/ingest_manager/common/types/rest_spec/agent_config.ts
+++ b/x-pack/plugins/ingest_manager/common/types/rest_spec/agent_config.ts
@@ -49,16 +49,16 @@ export interface UpdateAgentConfigResponse {
   success: boolean;
 }
 
-export interface DeleteAgentConfigsRequest {
+export interface DeleteAgentConfigRequest {
   body: {
-    agentConfigIds: string[];
+    agentConfigId: string;
   };
 }
 
-export type DeleteAgentConfigsResponse = Array<{
+export interface DeleteAgentConfigResponse {
   id: string;
   success: boolean;
-}>;
+}
 
 export interface GetFullAgentConfigRequest {
   params: {
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_request/agent_config.ts b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_request/agent_config.ts
index bed3f994005ad2..f80c468677f482 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_request/agent_config.ts
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_request/agent_config.ts
@@ -18,8 +18,8 @@ import {
   CreateAgentConfigResponse,
   UpdateAgentConfigRequest,
   UpdateAgentConfigResponse,
-  DeleteAgentConfigsRequest,
-  DeleteAgentConfigsResponse,
+  DeleteAgentConfigRequest,
+  DeleteAgentConfigResponse,
 } from '../../types';
 
 export const useGetAgentConfigs = (query: HttpFetchQuery = {}) => {
@@ -75,8 +75,8 @@ export const sendUpdateAgentConfig = (
   });
 };
 
-export const sendDeleteAgentConfigs = (body: DeleteAgentConfigsRequest['body']) => {
-  return sendRequest<DeleteAgentConfigsResponse>({
+export const sendDeleteAgentConfig = (body: DeleteAgentConfigRequest['body']) => {
+  return sendRequest<DeleteAgentConfigResponse>({
     path: agentConfigRouteService.getDeletePath(),
     method: 'post',
     body: JSON.stringify(body),
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/index.scss b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/index.scss
new file mode 100644
index 00000000000000..fb95b1fa8bbfc6
--- /dev/null
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/index.scss
@@ -0,0 +1,14 @@
+@import '@elastic/eui/src/components/header/variables';
+@import '@elastic/eui/src/components/nav_drawer/variables';
+
+/**
+ * 1. Hack EUI so the bottom bar doesn't obscure the nav drawer flyout.
+ */
+.ingestManager__bottomBar {
+  z-index: 0; /* 1 */
+  left: $euiNavDrawerWidthCollapsed;
+}
+
+.ingestManager__bottomBar-isNavDrawerLocked {
+  left: $euiNavDrawerWidthExpanded;
+}
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/index.tsx
index 6485862830d8ab..295a35693726f3 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/index.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/index.tsx
@@ -23,6 +23,7 @@ import { IngestManagerOverview, EPMApp, AgentConfigApp, FleetApp, DataStreamApp
 import { CoreContext, DepsContext, ConfigContext, setHttpClient, useConfig } from './hooks';
 import { PackageInstallProvider } from './sections/epm/hooks';
 import { sendSetup } from './hooks/use_request/setup';
+import './index.scss';
 
 export interface ProtectedRouteProps extends RouteProps {
   isAllowed?: boolean;
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/components/config_delete_provider.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/components/config_delete_provider.tsx
index 9ae8369abbd52e..d517dde45d5e3c 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/components/config_delete_provider.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/components/config_delete_provider.tsx
@@ -5,117 +5,92 @@
  */
 
 import React, { Fragment, useRef, useState } from 'react';
-import { EuiConfirmModal, EuiOverlayMask } from '@elastic/eui';
+import { EuiConfirmModal, EuiOverlayMask, EuiCallOut } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { AGENT_SAVED_OBJECT_TYPE } from '../../../constants';
-import { sendDeleteAgentConfigs, useCore, sendRequest } from '../../../hooks';
+import { sendDeleteAgentConfig, useCore, useConfig, sendRequest } from '../../../hooks';
 
 interface Props {
-  children: (deleteAgentConfigs: deleteAgentConfigs) => React.ReactElement;
+  children: (deleteAgentConfig: DeleteAgentConfig) => React.ReactElement;
 }
 
-export type deleteAgentConfigs = (agentConfigs: string[], onSuccess?: OnSuccessCallback) => void;
+export type DeleteAgentConfig = (agentConfig: string, onSuccess?: OnSuccessCallback) => void;
 
-type OnSuccessCallback = (agentConfigsUnenrolled: string[]) => void;
+type OnSuccessCallback = (agentConfigDeleted: string) => void;
 
 export const AgentConfigDeleteProvider: React.FunctionComponent<Props> = ({ children }) => {
   const { notifications } = useCore();
-  const [agentConfigs, setAgentConfigs] = useState<string[]>([]);
+  const {
+    fleet: { enabled: isFleetEnabled },
+  } = useConfig();
+  const [agentConfig, setAgentConfig] = useState<string>();
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   const [isLoadingAgentsCount, setIsLoadingAgentsCount] = useState<boolean>(false);
   const [agentsCount, setAgentsCount] = useState<number>(0);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const onSuccessCallback = useRef<OnSuccessCallback | null>(null);
 
-  const deleteAgentConfigsPrompt: deleteAgentConfigs = (
-    agentConfigsToDelete,
+  const deleteAgentConfigPrompt: DeleteAgentConfig = (
+    agentConfigToDelete,
     onSuccess = () => undefined
   ) => {
-    if (
-      agentConfigsToDelete === undefined ||
-      (Array.isArray(agentConfigsToDelete) && agentConfigsToDelete.length === 0)
-    ) {
-      throw new Error('No agent configs specified for deletion');
+    if (!agentConfigToDelete) {
+      throw new Error('No agent config specified for deletion');
     }
     setIsModalOpen(true);
-    setAgentConfigs(agentConfigsToDelete);
-    fetchAgentsCount(agentConfigsToDelete);
+    setAgentConfig(agentConfigToDelete);
+    fetchAgentsCount(agentConfigToDelete);
     onSuccessCallback.current = onSuccess;
   };
 
   const closeModal = () => {
-    setAgentConfigs([]);
+    setAgentConfig(undefined);
     setIsLoading(false);
     setIsLoadingAgentsCount(false);
     setIsModalOpen(false);
   };
 
-  const deleteAgentConfigs = async () => {
+  const deleteAgentConfig = async () => {
     setIsLoading(true);
 
     try {
-      const { data } = await sendDeleteAgentConfigs({
-        agentConfigIds: agentConfigs,
+      const { data } = await sendDeleteAgentConfig({
+        agentConfigId: agentConfig!,
       });
-      const successfulResults = data?.filter(result => result.success) || [];
-      const failedResults = data?.filter(result => !result.success) || [];
 
-      if (successfulResults.length) {
-        const hasMultipleSuccesses = successfulResults.length > 1;
-        const successMessage = hasMultipleSuccesses
-          ? i18n.translate(
-              'xpack.ingestManager.deleteAgentConfigs.successMultipleNotificationTitle',
-              {
-                defaultMessage: 'Deleted {count} agent configs',
-                values: { count: successfulResults.length },
-              }
-            )
-          : i18n.translate(
-              'xpack.ingestManager.deleteAgentConfigs.successSingleNotificationTitle',
-              {
-                defaultMessage: "Deleted agent config '{id}'",
-                values: { id: successfulResults[0].id },
-              }
-            );
-        notifications.toasts.addSuccess(successMessage);
+      if (data?.success) {
+        notifications.toasts.addSuccess(
+          i18n.translate('xpack.ingestManager.deleteAgentConfig.successSingleNotificationTitle', {
+            defaultMessage: "Deleted agent config '{id}'",
+            values: { id: agentConfig },
+          })
+        );
+        if (onSuccessCallback.current) {
+          onSuccessCallback.current(agentConfig!);
+        }
       }
 
-      if (failedResults.length) {
-        const hasMultipleFailures = failedResults.length > 1;
-        const failureMessage = hasMultipleFailures
-          ? i18n.translate(
-              'xpack.ingestManager.deleteAgentConfigs.failureMultipleNotificationTitle',
-              {
-                defaultMessage: 'Error deleting {count} agent configs',
-                values: { count: failedResults.length },
-              }
-            )
-          : i18n.translate(
-              'xpack.ingestManager.deleteAgentConfigs.failureSingleNotificationTitle',
-              {
-                defaultMessage: "Error deleting agent config '{id}'",
-                values: { id: failedResults[0].id },
-              }
-            );
-        notifications.toasts.addDanger(failureMessage);
-      }
-
-      if (onSuccessCallback.current) {
-        onSuccessCallback.current(successfulResults.map(result => result.id));
+      if (!data?.success) {
+        notifications.toasts.addDanger(
+          i18n.translate('xpack.ingestManager.deleteAgentConfig.failureSingleNotificationTitle', {
+            defaultMessage: "Error deleting agent config '{id}'",
+            values: { id: agentConfig },
+          })
+        );
       }
     } catch (e) {
       notifications.toasts.addDanger(
-        i18n.translate('xpack.ingestManager.deleteAgentConfigs.fatalErrorNotificationTitle', {
-          defaultMessage: 'Error deleting agent configs',
+        i18n.translate('xpack.ingestManager.deleteAgentConfig.fatalErrorNotificationTitle', {
+          defaultMessage: 'Error deleting agent config',
         })
       );
     }
     closeModal();
   };
 
-  const fetchAgentsCount = async (agentConfigsToCheck: string[]) => {
-    if (isLoadingAgentsCount) {
+  const fetchAgentsCount = async (agentConfigToCheck: string) => {
+    if (!isFleetEnabled || isLoadingAgentsCount) {
       return;
     }
     setIsLoadingAgentsCount(true);
@@ -123,7 +98,7 @@ export const AgentConfigDeleteProvider: React.FunctionComponent<Props> = ({ chil
       path: `/api/ingest_manager/fleet/agents`,
       method: 'get',
       query: {
-        kuery: `${AGENT_SAVED_OBJECT_TYPE}.config_id : (${agentConfigsToCheck.join(' or ')})`,
+        kuery: `${AGENT_SAVED_OBJECT_TYPE}.config_id : ${agentConfigToCheck}`,
       },
     });
     setAgentsCount(data?.total || 0);
@@ -140,68 +115,61 @@ export const AgentConfigDeleteProvider: React.FunctionComponent<Props> = ({ chil
         <EuiConfirmModal
           title={
             <FormattedMessage
-              id="xpack.ingestManager.deleteAgentConfigs.confirmModal.deleteMultipleTitle"
-              defaultMessage="Delete {count, plural, one {this agent config} other {# agent configs}}?"
-              values={{ count: agentConfigs.length }}
+              id="xpack.ingestManager.deleteAgentConfig.confirmModal.deleteConfigTitle"
+              defaultMessage="Delete this agent configuration?"
             />
           }
           onCancel={closeModal}
-          onConfirm={deleteAgentConfigs}
+          onConfirm={deleteAgentConfig}
           cancelButtonText={
             <FormattedMessage
-              id="xpack.ingestManager.deleteAgentConfigs.confirmModal.cancelButtonLabel"
+              id="xpack.ingestManager.deleteAgentConfig.confirmModal.cancelButtonLabel"
               defaultMessage="Cancel"
             />
           }
           confirmButtonText={
             isLoading || isLoadingAgentsCount ? (
               <FormattedMessage
-                id="xpack.ingestManager.deleteAgentConfigs.confirmModal.loadingButtonLabel"
+                id="xpack.ingestManager.deleteAgentConfig.confirmModal.loadingButtonLabel"
                 defaultMessage="Loading…"
               />
-            ) : agentsCount ? (
-              <FormattedMessage
-                id="xpack.ingestManager.deleteAgentConfigs.confirmModal.confirmAndReassignButtonLabel"
-                defaultMessage="Delete {agentConfigsCount, plural, one {agent config} other {agent configs}} and unenroll {agentsCount, plural, one {agent} other {agents}}"
-                values={{
-                  agentsCount,
-                  agentConfigsCount: agentConfigs.length,
-                }}
-              />
             ) : (
               <FormattedMessage
-                id="xpack.ingestManager.deleteAgentConfigs.confirmModal.confirmButtonLabel"
-                defaultMessage="Delete {agentConfigsCount, plural, one {agent config} other {agent configs}}"
-                values={{
-                  agentConfigsCount: agentConfigs.length,
-                }}
+                id="xpack.ingestManager.deleteAgentConfig.confirmModal.confirmButtonLabel"
+                defaultMessage="Delete configuration"
               />
             )
           }
           buttonColor="danger"
-          confirmButtonDisabled={isLoading || isLoadingAgentsCount}
+          confirmButtonDisabled={isLoading || isLoadingAgentsCount || !!agentsCount}
         >
           {isLoadingAgentsCount ? (
             <FormattedMessage
-              id="xpack.ingestManager.deleteAgentConfigs.confirmModal.loadingAgentsCountMessage"
+              id="xpack.ingestManager.deleteAgentConfig.confirmModal.loadingAgentsCountMessage"
               defaultMessage="Checking amount of affected agents…"
             />
           ) : agentsCount ? (
-            <FormattedMessage
-              id="xpack.ingestManager.deleteAgentConfigs.confirmModal.affectedAgentsMessage"
-              defaultMessage="{agentsCount, plural, one {# agent is} other {# agents are}} assigned {agentConfigsCount, plural, one {to this agent config} other {across these agentConfigs}}. {agentsCount, plural, one {This agent} other {These agents}} will be unenrolled."
-              values={{
-                agentsCount,
-                agentConfigsCount: agentConfigs.length,
-              }}
-            />
+            <EuiCallOut
+              color="danger"
+              title={i18n.translate(
+                'xpack.ingestManager.deleteAgentConfig.confirmModal.affectedAgentsTitle',
+                {
+                  defaultMessage: 'Configuration in use',
+                }
+              )}
+            >
+              <FormattedMessage
+                id="xpack.ingestManager.deleteAgentConfig.confirmModal.affectedAgentsMessage"
+                defaultMessage="{agentsCount, plural, one {# agent is} other {# agents are}} assigned to this agent configuration. Unassign these agents before deleting this configuration."
+                values={{
+                  agentsCount,
+                }}
+              />
+            </EuiCallOut>
           ) : (
             <FormattedMessage
-              id="xpack.ingestManager.deleteAgentConfigs.confirmModal.noAffectedAgentsMessage"
-              defaultMessage="There are no agents assigned to {agentConfigsCount, plural, one {this agent config} other {these agentConfigs}}."
-              values={{
-                agentConfigsCount: agentConfigs.length,
-              }}
+              id="xpack.ingestManager.deleteAgentConfig.confirmModal.irreversibleMessage"
+              defaultMessage="This action cannot be undone."
             />
           )}
         </EuiConfirmModal>
@@ -211,7 +179,7 @@ export const AgentConfigDeleteProvider: React.FunctionComponent<Props> = ({ chil
 
   return (
     <Fragment>
-      {children(deleteAgentConfigsPrompt)}
+      {children(deleteAgentConfigPrompt)}
       {renderModal()}
     </Fragment>
   );
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/components/config_form.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/components/config_form.tsx
index 92c44d86e47c65..c55d6009074b0a 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/components/config_form.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/components/config_form.tsx
@@ -8,8 +8,7 @@ import React, { useMemo, useState } from 'react';
 import {
   EuiAccordion,
   EuiFieldText,
-  EuiFlexGroup,
-  EuiFlexItem,
+  EuiDescribedFormGroup,
   EuiForm,
   EuiFormRow,
   EuiHorizontalRule,
@@ -19,11 +18,13 @@ import {
   EuiComboBox,
   EuiIconTip,
   EuiCheckboxGroup,
+  EuiButton,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import styled from 'styled-components';
-import { NewAgentConfig } from '../../../types';
+import { NewAgentConfig, AgentConfig } from '../../../types';
+import { AgentConfigDeleteProvider } from './config_delete_provider';
 
 interface ValidationResults {
   [key: string]: JSX.Element[];
@@ -36,7 +37,7 @@ const StyledEuiAccordion = styled(EuiAccordion)`
 `;
 
 export const agentConfigFormValidation = (
-  agentConfig: Partial<NewAgentConfig>
+  agentConfig: Partial<NewAgentConfig | AgentConfig>
 ): ValidationResults => {
   const errors: ValidationResults = {};
 
@@ -53,11 +54,13 @@ export const agentConfigFormValidation = (
 };
 
 interface Props {
-  agentConfig: Partial<NewAgentConfig>;
-  updateAgentConfig: (u: Partial<NewAgentConfig>) => void;
+  agentConfig: Partial<NewAgentConfig | AgentConfig>;
+  updateAgentConfig: (u: Partial<NewAgentConfig | AgentConfig>) => void;
   withSysMonitoring: boolean;
   updateSysMonitoring: (newValue: boolean) => void;
   validation: ValidationResults;
+  isEditing?: boolean;
+  onDelete?: () => void;
 }
 
 export const AgentConfigForm: React.FunctionComponent<Props> = ({
@@ -66,9 +69,11 @@ export const AgentConfigForm: React.FunctionComponent<Props> = ({
   withSysMonitoring,
   updateSysMonitoring,
   validation,
+  isEditing = false,
+  onDelete = () => {},
 }) => {
   const [touchedFields, setTouchedFields] = useState<{ [key: string]: boolean }>({});
-  const [showNamespace, setShowNamespace] = useState<boolean>(false);
+  const [showNamespace, setShowNamespace] = useState<boolean>(!!agentConfig.namespace);
   const fields: Array<{
     name: 'name' | 'description' | 'namespace';
     label: JSX.Element;
@@ -105,209 +110,281 @@ export const AgentConfigForm: React.FunctionComponent<Props> = ({
     ];
   }, []);
 
-  return (
-    <EuiForm>
-      {fields.map(({ name, label, placeholder }) => {
-        return (
-          <EuiFormRow
-            fullWidth
-            key={name}
-            label={label}
-            error={touchedFields[name] && validation[name] ? validation[name] : null}
-            isInvalid={Boolean(touchedFields[name] && validation[name])}
-          >
-            <EuiFieldText
-              fullWidth
-              value={agentConfig[name]}
-              onChange={e => updateAgentConfig({ [name]: e.target.value })}
-              isInvalid={Boolean(touchedFields[name] && validation[name])}
-              onBlur={() => setTouchedFields({ ...touchedFields, [name]: true })}
-              placeholder={placeholder}
-            />
-          </EuiFormRow>
-        );
-      })}
+  const generalSettingsWrapper = (children: JSX.Element[]) => (
+    <EuiDescribedFormGroup
+      title={
+        <h4>
+          <FormattedMessage
+            id="xpack.ingestManager.configForm.generalSettingsGroupTitle"
+            defaultMessage="General settings"
+          />
+        </h4>
+      }
+      description={
+        <FormattedMessage
+          id="xpack.ingestManager.configForm.generalSettingsGroupDescription"
+          defaultMessage="Choose a name and description for your agent configuration."
+        />
+      }
+    >
+      {children}
+    </EuiDescribedFormGroup>
+  );
+
+  const generalFields = fields.map(({ name, label, placeholder }) => {
+    return (
       <EuiFormRow
-        label={
-          <EuiText size="xs" color="subdued">
+        fullWidth
+        key={name}
+        label={label}
+        error={touchedFields[name] && validation[name] ? validation[name] : null}
+        isInvalid={Boolean(touchedFields[name] && validation[name])}
+      >
+        <EuiFieldText
+          fullWidth
+          value={agentConfig[name]}
+          onChange={e => updateAgentConfig({ [name]: e.target.value })}
+          isInvalid={Boolean(touchedFields[name] && validation[name])}
+          onBlur={() => setTouchedFields({ ...touchedFields, [name]: true })}
+          placeholder={placeholder}
+        />
+      </EuiFormRow>
+    );
+  });
+
+  const advancedOptionsContent = (
+    <>
+      <EuiDescribedFormGroup
+        title={
+          <h4>
             <FormattedMessage
-              id="xpack.ingestManager.agentConfigForm.systemMonitoringFieldLabel"
-              defaultMessage="Optional"
+              id="xpack.ingestManager.agentConfigForm.namespaceFieldLabel"
+              defaultMessage="Default namespace"
             />
-          </EuiText>
+          </h4>
+        }
+        description={
+          <FormattedMessage
+            id="xpack.ingestManager.agentConfigForm.namespaceFieldDescription"
+            defaultMessage="Apply a default namespace to data sources that use this configuration. Data sources can specify their own namespaces."
+          />
         }
       >
         <EuiSwitch
           showLabel={true}
           label={
-            <>
-              <FormattedMessage
-                id="xpack.ingestManager.agentConfigForm.systemMonitoringText"
-                defaultMessage="Collect system metrics"
-              />{' '}
-              <EuiIconTip
-                content={i18n.translate(
-                  'xpack.ingestManager.agentConfigForm.systemMonitoringTooltipText',
-                  {
-                    defaultMessage:
-                      'Enable this option to bootstrap your configuration with a data source that collects system metrics and information.',
-                  }
-                )}
-                position="right"
-                type="iInCircle"
-              />
-            </>
+            <FormattedMessage
+              id="xpack.ingestManager.agentConfigForm.namespaceUseDefaultsFieldLabel"
+              defaultMessage="Use default namespace"
+            />
           }
-          checked={withSysMonitoring}
+          checked={showNamespace}
           onChange={() => {
-            updateSysMonitoring(!withSysMonitoring);
+            setShowNamespace(!showNamespace);
+            if (showNamespace) {
+              updateAgentConfig({ namespace: '' });
+            }
           }}
         />
-      </EuiFormRow>
-      <EuiHorizontalRule />
-      <EuiSpacer size="xs" />
-      <StyledEuiAccordion
-        id="advancedOptions"
-        buttonContent={
+        {showNamespace && (
+          <>
+            <EuiSpacer size="m" />
+            <EuiFormRow
+              fullWidth
+              error={touchedFields.namespace && validation.namespace ? validation.namespace : null}
+              isInvalid={Boolean(touchedFields.namespace && validation.namespace)}
+            >
+              <EuiComboBox
+                fullWidth
+                singleSelection
+                noSuggestions
+                selectedOptions={agentConfig.namespace ? [{ label: agentConfig.namespace }] : []}
+                onCreateOption={(value: string) => {
+                  updateAgentConfig({ namespace: value });
+                }}
+                onChange={selectedOptions => {
+                  updateAgentConfig({
+                    namespace: (selectedOptions.length ? selectedOptions[0] : '') as string,
+                  });
+                }}
+                isInvalid={Boolean(touchedFields.namespace && validation.namespace)}
+                onBlur={() => setTouchedFields({ ...touchedFields, namespace: true })}
+              />
+            </EuiFormRow>
+          </>
+        )}
+      </EuiDescribedFormGroup>
+      <EuiDescribedFormGroup
+        title={
+          <h4>
+            <FormattedMessage
+              id="xpack.ingestManager.agentConfigForm.monitoringLabel"
+              defaultMessage="Agent monitoring"
+            />
+          </h4>
+        }
+        description={
           <FormattedMessage
-            id="xpack.ingestManager.agentConfigForm.advancedOptionsToggleLabel"
-            defaultMessage="Advanced options"
+            id="xpack.ingestManager.agentConfigForm.monitoringDescription"
+            defaultMessage="Collect data about your agents for debugging and tracking performance."
           />
         }
-        buttonClassName="ingest-active-button"
       >
-        <EuiSpacer size="l" />
-        <EuiFlexGroup>
-          <EuiFlexItem>
-            <EuiText>
-              <h4>
-                <FormattedMessage
-                  id="xpack.ingestManager.agentConfigForm.namespaceFieldLabel"
-                  defaultMessage="Default namespace"
-                />
-              </h4>
-            </EuiText>
-            <EuiSpacer size="m" />
-            <EuiText size="s">
+        <EuiCheckboxGroup
+          options={[
+            {
+              id: 'logs',
+              label: i18n.translate(
+                'xpack.ingestManager.agentConfigForm.monitoringLogsFieldLabel',
+                { defaultMessage: 'Collect agent logs' }
+              ),
+            },
+            {
+              id: 'metrics',
+              label: i18n.translate(
+                'xpack.ingestManager.agentConfigForm.monitoringMetricsFieldLabel',
+                { defaultMessage: 'Collect agent metrics' }
+              ),
+            },
+          ]}
+          idToSelectedMap={(agentConfig.monitoring_enabled || []).reduce(
+            (acc: { logs: boolean; metrics: boolean }, key) => {
+              acc[key] = true;
+              return acc;
+            },
+            { logs: false, metrics: false }
+          )}
+          onChange={id => {
+            if (id !== 'logs' && id !== 'metrics') {
+              return;
+            }
+
+            const hasLogs =
+              agentConfig.monitoring_enabled && agentConfig.monitoring_enabled.indexOf(id) >= 0;
+
+            const previousValues = agentConfig.monitoring_enabled || [];
+            updateAgentConfig({
+              monitoring_enabled: hasLogs
+                ? previousValues.filter(type => type !== id)
+                : [...previousValues, id],
+            });
+          }}
+        />
+      </EuiDescribedFormGroup>
+      {isEditing && 'id' in agentConfig ? (
+        <EuiDescribedFormGroup
+          title={
+            <h4>
+              <FormattedMessage
+                id="xpack.ingestManager.configForm.deleteConfigGroupTitle"
+                defaultMessage="Delete configuration"
+              />
+            </h4>
+          }
+          description={
+            <>
+              <FormattedMessage
+                id="xpack.ingestManager.configForm.deleteConfigGroupDescription"
+                defaultMessage="Existing data will not be deleted."
+              />
+              <EuiSpacer size="s" />
+              <AgentConfigDeleteProvider>
+                {deleteAgentConfigPrompt => {
+                  return (
+                    <EuiButton
+                      color="danger"
+                      disabled={Boolean(agentConfig.is_default)}
+                      onClick={() => deleteAgentConfigPrompt(agentConfig.id!, onDelete)}
+                    >
+                      <FormattedMessage
+                        id="xpack.ingestManager.configForm.deleteConfigActionText"
+                        defaultMessage="Delete configuration"
+                      />
+                    </EuiButton>
+                  );
+                }}
+              </AgentConfigDeleteProvider>
+              {agentConfig.is_default ? (
+                <>
+                  <EuiSpacer size="xs" />
+                  <EuiText color="subdued" size="xs">
+                    <FormattedMessage
+                      id="xpack.ingestManager.configForm.unableToDeleteDefaultConfigText"
+                      defaultMessage="Default configuration cannot be deleted"
+                    />
+                  </EuiText>
+                </>
+              ) : null}
+            </>
+          }
+        />
+      ) : null}
+    </>
+  );
+
+  return (
+    <EuiForm>
+      {!isEditing ? generalFields : generalSettingsWrapper(generalFields)}
+      {!isEditing ? (
+        <EuiFormRow
+          label={
+            <EuiText size="xs" color="subdued">
               <FormattedMessage
-                id="xpack.ingestManager.agentConfigForm.namespaceFieldDescription"
-                defaultMessage="Apply a default namespace to data sources that use this configuration. Data sources can specify their own namespaces."
+                id="xpack.ingestManager.agentConfigForm.systemMonitoringFieldLabel"
+                defaultMessage="Optional"
               />
             </EuiText>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiSwitch
-              showLabel={true}
-              label={
-                <FormattedMessage
-                  id="xpack.ingestManager.agentConfigForm.namespaceUseDefaultsFieldLabel"
-                  defaultMessage="Use default namespace"
-                />
-              }
-              checked={showNamespace}
-              onChange={() => {
-                setShowNamespace(!showNamespace);
-                if (showNamespace) {
-                  updateAgentConfig({ namespace: '' });
-                }
-              }}
-            />
-            {showNamespace && (
+          }
+        >
+          <EuiSwitch
+            showLabel={true}
+            label={
               <>
-                <EuiSpacer size="m" />
-                <EuiFormRow
-                  fullWidth
-                  error={
-                    touchedFields.namespace && validation.namespace ? validation.namespace : null
-                  }
-                  isInvalid={Boolean(touchedFields.namespace && validation.namespace)}
-                >
-                  <EuiComboBox
-                    fullWidth
-                    singleSelection
-                    noSuggestions
-                    selectedOptions={
-                      agentConfig.namespace ? [{ label: agentConfig.namespace }] : []
-                    }
-                    onCreateOption={(value: string) => {
-                      updateAgentConfig({ namespace: value });
-                    }}
-                    onChange={selectedOptions => {
-                      updateAgentConfig({
-                        namespace: (selectedOptions.length ? selectedOptions[0] : '') as string,
-                      });
-                    }}
-                    isInvalid={Boolean(touchedFields.namespace && validation.namespace)}
-                    onBlur={() => setTouchedFields({ ...touchedFields, namespace: true })}
-                  />
-                </EuiFormRow>
-              </>
-            )}
-          </EuiFlexItem>
-        </EuiFlexGroup>
-        <EuiSpacer size="m" />
-        <EuiFlexGroup>
-          <EuiFlexItem>
-            <EuiText>
-              <h4>
                 <FormattedMessage
-                  id="xpack.ingestManager.agentConfigForm.monitoringLabel"
-                  defaultMessage="Agent monitoring"
+                  id="xpack.ingestManager.agentConfigForm.systemMonitoringText"
+                  defaultMessage="Collect system metrics"
+                />{' '}
+                <EuiIconTip
+                  content={i18n.translate(
+                    'xpack.ingestManager.agentConfigForm.systemMonitoringTooltipText',
+                    {
+                      defaultMessage:
+                        'Enable this option to bootstrap your configuration with a data source that collects system metrics and information.',
+                    }
+                  )}
+                  position="right"
+                  type="iInCircle"
                 />
-              </h4>
-            </EuiText>
-            <EuiSpacer size="m" />
-            <EuiText size="s">
+              </>
+            }
+            checked={withSysMonitoring}
+            onChange={() => {
+              updateSysMonitoring(!withSysMonitoring);
+            }}
+          />
+        </EuiFormRow>
+      ) : null}
+      {!isEditing ? (
+        <>
+          <EuiHorizontalRule />
+          <EuiSpacer size="xs" />
+          <StyledEuiAccordion
+            id="advancedOptions"
+            buttonContent={
               <FormattedMessage
-                id="xpack.ingestManager.agentConfigForm.monitoringDescription"
-                defaultMessage="Collect data about your agents for debugging and tracking performance."
+                id="xpack.ingestManager.agentConfigForm.advancedOptionsToggleLabel"
+                defaultMessage="Advanced options"
               />
-            </EuiText>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiCheckboxGroup
-              options={[
-                {
-                  id: 'logs',
-                  label: i18n.translate(
-                    'xpack.ingestManager.agentConfigForm.monitoringLogsFieldLabel',
-                    { defaultMessage: 'Collect agent logs' }
-                  ),
-                },
-                {
-                  id: 'metrics',
-                  label: i18n.translate(
-                    'xpack.ingestManager.agentConfigForm.monitoringMetricsFieldLabel',
-                    { defaultMessage: 'Collect agent metrics' }
-                  ),
-                },
-              ]}
-              idToSelectedMap={(agentConfig.monitoring_enabled || []).reduce(
-                (acc: { logs: boolean; metrics: boolean }, key) => {
-                  acc[key] = true;
-                  return acc;
-                },
-                { logs: false, metrics: false }
-              )}
-              onChange={id => {
-                if (id !== 'logs' && id !== 'metrics') {
-                  return;
-                }
-
-                const hasLogs =
-                  agentConfig.monitoring_enabled && agentConfig.monitoring_enabled.indexOf(id) >= 0;
-
-                const previousValues = agentConfig.monitoring_enabled || [];
-                updateAgentConfig({
-                  monitoring_enabled: hasLogs
-                    ? previousValues.filter(type => type !== id)
-                    : [...previousValues, id],
-                });
-              }}
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </StyledEuiAccordion>
+            }
+            buttonClassName="ingest-active-button"
+          >
+            <EuiSpacer size="l" />
+            {advancedOptionsContent}
+          </StyledEuiAccordion>
+        </>
+      ) : (
+        advancedOptionsContent
+      )}
     </EuiForm>
   );
 };
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/confirm_modal.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/components/confirm_deploy_modal.tsx
similarity index 76%
rename from x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/confirm_modal.tsx
rename to x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/components/confirm_deploy_modal.tsx
index aa7eab8f5be8d0..a503beeffa8b4d 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/confirm_modal.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/components/confirm_deploy_modal.tsx
@@ -8,9 +8,9 @@ import React from 'react';
 import { EuiCallOut, EuiOverlayMask, EuiConfirmModal, EuiSpacer } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
-import { AgentConfig } from '../../../../types';
+import { AgentConfig } from '../../../types';
 
-export const ConfirmCreateDatasourceModal: React.FunctionComponent<{
+export const ConfirmDeployConfigModal: React.FunctionComponent<{
   onConfirm: () => void;
   onCancel: () => void;
   agentCount: number;
@@ -21,7 +21,7 @@ export const ConfirmCreateDatasourceModal: React.FunctionComponent<{
       <EuiConfirmModal
         title={
           <FormattedMessage
-            id="xpack.ingestManager.createDatasource.confirmModalTitle"
+            id="xpack.ingestManager.agentConfig.confirmModalTitle"
             defaultMessage="Save and deploy changes"
           />
         }
@@ -29,13 +29,13 @@ export const ConfirmCreateDatasourceModal: React.FunctionComponent<{
         onConfirm={onConfirm}
         cancelButtonText={
           <FormattedMessage
-            id="xpack.ingestManager.deleteApiKeys.confirmModal.cancelButtonLabel"
+            id="xpack.ingestManager.agentConfig.confirmModalCancelButtonLabel"
             defaultMessage="Cancel"
           />
         }
         confirmButtonText={
           <FormattedMessage
-            id="xpack.ingestManager.createDatasource.confirmModalConfirmButtonLabel"
+            id="xpack.ingestManager.agentConfig.confirmModalConfirmButtonLabel"
             defaultMessage="Save and deploy changes"
           />
         }
@@ -43,7 +43,7 @@ export const ConfirmCreateDatasourceModal: React.FunctionComponent<{
       >
         <EuiCallOut
           iconType="iInCircle"
-          title={i18n.translate('xpack.ingestManager.createDatasource.confirmModalCalloutTitle', {
+          title={i18n.translate('xpack.ingestManager.agentConfig.confirmModalCalloutTitle', {
             defaultMessage:
               'This action will update {agentCount, plural, one {# agent} other {# agents}}',
             values: {
@@ -52,7 +52,7 @@ export const ConfirmCreateDatasourceModal: React.FunctionComponent<{
           })}
         >
           <FormattedMessage
-            id="xpack.ingestManager.createDatasource.confirmModalCalloutDescription"
+            id="xpack.ingestManager.agentConfig.confirmModalCalloutDescription"
             defaultMessage="Fleet has detected that the selected agent configuration, {configName}, is already in use by
             some of your agents. As a result of this action, Fleet will deploy updates to all agents
             that use this configuration."
@@ -63,7 +63,7 @@ export const ConfirmCreateDatasourceModal: React.FunctionComponent<{
         </EuiCallOut>
         <EuiSpacer size="l" />
         <FormattedMessage
-          id="xpack.ingestManager.createDatasource.confirmModalDescription"
+          id="xpack.ingestManager.agentConfig.confirmModalDescription"
           defaultMessage="This action can not be undone. Are you sure you wish to continue?"
         />
       </EuiConfirmModal>
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/components/index.ts b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/components/index.ts
index a0fdc656dd7ed1..c1811b99588a82 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/components/index.ts
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/components/index.ts
@@ -7,3 +7,4 @@
 export { AgentConfigForm, agentConfigFormValidation } from './config_form';
 export { AgentConfigDeleteProvider } from './config_delete_provider';
 export { LinkedAgentCount } from './linked_agent_count';
+export { ConfirmDeployConfigModal } from './confirm_deploy_modal';
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/components/linked_agent_count.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/components/linked_agent_count.tsx
index ec66108c60f680..3860439f26d44a 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/components/linked_agent_count.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/components/linked_agent_count.tsx
@@ -8,7 +8,7 @@ import React, { memo } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiLink } from '@elastic/eui';
 import { useLink } from '../../../hooks';
-import { FLEET_AGENTS_PATH } from '../../../constants';
+import { FLEET_AGENTS_PATH, AGENT_SAVED_OBJECT_TYPE } from '../../../constants';
 
 export const LinkedAgentCount = memo<{ count: number; agentConfigId: string }>(
   ({ count, agentConfigId }) => {
@@ -21,7 +21,7 @@ export const LinkedAgentCount = memo<{ count: number; agentConfigId: string }>(
       />
     );
     return count > 0 ? (
-      <EuiLink href={`${FLEET_URI}?kuery=agents.config_id : ${agentConfigId}`}>
+      <EuiLink href={`${FLEET_URI}?kuery=${AGENT_SAVED_OBJECT_TYPE}.config_id : ${agentConfigId}`}>
         {displayValue}
       </EuiLink>
     ) : (
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/index.ts b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/index.ts
index aa564690a6092f..3bfca756689115 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/index.ts
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/index.ts
@@ -5,5 +5,4 @@
  */
 export { CreateDatasourcePageLayout } from './layout';
 export { DatasourceInputPanel } from './datasource_input_panel';
-export { ConfirmCreateDatasourceModal } from './confirm_modal';
 export { DatasourceInputVarField } from './datasource_input_var_field';
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/index.tsx
index 8e7042c1275ad9..5b7553dd8cf92e 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/index.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/index.tsx
@@ -27,7 +27,8 @@ import {
   sendGetAgentStatus,
 } from '../../../hooks';
 import { useLinks as useEPMLinks } from '../../epm/hooks';
-import { CreateDatasourcePageLayout, ConfirmCreateDatasourceModal } from './components';
+import { ConfirmDeployConfigModal } from '../components';
+import { CreateDatasourcePageLayout } from './components';
 import { CreateDatasourceFrom, DatasourceFormState } from './types';
 import { DatasourceValidationResults, validateDatasource, validationHasErrors } from './services';
 import { StepSelectPackage } from './step_select_package';
@@ -36,7 +37,10 @@ import { StepConfigureDatasource } from './step_configure_datasource';
 import { StepDefineDatasource } from './step_define_datasource';
 
 export const CreateDatasourcePage: React.FunctionComponent = () => {
-  const { notifications } = useCore();
+  const {
+    notifications,
+    chrome: { getIsNavDrawerLocked$ },
+  } = useCore();
   const {
     fleet: { enabled: isFleetEnabled },
   } = useConfig();
@@ -45,6 +49,15 @@ export const CreateDatasourcePage: React.FunctionComponent = () => {
   } = useRouteMatch();
   const history = useHistory();
   const from: CreateDatasourceFrom = configId ? 'config' : 'package';
+  const [isNavDrawerLocked, setIsNavDrawerLocked] = useState(false);
+
+  useEffect(() => {
+    const subscription = getIsNavDrawerLocked$().subscribe((newIsNavDrawerLocked: boolean) => {
+      setIsNavDrawerLocked(newIsNavDrawerLocked);
+    });
+
+    return () => subscription.unsubscribe();
+  });
 
   // Agent config and package info states
   const [agentConfig, setAgentConfig] = useState<AgentConfig>();
@@ -269,7 +282,7 @@ export const CreateDatasourcePage: React.FunctionComponent = () => {
   return (
     <CreateDatasourcePageLayout {...layoutProps}>
       {formState === 'CONFIRM' && agentConfig && (
-        <ConfirmCreateDatasourceModal
+        <ConfirmDeployConfigModal
           agentCount={agentCount}
           agentConfig={agentConfig}
           onConfirm={onSubmit}
@@ -278,7 +291,14 @@ export const CreateDatasourcePage: React.FunctionComponent = () => {
       )}
       <EuiSteps steps={steps} />
       <EuiSpacer size="l" />
-      <EuiBottomBar css={{ zIndex: 5 }} paddingSize="s">
+      <EuiBottomBar
+        css={{ zIndex: 5 }}
+        className={
+          isNavDrawerLocked
+            ? 'ingestManager__bottomBar-isNavDrawerLocked'
+            : 'ingestManager__bottomBar'
+        }
+      >
         <EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
           <EuiFlexItem grow={false}>
             <EuiButtonEmpty color="ghost" href={cancelUrl}>
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/config_form.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/config_form.tsx
deleted file mode 100644
index c4f8d944ceb142..00000000000000
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/config_form.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import React, { useState } from 'react';
-import { EuiFieldText, EuiForm, EuiFormRow } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
-import { AgentConfig } from '../../../../types';
-
-interface ValidationResults {
-  [key: string]: JSX.Element[];
-}
-
-export const configFormValidation = (config: Partial<AgentConfig>): ValidationResults => {
-  const errors: ValidationResults = {};
-
-  if (!config.name?.trim()) {
-    errors.name = [
-      <FormattedMessage
-        id="xpack.ingestManager.configForm.nameRequiredErrorMessage"
-        defaultMessage="Config name is required"
-      />,
-    ];
-  }
-
-  return errors;
-};
-
-interface Props {
-  config: Partial<AgentConfig>;
-  updateConfig: (u: Partial<AgentConfig>) => void;
-  validation: ValidationResults;
-}
-
-export const ConfigForm: React.FunctionComponent<Props> = ({
-  config,
-  updateConfig,
-  validation,
-}) => {
-  const [touchedFields, setTouchedFields] = useState<{ [key: string]: boolean }>({});
-  const fields: Array<{ name: 'name' | 'description' | 'namespace'; label: JSX.Element }> = [
-    {
-      name: 'name',
-      label: (
-        <FormattedMessage
-          id="xpack.ingestManager.configForm.nameFieldLabel"
-          defaultMessage="Name"
-        />
-      ),
-    },
-    {
-      name: 'description',
-      label: (
-        <FormattedMessage
-          id="xpack.ingestManager.configForm.descriptionFieldLabel"
-          defaultMessage="Description"
-        />
-      ),
-    },
-    {
-      name: 'namespace',
-      label: (
-        <FormattedMessage
-          id="xpack.ingestManager.configForm.namespaceFieldLabel"
-          defaultMessage="Namespace"
-        />
-      ),
-    },
-  ];
-
-  return (
-    <EuiForm>
-      {fields.map(({ name, label }) => {
-        return (
-          <EuiFormRow
-            key={name}
-            label={label}
-            error={touchedFields[name] && validation[name] ? validation[name] : null}
-            isInvalid={Boolean(touchedFields[name] && validation[name])}
-          >
-            <EuiFieldText
-              value={config[name]}
-              onChange={e => updateConfig({ [name]: e.target.value })}
-              isInvalid={Boolean(touchedFields[name] && validation[name])}
-              onBlur={() => setTouchedFields({ ...touchedFields, [name]: true })}
-            />
-          </EuiFormRow>
-        );
-      })}
-    </EuiForm>
-  );
-};
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/donut_chart.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/donut_chart.tsx
deleted file mode 100644
index 408ccc6e951f68..00000000000000
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/donut_chart.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import React, { useEffect, useRef } from 'react';
-import d3 from 'd3';
-import { EuiFlexItem } from '@elastic/eui';
-
-interface DonutChartProps {
-  data: {
-    [key: string]: number;
-  };
-  height: number;
-  width: number;
-}
-
-export const DonutChart = ({ height, width, data }: DonutChartProps) => {
-  const chartElement = useRef<SVGSVGElement | null>(null);
-
-  useEffect(() => {
-    if (chartElement.current !== null) {
-      // we must remove any existing paths before painting
-      d3.selectAll('g').remove();
-      const svgElement = d3
-        .select(chartElement.current)
-        .append('g')
-        .attr('transform', `translate(${width / 2}, ${height / 2})`);
-      const color = d3.scale
-        .ordinal()
-        // @ts-ignore
-        .domain(data)
-        .range(['#017D73', '#98A2B3', '#BD271E']);
-      const pieGenerator = d3.layout
-        .pie()
-        .value(({ value }: any) => value)
-        // these start/end angles will reverse the direction of the pie,
-        // which matches our design
-        .startAngle(2 * Math.PI)
-        .endAngle(0);
-
-      svgElement
-        .selectAll('g')
-        // @ts-ignore
-        .data(pieGenerator(d3.entries(data)))
-        .enter()
-        .append('path')
-        .attr(
-          'd',
-          // @ts-ignore attr does not expect a param of type Arc<Arc> but it behaves as desired
-          d3.svg
-            .arc()
-            .innerRadius(width * 0.28)
-            .outerRadius(Math.min(width, height) / 2 - 10)
-        )
-        .attr('fill', (d: any) => color(d.data.key));
-    }
-  }, [data, height, width]);
-  return (
-    <EuiFlexItem grow={false}>
-      <svg ref={chartElement} width={width} height={height} />
-    </EuiFlexItem>
-  );
-};
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/edit_config.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/edit_config.tsx
deleted file mode 100644
index 65eb86d7d871f2..00000000000000
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/edit_config.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-import React, { useState } from 'react';
-import {
-  EuiFlyout,
-  EuiFlyoutHeader,
-  EuiTitle,
-  EuiFlyoutBody,
-  EuiFlyoutFooter,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiButtonEmpty,
-  EuiButton,
-} from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n/react';
-import { useCore, sendRequest } from '../../../../hooks';
-import { agentConfigRouteService } from '../../../../services';
-import { AgentConfig } from '../../../../types';
-import { ConfigForm, configFormValidation } from './config_form';
-
-interface Props {
-  agentConfig: AgentConfig;
-  onClose: () => void;
-}
-
-export const EditConfigFlyout: React.FunctionComponent<Props> = ({
-  agentConfig: originalAgentConfig,
-  onClose,
-}) => {
-  const { notifications } = useCore();
-  const [config, setConfig] = useState<Partial<AgentConfig>>({
-    name: originalAgentConfig.name,
-    description: originalAgentConfig.description,
-  });
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const updateConfig = (updatedFields: Partial<AgentConfig>) => {
-    setConfig({
-      ...config,
-      ...updatedFields,
-    });
-  };
-  const validation = configFormValidation(config);
-
-  const header = (
-    <EuiFlyoutHeader hasBorder aria-labelledby="FleetEditConfigFlyoutTitle">
-      <EuiTitle size="m">
-        <h2 id="FleetEditConfigFlyoutTitle">
-          <FormattedMessage
-            id="xpack.ingestManager.editConfig.flyoutTitle"
-            defaultMessage="Edit config"
-          />
-        </h2>
-      </EuiTitle>
-    </EuiFlyoutHeader>
-  );
-
-  const body = (
-    <EuiFlyoutBody>
-      <ConfigForm config={config} updateConfig={updateConfig} validation={validation} />
-    </EuiFlyoutBody>
-  );
-
-  const footer = (
-    <EuiFlyoutFooter>
-      <EuiFlexGroup justifyContent="spaceBetween">
-        <EuiFlexItem grow={false}>
-          <EuiButtonEmpty iconType="cross" onClick={onClose} flush="left">
-            <FormattedMessage
-              id="xpack.ingestManager.editConfig.cancelButtonLabel"
-              defaultMessage="Cancel"
-            />
-          </EuiButtonEmpty>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiButton
-            fill
-            isLoading={isLoading}
-            disabled={isLoading || Object.keys(validation).length > 0}
-            onClick={async () => {
-              setIsLoading(true);
-              try {
-                const { error } = await sendRequest({
-                  path: agentConfigRouteService.getUpdatePath(originalAgentConfig.id),
-                  method: 'put',
-                  body: JSON.stringify(config),
-                });
-                if (!error) {
-                  notifications.toasts.addSuccess(
-                    i18n.translate('xpack.ingestManager.editConfig.successNotificationTitle', {
-                      defaultMessage: "Agent config '{name}' updated",
-                      values: { name: config.name },
-                    })
-                  );
-                } else {
-                  notifications.toasts.addDanger(
-                    error
-                      ? error.message
-                      : i18n.translate('xpack.ingestManager.editConfig.errorNotificationTitle', {
-                          defaultMessage: 'Unable to update agent config',
-                        })
-                  );
-                }
-              } catch (e) {
-                notifications.toasts.addDanger(
-                  i18n.translate('xpack.ingestManager.editConfig.errorNotificationTitle', {
-                    defaultMessage: 'Unable to update agent config',
-                  })
-                );
-              }
-              setIsLoading(false);
-              onClose();
-            }}
-          >
-            <FormattedMessage
-              id="xpack.ingestManager.editConfig.submitButtonLabel"
-              defaultMessage="Update"
-            />
-          </EuiButton>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiFlyoutFooter>
-  );
-
-  return (
-    <EuiFlyout onClose={onClose} size="m" maxWidth={400}>
-      {header}
-      {body}
-      {footer}
-    </EuiFlyout>
-  );
-};
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/index.ts b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/index.ts
index 918b361a60d790..0123bd46c16e7e 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/index.ts
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/index.ts
@@ -4,5 +4,3 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 export { DatasourcesTable } from './datasources/datasources_table';
-export { DonutChart } from './donut_chart';
-export { EditConfigFlyout } from './edit_config';
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/settings/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/settings/index.tsx
new file mode 100644
index 00000000000000..2d9d29bfc1ac7e
--- /dev/null
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/settings/index.tsx
@@ -0,0 +1,216 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React, { memo, useState, useEffect } from 'react';
+import { useHistory } from 'react-router-dom';
+import styled from 'styled-components';
+import { EuiBottomBar, EuiFlexGroup, EuiFlexItem, EuiButtonEmpty, EuiButton } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { AGENT_CONFIG_PATH } from '../../../../../constants';
+import { AgentConfig } from '../../../../../types';
+import {
+  useCore,
+  useCapabilities,
+  sendUpdateAgentConfig,
+  useConfig,
+  sendGetAgentStatus,
+} from '../../../../../hooks';
+import {
+  AgentConfigForm,
+  agentConfigFormValidation,
+  ConfirmDeployConfigModal,
+} from '../../../components';
+import { useConfigRefresh } from '../../hooks';
+
+const FormWrapper = styled.div`
+  max-width: 800px;
+  margin-right: auto;
+  margin-left: auto;
+`;
+
+export const ConfigSettingsView = memo<{ config: AgentConfig }>(
+  ({ config: originalAgentConfig }) => {
+    const {
+      notifications,
+      chrome: { getIsNavDrawerLocked$ },
+    } = useCore();
+    const {
+      fleet: { enabled: isFleetEnabled },
+    } = useConfig();
+    const history = useHistory();
+    const hasWriteCapabilites = useCapabilities().write;
+    const refreshConfig = useConfigRefresh();
+    const [isNavDrawerLocked, setIsNavDrawerLocked] = useState(false);
+    const [agentConfig, setAgentConfig] = useState<AgentConfig>({
+      ...originalAgentConfig,
+    });
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [hasChanges, setHasChanges] = useState<boolean>(false);
+    const [agentCount, setAgentCount] = useState<number>(0);
+    const [withSysMonitoring, setWithSysMonitoring] = useState<boolean>(true);
+    const validation = agentConfigFormValidation(agentConfig);
+
+    useEffect(() => {
+      const subscription = getIsNavDrawerLocked$().subscribe((newIsNavDrawerLocked: boolean) => {
+        setIsNavDrawerLocked(newIsNavDrawerLocked);
+      });
+
+      return () => subscription.unsubscribe();
+    });
+
+    const updateAgentConfig = (updatedFields: Partial<AgentConfig>) => {
+      setAgentConfig({
+        ...agentConfig,
+        ...updatedFields,
+      });
+      setHasChanges(true);
+    };
+
+    const submitUpdateAgentConfig = async () => {
+      setIsLoading(true);
+      try {
+        const { name, description, namespace, monitoring_enabled } = agentConfig;
+        const { data, error } = await sendUpdateAgentConfig(agentConfig.id, {
+          name,
+          description,
+          namespace,
+          monitoring_enabled,
+        });
+        if (data?.success) {
+          notifications.toasts.addSuccess(
+            i18n.translate('xpack.ingestManager.editAgentConfig.successNotificationTitle', {
+              defaultMessage: "Successfully updated '{name}' settings",
+              values: { name: agentConfig.name },
+            })
+          );
+          refreshConfig();
+          setHasChanges(false);
+        } else {
+          notifications.toasts.addDanger(
+            error
+              ? error.message
+              : i18n.translate('xpack.ingestManager.editAgentConfig.errorNotificationTitle', {
+                  defaultMessage: 'Unable to update agent config',
+                })
+          );
+        }
+      } catch (e) {
+        notifications.toasts.addDanger(
+          i18n.translate('xpack.ingestManager.editAgentConfig.errorNotificationTitle', {
+            defaultMessage: 'Unable to update agent config',
+          })
+        );
+      }
+      setIsLoading(false);
+    };
+
+    const onSubmit = async () => {
+      // Retrieve agent count if fleet is enabled
+      if (isFleetEnabled) {
+        setIsLoading(true);
+        const { data } = await sendGetAgentStatus({ configId: agentConfig.id });
+        if (data?.results.total) {
+          setAgentCount(data.results.total);
+        } else {
+          await submitUpdateAgentConfig();
+        }
+      } else {
+        await submitUpdateAgentConfig();
+      }
+    };
+
+    return (
+      <FormWrapper>
+        {agentCount ? (
+          <ConfirmDeployConfigModal
+            agentCount={agentCount}
+            agentConfig={agentConfig}
+            onConfirm={() => {
+              setAgentCount(0);
+              submitUpdateAgentConfig();
+            }}
+            onCancel={() => {
+              setAgentCount(0);
+              setIsLoading(false);
+            }}
+          />
+        ) : null}
+        <AgentConfigForm
+          agentConfig={agentConfig}
+          updateAgentConfig={updateAgentConfig}
+          withSysMonitoring={withSysMonitoring}
+          updateSysMonitoring={newValue => setWithSysMonitoring(newValue)}
+          validation={validation}
+          isEditing={true}
+          onDelete={() => {
+            history.push(AGENT_CONFIG_PATH);
+          }}
+        />
+        {hasChanges ? (
+          <EuiBottomBar
+            css={{ zIndex: 5 }}
+            className={
+              isNavDrawerLocked
+                ? 'ingestManager__bottomBar-isNavDrawerLocked'
+                : 'ingestManager__bottomBar'
+            }
+          >
+            <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+              <EuiFlexItem>
+                <FormattedMessage
+                  id="xpack.ingestManager.editAgentConfig.unsavedChangesText"
+                  defaultMessage="You have unsaved changes"
+                />
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
+                  <EuiFlexItem grow={false}>
+                    <EuiButtonEmpty
+                      color="ghost"
+                      onClick={() => {
+                        setAgentConfig({ ...originalAgentConfig });
+                        setHasChanges(false);
+                      }}
+                    >
+                      <FormattedMessage
+                        id="xpack.ingestManager.editAgentConfig.cancelButtonText"
+                        defaultMessage="Cancel"
+                      />
+                    </EuiButtonEmpty>
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    <EuiButton
+                      onClick={onSubmit}
+                      isLoading={isLoading}
+                      isDisabled={
+                        !hasWriteCapabilites || isLoading || Object.keys(validation).length > 0
+                      }
+                      iconType="save"
+                      color="primary"
+                      fill
+                    >
+                      {isLoading ? (
+                        <FormattedMessage
+                          id="xpack.ingestManager.editAgentConfig.savingButtonText"
+                          defaultMessage="Saving…"
+                        />
+                      ) : (
+                        <FormattedMessage
+                          id="xpack.ingestManager.editAgentConfig.saveButtonText"
+                          defaultMessage="Save changes"
+                        />
+                      )}
+                    </EuiButton>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiBottomBar>
+        ) : null}
+      </FormWrapper>
+    );
+  }
+);
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/yaml/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/yaml/index.tsx
index f1d7bd5dbc0396..9f2088521ed389 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/yaml/index.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/yaml/index.tsx
@@ -15,7 +15,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
 } from '@elastic/eui';
-import { AgentConfig } from '../../../../../../../../common/types/models';
+import { AgentConfig } from '../../../../../types';
 import {
   useGetOneAgentConfigFull,
   useGetEnrollmentAPIKeys,
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/hooks/index.ts b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/hooks/index.ts
index 19be93676a7346..76c6d64eb9e07a 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/hooks/index.ts
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/hooks/index.ts
@@ -4,4 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 export { useGetAgentStatus, AgentStatusRefreshContext } from './use_agent_status';
-export { ConfigRefreshContext } from './use_config';
+export { ConfigRefreshContext, useConfigRefresh } from './use_config';
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/index.tsx
index 450f86df5c03aa..20a39724ce23c7 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/index.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/index.tsx
@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React, { Fragment, memo, useCallback, useMemo, useState } from 'react';
+import React, { Fragment, memo, useMemo, useState } from 'react';
 import { Redirect, useRouteMatch, Switch, Route } from 'react-router-dom';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage, FormattedDate } from '@kbn/i18n/react';
@@ -26,12 +26,12 @@ import { useGetOneAgentConfig } from '../../../hooks';
 import { Loading } from '../../../components';
 import { WithHeaderLayout } from '../../../layouts';
 import { ConfigRefreshContext, useGetAgentStatus, AgentStatusRefreshContext } from './hooks';
-import { EditConfigFlyout } from './components';
 import { LinkedAgentCount } from '../components';
 import { useAgentConfigLink } from './hooks/use_details_uri';
 import { DETAILS_ROUTER_PATH, DETAILS_ROUTER_SUB_PATH } from './constants';
 import { ConfigDatasourcesView } from './components/datasources';
 import { ConfigYamlView } from './components/yaml';
+import { ConfigSettingsView } from './components/settings';
 
 const Divider = styled.div`
   width: 0;
@@ -70,14 +70,6 @@ export const AgentConfigDetailsLayout: React.FunctionComponent = () => {
   const configDetailsYamlLink = useAgentConfigLink('details-yaml', { configId });
   const configDetailsSettingsLink = useAgentConfigLink('details-settings', { configId });
 
-  // Flyout states
-  const [isEditConfigFlyoutOpen, setIsEditConfigFlyoutOpen] = useState<boolean>(false);
-
-  const refreshData = useCallback(() => {
-    refreshAgentConfig();
-    refreshAgentStatus();
-  }, [refreshAgentConfig, refreshAgentStatus]);
-
   const headerLeftContent = useMemo(
     () => (
       <React.Fragment>
@@ -196,7 +188,7 @@ export const AgentConfigDetailsLayout: React.FunctionComponent = () => {
     return [
       {
         id: 'datasources',
-        name: i18n.translate('xpack.ingestManager.configDetails.subTabs.datasouces', {
+        name: i18n.translate('xpack.ingestManager.configDetails.subTabs.datasourcesTabText', {
           defaultMessage: 'Data sources',
         }),
         href: configDetailsLink,
@@ -204,15 +196,15 @@ export const AgentConfigDetailsLayout: React.FunctionComponent = () => {
       },
       {
         id: 'yaml',
-        name: i18n.translate('xpack.ingestManager.configDetails.subTabs.yamlFile', {
-          defaultMessage: 'YAML File',
+        name: i18n.translate('xpack.ingestManager.configDetails.subTabs.yamlTabText', {
+          defaultMessage: 'YAML',
         }),
         href: configDetailsYamlLink,
         isSelected: tabId === 'yaml',
       },
       {
         id: 'settings',
-        name: i18n.translate('xpack.ingestManager.configDetails.subTabs.settings', {
+        name: i18n.translate('xpack.ingestManager.configDetails.subTabs.settingsTabText', {
           defaultMessage: 'Settings',
         }),
         href: configDetailsSettingsLink,
@@ -269,16 +261,6 @@ export const AgentConfigDetailsLayout: React.FunctionComponent = () => {
           rightColumn={headerRightContent}
           tabs={(headerTabs as unknown) as EuiTabProps[]}
         >
-          {isEditConfigFlyoutOpen ? (
-            <EditConfigFlyout
-              onClose={() => {
-                setIsEditConfigFlyoutOpen(false);
-                refreshData();
-              }}
-              agentConfig={agentConfig}
-            />
-          ) : null}
-
           <Switch>
             <Route
               path={`${DETAILS_ROUTER_PATH}/yaml`}
@@ -289,8 +271,7 @@ export const AgentConfigDetailsLayout: React.FunctionComponent = () => {
             <Route
               path={`${DETAILS_ROUTER_PATH}/settings`}
               render={() => {
-                // TODO: Settings implementation tracked via: https://github.com/elastic/kibana/issues/57959
-                return <div>Settings placeholder</div>;
+                return <ConfigSettingsView config={agentConfig} />;
               }}
             />
             <Route
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/edit_datasource_page/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/edit_datasource_page/index.tsx
index d4c39f21a1ea6c..5f3d59ad60f1f4 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/edit_datasource_page/index.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/edit_datasource_page/index.tsx
@@ -29,10 +29,8 @@ import {
   sendGetPackageInfoByKey,
 } from '../../../hooks';
 import { Loading, Error } from '../../../components';
-import {
-  CreateDatasourcePageLayout,
-  ConfirmCreateDatasourceModal,
-} from '../create_datasource_page/components';
+import { ConfirmDeployConfigModal } from '../components';
+import { CreateDatasourcePageLayout } from '../create_datasource_page/components';
 import {
   DatasourceValidationResults,
   validateDatasource,
@@ -243,7 +241,7 @@ export const EditDatasourcePage: React.FunctionComponent = () => {
       ) : (
         <>
           {formState === 'CONFIRM' && (
-            <ConfirmCreateDatasourceModal
+            <ConfirmDeployConfigModal
               agentCount={agentCount}
               agentConfig={agentConfig}
               onConfirm={onSubmit}
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/index.scss b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/index.scss
deleted file mode 100644
index 10e809c5f5566b..00000000000000
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/index.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.fleet__agentList__table .euiTableFooterCell {
-  .euiTableCellContent,
-  .euiTableCellContent__text {
-    overflow: visible;
-  }
-}
\ No newline at end of file
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/donut_chart.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/donut_chart.tsx
similarity index 100%
rename from x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/donut_chart.tsx
rename to x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/donut_chart.tsx
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/list_layout.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/list_layout.tsx
index 61306e823f2a88..a1786d596b7915 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/list_layout.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/list_layout.tsx
@@ -19,12 +19,12 @@ import {
 } from '@elastic/eui';
 import { Props as EuiTabProps } from '@elastic/eui/src/components/tabs/tab';
 import { useRouteMatch } from 'react-router-dom';
-import { DonutChart } from '../agent_list_page/components/donut_chart';
-import { useGetAgentStatus } from '../../agent_config/details_page/hooks';
-import { useCapabilities, useLink, useGetAgentConfigs } from '../../../hooks';
 import { WithHeaderLayout } from '../../../layouts';
 import { FLEET_ENROLLMENT_TOKENS_PATH, FLEET_AGENTS_PATH } from '../../../constants';
+import { useCapabilities, useLink, useGetAgentConfigs } from '../../../hooks';
+import { useGetAgentStatus } from '../../agent_config/details_page/hooks';
 import { AgentEnrollmentFlyout } from '../agent_list_page/components';
+import { DonutChart } from './donut_chart';
 
 const REFRESH_INTERVAL_MS = 5000;
 
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/types/index.ts b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/types/index.ts
index d6483479a3f2fe..25b03601ae5c88 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/types/index.ts
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/types/index.ts
@@ -28,8 +28,8 @@ export {
   CreateAgentConfigResponse,
   UpdateAgentConfigRequest,
   UpdateAgentConfigResponse,
-  DeleteAgentConfigsRequest,
-  DeleteAgentConfigsResponse,
+  DeleteAgentConfigRequest,
+  DeleteAgentConfigResponse,
   // API schemas - Datasource
   CreateDatasourceRequest,
   CreateDatasourceResponse,
diff --git a/x-pack/plugins/ingest_manager/server/routes/agent_config/handlers.ts b/x-pack/plugins/ingest_manager/server/routes/agent_config/handlers.ts
index 69f14854cdd0fc..023d465c9cda90 100644
--- a/x-pack/plugins/ingest_manager/server/routes/agent_config/handlers.ts
+++ b/x-pack/plugins/ingest_manager/server/routes/agent_config/handlers.ts
@@ -14,7 +14,7 @@ import {
   GetOneAgentConfigRequestSchema,
   CreateAgentConfigRequestSchema,
   UpdateAgentConfigRequestSchema,
-  DeleteAgentConfigsRequestSchema,
+  DeleteAgentConfigRequestSchema,
   GetFullAgentConfigRequestSchema,
   AgentConfig,
   DefaultPackages,
@@ -26,7 +26,7 @@ import {
   GetOneAgentConfigResponse,
   CreateAgentConfigResponse,
   UpdateAgentConfigResponse,
-  DeleteAgentConfigsResponse,
+  DeleteAgentConfigResponse,
   GetFullAgentConfigResponse,
 } from '../../../common';
 
@@ -49,7 +49,7 @@ export const getAgentConfigsHandler: RequestHandler<
       items,
       (agentConfig: GetAgentConfigsResponseItem) =>
         listAgents(soClient, {
-          showInactive: true,
+          showInactive: false,
           perPage: 0,
           page: 1,
           kuery: `${AGENT_SAVED_OBJECT_TYPE}.config_id:${agentConfig.id}`,
@@ -179,13 +179,13 @@ export const updateAgentConfigHandler: RequestHandler<
 export const deleteAgentConfigsHandler: RequestHandler<
   unknown,
   unknown,
-  TypeOf<typeof DeleteAgentConfigsRequestSchema.body>
+  TypeOf<typeof DeleteAgentConfigRequestSchema.body>
 > = async (context, request, response) => {
   const soClient = context.core.savedObjects.client;
   try {
-    const body: DeleteAgentConfigsResponse = await agentConfigService.delete(
+    const body: DeleteAgentConfigResponse = await agentConfigService.delete(
       soClient,
-      request.body.agentConfigIds
+      request.body.agentConfigId
     );
     return response.ok({
       body,
diff --git a/x-pack/plugins/ingest_manager/server/routes/agent_config/index.ts b/x-pack/plugins/ingest_manager/server/routes/agent_config/index.ts
index b8e827974ff81a..e630f3c9595903 100644
--- a/x-pack/plugins/ingest_manager/server/routes/agent_config/index.ts
+++ b/x-pack/plugins/ingest_manager/server/routes/agent_config/index.ts
@@ -10,7 +10,7 @@ import {
   GetOneAgentConfigRequestSchema,
   CreateAgentConfigRequestSchema,
   UpdateAgentConfigRequestSchema,
-  DeleteAgentConfigsRequestSchema,
+  DeleteAgentConfigRequestSchema,
   GetFullAgentConfigRequestSchema,
 } from '../../types';
 import {
@@ -67,7 +67,7 @@ export const registerRoutes = (router: IRouter) => {
   router.post(
     {
       path: AGENT_CONFIG_API_ROUTES.DELETE_PATTERN,
-      validate: DeleteAgentConfigsRequestSchema,
+      validate: DeleteAgentConfigRequestSchema,
       options: { tags: [`access:${PLUGIN_ID}-all`] },
     },
     deleteAgentConfigsHandler
diff --git a/x-pack/plugins/ingest_manager/server/services/agent_config.ts b/x-pack/plugins/ingest_manager/server/services/agent_config.ts
index 7ab6ef1920c18a..5ecbaff8ad71e1 100644
--- a/x-pack/plugins/ingest_manager/server/services/agent_config.ts
+++ b/x-pack/plugins/ingest_manager/server/services/agent_config.ts
@@ -6,7 +6,11 @@
 import { uniq } from 'lodash';
 import { SavedObjectsClientContract } from 'src/core/server';
 import { AuthenticatedUser } from '../../../security/server';
-import { DEFAULT_AGENT_CONFIG, AGENT_CONFIG_SAVED_OBJECT_TYPE } from '../constants';
+import {
+  DEFAULT_AGENT_CONFIG,
+  AGENT_CONFIG_SAVED_OBJECT_TYPE,
+  AGENT_SAVED_OBJECT_TYPE,
+} from '../constants';
 import {
   Datasource,
   NewAgentConfig,
@@ -15,7 +19,8 @@ import {
   AgentConfigStatus,
   ListWithKuery,
 } from '../types';
-import { DeleteAgentConfigsResponse, storedDatasourceToAgentDatasource } from '../../common';
+import { DeleteAgentConfigResponse, storedDatasourceToAgentDatasource } from '../../common';
+import { listAgents } from './agents';
 import { datasourceService } from './datasource';
 import { outputService } from './output';
 import { agentConfigUpdateEventHandler } from './agent_config_update';
@@ -256,32 +261,40 @@ class AgentConfigService {
 
   public async delete(
     soClient: SavedObjectsClientContract,
-    ids: string[]
-  ): Promise<DeleteAgentConfigsResponse> {
-    const result: DeleteAgentConfigsResponse = [];
-    const defaultConfigId = await this.getDefaultAgentConfigId(soClient);
+    id: string
+  ): Promise<DeleteAgentConfigResponse> {
+    const config = await this.get(soClient, id, false);
+    if (!config) {
+      throw new Error('Agent configuration not found');
+    }
 
-    if (ids.includes(defaultConfigId)) {
+    const defaultConfigId = await this.getDefaultAgentConfigId(soClient);
+    if (id === defaultConfigId) {
       throw new Error('The default agent configuration cannot be deleted');
     }
 
-    for (const id of ids) {
-      try {
-        await soClient.delete(SAVED_OBJECT_TYPE, id);
-        await this.triggerAgentConfigUpdatedEvent(soClient, 'deleted', id);
-        result.push({
-          id,
-          success: true,
-        });
-      } catch (e) {
-        result.push({
-          id,
-          success: false,
-        });
-      }
+    const { total } = await listAgents(soClient, {
+      showInactive: false,
+      perPage: 0,
+      page: 1,
+      kuery: `${AGENT_SAVED_OBJECT_TYPE}.config_id:${id}`,
+    });
+
+    if (total > 0) {
+      throw new Error('Cannot delete agent config that is assigned to agent(s)');
     }
 
-    return result;
+    if (config.datasources && config.datasources.length) {
+      await datasourceService.delete(soClient, config.datasources as string[], {
+        skipUnassignFromAgentConfigs: true,
+      });
+    }
+    await soClient.delete(SAVED_OBJECT_TYPE, id);
+    await this.triggerAgentConfigUpdatedEvent(soClient, 'deleted', id);
+    return {
+      id,
+      success: true,
+    };
   }
 
   public async getFullConfig(
diff --git a/x-pack/plugins/ingest_manager/server/services/datasource.ts b/x-pack/plugins/ingest_manager/server/services/datasource.ts
index 0a5ba43e40fba9..affd9b2755881a 100644
--- a/x-pack/plugins/ingest_manager/server/services/datasource.ts
+++ b/x-pack/plugins/ingest_manager/server/services/datasource.ts
@@ -145,7 +145,7 @@ class DatasourceService {
   public async delete(
     soClient: SavedObjectsClientContract,
     ids: string[],
-    options?: { user?: AuthenticatedUser }
+    options?: { user?: AuthenticatedUser; skipUnassignFromAgentConfigs?: boolean }
   ): Promise<DeleteDatasourcesResponse> {
     const result: DeleteDatasourcesResponse = [];
 
@@ -155,14 +155,16 @@ class DatasourceService {
         if (!oldDatasource) {
           throw new Error('Datasource not found');
         }
-        await agentConfigService.unassignDatasources(
-          soClient,
-          oldDatasource.config_id,
-          [oldDatasource.id],
-          {
-            user: options?.user,
-          }
-        );
+        if (!options?.skipUnassignFromAgentConfigs) {
+          await agentConfigService.unassignDatasources(
+            soClient,
+            oldDatasource.config_id,
+            [oldDatasource.id],
+            {
+              user: options?.user,
+            }
+          );
+        }
         await soClient.delete(SAVED_OBJECT_TYPE, id);
         result.push({
           id,
diff --git a/x-pack/plugins/ingest_manager/server/types/rest_spec/agent_config.ts b/x-pack/plugins/ingest_manager/server/types/rest_spec/agent_config.ts
index 0d223f028fc883..ab97ddc0ba7235 100644
--- a/x-pack/plugins/ingest_manager/server/types/rest_spec/agent_config.ts
+++ b/x-pack/plugins/ingest_manager/server/types/rest_spec/agent_config.ts
@@ -29,9 +29,9 @@ export const UpdateAgentConfigRequestSchema = {
   body: NewAgentConfigSchema,
 };
 
-export const DeleteAgentConfigsRequestSchema = {
+export const DeleteAgentConfigRequestSchema = {
   body: schema.object({
-    agentConfigIds: schema.arrayOf(schema.string()),
+    agentConfigId: schema.string(),
   }),
 };
 
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index a3011ab5bdfa9e..bf257d66a59bc2 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -8317,9 +8317,6 @@
     "xpack.ingestManager.configDetails.datasourcesTable.namespaceColumnTitle": "名前空間",
     "xpack.ingestManager.configDetails.datasourcesTable.packageNameColumnTitle": "パッケージ",
     "xpack.ingestManager.configDetails.datasourcesTable.streamsCountColumnTitle": "ストリーム",
-    "xpack.ingestManager.configDetails.subTabs.datasouces": "データソース",
-    "xpack.ingestManager.configDetails.subTabs.settings": "設定",
-    "xpack.ingestManager.configDetails.subTabs.yamlFile": "YAML ファイル",
     "xpack.ingestManager.configDetails.summary.datasources": "データソース",
     "xpack.ingestManager.configDetails.summary.lastUpdated": "最終更新日:",
     "xpack.ingestManager.configDetails.summary.revision": "リビジョン",
@@ -8329,10 +8326,6 @@
     "xpack.ingestManager.configDetailsDatasources.createFirstButtonText": "データソースを作成",
     "xpack.ingestManager.configDetailsDatasources.createFirstMessage": "この構成にはデータソースはまだありません。",
     "xpack.ingestManager.configDetailsDatasources.createFirstTitle": "初めてのデーソースを作成する",
-    "xpack.ingestManager.configForm.descriptionFieldLabel": "説明",
-    "xpack.ingestManager.configForm.nameFieldLabel": "名前",
-    "xpack.ingestManager.configForm.nameRequiredErrorMessage": "構成名が必要です",
-    "xpack.ingestManager.configForm.namespaceFieldLabel": "名前空間",
     "xpack.ingestManager.createAgentConfig.cancelButtonLabel": "キャンセル",
     "xpack.ingestManager.createAgentConfig.errorNotificationTitle": "エージェント構成を作成できません",
     "xpack.ingestManager.createAgentConfig.flyoutTitle": "エージェント構成を作成",
@@ -8364,20 +8357,6 @@
     "xpack.ingestManager.createDatasource.stepSelectPackage.errorLoadingPackagesTitle": "パッケージの読み込みエラー",
     "xpack.ingestManager.createDatasource.stepSelectPackage.errorLoadingSelectedPackageTitle": "選択したパッケージの読み込みエラー",
     "xpack.ingestManager.createDatasource.stepSelectPackage.filterPackagesInputPlaceholder": "パッケージの検索",
-    "xpack.ingestManager.deleteAgentConfigs.confirmModal.affectedAgentsMessage": "{agentsCount, plural, one {# エージェントを} other {# エージェントを}}{agentConfigsCount, plural, one {このエージェント構成に} other {これらのエージェント構成に}}割り当てました。 {agentsCount, plural, one {このエージェント} other {これらのエージェント}}の登録が解除されます。",
-    "xpack.ingestManager.deleteAgentConfigs.confirmModal.cancelButtonLabel": "キャンセル",
-    "xpack.ingestManager.deleteAgentConfigs.confirmModal.confirmAndReassignButtonLabel": "{agentConfigsCount, plural, one {エージェント構成} other {エージェント構成}} and unenroll {agentsCount, plural, one {エージェント} other {エージェント}} を削除",
-    "xpack.ingestManager.deleteAgentConfigs.confirmModal.confirmButtonLabel": "{agentConfigsCount, plural, one {エージェント構成} other {エージェント構成}}を削除",
-    "xpack.ingestManager.deleteAgentConfigs.confirmModal.deleteMultipleTitle": "{count, plural, one {this agent config} other {# agent configs}} を削除しますか？",
-    "xpack.ingestManager.deleteAgentConfigs.confirmModal.loadingAgentsCountMessage": "影響があるエージェントの数を確認中...",
-    "xpack.ingestManager.deleteAgentConfigs.confirmModal.loadingButtonLabel": "読み込み中...",
-    "xpack.ingestManager.deleteAgentConfigs.confirmModal.noAffectedAgentsMessage": "{agentConfigsCount, plural, one {this agent config} other {these agentConfigs}}に割り当てられたエージェントはありません。",
-    "xpack.ingestManager.deleteAgentConfigs.failureMultipleNotificationTitle": "{count} 件のエージェント構成の削除エラー",
-    "xpack.ingestManager.deleteAgentConfigs.failureSingleNotificationTitle": "エージェント構成「{id}」の削除エラー",
-    "xpack.ingestManager.deleteAgentConfigs.fatalErrorNotificationTitle": "エージェント構成の削除エラー",
-    "xpack.ingestManager.deleteAgentConfigs.successMultipleNotificationTitle": "{count} 件のエージェント構成を削除しました",
-    "xpack.ingestManager.deleteAgentConfigs.successSingleNotificationTitle": "エージェント構成「{id}」を削除しました",
-    "xpack.ingestManager.deleteApiKeys.confirmModal.cancelButtonLabel": "キャンセル",
     "xpack.ingestManager.deleteDatasource.confirmModal.affectedAgentsMessage": "{agentConfigName} が一部のエージェントで既に使用されていることをフリートが検出しました。",
     "xpack.ingestManager.deleteDatasource.confirmModal.affectedAgentsTitle": "このアクションは {agentsCount} {agentsCount, plural, one {# エージェント} other {# エージェント}}に影響します",
     "xpack.ingestManager.deleteDatasource.confirmModal.cancelButtonLabel": "キャンセル",
@@ -8393,11 +8372,6 @@
     "xpack.ingestManager.deleteDatasource.successSingleNotificationTitle": "データソース「{id}」を削除しました",
     "xpack.ingestManager.disabledSecurityDescription": "Elastic Fleet を使用するには、Kibana と Elasticsearch でセキュリティを有効にする必要があります。",
     "xpack.ingestManager.disabledSecurityTitle": "セキュリティが有効ではありません",
-    "xpack.ingestManager.editConfig.cancelButtonLabel": "キャンセル",
-    "xpack.ingestManager.editConfig.errorNotificationTitle": "エージェント構成を作成できません",
-    "xpack.ingestManager.editConfig.flyoutTitle": "構成を編集",
-    "xpack.ingestManager.editConfig.submitButtonLabel": "更新",
-    "xpack.ingestManager.editConfig.successNotificationTitle": "エージェント構成「{name}」を更新しました",
     "xpack.ingestManager.enrollmentApiKeyForm.namePlaceholder": "名前を選択",
     "xpack.ingestManager.enrollmentApiKeyList.createNewButton": "新規キーを作成",
     "xpack.ingestManager.enrollmentApiKeyList.useExistingsButton": "既存のキーを使用",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index e373d05a7d8516..323ddfda32d703 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -8320,9 +8320,6 @@
     "xpack.ingestManager.configDetails.datasourcesTable.namespaceColumnTitle": "命名空间",
     "xpack.ingestManager.configDetails.datasourcesTable.packageNameColumnTitle": "软件包",
     "xpack.ingestManager.configDetails.datasourcesTable.streamsCountColumnTitle": "流计数",
-    "xpack.ingestManager.configDetails.subTabs.datasouces": "数据源",
-    "xpack.ingestManager.configDetails.subTabs.settings": "设置",
-    "xpack.ingestManager.configDetails.subTabs.yamlFile": "YAML 文件",
     "xpack.ingestManager.configDetails.summary.datasources": "数据源",
     "xpack.ingestManager.configDetails.summary.lastUpdated": "最后更新时间",
     "xpack.ingestManager.configDetails.summary.revision": "修订",
@@ -8332,10 +8329,6 @@
     "xpack.ingestManager.configDetailsDatasources.createFirstButtonText": "创建数据源",
     "xpack.ingestManager.configDetailsDatasources.createFirstMessage": "此配置尚未有任何数据源。",
     "xpack.ingestManager.configDetailsDatasources.createFirstTitle": "创建您的首个数据源",
-    "xpack.ingestManager.configForm.descriptionFieldLabel": "描述",
-    "xpack.ingestManager.configForm.nameFieldLabel": "名称",
-    "xpack.ingestManager.configForm.nameRequiredErrorMessage": "配置名称必填",
-    "xpack.ingestManager.configForm.namespaceFieldLabel": "命名空间",
     "xpack.ingestManager.createAgentConfig.cancelButtonLabel": "取消",
     "xpack.ingestManager.createAgentConfig.errorNotificationTitle": "无法创建代理配置",
     "xpack.ingestManager.createAgentConfig.flyoutTitle": "创建代理配置",
@@ -8367,20 +8360,6 @@
     "xpack.ingestManager.createDatasource.stepSelectPackage.errorLoadingPackagesTitle": "加载软件包时出错",
     "xpack.ingestManager.createDatasource.stepSelectPackage.errorLoadingSelectedPackageTitle": "加载选定软件包时出错",
     "xpack.ingestManager.createDatasource.stepSelectPackage.filterPackagesInputPlaceholder": "搜索软件包",
-    "xpack.ingestManager.deleteAgentConfigs.confirmModal.affectedAgentsMessage": "{agentsCount, plural, one {# 个代理} other {# 个代理}}已分配{agentConfigsCount, plural, one {给此代理配置} other {给这些代理配置}}。将取消注册{agentsCount, plural, one {此代理} other {这些代理}}。",
-    "xpack.ingestManager.deleteAgentConfigs.confirmModal.cancelButtonLabel": "取消",
-    "xpack.ingestManager.deleteAgentConfigs.confirmModal.confirmAndReassignButtonLabel": "删除{agentConfigsCount, plural, one {代理配置} other {代理配置}}并取消注册{agentsCount, plural, one {代理} other {代理}}",
-    "xpack.ingestManager.deleteAgentConfigs.confirmModal.confirmButtonLabel": "删除{agentConfigsCount, plural, one {代理配置} other {代理配置}}",
-    "xpack.ingestManager.deleteAgentConfigs.confirmModal.deleteMultipleTitle": "删除{count, plural, one {此代理配置} other {# 个代理配置}}？",
-    "xpack.ingestManager.deleteAgentConfigs.confirmModal.loadingAgentsCountMessage": "正在检查受影响代理数量……",
-    "xpack.ingestManager.deleteAgentConfigs.confirmModal.loadingButtonLabel": "正在加载……",
-    "xpack.ingestManager.deleteAgentConfigs.confirmModal.noAffectedAgentsMessage": "没有代理分配给{agentConfigsCount, plural, one {此代理配置} other {这些代理配置}}。",
-    "xpack.ingestManager.deleteAgentConfigs.failureMultipleNotificationTitle": "删除 {count} 个代理配置时出错",
-    "xpack.ingestManager.deleteAgentConfigs.failureSingleNotificationTitle": "删除代理配置“{id}”时出错",
-    "xpack.ingestManager.deleteAgentConfigs.fatalErrorNotificationTitle": "删除代理配置时出错",
-    "xpack.ingestManager.deleteAgentConfigs.successMultipleNotificationTitle": "已删除 {count} 个代理配置",
-    "xpack.ingestManager.deleteAgentConfigs.successSingleNotificationTitle": "已删除代理配置“{id}”",
-    "xpack.ingestManager.deleteApiKeys.confirmModal.cancelButtonLabel": "取消",
     "xpack.ingestManager.deleteDatasource.confirmModal.affectedAgentsMessage": "Fleet 已检测到 {agentConfigName} 已由您的部分代理使用。",
     "xpack.ingestManager.deleteDatasource.confirmModal.affectedAgentsTitle": "此操作将影响 {agentsCount} 个 {agentsCount, plural, one {代理} other {代理}}。",
     "xpack.ingestManager.deleteDatasource.confirmModal.cancelButtonLabel": "取消",
@@ -8396,11 +8375,6 @@
     "xpack.ingestManager.deleteDatasource.successSingleNotificationTitle": "已删除数据源“{id}”",
     "xpack.ingestManager.disabledSecurityDescription": "必须在 Kibana 和 Elasticsearch 启用安全性，才能使用 Elastic Fleet。",
     "xpack.ingestManager.disabledSecurityTitle": "安全性未启用",
-    "xpack.ingestManager.editConfig.cancelButtonLabel": "取消",
-    "xpack.ingestManager.editConfig.errorNotificationTitle": "无法更新代理配置",
-    "xpack.ingestManager.editConfig.flyoutTitle": "编辑配置",
-    "xpack.ingestManager.editConfig.submitButtonLabel": "更新",
-    "xpack.ingestManager.editConfig.successNotificationTitle": "代理配置“{name}”已更新",
     "xpack.ingestManager.enrollmentApiKeyForm.namePlaceholder": "选择名称",
     "xpack.ingestManager.enrollmentApiKeyList.createNewButton": "创建新密钥",
     "xpack.ingestManager.enrollmentApiKeyList.useExistingsButton": "使用现有密钥",

From b93427b7b65662ae082b06a9f9fb4d77c3acb81d Mon Sep 17 00:00:00 2001
From: Tiago Costa <tiagoffcc@hotmail.com>
Date: Thu, 30 Apr 2020 19:35:20 +0100
Subject: [PATCH 08/11] chore(NA): ignore server watch for md and test.tsx
 files (#64797)

* chore(NA): avoid unnecessary server watches on md and test.tsx files

* chore(NA): include debug log files
---
 src/cli/cluster/cluster_manager.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/cli/cluster/cluster_manager.ts b/src/cli/cluster/cluster_manager.ts
index 32a23d74dbda44..f16ba61234a950 100644
--- a/src/cli/cluster/cluster_manager.ts
+++ b/src/cli/cluster/cluster_manager.ts
@@ -259,7 +259,9 @@ export class ClusterManager {
 
     const ignorePaths = [
       /[\\\/](\..*|node_modules|bower_components|target|public|__[a-z0-9_]+__|coverage)([\\\/]|$)/,
-      /\.test\.(js|ts)$/,
+      /\.test\.(js|tsx?)$/,
+      /\.md$/,
+      /debug\.log$/,
       ...pluginInternalDirsIgnore,
       fromRoot('src/legacy/server/sass/__tmp__'),
       fromRoot('x-pack/legacy/plugins/reporting/.chromium'),

From 5887c97d751fd639c4e24e5499b4ceed32fa4fcc Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@elastic.co>
Date: Thu, 30 Apr 2020 20:36:50 +0200
Subject: [PATCH 09/11] [Lens] Allow user to drag and select a subset of the
 timeline in the chart (aka brush interaction) (#62636)

* feat: brushing basic example for time histogram

* test: added

* refactor: simplify the structure

* refactor: move to inline function

* refactor

* refactor

* Always use time field from index pattern

* types

* use the meta.aggConfigParams for timefieldName

* fix: test snapshot update

* Update embeddable.tsx

removing commented code

* fix: moment remov

* fix: corrections for adapting to timepicker on every timefield

* fix: fix single bar condition

* types

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Co-authored-by: Wylie Conlon <wylieconlon@gmail.com>
---
 .../embeddable/embeddable.tsx                 |   4 +-
 .../public/{xy_visualization => }/services.ts |   4 +-
 .../__snapshots__/xy_expression.test.tsx.snap |   7 +
 .../lens/public/xy_visualization/index.ts     |   2 +-
 .../public/xy_visualization/to_expression.ts  |   2 +-
 .../xy_visualization/xy_expression.test.tsx   | 174 +++++++++++++++++-
 .../public/xy_visualization/xy_expression.tsx |  85 +++++++--
 7 files changed, 253 insertions(+), 25 deletions(-)
 rename x-pack/plugins/lens/public/{xy_visualization => }/services.ts (71%)

diff --git a/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.tsx b/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.tsx
index 0ef5f6d1a54706..6cd15e3c93e4ed 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.tsx
@@ -96,9 +96,7 @@ export class Embeddable extends AbstractEmbeddable<LensEmbeddableInput, LensEmbe
   public supportedTriggers() {
     switch (this.savedVis.visualizationType) {
       case 'lnsXY':
-        // TODO: case 'lnsDatatable':
-        return [VIS_EVENT_TO_TRIGGER.filter];
-
+        return [VIS_EVENT_TO_TRIGGER.filter, VIS_EVENT_TO_TRIGGER.brush];
       case 'lnsMetric':
       default:
         return [];
diff --git a/x-pack/plugins/lens/public/xy_visualization/services.ts b/x-pack/plugins/lens/public/services.ts
similarity index 71%
rename from x-pack/plugins/lens/public/xy_visualization/services.ts
rename to x-pack/plugins/lens/public/services.ts
index 51289fe0c63e76..a66743dde26619 100644
--- a/x-pack/plugins/lens/public/xy_visualization/services.ts
+++ b/x-pack/plugins/lens/public/services.ts
@@ -4,8 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { createGetterSetter } from '../../../../../src/plugins/kibana_utils/public';
-import { UiActionsStart } from '../../../../../src/plugins/ui_actions/public';
+import { createGetterSetter } from '../../../../src/plugins/kibana_utils/public';
+import { UiActionsStart } from '../../../../src/plugins/ui_actions/public';
 
 export const [getExecuteTriggerActions, setExecuteTriggerActions] = createGetterSetter<
   UiActionsStart['executeTriggerActions']
diff --git a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/xy_expression.test.tsx.snap b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/xy_expression.test.tsx.snap
index bef53c2fd266e7..f8f467b25643b6 100644
--- a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/xy_expression.test.tsx.snap
+++ b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/xy_expression.test.tsx.snap
@@ -6,6 +6,7 @@ exports[`xy_expression XYChart component it renders area 1`] = `
 >
   <Connect(spec)
     legendPosition="top"
+    onBrushEnd={[Function]}
     onElementClick={[Function]}
     rotation={0}
     showLegend={false}
@@ -73,6 +74,7 @@ exports[`xy_expression XYChart component it renders bar 1`] = `
 >
   <Connect(spec)
     legendPosition="top"
+    onBrushEnd={[Function]}
     onElementClick={[Function]}
     rotation={0}
     showLegend={false}
@@ -140,6 +142,7 @@ exports[`xy_expression XYChart component it renders horizontal bar 1`] = `
 >
   <Connect(spec)
     legendPosition="top"
+    onBrushEnd={[Function]}
     onElementClick={[Function]}
     rotation={90}
     showLegend={false}
@@ -207,6 +210,7 @@ exports[`xy_expression XYChart component it renders line 1`] = `
 >
   <Connect(spec)
     legendPosition="top"
+    onBrushEnd={[Function]}
     onElementClick={[Function]}
     rotation={0}
     showLegend={false}
@@ -274,6 +278,7 @@ exports[`xy_expression XYChart component it renders stacked area 1`] = `
 >
   <Connect(spec)
     legendPosition="top"
+    onBrushEnd={[Function]}
     onElementClick={[Function]}
     rotation={0}
     showLegend={false}
@@ -345,6 +350,7 @@ exports[`xy_expression XYChart component it renders stacked bar 1`] = `
 >
   <Connect(spec)
     legendPosition="top"
+    onBrushEnd={[Function]}
     onElementClick={[Function]}
     rotation={0}
     showLegend={false}
@@ -416,6 +422,7 @@ exports[`xy_expression XYChart component it renders stacked horizontal bar 1`] =
 >
   <Connect(spec)
     legendPosition="top"
+    onBrushEnd={[Function]}
     onElementClick={[Function]}
     rotation={90}
     showLegend={false}
diff --git a/x-pack/plugins/lens/public/xy_visualization/index.ts b/x-pack/plugins/lens/public/xy_visualization/index.ts
index 3a280fb045b060..9a0819d4f01c44 100644
--- a/x-pack/plugins/lens/public/xy_visualization/index.ts
+++ b/x-pack/plugins/lens/public/xy_visualization/index.ts
@@ -12,8 +12,8 @@ import { xyVisualization } from './xy_visualization';
 import { xyChart, getXyChartRenderer } from './xy_expression';
 import { legendConfig, xConfig, layerConfig } from './types';
 import { EditorFrameSetup, FormatFactory } from '../types';
+import { setExecuteTriggerActions } from '../services';
 import { UiActionsStart } from '../../../../../src/plugins/ui_actions/public';
-import { setExecuteTriggerActions } from './services';
 
 export interface XyVisualizationPluginSetupPlugins {
   expressions: ExpressionsSetup;
diff --git a/x-pack/plugins/lens/public/xy_visualization/to_expression.ts b/x-pack/plugins/lens/public/xy_visualization/to_expression.ts
index 9b068b0ca5ef07..d28a803790822a 100644
--- a/x-pack/plugins/lens/public/xy_visualization/to_expression.ts
+++ b/x-pack/plugins/lens/public/xy_visualization/to_expression.ts
@@ -142,7 +142,7 @@ export const buildExpression = (
                 .concat(layer.splitAccessor ? [layer.splitAccessor] : [])
                 .forEach(accessor => {
                   const operation = datasource.getOperationForColumnId(accessor);
-                  if (operation && operation.label) {
+                  if (operation?.label) {
                     columnToLabel[accessor] = operation.label;
                   }
                 });
diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_expression.test.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_expression.test.tsx
index 8db00aba0e36d3..dd2f32b63e34a5 100644
--- a/x-pack/plugins/lens/public/xy_visualization/xy_expression.test.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/xy_expression.test.tsx
@@ -27,6 +27,145 @@ import { mountWithIntl } from 'test_utils/enzyme_helpers';
 
 const executeTriggerActions = jest.fn();
 
+const dateHistogramData: LensMultiTable = {
+  type: 'lens_multitable',
+  tables: {
+    timeLayer: {
+      type: 'kibana_datatable',
+      rows: [
+        {
+          xAccessorId: 1585758120000,
+          splitAccessorId: "Men's Clothing",
+          yAccessorId: 1,
+        },
+        {
+          xAccessorId: 1585758360000,
+          splitAccessorId: "Women's Accessories",
+          yAccessorId: 1,
+        },
+        {
+          xAccessorId: 1585758360000,
+          splitAccessorId: "Women's Clothing",
+          yAccessorId: 1,
+        },
+        {
+          xAccessorId: 1585759380000,
+          splitAccessorId: "Men's Clothing",
+          yAccessorId: 1,
+        },
+        {
+          xAccessorId: 1585759380000,
+          splitAccessorId: "Men's Shoes",
+          yAccessorId: 1,
+        },
+        {
+          xAccessorId: 1585759380000,
+          splitAccessorId: "Women's Clothing",
+          yAccessorId: 1,
+        },
+        {
+          xAccessorId: 1585760700000,
+          splitAccessorId: "Men's Clothing",
+          yAccessorId: 1,
+        },
+        {
+          xAccessorId: 1585760760000,
+          splitAccessorId: "Men's Clothing",
+          yAccessorId: 1,
+        },
+        {
+          xAccessorId: 1585760760000,
+          splitAccessorId: "Men's Shoes",
+          yAccessorId: 1,
+        },
+        {
+          xAccessorId: 1585761120000,
+          splitAccessorId: "Men's Shoes",
+          yAccessorId: 1,
+        },
+      ],
+      columns: [
+        {
+          id: 'xAccessorId',
+          name: 'order_date per minute',
+          meta: {
+            type: 'date_histogram',
+            indexPatternId: 'indexPatternId',
+            aggConfigParams: {
+              field: 'order_date',
+              timeRange: { from: '2020-04-01T16:14:16.246Z', to: '2020-04-01T17:15:41.263Z' },
+              useNormalizedEsInterval: true,
+              scaleMetricValues: false,
+              interval: '1m',
+              drop_partials: false,
+              min_doc_count: 0,
+              extended_bounds: {},
+            },
+          },
+          formatHint: { id: 'date', params: { pattern: 'HH:mm' } },
+        },
+        {
+          id: 'splitAccessorId',
+          name: 'Top values of category.keyword',
+          meta: {
+            type: 'terms',
+            indexPatternId: 'indexPatternId',
+            aggConfigParams: {
+              field: 'category.keyword',
+              orderBy: 'yAccessorId',
+              order: 'desc',
+              size: 3,
+              otherBucket: false,
+              otherBucketLabel: 'Other',
+              missingBucket: false,
+              missingBucketLabel: 'Missing',
+            },
+          },
+          formatHint: {
+            id: 'terms',
+            params: {
+              id: 'string',
+              otherBucketLabel: 'Other',
+              missingBucketLabel: 'Missing',
+              parsedUrl: {
+                origin: 'http://localhost:5601',
+                pathname: '/jiy/app/kibana',
+                basePath: '/jiy',
+              },
+            },
+          },
+        },
+        {
+          id: 'yAccessorId',
+          name: 'Count of records',
+          meta: {
+            type: 'count',
+            indexPatternId: 'indexPatternId',
+            aggConfigParams: {},
+          },
+          formatHint: { id: 'number' },
+        },
+      ],
+    },
+  },
+  dateRange: {
+    fromDate: new Date('2020-04-01T16:14:16.246Z'),
+    toDate: new Date('2020-04-01T17:15:41.263Z'),
+  },
+};
+
+const dateHistogramLayer: LayerArgs = {
+  layerId: 'timeLayer',
+  hide: false,
+  xAccessor: 'xAccessorId',
+  yScaleType: 'linear',
+  xScaleType: 'time',
+  isHistogram: true,
+  splitAccessor: 'splitAccessorId',
+  seriesType: 'bar_stacked',
+  accessors: ['yAccessorId'],
+};
+
 const createSampleDatatableWithRows = (rows: KibanaDatatableRow[]): KibanaDatatable => ({
   type: 'kibana_datatable',
   columns: [
@@ -284,7 +423,7 @@ describe('xy_expression', () => {
         Object {
           "max": 1546491600000,
           "min": 1546405200000,
-          "minInterval": 1728000,
+          "minInterval": undefined,
         }
       `);
       });
@@ -449,6 +588,39 @@ describe('xy_expression', () => {
       expect(component.find(Settings).prop('rotation')).toEqual(90);
     });
 
+    test('onBrushEnd returns correct context data for date histogram data', () => {
+      const { args } = sampleArgs();
+
+      const wrapper = mountWithIntl(
+        <XYChart
+          data={dateHistogramData}
+          args={{
+            ...args,
+            layers: [dateHistogramLayer],
+          }}
+          formatFactory={getFormatSpy}
+          timeZone="UTC"
+          chartTheme={{}}
+          histogramBarTarget={50}
+          executeTriggerActions={executeTriggerActions}
+        />
+      );
+
+      wrapper
+        .find(Settings)
+        .first()
+        .prop('onBrushEnd')!(1585757732783, 1585758880838);
+
+      expect(executeTriggerActions).toHaveBeenCalledWith('SELECT_RANGE_TRIGGER', {
+        data: {
+          column: 0,
+          table: dateHistogramData.tables.timeLayer,
+          range: [1585757732783, 1585758880838],
+        },
+        timeFieldName: 'order_date',
+      });
+    });
+
     test('onElementClick returns correct context data', () => {
       const geometry: GeometryValue = { x: 5, y: 1, accessor: 'y1', mark: null };
       const series = {
diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_expression.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_expression.tsx
index 85cf5753befd79..2cd9ae7acb203e 100644
--- a/x-pack/plugins/lens/public/xy_visualization/xy_expression.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/xy_expression.tsx
@@ -29,14 +29,17 @@ import {
 import { EuiIcon, EuiText, IconType, EuiSpacer } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
-import { ValueClickTriggerContext } from '../../../../../src/plugins/embeddable/public';
+import {
+  ValueClickTriggerContext,
+  RangeSelectTriggerContext,
+} from '../../../../../src/plugins/embeddable/public';
 import { VIS_EVENT_TO_TRIGGER } from '../../../../../src/plugins/visualizations/public';
 import { LensMultiTable, FormatFactory } from '../types';
 import { XYArgs, SeriesType, visualizationTypes } from './types';
 import { VisualizationContainer } from '../visualization_container';
 import { isHorizontalChart } from './state_helpers';
+import { getExecuteTriggerActions } from '../services';
 import { UiActionsStart } from '../../../../../src/plugins/ui_actions/public';
-import { getExecuteTriggerActions } from './services';
 import { parseInterval } from '../../../../../src/plugins/data/common';
 
 type InferPropType<T> = T extends React.FunctionComponent<infer P> ? P : T;
@@ -218,8 +221,32 @@ export function XYChart({
   const xTitle = (xAxisColumn && xAxisColumn.name) || args.xTitle;
 
   function calculateMinInterval() {
-    // add minInterval only for single row value as it cannot be determined from dataset
-    if (data.dateRange && layers.every(layer => data.tables[layer.layerId].rows.length <= 1)) {
+    // check all the tables to see if all of the rows have the same timestamp
+    // that would mean that chart will draw a single bar
+    const isSingleTimestampInXDomain = () => {
+      const nonEmptyLayers = layers.filter(
+        layer => data.tables[layer.layerId].rows.length && layer.xAccessor
+      );
+
+      if (!nonEmptyLayers.length) {
+        return;
+      }
+
+      const firstRowValue =
+        data.tables[nonEmptyLayers[0].layerId].rows[0][nonEmptyLayers[0].xAccessor!];
+      for (const layer of nonEmptyLayers) {
+        if (
+          layer.xAccessor &&
+          data.tables[layer.layerId].rows.some(row => row[layer.xAccessor!] !== firstRowValue)
+        ) {
+          return false;
+        }
+      }
+      return true;
+    };
+
+    // add minInterval only for single point in domain
+    if (data.dateRange && isSingleTimestampInXDomain()) {
       if (xAxisColumn?.meta?.aggConfigParams?.interval !== 'auto')
         return parseInterval(xAxisColumn?.meta?.aggConfigParams?.interval)?.asMilliseconds();
 
@@ -231,14 +258,16 @@ export function XYChart({
     return undefined;
   }
 
-  const xDomain =
-    data.dateRange && layers.every(l => l.xScaleType === 'time')
-      ? {
-          min: data.dateRange.fromDate.getTime(),
-          max: data.dateRange.toDate.getTime(),
-          minInterval: calculateMinInterval(),
-        }
-      : undefined;
+  const isTimeViz = data.dateRange && layers.every(l => l.xScaleType === 'time');
+
+  const xDomain = isTimeViz
+    ? {
+        min: data.dateRange?.fromDate.getTime(),
+        max: data.dateRange?.toDate.getTime(),
+        minInterval: calculateMinInterval(),
+      }
+    : undefined;
+
   return (
     <Chart>
       <Settings
@@ -248,6 +277,31 @@ export function XYChart({
         theme={chartTheme}
         rotation={shouldRotate ? 90 : 0}
         xDomain={xDomain}
+        onBrushEnd={(min: number, max: number) => {
+          // in the future we want to make it also for histogram
+          if (!xAxisColumn || !isTimeViz) {
+            return;
+          }
+
+          const firstLayerWithData =
+            layers[layers.findIndex(layer => data.tables[layer.layerId].rows.length)];
+          const table = data.tables[firstLayerWithData.layerId];
+
+          const xAxisColumnIndex = table.columns.findIndex(
+            el => el.id === firstLayerWithData.xAccessor
+          );
+          const timeFieldName = table.columns[xAxisColumnIndex]?.meta?.aggConfigParams?.field;
+
+          const context: RangeSelectTriggerContext = {
+            data: {
+              range: [min, max],
+              table,
+              column: xAxisColumnIndex,
+            },
+            timeFieldName,
+          };
+          executeTriggerActions(VIS_EVENT_TO_TRIGGER.brush, context);
+        }}
         onElementClick={([[geometry, series]]) => {
           // for xyChart series is always XYChartSeriesIdentifier and geometry is always type of GeometryValue
           const xySeries = series as XYChartSeriesIdentifier;
@@ -284,10 +338,8 @@ export function XYChart({
             });
           }
 
-          const xAxisFieldName: string | undefined = table.columns.find(
-            col => col.id === layer.xAccessor
-          )?.meta?.aggConfigParams?.field;
-
+          const xAxisFieldName = table.columns.find(el => el.id === layer.xAccessor)?.meta
+            ?.aggConfigParams?.field;
           const timeFieldName = xDomain && xAxisFieldName;
 
           const context: ValueClickTriggerContext = {
@@ -301,7 +353,6 @@ export function XYChart({
             },
             timeFieldName,
           };
-
           executeTriggerActions(VIS_EVENT_TO_TRIGGER.filter, context);
         }}
       />

From c8b9bdd0ec479f3513223a79c5c63d2dbdcea989 Mon Sep 17 00:00:00 2001
From: spalger <spalger@users.noreply.github.com>
Date: Thu, 30 Apr 2020 11:48:41 -0700
Subject: [PATCH 10/11] skip flaky suite (#64473)

---
 .../apis/management/index_management/indices.js                | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/x-pack/test/api_integration/apis/management/index_management/indices.js b/x-pack/test/api_integration/apis/management/index_management/indices.js
index d2d07eca475e76..9442beda3501d7 100644
--- a/x-pack/test/api_integration/apis/management/index_management/indices.js
+++ b/x-pack/test/api_integration/apis/management/index_management/indices.js
@@ -34,7 +34,8 @@ export default function({ getService }) {
     clearCache,
   } = registerHelpers({ supertest });
 
-  describe('indices', () => {
+  // FLAKY: https://github.com/elastic/kibana/issues/64473
+  describe.skip('indices', () => {
     after(() => Promise.all([cleanUpEsResources()]));
 
     describe('clear cache', () => {

From 0399f70050458b21f9a11d0bee39aa653a8bc97a Mon Sep 17 00:00:00 2001
From: Chris Cowan <chris@chriscowan.us>
Date: Thu, 30 Apr 2020 11:52:11 -0700
Subject: [PATCH 11/11] [Metrics UI] Add Charts to Alert Conditions (#64384)

* [Metrics UI] Add Charts to Alert Conditions

- Reorganize files under public/alerting
- Change Metrics Explorer API to force interval
- Add charts to expression rows
- Allow expression rows to be collapsable
- Adding sum aggregation to Metrics Explorer for parity

* Adding interval information to Metrics Eexplorer API

* Moving data hook into the expression charts component

* Revert "Adding interval information to Metrics Eexplorer API"

This reverts commit f6e2fc11be9d239dac4518178ed880f167a74f5a.

* Reducing the opacity for the threshold areas

* Changing darkMode to use alertsContext.uiSettings
---
 .../index.ts => metrics_explorer.ts}          |   2 +
 .../saved_objects/metrics_explorer_view.ts    |   3 +
 .../components}/alert_dropdown.tsx            |   0
 .../components}/alert_flyout.tsx              |   0
 .../components}/expression.tsx                | 261 ++-------------
 .../components/expression_chart.tsx           | 302 ++++++++++++++++++
 .../components/expression_row.tsx             | 237 ++++++++++++++
 .../components}/validation.tsx                |   0
 .../hooks/use_metrics_explorer_chart_data.ts  |  59 ++++
 .../metric_threshold/index.ts}                |  10 +-
 .../lib/transform_metrics_explorer_data.ts    |  31 ++
 .../public/alerting/metric_threshold/types.ts |  51 +++
 .../infra/public/pages/metrics/index.tsx      |   2 +-
 .../components/waffle/node_context_menu.tsx   |   2 +-
 .../components/aggregation.tsx                |   3 +
 .../components/chart_context_menu.tsx         |   2 +-
 .../components/helpers/create_metric_label.ts |   7 +-
 .../components/series_chart.tsx               |  23 +-
 .../hooks/use_metrics_explorer_data.ts        |  17 +-
 .../hooks/use_metrics_explorer_options.ts     |   1 +
 x-pack/plugins/infra/public/plugin.ts         |   4 +-
 .../lib/populate_series_with_tsvb_data.ts     |   4 +-
 22 files changed, 770 insertions(+), 251 deletions(-)
 rename x-pack/plugins/infra/common/http_api/{metrics_explorer/index.ts => metrics_explorer.ts} (98%)
 rename x-pack/plugins/infra/public/{components/alerting/metrics => alerting/metric_threshold/components}/alert_dropdown.tsx (100%)
 rename x-pack/plugins/infra/public/{components/alerting/metrics => alerting/metric_threshold/components}/alert_flyout.tsx (100%)
 rename x-pack/plugins/infra/public/{components/alerting/metrics => alerting/metric_threshold/components}/expression.tsx (59%)
 create mode 100644 x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_chart.tsx
 create mode 100644 x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_row.tsx
 rename x-pack/plugins/infra/public/{components/alerting/metrics => alerting/metric_threshold/components}/validation.tsx (100%)
 create mode 100644 x-pack/plugins/infra/public/alerting/metric_threshold/hooks/use_metrics_explorer_chart_data.ts
 rename x-pack/plugins/infra/public/{components/alerting/metrics/metric_threshold_alert_type.ts => alerting/metric_threshold/index.ts} (72%)
 create mode 100644 x-pack/plugins/infra/public/alerting/metric_threshold/lib/transform_metrics_explorer_data.ts
 create mode 100644 x-pack/plugins/infra/public/alerting/metric_threshold/types.ts

diff --git a/x-pack/plugins/infra/common/http_api/metrics_explorer/index.ts b/x-pack/plugins/infra/common/http_api/metrics_explorer.ts
similarity index 98%
rename from x-pack/plugins/infra/common/http_api/metrics_explorer/index.ts
rename to x-pack/plugins/infra/common/http_api/metrics_explorer.ts
index 93655f931f45df..eb5b0bdbcfbc50 100644
--- a/x-pack/plugins/infra/common/http_api/metrics_explorer/index.ts
+++ b/x-pack/plugins/infra/common/http_api/metrics_explorer.ts
@@ -13,6 +13,7 @@ export const METRIC_EXPLORER_AGGREGATIONS = [
   'cardinality',
   'rate',
   'count',
+  'sum',
 ] as const;
 
 type MetricExplorerAggregations = typeof METRIC_EXPLORER_AGGREGATIONS[number];
@@ -54,6 +55,7 @@ export const metricsExplorerRequestBodyOptionalFieldsRT = rt.partial({
   afterKey: rt.union([rt.string, rt.null, rt.undefined]),
   limit: rt.union([rt.number, rt.null, rt.undefined]),
   filterQuery: rt.union([rt.string, rt.null, rt.undefined]),
+  forceInterval: rt.boolean,
 });
 
 export const metricsExplorerRequestBodyRT = rt.intersection([
diff --git a/x-pack/plugins/infra/common/saved_objects/metrics_explorer_view.ts b/x-pack/plugins/infra/common/saved_objects/metrics_explorer_view.ts
index 6eb08eabc15b5d..add6ab0f132b5c 100644
--- a/x-pack/plugins/infra/common/saved_objects/metrics_explorer_view.ts
+++ b/x-pack/plugins/infra/common/saved_objects/metrics_explorer_view.ts
@@ -35,6 +35,9 @@ export const metricsExplorerViewSavedObjectMappings: {
       },
       options: {
         properties: {
+          forceInterval: {
+            type: 'boolean',
+          },
           metrics: {
             type: 'nested',
             properties: {
diff --git a/x-pack/plugins/infra/public/components/alerting/metrics/alert_dropdown.tsx b/x-pack/plugins/infra/public/alerting/metric_threshold/components/alert_dropdown.tsx
similarity index 100%
rename from x-pack/plugins/infra/public/components/alerting/metrics/alert_dropdown.tsx
rename to x-pack/plugins/infra/public/alerting/metric_threshold/components/alert_dropdown.tsx
diff --git a/x-pack/plugins/infra/public/components/alerting/metrics/alert_flyout.tsx b/x-pack/plugins/infra/public/alerting/metric_threshold/components/alert_flyout.tsx
similarity index 100%
rename from x-pack/plugins/infra/public/components/alerting/metrics/alert_flyout.tsx
rename to x-pack/plugins/infra/public/alerting/metric_threshold/components/alert_flyout.tsx
diff --git a/x-pack/plugins/infra/public/components/alerting/metrics/expression.tsx b/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression.tsx
similarity index 59%
rename from x-pack/plugins/infra/public/components/alerting/metrics/expression.tsx
rename to x-pack/plugins/infra/public/alerting/metric_threshold/components/expression.tsx
index f2ac34ccb752fd..352ac1927479ea 100644
--- a/x-pack/plugins/infra/public/components/alerting/metrics/expression.tsx
+++ b/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression.tsx
@@ -6,9 +6,6 @@
 
 import React, { ChangeEvent, useCallback, useMemo, useEffect, useState } from 'react';
 import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiButtonIcon,
   EuiSpacer,
   EuiText,
   EuiFormRow,
@@ -18,40 +15,28 @@ import {
   EuiIcon,
   EuiFieldSearch,
 } from '@elastic/eui';
-import { IFieldType } from 'src/plugins/data/public';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import {
-  MetricExpressionParams,
   Comparator,
   Aggregators,
   // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 } from '../../../../server/lib/alerting/metric_threshold/types';
-import { euiStyled } from '../../../../../observability/public';
 import {
-  WhenExpression,
-  OfExpression,
-  ThresholdExpression,
   ForLastExpression,
   // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 } from '../../../../../triggers_actions_ui/public/common';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { builtInComparators } from '../../../../../triggers_actions_ui/public/common/constants';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { IErrorObject } from '../../../../../triggers_actions_ui/public/types';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { AlertsContextValue } from '../../../../../triggers_actions_ui/public/application/context/alerts_context';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { MetricsExplorerSeries } from '../../../../common/http_api/metrics_explorer';
 import { MetricsExplorerKueryBar } from '../../../pages/metrics/metrics_explorer/components/kuery_bar';
 import { MetricsExplorerOptions } from '../../../pages/metrics/metrics_explorer/hooks/use_metrics_explorer_options';
 import { MetricsExplorerGroupBy } from '../../../pages/metrics/metrics_explorer/components/group_by';
 import { useSourceViaHttp } from '../../../containers/source/use_source_via_http';
-
-interface AlertContextMeta {
-  currentOptions?: Partial<MetricsExplorerOptions>;
-  series?: MetricsExplorerSeries;
-}
+import { ExpressionRow } from './expression_row';
+import { AlertContextMeta, TimeUnit, MetricExpression } from '../types';
+import { ExpressionChart } from './expression_chart';
 
 interface Props {
   errors: IErrorObject[];
@@ -67,11 +52,6 @@ interface Props {
   setAlertProperty(key: string, value: any): void;
 }
 
-type TimeUnit = 's' | 'm' | 'h' | 'd';
-type MetricExpression = Omit<MetricExpressionParams, 'metric'> & {
-  metric?: string;
-};
-
 const defaultExpression = {
   aggType: Aggregators.AVERAGE,
   comparator: Comparator.GT,
@@ -80,17 +60,6 @@ const defaultExpression = {
   timeUnit: 'm',
 } as MetricExpression;
 
-const customComparators = {
-  ...builtInComparators,
-  [Comparator.OUTSIDE_RANGE]: {
-    text: i18n.translate('xpack.infra.metrics.alertFlyout.outsideRangeLabel', {
-      defaultMessage: 'Is not between',
-    }),
-    value: Comparator.OUTSIDE_RANGE,
-    requiredValues: 2,
-  },
-};
-
 export const Expressions: React.FC<Props> = props => {
   const { setAlertParams, alertParams, errors, alertsContext } = props;
   const { source, createDerivedIndexPattern } = useSourceViaHttp({
@@ -101,7 +70,6 @@ export const Expressions: React.FC<Props> = props => {
   });
   const [timeSize, setTimeSize] = useState<number | undefined>(1);
   const [timeUnit, setTimeUnit] = useState<TimeUnit>('m');
-
   const derivedIndexPattern = useMemo(() => createDerivedIndexPattern('metrics'), [
     createDerivedIndexPattern,
   ]);
@@ -127,14 +95,14 @@ export const Expressions: React.FC<Props> = props => {
   );
 
   const addExpression = useCallback(() => {
-    const exp = alertParams.criteria.slice();
+    const exp = alertParams.criteria?.slice() || [];
     exp.push(defaultExpression);
     setAlertParams('criteria', exp);
   }, [setAlertParams, alertParams.criteria]);
 
   const removeExpression = useCallback(
     (id: number) => {
-      const exp = alertParams.criteria.slice();
+      const exp = alertParams.criteria?.slice() || [];
       if (exp.length > 1) {
         exp.splice(id, 1);
         setAlertParams('criteria', exp);
@@ -167,10 +135,11 @@ export const Expressions: React.FC<Props> = props => {
 
   const updateTimeSize = useCallback(
     (ts: number | undefined) => {
-      const criteria = alertParams.criteria.map(c => ({
-        ...c,
-        timeSize: ts,
-      }));
+      const criteria =
+        alertParams.criteria?.map(c => ({
+          ...c,
+          timeSize: ts,
+        })) || [];
       setTimeSize(ts || undefined);
       setAlertParams('criteria', criteria);
     },
@@ -179,10 +148,11 @@ export const Expressions: React.FC<Props> = props => {
 
   const updateTimeUnit = useCallback(
     (tu: string) => {
-      const criteria = alertParams.criteria.map(c => ({
-        ...c,
-        timeUnit: tu,
-      }));
+      const criteria =
+        alertParams.criteria?.map(c => ({
+          ...c,
+          timeUnit: tu,
+        })) || [];
       setTimeUnit(tu as TimeUnit);
       setAlertParams('criteria', criteria);
     },
@@ -250,7 +220,7 @@ export const Expressions: React.FC<Props> = props => {
         alertParams.criteria.map((e, idx) => {
           return (
             <ExpressionRow
-              canDelete={alertParams.criteria.length > 1}
+              canDelete={(alertParams.criteria && alertParams.criteria.length > 1) || false}
               fields={derivedIndexPattern.fields}
               remove={removeExpression}
               addExpression={addExpression}
@@ -259,17 +229,28 @@ export const Expressions: React.FC<Props> = props => {
               setAlertParams={updateParams}
               errors={errors[idx] || emptyError}
               expression={e || {}}
-            />
+            >
+              <ExpressionChart
+                expression={e}
+                context={alertsContext}
+                derivedIndexPattern={derivedIndexPattern}
+                source={source}
+                filterQuery={alertParams.filterQuery}
+                groupBy={alertParams.groupBy}
+              />
+            </ExpressionRow>
           );
         })}
 
-      <ForLastExpression
-        timeWindowSize={timeSize}
-        timeWindowUnit={timeUnit}
-        errors={emptyError}
-        onChangeWindowSize={updateTimeSize}
-        onChangeWindowUnit={updateTimeUnit}
-      />
+      <div style={{ marginLeft: 28 }}>
+        <ForLastExpression
+          timeWindowSize={timeSize}
+          timeWindowUnit={timeUnit}
+          errors={emptyError}
+          onChangeWindowSize={updateTimeSize}
+          onChangeWindowUnit={updateTimeUnit}
+        />
+      </div>
 
       <div>
         <EuiButtonEmpty
@@ -359,175 +340,3 @@ export const Expressions: React.FC<Props> = props => {
     </>
   );
 };
-
-interface ExpressionRowProps {
-  fields: IFieldType[];
-  expressionId: number;
-  expression: MetricExpression;
-  errors: IErrorObject;
-  canDelete: boolean;
-  addExpression(): void;
-  remove(id: number): void;
-  setAlertParams(id: number, params: MetricExpression): void;
-}
-
-const StyledExpressionRow = euiStyled(EuiFlexGroup)`
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0 -4px;
-`;
-
-const StyledExpression = euiStyled.div`
-  padding: 0 4px;
-`;
-
-export const ExpressionRow: React.FC<ExpressionRowProps> = props => {
-  const { setAlertParams, expression, errors, expressionId, remove, fields, canDelete } = props;
-  const {
-    aggType = Aggregators.MAX,
-    metric,
-    comparator = Comparator.GT,
-    threshold = [],
-  } = expression;
-
-  const updateAggType = useCallback(
-    (at: string) => {
-      setAlertParams(expressionId, {
-        ...expression,
-        aggType: at as MetricExpression['aggType'],
-        metric: at === 'count' ? undefined : expression.metric,
-      });
-    },
-    [expressionId, expression, setAlertParams]
-  );
-
-  const updateMetric = useCallback(
-    (m?: MetricExpression['metric']) => {
-      setAlertParams(expressionId, { ...expression, metric: m });
-    },
-    [expressionId, expression, setAlertParams]
-  );
-
-  const updateComparator = useCallback(
-    (c?: string) => {
-      setAlertParams(expressionId, { ...expression, comparator: c as Comparator });
-    },
-    [expressionId, expression, setAlertParams]
-  );
-
-  const updateThreshold = useCallback(
-    t => {
-      if (t.join() !== expression.threshold.join()) {
-        setAlertParams(expressionId, { ...expression, threshold: t });
-      }
-    },
-    [expressionId, expression, setAlertParams]
-  );
-
-  return (
-    <>
-      <EuiFlexGroup gutterSize="xs">
-        <EuiFlexItem grow>
-          <StyledExpressionRow>
-            <StyledExpression>
-              <WhenExpression
-                customAggTypesOptions={aggregationType}
-                aggType={aggType}
-                onChangeSelectedAggType={updateAggType}
-              />
-            </StyledExpression>
-            {aggType !== 'count' && (
-              <StyledExpression>
-                <OfExpression
-                  customAggTypesOptions={aggregationType}
-                  aggField={metric}
-                  fields={fields.map(f => ({
-                    normalizedType: f.type,
-                    name: f.name,
-                  }))}
-                  aggType={aggType}
-                  errors={errors}
-                  onChangeSelectedAggField={updateMetric}
-                />
-              </StyledExpression>
-            )}
-            <StyledExpression>
-              <ThresholdExpression
-                thresholdComparator={comparator || Comparator.GT}
-                threshold={threshold}
-                customComparators={customComparators}
-                onChangeSelectedThresholdComparator={updateComparator}
-                onChangeSelectedThreshold={updateThreshold}
-                errors={errors}
-              />
-            </StyledExpression>
-          </StyledExpressionRow>
-        </EuiFlexItem>
-        {canDelete && (
-          <EuiFlexItem grow={false}>
-            <EuiButtonIcon
-              aria-label={i18n.translate('xpack.infra.metrics.alertFlyout.removeCondition', {
-                defaultMessage: 'Remove condition',
-              })}
-              color={'danger'}
-              iconType={'trash'}
-              onClick={() => remove(expressionId)}
-            />
-          </EuiFlexItem>
-        )}
-      </EuiFlexGroup>
-      <EuiSpacer size={'s'} />
-    </>
-  );
-};
-
-export const aggregationType: { [key: string]: any } = {
-  avg: {
-    text: i18n.translate('xpack.infra.metrics.alertFlyout.aggregationText.avg', {
-      defaultMessage: 'Average',
-    }),
-    fieldRequired: true,
-    validNormalizedTypes: ['number'],
-    value: Aggregators.AVERAGE,
-  },
-  max: {
-    text: i18n.translate('xpack.infra.metrics.alertFlyout.aggregationText.max', {
-      defaultMessage: 'Max',
-    }),
-    fieldRequired: true,
-    validNormalizedTypes: ['number', 'date'],
-    value: Aggregators.MAX,
-  },
-  min: {
-    text: i18n.translate('xpack.infra.metrics.alertFlyout.aggregationText.min', {
-      defaultMessage: 'Min',
-    }),
-    fieldRequired: true,
-    validNormalizedTypes: ['number', 'date'],
-    value: Aggregators.MIN,
-  },
-  cardinality: {
-    text: i18n.translate('xpack.infra.metrics.alertFlyout.aggregationText.cardinality', {
-      defaultMessage: 'Cardinality',
-    }),
-    fieldRequired: false,
-    value: Aggregators.CARDINALITY,
-    validNormalizedTypes: ['number'],
-  },
-  rate: {
-    text: i18n.translate('xpack.infra.metrics.alertFlyout.aggregationText.rate', {
-      defaultMessage: 'Rate',
-    }),
-    fieldRequired: false,
-    value: Aggregators.RATE,
-    validNormalizedTypes: ['number'],
-  },
-  count: {
-    text: i18n.translate('xpack.infra.metrics.alertFlyout.aggregationText.count', {
-      defaultMessage: 'Document count',
-    }),
-    fieldRequired: false,
-    value: Aggregators.COUNT,
-    validNormalizedTypes: ['number'],
-  },
-};
diff --git a/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_chart.tsx b/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_chart.tsx
new file mode 100644
index 00000000000000..a600d59865cccd
--- /dev/null
+++ b/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_chart.tsx
@@ -0,0 +1,302 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React, { useMemo, useCallback } from 'react';
+import {
+  Axis,
+  Chart,
+  niceTimeFormatter,
+  Position,
+  Settings,
+  TooltipValue,
+  RectAnnotation,
+} from '@elastic/charts';
+import { first, last } from 'lodash';
+import moment from 'moment';
+import { i18n } from '@kbn/i18n';
+import { EuiText } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { IIndexPattern } from 'src/plugins/data/public';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { AlertsContextValue } from '../../../../../triggers_actions_ui/public/application/context/alerts_context';
+import { InfraSource } from '../../../../common/http_api/source_api';
+import {
+  Comparator,
+  // eslint-disable-next-line @kbn/eslint/no-restricted-paths
+} from '../../../../server/lib/alerting/metric_threshold/types';
+import { MetricsExplorerColor, colorTransformer } from '../../../../common/color_palette';
+import { MetricsExplorerRow, MetricsExplorerAggregation } from '../../../../common/http_api';
+import { MetricExplorerSeriesChart } from '../../../pages/metrics/metrics_explorer/components/series_chart';
+import { MetricExpression, AlertContextMeta } from '../types';
+import { MetricsExplorerChartType } from '../../../pages/metrics/metrics_explorer/hooks/use_metrics_explorer_options';
+import { getChartTheme } from '../../../pages/metrics/metrics_explorer/components/helpers/get_chart_theme';
+import { createFormatterForMetric } from '../../../pages/metrics/metrics_explorer/components/helpers/create_formatter_for_metric';
+import { calculateDomain } from '../../../pages/metrics/metrics_explorer/components/helpers/calculate_domain';
+import { useMetricsExplorerChartData } from '../hooks/use_metrics_explorer_chart_data';
+
+interface Props {
+  context: AlertsContextValue<AlertContextMeta>;
+  expression: MetricExpression;
+  derivedIndexPattern: IIndexPattern;
+  source: InfraSource | null;
+  filterQuery?: string;
+  groupBy?: string;
+}
+
+const tooltipProps = {
+  headerFormatter: (tooltipValue: TooltipValue) =>
+    moment(tooltipValue.value).format('Y-MM-DD HH:mm:ss.SSS'),
+};
+
+const TIME_LABELS = {
+  s: i18n.translate('xpack.infra.metrics.alerts.timeLabels.seconds', { defaultMessage: 'seconds' }),
+  m: i18n.translate('xpack.infra.metrics.alerts.timeLabels.minutes', { defaultMessage: 'minutes' }),
+  h: i18n.translate('xpack.infra.metrics.alerts.timeLabels.hours', { defaultMessage: 'hours' }),
+  d: i18n.translate('xpack.infra.metrics.alerts.timeLabels.days', { defaultMessage: 'days' }),
+};
+
+export const ExpressionChart: React.FC<Props> = ({
+  expression,
+  context,
+  derivedIndexPattern,
+  source,
+  filterQuery,
+  groupBy,
+}) => {
+  const { loading, data } = useMetricsExplorerChartData(
+    expression,
+    context,
+    derivedIndexPattern,
+    source,
+    filterQuery,
+    groupBy
+  );
+
+  const metric = {
+    field: expression.metric,
+    aggregation: expression.aggType as MetricsExplorerAggregation,
+    color: MetricsExplorerColor.color0,
+  };
+  const isDarkMode = context.uiSettings?.get('theme:darkMode') || false;
+  const dateFormatter = useMemo(() => {
+    const firstSeries = data ? first(data.series) : null;
+    return firstSeries && firstSeries.rows.length > 0
+      ? niceTimeFormatter([first(firstSeries.rows).timestamp, last(firstSeries.rows).timestamp])
+      : (value: number) => `${value}`;
+  }, [data]);
+
+  const yAxisFormater = useCallback(createFormatterForMetric(metric), [expression]);
+
+  if (loading || !data) {
+    return (
+      <EmptyContainer>
+        <EuiText color="subdued">
+          <FormattedMessage
+            id="xpack.infra.metrics.alerts.loadingMessage"
+            defaultMessage="Loading"
+          />
+        </EuiText>
+      </EmptyContainer>
+    );
+  }
+
+  const thresholds = expression.threshold.slice().sort();
+
+  // Creating a custom series where the ID is changed to 0
+  // so that we can get a proper domian
+  const firstSeries = first(data.series);
+  if (!firstSeries) {
+    return (
+      <EmptyContainer>
+        <EuiText color="subdued">Oops, no chart data available</EuiText>
+      </EmptyContainer>
+    );
+  }
+
+  const series = {
+    ...firstSeries,
+    rows: firstSeries.rows.map(row => {
+      const newRow: MetricsExplorerRow = {
+        timestamp: row.timestamp,
+        metric_0: row.metric_0 || null,
+      };
+      thresholds.forEach((thresholdValue, index) => {
+        newRow[`metric_threshold_${index}`] = thresholdValue;
+      });
+      return newRow;
+    }),
+  };
+
+  const firstTimestamp = first(firstSeries.rows).timestamp;
+  const lastTimestamp = last(firstSeries.rows).timestamp;
+  const dataDomain = calculateDomain(series, [metric], false);
+  const domain = {
+    max: Math.max(dataDomain.max, last(thresholds) || dataDomain.max) * 1.1, // add 10% headroom.
+    min: Math.min(dataDomain.min, first(thresholds) || dataDomain.min),
+  };
+
+  if (domain.min === first(expression.threshold)) {
+    domain.min = domain.min * 0.9;
+  }
+
+  const isAbove = [Comparator.GT, Comparator.GT_OR_EQ].includes(expression.comparator);
+  const opacity = 0.3;
+  const timeLabel = TIME_LABELS[expression.timeUnit];
+
+  return (
+    <>
+      <ChartContainer>
+        <Chart>
+          <MetricExplorerSeriesChart
+            type={MetricsExplorerChartType.area}
+            metric={metric}
+            id="0"
+            series={series}
+            stack={false}
+          />
+          {thresholds.length ? (
+            <MetricExplorerSeriesChart
+              type={isAbove ? MetricsExplorerChartType.line : MetricsExplorerChartType.area}
+              metric={{
+                ...metric,
+                color: MetricsExplorerColor.color1,
+                label: i18n.translate('xpack.infra.metrics.alerts.thresholdLabel', {
+                  defaultMessage: 'Threshold',
+                }),
+              }}
+              id={thresholds.map((t, i) => `threshold_${i}`)}
+              series={series}
+              stack={false}
+              opacity={opacity}
+            />
+          ) : null}
+          {thresholds.length && expression.comparator === Comparator.OUTSIDE_RANGE ? (
+            <>
+              <MetricExplorerSeriesChart
+                type={MetricsExplorerChartType.line}
+                metric={{
+                  ...metric,
+                  color: MetricsExplorerColor.color1,
+                  label: i18n.translate('xpack.infra.metrics.alerts.thresholdLabel', {
+                    defaultMessage: 'Threshold',
+                  }),
+                }}
+                id={thresholds.map((t, i) => `threshold_${i}`)}
+                series={series}
+                stack={false}
+                opacity={opacity}
+              />
+              <RectAnnotation
+                id="lower-threshold"
+                style={{
+                  fill: colorTransformer(MetricsExplorerColor.color1),
+                  opacity,
+                }}
+                dataValues={[
+                  {
+                    coordinates: {
+                      x0: firstTimestamp,
+                      x1: lastTimestamp,
+                      y0: domain.min,
+                      y1: first(expression.threshold),
+                    },
+                  },
+                ]}
+              />
+              <RectAnnotation
+                id="upper-threshold"
+                style={{
+                  fill: colorTransformer(MetricsExplorerColor.color1),
+                  opacity,
+                }}
+                dataValues={[
+                  {
+                    coordinates: {
+                      x0: firstTimestamp,
+                      x1: lastTimestamp,
+                      y0: last(expression.threshold),
+                      y1: domain.max,
+                    },
+                  },
+                ]}
+              />
+            </>
+          ) : null}
+          {isAbove ? (
+            <RectAnnotation
+              id="upper-threshold"
+              style={{
+                fill: colorTransformer(MetricsExplorerColor.color1),
+                opacity,
+              }}
+              dataValues={[
+                {
+                  coordinates: {
+                    x0: firstTimestamp,
+                    x1: lastTimestamp,
+                    y0: first(expression.threshold),
+                    y1: domain.max,
+                  },
+                },
+              ]}
+            />
+          ) : null}
+          <Axis
+            id={'timestamp'}
+            position={Position.Bottom}
+            showOverlappingTicks={true}
+            tickFormat={dateFormatter}
+          />
+          <Axis id={'values'} position={Position.Left} tickFormat={yAxisFormater} domain={domain} />
+          <Settings tooltip={tooltipProps} theme={getChartTheme(isDarkMode)} />
+        </Chart>
+      </ChartContainer>
+      <div style={{ textAlign: 'center' }}>
+        {series.id !== 'ALL' ? (
+          <EuiText size="xs" color="subdued">
+            <FormattedMessage
+              id="xpack.infra.metrics.alerts.dataTimeRangeLabelWithGrouping"
+              defaultMessage="Last 20 {timeLabel} of data for {id}"
+              values={{ id: series.id, timeLabel }}
+            />
+          </EuiText>
+        ) : (
+          <EuiText size="xs" color="subdued">
+            <FormattedMessage
+              id="xpack.infra.metrics.alerts.dataTimeRangeLabel"
+              defaultMessage="Last 20 {timeLabel}"
+              values={{ timeLabel }}
+            />
+          </EuiText>
+        )}
+      </div>
+    </>
+  );
+};
+
+const EmptyContainer: React.FC = ({ children }) => (
+  <div
+    style={{
+      width: '100%',
+      height: 150,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }}
+  >
+    {children}
+  </div>
+);
+
+const ChartContainer: React.FC = ({ children }) => (
+  <div
+    style={{
+      width: '100%',
+      height: 150,
+    }}
+  >
+    {children}
+  </div>
+);
diff --git a/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_row.tsx b/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_row.tsx
new file mode 100644
index 00000000000000..8801df380b48d4
--- /dev/null
+++ b/x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_row.tsx
@@ -0,0 +1,237 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * 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, { useCallback, useState } from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiFlexGroup, EuiFlexItem, EuiButtonIcon, EuiSpacer } from '@elastic/eui';
+import { IFieldType } from 'src/plugins/data/public';
+import {
+  WhenExpression,
+  OfExpression,
+  ThresholdExpression,
+  // eslint-disable-next-line @kbn/eslint/no-restricted-paths
+} from '../../../../../triggers_actions_ui/public/common';
+import { euiStyled } from '../../../../../observability/public';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { IErrorObject } from '../../../../../triggers_actions_ui/public/types';
+import { MetricExpression, AGGREGATION_TYPES } from '../types';
+import {
+  Comparator,
+  // eslint-disable-next-line @kbn/eslint/no-restricted-paths
+} from '../../../../server/lib/alerting/metric_threshold/types';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { builtInComparators } from '../../../../../triggers_actions_ui/public/common/constants';
+
+const customComparators = {
+  ...builtInComparators,
+  [Comparator.OUTSIDE_RANGE]: {
+    text: i18n.translate('xpack.infra.metrics.alertFlyout.outsideRangeLabel', {
+      defaultMessage: 'Is not between',
+    }),
+    value: Comparator.OUTSIDE_RANGE,
+    requiredValues: 2,
+  },
+};
+
+interface ExpressionRowProps {
+  fields: IFieldType[];
+  expressionId: number;
+  expression: MetricExpression;
+  errors: IErrorObject;
+  canDelete: boolean;
+  addExpression(): void;
+  remove(id: number): void;
+  setAlertParams(id: number, params: MetricExpression): void;
+}
+
+const StyledExpressionRow = euiStyled(EuiFlexGroup)`
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -4px;
+`;
+
+const StyledExpression = euiStyled.div`
+  padding: 0 4px;
+`;
+
+export const ExpressionRow: React.FC<ExpressionRowProps> = props => {
+  const [isExpanded, setRowState] = useState(true);
+  const toggleRowState = useCallback(() => setRowState(!isExpanded), [isExpanded]);
+  const {
+    children,
+    setAlertParams,
+    expression,
+    errors,
+    expressionId,
+    remove,
+    fields,
+    canDelete,
+  } = props;
+  const {
+    aggType = AGGREGATION_TYPES.MAX,
+    metric,
+    comparator = Comparator.GT,
+    threshold = [],
+  } = expression;
+
+  const updateAggType = useCallback(
+    (at: string) => {
+      setAlertParams(expressionId, {
+        ...expression,
+        aggType: at as MetricExpression['aggType'],
+        metric: at === 'count' ? undefined : expression.metric,
+      });
+    },
+    [expressionId, expression, setAlertParams]
+  );
+
+  const updateMetric = useCallback(
+    (m?: MetricExpression['metric']) => {
+      setAlertParams(expressionId, { ...expression, metric: m });
+    },
+    [expressionId, expression, setAlertParams]
+  );
+
+  const updateComparator = useCallback(
+    (c?: string) => {
+      setAlertParams(expressionId, { ...expression, comparator: c as Comparator });
+    },
+    [expressionId, expression, setAlertParams]
+  );
+
+  const updateThreshold = useCallback(
+    t => {
+      if (t.join() !== expression.threshold.join()) {
+        setAlertParams(expressionId, { ...expression, threshold: t });
+      }
+    },
+    [expressionId, expression, setAlertParams]
+  );
+
+  return (
+    <>
+      <EuiFlexGroup gutterSize="xs">
+        <EuiFlexItem grow={false}>
+          <EuiButtonIcon
+            iconType={isExpanded ? 'arrowDown' : 'arrowRight'}
+            onClick={toggleRowState}
+            aria-label={i18n.translate('xpack.infra.metrics.alertFlyout.expandRowLabel', {
+              defaultMessage: 'Expand row.',
+            })}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow>
+          <StyledExpressionRow>
+            <StyledExpression>
+              <WhenExpression
+                customAggTypesOptions={aggregationType}
+                aggType={aggType}
+                onChangeSelectedAggType={updateAggType}
+              />
+            </StyledExpression>
+            {aggType !== 'count' && (
+              <StyledExpression>
+                <OfExpression
+                  customAggTypesOptions={aggregationType}
+                  aggField={metric}
+                  fields={fields.map(f => ({
+                    normalizedType: f.type,
+                    name: f.name,
+                  }))}
+                  aggType={aggType}
+                  errors={errors}
+                  onChangeSelectedAggField={updateMetric}
+                />
+              </StyledExpression>
+            )}
+            <StyledExpression>
+              <ThresholdExpression
+                thresholdComparator={comparator || Comparator.GT}
+                threshold={threshold}
+                customComparators={customComparators}
+                onChangeSelectedThresholdComparator={updateComparator}
+                onChangeSelectedThreshold={updateThreshold}
+                errors={errors}
+              />
+            </StyledExpression>
+          </StyledExpressionRow>
+        </EuiFlexItem>
+        {canDelete && (
+          <EuiFlexItem grow={false}>
+            <EuiButtonIcon
+              aria-label={i18n.translate('xpack.infra.metrics.alertFlyout.removeCondition', {
+                defaultMessage: 'Remove condition',
+              })}
+              color={'danger'}
+              iconType={'trash'}
+              onClick={() => remove(expressionId)}
+            />
+          </EuiFlexItem>
+        )}
+      </EuiFlexGroup>
+      {isExpanded ? <div style={{ padding: '0 0 0 28px' }}>{children}</div> : null}
+      <EuiSpacer size={'s'} />
+    </>
+  );
+};
+
+export const aggregationType: { [key: string]: any } = {
+  avg: {
+    text: i18n.translate('xpack.infra.metrics.alertFlyout.aggregationText.avg', {
+      defaultMessage: 'Average',
+    }),
+    fieldRequired: true,
+    validNormalizedTypes: ['number'],
+    value: AGGREGATION_TYPES.AVERAGE,
+  },
+  max: {
+    text: i18n.translate('xpack.infra.metrics.alertFlyout.aggregationText.max', {
+      defaultMessage: 'Max',
+    }),
+    fieldRequired: true,
+    validNormalizedTypes: ['number', 'date'],
+    value: AGGREGATION_TYPES.MAX,
+  },
+  min: {
+    text: i18n.translate('xpack.infra.metrics.alertFlyout.aggregationText.min', {
+      defaultMessage: 'Min',
+    }),
+    fieldRequired: true,
+    validNormalizedTypes: ['number', 'date'],
+    value: AGGREGATION_TYPES.MIN,
+  },
+  cardinality: {
+    text: i18n.translate('xpack.infra.metrics.alertFlyout.aggregationText.cardinality', {
+      defaultMessage: 'Cardinality',
+    }),
+    fieldRequired: false,
+    value: AGGREGATION_TYPES.CARDINALITY,
+    validNormalizedTypes: ['number'],
+  },
+  rate: {
+    text: i18n.translate('xpack.infra.metrics.alertFlyout.aggregationText.rate', {
+      defaultMessage: 'Rate',
+    }),
+    fieldRequired: false,
+    value: AGGREGATION_TYPES.RATE,
+    validNormalizedTypes: ['number'],
+  },
+  count: {
+    text: i18n.translate('xpack.infra.metrics.alertFlyout.aggregationText.count', {
+      defaultMessage: 'Document count',
+    }),
+    fieldRequired: false,
+    value: AGGREGATION_TYPES.COUNT,
+    validNormalizedTypes: ['number'],
+  },
+  sum: {
+    text: i18n.translate('xpack.infra.metrics.alertFlyout.aggregationText.sum', {
+      defaultMessage: 'Sum',
+    }),
+    fieldRequired: false,
+    value: AGGREGATION_TYPES.SUM,
+    validNormalizedTypes: ['number'],
+  },
+};
diff --git a/x-pack/plugins/infra/public/components/alerting/metrics/validation.tsx b/x-pack/plugins/infra/public/alerting/metric_threshold/components/validation.tsx
similarity index 100%
rename from x-pack/plugins/infra/public/components/alerting/metrics/validation.tsx
rename to x-pack/plugins/infra/public/alerting/metric_threshold/components/validation.tsx
diff --git a/x-pack/plugins/infra/public/alerting/metric_threshold/hooks/use_metrics_explorer_chart_data.ts b/x-pack/plugins/infra/public/alerting/metric_threshold/hooks/use_metrics_explorer_chart_data.ts
new file mode 100644
index 00000000000000..67f66bf742f430
--- /dev/null
+++ b/x-pack/plugins/infra/public/alerting/metric_threshold/hooks/use_metrics_explorer_chart_data.ts
@@ -0,0 +1,59 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { IIndexPattern } from 'src/plugins/data/public';
+import { useMemo } from 'react';
+import { InfraSource } from '../../../../common/http_api/source_api';
+import { AlertContextMeta, MetricExpression } from '../types';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { AlertsContextValue } from '../../../../../triggers_actions_ui/public/application/context/alerts_context';
+import { MetricsExplorerOptions } from '../../../pages/metrics/metrics_explorer/hooks/use_metrics_explorer_options';
+import { useMetricsExplorerData } from '../../../pages/metrics/metrics_explorer/hooks/use_metrics_explorer_data';
+
+export const useMetricsExplorerChartData = (
+  expression: MetricExpression,
+  context: AlertsContextValue<AlertContextMeta>,
+  derivedIndexPattern: IIndexPattern,
+  source: InfraSource | null,
+  filterQuery?: string,
+  groupBy?: string
+) => {
+  const { timeSize, timeUnit } = expression || { timeSize: 1, timeUnit: 'm' };
+  const options: MetricsExplorerOptions = useMemo(
+    () => ({
+      limit: 1,
+      forceInterval: true,
+      groupBy,
+      filterQuery,
+      metrics: [
+        {
+          field: expression.metric,
+          aggregation: expression.aggType,
+        },
+      ],
+      aggregation: expression.aggType || 'avg',
+    }),
+    [expression.aggType, expression.metric, filterQuery, groupBy]
+  );
+  const timerange = useMemo(
+    () => ({
+      interval: `>=${timeSize || 1}${timeUnit}`,
+      from: `now-${(timeSize || 1) * 20}${timeUnit}`,
+      to: 'now',
+    }),
+    [timeSize, timeUnit]
+  );
+
+  return useMetricsExplorerData(
+    options,
+    source?.configuration,
+    derivedIndexPattern,
+    timerange,
+    null,
+    null,
+    context.http.fetch
+  );
+};
diff --git a/x-pack/plugins/infra/public/components/alerting/metrics/metric_threshold_alert_type.ts b/x-pack/plugins/infra/public/alerting/metric_threshold/index.ts
similarity index 72%
rename from x-pack/plugins/infra/public/components/alerting/metrics/metric_threshold_alert_type.ts
rename to x-pack/plugins/infra/public/alerting/metric_threshold/index.ts
index 162102ebd86a80..91b9bafad50117 100644
--- a/x-pack/plugins/infra/public/components/alerting/metrics/metric_threshold_alert_type.ts
+++ b/x-pack/plugins/infra/public/alerting/metric_threshold/index.ts
@@ -5,13 +5,13 @@
  */
 import { i18n } from '@kbn/i18n';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { AlertTypeModel } from '../../../../../triggers_actions_ui/public/types';
-import { Expressions } from './expression';
-import { validateMetricThreshold } from './validation';
+import { AlertTypeModel } from '../../../../triggers_actions_ui/public/types';
+import { Expressions } from './components/expression';
+import { validateMetricThreshold } from './components/validation';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { METRIC_THRESHOLD_ALERT_TYPE_ID } from '../../../../server/lib/alerting/metric_threshold/types';
+import { METRIC_THRESHOLD_ALERT_TYPE_ID } from '../../../server/lib/alerting/metric_threshold/types';
 
-export function getAlertType(): AlertTypeModel {
+export function createMetricThresholdAlertType(): AlertTypeModel {
   return {
     id: METRIC_THRESHOLD_ALERT_TYPE_ID,
     name: i18n.translate('xpack.infra.metrics.alertFlyout.alertName', {
diff --git a/x-pack/plugins/infra/public/alerting/metric_threshold/lib/transform_metrics_explorer_data.ts b/x-pack/plugins/infra/public/alerting/metric_threshold/lib/transform_metrics_explorer_data.ts
new file mode 100644
index 00000000000000..0e631b1e333d75
--- /dev/null
+++ b/x-pack/plugins/infra/public/alerting/metric_threshold/lib/transform_metrics_explorer_data.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 { first } from 'lodash';
+import { MetricsExplorerResponse } from '../../../../common/http_api/metrics_explorer';
+import { MetricThresholdAlertParams, ExpressionChartSeries } from '../types';
+
+export const transformMetricsExplorerData = (
+  params: MetricThresholdAlertParams,
+  data: MetricsExplorerResponse | null
+) => {
+  const { criteria } = params;
+  if (criteria && data) {
+    const firstSeries = first(data.series);
+    const series = firstSeries.rows.reduce((acc, row) => {
+      const { timestamp } = row;
+      criteria.forEach((item, index) => {
+        if (!acc[index]) {
+          acc[index] = [];
+        }
+        const value = (row[`metric_${index}`] as number) || 0;
+        acc[index].push({ timestamp, value });
+      });
+      return acc;
+    }, [] as ExpressionChartSeries);
+    return { id: firstSeries.id, series };
+  }
+};
diff --git a/x-pack/plugins/infra/public/alerting/metric_threshold/types.ts b/x-pack/plugins/infra/public/alerting/metric_threshold/types.ts
new file mode 100644
index 00000000000000..af3baf191bed21
--- /dev/null
+++ b/x-pack/plugins/infra/public/alerting/metric_threshold/types.ts
@@ -0,0 +1,51 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import {
+  MetricExpressionParams,
+  // eslint-disable-next-line @kbn/eslint/no-restricted-paths
+} from '../../../server/lib/alerting/metric_threshold/types';
+import { MetricsExplorerOptions } from '../../pages/metrics/metrics_explorer/hooks/use_metrics_explorer_options';
+import { MetricsExplorerSeries } from '../../../common/http_api/metrics_explorer';
+
+export interface AlertContextMeta {
+  currentOptions?: Partial<MetricsExplorerOptions>;
+  series?: MetricsExplorerSeries;
+}
+
+export type TimeUnit = 's' | 'm' | 'h' | 'd';
+export type MetricExpression = Omit<MetricExpressionParams, 'metric'> & {
+  metric?: string;
+};
+
+export enum AGGREGATION_TYPES {
+  COUNT = 'count',
+  AVERAGE = 'avg',
+  SUM = 'sum',
+  MIN = 'min',
+  MAX = 'max',
+  RATE = 'rate',
+  CARDINALITY = 'cardinality',
+}
+
+export interface MetricThresholdAlertParams {
+  criteria?: MetricExpression[];
+  groupBy?: string;
+  filterQuery?: string;
+  sourceId?: string;
+}
+
+export interface ExpressionChartRow {
+  timestamp: number;
+  value: number;
+}
+
+export type ExpressionChartSeries = ExpressionChartRow[][];
+
+export interface ExpressionChartData {
+  id: string;
+  series: ExpressionChartSeries;
+}
diff --git a/x-pack/plugins/infra/public/pages/metrics/index.tsx b/x-pack/plugins/infra/public/pages/metrics/index.tsx
index cc88dd9e0d0f8f..5dc9802fefd254 100644
--- a/x-pack/plugins/infra/public/pages/metrics/index.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/index.tsx
@@ -28,7 +28,7 @@ import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
 import { WaffleOptionsProvider } from './inventory_view/hooks/use_waffle_options';
 import { WaffleTimeProvider } from './inventory_view/hooks/use_waffle_time';
 import { WaffleFiltersProvider } from './inventory_view/hooks/use_waffle_filters';
-import { AlertDropdown } from '../../components/alerting/metrics/alert_dropdown';
+import { AlertDropdown } from '../../alerting/metric_threshold/components/alert_dropdown';
 
 export const InfrastructurePage = ({ match }: RouteComponentProps) => {
   const uiCapabilities = useKibana().services.application?.capabilities;
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/node_context_menu.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/node_context_menu.tsx
index 275635a33ec266..c528aa885346e4 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/node_context_menu.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/node_context_menu.tsx
@@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import React, { useMemo, useState } from 'react';
-import { AlertFlyout } from '../../../../../components/alerting/metrics/alert_flyout';
+import { AlertFlyout } from '../../../../../alerting/metric_threshold/components/alert_flyout';
 import { InfraWaffleMapNode, InfraWaffleMapOptions } from '../../../../../lib/lib';
 import { getNodeDetailUrl, getNodeLogsUrl } from '../../../../link_to';
 import { createUptimeLink } from '../../lib/create_uptime_link';
diff --git a/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/aggregation.tsx b/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/aggregation.tsx
index 0c0f7b33b3a4a0..5a84d204b3b25e 100644
--- a/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/aggregation.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/aggregation.tsx
@@ -26,6 +26,9 @@ export const MetricsExplorerAggregationPicker = ({ options, onChange }: Props) =
     ['avg']: i18n.translate('xpack.infra.metricsExplorer.aggregationLables.avg', {
       defaultMessage: 'Average',
     }),
+    ['sum']: i18n.translate('xpack.infra.metricsExplorer.aggregationLables.sum', {
+      defaultMessage: 'Sum',
+    }),
     ['max']: i18n.translate('xpack.infra.metricsExplorer.aggregationLables.max', {
       defaultMessage: 'Max',
     }),
diff --git a/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/chart_context_menu.tsx b/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/chart_context_menu.tsx
index 31086a21ca13f8..e13c9dcc069845 100644
--- a/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/chart_context_menu.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/chart_context_menu.tsx
@@ -14,7 +14,7 @@ import {
 } from '@elastic/eui';
 import DateMath from '@elastic/datemath';
 import { Capabilities } from 'src/core/public';
-import { AlertFlyout } from '../../../../components/alerting/metrics/alert_flyout';
+import { AlertFlyout } from '../../../../alerting/metric_threshold/components/alert_flyout';
 import { MetricsExplorerSeries } from '../../../../../common/http_api/metrics_explorer';
 import {
   MetricsExplorerOptions,
diff --git a/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/helpers/create_metric_label.ts b/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/helpers/create_metric_label.ts
index 1607302a6259a5..6343f2848054b7 100644
--- a/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/helpers/create_metric_label.ts
+++ b/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/helpers/create_metric_label.ts
@@ -4,8 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { MetricsExplorerMetric } from '../../../../../../common/http_api/metrics_explorer';
+import { MetricsExplorerOptionsMetric } from '../../hooks/use_metrics_explorer_options';
 
-export const createMetricLabel = (metric: MetricsExplorerMetric) => {
+export const createMetricLabel = (metric: MetricsExplorerOptionsMetric) => {
+  if (metric.label) {
+    return metric.label;
+  }
   return `${metric.aggregation}(${metric.field || ''})`;
 };
diff --git a/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/series_chart.tsx b/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/series_chart.tsx
index ad7ce83539526a..3b84fcbc34836b 100644
--- a/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/series_chart.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/series_chart.tsx
@@ -21,12 +21,15 @@ import {
   MetricsExplorerChartType,
 } from '../hooks/use_metrics_explorer_options';
 
+type NumberOrString = string | number;
+
 interface Props {
   metric: MetricsExplorerOptionsMetric;
-  id: string | number;
+  id: NumberOrString | NumberOrString[];
   series: MetricsExplorerSeries;
   type: MetricsExplorerChartType;
   stack: boolean;
+  opacity?: number;
 }
 
 export const MetricExplorerSeriesChart = (props: Props) => {
@@ -36,13 +39,17 @@ export const MetricExplorerSeriesChart = (props: Props) => {
   return <MetricsExplorerAreaChart {...props} />;
 };
 
-export const MetricsExplorerAreaChart = ({ metric, id, series, type, stack }: Props) => {
+export const MetricsExplorerAreaChart = ({ metric, id, series, type, stack, opacity }: Props) => {
   const color =
     (metric.color && colorTransformer(metric.color)) ||
     colorTransformer(MetricsExplorerColor.color0);
 
-  const yAccessor = `metric_${id}`;
-  const chartId = `series-${series.id}-${yAccessor}`;
+  const yAccessors = Array.isArray(id)
+    ? id.map(i => `metric_${i}`).slice(id.length - 1, id.length)
+    : [`metric_${id}`];
+  const y0Accessors =
+    Array.isArray(id) && id.length > 1 ? id.map(i => `metric_${i}`).slice(0, 1) : undefined;
+  const chartId = `series-${series.id}-${yAccessors.join('-')}`;
 
   const seriesAreaStyle: RecursivePartial<AreaSeriesStyle> = {
     line: {
@@ -50,19 +57,21 @@ export const MetricsExplorerAreaChart = ({ metric, id, series, type, stack }: Pr
       visible: true,
     },
     area: {
-      opacity: 0.5,
+      opacity: opacity || 0.5,
       visible: type === MetricsExplorerChartType.area,
     },
   };
+
   return (
     <AreaSeries
-      id={yAccessor}
+      id={chartId}
       key={chartId}
       name={createMetricLabel(metric)}
       xScaleType={ScaleType.Time}
       yScaleType={ScaleType.Linear}
       xAccessor="timestamp"
-      yAccessors={[yAccessor]}
+      yAccessors={yAccessors}
+      y0Accessors={y0Accessors}
       data={series.rows}
       stackAccessors={stack ? ['timestamp'] : void 0}
       areaSeriesStyle={seriesAreaStyle}
diff --git a/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/hooks/use_metrics_explorer_data.ts b/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/hooks/use_metrics_explorer_data.ts
index 93aacb586a5cde..414e204f3df50b 100644
--- a/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/hooks/use_metrics_explorer_data.ts
+++ b/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/hooks/use_metrics_explorer_data.ts
@@ -7,6 +7,7 @@
 import DateMath from '@elastic/datemath';
 import { isEqual } from 'lodash';
 import { useEffect, useState } from 'react';
+import { HttpHandler } from 'target/types/core/public/http';
 import { IIndexPattern } from 'src/plugins/data/public';
 import { SourceQuery } from '../../../../../common/graphql/types';
 import {
@@ -24,13 +25,15 @@ function isSameOptions(current: MetricsExplorerOptions, next: MetricsExplorerOpt
 
 export function useMetricsExplorerData(
   options: MetricsExplorerOptions,
-  source: SourceQuery.Query['source']['configuration'],
+  source: SourceQuery.Query['source']['configuration'] | undefined,
   derivedIndexPattern: IIndexPattern,
   timerange: MetricsExplorerTimeOptions,
   afterKey: string | null,
-  signal: any
+  signal: any,
+  fetch?: HttpHandler
 ) {
-  const fetch = useKibana().services.http?.fetch;
+  const kibana = useKibana();
+  const fetchFn = fetch ? fetch : kibana.services.http?.fetch;
   const [error, setError] = useState<Error | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
   const [data, setData] = useState<MetricsExplorerResponse | null>(null);
@@ -46,13 +49,17 @@ export function useMetricsExplorerData(
         if (!from || !to) {
           throw new Error('Unalble to parse timerange');
         }
-        if (!fetch) {
+        if (!fetchFn) {
           throw new Error('HTTP service is unavailable');
         }
+        if (!source) {
+          throw new Error('Source is unavailable');
+        }
         const response = decodeOrThrow(metricsExplorerResponseRT)(
-          await fetch('/api/infra/metrics_explorer', {
+          await fetchFn('/api/infra/metrics_explorer', {
             method: 'POST',
             body: JSON.stringify({
+              forceInterval: options.forceInterval,
               metrics:
                 options.aggregation === 'count'
                   ? [{ aggregation: 'count' }]
diff --git a/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/hooks/use_metrics_explorer_options.ts b/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/hooks/use_metrics_explorer_options.ts
index 9d124a6af80123..1b3e809fde61fd 100644
--- a/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/hooks/use_metrics_explorer_options.ts
+++ b/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/hooks/use_metrics_explorer_options.ts
@@ -40,6 +40,7 @@ export interface MetricsExplorerOptions {
   groupBy?: string;
   filterQuery?: string;
   aggregation: MetricsExplorerAggregation;
+  forceInterval?: boolean;
 }
 
 export interface MetricsExplorerTimeOptions {
diff --git a/x-pack/plugins/infra/public/plugin.ts b/x-pack/plugins/infra/public/plugin.ts
index 40366b2a54f243..8cdfc4f381f436 100644
--- a/x-pack/plugins/infra/public/plugin.ts
+++ b/x-pack/plugins/infra/public/plugin.ts
@@ -21,8 +21,8 @@ import { UsageCollectionSetup } from '../../../../src/plugins/usage_collection/p
 import { DataEnhancedSetup, DataEnhancedStart } from '../../data_enhanced/public';
 
 import { TriggersAndActionsUIPublicPluginSetup } from '../../../plugins/triggers_actions_ui/public';
-import { getAlertType as getMetricsAlertType } from './components/alerting/metrics/metric_threshold_alert_type';
 import { getAlertType as getLogsAlertType } from './components/alerting/logs/log_threshold_alert_type';
+import { createMetricThresholdAlertType } from './alerting/metric_threshold';
 
 export type ClientSetup = void;
 export type ClientStart = void;
@@ -53,8 +53,8 @@ export class Plugin
   setup(core: CoreSetup, pluginsSetup: ClientPluginsSetup) {
     registerFeatures(pluginsSetup.home);
 
-    pluginsSetup.triggers_actions_ui.alertTypeRegistry.register(getMetricsAlertType());
     pluginsSetup.triggers_actions_ui.alertTypeRegistry.register(getLogsAlertType());
+    pluginsSetup.triggers_actions_ui.alertTypeRegistry.register(createMetricThresholdAlertType());
 
     core.application.register({
       id: 'logs',
diff --git a/x-pack/plugins/infra/server/routes/metrics_explorer/lib/populate_series_with_tsvb_data.ts b/x-pack/plugins/infra/server/routes/metrics_explorer/lib/populate_series_with_tsvb_data.ts
index 3517800ea0dd10..e735a26d96a91d 100644
--- a/x-pack/plugins/infra/server/routes/metrics_explorer/lib/populate_series_with_tsvb_data.ts
+++ b/x-pack/plugins/infra/server/routes/metrics_explorer/lib/populate_series_with_tsvb_data.ts
@@ -72,7 +72,9 @@ export const populateSeriesWithTSVBData = (
   );
 
   if (calculatedInterval) {
-    model.interval = `>=${calculatedInterval}s`;
+    model.interval = options.forceInterval
+      ? options.timerange.interval
+      : `>=${calculatedInterval}s`;
   }
 
   // Get TSVB results using the model, timerange and filters