[Security Solution] Add Alert Suppression editable component (elastic…

…#198673) **Partially addresses:** elastic#171520 ## Summary This PR adds is built on top of elastic#193828 and elastic#196948 and adds an Alert Suppression editable component for Three Way Diff tab's final edit side of the upgrade prebuilt rule workflow. ## Details elastic#171520 required adding editable components for each field diffable rule field. Alert Suppression edit component was extracted from Define Rule Step Component into a separate reusable component. To simplify the logic it was split into common Alert Suppression and Threshold Alert Suppression since the latter is a specific use case. ## Caveats Upgrade prebuilt rules workflow is quite different from rule creation and editing. In create and edit rule forms users are capable to change any field at their will. Upgrade prebuilt rules workflow allow to modify only specific fields having diff in the current rule upgrade. There are fields which depend on each other. In particular Alert Suppression isn't supported for EQL sequence though it's addressed in elastic#189725. - Alert Suppression editable component in Three Way Diff workflow isn't disabled EQL sequence rule queries. Alert suppression support for rules with EQL sequence queries is implemented in elastic#189725. - Machine learning rule type require running selected machine learning jobs otherwise input could be disabled in case of there are no fields to pick from otherwise a warning message below the combobox is shown. ## How to test The simplest way to test is via patching installed prebuilt rules via Rule Patch API. Please follow steps below - Enable Prebuilt rule customization feature by adding a `prebuiltRulesCustomizationEnabled` feature flag - Run Kibana locally - Install a prebuilt rule, e.g. `Potential Code Execution via Postgresql` with rule_id `2a692072-d78d-42f3-a48a-775677d79c4e` - Patch the installed rule by running a query below ```bash curl -X PATCH --user elastic:changeme -H 'Content-Type: application/json' -H 'kbn-xsrf: 123' -H "elastic-api-version: 2023-10-31" -d '{"rule_id":"2a692072-d78d-42f3-a48a-775677d79c4e","version":1,"alert_suppression":{"group_by":["host.name"]}}' http://localhost:5601/kbn/api/detection_engine/rules ``` - Open `Detection Rules (SIEM)` Page -> `Rule Updates` -> click on `Potential Code Execution via Postgresql` rule -> expand `EQL Query` to see EQL Query -> press `Edit` button ## Screenshots Custom query prebuilt rule (UI looks similar for EQL, Indicator Match, New Terms and ES|QL rule types) ![image](https://github.com/user-attachments/assets/86015d5b-e252-4d0b-9aa3-fc14679a493b) Machine learning prebuilt rule with a diff in alert suppression ![image](https://github.com/user-attachments/assets/210246cd-27fd-4976-befc-dee023101ec9) Threshold prebuilt rule ![image](https://github.com/user-attachments/assets/44b0c1bc-4134-4d58-bd9a-e8e2d4c50802)
tkajtoch · Nov 12, 2024 · 00a00cf · 00a00cf
1 parent bb15c09
commit 00a00cf
Show file tree

Hide file tree

Showing 96 changed files with 1,942 additions and 877 deletions.
diff --git a/oas_docs/output/kibana.serverless.yaml b/oas_docs/output/kibana.serverless.yaml
@@ -39976,17 +39976,20 @@ components:
       type: object
       properties:
         unit:
-          enum:
-            - s
-            - m
-            - h
-          type: string
+          $ref: >-
+            #/components/schemas/Security_Detections_API_AlertSuppressionDurationUnit
         value:
           minimum: 1
           type: integer
       required:
         - value
         - unit
+    Security_Detections_API_AlertSuppressionDurationUnit:
+      enum:
+        - s
+        - m
+        - h
+      type: string
     Security_Detections_API_AlertSuppressionGroupBy:
       items:
         type: string

diff --git a/oas_docs/output/kibana.yaml b/oas_docs/output/kibana.yaml
@@ -48220,17 +48220,20 @@ components:
       type: object
       properties:
         unit:
-          enum:
-            - s
-            - m
-            - h
-          type: string
+          $ref: >-
+            #/components/schemas/Security_Detections_API_AlertSuppressionDurationUnit
         value:
           minimum: 1
           type: integer
       required:
         - value
         - unit
+    Security_Detections_API_AlertSuppressionDurationUnit:
+      enum:
+        - s
+        - m
+        - h
+      type: string
     Security_Detections_API_AlertSuppressionGroupBy:
       items:
         type: string

diff --git a/.../security_solution/common/api/detection_engine/model/rule_schema/common_attributes.gen.ts b/.../security_solution/common/api/detection_engine/model/rule_schema/common_attributes.gen.ts
@@ -555,10 +555,15 @@ export const RuleExceptionList = z.object({
   namespace_type: z.enum(['agnostic', 'single']),
 });
 
+export type AlertSuppressionDurationUnit = z.infer<typeof AlertSuppressionDurationUnit>;
+export const AlertSuppressionDurationUnit = z.enum(['s', 'm', 'h']);
+export type AlertSuppressionDurationUnitEnum = typeof AlertSuppressionDurationUnit.enum;
+export const AlertSuppressionDurationUnitEnum = AlertSuppressionDurationUnit.enum;
+
 export type AlertSuppressionDuration = z.infer<typeof AlertSuppressionDuration>;
 export const AlertSuppressionDuration = z.object({
   value: z.number().int().min(1),
-  unit: z.enum(['s', 'm', 'h']),
+  unit: AlertSuppressionDurationUnit,
 });
 
 /**

diff --git a/...rity_solution/common/api/detection_engine/model/rule_schema/common_attributes.schema.yaml b/...rity_solution/common/api/detection_engine/model/rule_schema/common_attributes.schema.yaml
@@ -581,18 +581,21 @@ components:
         - type
         - namespace_type
 
+    AlertSuppressionDurationUnit:
+      type: string
+      enum:
+        - s
+        - m
+        - h
+
     AlertSuppressionDuration:
       type: object
       properties:
         value:
           type: integer
           minimum: 1
         unit:
-          type: string
-          enum:
-            - s
-            - m
-            - h
+          $ref: '#/components/schemas/AlertSuppressionDurationUnit'
       required:
         - value
         - unit

diff --git a/...solution/docs/openapi/ess/security_solution_detections_api_2023_10_31.bundled.schema.yaml b/...solution/docs/openapi/ess/security_solution_detections_api_2023_10_31.bundled.schema.yaml
@@ -1560,17 +1560,19 @@ components:
       type: object
       properties:
         unit:
-          enum:
-            - s
-            - m
-            - h
-          type: string
+          $ref: '#/components/schemas/AlertSuppressionDurationUnit'
         value:
           minimum: 1
           type: integer
       required:
         - value
         - unit
+    AlertSuppressionDurationUnit:
+      enum:
+        - s
+        - m
+        - h
+      type: string
     AlertSuppressionGroupBy:
       items:
         type: string

diff --git a/...n/docs/openapi/serverless/security_solution_detections_api_2023_10_31.bundled.schema.yaml b/...n/docs/openapi/serverless/security_solution_detections_api_2023_10_31.bundled.schema.yaml
@@ -850,17 +850,19 @@ components:
       type: object
       properties:
         unit:
-          enum:
-            - s
-            - m
-            - h
-          type: string
+          $ref: '#/components/schemas/AlertSuppressionDurationUnit'
         value:
           minimum: 1
           type: integer
       required:
         - value
         - unit
+    AlertSuppressionDurationUnit:
+      enum:
+        - s
+        - m
+        - h
+      type: string
     AlertSuppressionGroupBy:
       items:
         type: string

diff --git a/x-pack/plugins/security_solution/public/common/components/markdown_editor/plugins/index.ts b/x-pack/plugins/security_solution/public/common/components/markdown_editor/plugins/index.ts
@@ -24,8 +24,8 @@ export const uiPlugins = ({
   insightsUpsellingMessage,
   interactionsUpsellingMessage,
 }: {
-  insightsUpsellingMessage: string | null;
-  interactionsUpsellingMessage: string | null;
+  insightsUpsellingMessage?: string;
+  interactionsUpsellingMessage?: string;
 }) => {
   const currentPlugins = nonStatefulUiPlugins.map((plugin) => plugin.name);
   const insightPluginWithLicense = insightMarkdownPlugin.plugin({

diff --git a/...security_solution/public/common/components/markdown_editor/plugins/insight/index.test.tsx b/...security_solution/public/common/components/markdown_editor/plugins/insight/index.test.tsx
@@ -135,7 +135,7 @@ describe('plugin', () => {
   });
 
   it('show investigate message when insightsUpsellingMessage is not provided', () => {
-    const result = plugin({ insightsUpsellingMessage: null });
+    const result = plugin({ insightsUpsellingMessage: undefined });
 
     expect(result.button.label).toEqual('Investigate');
   });

diff --git a/...gins/security_solution/public/common/components/markdown_editor/plugins/insight/index.tsx b/...gins/security_solution/public/common/components/markdown_editor/plugins/insight/index.tsx
@@ -541,11 +541,7 @@ const exampleInsight = `${insightPrefix}{
   ]
 }}`;
 
-export const plugin = ({
-  insightsUpsellingMessage,
-}: {
-  insightsUpsellingMessage: string | null;
-}) => {
+export const plugin = ({ insightsUpsellingMessage }: { insightsUpsellingMessage?: string }) => {
   return {
     name: 'insights',
     button: {

diff --git a/...ins/security_solution/public/common/components/markdown_editor/plugins/osquery/plugin.tsx b/...ins/security_solution/public/common/components/markdown_editor/plugins/osquery/plugin.tsx
@@ -161,7 +161,7 @@ const OsqueryEditor = React.memo(OsqueryEditorComponent);
 export const plugin = ({
   interactionsUpsellingMessage,
 }: {
-  interactionsUpsellingMessage: string | null;
+  interactionsUpsellingMessage?: string;
 }) => {
   return {
     name: 'osquery',

diff --git a/...ns/security_solution/public/common/components/markdown_editor/plugins/timeline/plugin.tsx b/...ns/security_solution/public/common/components/markdown_editor/plugins/timeline/plugin.tsx
@@ -78,7 +78,7 @@ const TimelineEditor = memo(TimelineEditorComponent);
 export const plugin = ({
   interactionsUpsellingMessage,
 }: {
-  interactionsUpsellingMessage: string | null;
+  interactionsUpsellingMessage?: string;
 }): EuiMarkdownEditorUiPlugin => {
   return {
     name: ID,

diff --git a/x-pack/plugins/security_solution/public/common/hooks/use_upselling.test.tsx b/x-pack/plugins/security_solution/public/common/hooks/use_upselling.test.tsx
@@ -71,7 +71,7 @@ describe('use_upselling', () => {
     expect(result.all.length).toBe(1); // assert that it should not cause unnecessary re-renders
   });
 
-  test('useUpsellingMessage returns null when upsellingMessageId not found', () => {
+  test('useUpsellingMessage returns undefined when upsellingMessageId not found', () => {
     const emptyMessages = {};
     mockUpselling.setPages(emptyMessages);
 
@@ -81,6 +81,6 @@ describe('use_upselling', () => {
         wrapper: RenderWrapper,
       }
     );
-    expect(result.current).toBe(null);
+    expect(result.current).toBeUndefined();
   });
 });
diff --git a/x-pack/plugins/security_solution/public/common/hooks/use_upselling.ts b/x-pack/plugins/security_solution/public/common/hooks/use_upselling.ts
@@ -22,11 +22,11 @@ export const useUpsellingComponent = (id: UpsellingSectionId): React.ComponentTy
   return useMemo(() => upsellingSections?.get(id) ?? null, [id, upsellingSections]);
 };
 
-export const useUpsellingMessage = (id: UpsellingMessageId): string | null => {
+export const useUpsellingMessage = (id: UpsellingMessageId): string | undefined => {
   const upselling = useUpsellingService();
   const upsellingMessages = useObservable(upselling.messages$, upselling.getMessagesValue());
 
-  return useMemo(() => upsellingMessages?.get(id) ?? null, [id, upsellingMessages]);
+  return useMemo(() => upsellingMessages?.get(id), [id, upsellingMessages]);
 };
 
 export const useUpsellingPage = (pageName: SecurityPageName): React.ComponentType | null => {

diff --git a/x-pack/plugins/security_solution/public/common/test/eui/combobox.ts b/x-pack/plugins/security_solution/public/common/test/eui/combobox.ts
@@ -0,0 +1,79 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { act, fireEvent, waitFor } from '@testing-library/react';
+
+export function showEuiComboBoxOptions(comboBoxToggleButton: HTMLElement): Promise<void> {
+  fireEvent.click(comboBoxToggleButton);
+
+  return waitFor(() => {
+    const listWithOptionsElement = document.querySelector('[role="listbox"]');
+    const emptyListElement = document.querySelector('.euiComboBoxOptionsList__empty');
+
+    expect(listWithOptionsElement || emptyListElement).toBeInTheDocument();
+  });
+}
+
+type SelectEuiComboBoxOptionParameters =
+  | {
+      comboBoxToggleButton: HTMLElement;
+      optionIndex: number;
+      optionText?: undefined;
+    }
+  | {
+      comboBoxToggleButton: HTMLElement;
+      optionText: string;
+      optionIndex?: undefined;
+    };
+
+export function selectEuiComboBoxOption({
+  comboBoxToggleButton,
+  optionIndex,
+  optionText,
+}: SelectEuiComboBoxOptionParameters): Promise<void> {
+  return act(async () => {
+    await showEuiComboBoxOptions(comboBoxToggleButton);
+
+    const options = Array.from(
+      document.querySelectorAll('[data-test-subj*="comboBoxOptionsList"] [role="option"]')
+    );
+
+    if (typeof optionText === 'string') {
+      const optionToSelect = options.find((option) => option.textContent === optionText);
+
+      if (optionToSelect) {
+        fireEvent.click(optionToSelect);
+      } else {
+        throw new Error(
+          `Could not find option with text "${optionText}". Available options: ${options
+            .map((option) => option.textContent)
+            .join(', ')}`
+        );
+      }
+    } else {
+      fireEvent.click(options[optionIndex]);
+    }
+  });
+}
+
+export function selectFirstEuiComboBoxOption({
+  comboBoxToggleButton,
+}: {
+  comboBoxToggleButton: HTMLElement;
+}): Promise<void> {
+  return selectEuiComboBoxOption({ comboBoxToggleButton, optionIndex: 0 });
+}
+
+export function clearEuiComboBoxSelection({
+  clearButton,
+}: {
+  clearButton: HTMLElement;
+}): Promise<void> {
+  return act(async () => {
+    fireEvent.click(clearButton);
+  });
+}
diff --git a/...ine/rule_creation/components/alert_suppression_edit/components/alert_suppression_edit.tsx b/...ine/rule_creation/components/alert_suppression_edit/components/alert_suppression_edit.tsx
@@ -0,0 +1,64 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { memo } from 'react';
+import { EuiPanel, EuiText, EuiToolTip } from '@elastic/eui';
+import type { DataViewFieldBase } from '@kbn/es-query';
+import { useFormData } from '../../../../../shared_imports';
+import { MissingFieldsStrategySelector } from './missing_fields_strategy_selector';
+import { SuppressionDurationSelector } from './suppression_duration_selector';
+import { SuppressionFieldsSelector } from './suppression_fields_selector';
+import { ALERT_SUPPRESSION_FIELDS_FIELD_NAME } from '../constants/fields';
+
+interface AlertSuppressionEditProps {
+  suppressibleFields: DataViewFieldBase[];
+  labelAppend?: React.ReactNode;
+  disabled?: boolean;
+  disabledText?: string;
+  warningText?: string;
+}
+
+export const AlertSuppressionEdit = memo(function AlertSuppressionEdit({
+  suppressibleFields,
+  labelAppend,
+  disabled,
+  disabledText,
+  warningText,
+}: AlertSuppressionEditProps): JSX.Element {
+  const [{ [ALERT_SUPPRESSION_FIELDS_FIELD_NAME]: suppressionFields }] = useFormData<{
+    [ALERT_SUPPRESSION_FIELDS_FIELD_NAME]: string[];
+  }>({
+    watch: ALERT_SUPPRESSION_FIELDS_FIELD_NAME,
+  });
+  const hasSelectedFields = suppressionFields?.length > 0;
+  const content = (
+    <>
+      <SuppressionFieldsSelector
+        suppressibleFields={suppressibleFields}
+        labelAppend={labelAppend}
+        disabled={disabled}
+      />
+      {warningText && (
+        <EuiText size="xs" color="warning" data-test-subj="alertSuppressionWarning">
+          {warningText}
+        </EuiText>
+      )}
+      <EuiPanel paddingSize="m" hasShadow={false}>
+        <SuppressionDurationSelector disabled={disabled || !hasSelectedFields} />
+        <MissingFieldsStrategySelector disabled={disabled || !hasSelectedFields} />
+      </EuiPanel>
+    </>
+  );
+
+  return disabled && disabledText ? (
+    <EuiToolTip position="right" content={disabledText}>
+      {content}
+    </EuiToolTip>
+  ) : (
+    content
+  );
+});