github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Security solution] [Endpoint] Fixes for operator "match_any" in event filters card (#117136)

Browse source 
* Fix translations and allow negative operators
* UI fixes
* Remove useCallbacks and update test
This commit is contained in:
David Sánchez 2021-11-02 18:53:31 +01:00 • committed by GitHub
parent c91e44ca8e
commit 03cebac547
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 97 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

16
x-pack/plugins/security_solution/public/management/components/artifact_entry_card/artifact_entry_card.tsx
View file

@ -80,16 +80,20 @@ export const ArtifactEntryCard = memo<ArtifactEntryCardProps>(
data-test-subj={getTestId('subHeader')}
/>
<EuiSpacer size="l" />
{!hideDescription && (
<DescriptionField data-test-subj={getTestId('description')}>
{artifact.description}
</DescriptionField>
<>
<EuiSpacer size="s" />
<DescriptionField data-test-subj={getTestId('description')}>
{artifact.description}
</DescriptionField>
</>
)}
{!hideComments ? (
<CardComments comments={artifact.comments} data-test-subj={getTestId('comments')} />
<>
<EuiSpacer size="s" />
<CardComments comments={artifact.comments} data-test-subj={getTestId('comments')} />
</>
) : null}
</CardSectionPanel>

56
x-pack/plugins/security_solution/public/management/components/artifact_entry_card/components/criteria_conditions.tsx
View file

@ -6,7 +6,14 @@
*/
import React, { memo, useCallback, useMemo } from 'react';
import { CommonProps, EuiExpression, EuiToken, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import {
CommonProps,
EuiExpression,
EuiToken,
EuiFlexGroup,
EuiFlexItem,
EuiBadge,
} from '@elastic/eui';
import styled from 'styled-components';
import { ListOperatorTypeEnum } from '@kbn/securitysolution-io-ts-list-types';
import {
@ -21,6 +28,8 @@ import {
CONDITION_OPERATOR_TYPE_MATCH_ANY,
CONDITION_OPERATOR_TYPE_EXISTS,
CONDITION_OPERATOR_TYPE_LIST,
CONDITION_OPERATOR_TYPE_NOT_MATCH_ANY,
CONDITION_OPERATOR_TYPE_NOT_MATCH,
} from './translations';
import { ArtifactInfo, ArtifactInfoEntry } from '../types';
import { useTestIdGenerator } from '../../hooks/use_test_id_generator';
@ -32,7 +41,7 @@ const OS_LABELS = Object.freeze({
windows: OS_WINDOWS,
});
const OPERATOR_TYPE_LABELS = Object.freeze({
const OPERATOR_TYPE_LABELS_INCLUDED = Object.freeze({
[ListOperatorTypeEnum.NESTED]: CONDITION_OPERATOR_TYPE_NESTED,
[ListOperatorTypeEnum.MATCH_ANY]: CONDITION_OPERATOR_TYPE_MATCH_ANY,
[ListOperatorTypeEnum.MATCH]: CONDITION_OPERATOR_TYPE_MATCH,
@ -41,8 +50,13 @@ const OPERATOR_TYPE_LABELS = Object.freeze({
[ListOperatorTypeEnum.LIST]: CONDITION_OPERATOR_TYPE_LIST,
});
const OPERATOR_TYPE_LABELS_EXCLUDED = Object.freeze({
[ListOperatorTypeEnum.MATCH_ANY]: CONDITION_OPERATOR_TYPE_NOT_MATCH_ANY,
[ListOperatorTypeEnum.MATCH]: CONDITION_OPERATOR_TYPE_NOT_MATCH,
});
const EuiFlexGroupNested = styled(EuiFlexGroup)`
margin-left: ${({ theme }) => theme.eui.spacerSizes.l};
margin-left: ${({ theme }) => theme.eui.spacerSizes.xl};
`;
const EuiFlexItemNested = styled(EuiFlexItem)`
@ -67,11 +81,30 @@ export const CriteriaConditions = memo<CriteriaConditionsProps>(
.join(', ');
}, [os]);
const getEntryValue = (type: string, value: string | string[]) => {
if (type === 'match_any' && Array.isArray(value)) {
return value.map((currentValue) => <EuiBadge color="hollow">{currentValue}</EuiBadge>);
}
return value;
};
const getEntryOperator = (type: string, operator: string) => {
if (type === 'nested') return;
return operator === 'included'
? OPERATOR_TYPE_LABELS_INCLUDED[type as keyof typeof OPERATOR_TYPE_LABELS_INCLUDED] ?? type
: OPERATOR_TYPE_LABELS_EXCLUDED[type as keyof typeof OPERATOR_TYPE_LABELS_EXCLUDED] ?? type;
};
const getNestedEntriesContent = useCallback(
(type: string, nestedEntries: ArtifactInfoEntry[]) => {
if (type === 'nested' && nestedEntries.length) {
return nestedEntries.map(
({ field: nestedField, type: nestedType, value: nestedValue }) => {
({
field: nestedField,
type: nestedType,
value: nestedValue,
operator: nestedOperator,
}) => {
return (
<EuiFlexGroupNested
data-test-subj={getTestId('nestedCondition')}
@ -89,11 +122,8 @@ export const CriteriaConditions = memo<CriteriaConditionsProps>(
</EuiFlexItemNested>
<EuiFlexItemNested grow={false}>
<EuiExpression
description={
OPERATOR_TYPE_LABELS[nestedType as keyof typeof OPERATOR_TYPE_LABELS] ??
nestedType
}
value={nestedValue}
description={getEntryOperator(nestedType, nestedOperator)}
value={getEntryValue(nestedType, nestedValue)}
/>
</EuiFlexItemNested>
</EuiFlexGroupNested>
@ -113,7 +143,7 @@ export const CriteriaConditions = memo<CriteriaConditionsProps>(
<EuiExpression description={CONDITION_OPERATOR_TYPE_MATCH} value={osLabel} />
</strong>
</div>
{entries.map(({ field, type, value, entries: nestedEntries = [] }) => {
{entries.map(({ field, type, value, operator, entries: nestedEntries = [] }) => {
return (
<div data-test-subj={getTestId('condition')} key={field + type + value}>
<EuiExpression
@ -122,10 +152,8 @@ export const CriteriaConditions = memo<CriteriaConditionsProps>(
color="subdued"
/>
<EuiExpression
description={
OPERATOR_TYPE_LABELS[type as keyof typeof OPERATOR_TYPE_LABELS] ?? type
}
value={value}
description={getEntryOperator(type, operator)}
value={getEntryValue(type, value)}
/>
{getNestedEntriesContent(type, nestedEntries)}
</div>

16
x-pack/plugins/security_solution/public/management/components/artifact_entry_card/components/translations.ts
View file

@ -54,6 +54,13 @@ export const CONDITION_OPERATOR_TYPE_MATCH = i18n.translate(
}
);
export const CONDITION_OPERATOR_TYPE_NOT_MATCH = i18n.translate(
'xpack.securitySolution.artifactCard.conditions.matchOperator.not',
{
defaultMessage: 'IS NOT',
}
);
export const CONDITION_OPERATOR_TYPE_WILDCARD = i18n.translate(
'xpack.securitySolution.artifactCard.conditions.wildcardOperator',
{
@ -71,7 +78,14 @@ export const CONDITION_OPERATOR_TYPE_NESTED = i18n.translate(
export const CONDITION_OPERATOR_TYPE_MATCH_ANY = i18n.translate(
'xpack.securitySolution.artifactCard.conditions.matchAnyOperator',
{
defaultMessage: 'is any',
defaultMessage: 'is one of',
}
);
export const CONDITION_OPERATOR_TYPE_NOT_MATCH_ANY = i18n.translate(
'xpack.securitySolution.artifactCard.conditions.matchAnyOperator.not',
{
defaultMessage: 'is not one of',
}
);

60
x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_grid/__snapshots__/index.test.tsx.snap generated
View file

@ -743,7 +743,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
class="euiSpacer euiSpacer--s"
/>
<div
class="euiText euiText--medium eui-textBreakWord"
@ -1123,7 +1123,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
class="euiSpacer euiSpacer--s"
/>
<div
class="euiText euiText--medium eui-textBreakWord"
@ -1503,7 +1503,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
class="euiSpacer euiSpacer--s"
/>
<div
class="euiText euiText--medium eui-textBreakWord"
@ -1883,7 +1883,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
class="euiSpacer euiSpacer--s"
/>
<div
class="euiText euiText--medium eui-textBreakWord"
@ -2263,7 +2263,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
class="euiSpacer euiSpacer--s"
/>
<div
class="euiText euiText--medium eui-textBreakWord"
@ -2643,7 +2643,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
class="euiSpacer euiSpacer--s"
/>
<div
class="euiText euiText--medium eui-textBreakWord"
@ -3023,7 +3023,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
class="euiSpacer euiSpacer--s"
/>
<div
class="euiText euiText--medium eui-textBreakWord"
@ -3403,7 +3403,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
class="euiSpacer euiSpacer--s"
/>
<div
class="euiText euiText--medium eui-textBreakWord"
@ -3783,7 +3783,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
class="euiSpacer euiSpacer--s"
/>
<div
class="euiText euiText--medium eui-textBreakWord"
@ -4163,7 +4163,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
class="euiSpacer euiSpacer--s"
/>
<div
class="euiText euiText--medium eui-textBreakWord"
@ -4850,7 +4850,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
class="euiSpacer euiSpacer--s"
/>
<div
class="euiText euiText--medium eui-textBreakWord"
@ -5230,7 +5230,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
class="euiSpacer euiSpacer--s"
/>
<div
class="euiText euiText--medium eui-textBreakWord"
@ -5610,7 +5610,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
class="euiSpacer euiSpacer--s"
/>
<div
class="euiText euiText--medium eui-textBreakWord"
@ -5990,7 +5990,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
class="euiSpacer euiSpacer--s"
/>
<div
class="euiText euiText--medium eui-textBreakWord"
@ -6370,7 +6370,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
class="euiSpacer euiSpacer--s"
/>
<div
class="euiText euiText--medium eui-textBreakWord"
@ -6750,7 +6750,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
class="euiSpacer euiSpacer--s"
/>
<div
class="euiText euiText--medium eui-textBreakWord"
@ -7130,7 +7130,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
class="euiSpacer euiSpacer--s"
/>
<div
class="euiText euiText--medium eui-textBreakWord"
@ -7510,7 +7510,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
class="euiSpacer euiSpacer--s"
/>
<div
class="euiText euiText--medium eui-textBreakWord"
@ -7890,7 +7890,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
class="euiSpacer euiSpacer--s"
/>
<div
class="euiText euiText--medium eui-textBreakWord"
@ -8270,7 +8270,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
class="euiSpacer euiSpacer--s"
/>
<div
class="euiText euiText--medium eui-textBreakWord"
@ -8914,7 +8914,7 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
class="euiSpacer euiSpacer--s"
/>
<div
class="euiText euiText--medium eui-textBreakWord"
@ -9294,7 +9294,7 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
class="euiSpacer euiSpacer--s"
/>
<div
class="euiText euiText--medium eui-textBreakWord"
@ -9674,7 +9674,7 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
class="euiSpacer euiSpacer--s"
/>
<div
class="euiText euiText--medium eui-textBreakWord"
@ -10054,7 +10054,7 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
class="euiSpacer euiSpacer--s"
/>
<div
class="euiText euiText--medium eui-textBreakWord"
@ -10434,7 +10434,7 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
class="euiSpacer euiSpacer--s"
/>
<div
class="euiText euiText--medium eui-textBreakWord"
@ -10814,7 +10814,7 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
class="euiSpacer euiSpacer--s"
/>
<div
class="euiText euiText--medium eui-textBreakWord"
@ -11194,7 +11194,7 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
class="euiSpacer euiSpacer--s"
/>
<div
class="euiText euiText--medium eui-textBreakWord"
@ -11574,7 +11574,7 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
class="euiSpacer euiSpacer--s"
/>
<div
class="euiText euiText--medium eui-textBreakWord"
@ -11954,7 +11954,7 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
class="euiSpacer euiSpacer--s"
/>
<div
class="euiText euiText--medium eui-textBreakWord"
@ -12334,7 +12334,7 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
</div>
</div>
<div
class="euiSpacer euiSpacer--l"
class="euiSpacer euiSpacer--s"
/>
<div
class="euiText euiText--medium eui-textBreakWord"