[Security Solution] Adds UI support for filtering by rule source cust…

…omization (elastic#197340) ## Summary Addresses elastic#180169 > [!NOTE] > Feature is behind the `prebuiltRulesCustomizationEnabled` feature flag. Adds a filter for prebuilt rules in the Update rules table for "Modified" and "Unmodified" rules. Also adds a badge column in the Rules table to display whether a prebuilt rule has been customized or not. Also switches the "Customized Elastic rule" badge on the rule details page to align with the updated language of "_Modified_ Elastic rule" ### Screenshots #### Modified badge in Rules table ![Screenshot 2024-11-05 at 3 05 56 PM](https://github.com/user-attachments/assets/1f3313bb-7171-42b5-99b0-b9fb296fefd3) #### Modification filter dropdown on Rule update page <img width="1479" alt="Screenshot 2024-10-24 at 11 46 26 AM" src="https://github.com/user-attachments/assets/82715abe-6ff6-4ba6-97b3-6fab9f42069e"> #### New "customized rule" badge language on Rule details page ![Screenshot 2024-11-05 at 3 14 58 PM](https://github.com/user-attachments/assets/4e22ba3a-e13f-4cf1-88c0-6b5b0b2c258a) ### Checklist Delete any items that are not applicable to this PR. - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels) - [ ] This will appear in the **Release Notes** and follow the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: Elastic Machine <[email protected]>
mgadewoll · Nov 7, 2024 · bb96139 · bb96139
1 parent a9a069c
commit bb96139
Show file tree

Hide file tree

Showing 19 changed files with 470 additions and 38 deletions.
diff --git a/...tection_engine/rule_management/components/rule_details/customized_prebuilt_rule_badge.tsx b/...tection_engine/rule_management/components/rule_details/customized_prebuilt_rule_badge.tsx
@@ -10,7 +10,7 @@ import { EuiBadge } from '@elastic/eui';
 import * as i18n from './translations';
 import { isCustomizedPrebuiltRule } from '../../../../../common/api/detection_engine';
 import type { RuleResponse } from '../../../../../common/api/detection_engine';
-import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
+import { useIsPrebuiltRulesCustomizationEnabled } from '../../hooks/use_is_prebuilt_rules_customization_enabled';
 
 interface CustomizedPrebuiltRuleBadgeProps {
   rule: RuleResponse | null;
@@ -19,9 +19,7 @@ interface CustomizedPrebuiltRuleBadgeProps {
 export const CustomizedPrebuiltRuleBadge: React.FC<CustomizedPrebuiltRuleBadgeProps> = ({
   rule,
 }) => {
-  const isPrebuiltRulesCustomizationEnabled = useIsExperimentalFeatureEnabled(
-    'prebuiltRulesCustomizationEnabled'
-  );
+  const isPrebuiltRulesCustomizationEnabled = useIsPrebuiltRulesCustomizationEnabled();
 
   if (!isPrebuiltRulesCustomizationEnabled) {
     return null;
@@ -31,5 +29,5 @@ export const CustomizedPrebuiltRuleBadge: React.FC<CustomizedPrebuiltRuleBadgePr
     return null;
   }
 
-  return <EuiBadge color="hollow">{i18n.CUSTOMIZED_PREBUILT_RULE_LABEL}</EuiBadge>;
+  return <EuiBadge color="hollow">{i18n.MODIFIED_PREBUILT_RULE_LABEL}</EuiBadge>;
 };
diff --git a/..._solution/public/detection_engine/rule_management/components/rule_details/translations.ts b/..._solution/public/detection_engine/rule_management/components/rule_details/translations.ts
@@ -350,10 +350,10 @@ export const MAX_SIGNALS_FIELD_LABEL = i18n.translate(
   }
 );
 
-export const CUSTOMIZED_PREBUILT_RULE_LABEL = i18n.translate(
+export const MODIFIED_PREBUILT_RULE_LABEL = i18n.translate(
   'xpack.securitySolution.detectionEngine.ruleDetails.customizedPrebuiltRuleLabel',
   {
-    defaultMessage: 'Customized Elastic rule',
+    defaultMessage: 'Modified Elastic rule',
   }
 );
 

diff --git a/...rity_solution/public/detection_engine/rule_management/hooks/use_default_index_pattern.tsx b/...rity_solution/public/detection_engine/rule_management/hooks/use_default_index_pattern.tsx
@@ -7,17 +7,15 @@
 
 import { useKibana } from '../../../common/lib/kibana/kibana_react';
 import { DEFAULT_INDEX_KEY, DEFAULT_INDEX_PATTERN } from '../../../../common/constants';
-import { useIsExperimentalFeatureEnabled } from '../../../common/hooks/use_experimental_features';
+import { useIsPrebuiltRulesCustomizationEnabled } from './use_is_prebuilt_rules_customization_enabled';
 
 /**
  * Gets the default index pattern for cases when rule has neither index patterns or data view.
  * First checks the config value. If it's not present falls back to the hardcoded default value.
  */
 export function useDefaultIndexPattern(): string[] {
   const { services } = useKibana();
-  const isPrebuiltRulesCustomizationEnabled = useIsExperimentalFeatureEnabled(
-    'prebuiltRulesCustomizationEnabled'
-  );
+  const isPrebuiltRulesCustomizationEnabled = useIsPrebuiltRulesCustomizationEnabled();
 
   return isPrebuiltRulesCustomizationEnabled
     ? services.settings.client.get(DEFAULT_INDEX_KEY, DEFAULT_INDEX_PATTERN)

diff --git a/...ic/detection_engine/rule_management/hooks/use_is_prebuilt_rules_customization_enabled.tsx b/...ic/detection_engine/rule_management/hooks/use_is_prebuilt_rules_customization_enabled.tsx
@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useIsExperimentalFeatureEnabled } from '../../../common/hooks/use_experimental_features';
+
+export const useIsPrebuiltRulesCustomizationEnabled = () => {
+  return useIsExperimentalFeatureEnabled('prebuiltRulesCustomizationEnabled');
+};
diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/logic/types.ts b/x-pack/plugins/security_solution/public/detection_engine/rule_management/logic/types.ts
@@ -99,6 +99,7 @@ export interface FilterOptions {
   excludeRuleTypes?: Type[];
   enabled?: boolean; // undefined is to display all the rules
   ruleExecutionStatus?: RuleExecutionStatus; // undefined means "all"
+  ruleSource?: RuleCustomizationEnum[]; // undefined is to display all the rules
 }
 
 export interface FetchRulesResponse {
@@ -202,3 +203,8 @@ export interface FindRulesReferencedByExceptionsProps {
   lists: FindRulesReferencedByExceptionsListProp[];
   signal?: AbortSignal;
 }
+
+export enum RuleCustomizationEnum {
+  customized = 'CUSTOMIZED',
+  not_customized = 'NOT_CUSTOMIZED',
+}
diff --git a/...ponents/rules_table/upgrade_prebuilt_rules_table/upgrade_prebuilt_rules_table_context.tsx b/...ponents/rules_table/upgrade_prebuilt_rules_table/upgrade_prebuilt_rules_table_context.tsx
@@ -8,8 +8,8 @@
 import type { Dispatch, SetStateAction } from 'react';
 import React, { createContext, useCallback, useContext, useMemo, useState } from 'react';
 import { EuiButton, EuiToolTip } from '@elastic/eui';
+import { useIsPrebuiltRulesCustomizationEnabled } from '../../../../rule_management/hooks/use_is_prebuilt_rules_customization_enabled';
 import type { RulesUpgradeState } from '../../../../rule_management/model/prebuilt_rule_upgrade';
-import { useIsExperimentalFeatureEnabled } from '../../../../../common/hooks/use_experimental_features';
 import { RuleUpgradeConflictsResolverTab } from '../../../../rule_management/components/rule_details/three_way_diff/rule_upgrade_conflicts_resolver_tab';
 import { PerFieldRuleDiffTab } from '../../../../rule_management/components/rule_details/per_field_rule_diff_tab';
 import { useIsUpgradingSecurityPackages } from '../../../../rule_management/logic/use_upgrade_security_packages';
@@ -111,13 +111,12 @@ interface UpgradePrebuiltRulesTableContextProviderProps {
 export const UpgradePrebuiltRulesTableContextProvider = ({
   children,
 }: UpgradePrebuiltRulesTableContextProviderProps) => {
-  const isPrebuiltRulesCustomizationEnabled = useIsExperimentalFeatureEnabled(
-    'prebuiltRulesCustomizationEnabled'
-  );
+  const isPrebuiltRulesCustomizationEnabled = useIsPrebuiltRulesCustomizationEnabled();
   const [loadingRules, setLoadingRules] = useState<RuleSignatureId[]>([]);
   const [filterOptions, setFilterOptions] = useState<UpgradePrebuiltRulesTableFilterOptions>({
     filter: '',
     tags: [],
+    ruleSource: [],
   });
 
   const isUpgradingSecurityPackages = useIsUpgradingSecurityPackages();

diff --git a/...ponents/rules_table/upgrade_prebuilt_rules_table/upgrade_prebuilt_rules_table_filters.tsx b/...ponents/rules_table/upgrade_prebuilt_rules_table/upgrade_prebuilt_rules_table_filters.tsx
@@ -9,10 +9,13 @@ import { EuiFilterGroup, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { isEqual } from 'lodash/fp';
 import React, { useCallback } from 'react';
 import styled from 'styled-components';
+import { useIsPrebuiltRulesCustomizationEnabled } from '../../../../rule_management/hooks/use_is_prebuilt_rules_customization_enabled';
+import type { RuleCustomizationEnum } from '../../../../rule_management/logic';
 import * as i18n from './translations';
 import { TagsFilterPopover } from '../rules_table_filters/tags_filter_popover';
 import { RuleSearchField } from '../rules_table_filters/rule_search_field';
 import { useUpgradePrebuiltRulesTableContext } from './upgrade_prebuilt_rules_table_context';
+import { RuleCustomizationFilterPopover } from './upgrade_rule_customization_filter_popover';
 
 const FilterWrapper = styled(EuiFlexGroup)`
   margin-bottom: ${({ theme }) => theme.eui.euiSizeM};
@@ -28,7 +31,9 @@ const UpgradePrebuiltRulesTableFiltersComponent = () => {
     actions: { setFilterOptions },
   } = useUpgradePrebuiltRulesTableContext();
 
-  const { tags: selectedTags } = filterOptions;
+  const isPrebuiltRulesCustomizationEnabled = useIsPrebuiltRulesCustomizationEnabled();
+
+  const { tags: selectedTags, ruleSource: selectedRuleSource = [] } = filterOptions;
 
   const handleOnSearch = useCallback(
     (filterString: string) => {
@@ -52,22 +57,45 @@ const UpgradePrebuiltRulesTableFiltersComponent = () => {
     [selectedTags, setFilterOptions]
   );
 
+  const handleSelectedRuleSource = useCallback(
+    (newRuleSource: RuleCustomizationEnum[]) => {
+      if (!isEqual(newRuleSource, selectedRuleSource)) {
+        setFilterOptions((filters) => ({
+          ...filters,
+          ruleSource: newRuleSource,
+        }));
+      }
+    },
+    [selectedRuleSource, setFilterOptions]
+  );
+
   return (
-    <FilterWrapper gutterSize="m" justifyContent="flexEnd" wrap>
+    <FilterWrapper gutterSize="s" justifyContent="flexEnd" wrap>
       <RuleSearchField
         initialValue={filterOptions.filter}
         onSearch={handleOnSearch}
         placeholder={i18n.SEARCH_PLACEHOLDER}
       />
       <EuiFlexItem grow={false}>
-        <EuiFilterGroup>
-          <TagsFilterPopover
-            onSelectedTagsChanged={handleSelectedTags}
-            selectedTags={selectedTags}
-            tags={tags}
-            data-test-subj="upgradeRulesTagPopover"
-          />
-        </EuiFilterGroup>
+        <EuiFlexGroup gutterSize="s">
+          {isPrebuiltRulesCustomizationEnabled && (
+            <EuiFilterGroup>
+              <RuleCustomizationFilterPopover
+                onSelectedRuleSourceChanged={handleSelectedRuleSource}
+                selectedRuleSource={selectedRuleSource}
+                data-test-subj="upgradeRulesRuleCustomizationPopover"
+              />
+            </EuiFilterGroup>
+          )}
+          <EuiFilterGroup>
+            <TagsFilterPopover
+              onSelectedTagsChanged={handleSelectedTags}
+              selectedTags={selectedTags}
+              tags={tags}
+              data-test-subj="upgradeRulesTagPopover"
+            />
+          </EuiFilterGroup>
+        </EuiFlexGroup>
       </EuiFlexItem>
     </FilterWrapper>
   );

diff --git a/...ts/rules_table/upgrade_prebuilt_rules_table/upgrade_rule_customization_filter_popover.tsx b/...ts/rules_table/upgrade_prebuilt_rules_table/upgrade_rule_customization_filter_popover.tsx
@@ -0,0 +1,92 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useState, useMemo } from 'react';
+import type { EuiSelectableOption } from '@elastic/eui';
+import { EuiFilterButton, EuiPopover, EuiSelectable } from '@elastic/eui';
+import { RuleCustomizationEnum } from '../../../../rule_management/logic';
+import * as i18n from '../../../../../detections/pages/detection_engine/rules/translations';
+import { toggleSelectedGroup } from '../../../../../common/components/ml_popover/jobs_table/filters/toggle_selected_group';
+
+interface RuleCustomizationFilterPopoverProps {
+  selectedRuleSource: RuleCustomizationEnum[];
+  onSelectedRuleSourceChanged: (newRuleSource: RuleCustomizationEnum[]) => void;
+}
+
+const RULE_CUSTOMIZATION_POPOVER_WIDTH = 200;
+
+const RuleCustomizationFilterPopoverComponent = ({
+  selectedRuleSource,
+  onSelectedRuleSourceChanged,
+}: RuleCustomizationFilterPopoverProps) => {
+  const [isRuleCustomizationPopoverOpen, setIsRuleCustomizationPopoverOpen] = useState(false);
+
+  const selectableOptions: EuiSelectableOption[] = useMemo(
+    () => [
+      {
+        label: i18n.MODIFIED_LABEL,
+        key: RuleCustomizationEnum.customized,
+        checked: selectedRuleSource.includes(RuleCustomizationEnum.customized) ? 'on' : undefined,
+      },
+      {
+        label: i18n.UNMODIFIED_LABEL,
+        key: RuleCustomizationEnum.not_customized,
+        checked: selectedRuleSource.includes(RuleCustomizationEnum.not_customized)
+          ? 'on'
+          : undefined,
+      },
+    ],
+    [selectedRuleSource]
+  );
+
+  const handleSelectableOptionsChange = (
+    newOptions: EuiSelectableOption[],
+    _: unknown,
+    changedOption: EuiSelectableOption
+  ) => {
+    toggleSelectedGroup(
+      changedOption.key ?? '',
+      selectedRuleSource,
+      onSelectedRuleSourceChanged as (args: string[]) => void
+    );
+  };
+
+  const triggerButton = (
+    <EuiFilterButton
+      grow
+      iconType="arrowDown"
+      onClick={() => setIsRuleCustomizationPopoverOpen(!isRuleCustomizationPopoverOpen)}
+      numFilters={selectableOptions.length}
+      isSelected={isRuleCustomizationPopoverOpen}
+      hasActiveFilters={selectedRuleSource.length > 0}
+      numActiveFilters={selectedRuleSource.length}
+      data-test-subj="rule-customization-filter-popover-button"
+    >
+      {i18n.RULE_SOURCE}
+    </EuiFilterButton>
+  );
+
+  return (
+    <EuiPopover
+      ownFocus
+      button={triggerButton}
+      isOpen={isRuleCustomizationPopoverOpen}
+      closePopover={() => setIsRuleCustomizationPopoverOpen(!isRuleCustomizationPopoverOpen)}
+      panelPaddingSize="none"
+      repositionOnScroll
+      panelProps={{
+        'data-test-subj': 'rule-customization-filter-popover',
+      }}
+    >
+      <EuiSelectable options={selectableOptions} onChange={handleSelectableOptionsChange}>
+        {(list) => <div style={{ width: RULE_CUSTOMIZATION_POPOVER_WIDTH }}>{list}</div>}
+      </EuiSelectable>
+    </EuiPopover>
+  );
+};
+
+export const RuleCustomizationFilterPopover = React.memo(RuleCustomizationFilterPopoverComponent);
diff --git a/...mponents/rules_table/upgrade_prebuilt_rules_table/use_filter_prebuilt_rules_to_upgrade.ts b/...mponents/rules_table/upgrade_prebuilt_rules_table/use_filter_prebuilt_rules_to_upgrade.ts
@@ -7,9 +7,12 @@
 
 import { useMemo } from 'react';
 import type { RuleUpgradeInfoForReview } from '../../../../../../common/api/detection_engine/prebuilt_rules';
-import type { FilterOptions } from '../../../../rule_management/logic/types';
+import { RuleCustomizationEnum, type FilterOptions } from '../../../../rule_management/logic/types';
 
-export type UpgradePrebuiltRulesTableFilterOptions = Pick<FilterOptions, 'filter' | 'tags'>;
+export type UpgradePrebuiltRulesTableFilterOptions = Pick<
+  FilterOptions,
+  'filter' | 'tags' | 'ruleSource'
+>;
 
 export const useFilterPrebuiltRulesToUpgrade = ({
   rules,
@@ -19,7 +22,7 @@ export const useFilterPrebuiltRulesToUpgrade = ({
   filterOptions: UpgradePrebuiltRulesTableFilterOptions;
 }) => {
   const filteredRules = useMemo(() => {
-    const { filter, tags } = filterOptions;
+    const { filter, tags, ruleSource } = filterOptions;
     return rules.filter((ruleInfo) => {
       if (filter && !ruleInfo.current_rule.name.toLowerCase().includes(filter.toLowerCase())) {
         return false;
@@ -29,6 +32,25 @@ export const useFilterPrebuiltRulesToUpgrade = ({
         return tags.every((tag) => ruleInfo.current_rule.tags.includes(tag));
       }
 
+      if (ruleSource && ruleSource.length > 0) {
+        if (
+          ruleSource.includes(RuleCustomizationEnum.customized) &&
+          ruleSource.includes(RuleCustomizationEnum.not_customized)
+        ) {
+          return true;
+        } else if (
+          ruleSource.includes(RuleCustomizationEnum.customized) &&
+          ruleInfo.current_rule.rule_source.type === 'external'
+        ) {
+          return ruleInfo.current_rule.rule_source.is_customized;
+        } else if (
+          ruleSource.includes(RuleCustomizationEnum.not_customized) &&
+          ruleInfo.current_rule.rule_source.type === 'external'
+        ) {
+          return ruleInfo.current_rule.rule_source.is_customized === false;
+        }
+      }
+
       return true;
     });
   }, [filterOptions, rules]);

diff --git a/...i/components/rules_table/upgrade_prebuilt_rules_table/use_prebuilt_rules_upgrade_state.ts b/...i/components/rules_table/upgrade_prebuilt_rules_table/use_prebuilt_rules_upgrade_state.ts
@@ -6,7 +6,7 @@
  */
 
 import { useCallback, useMemo, useState } from 'react';
-import { useIsExperimentalFeatureEnabled } from '../../../../../common/hooks/use_experimental_features';
+import { useIsPrebuiltRulesCustomizationEnabled } from '../../../../rule_management/hooks/use_is_prebuilt_rules_customization_enabled';
 import type {
   RulesUpgradeState,
   FieldsUpgradeState,
@@ -33,9 +33,7 @@ interface UseRulesUpgradeStateResult {
 export function usePrebuiltRulesUpgradeState(
   ruleUpgradeInfos: RuleUpgradeInfoForReview[]
 ): UseRulesUpgradeStateResult {
-  const isPrebuiltRulesCustomizationEnabled = useIsExperimentalFeatureEnabled(
-    'prebuiltRulesCustomizationEnabled'
-  );
+  const isPrebuiltRulesCustomizationEnabled = useIsPrebuiltRulesCustomizationEnabled();
   const [rulesResolvedConflicts, setRulesResolvedConflicts] = useState<RulesResolvedConflicts>({});
 
   const setRuleFieldResolvedValue = useCallback(