From 595ba8f15cd35f7faae34718a5e3d74f34108be1 Mon Sep 17 00:00:00 2001
From: Ido Cohen <90558359+CohenIdo@users.noreply.github.com>
Date: Tue, 3 Jan 2023 12:15:59 +0200
Subject: [PATCH 1/9] [Cloud Posture] CSPM telemetry accounts stats

---
 .../collectors/accounts_stats_collector.ts    | 241 ++++++++++++++++++
 .../collectors/indices_stats_collector.ts     |  70 ++---
 .../lib/telemetry/collectors/register.ts      |   7 +-
 .../collectors/resources_stats_collector.ts   |   9 +-
 .../server/lib/telemetry/collectors/schema.ts |  16 ++
 .../server/lib/telemetry/collectors/types.ts  |  14 +
 .../schema/xpack_plugins.json                 |  40 +++
 7 files changed, 358 insertions(+), 39 deletions(-)
 create mode 100644 x-pack/plugins/cloud_security_posture/server/lib/telemetry/collectors/accounts_stats_collector.ts

diff --git a/x-pack/plugins/cloud_security_posture/server/lib/telemetry/collectors/accounts_stats_collector.ts b/x-pack/plugins/cloud_security_posture/server/lib/telemetry/collectors/accounts_stats_collector.ts
new file mode 100644
index 0000000000000..01637f43a5dea
--- /dev/null
+++ b/x-pack/plugins/cloud_security_posture/server/lib/telemetry/collectors/accounts_stats_collector.ts
@@ -0,0 +1,241 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import type { ElasticsearchClient } from '@kbn/core-elasticsearch-server';
+import type { Logger } from '@kbn/core/server';
+import type { SearchRequest } from '@elastic/elasticsearch/lib/api/types';
+import { calculatePostureScore } from '../../../routes/compliance_dashboard/get_stats';
+import type { CspmAccountsStats } from './types';
+import { LATEST_FINDINGS_INDEX_DEFAULT_NS } from '../../../../common/constants';
+
+interface Value {
+  value: number;
+}
+
+interface DocCount {
+  doc_count: number;
+}
+
+interface BenchmarkName {
+  metrics: { 'rule.benchmark.name': string };
+}
+
+interface BenchmarkId {
+  metrics: { 'rule.benchmark.id': string };
+}
+
+interface BenchmarkVersion {
+  metrics: { 'rule.benchmark.version': string };
+}
+
+interface AccountsStats {
+  accounts: {
+    buckets: AccountEntity[];
+  };
+}
+interface AccountEntity {
+  key: string; // account_id
+  doc_count: number; // latest findings doc count
+  passed_findings_count: DocCount;
+  failed_findings_count: DocCount;
+  benchmark_name: { top: BenchmarkName[] };
+  benchmark_id: { top: BenchmarkId[] };
+  benchmark_version: { top: BenchmarkVersion[] };
+  agents_count: Value;
+  nodes_count: Value;
+  pods_count: Value;
+  resources: {
+    pods_count: Value;
+  };
+}
+
+const getAccountsStatsQuery = (index: string): SearchRequest => ({
+  index,
+  query: {
+    match_all: {},
+  },
+  aggs: {
+    accounts: {
+      terms: {
+        field: 'cluster_id',
+        order: {
+          _count: 'desc',
+        },
+        size: 100,
+      },
+      aggs: {
+        nodes_count: {
+          cardinality: {
+            field: 'host.name',
+          },
+        },
+        agents_count: {
+          cardinality: {
+            field: 'agent.id',
+          },
+        },
+        benchmark_id: {
+          top_metrics: {
+            metrics: {
+              field: 'rule.benchmark.id',
+            },
+            size: 1,
+            sort: {
+              '@timestamp': 'desc',
+            },
+          },
+        },
+        benchmark_version: {
+          top_metrics: {
+            metrics: {
+              field: 'rule.benchmark.version',
+            },
+            size: 1,
+            sort: {
+              '@timestamp': 'desc',
+            },
+          },
+        },
+        benchmark_name: {
+          top_metrics: {
+            metrics: {
+              field: 'rule.benchmark.name',
+            },
+            size: 1,
+            sort: {
+              '@timestamp': 'desc',
+            },
+          },
+        },
+        passed_findings_count: {
+          filter: {
+            bool: {
+              filter: [
+                {
+                  bool: {
+                    should: [
+                      {
+                        term: {
+                          'result.evaluation': 'passed',
+                        },
+                      },
+                    ],
+                    minimum_should_match: 1,
+                  },
+                },
+              ],
+            },
+          },
+        },
+        failed_findings_count: {
+          filter: {
+            bool: {
+              filter: [
+                {
+                  bool: {
+                    should: [
+                      {
+                        term: {
+                          'result.evaluation': 'failed',
+                        },
+                      },
+                    ],
+                    minimum_should_match: 1,
+                  },
+                },
+              ],
+            },
+          },
+        },
+        resources: {
+          filter: {
+            bool: {
+              filter: [
+                {
+                  bool: {
+                    should: [
+                      {
+                        term: {
+                          'resource.sub_type': 'Pod',
+                        },
+                      },
+                    ],
+                    minimum_should_match: 1,
+                  },
+                },
+              ],
+            },
+          },
+          aggs: {
+            pods_count: {
+              cardinality: {
+                field: 'resource.id',
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+
+  size: 0,
+  _source: false,
+});
+
+const getCspmAccountsStats = (
+  aggregatedResourcesStats: AccountsStats,
+  logger: Logger
+): CspmAccountsStats[] => {
+  const accounts = aggregatedResourcesStats.accounts.buckets;
+
+  const cspmAccountsStats = accounts.map((account) => ({
+    account_id: account.key,
+    latest_findings_doc_count: account.doc_count,
+    posture_score: calculatePostureScore(
+      account.passed_findings_count.doc_count,
+      account.failed_findings_count.doc_count
+    ),
+    passed_findings_count: account.passed_findings_count.doc_count,
+    failed_findings_count: account.failed_findings_count.doc_count,
+    benchmark_name: account.benchmark_name.top[0].metrics['rule.benchmark.name'],
+    benchmark_id: account.benchmark_id.top[0].metrics['rule.benchmark.id'],
+    benchmark_version: account.benchmark_version.top[0].metrics['rule.benchmark.version'],
+    agents_count: account.agents_count.value,
+    nodes_count: account.nodes_count.value,
+    pods_count: account.resources.pods_count.value,
+  }));
+  logger.info('CSPM telemetry: accounts stats was sent');
+
+  return cspmAccountsStats;
+};
+
+export const getAccountsStats = async (
+  esClient: ElasticsearchClient,
+  logger: Logger
+): Promise<CspmAccountsStats[]> => {
+  try {
+    const isIndexExists = await esClient.indices.exists({
+      index: LATEST_FINDINGS_INDEX_DEFAULT_NS,
+    });
+
+    if (isIndexExists) {
+      const accountsStatsResponse = await esClient.search<unknown, AccountsStats>(
+        getAccountsStatsQuery(LATEST_FINDINGS_INDEX_DEFAULT_NS)
+      );
+
+      const cspmAccountsStats = accountsStatsResponse.aggregations
+        ? getCspmAccountsStats(accountsStatsResponse.aggregations, logger)
+        : [];
+
+      return cspmAccountsStats;
+    }
+
+    return [];
+  } catch (e) {
+    logger.error(`Failed to get resources stats ${e}`);
+    return [];
+  }
+};
diff --git a/x-pack/plugins/cloud_security_posture/server/lib/telemetry/collectors/indices_stats_collector.ts b/x-pack/plugins/cloud_security_posture/server/lib/telemetry/collectors/indices_stats_collector.ts
index a1bb49216262f..0feacc82c42a2 100644
--- a/x-pack/plugins/cloud_security_posture/server/lib/telemetry/collectors/indices_stats_collector.ts
+++ b/x-pack/plugins/cloud_security_posture/server/lib/telemetry/collectors/indices_stats_collector.ts
@@ -4,29 +4,36 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { ElasticsearchClient } from '@kbn/core-elasticsearch-server';
 import type { Logger } from '@kbn/core/server';
+import type { ElasticsearchClient } from '@kbn/core-elasticsearch-server';
+import type { CspmIndicesStats, IndexStats } from './types';
 import {
   BENCHMARK_SCORE_INDEX_DEFAULT_NS,
   FINDINGS_INDEX_DEFAULT_NS,
   LATEST_FINDINGS_INDEX_DEFAULT_NS,
 } from '../../../../common/constants';
-import type { CspmIndicesStats, IndexStats } from './types';
 
-export const getIndicesStats = async (
+const getIndexDocCount = (esClient: ElasticsearchClient, index: string) =>
+  esClient.indices.stats({ index });
+
+const getLatestDocTimestamp = async (
   esClient: ElasticsearchClient,
-  logger: Logger
-): Promise<CspmIndicesStats> => {
-  const [findings, latestFindings, score] = await Promise.all([
-    getIndexStats(esClient, FINDINGS_INDEX_DEFAULT_NS, logger),
-    getIndexStats(esClient, LATEST_FINDINGS_INDEX_DEFAULT_NS, logger),
-    getIndexStats(esClient, BENCHMARK_SCORE_INDEX_DEFAULT_NS, logger),
-  ]);
-  return {
-    findings,
-    latest_findings: latestFindings,
-    score,
-  };
+  index: string
+): Promise<string | null> => {
+  const latestTimestamp = await esClient.search({
+    index,
+    query: {
+      match_all: {},
+    },
+    sort: '@timestamp:desc',
+    size: 1,
+    fields: ['@timestamp'],
+    _source: false,
+  });
+
+  const latestEventTimestamp = latestTimestamp.hits?.hits[0]?.fields;
+
+  return latestEventTimestamp ? latestEventTimestamp['@timestamp'][0] : null;
 };
 
 const getIndexStats = async (
@@ -60,25 +67,18 @@ const getIndexStats = async (
   }
 };
 
-const getIndexDocCount = (esClient: ElasticsearchClient, index: string) =>
-  esClient.indices.stats({ index });
-
-const getLatestDocTimestamp = async (
+export const getIndicesStats = async (
   esClient: ElasticsearchClient,
-  index: string
-): Promise<string | null> => {
-  const latestTimestamp = await esClient.search({
-    index,
-    query: {
-      match_all: {},
-    },
-    sort: '@timestamp:desc',
-    size: 1,
-    fields: ['@timestamp'],
-    _source: false,
-  });
-
-  const latestEventTimestamp = latestTimestamp.hits?.hits[0]?.fields;
-
-  return latestEventTimestamp ? latestEventTimestamp['@timestamp'][0] : null;
+  logger: Logger
+): Promise<CspmIndicesStats> => {
+  const [findings, latestFindings, score] = await Promise.all([
+    getIndexStats(esClient, FINDINGS_INDEX_DEFAULT_NS, logger),
+    getIndexStats(esClient, LATEST_FINDINGS_INDEX_DEFAULT_NS, logger),
+    getIndexStats(esClient, BENCHMARK_SCORE_INDEX_DEFAULT_NS, logger),
+  ]);
+  return {
+    findings,
+    latest_findings: latestFindings,
+    score,
+  };
 };
diff --git a/x-pack/plugins/cloud_security_posture/server/lib/telemetry/collectors/register.ts b/x-pack/plugins/cloud_security_posture/server/lib/telemetry/collectors/register.ts
index 5f5de23434145..9eeb3338a9035 100644
--- a/x-pack/plugins/cloud_security_posture/server/lib/telemetry/collectors/register.ts
+++ b/x-pack/plugins/cloud_security_posture/server/lib/telemetry/collectors/register.ts
@@ -11,6 +11,7 @@ import { getIndicesStats } from './indices_stats_collector';
 import { getResourcesStats } from './resources_stats_collector';
 import { cspmUsageSchema } from './schema';
 import { CspmUsage } from './types';
+import { getAccountsStats } from './accounts_stats_collector';
 
 export function registerCspmUsageCollector(
   logger: Logger,
@@ -26,13 +27,15 @@ export function registerCspmUsageCollector(
     type: 'cloud_security_posture',
     isReady: () => true,
     fetch: async (collectorFetchContext: CollectorFetchContext) => {
-      const [indicesStats, resourcesStats] = await Promise.all([
+      const [indicesStats, accountsStats, resourcesStats] = await Promise.all([
         getIndicesStats(collectorFetchContext.esClient, logger),
-        await getResourcesStats(collectorFetchContext.esClient, logger),
+        getAccountsStats(collectorFetchContext.esClient, logger),
+        getResourcesStats(collectorFetchContext.esClient, logger),
       ]);
 
       return {
         indices: indicesStats,
+        accounts_stats: accountsStats,
         resources_stats: resourcesStats,
       };
     },
diff --git a/x-pack/plugins/cloud_security_posture/server/lib/telemetry/collectors/resources_stats_collector.ts b/x-pack/plugins/cloud_security_posture/server/lib/telemetry/collectors/resources_stats_collector.ts
index 53b7f2af26c8d..3802f6651cd19 100644
--- a/x-pack/plugins/cloud_security_posture/server/lib/telemetry/collectors/resources_stats_collector.ts
+++ b/x-pack/plugins/cloud_security_posture/server/lib/telemetry/collectors/resources_stats_collector.ts
@@ -110,7 +110,10 @@ const getEvaluationStats = (resourceSubType: ResourceSubType) => {
   return { passed_findings_count: passed, failed_findings_count: failed };
 };
 
-const getCspmResourcesStats = (aggregatedResourcesStats: ResourcesStats): CspmResourcesStats[] => {
+const getCspmResourcesStats = (
+  aggregatedResourcesStats: ResourcesStats,
+  logger: Logger
+): CspmResourcesStats[] => {
   const accounts = aggregatedResourcesStats.accounts.buckets;
 
   const resourcesStats = accounts.map((account) => {
@@ -129,6 +132,8 @@ const getCspmResourcesStats = (aggregatedResourcesStats: ResourcesStats): CspmRe
       });
     });
   });
+  logger.info('CSPM telemetry: resources stats was sent');
+
   return resourcesStats.flat(2);
 };
 
@@ -147,7 +152,7 @@ export const getResourcesStats = async (
       );
 
       const cspmResourcesStats = resourcesStatsResponse.aggregations
-        ? getCspmResourcesStats(resourcesStatsResponse.aggregations)
+        ? getCspmResourcesStats(resourcesStatsResponse.aggregations, logger)
         : [];
 
       return cspmResourcesStats;
diff --git a/x-pack/plugins/cloud_security_posture/server/lib/telemetry/collectors/schema.ts b/x-pack/plugins/cloud_security_posture/server/lib/telemetry/collectors/schema.ts
index 9e25309369934..b7ed05f4532ce 100644
--- a/x-pack/plugins/cloud_security_posture/server/lib/telemetry/collectors/schema.ts
+++ b/x-pack/plugins/cloud_security_posture/server/lib/telemetry/collectors/schema.ts
@@ -65,4 +65,20 @@ export const cspmUsageSchema: MakeSchemaFrom<CspmUsage> = {
       failed_findings_count: { type: 'long' },
     },
   },
+  accounts_stats: {
+    type: 'array',
+    items: {
+      account_id: { type: 'keyword' },
+      posture_score: { type: 'long' },
+      latest_findings_doc_count: { type: 'long' },
+      benchmark_id: { type: 'keyword' },
+      benchmark_name: { type: 'keyword' },
+      benchmark_version: { type: 'keyword' },
+      passed_findings_count: { type: 'long' },
+      failed_findings_count: { type: 'long' },
+      agents_count: { type: 'short' },
+      nodes_count: { type: 'short' },
+      pods_count: { type: 'short' },
+    },
+  },
 };
diff --git a/x-pack/plugins/cloud_security_posture/server/lib/telemetry/collectors/types.ts b/x-pack/plugins/cloud_security_posture/server/lib/telemetry/collectors/types.ts
index c17f07cb6cdc1..58e2932c231bb 100644
--- a/x-pack/plugins/cloud_security_posture/server/lib/telemetry/collectors/types.ts
+++ b/x-pack/plugins/cloud_security_posture/server/lib/telemetry/collectors/types.ts
@@ -8,6 +8,7 @@
 export interface CspmUsage {
   indices: CspmIndicesStats;
   resources_stats: CspmResourcesStats[];
+  accounts_stats: CspmAccountsStats[];
 }
 
 export interface CspmIndicesStats {
@@ -32,3 +33,16 @@ export interface CspmResourcesStats {
   passed_findings_count: number;
   failed_findings_count: number;
 }
+export interface CspmAccountsStats {
+  account_id: string;
+  posture_score: number;
+  latest_findings_doc_count: number;
+  benchmark_id: string;
+  benchmark_name: string;
+  benchmark_version: string;
+  passed_findings_count: number;
+  failed_findings_count: number;
+  agents_count: number;
+  nodes_count: number;
+  pods_count: number;
+}
diff --git a/x-pack/plugins/telemetry_collection_xpack/schema/xpack_plugins.json b/x-pack/plugins/telemetry_collection_xpack/schema/xpack_plugins.json
index 18ab743d599d0..cb3e798e4a6e7 100644
--- a/x-pack/plugins/telemetry_collection_xpack/schema/xpack_plugins.json
+++ b/x-pack/plugins/telemetry_collection_xpack/schema/xpack_plugins.json
@@ -5143,6 +5143,46 @@
               }
             }
           }
+        },
+        "accounts_stats": {
+          "type": "array",
+          "items": {
+            "properties": {
+              "account_id": {
+                "type": "keyword"
+              },
+              "posture_score": {
+                "type": "long"
+              },
+              "latest_findings_doc_count": {
+                "type": "long"
+              },
+              "benchmark_id": {
+                "type": "keyword"
+              },
+              "benchmark_name": {
+                "type": "keyword"
+              },
+              "benchmark_version": {
+                "type": "keyword"
+              },
+              "passed_findings_count": {
+                "type": "long"
+              },
+              "failed_findings_count": {
+                "type": "long"
+              },
+              "agents_count": {
+                "type": "short"
+              },
+              "nodes_count": {
+                "type": "short"
+              },
+              "pods_count": {
+                "type": "short"
+              }
+            }
+          }
         }
       }
     },

From fa3972b50e85813cd790c4258291ce582f181ec2 Mon Sep 17 00:00:00 2001
From: Yaroslav Kuznietsov <kuznetsov.yaroslav.yk@gmail.com>
Date: Tue, 3 Jan 2023 12:17:31 +0200
Subject: [PATCH 2/9] [Discover][Unified Search] Clicking on an individual
 error should focus the error on the monaco editor. (#148171)

## Summary
Completes part of https://github.com/elastic/kibana/issues/136950.
Closes https://github.com/elastic/kibana/issues/147986

### Basic case:

https://user-images.githubusercontent.com/22456368/209937498-c007be4e-4ced-46c4-bac5-5786b3d88074.mov

### Case with updating query, not running it, and clicking on errors:

https://user-images.githubusercontent.com/22456368/209937718-a55e13fd-5a7c-4ec2-ac6f-bfce9578d75a.mov

### Fixed bug related to clearing the previous errors:
#### Before:


https://user-images.githubusercontent.com/22456368/209938380-3fcd04a6-8c49-4bc7-82f8-9e2cccf7e369.mov

#### After


https://user-images.githubusercontent.com/22456368/209938517-53101589-206e-4c26-be59-6ddb499c6183.mov

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../application/main/hooks/use_data_state.ts  |  2 +-
 .../editor_footer.tsx                         | 24 ++++++++++++++--
 .../text_based_languages_editor/helpers.ts    | 11 +++++++-
 .../text_based_languages_editor/index.tsx     | 28 ++++++++++++++++---
 4 files changed, 56 insertions(+), 9 deletions(-)

diff --git a/src/plugins/discover/public/application/main/hooks/use_data_state.ts b/src/plugins/discover/public/application/main/hooks/use_data_state.ts
index fe512e747b4a1..e27e31f147671 100644
--- a/src/plugins/discover/public/application/main/hooks/use_data_state.ts
+++ b/src/plugins/discover/public/application/main/hooks/use_data_state.ts
@@ -15,7 +15,7 @@ export function useDataState<T extends DataMsg>(data$: BehaviorSubject<T>) {
   useEffect(() => {
     const subscription = data$.subscribe((next) => {
       if (next.fetchStatus !== fetchState.fetchStatus) {
-        setFetchState({ ...fetchState, ...next });
+        setFetchState({ ...fetchState, ...next, ...(next.error ? {} : { error: undefined }) });
       }
     });
     return () => subscription.unsubscribe();
diff --git a/src/plugins/unified_search/public/query_string_input/text_based_languages_editor/editor_footer.tsx b/src/plugins/unified_search/public/query_string_input/text_based_languages_editor/editor_footer.tsx
index c9baf17eeec8d..ff7237e059925 100644
--- a/src/plugins/unified_search/public/query_string_input/text_based_languages_editor/editor_footer.tsx
+++ b/src/plugins/unified_search/public/query_string_input/text_based_languages_editor/editor_footer.tsx
@@ -21,6 +21,9 @@ import {
   EuiDescriptionListDescription,
 } from '@elastic/eui';
 import { Interpolation, Theme, css } from '@emotion/react';
+import { css as classNameCss } from '@emotion/css';
+
+import type { MonacoError } from './helpers';
 
 const isMac = navigator.platform.toLowerCase().indexOf('mac') >= 0;
 const COMMAND_KEY = isMac ? '⌘' : '^';
@@ -28,13 +31,17 @@ const COMMAND_KEY = isMac ? '⌘' : '^';
 interface EditorFooterProps {
   lines: number;
   containerCSS: Interpolation<Theme>;
-  errors?: Array<{ startLineNumber: number; message: string }>;
+  errors?: MonacoError[];
+  onErrorClick: (error: MonacoError) => void;
+  refreshErrors: () => void;
 }
 
 export const EditorFooter = memo(function EditorFooter({
   lines,
   containerCSS,
   errors,
+  onErrorClick,
+  refreshErrors,
 }: EditorFooterProps) {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   return (
@@ -75,7 +82,10 @@ export const EditorFooter = memo(function EditorFooter({
                             text-decoration: underline;
                           }
                         `}
-                        onClick={() => setIsPopoverOpen(!isPopoverOpen)}
+                        onClick={() => {
+                          refreshErrors();
+                          setIsPopoverOpen(!isPopoverOpen);
+                        }}
                       >
                         <p>
                           {i18n.translate(
@@ -104,7 +114,15 @@ export const EditorFooter = memo(function EditorFooter({
                       <EuiDescriptionList>
                         {errors.map((error, index) => {
                           return (
-                            <EuiDescriptionListDescription key={index}>
+                            <EuiDescriptionListDescription
+                              key={index}
+                              className={classNameCss`
+                                &:hover {
+                                  cursor: pointer;
+                                }
+                              `}
+                              onClick={() => onErrorClick(error)}
+                            >
                               <EuiFlexGroup gutterSize="xl" alignItems="flexStart">
                                 <EuiFlexItem grow={false}>
                                   <EuiFlexGroup gutterSize="s" alignItems="center">
diff --git a/src/plugins/unified_search/public/query_string_input/text_based_languages_editor/helpers.ts b/src/plugins/unified_search/public/query_string_input/text_based_languages_editor/helpers.ts
index 191b82f5817a3..58e603fa62d4f 100644
--- a/src/plugins/unified_search/public/query_string_input/text_based_languages_editor/helpers.ts
+++ b/src/plugins/unified_search/public/query_string_input/text_based_languages_editor/helpers.ts
@@ -11,6 +11,15 @@ import useDebounce from 'react-use/lib/useDebounce';
 import { monaco } from '@kbn/monaco';
 import { i18n } from '@kbn/i18n';
 
+export interface MonacoError {
+  message: string;
+  startColumn: number;
+  startLineNumber: number;
+  endColumn: number;
+  endLineNumber: number;
+  severity: monaco.MarkerSeverity;
+}
+
 export const useDebounceWithOptions = (
   fn: Function,
   { skipFirstRender }: { skipFirstRender: boolean } = { skipFirstRender: false },
@@ -33,7 +42,7 @@ export const useDebounceWithOptions = (
   );
 };
 
-export const parseErrors = (errors: Error[], code: string) => {
+export const parseErrors = (errors: Error[], code: string): MonacoError[] => {
   return errors.map((error) => {
     if (error.message.includes('line')) {
       const text = error.message.split('line')[1];
diff --git a/src/plugins/unified_search/public/query_string_input/text_based_languages_editor/index.tsx b/src/plugins/unified_search/public/query_string_input/text_based_languages_editor/index.tsx
index 34e1eab4bd55f..6ea8724923352 100644
--- a/src/plugins/unified_search/public/query_string_input/text_based_languages_editor/index.tsx
+++ b/src/plugins/unified_search/public/query_string_input/text_based_languages_editor/index.tsx
@@ -43,6 +43,7 @@ import {
   parseErrors,
   getInlineEditorText,
   getDocumentationSections,
+  MonacoError,
 } from './helpers';
 import { EditorFooter } from './editor_footer';
 import { ResizableButton } from './resizable_button';
@@ -103,9 +104,7 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
   const [isCompactFocused, setIsCompactFocused] = useState(isCodeEditorExpanded);
   const [isCodeEditorExpandedFocused, setIsCodeEditorExpandedFocused] = useState(false);
   const [isWordWrapped, setIsWordWrapped] = useState(true);
-  const [editorErrors, setEditorErrors] = useState<
-    Array<{ startLineNumber: number; message: string }>
-  >([]);
+  const [editorErrors, setEditorErrors] = useState<MonacoError[]>([]);
   const [documentationSections, setDocumentationSections] =
     useState<LanguageDocumentationSections>();
   const kibana = useKibana<IUnifiedSearchPluginServices>();
@@ -241,6 +240,19 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
     [errors]
   );
 
+  const onErrorClick = useCallback(({ startLineNumber, startColumn }: MonacoError) => {
+    if (!editor1.current) {
+      return;
+    }
+
+    editor1.current.focus();
+    editor1.current.setPosition({
+      lineNumber: startLineNumber,
+      column: startColumn,
+    });
+    editor1.current.revealLine(startLineNumber);
+  }, []);
+
   // Clean up the monaco editor and DOM on unmount
   useEffect(() => {
     const model = editorModel;
@@ -512,6 +524,8 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
                         lines={lines}
                         containerCSS={styles.bottomContainer}
                         errors={editorErrors}
+                        onErrorClick={onErrorClick}
+                        refreshErrors={onTextLangQuerySubmit}
                       />
                     )}
                   </div>
@@ -577,7 +591,13 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
         )}
       </EuiFlexGroup>
       {isCodeEditorExpanded && (
-        <EditorFooter lines={lines} containerCSS={styles.bottomContainer} errors={editorErrors} />
+        <EditorFooter
+          lines={lines}
+          containerCSS={styles.bottomContainer}
+          errors={editorErrors}
+          onErrorClick={onErrorClick}
+          refreshErrors={onTextLangQuerySubmit}
+        />
       )}
       {isCodeEditorExpanded && (
         <ResizableButton

From ae607349eb475b82690ef2fdbae30a7f0ea61921 Mon Sep 17 00:00:00 2001
From: Dmitrii Shevchenko <dmitrii.shevchenko@elastic.co>
Date: Tue, 3 Jan 2023 12:07:17 +0100
Subject: [PATCH 3/9] [Fleet] Fix crashes when installing a package with a lot
 of saved objects (#148141)

**Resolves: https://github.com/elastic/kibana/issues/147695,
https://github.com/elastic/kibana/issues/148174**
**Related to: https://github.com/elastic/kibana/pull/145851,
https://github.com/elastic/kibana/issues/137420**

## Summary

This PR improves the stability of the Fleet packages installation
process with many saved objects.

1. Changed mappings of the `installed_kibana` and `package_assets`
fields from `nested` to `object` with `enabled: false`. Values of those
fields were retrieved from `_source`, and no queries or aggregations
were performed against them. So the mappings were unused, while during
the installation of packages containing more than 10,000 saved objects,
an error was thrown due to the nested field limitations:

   ```
Error installing security_detection_engine 8.4.1: The number of nested
documents has exceeded the allowed limit of
   [10000].
This limit can be set by changing the
[index.mapping.nested_objects.limit] index level setting.
   ```
2. Improved the deletion of previous package assets by switching from
sending multiple `savedObjectsClient.delete` requests in parallel to a
single `savedObjectsClient.bulkDelete` request. Multiple parallel
requests were causing the Elasticsearch cluster to stop responding for
some time; see [this
ticket](https://github.com/elastic/kibana/issues/147695) for more info.

**Before**
![Screenshot 2022-12-28 at 11 09
35](https://user-images.githubusercontent.com/1938181/209816219-ade6dd0a-0d56-4acc-929e-b88571f0fe81.png)

**After**
![Screenshot 2022-12-28 at 13 56
44](https://user-images.githubusercontent.com/1938181/209816209-16c69922-4ae2-4589-9aa4-5a28050037f4.png)
---
 .../migrations/check_registered_types.test.ts      |  2 +-
 x-pack/plugins/fleet/server/saved_objects/index.ts | 14 ++++----------
 .../fleet/server/services/epm/archive/storage.ts   |  5 ++---
 .../fleet/server/services/epm/packages/remove.ts   |  5 +----
 4 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/src/core/server/integration_tests/saved_objects/migrations/check_registered_types.test.ts b/src/core/server/integration_tests/saved_objects/migrations/check_registered_types.test.ts
index 2c6fee861ce7d..048efa5008533 100644
--- a/src/core/server/integration_tests/saved_objects/migrations/check_registered_types.test.ts
+++ b/src/core/server/integration_tests/saved_objects/migrations/check_registered_types.test.ts
@@ -85,7 +85,7 @@ describe('checking migration metadata changes on all registered SO types', () =>
         "endpoint:user-artifact": "f94c250a52b30d0a2d32635f8b4c5bdabd1e25c0",
         "endpoint:user-artifact-manifest": "8c14d49a385d5d1307d956aa743ec78de0b2be88",
         "enterprise_search_telemetry": "fafcc8318528d34f721c42d1270787c52565bad5",
-        "epm-packages": "2915aee4302d4b00472ed05c21f59b7d498b5206",
+        "epm-packages": "7d80ba3f1fcd80316aa0b112657272034b66d5a8",
         "epm-packages-assets": "9fd3d6726ac77369249e9a973902c2cd615fc771",
         "event_loop_delays_daily": "d2ed39cf669577d90921c176499908b4943fb7bd",
         "exception-list": "fe8cc004fd2742177cdb9300f4a67689463faf9c",
diff --git a/x-pack/plugins/fleet/server/saved_objects/index.ts b/x-pack/plugins/fleet/server/saved_objects/index.ts
index 6c87e894e5777..03f072747a33d 100644
--- a/x-pack/plugins/fleet/server/saved_objects/index.ts
+++ b/x-pack/plugins/fleet/server/saved_objects/index.ts
@@ -266,19 +266,13 @@ const getSavedObjectTypes = (
           },
         },
         installed_kibana: {
-          type: 'nested',
-          properties: {
-            id: { type: 'keyword' },
-            type: { type: 'keyword' },
-          },
+          type: 'object',
+          enabled: false,
         },
         installed_kibana_space_id: { type: 'keyword' },
         package_assets: {
-          type: 'nested',
-          properties: {
-            id: { type: 'keyword' },
-            type: { type: 'keyword' },
-          },
+          type: 'object',
+          enabled: false,
         },
         install_started_at: { type: 'date' },
         install_version: { type: 'keyword' },
diff --git a/x-pack/plugins/fleet/server/services/epm/archive/storage.ts b/x-pack/plugins/fleet/server/services/epm/archive/storage.ts
index c6176b94f5fd2..3b6f38971eff7 100644
--- a/x-pack/plugins/fleet/server/services/epm/archive/storage.ts
+++ b/x-pack/plugins/fleet/server/services/epm/archive/storage.ts
@@ -102,10 +102,9 @@ export async function removeArchiveEntries(opts: {
 }) {
   const { savedObjectsClient, refs } = opts;
   if (!refs) return;
-  const results = await Promise.all(
-    refs.map((ref) => savedObjectsClient.delete(ASSETS_SAVED_OBJECT_TYPE, ref.id))
+  return savedObjectsClient.bulkDelete(
+    refs.map((ref) => ({ id: ref.id, type: ASSETS_SAVED_OBJECT_TYPE }))
   );
-  return results;
 }
 
 export async function saveArchiveEntries(opts: {
diff --git a/x-pack/plugins/fleet/server/services/epm/packages/remove.ts b/x-pack/plugins/fleet/server/services/epm/packages/remove.ts
index 61780c7977166..4a4183965913a 100644
--- a/x-pack/plugins/fleet/server/services/epm/packages/remove.ts
+++ b/x-pack/plugins/fleet/server/services/epm/packages/remove.ts
@@ -125,11 +125,8 @@ async function deleteKibanaAssets(
   // in the case of a partial install, it is expected that some assets will be not found
   // we filter these out before calling delete
   const assetsToDelete = foundObjects.map(({ saved_object: { id, type } }) => ({ id, type }));
-  const promises = assetsToDelete.map(async ({ id, type }) => {
-    return savedObjectsClient.delete(type, id, { namespace });
-  });
 
-  return Promise.all(promises);
+  return savedObjectsClient.bulkDelete(assetsToDelete, { namespace });
 }
 
 function deleteESAssets(

From a4c13e446809e4425f2981487f6e6711a6ebc478 Mon Sep 17 00:00:00 2001
From: Yaroslav Kuznietsov <kuznetsov.yaroslav.yk@gmail.com>
Date: Tue, 3 Jan 2023 13:23:14 +0200
Subject: [PATCH 4/9] [Unified Search] Sql editor border fix on resize.
 (#148198)

## Summary
Completes part of https://github.com/elastic/kibana/issues/136950.


https://user-images.githubusercontent.com/22456368/209969988-0138355b-8ffe-418e-ae04-a415e6b5e304.mov


https://user-images.githubusercontent.com/22456368/209970036-407276ed-1532-4bbc-9224-461bb960c910.mov

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../text_based_languages_editor/index.tsx                  | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/plugins/unified_search/public/query_string_input/text_based_languages_editor/index.tsx b/src/plugins/unified_search/public/query_string_input/text_based_languages_editor/index.tsx
index 6ea8724923352..18f08bfa750eb 100644
--- a/src/plugins/unified_search/public/query_string_input/text_based_languages_editor/index.tsx
+++ b/src/plugins/unified_search/public/query_string_input/text_based_languages_editor/index.tsx
@@ -468,7 +468,12 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
           </EuiFlexItem>
         </EuiFlexGroup>
       )}
-      <EuiFlexGroup gutterSize="none" responsive={false} css={{ margin: 0 }} ref={containerRef}>
+      <EuiFlexGroup
+        gutterSize="none"
+        responsive={false}
+        css={{ margin: '0 0 1px 0' }}
+        ref={containerRef}
+      >
         <EuiResizeObserver onResize={onResize}>
           {(resizeRef) => (
             <EuiOutsideClickDetector

From 22ba3787ba4cab7d9dc9fd1726d47557248ec54f Mon Sep 17 00:00:00 2001
From: Or Ouziel <or.ouziel@elastic.co>
Date: Tue, 3 Jan 2023 13:42:28 +0200
Subject: [PATCH 5/9] [Cloud Posture] replace integration extension form
 (#147751)

---
 .../common/constants.ts                       |   5 -
 .../cloud_security_posture/common/types.ts    |   5 +
 .../public/common/constants.ts                |   3 +-
 .../get_enabled_csp_integration_details.ts    |   7 +-
 .../fleet_extensions/aws_credentials_form.tsx |  12 +-
 .../csp_boxed_radio_group.tsx                 | 108 +++++++++++++
 .../deployment_type_select.tsx                |  68 --------
 .../components/fleet_extensions/eks_form.tsx  | 153 ------------------
 .../fleet_extensions/inline_radio_group.tsx   |  83 ----------
 .../components/fleet_extensions/mocks.ts      |   2 +-
 .../policy_extension_create.test.tsx          |  93 -----------
 .../policy_extension_create.tsx               |  42 +----
 .../policy_extension_edit.test.tsx            |  80 ---------
 .../policy_extension_edit.tsx                 |  35 +---
 .../policy_template_form.test.tsx             |   5 +-
 .../fleet_extensions/policy_template_form.tsx |   3 +-
 .../policy_template_input_selector.tsx        |  76 +++++----
 .../components/fleet_extensions/utils.ts      |  93 ++---------
 .../translations/translations/fr-FR.json      |  13 --
 .../translations/translations/ja-JP.json      |  13 --
 .../translations/translations/zh-CN.json      |  13 --
 21 files changed, 186 insertions(+), 726 deletions(-)
 create mode 100644 x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/csp_boxed_radio_group.tsx
 delete mode 100644 x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/deployment_type_select.tsx
 delete mode 100644 x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/eks_form.tsx
 delete mode 100644 x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/inline_radio_group.tsx
 delete mode 100644 x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_extension_create.test.tsx
 delete mode 100644 x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_extension_edit.test.tsx

diff --git a/x-pack/plugins/cloud_security_posture/common/constants.ts b/x-pack/plugins/cloud_security_posture/common/constants.ts
index 644c6bb5a8c42..797b29ad2be32 100644
--- a/x-pack/plugins/cloud_security_posture/common/constants.ts
+++ b/x-pack/plugins/cloud_security_posture/common/constants.ts
@@ -59,8 +59,3 @@ export const SUPPORTED_CLOUDBEAT_INPUTS = [
   CLOUDBEAT_GCP,
   CLOUDBEAT_AZURE,
 ] as const;
-
-export type CLOUDBEAT_INTEGRATION = typeof SUPPORTED_CLOUDBEAT_INPUTS[number];
-export type POLICY_TEMPLATE = typeof SUPPORTED_POLICY_TEMPLATES[number];
-export type PostureInput = typeof SUPPORTED_CLOUDBEAT_INPUTS[number];
-export type PosturePolicyTemplate = typeof SUPPORTED_POLICY_TEMPLATES[number];
diff --git a/x-pack/plugins/cloud_security_posture/common/types.ts b/x-pack/plugins/cloud_security_posture/common/types.ts
index 29525fa95e19b..757ec5ebb0eb5 100644
--- a/x-pack/plugins/cloud_security_posture/common/types.ts
+++ b/x-pack/plugins/cloud_security_posture/common/types.ts
@@ -6,6 +6,7 @@
  */
 
 import type { PackagePolicy, AgentPolicy } from '@kbn/fleet-plugin/common';
+import { SUPPORTED_CLOUDBEAT_INPUTS, SUPPORTED_POLICY_TEMPLATES } from './constants';
 import type { CspRuleMetadata } from './schemas/csp_rule_metadata';
 
 export type Evaluation = 'passed' | 'failed' | 'NA';
@@ -100,3 +101,7 @@ export interface Benchmark {
 
 export type BenchmarkId = CspRuleMetadata['benchmark']['id'];
 export type BenchmarkName = CspRuleMetadata['benchmark']['name'];
+
+// Fleet Integration types
+export type PostureInput = typeof SUPPORTED_CLOUDBEAT_INPUTS[number];
+export type PosturePolicyTemplate = typeof SUPPORTED_POLICY_TEMPLATES[number];
diff --git a/x-pack/plugins/cloud_security_posture/public/common/constants.ts b/x-pack/plugins/cloud_security_posture/public/common/constants.ts
index 1a96b8b095541..521885044f480 100644
--- a/x-pack/plugins/cloud_security_posture/public/common/constants.ts
+++ b/x-pack/plugins/cloud_security_posture/public/common/constants.ts
@@ -7,14 +7,13 @@
 
 import { i18n } from '@kbn/i18n';
 import { euiThemeVars } from '@kbn/ui-theme';
+import type { PosturePolicyTemplate, PostureInput } from '../../common/types';
 import {
   CLOUDBEAT_EKS,
   CLOUDBEAT_VANILLA,
   CLOUDBEAT_AWS,
   CLOUDBEAT_GCP,
   CLOUDBEAT_AZURE,
-  type PostureInput,
-  type PosturePolicyTemplate,
 } from '../../common/constants';
 
 import eksLogo from '../assets/icons/cis_eks_logo.svg';
diff --git a/x-pack/plugins/cloud_security_posture/public/common/utils/get_enabled_csp_integration_details.ts b/x-pack/plugins/cloud_security_posture/public/common/utils/get_enabled_csp_integration_details.ts
index eff420fd94af4..4cf3d7d129f0c 100644
--- a/x-pack/plugins/cloud_security_posture/public/common/utils/get_enabled_csp_integration_details.ts
+++ b/x-pack/plugins/cloud_security_posture/public/common/utils/get_enabled_csp_integration_details.ts
@@ -5,9 +5,10 @@
  * 2.0.
  */
 
-import { PackagePolicy } from '@kbn/fleet-plugin/common';
-import { PostureInput, SUPPORTED_CLOUDBEAT_INPUTS } from '../../../common/constants';
-import { cloudPostureIntegrations, CloudPostureIntegrations } from '../constants';
+import type { PackagePolicy } from '@kbn/fleet-plugin/common';
+import type { PostureInput } from '../../../common/types';
+import { SUPPORTED_CLOUDBEAT_INPUTS } from '../../../common/constants';
+import { cloudPostureIntegrations, type CloudPostureIntegrations } from '../constants';
 
 const isPolicyTemplate = (name: unknown): name is keyof CloudPostureIntegrations =>
   typeof name === 'string' && name in cloudPostureIntegrations;
diff --git a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/aws_credentials_form.tsx b/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/aws_credentials_form.tsx
index e3cae37d18600..3585e63cf5143 100644
--- a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/aws_credentials_form.tsx
+++ b/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/aws_credentials_form.tsx
@@ -17,7 +17,7 @@ import type { NewPackagePolicy } from '@kbn/fleet-plugin/public';
 import { NewPackagePolicyInput } from '@kbn/fleet-plugin/common';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
-import { InlineRadioGroup } from './inline_radio_group';
+import { RadioGroup } from './csp_boxed_radio_group';
 import { getPosturePolicy, NewPackagePolicyPostureInput } from './utils';
 
 const DocsLink = (
@@ -197,11 +197,13 @@ const getInputVarsFields = (
       } as const;
     });
 
-const getDefaultAwsType = (input: Props['input']): AwsCredentialsType =>
-  input.streams[0].vars['aws.credentials.type'].value;
+const getAwsCredentialsType = (input: Props['input']): AwsCredentialsType | undefined =>
+  input.streams[0].vars?.['aws.credentials.type'].value;
 
 export const AwsCredentialsForm = ({ input, newPolicy, updatePolicy }: Props) => {
-  const awsCredentialsType = getDefaultAwsType(input);
+  // We only have a value for 'aws.credentials.type' once the form has mounted.
+  // On initial render we don't have that value so we default to the first option.
+  const awsCredentialsType = getAwsCredentialsType(input) || AWS_CREDENTIALS_OPTIONS[0].id;
   const group = options[awsCredentialsType];
   const fields = getInputVarsFields(input, group.fields);
 
@@ -240,7 +242,7 @@ const AwsCredentialTypeSelector = ({
   onChange(type: AwsCredentialsType): void;
   type: AwsCredentialsType;
 }) => (
-  <InlineRadioGroup
+  <RadioGroup
     size="s"
     options={[...AWS_CREDENTIALS_OPTIONS]}
     idSelected={type}
diff --git a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/csp_boxed_radio_group.tsx b/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/csp_boxed_radio_group.tsx
new file mode 100644
index 0000000000000..d84c985e10939
--- /dev/null
+++ b/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/csp_boxed_radio_group.tsx
@@ -0,0 +1,108 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { useEuiTheme, EuiButton, EuiRadio, EuiToolTip } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+interface Props {
+  disabled?: boolean;
+  options: RadioOption[];
+  onChange(id: string): void;
+  idSelected: string;
+  size?: 's' | 'm';
+}
+
+interface RadioOption {
+  disabled?: boolean;
+  id: string;
+  label: string;
+  icon?: string;
+  tooltip?: string;
+}
+
+export const RadioGroup = ({ idSelected, size, options, disabled, onChange }: Props) => {
+  const { euiTheme } = useEuiTheme();
+
+  return (
+    <div
+      css={css`
+        display: flex;
+        flex-flow: row wrap;
+        gap: ${euiTheme.size.s};
+
+        // Show rows for m- screens (below 768px)
+        @media only screen and (max-width: ${euiTheme.breakpoint.m}px) {
+          .euiToolTipAnchor {
+            min-width: 100%;
+          }
+        }
+      `}
+    >
+      {options.map((option) => {
+        const isChecked = option.id === idSelected;
+        return (
+          <EuiToolTip
+            key={option.id}
+            content={option.tooltip}
+            anchorProps={{
+              style: {
+                flexGrow: 1,
+              },
+            }}
+          >
+            <EuiButton
+              disabled={option.disabled || disabled}
+              style={{
+                border: `1px solid ${
+                  isChecked ? euiTheme.colors.primary : euiTheme.colors.lightShade
+                }`,
+              }}
+              // Use empty string to fallback to no color
+              // @ts-ignore
+              color={isChecked ? 'primary' : ''}
+              onClick={() => onChange(option.id)}
+              iconType={option.icon}
+              iconSide="right"
+              contentProps={{
+                style: {
+                  justifyContent: 'flex-start',
+                },
+              }}
+              css={css`
+                width: 100%;
+                height: ${size === 's' ? euiTheme.size.xxl : euiTheme.size.xxxl};
+                svg,
+                img {
+                  margin-left: auto;
+                }
+
+                &&,
+                &&:hover {
+                  text-decoration: none;
+                }
+                &:disabled {
+                  svg,
+                  img {
+                    filter: grayscale(1);
+                  }
+                }
+              `}
+            >
+              <EuiRadio
+                label={option.label}
+                id={option.id}
+                checked={isChecked}
+                onChange={() => {}}
+              />
+            </EuiButton>
+          </EuiToolTip>
+        );
+      })}
+    </div>
+  );
+};
diff --git a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/deployment_type_select.tsx b/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/deployment_type_select.tsx
deleted file mode 100644
index bc5c61fa0370b..0000000000000
--- a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/deployment_type_select.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-import React from 'react';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiComboBox,
-  EuiToolTip,
-  EuiFormRow,
-  EuiIcon,
-  type EuiComboBoxOptionOption,
-  EuiDescribedFormGroup,
-} from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n-react';
-import { cloudPostureIntegrations } from '../../common/constants';
-import { CLOUDBEAT_INTEGRATION, POLICY_TEMPLATE } from '../../../common/constants';
-
-interface Props {
-  policyTemplate: POLICY_TEMPLATE;
-  type: CLOUDBEAT_INTEGRATION;
-  onChange?: (type: CLOUDBEAT_INTEGRATION) => void;
-  isDisabled?: boolean;
-}
-
-const kubeDeployOptions = (
-  policyTemplate: POLICY_TEMPLATE
-): Array<EuiComboBoxOptionOption<CLOUDBEAT_INTEGRATION>> =>
-  cloudPostureIntegrations[policyTemplate].options.map((o) => ({ value: o.type, label: o.name }));
-
-const KubernetesDeploymentFieldLabel = () => (
-  <EuiToolTip
-    content={
-      <FormattedMessage
-        id="xpack.csp.createPackagePolicy.stepConfigure.integrationSettingsSection.kubernetesDeploymentLabelTooltip"
-        defaultMessage="Select your Kubernetes deployment type"
-      />
-    }
-  >
-    <EuiFlexGroup gutterSize="none" alignItems="center" responsive={false}>
-      <EuiFlexItem grow style={{ flexDirection: 'row' }}>
-        <FormattedMessage
-          id="xpack.csp.createPackagePolicy.stepConfigure.integrationSettingsSection.kubernetesDeploymentLabel"
-          defaultMessage="Kubernetes Deployment"
-        />
-        &nbsp;
-        <EuiIcon size="m" color="subdued" type="questionInCircle" />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </EuiToolTip>
-);
-
-export const DeploymentTypeSelect = ({ policyTemplate, type, isDisabled, onChange }: Props) => (
-  <EuiDescribedFormGroup title={<div />}>
-    <EuiFormRow label={<KubernetesDeploymentFieldLabel />}>
-      <EuiComboBox
-        singleSelection={{ asPlainText: true }}
-        options={kubeDeployOptions(policyTemplate)}
-        selectedOptions={kubeDeployOptions(policyTemplate).filter((o) => o.value === type)}
-        isDisabled={isDisabled}
-        onChange={(options) => !isDisabled && onChange?.(options[0].value!)}
-      />
-    </EuiFormRow>
-  </EuiDescribedFormGroup>
-);
diff --git a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/eks_form.tsx b/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/eks_form.tsx
deleted file mode 100644
index b160561807d64..0000000000000
--- a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/eks_form.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-import React from 'react';
-import {
-  EuiFormRow,
-  EuiFieldText,
-  EuiDescribedFormGroup,
-  EuiText,
-  EuiSpacer,
-  EuiLink,
-} from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n-react';
-import type { NewPackagePolicyInput } from '@kbn/fleet-plugin/common';
-import { i18n } from '@kbn/i18n';
-import { isEksInput } from './utils';
-
-export const eksVars = [
-  {
-    id: 'access_key_id',
-    label: i18n.translate(
-      'xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.accessKeyIdFieldLabel',
-      { defaultMessage: 'Access key ID' }
-    ),
-  },
-  {
-    id: 'secret_access_key',
-    label: i18n.translate(
-      'xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.secretAccessKeyFieldLabel',
-      { defaultMessage: 'Secret Access Key' }
-    ),
-  },
-  {
-    id: 'session_token',
-    label: i18n.translate(
-      'xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.sessionTokenFieldLabel',
-      { defaultMessage: 'Session Token' }
-    ),
-  },
-  {
-    id: 'shared_credential_file',
-    label: i18n.translate(
-      'xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.sharedCredentialsFileFieldLabel',
-      { defaultMessage: 'Shared Credential File' }
-    ),
-  },
-  {
-    id: 'credential_profile_name',
-    label: i18n.translate(
-      'xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.sharedCredentialFileFieldLabel',
-      { defaultMessage: 'Credential Profile Name' }
-    ),
-  },
-  {
-    id: 'role_arn',
-    label: i18n.translate(
-      'xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.roleARNFieldLabel',
-      { defaultMessage: 'ARN Role' }
-    ),
-  },
-] as const;
-
-type EksVars = typeof eksVars;
-type EksVarId = EksVars[number]['id'];
-type EksFormVars = { [K in EksVarId]: string };
-
-interface Props {
-  onChange(key: EksVarId, value: string): void;
-  inputs: NewPackagePolicyInput[];
-}
-
-const getEksVars = (input?: NewPackagePolicyInput): EksFormVars => {
-  const vars = input?.streams?.[0]?.vars;
-  return {
-    access_key_id: vars?.access_key_id.value || '',
-    secret_access_key: vars?.secret_access_key.value || '',
-    session_token: vars?.session_token.value || '',
-    shared_credential_file: vars?.shared_credential_file.value || '',
-    credential_profile_name: vars?.credential_profile_name.value || '',
-    role_arn: vars?.role_arn.value || '',
-  };
-};
-
-export const EksFormWrapper = ({ onChange, inputs }: Props) => (
-  <>
-    <EuiSpacer size="m" />
-    <EksForm inputs={inputs} onChange={onChange} />
-  </>
-);
-
-const EksForm = ({ onChange, inputs }: Props) => {
-  const values = getEksVars(inputs.find(isEksInput));
-
-  const eksFormTitle = (
-    <h4>
-      <FormattedMessage
-        id="xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.awsCredentialsTitle"
-        defaultMessage="AWS Credentials"
-      />
-    </h4>
-  );
-
-  const eksFormDescription = (
-    <>
-      <FormattedMessage
-        id="xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.awsCredentialsDescription"
-        defaultMessage="The integration needs elevated access to run some CIS benchmark rules. You can follow {link} to generate the necessary credentials."
-        values={{
-          link: (
-            <EuiLink href="https://ela.st/getting-started-with-kspm" target="_blank">
-              <FormattedMessage
-                id="xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.awsCredentialsInstructionsLink"
-                defaultMessage="these instructions"
-              />
-            </EuiLink>
-          ),
-        }}
-      />
-      <EuiSpacer size="s" />
-      <FormattedMessage
-        id="xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.awsCredentialsNote"
-        defaultMessage="If you choose not to provide credentials, only a subset of the benchmark rules will be evaluated against your cluster(s)."
-      />
-    </>
-  );
-
-  return (
-    <EuiDescribedFormGroup title={eksFormTitle} description={eksFormDescription}>
-      {eksVars.map((field) => (
-        <EuiFormRow
-          key={field.id}
-          label={field.label}
-          labelAppend={
-            <EuiText size="xs" color="subdued">
-              <FormattedMessage
-                id="xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.optionalField"
-                defaultMessage="Optional"
-              />
-            </EuiText>
-          }
-        >
-          <EuiFieldText
-            value={values[field.id]}
-            onChange={(event) => onChange(field.id, event.target.value)}
-          />
-        </EuiFormRow>
-      ))}
-    </EuiDescribedFormGroup>
-  );
-};
diff --git a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/inline_radio_group.tsx b/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/inline_radio_group.tsx
deleted file mode 100644
index 6aba7275a79dd..0000000000000
--- a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/inline_radio_group.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import { useEuiTheme, EuiRadioGroup, type EuiRadioGroupProps } from '@elastic/eui';
-import { css } from '@emotion/react';
-
-type RadioGroupProps = Pick<EuiRadioGroupProps, 'onChange' | 'options' | 'idSelected' | 'disabled'>;
-
-type Props = RadioGroupProps & {
-  size?: 's' | 'm';
-};
-
-export const InlineRadioGroup = ({ idSelected, size, options, disabled, onChange }: Props) => {
-  const { euiTheme } = useEuiTheme();
-
-  return (
-    <EuiRadioGroup
-      disabled={disabled}
-      idSelected={idSelected}
-      options={options.map((o) => ({
-        id: o.id,
-        label: o.label,
-        disabled: o.disabled,
-        ['data-enabled']: idSelected === o.id,
-        ['data-disabled']: o.disabled,
-        className: '__extendedRadioOption',
-      }))}
-      onChange={onChange}
-      css={css`
-        display: grid;
-        grid-template-columns: repeat(${options.length}, 1fr);
-        grid-template-rows: ${size === 's' ? euiTheme.size.xxl : euiTheme.size.xxxl};
-        column-gap: ${euiTheme.size.s};
-        align-items: center;
-
-        > .__extendedRadioOption {
-          margin-top: 0;
-          height: 100%;
-          padding-left: ${euiTheme.size.m};
-          padding-right: ${euiTheme.size.m};
-
-          display: grid;
-          grid-template-columns: auto 1fr;
-          column-gap: ${euiTheme.size.s};
-          align-items: center;
-
-          border: 1px solid ${euiTheme.colors.lightShade};
-          border-radius: ${euiTheme.border.radius.medium};
-          background: ${euiTheme.colors.emptyShade};
-
-          &[data-enabled='true'] {
-            border-color: ${euiTheme.colors.primary};
-            background: ${euiTheme.colors.lightestShade};
-          }
-
-          &[data-disabled='true'] {
-            border-color: ${euiTheme.colors.disabled};
-            background: ${euiTheme.colors.emptyShade};
-          }
-
-          // EuiRadio shows an absolute positioned div as a circle instead of input[type=radio] which is hidden
-          // removing the absolute position to make it part of document flow, set by css grid
-          &.__extendedRadioOption {
-            & > *:not(label):not(input) {
-              position: inherit;
-              top: 0;
-              left: 0;
-            }
-
-            & > label {
-              padding-left: 0;
-            }
-          }
-        }
-      `}
-    />
-  );
-};
diff --git a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/mocks.ts b/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/mocks.ts
index bf8616aaeeb3b..ecc435aa5961d 100644
--- a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/mocks.ts
+++ b/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/mocks.ts
@@ -9,7 +9,7 @@ import type { PackagePolicy } from '@kbn/fleet-plugin/common';
 import { createNewPackagePolicyMock } from '@kbn/fleet-plugin/common/mocks';
 import { BenchmarkId } from '../../../common/types';
 import { CLOUDBEAT_EKS, CLOUDBEAT_VANILLA } from '../../../common/constants';
-import { PostureInput } from '../../../common/constants';
+import type { PostureInput } from '../../../common/types';
 
 export const getCspNewPolicyMock = (type: BenchmarkId = 'cis_k8s'): NewPackagePolicy => ({
   name: 'some-cloud_security_posture-policy',
diff --git a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_extension_create.test.tsx b/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_extension_create.test.tsx
deleted file mode 100644
index 29916477837f1..0000000000000
--- a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_extension_create.test.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
-import CspCreatePolicyExtension from './policy_extension_create';
-import { eksVars } from './eks_form';
-import Chance from 'chance';
-import { TestProvider } from '../../test/test_provider';
-import userEvent from '@testing-library/user-event';
-import { getCspNewPolicyMock } from './mocks';
-
-// ensures that fields appropriately match to their label
-jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({
-  ...jest.requireActual('@elastic/eui/lib/services/accessibility/html_id_generator'),
-  htmlIdGenerator: () => () => `id-${Math.random()}`,
-}));
-
-// ensures that fields appropriately match to their label
-jest.mock('@elastic/eui/lib/services/accessibility', () => ({
-  ...jest.requireActual('@elastic/eui/lib/services/accessibility'),
-  useGeneratedHtmlId: () => `id-${Math.random()}`,
-}));
-
-const chance = new Chance();
-
-describe('<CspCreatePolicyExtension />', () => {
-  const onChange = jest.fn();
-
-  const WrappedComponent = ({ newPolicy = getCspNewPolicyMock() }) => (
-    <TestProvider>
-      <CspCreatePolicyExtension newPolicy={newPolicy} onChange={onChange} />
-    </TestProvider>
-  );
-
-  beforeEach(() => {
-    onChange.mockClear();
-  });
-
-  it('renders non-disabled <DeploymentTypeSelect/>', () => {
-    const { getByLabelText } = render(<WrappedComponent />);
-    const input = getByLabelText('Kubernetes Deployment') as HTMLInputElement;
-    expect(input).toBeInTheDocument();
-    expect(input).not.toBeDisabled();
-  });
-
-  it('renders non-disabled <EksForm/>', () => {
-    const { getByLabelText } = render(
-      <WrappedComponent newPolicy={getCspNewPolicyMock('cis_eks')} />
-    );
-
-    eksVars.forEach((eksVar) => {
-      expect(getByLabelText(eksVar.label)).toBeInTheDocument();
-      expect(getByLabelText(eksVar.label)).not.toBeDisabled();
-    });
-  });
-
-  it('handles updating deployment type', () => {
-    const { getByLabelText } = render(<WrappedComponent />);
-    const input = getByLabelText('Kubernetes Deployment') as HTMLInputElement;
-
-    userEvent.type(input, 'EKS (Elastic Kubernetes Service){enter}');
-
-    expect(onChange).toBeCalledWith({
-      isValid: true,
-      updatedPolicy: getCspNewPolicyMock('cis_eks'),
-    });
-  });
-
-  it('handles updating EKS vars', () => {
-    const { getByLabelText } = render(
-      <WrappedComponent newPolicy={getCspNewPolicyMock('cis_eks')} />
-    );
-
-    const randomValues = chance.unique(chance.string, eksVars.length);
-
-    eksVars.forEach((eksVar, i) => {
-      const eksVarInput = getByLabelText(eksVar.label) as HTMLInputElement;
-      fireEvent.change(eksVarInput, { target: { value: randomValues[i] } });
-
-      const policy = getCspNewPolicyMock('cis_eks');
-      policy.inputs[1].streams[0].vars![eksVar.id].value = randomValues[i];
-
-      expect(onChange).toBeCalledWith({
-        isValid: true,
-        updatedPolicy: policy,
-      });
-    });
-  });
-});
diff --git a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_extension_create.tsx b/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_extension_create.tsx
index 790cd8978725c..b4d3828dd97b8 100644
--- a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_extension_create.tsx
+++ b/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_extension_create.tsx
@@ -5,47 +5,13 @@
  * 2.0.
  */
 import React, { memo } from 'react';
-import { EuiForm } from '@elastic/eui';
 import type { PackagePolicyCreateExtensionComponentProps } from '@kbn/fleet-plugin/public';
-import { CLOUDBEAT_AWS, CLOUDBEAT_EKS, CLOUDBEAT_INTEGRATION } from '../../../common/constants';
-import { DeploymentTypeSelect } from './deployment_type_select';
-import { EksFormWrapper } from './eks_form';
-import {
-  getEnabledInput,
-  getEnabledInputType,
-  getUpdatedDeploymentType,
-  getUpdatedEksVar,
-} from './utils';
+import { CspPolicyTemplateForm } from './policy_template_form';
 
 export const CspCreatePolicyExtension = memo<PackagePolicyCreateExtensionComponentProps>(
-  ({ newPolicy, onChange }) => {
-    const selectedDeploymentType = getEnabledInputType(newPolicy.inputs);
-    const selectedInput = getEnabledInput(newPolicy.inputs);
-    const policyTemplate = selectedInput?.policy_template;
-    const updateDeploymentType = (inputType: CLOUDBEAT_INTEGRATION) =>
-      onChange(getUpdatedDeploymentType(newPolicy, inputType));
-
-    const updateEksVar = (key: string, value: string) =>
-      onChange(getUpdatedEksVar(newPolicy, key, value));
-
-    return (
-      <EuiForm style={{ marginTop: 0 }}>
-        {selectedInput && (policyTemplate === 'kspm' || policyTemplate === 'cspm') && (
-          <>
-            <DeploymentTypeSelect
-              policyTemplate={policyTemplate}
-              type={selectedDeploymentType}
-              onChange={updateDeploymentType}
-            />
-            {(selectedDeploymentType === CLOUDBEAT_EKS ||
-              selectedDeploymentType === CLOUDBEAT_AWS) && (
-              <EksFormWrapper inputs={newPolicy.inputs} onChange={updateEksVar} />
-            )}
-          </>
-        )}
-      </EuiForm>
-    );
-  }
+  ({ newPolicy, onChange }) => (
+    <CspPolicyTemplateForm newPolicy={newPolicy} onChange={onChange} edit={false} />
+  )
 );
 
 CspCreatePolicyExtension.displayName = 'CspCreatePolicyExtension';
diff --git a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_extension_edit.test.tsx b/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_extension_edit.test.tsx
deleted file mode 100644
index 856e4650ff045..0000000000000
--- a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_extension_edit.test.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
-import CspEditPolicyExtension from './policy_extension_edit';
-import { TestProvider } from '../../test/test_provider';
-import { getCspNewPolicyMock, getCspPolicyMock } from './mocks';
-import Chance from 'chance';
-import { eksVars } from './eks_form';
-
-const chance = new Chance();
-
-// ensures that fields appropriately match to their label
-jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({
-  ...jest.requireActual('@elastic/eui/lib/services/accessibility/html_id_generator'),
-  htmlIdGenerator: () => () => `id-${Math.random()}`,
-}));
-
-// ensures that fields appropriately match to their label
-jest.mock('@elastic/eui/lib/services/accessibility', () => ({
-  ...jest.requireActual('@elastic/eui/lib/services/accessibility'),
-  useGeneratedHtmlId: () => `id-${Math.random()}`,
-}));
-
-describe('<CspEditPolicyExtension />', () => {
-  const onChange = jest.fn();
-
-  const WrappedComponent = ({ policy = getCspPolicyMock(), newPolicy = getCspNewPolicyMock() }) => (
-    <TestProvider>
-      <CspEditPolicyExtension policy={policy} newPolicy={newPolicy} onChange={onChange} />
-    </TestProvider>
-  );
-
-  beforeEach(() => {
-    onChange.mockClear();
-  });
-
-  it('renders disabled <DeploymentTypeSelect/>', () => {
-    const { getByLabelText } = render(<WrappedComponent />);
-    const input = getByLabelText('Kubernetes Deployment') as HTMLInputElement;
-    expect(input).toBeInTheDocument();
-    expect(input).toBeDisabled();
-  });
-
-  it('renders non-disabled <EksForm/>', () => {
-    const { getByLabelText } = render(
-      <WrappedComponent newPolicy={getCspNewPolicyMock('cis_eks')} />
-    );
-
-    eksVars.forEach((eksVar) => {
-      expect(getByLabelText(eksVar.label)).toBeInTheDocument();
-      expect(getByLabelText(eksVar.label)).not.toBeDisabled();
-    });
-  });
-
-  it('handles updating EKS vars', () => {
-    const { getByLabelText } = render(
-      <WrappedComponent newPolicy={getCspNewPolicyMock('cis_eks')} />
-    );
-
-    const randomValues = chance.unique(chance.string, eksVars.length);
-
-    eksVars.forEach((eksVar, i) => {
-      const eksVarInput = getByLabelText(eksVar.label) as HTMLInputElement;
-      fireEvent.change(eksVarInput, { target: { value: randomValues[i] } });
-
-      const policy = getCspNewPolicyMock('cis_eks');
-      policy.inputs[1].streams[0].vars![eksVar.id].value = randomValues[i];
-
-      expect(onChange).toBeCalledWith({
-        isValid: true,
-        updatedPolicy: policy,
-      });
-    });
-  });
-});
diff --git a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_extension_edit.tsx b/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_extension_edit.tsx
index e268dac8cd14e..b2be1b0c0d7cc 100644
--- a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_extension_edit.tsx
+++ b/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_extension_edit.tsx
@@ -5,40 +5,13 @@
  * 2.0.
  */
 import React, { memo } from 'react';
-import { EuiForm } from '@elastic/eui';
 import type { PackagePolicyEditExtensionComponentProps } from '@kbn/fleet-plugin/public';
-import { CLOUDBEAT_EKS, CLOUDBEAT_AWS } from '../../../common/constants';
-import { DeploymentTypeSelect } from './deployment_type_select';
-import { EksFormWrapper } from './eks_form';
-import { getEnabledInput, getEnabledInputType, getUpdatedEksVar } from './utils';
+import { CspPolicyTemplateForm } from './policy_template_form';
 
 export const CspEditPolicyExtension = memo<PackagePolicyEditExtensionComponentProps>(
-  ({ newPolicy, onChange }) => {
-    const selectedDeploymentType = getEnabledInputType(newPolicy.inputs);
-    const selectedInput = getEnabledInput(newPolicy.inputs);
-    const policyTemplate = selectedInput?.policy_template;
-
-    const updateEksVar = (key: string, value: string) =>
-      onChange(getUpdatedEksVar(newPolicy, key, value));
-
-    return (
-      <EuiForm style={{ marginTop: 0 }}>
-        {(policyTemplate === 'kspm' || policyTemplate === 'cspm') && (
-          <>
-            <DeploymentTypeSelect
-              policyTemplate={policyTemplate}
-              type={selectedDeploymentType}
-              isDisabled
-            />
-            {(selectedDeploymentType === CLOUDBEAT_EKS ||
-              selectedDeploymentType === CLOUDBEAT_AWS) && (
-              <EksFormWrapper inputs={newPolicy.inputs} onChange={updateEksVar} />
-            )}
-          </>
-        )}
-      </EuiForm>
-    );
-  }
+  ({ newPolicy, onChange }) => (
+    <CspPolicyTemplateForm newPolicy={newPolicy} onChange={onChange} edit={true} />
+  )
 );
 
 CspEditPolicyExtension.displayName = 'CspEditPolicyExtension';
diff --git a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_template_form.test.tsx b/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_template_form.test.tsx
index a43a9fd26fb10..0d4ab59bd31b9 100644
--- a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_template_form.test.tsx
+++ b/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_template_form.test.tsx
@@ -12,6 +12,7 @@ import { getMockPolicyAWS, getMockPolicyEKS, getMockPolicyK8s } from './mocks';
 import type { NewPackagePolicy } from '@kbn/fleet-plugin/common';
 import userEvent from '@testing-library/user-event';
 import { getPosturePolicy } from './utils';
+import { CLOUDBEAT_AWS, CLOUDBEAT_EKS } from '../../../common/constants';
 
 describe('<CspPolicyTemplateForm />', () => {
   const onChange = jest.fn();
@@ -148,8 +149,8 @@ describe('<CspPolicyTemplateForm />', () => {
    * AWS Credentials input fields tests for KSPM/CSPM integrations
    */
   const awsInputs = {
-    'cloudbeat/cis_eks': getMockPolicyEKS,
-    'cloudbeat/cis_aws': getMockPolicyAWS,
+    [CLOUDBEAT_EKS]: getMockPolicyEKS,
+    [CLOUDBEAT_AWS]: getMockPolicyAWS,
   };
 
   for (const [inputKey, getPolicy] of Object.entries(awsInputs) as Array<
diff --git a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_template_form.tsx b/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_template_form.tsx
index 3298d368bf7d9..eee8f86ef6b48 100644
--- a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_template_form.tsx
+++ b/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_template_form.tsx
@@ -10,7 +10,8 @@ import type {
   NewPackagePolicy,
   PackagePolicyCreateExtensionComponentProps,
 } from '@kbn/fleet-plugin/public';
-import { CLOUDBEAT_AWS, CLOUDBEAT_VANILLA, PostureInput } from '../../../common/constants';
+import type { PostureInput } from '../../../common/types';
+import { CLOUDBEAT_AWS, CLOUDBEAT_VANILLA } from '../../../common/constants';
 import {
   getPosturePolicy,
   INPUTS_WITH_AWS_VARS,
diff --git a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_template_input_selector.tsx b/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_template_input_selector.tsx
index be3ba857e9691..34d00a95d6899 100644
--- a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_template_input_selector.tsx
+++ b/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_template_input_selector.tsx
@@ -5,20 +5,11 @@
  * 2.0.
  */
 import React from 'react';
-import {
-  EuiFlexGroup,
-  EuiToolTip,
-  EuiFlexItem,
-  EuiIcon,
-  EuiSpacer,
-  EuiText,
-  EuiTitle,
-} from '@elastic/eui';
+import { EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { css } from '@emotion/react';
-import type { PostureInput } from '../../../common/constants';
+import type { PostureInput, PosturePolicyTemplate } from '../../../common/types';
 import { getPolicyTemplateInputOptions, type NewPackagePolicyPostureInput } from './utils';
-import { InlineRadioGroup } from './inline_radio_group';
+import { RadioGroup } from './csp_boxed_radio_group';
 
 interface Props {
   disabled: boolean;
@@ -26,43 +17,19 @@ interface Props {
   setInput: (inputType: PostureInput) => void;
 }
 
-const RadioLabel = ({
-  label,
-  icon,
-  disabled,
-  tooltip,
-}: ReturnType<typeof getPolicyTemplateInputOptions>[number]) => (
-  <EuiToolTip content={tooltip} anchorProps={{ style: { width: '100%' } }}>
-    <EuiFlexGroup direction="row" alignItems="center" gutterSize="none">
-      <EuiFlexItem grow={true}>{label}</EuiFlexItem>
-      {icon && (
-        <EuiFlexItem grow={false}>
-          <EuiIcon
-            type={icon}
-            css={
-              disabled &&
-              css`
-                filter: grayscale(1);
-              `
-            }
-          />
-        </EuiFlexItem>
-      )}
-    </EuiFlexGroup>
-  </EuiToolTip>
-);
-
 export const PolicyInputSelector = ({ input, disabled, setInput }: Props) => {
   const baseOptions = getPolicyTemplateInputOptions(input.policy_template);
   const options = baseOptions.map((option) => ({
     ...option,
     disabled: option.disabled || disabled,
-    label: <RadioLabel {...option} />,
+    label: option.label,
+    icon: option.icon,
   }));
 
   return (
     <div>
-      <InlineRadioGroup
+      <ConfigureIntegrationInfo type={input.policy_template} />
+      <RadioGroup
         disabled={disabled}
         idSelected={input.type}
         options={options}
@@ -106,3 +73,32 @@ const AWSSetupInfoContent = () => (
     </EuiText>
   </>
 );
+
+const ConfigureIntegrationInfo = ({ type }: { type: PosturePolicyTemplate }) => (
+  <>
+    <EuiTitle size="xs">
+      <h2>
+        <FormattedMessage
+          id="xpack.csp.awsIntegration.configureIntegrationLabel"
+          defaultMessage="Configure your integration"
+        />
+      </h2>
+    </EuiTitle>
+    <EuiSpacer />
+    <EuiText color={'subdued'} size="s">
+      {type === 'kspm' && (
+        <FormattedMessage
+          id="xpack.csp.awsIntegration.configureKspmIntegrationDescription"
+          defaultMessage="Select the Kuberentes cluster type you want to monitor"
+        />
+      )}
+      {type === 'cspm' && (
+        <FormattedMessage
+          id="xpack.csp.awsIntegration.configureCspmIntegrationDescription"
+          defaultMessage="Select the cloud service provider (CSP) you want to monitor"
+        />
+      )}
+    </EuiText>
+    <EuiSpacer />
+  </>
+);
diff --git a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/utils.ts b/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/utils.ts
index e6fe0e09e44f6..dde25b7477543 100644
--- a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/utils.ts
+++ b/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/utils.ts
@@ -7,7 +7,6 @@
 import type {
   NewPackagePolicy,
   NewPackagePolicyInput,
-  NewPackagePolicyInputStream,
   PackagePolicyConfigRecordEntry,
 } from '@kbn/fleet-plugin/common';
 import merge from 'lodash/merge';
@@ -15,96 +14,26 @@ import {
   CLOUDBEAT_AWS,
   CLOUDBEAT_EKS,
   CLOUDBEAT_VANILLA,
+  CLOUDBEAT_GCP,
+  CLOUDBEAT_AZURE,
   SUPPORTED_POLICY_TEMPLATES,
   SUPPORTED_CLOUDBEAT_INPUTS,
-  type PostureInput,
-  type PosturePolicyTemplate,
 } from '../../../common/constants';
+import { type PostureInput, type PosturePolicyTemplate } from '../../../common/types';
 import { assert } from '../../../common/utils/helpers';
 import { cloudPostureIntegrations } from '../../common/constants';
 
-export const isEksInput = (input: NewPackagePolicyInput) => input.type === CLOUDBEAT_EKS;
 export const INPUTS_WITH_AWS_VARS = [CLOUDBEAT_EKS, CLOUDBEAT_AWS];
-const defaultInputType: Record<PosturePolicyTemplate, PostureInput> = {
-  kspm: CLOUDBEAT_VANILLA,
-  cspm: CLOUDBEAT_AWS,
-};
-export const getEnabledInputType = (inputs: NewPackagePolicy['inputs']): PostureInput => {
-  const enabledInput = getEnabledInput(inputs);
-
-  if (enabledInput) return enabledInput.type as PostureInput;
-
-  const policyTemplate = inputs[0].policy_template as PosturePolicyTemplate | undefined;
-
-  if (policyTemplate && SUPPORTED_POLICY_TEMPLATES.includes(policyTemplate))
-    return defaultInputType[policyTemplate];
-
-  throw new Error('unsupported policy template');
-};
-
-export const getEnabledInput = (
-  inputs: NewPackagePolicy['inputs']
-): NewPackagePolicyInput | undefined => inputs.find((input) => input.enabled);
-
-export const getUpdatedDeploymentType = (newPolicy: NewPackagePolicy, inputType: PostureInput) => ({
-  isValid: true, // TODO: add validations
-  updatedPolicy: {
-    ...newPolicy,
-    inputs: newPolicy.inputs.map((item) => ({
-      ...item,
-      enabled: item.type === inputType,
-      streams: item.streams.map((stream) => ({
-        ...stream,
-        enabled: item.type === inputType,
-      })),
-    })),
-  },
-});
-
-export const getUpdatedEksVar = (newPolicy: NewPackagePolicy, key: string, value: string) => ({
-  isValid: true, // TODO: add validations
-  updatedPolicy: {
-    ...newPolicy,
-    inputs: newPolicy.inputs.map((item) =>
-      INPUTS_WITH_AWS_VARS.includes(item.type) ? getUpdatedStreamVars(item, key, value) : item
-    ),
-  },
-});
-
-// TODO: remove access to first stream
-const getUpdatedStreamVars = (item: NewPackagePolicyInput, key: string, value: string) => {
-  if (!item.streams[0]) return item;
-
-  return {
-    ...item,
-    streams: [
-      {
-        ...item.streams[0],
-        vars: {
-          ...item.streams[0]?.vars,
-          [key]: {
-            ...item.streams[0]?.vars?.[key],
-            value,
-          },
-        },
-      },
-    ],
-  };
-};
 
-type StreamWithRequiredVars = Array<
-  NewPackagePolicyInputStream & Required<Pick<NewPackagePolicyInputStream, 'vars'>>
->;
+type PosturePolicyInput =
+  | { type: typeof CLOUDBEAT_AZURE; policy_template: 'cspm' }
+  | { type: typeof CLOUDBEAT_GCP; policy_template: 'cspm' }
+  | { type: typeof CLOUDBEAT_AWS; policy_template: 'cspm' }
+  | { type: typeof CLOUDBEAT_VANILLA; policy_template: 'kspm' }
+  | { type: typeof CLOUDBEAT_EKS; policy_template: 'kspm' };
 
-// Extend NewPackagePolicyInput with known string literals for input type, policy template and streams
-export type NewPackagePolicyPostureInput = NewPackagePolicyInput &
-  (
-    | { type: 'cloudbeat/cis_azure'; policy_template: 'cspm' }
-    | { type: 'cloudbeat/cis_gcp'; policy_template: 'cspm' }
-    | { type: 'cloudbeat/cis_k8s'; policy_template: 'kspm' }
-    | { type: 'cloudbeat/cis_aws'; policy_template: 'cspm'; streams: StreamWithRequiredVars }
-    | { type: 'cloudbeat/cis_eks'; policy_template: 'kspm'; streams: StreamWithRequiredVars }
-  );
+// Extend NewPackagePolicyInput with known string literals for input type and policy template
+export type NewPackagePolicyPostureInput = NewPackagePolicyInput & PosturePolicyInput;
 
 export const isPostureInput = (
   input: NewPackagePolicyInput
diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
index a2bd70f068552..b5484f5a56e83 100644
--- a/x-pack/plugins/translations/translations/fr-FR.json
+++ b/x-pack/plugins/translations/translations/fr-FR.json
@@ -10171,7 +10171,6 @@
     "xpack.csp.cloudPosturePage.errorRenderer.errorDescription": "{error} {statusCode} : {body}",
     "xpack.csp.cloudPosturePage.packageNotInstalled.description": "Utilisez notre intégration {integrationFullName} (KSPM) pour mesurer votre configuration de cluster Kubernetes par rapport aux recommandations du CIS.",
     "xpack.csp.complianceDashboard.complianceByCisSection.complianceColumnTooltip": "{passed}/{total}",
-    "xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.awsCredentialsDescription": "L'intégration nécessite des droits d'accès supérieurs pour l'exécution de règles CIS Benchmarks. Vous pouvez suivre {link} pour générer les informations d'identification nécessaires.",
     "xpack.csp.dashboard.benchmarkSection.clusterTitle": "{title} - {shortId}",
     "xpack.csp.dashboard.benchmarkSection.clusterTitleTooltip.clusterTitle": "{title} - {shortId}",
     "xpack.csp.dashboard.benchmarkSection.lastEvaluatedTitle": "Dernière évaluation {dateFromNow}",
@@ -10210,18 +10209,6 @@
     "xpack.csp.createPackagePolicy.customAssetsTab.dashboardViewLabel": "Afficher le tableau de bord CSP",
     "xpack.csp.createPackagePolicy.customAssetsTab.findingsViewLabel": "Afficher les résultats CSP ",
     "xpack.csp.createPackagePolicy.customAssetsTab.rulesViewLabel": "Afficher les règles CSP ",
-    "xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.accessKeyIdFieldLabel": "ID de clé d'accès",
-    "xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.awsCredentialsInstructionsLink": "ces instructions",
-    "xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.awsCredentialsNote": "Si vous choisissez de ne pas fournir vos informations d'identification, seul un sous-ensemble des règles de benchmark sera évalué avec vos clusters.",
-    "xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.awsCredentialsTitle": "Informations d'identification AWS",
-    "xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.optionalField": "Facultatif",
-    "xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.roleARNFieldLabel": "Rôle ARN",
-    "xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.secretAccessKeyFieldLabel": "Clé d'accès secrète",
-    "xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.sessionTokenFieldLabel": "Token de session",
-    "xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.sharedCredentialFileFieldLabel": "Nom de profil des informations d'identification",
-    "xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.sharedCredentialsFileFieldLabel": "Fichier d'informations d'identification partagé",
-    "xpack.csp.createPackagePolicy.stepConfigure.integrationSettingsSection.kubernetesDeploymentLabel": "Déploiement Kubernetes",
-    "xpack.csp.createPackagePolicy.stepConfigure.integrationSettingsSection.kubernetesDeploymentLabelTooltip": "Sélectionner votre type de déploiement Kubernetes",
     "xpack.csp.cspEvaluationBadge.failLabel": "Échec",
     "xpack.csp.cspEvaluationBadge.passLabel": "Réussite",
     "xpack.csp.cspSettings.rules": "Règles de sécurité du CSP - ",
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index fc998e22ac922..95ff0e1bcd852 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -10160,7 +10160,6 @@
     "xpack.csp.cloudPosturePage.errorRenderer.errorDescription": "{error} {statusCode}: {body}",
     "xpack.csp.cloudPosturePage.packageNotInstalled.description": "{integrationFullName}（KSPM）統合は、CISの推奨事項に照らしてKubernetesクラスター設定を測定します。",
     "xpack.csp.complianceDashboard.complianceByCisSection.complianceColumnTooltip": "{passed}/{total}",
-    "xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.awsCredentialsDescription": "この統合では、一部のCISベンチマークルールを実行するために昇格されたアクセス権が必要です。必要な資格情報を生成するには、{link}に従ってください。",
     "xpack.csp.dashboard.benchmarkSection.clusterTitle": "{title} - {shortId}",
     "xpack.csp.dashboard.benchmarkSection.clusterTitleTooltip.clusterTitle": "{title} - {shortId}",
     "xpack.csp.dashboard.benchmarkSection.lastEvaluatedTitle": "前回の評価{dateFromNow}",
@@ -10199,18 +10198,6 @@
     "xpack.csp.createPackagePolicy.customAssetsTab.dashboardViewLabel": "CSPダッシュボードを表示",
     "xpack.csp.createPackagePolicy.customAssetsTab.findingsViewLabel": "CSP調査結果を表示 ",
     "xpack.csp.createPackagePolicy.customAssetsTab.rulesViewLabel": "CSPルールを表示 ",
-    "xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.accessKeyIdFieldLabel": "アクセスキーID",
-    "xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.awsCredentialsInstructionsLink": "これらの手順",
-    "xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.awsCredentialsNote": "資格情報を指定しない場合は、ベンチマークルールのサブネットのみがクラスターに対して評価されます。",
-    "xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.awsCredentialsTitle": "AWS認証情報",
-    "xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.optionalField": "オプション",
-    "xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.roleARNFieldLabel": "ARNロール",
-    "xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.secretAccessKeyFieldLabel": "シークレットアクセスキー",
-    "xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.sessionTokenFieldLabel": "セッショントークン",
-    "xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.sharedCredentialFileFieldLabel": "資格情報プロファイル名",
-    "xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.sharedCredentialsFileFieldLabel": "共有資格情報ファイル",
-    "xpack.csp.createPackagePolicy.stepConfigure.integrationSettingsSection.kubernetesDeploymentLabel": "Kubernetesデプロイ",
-    "xpack.csp.createPackagePolicy.stepConfigure.integrationSettingsSection.kubernetesDeploymentLabelTooltip": "Kubernetesデプロイタイプを選択",
     "xpack.csp.cspEvaluationBadge.failLabel": "失敗",
     "xpack.csp.cspEvaluationBadge.passLabel": "合格",
     "xpack.csp.cspSettings.rules": "CSPセキュリティルール - ",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index c063e7e87fe79..4b4d96d9e049d 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -10175,7 +10175,6 @@
     "xpack.csp.cloudPosturePage.errorRenderer.errorDescription": "{error} {statusCode}：{body}",
     "xpack.csp.cloudPosturePage.packageNotInstalled.description": "使用我们的 {integrationFullName} (KSPM) 集成根据 CIS 建议衡量 Kubernetes 集群设置。",
     "xpack.csp.complianceDashboard.complianceByCisSection.complianceColumnTooltip": "{passed}/{total}",
-    "xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.awsCredentialsDescription": "该集成需要提升访问权限才能运行某些 CIS 基准规则。您可以访问 {link} 以生成必要的凭据。",
     "xpack.csp.dashboard.benchmarkSection.clusterTitle": "{title} - {shortId}",
     "xpack.csp.dashboard.benchmarkSection.clusterTitleTooltip.clusterTitle": "{title} - {shortId}",
     "xpack.csp.dashboard.benchmarkSection.lastEvaluatedTitle": "上次评估于 {dateFromNow}",
@@ -10214,18 +10213,6 @@
     "xpack.csp.createPackagePolicy.customAssetsTab.dashboardViewLabel": "查看 CSP 仪表板",
     "xpack.csp.createPackagePolicy.customAssetsTab.findingsViewLabel": "查看 CSP 结果 ",
     "xpack.csp.createPackagePolicy.customAssetsTab.rulesViewLabel": "查看 CSP 规则 ",
-    "xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.accessKeyIdFieldLabel": "访问密钥 ID",
-    "xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.awsCredentialsInstructionsLink": "以下说明",
-    "xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.awsCredentialsNote": "如果选择不提供凭据，将仅根据您的集群评估基准规则的子集。",
-    "xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.awsCredentialsTitle": "AWS 凭据",
-    "xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.optionalField": "可选",
-    "xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.roleARNFieldLabel": "ARN 角色",
-    "xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.secretAccessKeyFieldLabel": "机密访问密钥",
-    "xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.sessionTokenFieldLabel": "会话令牌",
-    "xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.sharedCredentialFileFieldLabel": "凭据配置文件名",
-    "xpack.csp.createPackagePolicy.eksIntegrationSettingsSection.sharedCredentialsFileFieldLabel": "共享凭据文件",
-    "xpack.csp.createPackagePolicy.stepConfigure.integrationSettingsSection.kubernetesDeploymentLabel": "Kubernetes 部署",
-    "xpack.csp.createPackagePolicy.stepConfigure.integrationSettingsSection.kubernetesDeploymentLabelTooltip": "选择 Kubernetes 部署类型",
     "xpack.csp.cspEvaluationBadge.failLabel": "失败",
     "xpack.csp.cspEvaluationBadge.passLabel": "通过",
     "xpack.csp.cspSettings.rules": "CSP 安全规则 - ",

From 5fddc7da8171dadc71b6931e69ab29921c50f8e7 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Tue, 3 Jan 2023 13:43:21 +0100
Subject: [PATCH 6/9] [Security Solution][feat] Alert filters for Detection
 Page (#146989)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

This PR adds feature according to
https://github.com/elastic/security-team/issues/4128.

### Capabilities Added

- 💚 Page Filters are dynamic component that have been added on Detection
Alerts Page.
- 🌀 The status of the page filters is propagated to the URL and any
external page can direct users to Detection Alert Page with custom
filters populated.
- 🌴 Filters are `hierarchical` in nature, what it means is that they
should be arranged from lowers cardinality to highest from left to
right. Any change in the filter on the left side, will update all the
filters on the right hand side.
- 💊 Existing alerts status change pill ( open/acknowledged/closed) has
been removed from the alerts page but ❗it still exists on the rule
details page.
- 📄 Filters are persisted during user's browser session through local
storage but they are not shared across spaces.

📔 Here is how the page looks when alert index exists v/s if there is
some error in fetching the index.

| Working Page Filters | When Index is unavailable |
|--|--|
| <video
src="https://user-images.githubusercontent.com/7485038/208958595-16eddb1b-cef2-4598-afc2-a69d36ee1d1a.mov"
/>|![Screenshot 2022-12-06 at 13 48
57](https://user-images.githubusercontent.com/7485038/205947352-512b75d2-0c78-40a0-b713-b1282efc165f.png)|
---
 .../security_solution/common/constants.ts     |  21 +
 .../utils/format_page_filter_search_param.ts  |  20 +
 .../changing_alert_status.cy.ts               |   3 +
 .../detection_page_filters.cy.ts              | 196 ++++++++++
 .../add_edit_exception.cy.ts                  |   9 +-
 .../add_edit_exception_data_view.cy.ts        |  12 +-
 .../cypress/screens/alerts.ts                 |   9 +
 .../cypress/screens/common/filter_group.ts    |  40 ++
 .../security_solution/cypress/tasks/alerts.ts | 135 ++++++-
 x-pack/plugins/security_solution/kibana.json  |   3 +-
 .../hooks/use_filter_update_to_url_sync.ts    |  53 +++
 .../filter_group/hooks/use_filters.ts         |  19 +
 .../common/components/filter_group/index.scss |  11 +
 .../common/components/filter_group/index.tsx  | 367 ++++++++++++++++++
 .../components/filter_group/loading.tsx       |  17 +
 .../common/components/filter_group/types.ts   |  33 ++
 .../common/components/local_storage/index.tsx |   1 -
 .../common/components/with_space_id/index.tsx |  47 +++
 .../public/common/hooks/use_url_state.ts      |   1 +
 .../components/alerts_table/index.tsx         |   9 +-
 .../timeline_actions/alert_context_menu.tsx   |   5 +-
 .../detection_page_filters/index.tsx          |  55 +++
 .../detection_engine/chart_panels/index.tsx   |   8 +-
 .../detection_engine/detection_engine.tsx     | 107 ++---
 .../plugins/security_solution/tsconfig.json   |   2 +
 25 files changed, 1078 insertions(+), 105 deletions(-)
 create mode 100644 x-pack/plugins/security_solution/common/utils/format_page_filter_search_param.ts
 create mode 100644 x-pack/plugins/security_solution/cypress/e2e/detection_alerts/detection_page_filters.cy.ts
 create mode 100644 x-pack/plugins/security_solution/cypress/screens/common/filter_group.ts
 create mode 100644 x-pack/plugins/security_solution/public/common/components/filter_group/hooks/use_filter_update_to_url_sync.ts
 create mode 100644 x-pack/plugins/security_solution/public/common/components/filter_group/hooks/use_filters.ts
 create mode 100644 x-pack/plugins/security_solution/public/common/components/filter_group/index.scss
 create mode 100644 x-pack/plugins/security_solution/public/common/components/filter_group/index.tsx
 create mode 100644 x-pack/plugins/security_solution/public/common/components/filter_group/loading.tsx
 create mode 100644 x-pack/plugins/security_solution/public/common/components/filter_group/types.ts
 create mode 100644 x-pack/plugins/security_solution/public/common/components/with_space_id/index.tsx
 create mode 100644 x-pack/plugins/security_solution/public/detections/components/detection_page_filters/index.tsx

diff --git a/x-pack/plugins/security_solution/common/constants.ts b/x-pack/plugins/security_solution/common/constants.ts
index c36c55611363a..a1643a5070634 100644
--- a/x-pack/plugins/security_solution/common/constants.ts
+++ b/x-pack/plugins/security_solution/common/constants.ts
@@ -471,3 +471,24 @@ export const RISKY_USERS_DOC_LINK =
 export const MAX_NUMBER_OF_NEW_TERMS_FIELDS = 3;
 
 export const BULK_ADD_TO_TIMELINE_LIMIT = 2000;
+
+export const DEFAULT_DETECTION_PAGE_FILTERS = [
+  {
+    title: 'Status',
+    fieldName: 'kibana.alert.workflow_status',
+    selectedOptions: ['open'],
+  },
+  {
+    title: 'Severity',
+    fieldName: 'kibana.alert.severity',
+    selectedOptions: [],
+  },
+  {
+    title: 'User',
+    fieldName: 'user.name',
+  },
+  {
+    title: 'Host',
+    fieldName: 'host.name',
+  },
+];
diff --git a/x-pack/plugins/security_solution/common/utils/format_page_filter_search_param.ts b/x-pack/plugins/security_solution/common/utils/format_page_filter_search_param.ts
new file mode 100644
index 0000000000000..eb33e8cd629fe
--- /dev/null
+++ b/x-pack/plugins/security_solution/common/utils/format_page_filter_search_param.ts
@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import rison from '@kbn/rison';
+import type { FilterItemObj } from '../../public/common/components/filter_group/types';
+
+export const formatPageFilterSearchParam = (filters: FilterItemObj[]) => {
+  const modifiedFilters = filters.map((filter) => ({
+    title: filter.title ?? filter.fieldName,
+    selectedOptions: filter.selectedOptions ?? [],
+    fieldName: filter.fieldName,
+    existsSelected: filter.existsSelected ?? false,
+    exclude: filter.exclude ?? false,
+  }));
+  return rison.encode(modifiedFilters);
+};
diff --git a/x-pack/plugins/security_solution/cypress/e2e/detection_alerts/changing_alert_status.cy.ts b/x-pack/plugins/security_solution/cypress/e2e/detection_alerts/changing_alert_status.cy.ts
index 692c81bd58381..19d1a24cd4f21 100644
--- a/x-pack/plugins/security_solution/cypress/e2e/detection_alerts/changing_alert_status.cy.ts
+++ b/x-pack/plugins/security_solution/cypress/e2e/detection_alerts/changing_alert_status.cy.ts
@@ -66,6 +66,7 @@ describe('Changing alert status', () => {
         .then((numberOfOpenedAlertsText) => {
           const numberOfOpenedAlerts = parseInt(numberOfOpenedAlertsText, 10);
           goToClosedAlerts();
+          waitForAlerts();
           cy.get(ALERTS_COUNT)
             .invoke('text')
             .then((alertNumberString) => {
@@ -96,6 +97,8 @@ describe('Changing alert status', () => {
               goToOpenedAlerts();
               waitForAlerts();
 
+              selectCountTable();
+
               cy.get(ALERTS_COUNT).should(
                 'have.text',
                 `${numberOfOpenedAlerts + numberOfAlertsToBeOpened} alerts`.toString()
diff --git a/x-pack/plugins/security_solution/cypress/e2e/detection_alerts/detection_page_filters.cy.ts b/x-pack/plugins/security_solution/cypress/e2e/detection_alerts/detection_page_filters.cy.ts
new file mode 100644
index 0000000000000..c246f28ac09b3
--- /dev/null
+++ b/x-pack/plugins/security_solution/cypress/e2e/detection_alerts/detection_page_filters.cy.ts
@@ -0,0 +1,196 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { getNewRule } from '../../objects/rule';
+import {
+  CONTROL_FRAMES,
+  OPTION_LIST_LABELS,
+  OPTION_LIST_VALUES,
+  OPTION_SELECTABLE,
+} from '../../screens/common/filter_group';
+import { createCustomRuleEnabled } from '../../tasks/api_calls/rules';
+import { cleanKibana } from '../../tasks/common';
+import { login, visit } from '../../tasks/login';
+import { ALERTS_URL } from '../../urls/navigation';
+import { APP_ID, DEFAULT_DETECTION_PAGE_FILTERS } from '../../../common/constants';
+import { formatPageFilterSearchParam } from '../../../common/utils/format_page_filter_search_param';
+import {
+  markAcknowledgedFirstAlert,
+  resetFilters,
+  selectCountTable,
+  waitForAlerts,
+  waitForPageFilters,
+} from '../../tasks/alerts';
+import { ALERTS_COUNT } from '../../screens/alerts';
+import { navigateFromHeaderTo } from '../../tasks/security_header';
+import { ALERTS, CASES } from '../../screens/security_header';
+
+const assertFilterControlsWithFilterObject = (filterObject = DEFAULT_DETECTION_PAGE_FILTERS) => {
+  cy.log(JSON.stringify({ filterObject }));
+
+  cy.get(CONTROL_FRAMES).should((sub) => {
+    expect(sub.length).eq(4);
+  });
+
+  cy.get(OPTION_LIST_LABELS).should((sub) => {
+    filterObject.forEach((filter, idx) => {
+      expect(sub.eq(idx).text()).eq(filter.title);
+    });
+  });
+
+  cy.get(OPTION_LIST_VALUES).should((sub) => {
+    filterObject.forEach((filter, idx) => {
+      expect(sub.eq(idx).text().replace(',', '')).eq(
+        filter.selectedOptions && filter.selectedOptions.length > 0
+          ? filter.selectedOptions.join('')
+          : 'Any'
+      );
+    });
+  });
+};
+
+describe('Detections : Page Filters', () => {
+  before(() => {
+    cleanKibana();
+    login();
+    createCustomRuleEnabled(getNewRule(), 'custom_rule_filters');
+    visit(ALERTS_URL);
+    waitForAlerts();
+    waitForPageFilters();
+  });
+
+  afterEach(() => {
+    cy.clearLocalStorage(`${APP_ID}.pageFilters`);
+    resetFilters();
+  });
+
+  it('Default page filters are populated when nothing is provided in the URL', () => {
+    assertFilterControlsWithFilterObject();
+  });
+
+  it('Page filters are loaded with custom values provided in the URL', () => {
+    const NEW_FILTERS = DEFAULT_DETECTION_PAGE_FILTERS.map((filter) => {
+      if (filter.title === 'Status') {
+        filter.selectedOptions = ['open', 'acknowledged'];
+      }
+      return filter;
+    });
+
+    cy.url().then((url) => {
+      const currURL = new URL(url);
+
+      currURL.searchParams.set('pageFilters', formatPageFilterSearchParam(NEW_FILTERS));
+      cy.visit(currURL.toString());
+      waitForAlerts();
+      assertFilterControlsWithFilterObject(NEW_FILTERS);
+    });
+  });
+
+  it('Page filters are loaded with custom filters and values', () => {
+    const CUSTOM_URL_FILTER = [
+      {
+        title: 'Process',
+        fieldName: 'process.name',
+        selectedOptions: ['testing123'],
+      },
+    ];
+
+    const pageFilterUrlString = formatPageFilterSearchParam(CUSTOM_URL_FILTER);
+
+    cy.url().then((url) => {
+      const currURL = new URL(url);
+
+      currURL.searchParams.set('pageFilters', pageFilterUrlString);
+      cy.visit(currURL.toString());
+
+      waitForAlerts();
+      cy.get(OPTION_LIST_LABELS).should((sub) => {
+        DEFAULT_DETECTION_PAGE_FILTERS.forEach((filter, idx) => {
+          if (idx === DEFAULT_DETECTION_PAGE_FILTERS.length - 1) {
+            expect(sub.eq(idx).text()).eq(CUSTOM_URL_FILTER[0].title);
+          } else {
+            expect(sub.eq(idx).text()).eq(filter.title);
+          }
+        });
+      });
+    });
+  });
+
+  it('URL is updated when ever page filters are loaded', (done) => {
+    cy.on('url:changed', () => {
+      const NEW_FILTERS = DEFAULT_DETECTION_PAGE_FILTERS.map((filter) => {
+        if (filter.title === 'Status') {
+          filter.selectedOptions = [];
+        }
+        return filter;
+      });
+      cy.url().should('have.text', formatPageFilterSearchParam(NEW_FILTERS));
+      done();
+    });
+    cy.get(OPTION_LIST_VALUES).eq(0).click();
+
+    // unselect status open
+    cy.get(OPTION_SELECTABLE(0, 'open')).trigger('click', { force: true });
+  });
+
+  it(`Alert list is updated when the alerts are updated`, () => {
+    // mark status of one alert to be acknowledged
+    selectCountTable();
+    cy.get(ALERTS_COUNT)
+      .invoke('text')
+      .then((noOfAlerts) => {
+        const originalAlertCount = noOfAlerts.split(' ')[0];
+        markAcknowledgedFirstAlert();
+        cy.reload();
+        waitForAlerts();
+        cy.get(OPTION_LIST_VALUES).eq(0).click();
+        cy.get(OPTION_SELECTABLE(0, 'acknowledged')).should('be.visible');
+        cy.get(ALERTS_COUNT)
+          .invoke('text')
+          .should((newAlertCount) => {
+            expect(newAlertCount.split(' ')[0]).eq(String(parseInt(originalAlertCount, 10) - 1));
+          });
+      });
+  });
+
+  it(`URL is updated when filters are updated`, (done) => {
+    const NEW_FILTERS = DEFAULT_DETECTION_PAGE_FILTERS.map((filter) => {
+      if (filter.title === 'Severity') {
+        filter.selectedOptions = ['high'];
+      }
+      return filter;
+    });
+
+    cy.on('url:changed', () => {
+      // we want assertion to run only once URL Changes.
+      cy.url().should('have.text', formatPageFilterSearchParam(NEW_FILTERS));
+      done();
+    });
+    cy.get(OPTION_LIST_VALUES).eq(1).click();
+    cy.get(OPTION_SELECTABLE(1, 'high')).should('be.visible');
+    cy.get(OPTION_SELECTABLE(1, 'high')).click({ force: true });
+  });
+
+  it(`Filters are restored from localstorage when user navigates back to the page.`, () => {
+    // change severity filter to high
+    cy.get(OPTION_LIST_VALUES).eq(1).click();
+    cy.get(OPTION_SELECTABLE(1, 'high')).should('be.visible');
+    cy.get(OPTION_SELECTABLE(1, 'high')).click({ force: true });
+
+    // high should be scuccessfully selected.
+    cy.get(OPTION_LIST_VALUES).eq(1).contains('high');
+
+    navigateFromHeaderTo(CASES); // navigate away from alert page
+
+    navigateFromHeaderTo(ALERTS); // navigate back to alert page
+
+    waitForPageFilters();
+
+    cy.get(OPTION_LIST_VALUES).eq(0).contains('open'); // status should be Open as previously selected
+    cy.get(OPTION_LIST_VALUES).eq(1).contains('high'); // severity should be low as previously selected
+  });
+});
diff --git a/x-pack/plugins/security_solution/cypress/e2e/exceptions/rule_details_flow/add_edit_exception.cy.ts b/x-pack/plugins/security_solution/cypress/e2e/exceptions/rule_details_flow/add_edit_exception.cy.ts
index c7ec942497c50..e00e1aa083151 100644
--- a/x-pack/plugins/security_solution/cypress/e2e/exceptions/rule_details_flow/add_edit_exception.cy.ts
+++ b/x-pack/plugins/security_solution/cypress/e2e/exceptions/rule_details_flow/add_edit_exception.cy.ts
@@ -11,7 +11,10 @@ import { getNewRule } from '../../../objects/rule';
 import { ALERTS_COUNT, EMPTY_ALERT_TABLE, NUMBER_OF_ALERTS } from '../../../screens/alerts';
 import { createCustomRule, createCustomRuleEnabled } from '../../../tasks/api_calls/rules';
 import { goToRuleDetails } from '../../../tasks/alerts_detection_rules';
-import { goToClosedAlerts, goToOpenedAlerts } from '../../../tasks/alerts';
+import {
+  goToClosedAlertsOnRuleDetailsPage,
+  goToOpenedAlertsOnRuleDetailsPage,
+} from '../../../tasks/alerts';
 import {
   esArchiverLoad,
   esArchiverUnload,
@@ -312,7 +315,7 @@ describe('Add/edit exception from rule details', () => {
       cy.get(EMPTY_ALERT_TABLE).should('exist');
 
       // Closed alert should appear in table
-      goToClosedAlerts();
+      goToClosedAlertsOnRuleDetailsPage();
       cy.get(ALERTS_COUNT).should('exist');
       cy.get(NUMBER_OF_ALERTS).should('have.text', `${NUMBER_OF_AUDITBEAT_EXCEPTIONS_ALERTS}`);
 
@@ -329,7 +332,7 @@ describe('Add/edit exception from rule details', () => {
 
       // now that there are no more exceptions, the docs should match and populate alerts
       goToAlertsTab();
-      goToOpenedAlerts();
+      goToOpenedAlertsOnRuleDetailsPage();
       waitForTheRuleToBeExecuted();
       waitForAlertsToPopulate();
 
diff --git a/x-pack/plugins/security_solution/cypress/e2e/exceptions/rule_details_flow/add_edit_exception_data_view.cy.ts b/x-pack/plugins/security_solution/cypress/e2e/exceptions/rule_details_flow/add_edit_exception_data_view.cy.ts
index 79f9945219dc2..6f821af844819 100644
--- a/x-pack/plugins/security_solution/cypress/e2e/exceptions/rule_details_flow/add_edit_exception_data_view.cy.ts
+++ b/x-pack/plugins/security_solution/cypress/e2e/exceptions/rule_details_flow/add_edit_exception_data_view.cy.ts
@@ -12,8 +12,8 @@ import { createCustomRuleEnabled } from '../../../tasks/api_calls/rules';
 import { goToRuleDetails } from '../../../tasks/alerts_detection_rules';
 import {
   addExceptionFromFirstAlert,
-  goToClosedAlerts,
-  goToOpenedAlerts,
+  goToClosedAlertsOnRuleDetailsPage,
+  goToOpenedAlertsOnRuleDetailsPage,
 } from '../../../tasks/alerts';
 import {
   addExceptionConditions,
@@ -108,7 +108,7 @@ describe('Add exception using data views from rule details', () => {
     cy.get(EMPTY_ALERT_TABLE).should('exist');
 
     // Closed alert should appear in table
-    goToClosedAlerts();
+    goToClosedAlertsOnRuleDetailsPage();
     cy.get(ALERTS_COUNT).should('exist');
     cy.get(NUMBER_OF_ALERTS).should('have.text', `${NUMBER_OF_AUDITBEAT_EXCEPTIONS_ALERTS}`);
 
@@ -125,7 +125,7 @@ describe('Add exception using data views from rule details', () => {
 
     // now that there are no more exceptions, the docs should match and populate alerts
     goToAlertsTab();
-    goToOpenedAlerts();
+    goToOpenedAlertsOnRuleDetailsPage();
     waitForTheRuleToBeExecuted();
     waitForAlertsToPopulate();
 
@@ -158,7 +158,7 @@ describe('Add exception using data views from rule details', () => {
     cy.get(EMPTY_ALERT_TABLE).should('exist');
 
     // Closed alert should appear in table
-    goToClosedAlerts();
+    goToClosedAlertsOnRuleDetailsPage();
     cy.get(ALERTS_COUNT).should('exist');
     cy.get(NUMBER_OF_ALERTS).should('have.text', `${NUMBER_OF_AUDITBEAT_EXCEPTIONS_ALERTS}`);
 
@@ -175,7 +175,7 @@ describe('Add exception using data views from rule details', () => {
 
     // now that there are no more exceptions, the docs should match and populate alerts
     goToAlertsTab();
-    goToOpenedAlerts();
+    goToOpenedAlertsOnRuleDetailsPage();
     waitForTheRuleToBeExecuted();
     waitForAlertsToPopulate();
 
diff --git a/x-pack/plugins/security_solution/cypress/screens/alerts.ts b/x-pack/plugins/security_solution/cypress/screens/alerts.ts
index acb2f47bcf27c..4ab83c7ef69e2 100644
--- a/x-pack/plugins/security_solution/cypress/screens/alerts.ts
+++ b/x-pack/plugins/security_solution/cypress/screens/alerts.ts
@@ -102,6 +102,8 @@ export const TAKE_ACTION_POPOVER_BTN = '[data-test-subj="selectedShowBulkActions
 
 export const TIMELINE_CONTEXT_MENU_BTN = '[data-test-subj="timeline-context-menu-button"]';
 
+export const TIMELINE_CONTEXT_MENU = '[data-test-subj="actions-context-menu"]';
+
 export const USER_NAME = '[data-test-subj^=formatted-field][data-test-subj$=user\\.name]';
 
 export const ATTACH_ALERT_TO_CASE_BUTTON = '[data-test-subj="add-to-existing-case-action"]';
@@ -121,3 +123,10 @@ export const USER_RISK_HEADER_COLIMN =
 export const USER_RISK_COLUMN = '[data-gridcell-column-id="user.risk.calculated_level"]';
 
 export const ACTION_COLUMN = '[data-gridcell-column-id="default-timeline-control-column"]';
+
+export const DATAGRID_CHANGES_IN_PROGRESS = '[data-test-subj="body-data-grid"] .euiProgress';
+
+export const EVENT_CONTAINER_TABLE_LOADING = '[data-test-subj="events-container-loading-true"]';
+
+export const EVENT_CONTAINER_TABLE_NOT_LOADING =
+  '[data-test-subj="events-container-loading-false"]';
diff --git a/x-pack/plugins/security_solution/cypress/screens/common/filter_group.ts b/x-pack/plugins/security_solution/cypress/screens/common/filter_group.ts
new file mode 100644
index 0000000000000..18fcbb7d52c0b
--- /dev/null
+++ b/x-pack/plugins/security_solution/cypress/screens/common/filter_group.ts
@@ -0,0 +1,40 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export const FILTER_GROUP_LOADING = '[data-test-subj="filter-group__loading"]';
+export const FILTER_GROUP_ITEMS = '[data-test-subj="filter-group__items"]';
+export const FILTER_GROUP_CLEAR = '[data-test-subj="filter-group__clear"]';
+
+export const CONTROL_FRAMES = '[data-test-subj="control-frame"]';
+
+export const OPTION_LIST_LABELS = '.controlFrame__labelToolTip';
+
+export const OPTION_LIST_VALUES = '.euiFilterButton__textShift';
+
+export const OPTION_LIST_NUMBER_OFF = '.euiFilterButton__notification';
+
+export const OPTION_LISTS_LOADING = '.optionsList--filterBtnWrapper .euiLoadingSpinner';
+
+export const OPTION_LIST_ACTIVE_CLEAR_SELECTION =
+  '[data-test-subj="optionsList-control-clear-all-selections"]';
+
+export const OPTION_SELECTABLE = (popoverIndex: number, value: string) =>
+  `#control-popover-${popoverIndex} [data-test-subj="optionsList-control-selection-${value}"]`;
+
+export const OPTION_IGNORED = (popoverIndex: number, value: string) =>
+  `#control-popover-${popoverIndex} [data-test-subj="optionsList-control-ignored-selection-${value}"]`;
+
+export const DETECTION_PAGE_FILTER_GROUP_WRAPPER = '.filter-group__wrapper';
+
+export const DETECTION_PAGE_FILTERS_LOADING = '.securityPageWrapper .controlFrame--controlLoading';
+
+export const DETECTION_PAGE_FILTER_GROUP_LOADING = '[data-test-subj="filter-group__loading"]';
+
+export const DETECTION_PAGE_FILTER_GROUP_CONTEXT_MENU = '[data-test-subj="filter-group__context"]';
+
+export const DETECTION_PAGE_FILTER_GROUP_RESET_BUTTON =
+  '[data-test-subj="filter-group__context--reset"]';
diff --git a/x-pack/plugins/security_solution/cypress/tasks/alerts.ts b/x-pack/plugins/security_solution/cypress/tasks/alerts.ts
index 1e7b3047edaa2..715c071b9fb68 100644
--- a/x-pack/plugins/security_solution/cypress/tasks/alerts.ts
+++ b/x-pack/plugins/security_solution/cypress/tasks/alerts.ts
@@ -11,15 +11,12 @@ import {
   CHART_SELECT,
   CLOSE_ALERT_BTN,
   CLOSE_SELECTED_ALERTS_BTN,
-  CLOSED_ALERTS_FILTER_BTN,
   EXPAND_ALERT_BTN,
   GROUP_BY_TOP_INPUT,
-  ACKNOWLEDGED_ALERTS_FILTER_BTN,
   LOADING_ALERTS_PANEL,
   MANAGE_ALERT_DETECTION_RULES_BTN,
   MARK_ALERT_ACKNOWLEDGED_BTN,
   OPEN_ALERT_BTN,
-  OPENED_ALERTS_FILTER_BTN,
   SEND_ALERT_TO_TIMELINE_BTN,
   SELECT_TABLE,
   TAKE_ACTION_POPOVER_BTN,
@@ -29,8 +26,12 @@ import {
   TAKE_ACTION_BTN,
   TAKE_ACTION_MENU,
   ADD_ENDPOINT_EXCEPTION_BTN,
+  DATAGRID_CHANGES_IN_PROGRESS,
+  EVENT_CONTAINER_TABLE_NOT_LOADING,
+  CLOSED_ALERTS_FILTER_BTN,
+  OPENED_ALERTS_FILTER_BTN,
 } from '../screens/alerts';
-import { REFRESH_BUTTON } from '../screens/security_header';
+import { LOADING_INDICATOR, REFRESH_BUTTON } from '../screens/security_header';
 import {
   ALERT_TABLE_CELL_ACTIONS_ADD_TO_TIMELINE,
   TIMELINE_COLUMN_SPINNER,
@@ -46,7 +47,19 @@ import {
   USER_DETAILS_LINK,
 } from '../screens/alerts_details';
 import { FIELD_INPUT } from '../screens/exceptions';
+import {
+  DETECTION_PAGE_FILTERS_LOADING,
+  DETECTION_PAGE_FILTER_GROUP_CONTEXT_MENU,
+  DETECTION_PAGE_FILTER_GROUP_LOADING,
+  DETECTION_PAGE_FILTER_GROUP_RESET_BUTTON,
+  DETECTION_PAGE_FILTER_GROUP_WRAPPER,
+  OPTION_LISTS_LOADING,
+  OPTION_LIST_ACTIVE_CLEAR_SELECTION,
+  OPTION_LIST_VALUES,
+  OPTION_SELECTABLE,
+} from '../screens/common/filter_group';
 import { LOADING_SPINNER } from '../screens/common/page';
+import { ALERTS_URL } from '../urls/navigation';
 
 export const addExceptionFromFirstAlert = () => {
   expandFirstAlertActions();
@@ -57,7 +70,7 @@ export const addExceptionFromFirstAlert = () => {
 };
 
 export const openAddEndpointExceptionFromFirstAlert = () => {
-  cy.get(TIMELINE_CONTEXT_MENU_BTN).first().click({ force: true });
+  expandFirstAlertActions();
   cy.root()
     .pipe(($el) => {
       $el.find(ADD_ENDPOINT_EXCEPTION_BTN).trigger('click');
@@ -85,11 +98,7 @@ export const openAddExceptionFromAlertDetails = () => {
 };
 
 export const closeFirstAlert = () => {
-  cy.get(TIMELINE_CONTEXT_MENU_BTN)
-    .first()
-    .pipe(($el) => $el.trigger('click'))
-    .should('be.visible');
-
+  expandFirstAlertActions();
   cy.get(CLOSE_ALERT_BTN)
     .pipe(($el) => $el.trigger('click'))
     .should('not.exist');
@@ -107,8 +116,32 @@ export const closeAlerts = () => {
 };
 
 export const expandFirstAlertActions = () => {
-  cy.get(TIMELINE_CONTEXT_MENU_BTN, { timeout: 10000 }).should('be.visible');
-  cy.get(TIMELINE_CONTEXT_MENU_BTN, { timeout: 10000 }).first().click({ force: true });
+  waitForAlerts();
+
+  let count = 0;
+
+  const click = ($el: JQuery<HTMLElement>) => {
+    count++;
+    return $el.trigger('click');
+  };
+
+  /*
+   *
+   * Sometimes it takes some time for UI to attach event listener to
+   * TIMELINE_CONTEXT_MENU_BTN and cypress is too fast to click.
+   * Becuase of this popover does not open when click.
+   * pipe().should() makes sure that pipe function is repeated until should becomes true
+   *
+   * */
+
+  cy.get(TIMELINE_CONTEXT_MENU_BTN)
+    .first()
+    .should('be.visible')
+    .pipe(click)
+    .should('have.attr', 'data-popover-open', 'true')
+    .then(() => {
+      cy.log(`Clicked ${count} times`);
+    });
 };
 
 export const expandFirstAlert = () => {
@@ -136,26 +169,65 @@ export const setEnrichmentDates = (from?: string, to?: string) => {
   cy.get(UPDATE_ENRICHMENT_RANGE_BUTTON).click();
 };
 
-export const goToClosedAlerts = () => {
+export const refreshAlertPageFilter = () => {
+  // currently there is no consistent way to refresh the filters.
+  // Have raised this with the kibana presentation team who provided this filter group plugin
+  cy.reload();
+  waitForAlerts();
+};
+
+export const togglePageFilterPopover = (filterIndex: number) => {
+  cy.get(OPTION_LIST_VALUES).eq(filterIndex).click({ force: true });
+};
+
+export const clearAllSelections = () => {
+  cy.get(OPTION_LIST_ACTIVE_CLEAR_SELECTION).click({ force: true });
+};
+
+export const selectPageFilterValue = (filterIndex: number, ...values: string[]) => {
+  refreshAlertPageFilter();
+  togglePageFilterPopover(filterIndex);
+  clearAllSelections();
+  values.forEach((value) => {
+    cy.get(OPTION_SELECTABLE(filterIndex, value)).click({ force: true });
+  });
+  waitForAlerts();
+  togglePageFilterPopover(filterIndex);
+};
+
+export const goToClosedAlertsOnRuleDetailsPage = () => {
   cy.get(CLOSED_ALERTS_FILTER_BTN).click();
   cy.get(REFRESH_BUTTON).should('not.have.attr', 'aria-label', 'Needs updating');
   cy.get(REFRESH_BUTTON).should('have.attr', 'aria-label', 'Refresh query');
   cy.get(TIMELINE_COLUMN_SPINNER).should('not.exist');
 };
 
+export const goToClosedAlerts = () => {
+  selectPageFilterValue(0, 'closed');
+  cy.get(REFRESH_BUTTON).should('not.have.attr', 'aria-label', 'Needs updating');
+  cy.get(REFRESH_BUTTON).should('have.attr', 'aria-label', 'Refresh query');
+  cy.get(TIMELINE_COLUMN_SPINNER).should('not.exist');
+};
+
 export const goToManageAlertsDetectionRules = () => {
   cy.get(MANAGE_ALERT_DETECTION_RULES_BTN).should('exist').click({ force: true });
 };
 
-export const goToOpenedAlerts = () => {
+export const goToOpenedAlertsOnRuleDetailsPage = () => {
   cy.get(OPENED_ALERTS_FILTER_BTN).click({ force: true });
   cy.get(REFRESH_BUTTON).should('not.have.attr', 'aria-label', 'Needs updating');
   cy.get(REFRESH_BUTTON).should('have.attr', 'aria-label', 'Refresh query');
 };
 
+export const goToOpenedAlerts = () => {
+  selectPageFilterValue(0, 'open');
+  cy.get(REFRESH_BUTTON).should('not.have.attr', 'aria-label', 'Needs updating');
+  cy.get(REFRESH_BUTTON).should('have.attr', 'aria-label', 'Refresh query');
+};
+
 export const openFirstAlert = () => {
-  cy.get(TIMELINE_CONTEXT_MENU_BTN).first().click({ force: true });
-  cy.get(OPEN_ALERT_BTN).click();
+  expandFirstAlertActions();
+  cy.get(OPEN_ALERT_BTN).should('be.visible').click({ force: true });
 };
 
 export const openAlerts = () => {
@@ -174,18 +246,19 @@ export const clearGroupByTopInput = () => {
 };
 
 export const goToAcknowledgedAlerts = () => {
-  cy.get(ACKNOWLEDGED_ALERTS_FILTER_BTN).click();
+  selectPageFilterValue(0, 'acknowledged');
   cy.get(REFRESH_BUTTON).should('not.have.attr', 'aria-label', 'Needs updating');
   cy.get(REFRESH_BUTTON).should('have.attr', 'aria-label', 'Refresh query');
   cy.get(TIMELINE_COLUMN_SPINNER).should('not.exist');
 };
 
 export const markAcknowledgedFirstAlert = () => {
-  cy.get(TIMELINE_CONTEXT_MENU_BTN).first().click({ force: true });
+  expandFirstAlertActions();
   cy.get(MARK_ALERT_ACKNOWLEDGED_BTN).click();
 };
 
 export const selectNumberOfAlerts = (numberOfAlerts: number) => {
+  waitForAlerts();
   for (let i = 0; i < numberOfAlerts; i++) {
     cy.get(ALERT_CHECKBOX).eq(i).click({ force: true });
   }
@@ -205,7 +278,11 @@ export const addAlertPropertyToTimeline = (propertySelector: string, rowIndex: n
 };
 
 export const waitForAlerts = () => {
+  waitForPageFilters();
   cy.get(REFRESH_BUTTON).should('not.have.attr', 'aria-label', 'Needs updating');
+  cy.get(DATAGRID_CHANGES_IN_PROGRESS).should('not.be.true');
+  cy.get(EVENT_CONTAINER_TABLE_NOT_LOADING).should('be.visible');
+  cy.get(LOADING_INDICATOR).should('not.exist');
 };
 
 export const waitForAlertsPanelToBeLoaded = () => {
@@ -230,3 +307,25 @@ export const scrollAlertTableColumnIntoView = (columnSelector: string) => {
 export const openUserDetailsFlyout = () => {
   cy.get(CELL_EXPANSION_POPOVER).find(USER_DETAILS_LINK).click();
 };
+
+export const waitForPageFilters = () => {
+  cy.log('Waiting for Page Filters');
+  cy.url().then((urlString) => {
+    const url = new URL(urlString);
+    if (url.pathname.endsWith(ALERTS_URL)) {
+      // since these are only valid on the alert page
+      cy.get(DETECTION_PAGE_FILTER_GROUP_WRAPPER).should('exist');
+      cy.get(DETECTION_PAGE_FILTER_GROUP_LOADING).should('not.exist');
+      cy.get(DETECTION_PAGE_FILTERS_LOADING).should('not.exist');
+      cy.get(OPTION_LISTS_LOADING).should('have.lengthOf', 0);
+    } else {
+      cy.log('Skipping Page Filters Wait');
+    }
+  });
+};
+
+export const resetFilters = () => {
+  cy.get(DETECTION_PAGE_FILTER_GROUP_CONTEXT_MENU).click({ force: true });
+  cy.get(DETECTION_PAGE_FILTER_GROUP_RESET_BUTTON).click({ force: true });
+  waitForPageFilters();
+};
diff --git a/x-pack/plugins/security_solution/kibana.json b/x-pack/plugins/security_solution/kibana.json
index bddfc36c7d61d..854ece9ac26ed 100644
--- a/x-pack/plugins/security_solution/kibana.json
+++ b/x-pack/plugins/security_solution/kibana.json
@@ -33,7 +33,8 @@
     "triggersActionsUi",
     "uiActions",
     "unifiedSearch",
-    "files"
+    "files",
+    "controls"
   ],
   "optionalPlugins": [
     "cloudExperiments",
diff --git a/x-pack/plugins/security_solution/public/common/components/filter_group/hooks/use_filter_update_to_url_sync.ts b/x-pack/plugins/security_solution/public/common/components/filter_group/hooks/use_filter_update_to_url_sync.ts
new file mode 100644
index 0000000000000..642a382661804
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/common/components/filter_group/hooks/use_filter_update_to_url_sync.ts
@@ -0,0 +1,53 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type {
+  ControlGroupInput,
+  ControlPanelState,
+  OptionsListEmbeddableInput,
+} from '@kbn/controls-plugin/common';
+import { useEffect, useMemo } from 'react';
+import { useDispatch } from 'react-redux';
+import { formatPageFilterSearchParam } from '../../../../../common/utils/format_page_filter_search_param';
+import { URL_PARAM_KEY } from '../../../hooks/use_url_state';
+import { updateUrlParam } from '../../../store/global_url_param/actions';
+import type { FilterItemObj } from '../types';
+
+export interface UseFilterUrlSyncParams {
+  controlGroupInput: ControlGroupInput | undefined;
+}
+
+export const useFilterUpdatesToUrlSync = ({ controlGroupInput }: UseFilterUrlSyncParams) => {
+  const dispatch = useDispatch();
+
+  const formattedFilters: FilterItemObj[] | undefined = useMemo(() => {
+    if (!controlGroupInput) return;
+    const { panels } = controlGroupInput;
+    return Object.keys(panels).map((panelId) => {
+      const {
+        explicitInput: { fieldName, selectedOptions, title, existsSelected, exclude },
+      } = panels[panelId] as ControlPanelState<OptionsListEmbeddableInput>;
+      return {
+        fieldName: fieldName as string,
+        selectedOptions: selectedOptions ?? [],
+        title,
+        existsSelected,
+        exclude,
+      };
+    });
+  }, [controlGroupInput]);
+
+  useEffect(() => {
+    if (!formattedFilters) return;
+    dispatch(
+      updateUrlParam({
+        key: URL_PARAM_KEY.pageFilter,
+        value: formatPageFilterSearchParam(formattedFilters),
+      })
+    );
+  }, [formattedFilters, dispatch]);
+};
diff --git a/x-pack/plugins/security_solution/public/common/components/filter_group/hooks/use_filters.ts b/x-pack/plugins/security_solution/public/common/components/filter_group/hooks/use_filters.ts
new file mode 100644
index 0000000000000..d03374930f7ba
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/common/components/filter_group/hooks/use_filters.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useContext } from 'react';
+import { FilterContext } from '..';
+
+export const useFilters = () => {
+  const context = useContext(FilterContext);
+
+  if (!context) {
+    throw new Error('hook must be used with in FilterGroup Component');
+  }
+
+  return context;
+};
diff --git a/x-pack/plugins/security_solution/public/common/components/filter_group/index.scss b/x-pack/plugins/security_solution/public/common/components/filter_group/index.scss
new file mode 100644
index 0000000000000..dbc1b992c7a6d
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/common/components/filter_group/index.scss
@@ -0,0 +1,11 @@
+[class*=options_list_popover_footer--OptionsListPopoverFooter] {
+  display: none;
+}
+
+[data-test-subj=optionsListControl__sortingOptionsButton] {
+  display: none
+}
+
+[id^=control-popover] .euiPopoverTitle {
+  display: none
+}
diff --git a/x-pack/plugins/security_solution/public/common/components/filter_group/index.tsx b/x-pack/plugins/security_solution/public/common/components/filter_group/index.tsx
new file mode 100644
index 0000000000000..96f9c28300a16
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/common/components/filter_group/index.tsx
@@ -0,0 +1,367 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type {
+  ControlGroupInput,
+  ControlGroupContainer,
+  controlGroupInputBuilder,
+  ControlGroupOutput,
+  OptionsListEmbeddableInput,
+} from '@kbn/controls-plugin/public';
+import { LazyControlGroupRenderer } from '@kbn/controls-plugin/public';
+import type { PropsWithChildren } from 'react';
+import React, { createContext, useCallback, useEffect, useState, useRef, useMemo } from 'react';
+import { ViewMode } from '@kbn/embeddable-plugin/public';
+import {
+  EuiButtonIcon,
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPopover,
+} from '@elastic/eui';
+import type { Subscription } from 'rxjs';
+import styled from 'styled-components';
+import { cloneDeep, debounce } from 'lodash';
+import { withSuspense } from '@kbn/shared-ux-utility';
+import useLocalStorage from 'react-use/lib/useLocalStorage';
+import { useInitializeUrlParam } from '../../utils/global_query_string';
+import { URL_PARAM_KEY } from '../../hooks/use_url_state';
+import type { FilterContextType, FilterGroupProps, FilterItemObj } from './types';
+import { useFilterUpdatesToUrlSync } from './hooks/use_filter_update_to_url_sync';
+import { APP_ID } from '../../../../common/constants';
+import './index.scss';
+import { FilterGroupLoading } from './loading';
+import { withSpaceId } from '../with_space_id';
+
+type ControlGroupBuilder = typeof controlGroupInputBuilder;
+
+const ControlGroupRenderer = withSuspense(LazyControlGroupRenderer);
+
+export const FilterContext = createContext<FilterContextType | undefined>(undefined);
+
+const FilterWrapper = styled.div.attrs((props) => ({
+  className: props.className,
+}))`
+  & .euiFilterButton-hasActiveFilters {
+    font-weight: 400;
+  }
+
+  & .controlGroup {
+    min-height: 40px;
+  }
+`;
+
+const FilterGroupComponent = (props: PropsWithChildren<FilterGroupProps>) => {
+  const {
+    dataViewId,
+    onFilterChange,
+    timeRange,
+    filters,
+    query,
+    chainingSystem = 'HIERARCHICAL',
+    initialControls,
+    spaceId,
+  } = props;
+
+  const filterChangedSubscription = useRef<Subscription>();
+  const inputChangedSubscription = useRef<Subscription>();
+
+  const [controlGroup, setControlGroup] = useState<ControlGroupContainer>();
+
+  const localStoragePageFilterKey = useMemo(
+    () => `${APP_ID}.${spaceId}.${URL_PARAM_KEY.pageFilter}`,
+    [spaceId]
+  );
+
+  const [controlGroupInputUpdates, setControlGroupInputUpdates] = useLocalStorage<
+    ControlGroupInput | undefined
+  >(localStoragePageFilterKey, undefined);
+
+  const [initialUrlParam, setInitialUrlParam] = useState<FilterItemObj[]>();
+
+  const urlDataApplied = useRef<boolean>(false);
+
+  const [isContextMenuVisible, setIsContextMenuVisible] = useState(false);
+
+  const toggleContextMenu = useCallback(() => {
+    setIsContextMenuVisible((prev) => !prev);
+  }, []);
+
+  const onUrlParamInit = (param: FilterItemObj[] | null) => {
+    if (param == null) return;
+    try {
+      setInitialUrlParam(param);
+    } catch (err) {
+      // if there is an error ignore url Param
+      // eslint-disable-next-line no-console
+      console.error(err);
+    }
+  };
+
+  useInitializeUrlParam(URL_PARAM_KEY.pageFilter, onUrlParamInit);
+
+  useEffect(() => {
+    const cleanup = () => {
+      if (filterChangedSubscription.current) {
+        filterChangedSubscription.current.unsubscribe();
+      }
+      if (inputChangedSubscription.current) {
+        inputChangedSubscription.current.unsubscribe();
+      }
+    };
+    return cleanup;
+  }, []);
+
+  useEffect(() => {
+    controlGroup?.updateInput({
+      timeRange,
+      filters,
+      query,
+      chainingSystem,
+    });
+  }, [timeRange, filters, query, chainingSystem, controlGroup]);
+
+  const handleFilterUpdates = useCallback(
+    ({ filters: newFilters }: ControlGroupOutput) => {
+      if (onFilterChange) onFilterChange(newFilters ?? []);
+    },
+    [onFilterChange]
+  );
+
+  const debouncedFilterUpdates = useMemo(
+    () => debounce(handleFilterUpdates, 500),
+    [handleFilterUpdates]
+  );
+
+  const handleInputUpdates = useCallback(
+    (newInput: ControlGroupInput) => {
+      setControlGroupInputUpdates(newInput);
+    },
+    [setControlGroupInputUpdates]
+  );
+
+  const debouncedInputUpdatesHandler = useMemo(
+    () => debounce(handleInputUpdates, 500),
+    [handleInputUpdates]
+  );
+
+  useEffect(() => {
+    if (!controlGroup) return;
+    controlGroup.reload();
+    filterChangedSubscription.current = controlGroup.getOutput$().subscribe({
+      next: debouncedFilterUpdates,
+    });
+
+    inputChangedSubscription.current = controlGroup.getInput$().subscribe({
+      next: debouncedInputUpdatesHandler,
+    });
+  }, [controlGroup, debouncedFilterUpdates, debouncedInputUpdatesHandler]);
+
+  const onControlGroupLoadHandler = useCallback((controlGroupContainer: ControlGroupContainer) => {
+    setControlGroup(controlGroupContainer);
+  }, []);
+
+  const selectControlsWithPriority = useCallback(() => {
+    /*
+     *
+     * Below is the priority of how controls are fetched.
+     *  1. URL
+     *  2. If not found in URL, see in Localstorage
+     *  3. If not found in Localstorage, defaultControls are assigned
+     *
+     * */
+
+    const localInitialControls = cloneDeep(initialControls);
+
+    let overridingControls = initialUrlParam;
+    if (!initialUrlParam && controlGroupInputUpdates) {
+      // if nothing is found in URL Param.. read from local storage
+      const urlParamsFromLocalStorage: FilterItemObj[] = Object.keys(
+        controlGroupInputUpdates?.panels
+      ).map((panelIdx) => {
+        const panel = controlGroupInputUpdates?.panels[panelIdx];
+
+        const { fieldName, title, selectedOptions, existsSelected, exclude } =
+          panel.explicitInput as OptionsListEmbeddableInput;
+        return {
+          fieldName,
+          title,
+          selectedOptions,
+          existsSelected,
+          exclude,
+        };
+      });
+
+      overridingControls = urlParamsFromLocalStorage;
+    }
+
+    // if initialUrlParam Exists... replace localInitialControls with what was provided in the Url
+    if (overridingControls && !urlDataApplied.current) {
+      let maxInitialControlIdx = localInitialControls.length - 1;
+      for (let counter = overridingControls.length - 1; counter >= 0; counter--) {
+        const urlControl = overridingControls[counter];
+        const idx = localInitialControls.findIndex(
+          (item) => item.fieldName === urlControl.fieldName
+        );
+
+        if (idx !== -1) {
+          // if index found, replace that with what was provided in the Url
+          localInitialControls[idx] = {
+            ...localInitialControls[idx],
+            fieldName: urlControl.fieldName,
+            title: urlControl.title ?? urlControl.fieldName,
+            selectedOptions: urlControl.selectedOptions ?? [],
+            existsSelected: urlControl.existsSelected ?? false,
+            exclude: urlControl.exclude ?? false,
+          };
+        } else {
+          // if url param is not available in initialControl, start replacing the last slot in the
+          // initial Control with the last `not found` element in the Url Param
+          //
+          localInitialControls[maxInitialControlIdx] = {
+            fieldName: urlControl.fieldName,
+            selectedOptions: urlControl.selectedOptions ?? [],
+            title: urlControl.title ?? urlControl.fieldName,
+            existsSelected: urlControl.existsSelected ?? false,
+            exclude: urlControl.exclude ?? false,
+          };
+          maxInitialControlIdx--;
+        }
+      }
+    }
+
+    return localInitialControls;
+  }, [initialUrlParam, initialControls, controlGroupInputUpdates]);
+
+  const setOptions = useCallback(
+    async (
+      defaultInput: Partial<ControlGroupInput>,
+      { addOptionsListControl }: ControlGroupBuilder
+    ) => {
+      const initialInput: Partial<ControlGroupInput> = {
+        ...defaultInput,
+        defaultControlWidth: 'small',
+        viewMode: ViewMode.VIEW,
+        timeRange,
+        filters,
+        query,
+        chainingSystem,
+      };
+
+      const finalControls = selectControlsWithPriority();
+
+      urlDataApplied.current = true;
+
+      finalControls.forEach((control, idx) => {
+        addOptionsListControl(initialInput, {
+          controlId: String(idx),
+          hideExclude: true,
+          hideSort: true,
+          hidePanelTitles: true,
+          // option List controls will handle an invalid dataview
+          // & display an appropriate message
+          dataViewId: dataViewId ?? '',
+          ...control,
+        });
+      });
+
+      return initialInput;
+    },
+    [dataViewId, timeRange, filters, chainingSystem, query, selectControlsWithPriority]
+  );
+
+  useFilterUpdatesToUrlSync({
+    controlGroupInput: controlGroupInputUpdates,
+  });
+
+  const withContextMenuAction = useCallback(
+    (fn: unknown) => {
+      return () => {
+        if (typeof fn === 'function') {
+          fn();
+        }
+        toggleContextMenu();
+      };
+    },
+    [toggleContextMenu]
+  );
+
+  const resetSelection = useCallback(() => {
+    if (!controlGroupInputUpdates) return;
+
+    const { panels } = controlGroupInputUpdates;
+    Object.values(panels).forEach((control, idx) => {
+      controlGroup?.updateInputForChild(String(idx), {
+        ...control.explicitInput,
+        selectedOptions: initialControls[idx].selectedOptions ?? [],
+        existsSelected: false,
+        exclude: false,
+        title: initialControls[idx].title ?? initialControls[idx].fieldName,
+        fieldName: initialControls[idx].fieldName,
+      });
+    });
+    controlGroup?.reload();
+  }, [controlGroupInputUpdates, controlGroup, initialControls]);
+
+  const resetButton = useMemo(
+    () => (
+      <EuiContextMenuItem
+        icon="eraser"
+        onClick={withContextMenuAction(resetSelection)}
+        data-test-subj="filter-group__context--reset"
+      >
+        {`Reset`}
+      </EuiContextMenuItem>
+    ),
+    [withContextMenuAction, resetSelection]
+  );
+
+  const contextMenuItems = useMemo(() => [resetButton], [resetButton]);
+
+  return (
+    <FilterWrapper className="filter-group__wrapper">
+      <EuiFlexGroup alignItems="center" justifyContent="center" gutterSize="s">
+        <EuiFlexItem grow={true} data-test-subj="filter_group__items">
+          <ControlGroupRenderer
+            onLoadComplete={onControlGroupLoadHandler}
+            getInitialInput={setOptions}
+          />
+          {!controlGroup ? <FilterGroupLoading /> : null}
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiPopover
+            id="filter-group__context-menu"
+            button={
+              <EuiButtonIcon
+                display="empty"
+                size="s"
+                iconType="boxesHorizontal"
+                onClick={toggleContextMenu}
+                data-test-subj="filter-group__context"
+              />
+            }
+            isOpen={isContextMenuVisible}
+            closePopover={toggleContextMenu}
+            panelPaddingSize="none"
+            anchorPosition="downLeft"
+          >
+            <EuiContextMenuPanel items={contextMenuItems} />
+          </EuiPopover>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      {props.children}
+    </FilterWrapper>
+  );
+};
+
+// FilterGroupNeeds spaceId to be invariant because it is being used in localstorage
+// Hence we will render component only when spaceId has a value.
+export const FilterGroup = withSpaceId<FilterGroupProps>(
+  FilterGroupComponent,
+  <FilterGroupLoading />
+);
diff --git a/x-pack/plugins/security_solution/public/common/components/filter_group/loading.tsx b/x-pack/plugins/security_solution/public/common/components/filter_group/loading.tsx
new file mode 100644
index 0000000000000..56da90f6d2c85
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/common/components/filter_group/loading.tsx
@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiButton, EuiLoadingChart } from '@elastic/eui';
+
+export const FilterGroupLoading = () => {
+  return (
+    <EuiButton color="text">
+      <EuiLoadingChart data-test-subj="filter-group__loading" />
+    </EuiButton>
+  );
+};
diff --git a/x-pack/plugins/security_solution/public/common/components/filter_group/types.ts b/x-pack/plugins/security_solution/public/common/components/filter_group/types.ts
new file mode 100644
index 0000000000000..e3f178ba24d66
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/common/components/filter_group/types.ts
@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { ControlGroupInput, OptionsListEmbeddableInput } from '@kbn/controls-plugin/common';
+import type { AddOptionsListControlProps } from '@kbn/controls-plugin/public';
+import type { Filter } from '@kbn/es-query';
+
+export type FilterUrlFormat = Record<
+  string,
+  Pick<
+    OptionsListEmbeddableInput,
+    'selectedOptions' | 'title' | 'fieldName' | 'existsSelected' | 'exclude'
+  >
+>;
+
+export interface FilterContextType {
+  allControls: FilterItemObj[] | undefined;
+  addControl: (controls: FilterItemObj) => void;
+}
+
+export type FilterItemObj = Omit<AddOptionsListControlProps, 'controlId' | 'dataViewId'> &
+  Pick<OptionsListEmbeddableInput, 'existsSelected' | 'exclude'>;
+
+export type FilterGroupProps = {
+  dataViewId: string | null;
+  onFilterChange?: (newFilters: Filter[]) => void;
+  initialControls: FilterItemObj[];
+  spaceId: string;
+} & Pick<ControlGroupInput, 'timeRange' | 'filters' | 'query' | 'chainingSystem'>;
diff --git a/x-pack/plugins/security_solution/public/common/components/local_storage/index.tsx b/x-pack/plugins/security_solution/public/common/components/local_storage/index.tsx
index 8422b4dc96f28..2e496e5fa10d7 100644
--- a/x-pack/plugins/security_solution/public/common/components/local_storage/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/local_storage/index.tsx
@@ -30,7 +30,6 @@ export const useLocalStorage = <T,>({
 
   const readValueFromLocalStorage = useCallback(() => {
     const value = storage.get(`${plugin}.${key}`);
-
     const valueAndDefaultTypesAreDifferent = typeof value !== typeof defaultValue;
     const valueIsInvalid = isInvalidDefault != null && isInvalidDefault(value);
 
diff --git a/x-pack/plugins/security_solution/public/common/components/with_space_id/index.tsx b/x-pack/plugins/security_solution/public/common/components/with_space_id/index.tsx
new file mode 100644
index 0000000000000..f7140f74d1d82
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/common/components/with_space_id/index.tsx
@@ -0,0 +1,47 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiButton, EuiLoadingSpinner } from '@elastic/eui';
+import type { ComponentType } from 'react';
+import type { ReactElement } from 'react-markdown';
+import { useSpaceId } from '../../hooks/use_space_id';
+
+type OmitSpaceId<T extends { spaceId: string }> = Omit<T, 'spaceId'>;
+
+interface WithSpaceIdArgs {
+  spaceId: string;
+}
+
+/**
+ *
+ * This HOC ensures that component get valid non-null
+ * spaceId if the component needs it is as an invariant
+ *
+ * */
+export const withSpaceId = <P extends WithSpaceIdArgs>(
+  Component: ComponentType<OmitSpaceId<P> & WithSpaceIdArgs>,
+  fallback?: ReactElement
+) => {
+  const ComponentWithSpaceId = (props: OmitSpaceId<P>) => {
+    const spaceId = useSpaceId();
+
+    if (!spaceId) {
+      return (
+        fallback ?? (
+          <EuiButton color="text">
+            <EuiLoadingSpinner data-test-subj="filter-group__loading" />
+          </EuiButton>
+        )
+      );
+    }
+
+    return <Component {...props} spaceId={spaceId} />;
+  };
+
+  return ComponentWithSpaceId;
+};
diff --git a/x-pack/plugins/security_solution/public/common/hooks/use_url_state.ts b/x-pack/plugins/security_solution/public/common/hooks/use_url_state.ts
index fb7249f37adca..ff491d55c314a 100644
--- a/x-pack/plugins/security_solution/public/common/hooks/use_url_state.ts
+++ b/x-pack/plugins/security_solution/public/common/hooks/use_url_state.ts
@@ -30,5 +30,6 @@ export enum URL_PARAM_KEY {
   sourcerer = 'sourcerer',
   timeline = 'timeline',
   timerange = 'timerange',
+  pageFilter = 'pageFilters',
   rulesTable = 'rulesTable',
 }
diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx
index 5e4d4e5234ed2..407c2da04140e 100644
--- a/x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx
@@ -78,7 +78,7 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
   showOnlyThreatIndicatorAlerts,
   tableId,
   to,
-  filterGroup = 'open',
+  filterGroup,
 }) => {
   const dispatch = useDispatch();
 
@@ -158,14 +158,17 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
   );
 
   const defaultFiltersMemo = useMemo(() => {
-    const alertStatusFilter = buildAlertStatusFilter(filterGroup);
-
+    let alertStatusFilter: Filter[] = [];
+    if (filterGroup) {
+      alertStatusFilter = buildAlertStatusFilter(filterGroup);
+    }
     if (isEmpty(defaultFilters)) {
       return alertStatusFilter;
     } else if (defaultFilters != null && !isEmpty(defaultFilters)) {
       return [...defaultFilters, ...alertStatusFilter];
     }
   }, [defaultFilters, filterGroup]);
+
   const { filterManager } = kibana.services.data.query;
 
   const tGridEnabled = useIsExperimentalFeatureEnabled('tGridEnabled');
diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/alert_context_menu.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/alert_context_menu.tsx
index c5ecfe797bc36..2aec4bb0e97e6 100644
--- a/x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/alert_context_menu.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/alert_context_menu.tsx
@@ -124,12 +124,13 @@ const AlertContextMenuComponent: React.FC<AlertContextMenuProps & PropsFromRedux
           data-test-subj="timeline-context-menu-button"
           size="s"
           iconType="boxesHorizontal"
+          data-popover-open={isPopoverOpen}
           onClick={onButtonClick}
           isDisabled={disabled}
         />
       </EuiToolTip>
     );
-  }, [disabled, onButtonClick, ariaLabel]);
+  }, [disabled, onButtonClick, ariaLabel, isPopoverOpen]);
 
   const refetchQuery = (newQueries: inputsModel.GlobalQuery[]) => {
     newQueries.forEach((q) => q.refetch && (q.refetch as inputsModel.Refetch)());
@@ -258,7 +259,7 @@ const AlertContextMenuComponent: React.FC<AlertContextMenuProps & PropsFromRedux
               anchorPosition="downLeft"
               repositionOnScroll
             >
-              <EuiContextMenuPanel size="s" items={items} />
+              <EuiContextMenuPanel size="s" items={items} data-test-subj="actions-context-menu" />
             </EuiPopover>
           </EventsTdContent>
         </div>
diff --git a/x-pack/plugins/security_solution/public/detections/components/detection_page_filters/index.tsx b/x-pack/plugins/security_solution/public/detections/components/detection_page_filters/index.tsx
new file mode 100644
index 0000000000000..e4b1850025d0a
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/detections/components/detection_page_filters/index.tsx
@@ -0,0 +1,55 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { ComponentProps } from 'react';
+import React, { useState, useCallback } from 'react';
+import type { Filter } from '@kbn/es-query';
+import { isEqual } from 'lodash';
+import { DEFAULT_DETECTION_PAGE_FILTERS } from '../../../../common/constants';
+import { FilterGroup } from '../../../common/components/filter_group';
+
+type FilterItemSetProps = Omit<ComponentProps<typeof FilterGroup>, 'initialControls'>;
+
+const FilterItemSetComponent = (props: FilterItemSetProps) => {
+  const { dataViewId, onFilterChange, ...restFilterItemGroupProps } = props;
+
+  const [initialFilterControls] = useState(DEFAULT_DETECTION_PAGE_FILTERS);
+
+  const filterChangesHandler = useCallback(
+    (newFilters: Filter[]) => {
+      if (!onFilterChange) {
+        return;
+      }
+      const updatedFilters = newFilters.map((filter) => {
+        return {
+          ...filter,
+          meta: {
+            ...filter.meta,
+            disabled: false,
+          },
+        };
+      });
+      onFilterChange(updatedFilters);
+    },
+    [onFilterChange]
+  );
+  return (
+    <FilterGroup
+      dataViewId={dataViewId}
+      onFilterChange={filterChangesHandler}
+      initialControls={initialFilterControls}
+      {...restFilterItemGroupProps}
+    />
+  );
+};
+
+const arePropsEqual = (prevProps: FilterItemSetProps, newProps: FilterItemSetProps) => {
+  const _isEqual = isEqual(prevProps, newProps);
+  return _isEqual;
+};
+
+export const DetectionPageFilterSet = React.memo(FilterItemSetComponent, arePropsEqual);
diff --git a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/chart_panels/index.tsx b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/chart_panels/index.tsx
index 83df1b0018b1f..ddfe14d51201f 100644
--- a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/chart_panels/index.tsx
+++ b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/chart_panels/index.tsx
@@ -7,7 +7,7 @@
 
 import type { MappingRuntimeFields } from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
 import type { Filter, Query } from '@kbn/es-query';
-import { EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
+import { EuiFlexItem, EuiLoadingContent, EuiLoadingSpinner } from '@elastic/eui';
 import React, { useCallback, useMemo } from 'react';
 import styled from 'styled-components';
 
@@ -143,7 +143,7 @@ const ChartPanelsComponent: React.FC<Props> = ({
       {alertViewSelection === 'trend' && (
         <FullHeightFlexItem grow={2}>
           {isLoadingIndexPattern ? (
-            <EuiLoadingSpinner data-test-subj="trendLoadingSpinner" size="xl" />
+            <EuiLoadingContent lines={10} data-test-subj="trendLoadingSpinner" />
           ) : (
             <AlertsHistogramPanel
               alignHeader="flexStart"
@@ -174,7 +174,7 @@ const ChartPanelsComponent: React.FC<Props> = ({
       {alertViewSelection === 'table' && (
         <FullHeightFlexItem grow={1}>
           {isLoadingIndexPattern ? (
-            <EuiLoadingSpinner data-test-subj="tableLoadingSpinner" size="xl" />
+            <EuiLoadingContent lines={10} data-test-subj="tableLoadingSpinner" />
           ) : (
             <AlertsCountPanel
               alignHeader="flexStart"
@@ -202,7 +202,7 @@ const ChartPanelsComponent: React.FC<Props> = ({
       {alertViewSelection === 'treemap' && (
         <FullHeightFlexItem grow={1}>
           {isLoadingIndexPattern ? (
-            <EuiLoadingSpinner data-test-subj="treemapLoadingSpinner" size="xl" />
+            <EuiLoadingContent lines={10} data-test-subj="treemapLoadingSpinner" />
           ) : (
             <AlertsTreemapPanel
               addFilter={addFilter}
diff --git a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/detection_engine.tsx b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/detection_engine.tsx
index cff7c40a0fe80..8109cd00cdbcc 100644
--- a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/detection_engine.tsx
+++ b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/detection_engine.tsx
@@ -8,29 +8,20 @@
 // No bueno, I know! Encountered when reverting RBAC work post initial BCs
 // Don't want to include large amounts of refactor in this temporary workaround
 // TODO: Refactor code - component can be broken apart
-/* eslint-disable complexity */
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiLoadingSpinner,
-  EuiSpacer,
-  EuiWindowEvent,
-  EuiHorizontalRule,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiLoadingSpinner, EuiSpacer, EuiWindowEvent } from '@elastic/eui';
 import styled from 'styled-components';
 import { noop } from 'lodash/fp';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import type { ConnectedProps } from 'react-redux';
 import { connect, useDispatch } from 'react-redux';
 import type { Dispatch } from 'redux';
-
 import { isTab } from '@kbn/timelines-plugin/public';
+import type { Filter } from '@kbn/es-query';
 import type { DocLinks } from '@kbn/doc-links';
-import { FILTER_OPEN, TableId } from '../../../../common/types';
+import { TableId } from '../../../../common/types';
 import { tableDefaults } from '../../../common/store/data_table/defaults';
 import { dataTableActions, dataTableSelectors } from '../../../common/store/data_table';
 import { InputsModelId } from '../../../common/store/inputs/constants';
-import type { Status } from '../../../../common/detection_engine/schemas/common/schemas';
 import { useDeepEqualSelector, useShallowEqualSelector } from '../../../common/hooks/use_selector';
 import { SecurityPageName } from '../../../app/types';
 import { useGlobalTime } from '../../../common/containers/use_global_time';
@@ -59,7 +50,6 @@ import {
   showGlobalFilters,
 } from '../../../timelines/components/timeline/helpers';
 import {
-  buildAlertStatusFilter,
   buildShowBuildingBlockFilter,
   buildThreatMatchFilter,
 } from '../../components/alerts_table/default_config';
@@ -71,10 +61,10 @@ import { SourcererScopeName } from '../../../common/store/sourcerer/model';
 import { NeedAdminForUpdateRulesCallOut } from '../../components/callouts/need_admin_for_update_callout';
 import { MissingPrivilegesCallOut } from '../../components/callouts/missing_privileges_callout';
 import { useKibana } from '../../../common/lib/kibana';
-import { AlertsTableFilterGroup } from '../../components/alerts_table/alerts_filter_group';
 import { NoPrivileges } from '../../../common/components/no_privileges';
 import { HeaderPage } from '../../../common/components/header_page';
 import { LandingPageComponent } from '../../../common/components/landing_page';
+import { DetectionPageFilterSet } from '../../components/detection_page_filters';
 
 /**
  * Need a 100% height here to account for the graph/analyze tool, which sets no explicit height parameters, but fills the available space.
@@ -87,22 +77,13 @@ const StyledFullHeightContainer = styled.div`
 
 type DetectionEngineComponentProps = PropsFromRedux;
 
-const DetectionEnginePageComponent: React.FC<DetectionEngineComponentProps> = ({
-  clearEventsDeleted,
-  clearEventsLoading,
-}) => {
+const DetectionEnginePageComponent: React.FC<DetectionEngineComponentProps> = () => {
   const dispatch = useDispatch();
   const containerElement = useRef<HTMLDivElement | null>(null);
   const getTable = useMemo(() => dataTableSelectors.getTableByIdSelector(), []);
   const graphEventId = useShallowEqualSelector(
     (state) => (getTable(state, TableId.alertsOnAlertsPage) ?? tableDefaults).graphEventId
   );
-  const updatedAt = useShallowEqualSelector(
-    (state) => (getTable(state, TableId.alertsOnAlertsPage) ?? tableDefaults).updated
-  );
-  const isAlertsLoading = useShallowEqualSelector(
-    (state) => (getTable(state, TableId.alertsOnAlertsPage) ?? tableDefaults).isLoading
-  );
   const getGlobalFiltersQuerySelector = useMemo(
     () => inputsSelectors.globalFiltersQuerySelector(),
     []
@@ -128,9 +109,12 @@ const DetectionEnginePageComponent: React.FC<DetectionEngineComponentProps> = ({
   const { loading: listsConfigLoading, needsConfiguration: needsListsConfiguration } =
     useListsConfig();
 
+  const [detectionPageFilters, setDetectionPageFilters] = useState<Filter[]>();
+
   const {
     indexPattern,
     runtimeMappings,
+    dataViewId,
     loading: isLoadingIndexPattern,
   } = useSourcererDataView(SourcererScopeName.detections);
 
@@ -140,10 +124,8 @@ const DetectionEnginePageComponent: React.FC<DetectionEngineComponentProps> = ({
   const loading = userInfoLoading || listsConfigLoading;
   const {
     application: { navigateToUrl },
-    timelines: timelinesUi,
     data,
   } = useKibana().services;
-  const [filterGroup, setFilterGroup] = useState<Status>(FILTER_OPEN);
 
   const { filterManager } = data.query;
 
@@ -163,8 +145,6 @@ const DetectionEnginePageComponent: React.FC<DetectionEngineComponentProps> = ({
     [filterManager]
   );
 
-  const showUpdating = useMemo(() => isAlertsLoading || loading, [isAlertsLoading, loading]);
-
   const updateDateRangeCallback = useCallback<UpdateDateRange>(
     ({ x }) => {
       if (!x) {
@@ -190,25 +170,14 @@ const DetectionEnginePageComponent: React.FC<DetectionEngineComponentProps> = ({
     [formatUrl, navigateToUrl]
   );
 
-  // Callback for when open/closed filter changes
-  const onFilterGroupChangedCallback = useCallback(
-    (newFilterGroup: Status) => {
-      const timelineId = TableId.alertsOnAlertsPage;
-      clearEventsLoading({ id: timelineId });
-      clearEventsDeleted({ id: timelineId });
-      setFilterGroup(newFilterGroup);
-    },
-    [clearEventsLoading, clearEventsDeleted, setFilterGroup]
-  );
-
   const alertsHistogramDefaultFilters = useMemo(
     () => [
       ...filters,
       ...buildShowBuildingBlockFilter(showBuildingBlockAlerts),
-      ...buildAlertStatusFilter(filterGroup),
       ...buildThreatMatchFilter(showOnlyThreatIndicatorAlerts),
+      ...(detectionPageFilters ?? []),
     ],
-    [filters, showBuildingBlockAlerts, showOnlyThreatIndicatorAlerts, filterGroup]
+    [filters, showBuildingBlockAlerts, showOnlyThreatIndicatorAlerts, detectionPageFilters]
   );
 
   // AlertsTable manages global filters itself, so not including `filters`
@@ -216,8 +185,9 @@ const DetectionEnginePageComponent: React.FC<DetectionEngineComponentProps> = ({
     () => [
       ...buildShowBuildingBlockFilter(showBuildingBlockAlerts),
       ...buildThreatMatchFilter(showOnlyThreatIndicatorAlerts),
+      ...(detectionPageFilters ?? []),
     ],
-    [showBuildingBlockAlerts, showOnlyThreatIndicatorAlerts]
+    [showBuildingBlockAlerts, showOnlyThreatIndicatorAlerts, detectionPageFilters]
   );
 
   const onShowBuildingBlockAlertsChangedCallback = useCallback(
@@ -258,6 +228,19 @@ const DetectionEnginePageComponent: React.FC<DetectionEngineComponentProps> = ({
     [containerElement, onSkipFocusBeforeEventsTable, onSkipFocusAfterEventsTable]
   );
 
+  const pageFiltersUpdateHandler = useCallback((newFilters: Filter[]) => {
+    setDetectionPageFilters(newFilters);
+  }, []);
+
+  const isAlertTableLoading = useMemo(
+    () => loading || !Array.isArray(detectionPageFilters),
+    [loading, detectionPageFilters]
+  );
+  const isChartPanelLoading = useMemo(
+    () => isLoadingIndexPattern || !Array.isArray(detectionPageFilters),
+    [isLoadingIndexPattern, detectionPageFilters]
+  );
+
   if (loading) {
     return (
       <SecuritySolutionPageWrapper>
@@ -324,33 +307,24 @@ const DetectionEnginePageComponent: React.FC<DetectionEngineComponentProps> = ({
                   {i18n.BUTTON_MANAGE_RULES}
                 </SecuritySolutionLinkButton>
               </HeaderPage>
-              <EuiHorizontalRule margin="m" />
-              <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
-                <EuiFlexItem grow={false}>
-                  <AlertsTableFilterGroup
-                    status={filterGroup}
-                    onFilterGroupChanged={onFilterGroupChangedCallback}
-                  />
-                </EuiFlexItem>
-
-                <EuiFlexItem grow={false}>
-                  <EuiFlexGroup alignItems="center" gutterSize="none">
-                    <EuiFlexItem grow={false}>
-                      {updatedAt &&
-                        timelinesUi.getLastUpdated({
-                          updatedAt: updatedAt || Date.now(),
-                          showUpdating,
-                        })}
-                    </EuiFlexItem>
-                  </EuiFlexGroup>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-              <EuiSpacer size="m" />
+              <DetectionPageFilterSet
+                dataViewId={dataViewId}
+                onFilterChange={pageFiltersUpdateHandler}
+                filters={filters}
+                query={query}
+                timeRange={{
+                  from,
+                  to,
+                  mode: 'absolute',
+                }}
+                chainingSystem="HIERARCHICAL"
+              />
 
+              <EuiSpacer size="m" />
               <ChartPanels
                 addFilter={addFilter}
                 alertsHistogramDefaultFilters={alertsHistogramDefaultFilters}
-                isLoadingIndexPattern={isLoadingIndexPattern}
+                isLoadingIndexPattern={isChartPanelLoading}
                 query={query}
                 runtimeMappings={runtimeMappings}
                 signalIndexName={signalIndexName}
@@ -361,7 +335,7 @@ const DetectionEnginePageComponent: React.FC<DetectionEngineComponentProps> = ({
             </Display>
             <AlertsTable
               tableId={TableId.alertsOnAlertsPage}
-              loading={loading}
+              loading={isAlertTableLoading}
               hasIndexWrite={hasIndexWrite ?? false}
               hasIndexMaintenance={hasIndexMaintenance ?? false}
               from={from}
@@ -371,7 +345,6 @@ const DetectionEnginePageComponent: React.FC<DetectionEngineComponentProps> = ({
               showOnlyThreatIndicatorAlerts={showOnlyThreatIndicatorAlerts}
               onShowOnlyThreatIndicatorAlertsChanged={onShowOnlyThreatIndicatorAlertsCallback}
               to={to}
-              filterGroup={filterGroup}
             />
           </SecuritySolutionPageWrapper>
         </StyledFullHeightContainer>
diff --git a/x-pack/plugins/security_solution/tsconfig.json b/x-pack/plugins/security_solution/tsconfig.json
index f508a920fa8bd..4ea871a5d8433 100644
--- a/x-pack/plugins/security_solution/tsconfig.json
+++ b/x-pack/plugins/security_solution/tsconfig.json
@@ -125,6 +125,8 @@
     "@kbn/core-status-common-internal",
     "@kbn/repo-info",
     "@kbn/storybook",
+    "@kbn/controls-plugin",
+    "@kbn/shared-ux-utility",
   ],
   "exclude": [
     "target/**/*",

From 0b1ecc9844565188113a60f8f267068f6ce30a54 Mon Sep 17 00:00:00 2001
From: Antonio <antonio.coelho@elastic.co>
Date: Tue, 3 Jan 2023 14:09:50 +0100
Subject: [PATCH 7/9] [ResponseOps] [Cases] Allow sorting cases list by status,
 severity and title (#148193)

Connected to #132041

## Summary

Sorting by status, severity, and title is now allowed in the all-cases
list.

### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

---

## Release notes

Sorting by status, severity, and title is now allowed in the all-cases
list.

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 x-pack/plugins/cases/common/ui/types.ts       |  5 +-
 .../all_cases/all_cases_list.test.tsx         | 73 ++++++++++++++++++-
 .../components/all_cases/all_cases_list.tsx   |  3 +-
 .../all_cases/use_cases_columns.test.tsx      | 54 ++++++++++++++
 .../all_cases/use_cases_columns.tsx           | 24 +++---
 5 files changed, 144 insertions(+), 15 deletions(-)

diff --git a/x-pack/plugins/cases/common/ui/types.ts b/x-pack/plugins/cases/common/ui/types.ts
index dc8ccf55c9f5d..bc385b68aeeaf 100644
--- a/x-pack/plugins/cases/common/ui/types.ts
+++ b/x-pack/plugins/cases/common/ui/types.ts
@@ -127,8 +127,11 @@ export type SingleCaseMetricsFeature =
   | 'lifespan';
 
 export enum SortFieldCase {
-  createdAt = 'createdAt',
   closedAt = 'closedAt',
+  createdAt = 'createdAt',
+  severity = 'severity',
+  status = 'status',
+  title = 'title',
 }
 
 export type ElasticUser = SnakeToCamelCase<User>;
diff --git a/x-pack/plugins/cases/public/components/all_cases/all_cases_list.test.tsx b/x-pack/plugins/cases/public/components/all_cases/all_cases_list.test.tsx
index 838ebeea59030..3450313114a0b 100644
--- a/x-pack/plugins/cases/public/components/all_cases/all_cases_list.test.tsx
+++ b/x-pack/plugins/cases/public/components/all_cases/all_cases_list.test.tsx
@@ -8,7 +8,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import moment from 'moment-timezone';
-import { render, waitFor, screen, act } from '@testing-library/react';
+import { render, waitFor, screen, act, within } from '@testing-library/react';
 import { renderHook } from '@testing-library/react-hooks';
 import userEvent from '@testing-library/user-event';
 import { waitForEuiPopoverOpen } from '@elastic/eui/lib/test/rtl';
@@ -257,23 +257,28 @@ describe('AllCasesListGeneric', () => {
         expect.objectContaining({
           queryParams: {
             ...DEFAULT_QUERY_PARAMS,
-            sortOrder: 'asc',
           },
         })
       );
     });
   });
 
+  it('renders the title column', async () => {
+    const res = appMockRenderer.render(<AllCasesList />);
+
+    expect(res.getByTestId('tableHeaderCell_title_0')).toBeInTheDocument();
+  });
+
   it('renders the status column', async () => {
     const res = appMockRenderer.render(<AllCasesList />);
 
-    expect(res.getByTestId('tableHeaderCell_Status_6')).toBeInTheDocument();
+    expect(res.getByTestId('tableHeaderCell_status_6')).toBeInTheDocument();
   });
 
   it('renders the severity column', async () => {
     const res = appMockRenderer.render(<AllCasesList />);
 
-    expect(res.getByTestId('tableHeaderCell_Severity_7')).toBeInTheDocument();
+    expect(res.getByTestId('tableHeaderCell_severity_7')).toBeInTheDocument();
   });
 
   it('should render the case stats', () => {
@@ -393,6 +398,66 @@ describe('AllCasesListGeneric', () => {
     });
   });
 
+  it('should sort by status', async () => {
+    const result = appMockRenderer.render(<AllCasesList isSelectorView={false} />);
+
+    userEvent.click(
+      within(result.getByTestId('tableHeaderCell_status_6')).getByTestId('tableHeaderSortButton')
+    );
+
+    await waitFor(() => {
+      expect(useGetCasesMock).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          queryParams: {
+            ...DEFAULT_QUERY_PARAMS,
+            sortField: SortFieldCase.status,
+            sortOrder: 'asc',
+          },
+        })
+      );
+    });
+  });
+
+  it('should sort by severity', async () => {
+    const result = appMockRenderer.render(<AllCasesList isSelectorView={false} />);
+
+    userEvent.click(
+      within(result.getByTestId('tableHeaderCell_severity_7')).getByTestId('tableHeaderSortButton')
+    );
+
+    await waitFor(() => {
+      expect(useGetCasesMock).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          queryParams: {
+            ...DEFAULT_QUERY_PARAMS,
+            sortField: SortFieldCase.severity,
+            sortOrder: 'asc',
+          },
+        })
+      );
+    });
+  });
+
+  it('should sort by title', async () => {
+    const result = appMockRenderer.render(<AllCasesList isSelectorView={false} />);
+
+    userEvent.click(
+      within(result.getByTestId('tableHeaderCell_title_0')).getByTestId('tableHeaderSortButton')
+    );
+
+    await waitFor(() => {
+      expect(useGetCasesMock).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          queryParams: {
+            ...DEFAULT_QUERY_PARAMS,
+            sortField: SortFieldCase.title,
+            sortOrder: 'asc',
+          },
+        })
+      );
+    });
+  });
+
   it('should filter by status: closed', async () => {
     const result = appMockRenderer.render(<AllCasesList isSelectorView={false} />);
     userEvent.click(result.getByTestId('case-status-filter'));
diff --git a/x-pack/plugins/cases/public/components/all_cases/all_cases_list.tsx b/x-pack/plugins/cases/public/components/all_cases/all_cases_list.tsx
index d4ba5692a0b72..3d786b787369a 100644
--- a/x-pack/plugins/cases/public/components/all_cases/all_cases_list.tsx
+++ b/x-pack/plugins/cases/public/components/all_cases/all_cases_list.tsx
@@ -45,7 +45,8 @@ const ProgressLoader = styled(EuiProgress)`
 `;
 
 const getSortField = (field: string): SortFieldCase =>
-  field === SortFieldCase.closedAt ? SortFieldCase.closedAt : SortFieldCase.createdAt;
+  // @ts-ignore
+  SortFieldCase[field] ?? SortFieldCase.title;
 
 export interface AllCasesListProps {
   hiddenStatuses?: CaseStatusWithAllStatus[];
diff --git a/x-pack/plugins/cases/public/components/all_cases/use_cases_columns.test.tsx b/x-pack/plugins/cases/public/components/all_cases/use_cases_columns.test.tsx
index 0647bdd25e382..0b8777465ff2d 100644
--- a/x-pack/plugins/cases/public/components/all_cases/use_cases_columns.test.tsx
+++ b/x-pack/plugins/cases/public/components/all_cases/use_cases_columns.test.tsx
@@ -49,8 +49,10 @@ describe('useCasesColumns ', () => {
       Object {
         "columns": Array [
           Object {
+            "field": "title",
             "name": "Name",
             "render": [Function],
+            "sortable": true,
             "width": "20%",
           },
           Object {
@@ -95,12 +97,16 @@ describe('useCasesColumns ', () => {
             "render": [Function],
           },
           Object {
+            "field": "status",
             "name": "Status",
             "render": [Function],
+            "sortable": true,
           },
           Object {
+            "field": "severity",
             "name": "Severity",
             "render": [Function],
+            "sortable": true,
           },
           Object {
             "align": "right",
@@ -130,8 +136,10 @@ describe('useCasesColumns ', () => {
       Object {
         "columns": Array [
           Object {
+            "field": "title",
             "name": "Name",
             "render": [Function],
+            "sortable": true,
             "width": "20%",
           },
           Object {
@@ -176,12 +184,16 @@ describe('useCasesColumns ', () => {
             "render": [Function],
           },
           Object {
+            "field": "status",
             "name": "Status",
             "render": [Function],
+            "sortable": true,
           },
           Object {
+            "field": "severity",
             "name": "Severity",
             "render": [Function],
+            "sortable": true,
           },
           Object {
             "align": "right",
@@ -210,8 +222,10 @@ describe('useCasesColumns ', () => {
       Object {
         "columns": Array [
           Object {
+            "field": "title",
             "name": "Name",
             "render": [Function],
+            "sortable": true,
             "width": "20%",
           },
           Object {
@@ -250,12 +264,16 @@ describe('useCasesColumns ', () => {
             "render": [Function],
           },
           Object {
+            "field": "status",
             "name": "Status",
             "render": [Function],
+            "sortable": true,
           },
           Object {
+            "field": "severity",
             "name": "Severity",
             "render": [Function],
+            "sortable": true,
           },
           Object {
             "align": "right",
@@ -282,8 +300,10 @@ describe('useCasesColumns ', () => {
       Object {
         "columns": Array [
           Object {
+            "field": "title",
             "name": "Name",
             "render": [Function],
+            "sortable": true,
             "width": "20%",
           },
           Object {
@@ -321,12 +341,16 @@ describe('useCasesColumns ', () => {
             "render": [Function],
           },
           Object {
+            "field": "status",
             "name": "Status",
             "render": [Function],
+            "sortable": true,
           },
           Object {
+            "field": "severity",
             "name": "Severity",
             "render": [Function],
+            "sortable": true,
           },
           Object {
             "align": "right",
@@ -347,8 +371,10 @@ describe('useCasesColumns ', () => {
       Object {
         "columns": Array [
           Object {
+            "field": "title",
             "name": "Name",
             "render": [Function],
+            "sortable": true,
             "width": "20%",
           },
           Object {
@@ -387,12 +413,16 @@ describe('useCasesColumns ', () => {
             "render": [Function],
           },
           Object {
+            "field": "status",
             "name": "Status",
             "render": [Function],
+            "sortable": true,
           },
           Object {
+            "field": "severity",
             "name": "Severity",
             "render": [Function],
+            "sortable": true,
           },
           Object {
             "align": "right",
@@ -418,8 +448,10 @@ describe('useCasesColumns ', () => {
       Object {
         "columns": Array [
           Object {
+            "field": "title",
             "name": "Name",
             "render": [Function],
+            "sortable": true,
             "width": "20%",
           },
           Object {
@@ -458,12 +490,16 @@ describe('useCasesColumns ', () => {
             "render": [Function],
           },
           Object {
+            "field": "status",
             "name": "Status",
             "render": [Function],
+            "sortable": true,
           },
           Object {
+            "field": "severity",
             "name": "Severity",
             "render": [Function],
+            "sortable": true,
           },
           Object {
             "align": "right",
@@ -487,8 +523,10 @@ describe('useCasesColumns ', () => {
       Object {
         "columns": Array [
           Object {
+            "field": "title",
             "name": "Name",
             "render": [Function],
+            "sortable": true,
             "width": "20%",
           },
           Object {
@@ -527,12 +565,16 @@ describe('useCasesColumns ', () => {
             "render": [Function],
           },
           Object {
+            "field": "status",
             "name": "Status",
             "render": [Function],
+            "sortable": true,
           },
           Object {
+            "field": "severity",
             "name": "Severity",
             "render": [Function],
+            "sortable": true,
           },
           Object {
             "align": "right",
@@ -555,8 +597,10 @@ describe('useCasesColumns ', () => {
       Object {
         "columns": Array [
           Object {
+            "field": "title",
             "name": "Name",
             "render": [Function],
+            "sortable": true,
             "width": "20%",
           },
           Object {
@@ -595,12 +639,16 @@ describe('useCasesColumns ', () => {
             "render": [Function],
           },
           Object {
+            "field": "status",
             "name": "Status",
             "render": [Function],
+            "sortable": true,
           },
           Object {
+            "field": "severity",
             "name": "Severity",
             "render": [Function],
+            "sortable": true,
           },
           Object {
             "align": "right",
@@ -622,8 +670,10 @@ describe('useCasesColumns ', () => {
       Object {
         "columns": Array [
           Object {
+            "field": "title",
             "name": "Name",
             "render": [Function],
+            "sortable": true,
             "width": "20%",
           },
           Object {
@@ -662,12 +712,16 @@ describe('useCasesColumns ', () => {
             "render": [Function],
           },
           Object {
+            "field": "status",
             "name": "Status",
             "render": [Function],
+            "sortable": true,
           },
           Object {
+            "field": "severity",
             "name": "Severity",
             "render": [Function],
+            "sortable": true,
           },
         ],
       }
diff --git a/x-pack/plugins/cases/public/components/all_cases/use_cases_columns.tsx b/x-pack/plugins/cases/public/components/all_cases/use_cases_columns.tsx
index df261b613b0b2..601e60ae9a5c5 100644
--- a/x-pack/plugins/cases/public/components/all_cases/use_cases_columns.tsx
+++ b/x-pack/plugins/cases/public/components/all_cases/use_cases_columns.tsx
@@ -112,8 +112,10 @@ export const useCasesColumns = ({
 
   const columns: CasesColumns[] = [
     {
+      field: 'title',
       name: i18n.NAME,
-      render: (theCase: Case) => {
+      sortable: true,
+      render: (title: string, theCase: Case) => {
         if (theCase.id != null && theCase.title != null) {
           const caseDetailsLinkComponent = isSelectorView ? (
             <TruncatedText text={theCase.title} />
@@ -287,23 +289,27 @@ export const useCasesColumns = ({
       },
     },
     {
+      field: 'status',
       name: i18n.STATUS,
-      render: (theCase: Case) => {
-        if (theCase.status === null || theCase.status === undefined) {
-          return getEmptyTagValue();
+      sortable: true,
+      render: (status: Case['status']) => {
+        if (status != null) {
+          return <Status status={status} />;
         }
 
-        return <Status status={theCase.status} />;
+        return getEmptyTagValue();
       },
     },
     {
+      field: 'severity',
       name: i18n.SEVERITY,
-      render: (theCase: Case) => {
-        if (theCase.severity != null) {
-          const severityData = severities[theCase.severity ?? CaseSeverity.LOW];
+      sortable: true,
+      render: (severity: Case['severity']) => {
+        if (severity != null) {
+          const severityData = severities[severity ?? CaseSeverity.LOW];
           return (
             <EuiHealth
-              data-test-subj={`case-table-column-severity-${theCase.severity}`}
+              data-test-subj={`case-table-column-severity-${severity}`}
               color={severityData.color}
             >
               {severityData.label}

From 1c3dc4a15164c12d428158a279d73e7ca850134a Mon Sep 17 00:00:00 2001
From: Jonathan Budzenski <jon@elastic.co>
Date: Tue, 3 Jan 2023 07:36:24 -0600
Subject: [PATCH 8/9] skip flaky suite (#148263)

---
 .../saved_objects/migrations/multiple_kibana_nodes.test.ts     | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/core/server/integration_tests/saved_objects/migrations/multiple_kibana_nodes.test.ts b/src/core/server/integration_tests/saved_objects/migrations/multiple_kibana_nodes.test.ts
index a947854e9249b..34df1d484b92b 100644
--- a/src/core/server/integration_tests/saved_objects/migrations/multiple_kibana_nodes.test.ts
+++ b/src/core/server/integration_tests/saved_objects/migrations/multiple_kibana_nodes.test.ts
@@ -106,7 +106,8 @@ async function createRoot({ logFileName }: CreateRootConfig) {
 // suite is very long, the 10mins default can cause timeouts
 jest.setTimeout(15 * 60 * 1000);
 
-describe('migration v2', () => {
+// FLAKY: https://github.com/elastic/kibana/issues/148263
+describe.skip('migration v2', () => {
   let esServer: TestElasticsearchUtils;
   let rootA: Root;
   let rootB: Root;

From 9111a2ebfc10813b018c61ab249e099f90f7582a Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter.rafelsberger@elastic.co>
Date: Tue, 3 Jan 2023 15:58:15 +0100
Subject: [PATCH 9/9] [ML] AIOps: Replace useMount with useEffect to consider
 return cleanup callback. (#148229)

Replace `useMount` (just the usages with return callbacks) with
`useEffect` to consider return cleanup callback.
---
 .../change_point_detection_context.tsx                | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/aiops/public/components/change_point_detection/change_point_detection_context.tsx b/x-pack/plugins/aiops/public/components/change_point_detection/change_point_detection_context.tsx
index 600a68ff1a498..8d67a28c3055f 100644
--- a/x-pack/plugins/aiops/public/components/change_point_detection/change_point_detection_context.tsx
+++ b/x-pack/plugins/aiops/public/components/change_point_detection/change_point_detection_context.tsx
@@ -16,7 +16,6 @@ import React, {
 } from 'react';
 import { type DataViewField } from '@kbn/data-views-plugin/public';
 import { startWith } from 'rxjs';
-import useMount from 'react-use/lib/useMount';
 import type { Query, Filter } from '@kbn/es-query';
 import { usePageUrlState } from '@kbn/ml-url-state';
 import {
@@ -129,7 +128,7 @@ export const ChangePointDetectionContextProvider: FC = ({ children }) => {
 
   const timeRange = useTimeRangeUpdates();
 
-  useMount(function updateIntervalOnTimeBoundsChange() {
+  useEffect(function updateIntervalOnTimeBoundsChange() {
     const timeUpdateSubscription = timefilter
       .getTimeUpdate$()
       .pipe(startWith(timefilter.getTime()))
@@ -145,7 +144,8 @@ export const ChangePointDetectionContextProvider: FC = ({ children }) => {
     return () => {
       timeUpdateSubscription.unsubscribe();
     };
-  });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const metricFieldOptions = useMemo<DataViewField[]>(() => {
     return dataView.fields.filter(({ aggregatable, type }) => aggregatable && type === 'number');
@@ -195,7 +195,7 @@ export const ChangePointDetectionContextProvider: FC = ({ children }) => {
     [filterManager]
   );
 
-  useMount(() => {
+  useEffect(() => {
     setResultFilter(filterManager.getFilters());
     const sub = filterManager.getUpdates$().subscribe(() => {
       setResultFilter(filterManager.getFilters());
@@ -203,7 +203,8 @@ export const ChangePointDetectionContextProvider: FC = ({ children }) => {
     return () => {
       sub.unsubscribe();
     };
-  });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   useEffect(
     function syncFilters() {