Skip to content

Commit

Permalink
[Security Solution] Adds UI support for filtering by rule source cust…
Browse files Browse the repository at this point in the history
…omization (#197340)

## Summary

Addresses #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]>
  • Loading branch information
dplumlee and elasticmachine authored Nov 6, 2024
1 parent fb71142 commit f740d95
Show file tree
Hide file tree
Showing 19 changed files with 470 additions and 38 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -19,9 +19,7 @@ interface CustomizedPrebuiltRuleBadgeProps {
export const CustomizedPrebuiltRuleBadge: React.FC<CustomizedPrebuiltRuleBadgeProps> = ({
rule,
}) => {
const isPrebuiltRulesCustomizationEnabled = useIsExperimentalFeatureEnabled(
'prebuiltRulesCustomizationEnabled'
);
const isPrebuiltRulesCustomizationEnabled = useIsPrebuiltRulesCustomizationEnabled();

if (!isPrebuiltRulesCustomizationEnabled) {
return null;
Expand All @@ -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>;
};
Original file line number Diff line number Diff line change
Expand Up @@ -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',
}
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
Original file line number Diff line number Diff line change
@@ -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');
};
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -202,3 +203,8 @@ export interface FindRulesReferencedByExceptionsProps {
lists: FindRulesReferencedByExceptionsListProp[];
signal?: AbortSignal;
}

export enum RuleCustomizationEnum {
customized = 'CUSTOMIZED',
not_customized = 'NOT_CUSTOMIZED',
}
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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};
Expand All @@ -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) => {
Expand All @@ -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>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -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);
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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;
Expand All @@ -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]);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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(
Expand Down
Loading

0 comments on commit f740d95

Please sign in to comment.