From 24ed91f5a3d9f14ad9b6952162d148faf241891b Mon Sep 17 00:00:00 2001 From: Yara Tercero Date: Tue, 2 Jun 2020 17:14:00 -0400 Subject: [PATCH 01/15] moved and_or_badge to common folder and added tests --- .../__examples__/index.stories.tsx | 39 +++++++ .../components/and_or_badge/index.test.tsx | 47 ++++++++ .../common/components/and_or_badge/index.tsx | 108 ++++++++++++++++++ .../components/and_or_badge/translations.ts | 15 +++ 4 files changed, 209 insertions(+) create mode 100644 x-pack/plugins/siem/public/common/components/and_or_badge/__examples__/index.stories.tsx create mode 100644 x-pack/plugins/siem/public/common/components/and_or_badge/index.test.tsx create mode 100644 x-pack/plugins/siem/public/common/components/and_or_badge/index.tsx create mode 100644 x-pack/plugins/siem/public/common/components/and_or_badge/translations.ts diff --git a/x-pack/plugins/siem/public/common/components/and_or_badge/__examples__/index.stories.tsx b/x-pack/plugins/siem/public/common/components/and_or_badge/__examples__/index.stories.tsx new file mode 100644 index 0000000000000..27ca464404445 --- /dev/null +++ b/x-pack/plugins/siem/public/common/components/and_or_badge/__examples__/index.stories.tsx @@ -0,0 +1,39 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ +import { storiesOf } from '@storybook/react'; +import React from 'react'; +import { ThemeProvider } from 'styled-components'; +import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; +import { EuiFlexItem, EuiFlexGroup } from '@elastic/eui'; + +import { AndOrBadge } from '..'; + +const sampleText = + 'Doggo ipsum i am bekom fat snoot wow such tempt waggy wags floofs, ruff heckin good boys and girls mlem. Ruff heckin good boys and girls mlem stop it fren borkf borking doggo very hand that feed shibe, you are doing me the shock big ol heck smol borking doggo with a long snoot for pats heckin good boys. You are doing me the shock smol borking doggo with a long snoot for pats wow very biscit, length boy. Doggo ipsum i am bekom fat snoot wow such tempt waggy wags floofs, ruff heckin good boys and girls mlem. Ruff heckin good boys and girls mlem stop it fren borkf borking doggo very hand that feed shibe, you are doing me the shock big ol heck smol borking doggo with a long snoot for pats heckin good boys.'; + +storiesOf('components/AndOrBadge', module) + .add('and', () => ( + ({ eui: euiLightVars, darkMode: true })}> + + + )) + .add('or', () => ( + ({ eui: euiLightVars, darkMode: true })}> + + + )) + .add('antennas', () => ( + ({ eui: euiLightVars, darkMode: true })}> + + + + + +

{sampleText}

+ + + + )); diff --git a/x-pack/plugins/siem/public/common/components/and_or_badge/index.test.tsx b/x-pack/plugins/siem/public/common/components/and_or_badge/index.test.tsx new file mode 100644 index 0000000000000..9df865193a791 --- /dev/null +++ b/x-pack/plugins/siem/public/common/components/and_or_badge/index.test.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; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { ThemeProvider } from 'styled-components'; +import { mount } from 'enzyme'; +import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; + +import { AndOrBadge } from './'; + +describe('AndOrBadge', () => { + test('it renders top and bottom antenna bars when "includeAntenas" is true', () => { + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + + expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('AND'); + expect(wrapper.find('EuiFlexItem[data-test-subj="and-or-badge-bar"]')).toHaveLength(2); + }); + + test('it renders "and" when "type" is "and"', () => { + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + + expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('AND'); + expect(wrapper.find('EuiFlexItem[data-test-subj="and-or-badge-bar"]')).toHaveLength(0); + }); + + test('it renders "or" when "type" is "or"', () => { + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + + expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('OR'); + expect(wrapper.find('EuiFlexItem[data-test-subj="and-or-badge-bar"]')).toHaveLength(0); + }); +}); diff --git a/x-pack/plugins/siem/public/common/components/and_or_badge/index.tsx b/x-pack/plugins/siem/public/common/components/and_or_badge/index.tsx new file mode 100644 index 0000000000000..095a151a5c283 --- /dev/null +++ b/x-pack/plugins/siem/public/common/components/and_or_badge/index.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; + * you may not use this file except in compliance with the Elastic License. + */ + +import { EuiFlexGroup, EuiBadge, EuiFlexItem } from '@elastic/eui'; +import React from 'react'; +import styled, { css } from 'styled-components'; + +import * as i18n from './translations'; + +const AndOrBadgeAntena = styled(EuiFlexItem)` + ${({ theme }) => css` + background: ${theme.eui.euiColorLightShade}; + position: relative; + width: 2px; + &:after { + background: ${theme.eui.euiColorLightShade}; + content: ''; + height: 8px; + right: -4px; + position: absolute; + width: 9px; + clip-path: circle(); + } + &.topAndOrBadgeAntenna { + &:after { + top: -1px; + } + } + &.bottomAndOrBadgeAntenna { + &:after { + bottom: -1px; + } + } + &.euiFlexItem { + margin: 0 12px 0 0; + } + `} +`; + +const EuiFlexItemWrapper = styled(EuiFlexItem)` + &.euiFlexItem { + margin: 0 12px 0 0; + } +`; + +const RoundedBadge = (styled(EuiBadge)` + align-items: center; + border-radius: 100%; + display: inline-flex; + font-size: 9px; + height: 34px; + justify-content: center; + margin: 0 5px 0 5px; + padding: 7px 6px 4px 6px; + user-select: none; + width: 34px; + .euiBadge__content { + position: relative; + top: -1px; + } + .euiBadge__text { + text-overflow: clip; + } +` as unknown) as typeof EuiBadge; + +RoundedBadge.displayName = 'RoundedBadge'; + +export type AndOr = 'and' | 'or'; + +/** Displays AND / OR in a round badge */ +// Ref: https://github.com/elastic/eui/issues/1655 +export const AndOrBadge = React.memo<{ type: AndOr; includeAntenas?: boolean }>( + ({ type, includeAntenas = false }) => { + const getBadge = () => ( + + {type === 'and' ? i18n.AND : i18n.OR} + + ); + + const getBadgeWithAntenas = () => ( + + + {getBadge()} + + + ); + + return includeAntenas ? getBadgeWithAntenas() : getBadge(); + } +); + +AndOrBadge.displayName = 'AndOrBadge'; diff --git a/x-pack/plugins/siem/public/common/components/and_or_badge/translations.ts b/x-pack/plugins/siem/public/common/components/and_or_badge/translations.ts new file mode 100644 index 0000000000000..58bcb5130a529 --- /dev/null +++ b/x-pack/plugins/siem/public/common/components/and_or_badge/translations.ts @@ -0,0 +1,15 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { i18n } from '@kbn/i18n'; + +export const AND = i18n.translate('xpack.siem.andOrBadge.and', { + defaultMessage: 'AND', +}); + +export const OR = i18n.translate('xpack.siem.andOrBadge.or', { + defaultMessage: 'OR', +}); From 629b832c800060660ba28b84e9b4487176ddd2a5 Mon Sep 17 00:00:00 2001 From: Yara Tercero Date: Tue, 2 Jun 2020 17:15:59 -0400 Subject: [PATCH 02/15] updated references to new and_or_badge location --- .../__examples__/index.stories.tsx | 12 ----- .../timeline/and_or_badge/index.tsx | 49 ------------------- .../timeline/and_or_badge/translations.ts | 15 ------ .../timeline/data_providers/empty.tsx | 2 +- .../timeline/data_providers/providers.tsx | 2 +- .../timeline/search_or_filter/helpers.tsx | 2 +- 6 files changed, 3 insertions(+), 79 deletions(-) delete mode 100644 x-pack/plugins/siem/public/timelines/components/timeline/and_or_badge/__examples__/index.stories.tsx delete mode 100644 x-pack/plugins/siem/public/timelines/components/timeline/and_or_badge/index.tsx delete mode 100644 x-pack/plugins/siem/public/timelines/components/timeline/and_or_badge/translations.ts diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/and_or_badge/__examples__/index.stories.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/and_or_badge/__examples__/index.stories.tsx deleted file mode 100644 index f34e9ee214537..0000000000000 --- a/x-pack/plugins/siem/public/timelines/components/timeline/and_or_badge/__examples__/index.stories.tsx +++ /dev/null @@ -1,12 +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; - * you may not use this file except in compliance with the Elastic License. - */ -import { storiesOf } from '@storybook/react'; -import React from 'react'; -import { AndOrBadge } from '..'; - -storiesOf('components/AndOrBadge', module) - .add('and', () => ) - .add('or', () => ); diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/and_or_badge/index.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/and_or_badge/index.tsx deleted file mode 100644 index 28355372df146..0000000000000 --- a/x-pack/plugins/siem/public/timelines/components/timeline/and_or_badge/index.tsx +++ /dev/null @@ -1,49 +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; - * you may not use this file except in compliance with the Elastic License. - */ - -import { EuiBadge } from '@elastic/eui'; -import React from 'react'; -import styled from 'styled-components'; - -import * as i18n from './translations'; - -const RoundedBadge = (styled(EuiBadge)` - align-items: center; - border-radius: 100%; - display: inline-flex; - font-size: 9px; - height: 34px; - justify-content: center; - margin: 0 5px 0 5px; - padding: 7px 6px 4px 6px; - user-select: none; - width: 34px; - - .euiBadge__content { - position: relative; - top: -1px; - } - - .euiBadge__text { - text-overflow: clip; - } -` as unknown) as typeof EuiBadge; - -RoundedBadge.displayName = 'RoundedBadge'; - -export type AndOr = 'and' | 'or'; - -/** Displays AND / OR in a round badge */ -// Ref: https://github.com/elastic/eui/issues/1655 -export const AndOrBadge = React.memo<{ type: AndOr }>(({ type }) => { - return ( - - {type === 'and' ? i18n.AND : i18n.OR} - - ); -}); - -AndOrBadge.displayName = 'AndOrBadge'; diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/and_or_badge/translations.ts b/x-pack/plugins/siem/public/timelines/components/timeline/and_or_badge/translations.ts deleted file mode 100644 index 58bcb5130a529..0000000000000 --- a/x-pack/plugins/siem/public/timelines/components/timeline/and_or_badge/translations.ts +++ /dev/null @@ -1,15 +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; - * you may not use this file except in compliance with the Elastic License. - */ - -import { i18n } from '@kbn/i18n'; - -export const AND = i18n.translate('xpack.siem.andOrBadge.and', { - defaultMessage: 'AND', -}); - -export const OR = i18n.translate('xpack.siem.andOrBadge.or', { - defaultMessage: 'OR', -}); diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/empty.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/empty.tsx index 240b336f4ecce..691c919029261 100644 --- a/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/empty.tsx +++ b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/empty.tsx @@ -8,7 +8,7 @@ import { EuiBadge, EuiText } from '@elastic/eui'; import React from 'react'; import styled from 'styled-components'; -import { AndOrBadge } from '../and_or_badge'; +import { AndOrBadge } from '../../../../common/components/and_or_badge'; import * as i18n from './translations'; diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/providers.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/providers.tsx index 641f6fba112fc..d6122fef91511 100644 --- a/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/providers.tsx +++ b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/providers.tsx @@ -10,7 +10,7 @@ import React, { useMemo } from 'react'; import { Draggable, DraggingStyle, Droppable, NotDraggingStyle } from 'react-beautiful-dnd'; import styled, { css } from 'styled-components'; -import { AndOrBadge } from '../and_or_badge'; +import { AndOrBadge } from '../../../../common/components/and_or_badge'; import { BrowserFields } from '../../../../common/containers/source'; import { getTimelineProviderDroppableId, diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/search_or_filter/helpers.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/search_or_filter/helpers.tsx index 77257e367c6f5..beadc13811395 100644 --- a/x-pack/plugins/siem/public/timelines/components/timeline/search_or_filter/helpers.tsx +++ b/x-pack/plugins/siem/public/timelines/components/timeline/search_or_filter/helpers.tsx @@ -8,7 +8,7 @@ import { EuiSpacer, EuiText } from '@elastic/eui'; import React from 'react'; import styled from 'styled-components'; -import { AndOrBadge } from '../and_or_badge'; +import { AndOrBadge } from '../../../../common/components/and_or_badge'; import * as i18n from './translations'; import { KqlMode } from '../../../../timelines/store/timeline/model'; From 335a720bbd868bca45214198b27997c8d302d6fb Mon Sep 17 00:00:00 2001 From: Yara Tercero Date: Tue, 2 Jun 2020 17:16:47 -0400 Subject: [PATCH 03/15] built out exception item component for viewer --- .../exceptions/__examples__/index.stories.tsx | 188 +++++++ .../components/exceptions/helpers.test.tsx | 521 ++++++++++++++++++ .../common/components/exceptions/helpers.tsx | 197 +++++++ .../common/components/exceptions/operators.ts | 91 +++ .../components/exceptions/translations.ts | 26 + .../common/components/exceptions/types.ts | 78 +++ .../exceptions/viewer/exception_details.tsx | 79 +++ .../exceptions/viewer/exception_entries.tsx | 148 +++++ .../components/exceptions/viewer/index.tsx | 89 +++ .../plugins/siem/public/lists_plugin_deps.ts | 1 + 10 files changed, 1418 insertions(+) create mode 100644 x-pack/plugins/siem/public/common/components/exceptions/__examples__/index.stories.tsx create mode 100644 x-pack/plugins/siem/public/common/components/exceptions/helpers.test.tsx create mode 100644 x-pack/plugins/siem/public/common/components/exceptions/helpers.tsx create mode 100644 x-pack/plugins/siem/public/common/components/exceptions/operators.ts create mode 100644 x-pack/plugins/siem/public/common/components/exceptions/translations.ts create mode 100644 x-pack/plugins/siem/public/common/components/exceptions/types.ts create mode 100644 x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_details.tsx create mode 100644 x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_entries.tsx create mode 100644 x-pack/plugins/siem/public/common/components/exceptions/viewer/index.tsx diff --git a/x-pack/plugins/siem/public/common/components/exceptions/__examples__/index.stories.tsx b/x-pack/plugins/siem/public/common/components/exceptions/__examples__/index.stories.tsx new file mode 100644 index 0000000000000..9f3ba4341c5eb --- /dev/null +++ b/x-pack/plugins/siem/public/common/components/exceptions/__examples__/index.stories.tsx @@ -0,0 +1,188 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ +import { storiesOf } from '@storybook/react'; +import React from 'react'; +import { ThemeProvider } from 'styled-components'; +import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; + +import { ExceptionItem } from '../viewer'; +import { ExceptionListItemSchema, Operator } from '../types'; + +const getMockExceptionItem = (): ExceptionListItemSchema => ({ + id: '[insert_uuid_here]', + item_id: 'item-id', + created_at: '2020-04-23T00:19:13.289Z', + created_by: 'user_name', + list_id: 'test-exception', + tie_breaker_id: '77fd1909-6786-428a-a671-30229a719c1f', + updated_at: '2020-04-23T00:19:13.289Z', + updated_by: 'user_name', + name: '', + description: '', + comments: [], + tags: [], + _tags: [], + type: 'simple', + namespace_type: 'single', + entries: [ + { + field: 'actingProcess.file.signer', + type: 'match', + operator: Operator.INCLUSION, + value: 'Elastic, N.V.', + }, + { + field: 'host.name', + type: 'match', + operator: Operator.EXCLUSION, + value: 'Global Signer', + }, + ], +}); + +storiesOf('components/exceptions', module) + .add('ExceptionItem', () => { + const payload = getMockExceptionItem(); + return ( + ({ eui: euiDarkVars, darkMode: true })}> + {}} handleEdit={() => {}} /> + + ); + }) + .add('with os', () => { + const payload = getMockExceptionItem(); + payload._tags = ['os:mac,windows']; + return ( + ({ eui: euiDarkVars, darkMode: true })}> + {}} handleEdit={() => {}} /> + + ); + }) + .add('with description', () => { + const payload = getMockExceptionItem(); + payload.description = 'This is my description'; + return ( + ({ eui: euiDarkVars, darkMode: true })}> + {}} handleEdit={() => {}} /> + + ); + }) + .add('with comments', () => { + const payload = getMockExceptionItem(); + payload.comments = [ + { + user: 'yoshi', + timestamp: '2020-04-23T00:19:13.289Z', + comment: 'Comment goes here', + }, + { + user: 'elastic', + timestamp: '2020-04-23T00:19:13.289Z', + comment: + 'Doggo ipsum he made many woofs fluffer pats fat boi you are doing me a frighten very good spot, doggo super chub tungg most angery pupper I have ever seen. Porgo the neighborhood pupper such treat puggorino thicc, wrinkler big ol. Very good spot big ol adorable doggo, borking doggo. Wrinkler long doggo ur givin me a spook pupperino floofs most angery pupper I have ever seen boof many pats doge, porgo long doggo doing me a frighten smol mlem maximum borkdrive super chub. Mlem clouds many pats pats what a nice floof, heckin noodle horse.', + }, + ]; + return ( + ({ eui: euiDarkVars, darkMode: true })}> + {}} handleEdit={() => {}} /> + + ); + }) + .add('with nested entries', () => { + const payload = getMockExceptionItem(); + payload.entries = [ + { + field: 'actingProcess.file.signer', + type: 'match', + operator: Operator.INCLUSION, + value: 'Elastic, N.V.', + }, + { + field: 'host.name', + type: 'match', + operator: Operator.EXCLUSION, + value: 'Global Signer', + }, + { + field: 'file.signature', + type: 'nested', + entries: [ + { + field: 'signer', + type: 'match', + operator: Operator.INCLUSION, + value: 'Evil', + }, + { + field: 'trusted', + type: 'match', + operator: Operator.INCLUSION, + value: 'true', + }, + ], + }, + ]; + return ( + ({ eui: euiDarkVars, darkMode: true })}> + {}} handleEdit={() => {}} /> + + ); + }) + .add('with everything', () => { + const payload = getMockExceptionItem(); + payload._tags = ['os:mac,windows']; + payload.description = 'This is my description'; + payload.comments = [ + { + user: 'yoshi', + timestamp: '2020-04-23T00:19:13.289Z', + comment: 'Comment goes here', + }, + { + user: 'elastic', + timestamp: '2020-04-23T00:19:13.289Z', + comment: + 'Doggo ipsum he made many woofs fluffer pats fat boi you are doing me a frighten very good spot, doggo super chub tungg most angery pupper I have ever seen. Porgo the neighborhood pupper such treat puggorino thicc, wrinkler big ol. Very good spot big ol adorable doggo, borking doggo. Wrinkler long doggo ur givin me a spook pupperino floofs most angery pupper I have ever seen boof many pats doge, porgo long doggo doing me a frighten smol mlem maximum borkdrive super chub. Mlem clouds many pats pats what a nice floof, heckin noodle horse.', + }, + ]; + payload.entries = [ + { + field: 'actingProcess.file.signer', + type: 'match', + operator: Operator.INCLUSION, + value: 'Elastic, N.V.', + }, + { + field: 'host.name', + type: 'match', + operator: Operator.EXCLUSION, + value: 'Global Signer', + }, + { + field: 'file.signature', + type: 'nested', + entries: [ + { + field: 'signer', + type: 'match', + operator: Operator.INCLUSION, + value: 'Evil', + }, + { + field: 'trusted', + type: 'match', + operator: Operator.INCLUSION, + value: 'true', + }, + ], + }, + ]; + return ( + ({ eui: euiDarkVars, darkMode: true })}> + {}} handleEdit={() => {}} /> + + ); + }); diff --git a/x-pack/plugins/siem/public/common/components/exceptions/helpers.test.tsx b/x-pack/plugins/siem/public/common/components/exceptions/helpers.test.tsx new file mode 100644 index 0000000000000..f07f3a959b40d --- /dev/null +++ b/x-pack/plugins/siem/public/common/components/exceptions/helpers.test.tsx @@ -0,0 +1,521 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ +import React from 'react'; +import { mount } from 'enzyme'; + +import { + getOperatorType, + getExceptionOperatorSelect, + determineIfIsNested, + getFormattedEntries, + formatEntry, + getOperatingSystems, + getTagsInclude, + getDescriptionListContent, + getFormattedComments, +} from './helpers'; +import { + OperatorType, + Operator, + NestedExceptionEntry, + ExceptionEntry, + FormattedEntry, + DescriptionListItem, + ExceptionListItemSchema, +} from './types'; +import { + isOperator, + isNotOperator, + isOneOfOperator, + isNotOneOfOperator, + isInListOperator, + isNotInListOperator, + existsOperator, + doesNotExistOperator, +} from './operators'; + +const getExceptionItemMock = (): ExceptionListItemSchema => ({ + id: 'uuid_here', + item_id: 'item-id', + created_at: '2020-04-23T00:19:13.289Z', + created_by: 'user_name', + list_id: 'test-exception', + tie_breaker_id: '77fd1909-6786-428a-a671-30229a719c1f', + updated_at: '2020-04-23T00:19:13.289Z', + updated_by: 'user_name', + namespace_type: 'single', + name: '', + description: '', + comments: [ + { + user: 'user_name', + timestamp: '2020-04-23T00:19:13.289Z', + comment: 'Comment goes here', + }, + ], + _tags: ['os:windows'], + tags: [], + type: 'simple', + entries: [ + { + field: 'actingProcess.file.signer', + type: 'match', + operator: Operator.INCLUSION, + value: 'Elastic, N.V.', + }, + { + field: 'host.name', + type: 'match', + operator: Operator.EXCLUSION, + value: 'Global Signer', + }, + { + field: 'file.signature', + type: 'nested', + entries: [ + { + field: 'signer', + type: 'match', + operator: Operator.INCLUSION, + value: 'Evil', + }, + { + field: 'trusted', + type: 'match', + operator: Operator.INCLUSION, + value: 'true', + }, + ], + }, + ], +}); + +const getExceptionItemEntryMock = (): ExceptionEntry => ({ + field: 'host.name', + type: 'match', + operator: Operator.INCLUSION, + value: 'jibberjabber', +}); + +describe('Exception helpers', () => { + describe('#getOperatorType', () => { + test('returns operator type "match" if entry.type is "match"', () => { + const payload = getExceptionItemEntryMock(); + payload.type = 'match'; + const operatorType = getOperatorType(payload); + + expect(operatorType).toEqual(OperatorType.PHRASE); + }); + + test('returns operator type "match" if entry.type is "nested"', () => { + const payload = getExceptionItemEntryMock(); + payload.type = 'nested'; + const operatorType = getOperatorType(payload); + + expect(operatorType).toEqual(OperatorType.PHRASE); + }); + + test('returns operator type "match_any" if entry.type is "match_any"', () => { + const payload = getExceptionItemEntryMock(); + payload.type = 'match_any'; + const operatorType = getOperatorType(payload); + + expect(operatorType).toEqual(OperatorType.PHRASES); + }); + + test('returns operator type "list" if entry.type is "list"', () => { + const payload = getExceptionItemEntryMock(); + payload.type = 'list'; + const operatorType = getOperatorType(payload); + + expect(operatorType).toEqual(OperatorType.LIST); + }); + + test('returns operator type "exists" if entry.type is "exists"', () => { + const payload = getExceptionItemEntryMock(); + payload.type = 'exists'; + const operatorType = getOperatorType(payload); + + expect(operatorType).toEqual(OperatorType.EXISTS); + }); + }); + + describe('#getExceptionOperatorSelect', () => { + test('it returns "isOperator" when "operator" is "included" and operator type is "match"', () => { + const payload = getExceptionItemEntryMock(); + const result = getExceptionOperatorSelect(payload); + + expect(result).toEqual(isOperator); + }); + + test('it returns "isNotOperator" when "operator" is "excluded" and operator type is "match"', () => { + const payload = getExceptionItemEntryMock(); + payload.operator = Operator.EXCLUSION; + const result = getExceptionOperatorSelect(payload); + + expect(result).toEqual(isNotOperator); + }); + + test('it returns "isOneOfOperator" when "operator" is "included" and operator type is "match_any"', () => { + const payload = getExceptionItemEntryMock(); + payload.type = 'match_any'; + payload.operator = Operator.INCLUSION; + const result = getExceptionOperatorSelect(payload); + + expect(result).toEqual(isOneOfOperator); + }); + + test('it returns "isNotOneOfOperator" when "operator" is "excluded" and operator type is "match_any"', () => { + const payload = getExceptionItemEntryMock(); + payload.type = 'match_any'; + payload.operator = Operator.EXCLUSION; + const result = getExceptionOperatorSelect(payload); + + expect(result).toEqual(isNotOneOfOperator); + }); + + test('it returns "existsOperator" when "operator" is "included" and no operator type is provided', () => { + const payload = getExceptionItemEntryMock(); + payload.type = 'exists'; + payload.operator = Operator.INCLUSION; + const result = getExceptionOperatorSelect(payload); + + expect(result).toEqual(existsOperator); + }); + + test('it returns "doesNotExistsOperator" when "operator" is "excluded" and no operator type is provided', () => { + const payload = getExceptionItemEntryMock(); + payload.type = 'exists'; + payload.operator = Operator.EXCLUSION; + const result = getExceptionOperatorSelect(payload); + + expect(result).toEqual(doesNotExistOperator); + }); + + test('it returns "isInList" when "operator" is "included" and operator type is "list"', () => { + const payload = getExceptionItemEntryMock(); + payload.type = 'list'; + payload.operator = Operator.INCLUSION; + const result = getExceptionOperatorSelect(payload); + + expect(result).toEqual(isInListOperator); + }); + + test('it returns "isNotInList" when "operator" is "excluded" and operator type is "list"', () => { + const payload = getExceptionItemEntryMock(); + payload.type = 'list'; + payload.operator = Operator.EXCLUSION; + const result = getExceptionOperatorSelect(payload); + + expect(result).toEqual(isNotInListOperator); + }); + }); + + describe('#determineIfIsNested', () => { + test('it returns true if type NestedExceptionEntry', () => { + const payload: NestedExceptionEntry = { + field: 'host.name', + type: 'nested', + entries: [], + }; + const result = determineIfIsNested(payload); + + expect(result).toBeTruthy(); + }); + + test('it returns false if NOT type NestedExceptionEntry', () => { + const payload = getExceptionItemEntryMock(); + const result = determineIfIsNested(payload); + + expect(result).toBeFalsy(); + }); + }); + + describe('#getFormattedEntries', () => { + test('it returns empty array if no entries passed', () => { + const result = getFormattedEntries([]); + + expect(result).toEqual([]); + }); + + test('it formats nested entries as expected', () => { + const payload = [ + { + field: 'file.signature', + type: 'nested', + entries: [ + { + field: 'signer', + type: 'match', + operator: Operator.INCLUSION, + value: 'Evil', + }, + { + field: 'trusted', + type: 'match', + operator: Operator.INCLUSION, + value: 'true', + }, + ], + }, + ]; + const result = getFormattedEntries(payload); + const expected: FormattedEntry[] = [ + { + fieldName: 'file.signature', + operator: null, + value: null, + isNested: false, + }, + { + fieldName: 'file.signature.signer', + isNested: true, + operator: 'is', + value: 'Evil', + }, + { + fieldName: 'file.signature.trusted', + isNested: true, + operator: 'is', + value: 'true', + }, + ]; + expect(result).toEqual(expected); + }); + + test('it formats non-nested entries as expected', () => { + const payload = [ + { + field: 'actingProcess.file.signer', + type: 'match', + operator: Operator.INCLUSION, + value: 'Elastic, N.V.', + }, + { + field: 'host.name', + type: 'match', + operator: Operator.EXCLUSION, + value: 'Global Signer', + }, + ]; + const result = getFormattedEntries(payload); + const expected: FormattedEntry[] = [ + { + fieldName: 'actingProcess.file.signer', + isNested: false, + operator: 'is', + value: 'Elastic, N.V.', + }, + { + fieldName: 'host.name', + isNested: false, + operator: 'is not', + value: 'Global Signer', + }, + ]; + expect(result).toEqual(expected); + }); + + test('it formats a mix of nested and non-nested entries as expected', () => { + const payload = getExceptionItemMock(); + const result = getFormattedEntries(payload.entries); + const expected: FormattedEntry[] = [ + { + fieldName: 'actingProcess.file.signer', + isNested: false, + operator: 'is', + value: 'Elastic, N.V.', + }, + { + fieldName: 'host.name', + isNested: false, + operator: 'is not', + value: 'Global Signer', + }, + { + fieldName: 'file.signature', + isNested: false, + operator: null, + value: null, + }, + { + fieldName: 'file.signature.signer', + isNested: true, + operator: 'is', + value: 'Evil', + }, + { + fieldName: 'file.signature.trusted', + isNested: true, + operator: 'is', + value: 'true', + }, + ]; + expect(result).toEqual(expected); + }); + }); + + describe('#formatEntry', () => { + test('it formats an entry', () => { + const payload = getExceptionItemEntryMock(); + const formattedEntry = formatEntry({ isNested: false, item: payload }); + const expected: FormattedEntry = { + fieldName: 'host.name', + isNested: false, + operator: 'is', + value: 'jibberjabber', + }; + + expect(formattedEntry).toEqual(expected); + }); + + test('it formats a nested entry', () => { + const payload = getExceptionItemEntryMock(); + const formattedEntry = formatEntry({ isNested: true, parent: 'parent', item: payload }); + const expected: FormattedEntry = { + fieldName: 'parent.host.name', + isNested: true, + operator: 'is', + value: 'jibberjabber', + }; + + expect(formattedEntry).toEqual(expected); + }); + }); + + describe('#getOperatingSystems', () => { + test('it returns null if no operating system tag specified', () => { + const result = getOperatingSystems(['some tag', 'some other tag']); + + expect(result).toBeNull(); + }); + + test('it returns null if operating system tag malformed', () => { + const result = getOperatingSystems(['some tag', 'jibberos:mac,windows', 'some other tag']); + + expect(result).toBeNull(); + }); + + test('it returns formatted operating systems if specified in tags', () => { + const result = getOperatingSystems(['some tag', 'os:mac,windows', 'some other tag']); + + expect(result).toEqual('Mac, Windows'); + }); + + test('it returns formatted operating systems if space included in os tag', () => { + const result = getOperatingSystems(['some tag', 'os: mac, windows', 'some other tag']); + + expect(result).toEqual('Mac, Windows'); + }); + }); + + describe('#getTagsInclude', () => { + test('it returns a tuple of "false" and "null" if no matches found', () => { + const result = getTagsInclude({ tags: ['some', 'tags', 'here'], regex: /(no match)/ }); + + expect(result).toEqual([false, null]); + }); + + test('it returns a tuple of "true" and matching string if matches found', () => { + const result = getTagsInclude({ tags: ['some', 'tags', 'here'], regex: /(some)/ }); + + expect(result).toEqual([true, 'some']); + }); + }); + + describe('#getDescriptionListContent', () => { + test('it returns formatted description list with os if one is specified', () => { + const payload = getExceptionItemMock(); + const result = getDescriptionListContent(payload); + const expected: DescriptionListItem[] = [ + { + description: 'Windows', + title: 'OS', + }, + { + description: 'April 22nd 2020 @ 20:19:13', + title: 'Date Created', + }, + { + description: 'user_name', + title: 'Created by', + }, + ]; + + expect(result).toEqual(expected); + }); + + test('it returns formatted description list with a description if one specified', () => { + const payload = getExceptionItemMock(); + payload._tags = []; + payload.description = 'Im a description'; + const result = getDescriptionListContent(payload); + const expected: DescriptionListItem[] = [ + { + description: 'April 22nd 2020 @ 20:19:13', + title: 'Date Created', + }, + { + description: 'user_name', + title: 'Created by', + }, + { + description: 'Im a description', + title: 'Comment', + }, + ]; + + expect(result).toEqual(expected); + }); + + test('it returns just user and date created if no other fields specified', () => { + const payload = getExceptionItemMock(); + payload._tags = []; + payload.description = ''; + const result = getDescriptionListContent(payload); + const expected: DescriptionListItem[] = [ + { + description: 'April 22nd 2020 @ 20:19:13', + title: 'Date Created', + }, + { + description: 'user_name', + title: 'Created by', + }, + ]; + + expect(result).toEqual(expected); + }); + }); + + describe('#getFormattedComments', () => { + test('it returns formatted comment object with username and timestamp', () => { + const payload = getExceptionItemMock().comments; + const result = getFormattedComments(payload); + + expect(result[0].username).toEqual('user_name'); + expect(result[0].timestamp).toEqual('on Apr 22nd 2020 @ 20:19:13'); + }); + + test('it returns formatted timeline icon with comment users initial', () => { + const payload = getExceptionItemMock().comments; + const result = getFormattedComments(payload); + + const wrapper = mount(result[0].timelineIcon as React.ReactElement); + + expect(wrapper.text()).toEqual('U'); + }); + + test('it returns comment text', () => { + const payload = getExceptionItemMock().comments; + const result = getFormattedComments(payload); + + const wrapper = mount(result[0].children as React.ReactElement); + + expect(wrapper.text()).toEqual('Comment goes here'); + }); + }); +}); diff --git a/x-pack/plugins/siem/public/common/components/exceptions/helpers.tsx b/x-pack/plugins/siem/public/common/components/exceptions/helpers.tsx new file mode 100644 index 0000000000000..b94c15e8ac153 --- /dev/null +++ b/x-pack/plugins/siem/public/common/components/exceptions/helpers.tsx @@ -0,0 +1,197 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { EuiText, EuiCommentProps, EuiAvatar } from '@elastic/eui'; +import { flatten, capitalize } from 'lodash'; +import moment from 'moment'; + +import { + FormattedEntry, + OperatorType, + OperatorOption, + ExceptionEntry, + NestedExceptionEntry, + DescriptionListItem, + Comment, + ExceptionListItemSchema, +} from './types'; +import { EXCEPTION_OPERATORS, isOperator } from './operators'; + +export const getEmptyValue = () => '—'; + +/** + * Returns the operator type, may not need this if using io-ts types + * + * @param entry a single ExceptionItem entry + */ +export const getOperatorType = (entry: ExceptionEntry): OperatorType => { + switch (entry.type) { + case 'nested': + case 'match': + return OperatorType.PHRASE; + case 'match_any': + return OperatorType.PHRASES; + case 'list': + return OperatorType.LIST; + default: + return OperatorType.EXISTS; + } +}; + +/** + * Determines operator selection (is/is not/is one of, etc.) + * Default operator is "is" + * + * @param entry a single ExceptionItem entry + */ +export const getExceptionOperatorSelect = (entry: ExceptionEntry): OperatorOption => { + const operatorType = getOperatorType(entry); + const foundOperator = EXCEPTION_OPERATORS.find((operatorOption) => { + return entry.operator === operatorOption.operator && operatorType === operatorOption.type; + }); + + return foundOperator ?? isOperator; +}; + +export const determineIfIsNested = ( + tbd: ExceptionEntry | NestedExceptionEntry +): tbd is NestedExceptionEntry => { + if (tbd.type === 'nested') { + return true; + } + return false; +}; + +/** + * Formats ExceptionItem entries into simple field, operator, value + * for use in rendering items in table + * + * @param entries an ExceptionItem's entries + */ +export const getFormattedEntries = ( + entries: Array +): FormattedEntry[] => { + const formattedEntries = entries.map((entry) => { + if (determineIfIsNested(entry)) { + const parent = { fieldName: entry.field, operator: null, value: null, isNested: false }; + return entry.entries.reduce( + (acc, nestedEntry) => { + const formattedEntry = formatEntry({ + isNested: true, + parent: entry.field, + item: nestedEntry, + }); + return [...acc, { ...formattedEntry }]; + }, + [parent] + ); + } else { + return formatEntry({ isNested: false, item: entry }); + } + }); + + return flatten(formattedEntries); +}; + +/** + * Helper method for `getFormattedEntries` + */ +export const formatEntry = ({ + isNested, + parent, + item, +}: { + isNested: boolean; + parent?: string; + item: ExceptionEntry; +}) => { + const operator = getExceptionOperatorSelect(item); + const operatorType = getOperatorType(item); + const value = operatorType === OperatorType.EXISTS ? null : item.value; + + return { + fieldName: isNested ? `${parent}.${item.field}` : item.field, + operator: operator.message, + value, + isNested, + }; +}; + +export const getOperatingSystems = (tags: string[]): string | null => { + const [includesOs, osMatch] = getTagsInclude({ tags, regex: /(?<=\b)(os:[^;]*)(?=\b)/ }); + if (includesOs && osMatch !== null) { + const os = osMatch.split(':')[1]; + const items = os.split(',').map((item) => { + return capitalize(item.trim()); + }); + return items.join(', '); + } else { + return null; + } +}; + +export const getTagsInclude = ({ + tags, + regex, +}: { + tags: string[]; + regex: RegExp; +}): [boolean, string | null] => { + const matches: string[] | null = tags.join(';').match(regex); + const match = matches !== null ? matches[1] : null; + return [matches !== null, match]; +}; + +/** + * Formats ExceptionItem information for description list component + * + * @param exceptionItem an ExceptionItem + */ +export const getDescriptionListContent = ( + exceptionItem: ExceptionListItemSchema +): DescriptionListItem[] => { + const details = [ + { + title: 'OS', + value: getOperatingSystems(exceptionItem._tags), + }, + { + title: 'Date Created', + value: moment(exceptionItem.created_at).format('MMMM Do YYYY @ HH:mm:ss'), + }, + { + title: 'Created by', + value: exceptionItem.created_by, + }, + { + title: 'Comment', + value: exceptionItem.description, + }, + ]; + + return details.reduce((acc, { value, title }) => { + if (value !== null && value) { + return [...acc, { title, description: value }]; + } else { + return acc; + } + }, []); +}; + +/** + * Formats ExceptionItem.comments into EuiCommentList format + * + * @param comments ExceptionItem.comments + */ +export const getFormattedComments = (comments: Comment[]): EuiCommentProps[] => + comments.map((comment) => ({ + username: comment.user, + timestamp: moment(comment.timestamp).format('on MMM Do YYYY @ HH:mm:ss'), + event: 'added a comment', + timelineIcon: , + children: {comment.comment}, + })); diff --git a/x-pack/plugins/siem/public/common/components/exceptions/operators.ts b/x-pack/plugins/siem/public/common/components/exceptions/operators.ts new file mode 100644 index 0000000000000..9b553c5af9bd5 --- /dev/null +++ b/x-pack/plugins/siem/public/common/components/exceptions/operators.ts @@ -0,0 +1,91 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { i18n } from '@kbn/i18n'; +import { OperatorOption, OperatorType, Operator } from './types'; + +export const isOperator: OperatorOption = { + message: i18n.translate('xpack.siem.exceptions.isOperatorLabel', { + defaultMessage: 'is', + }), + value: 'is', + type: OperatorType.PHRASE, + operator: Operator.INCLUSION, +}; + +export const isNotOperator: OperatorOption = { + message: i18n.translate('xpack.siem.exceptions.isNotOperatorLabel', { + defaultMessage: 'is not', + }), + value: 'is_not', + type: OperatorType.PHRASE, + operator: Operator.EXCLUSION, +}; + +export const isOneOfOperator: OperatorOption = { + message: i18n.translate('xpack.siem.exceptions.isOneOfOperatorLabel', { + defaultMessage: 'is one of', + }), + value: 'is_one_of', + type: OperatorType.PHRASES, + operator: Operator.INCLUSION, +}; + +export const isNotOneOfOperator: OperatorOption = { + message: i18n.translate('xpack.siem.exceptions.isNotOneOfOperatorLabel', { + defaultMessage: 'is not one of', + }), + value: 'is_not_one_of', + type: OperatorType.PHRASES, + operator: Operator.EXCLUSION, +}; + +export const existsOperator: OperatorOption = { + message: i18n.translate('xpack.siem.exceptions.existsOperatorLabel', { + defaultMessage: 'exists', + }), + value: 'exists', + type: OperatorType.EXISTS, + operator: Operator.INCLUSION, +}; + +export const doesNotExistOperator: OperatorOption = { + message: i18n.translate('xpack.siem.exceptions.doesNotExistOperatorLabel', { + defaultMessage: 'does not exist', + }), + value: 'does_not_exist', + type: OperatorType.EXISTS, + operator: Operator.EXCLUSION, +}; + +export const isInListOperator: OperatorOption = { + message: i18n.translate('xpack.siem.exceptions.isInListOperatorLabel', { + defaultMessage: 'is in list', + }), + value: 'is_in_list', + type: OperatorType.LIST, + operator: Operator.INCLUSION, +}; + +export const isNotInListOperator: OperatorOption = { + message: i18n.translate('xpack.siem.exceptions.isNotInListOperatorLabel', { + defaultMessage: 'is not in list', + }), + value: 'is_not_in_list', + type: OperatorType.LIST, + operator: Operator.EXCLUSION, +}; + +export const EXCEPTION_OPERATORS: OperatorOption[] = [ + isOperator, + isNotOperator, + isOneOfOperator, + isNotOneOfOperator, + existsOperator, + doesNotExistOperator, + isInListOperator, + isNotInListOperator, +]; diff --git a/x-pack/plugins/siem/public/common/components/exceptions/translations.ts b/x-pack/plugins/siem/public/common/components/exceptions/translations.ts new file mode 100644 index 0000000000000..8c69de5b2a371 --- /dev/null +++ b/x-pack/plugins/siem/public/common/components/exceptions/translations.ts @@ -0,0 +1,26 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ +import { i18n } from '@kbn/i18n'; + +export const EDIT = i18n.translate('xpack.siem.exceptions.editButtonLabel', { + defaultMessage: 'Edit', +}); + +export const REMOVE = i18n.translate('xpack.siem.exceptions.removeButtonLabel', { + defaultMessage: 'Remove', +}); + +export const COMMENTS_SHOW = (comments: number) => + i18n.translate('xpack.siem.exceptions.showCommentsLabel', { + values: { comments }, + defaultMessage: 'Show ({comments}) {comments, plural, =1 {Comment} other {Comments}}', + }); + +export const COMMENTS_HIDE = (comments: number) => + i18n.translate('xpack.siem.exceptions.hideCommentsLabel', { + values: { comments }, + defaultMessage: 'Hide ({comments}) {comments, plural, =1 {Comment} other {Comments}}', + }); diff --git a/x-pack/plugins/siem/public/common/components/exceptions/types.ts b/x-pack/plugins/siem/public/common/components/exceptions/types.ts new file mode 100644 index 0000000000000..e8393610e459d --- /dev/null +++ b/x-pack/plugins/siem/public/common/components/exceptions/types.ts @@ -0,0 +1,78 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ +import { ReactNode } from 'react'; + +export interface OperatorOption { + message: string; + value: string; + operator: Operator; + type: OperatorType; +} + +export enum Operator { + INCLUSION = 'included', + EXCLUSION = 'excluded', +} + +export enum OperatorType { + NESTED = 'nested', + PHRASE = 'match', + PHRASES = 'match_any', + EXISTS = 'exists', + LIST = 'list', +} + +export interface FormattedEntry { + fieldName: string; + operator: string | null; + value: string | null; + isNested: boolean; +} + +export interface NestedExceptionEntry { + field: string; + type: string; + entries: ExceptionEntry[]; +} + +export interface ExceptionEntry { + field: string; + type: string; + operator: Operator; + value: string; +} + +export interface DescriptionListItem { + title: NonNullable; + description: NonNullable; +} + +export interface Comment { + user: string; + timestamp: string; + comment: string; +} + +// TODO: Delete once types are updated +export interface ExceptionListItemSchema { + _tags: string[]; + comments: Comment[]; + created_at: string; + created_by: string; + description?: string; + entries: Array; + id: string; + item_id: string; + list_id: string; + meta?: unknown; + name: string; + namespace_type: 'single' | 'agnostic'; + tags: string[]; + tie_breaker_id: string; + type: string; + updated_at: string; + updated_by: string; +} diff --git a/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_details.tsx b/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_details.tsx new file mode 100644 index 0000000000000..c3edccba5a660 --- /dev/null +++ b/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_details.tsx @@ -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; + * you may not use this file except in compliance with the Elastic License. + */ + +import { EuiFlexItem, EuiFlexGroup, EuiDescriptionList, EuiButtonEmpty } from '@elastic/eui'; +import React, { useMemo } from 'react'; +import styled, { css } from 'styled-components'; +import { transparentize } from 'polished'; + +import { ExceptionListItemSchema } from '../types'; +import { getDescriptionListContent } from '../helpers'; +import * as i18n from '../translations'; + +const StyledExceptionDetails = styled(EuiFlexItem)` + ${({ theme }) => css` + background-color: ${transparentize(0.95, theme.eui.euiColorPrimary)}; + padding: 16px; + + .euiDescriptionList__title.listTitle--width { + width: 40%; + } + + .euiDescriptionList__description.listDescription--width { + width: 60%; + } + `} +`; + +const ExceptionDetailsComponent = ({ + showComments, + onCommentsClick, + exceptionItem, +}: { + showComments: boolean; + exceptionItem: ExceptionListItemSchema; + onCommentsClick: () => void; +}) => { + const descriptionList = useMemo(() => getDescriptionListContent(exceptionItem), [exceptionItem]); + + const commentsSection = useMemo(() => { + const { comments } = exceptionItem; + if (comments !== null && comments && comments.length > 0) { + return ( + + {!showComments + ? i18n.COMMENTS_SHOW(comments.length) + : i18n.COMMENTS_HIDE(comments.length)} + + ); + } else { + return <>; + } + }, [showComments, onCommentsClick, exceptionItem]); + + return ( + + + + + + {commentsSection} + + + ); +}; + +ExceptionDetailsComponent.displayName = 'ExceptionDetailsComponent'; + +export const ExceptionDetails = React.memo(ExceptionDetailsComponent); + +ExceptionDetails.displayName = 'ExceptionDetails'; diff --git a/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_entries.tsx b/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_entries.tsx new file mode 100644 index 0000000000000..373ecedc95441 --- /dev/null +++ b/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_entries.tsx @@ -0,0 +1,148 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { EuiBasicTable, EuiIconTip, EuiFlexItem, EuiFlexGroup, EuiButton } from '@elastic/eui'; +import React, { useMemo } from 'react'; +import styled, { css } from 'styled-components'; +import { transparentize } from 'polished'; + +import { AndOrBadge } from '../../and_or_badge'; +import { getEmptyValue } from '../helpers'; +import * as i18n from '../translations'; +import { FormattedEntry } from '../types'; + +const EntriesDetails = styled(EuiFlexItem)` + padding: 16px; +`; + +const StyledEditButton = styled(EuiButton)` + ${({ theme }) => css` + background-color: ${transparentize(0.9, theme.eui.euiColorPrimary)}; + width: 111px; + border: none; + font-weight: 600; + `} +`; + +const StyledRemoveButton = styled(EuiButton)` + ${({ theme }) => css` + background-color: ${transparentize(0.9, theme.eui.euiColorDanger)}; + width: 111px; + border: none; + font-weight: 600; + `} +`; + +const AndOrBadgeContainer = styled(EuiFlexItem)` + padding-top: 32px; +`; + +interface ExceptionEntriesComponentProps { + entries: FormattedEntry[]; + handleDelete: () => void; + handleEdit: () => void; +} + +const ExceptionEntriesComponent = ({ + entries, + handleDelete, + handleEdit, +}: ExceptionEntriesComponentProps) => { + const columns = useMemo( + () => [ + { + field: 'fieldName', + name: 'Field', + sortable: false, + truncateText: true, + 'data-test-subj': 'exceptionFieldNameCell', + width: '30%', + render: (value: string | null, data: FormattedEntry) => { + if (value !== null && data.isNested) { + return ( + <> + + {value} + + ); + } else { + return value ?? getEmptyValue(); + } + }, + }, + { + field: 'operator', + name: 'Operator', + sortable: false, + truncateText: true, + 'data-test-subj': 'exceptionFieldOperatorCell', + width: '20%', + render: (value: string | null) => value ?? getEmptyValue(), + }, + { + field: 'value', + name: 'Value', + sortable: false, + truncateText: true, + 'data-test-subj': 'exceptionFieldValueCell', + width: '60%', + render: (values: string | string[] | null) => { + if (Array.isArray(values)) { + return ( + + {values.map((value) => { + return {value}; + })} + + ); + } else { + return values ?? getEmptyValue(); + } + }, + }, + ], + [entries] + ); + + return ( + + + + + {entries.length > 1 && ( + + + + )} + + + + + + + + + + {i18n.EDIT} + + + + handleDelete()}> + {i18n.REMOVE} + + + + + + + ); +}; + +ExceptionEntriesComponent.displayName = 'ExceptionEntriesComponent'; + +export const ExceptionEntries = React.memo(ExceptionEntriesComponent); + +ExceptionEntries.displayName = 'ExceptionEntries'; diff --git a/x-pack/plugins/siem/public/common/components/exceptions/viewer/index.tsx b/x-pack/plugins/siem/public/common/components/exceptions/viewer/index.tsx new file mode 100644 index 0000000000000..a35ec3521e84c --- /dev/null +++ b/x-pack/plugins/siem/public/common/components/exceptions/viewer/index.tsx @@ -0,0 +1,89 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { EuiPanel, EuiFlexGroup, EuiCommentList, EuiAccordion, EuiFlexItem } from '@elastic/eui'; +import React, { useEffect, useState, useMemo, useCallback } from 'react'; +import styled from 'styled-components'; + +import { ExceptionDetails } from './exception_details'; +import { ExceptionEntries } from './exception_entries'; +import { getFormattedEntries, getFormattedComments } from '../helpers'; +import { FormattedEntry, ExceptionListItemSchema } from '../types'; + +const MyFlexItem = styled(EuiFlexItem)` + &.comments--show { + padding: 16px; + border-top: 1px solid #d3dae6; + } +`; + +interface ExceptionItemProps { + exceptionItem: ExceptionListItemSchema; + handleDelete: ({ id }: { id: string }) => void; + handleEdit: (item: ExceptionListItemSchema) => void; +} + +const ExceptionItemComponent = ({ + exceptionItem, + handleDelete, + handleEdit, +}: ExceptionItemProps) => { + const [entryItems, setEntryItems] = useState([]); + const [showComments, setShowComments] = useState(false); + + useEffect(() => { + const formattedEntries = getFormattedEntries(exceptionItem.entries ?? []); + setEntryItems([...formattedEntries]); + }, [exceptionItem.entries]); + + const onDelete = useCallback(() => { + handleDelete({ id: exceptionItem.id }); + }, [handleDelete, exceptionItem]); + + const onEdit = useCallback(() => { + handleEdit(exceptionItem); + }, [handleEdit, exceptionItem]); + + const onCommentsClick = useCallback(() => { + setShowComments(!showComments); + }, [setShowComments, showComments]); + + const formattedComments = useMemo(() => { + return getFormattedComments(exceptionItem.comments ?? []); + }, [exceptionItem]); + + return ( + + + + + + + + + + + + + + + + ); +}; + +ExceptionItemComponent.displayName = 'ExceptionItemComponent'; + +export const ExceptionItem = React.memo(ExceptionItemComponent); + +ExceptionItem.displayName = 'ExceptionItem'; diff --git a/x-pack/plugins/siem/public/lists_plugin_deps.ts b/x-pack/plugins/siem/public/lists_plugin_deps.ts index d2ee5ae56b7d9..350b53ef52f4e 100644 --- a/x-pack/plugins/siem/public/lists_plugin_deps.ts +++ b/x-pack/plugins/siem/public/lists_plugin_deps.ts @@ -11,3 +11,4 @@ export { mockNewExceptionItem, mockNewExceptionList, } from '../../lists/public'; +export { ExceptionListItemSchema, Entries } from '../../lists/common/schemas'; From dd2b8c8bc327ab7a940384ef06b516fe0de9b992 Mon Sep 17 00:00:00 2001 From: Yara Tercero Date: Tue, 2 Jun 2020 17:17:14 -0400 Subject: [PATCH 04/15] added exception item component stories for easy testing --- x-pack/plugins/siem/scripts/storybook.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/siem/scripts/storybook.js b/x-pack/plugins/siem/scripts/storybook.js index 6566236704936..5f06f2a4ebb12 100644 --- a/x-pack/plugins/siem/scripts/storybook.js +++ b/x-pack/plugins/siem/scripts/storybook.js @@ -9,5 +9,5 @@ import { join } from 'path'; // eslint-disable-next-line require('@kbn/storybook').runStorybookCli({ name: 'siem', - storyGlobs: [join(__dirname, '..', 'public', 'components', '**', '*.stories.tsx')], + storyGlobs: [join(__dirname, '..', 'public', '**', 'components', '**', '*.stories.tsx')], }); From 990d656db5f522b141750b4bb64e8cadeb468e75 Mon Sep 17 00:00:00 2001 From: Yara Tercero Date: Tue, 2 Jun 2020 17:34:24 -0400 Subject: [PATCH 05/15] updated text to use i18n in spots missed --- .../common/components/exceptions/helpers.tsx | 11 ++++++----- .../common/components/exceptions/translations.ts | 16 ++++++++++++++++ 2 files changed, 22 insertions(+), 5 deletions(-) diff --git a/x-pack/plugins/siem/public/common/components/exceptions/helpers.tsx b/x-pack/plugins/siem/public/common/components/exceptions/helpers.tsx index b94c15e8ac153..2182b6cf79925 100644 --- a/x-pack/plugins/siem/public/common/components/exceptions/helpers.tsx +++ b/x-pack/plugins/siem/public/common/components/exceptions/helpers.tsx @@ -9,6 +9,7 @@ import { EuiText, EuiCommentProps, EuiAvatar } from '@elastic/eui'; import { flatten, capitalize } from 'lodash'; import moment from 'moment'; +import * as i18n from './translations'; import { FormattedEntry, OperatorType, @@ -156,19 +157,19 @@ export const getDescriptionListContent = ( ): DescriptionListItem[] => { const details = [ { - title: 'OS', + title: i18n.OPERATING_SYSTEM, value: getOperatingSystems(exceptionItem._tags), }, { - title: 'Date Created', + title: i18n.DATE_CREATED, value: moment(exceptionItem.created_at).format('MMMM Do YYYY @ HH:mm:ss'), }, { - title: 'Created by', + title: i18n.CREATED_BY, value: exceptionItem.created_by, }, { - title: 'Comment', + title: i18n.COMMENT, value: exceptionItem.description, }, ]; @@ -191,7 +192,7 @@ export const getFormattedComments = (comments: Comment[]): EuiCommentProps[] => comments.map((comment) => ({ username: comment.user, timestamp: moment(comment.timestamp).format('on MMM Do YYYY @ HH:mm:ss'), - event: 'added a comment', + event: i18n.COMMENT_EVENT, timelineIcon: , children: {comment.comment}, })); diff --git a/x-pack/plugins/siem/public/common/components/exceptions/translations.ts b/x-pack/plugins/siem/public/common/components/exceptions/translations.ts index 8c69de5b2a371..5f7f5b2811921 100644 --- a/x-pack/plugins/siem/public/common/components/exceptions/translations.ts +++ b/x-pack/plugins/siem/public/common/components/exceptions/translations.ts @@ -24,3 +24,19 @@ export const COMMENTS_HIDE = (comments: number) => values: { comments }, defaultMessage: 'Hide ({comments}) {comments, plural, =1 {Comment} other {Comments}}', }); + +export const DATE_CREATED = i18n.translate('xpack.siem.exceptions.dateCreatedLabel', { + defaultMessage: 'Date created', +}); + +export const CREATED_BY = i18n.translate('xpack.siem.exceptions.createdByLabel', { + defaultMessage: 'Created by', +}); + +export const COMMENT = i18n.translate('xpack.siem.exceptions.commentLabel', { + defaultMessage: 'Comment', +}); + +export const OPERATING_SYSTEM = i18n.translate('xpack.siem.exceptions.operatingSystemLabel', { + defaultMessage: 'OS', +}); From bac11c98eb2b6a192e538b3693f0982a7f975d14 Mon Sep 17 00:00:00 2001 From: Yara Tercero Date: Tue, 2 Jun 2020 19:42:02 -0400 Subject: [PATCH 06/15] added tests for exception detail component and updated braking tests --- .../components/exceptions/helpers.test.tsx | 6 +- .../common/components/exceptions/mocks.ts | 63 +++++ .../viewer/exception_details.test.tsx | 221 ++++++++++++++++++ .../exceptions/viewer/exception_details.tsx | 8 +- 4 files changed, 294 insertions(+), 4 deletions(-) create mode 100644 x-pack/plugins/siem/public/common/components/exceptions/mocks.ts create mode 100644 x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_details.test.tsx diff --git a/x-pack/plugins/siem/public/common/components/exceptions/helpers.test.tsx b/x-pack/plugins/siem/public/common/components/exceptions/helpers.test.tsx index f07f3a959b40d..4b74b47d8e433 100644 --- a/x-pack/plugins/siem/public/common/components/exceptions/helpers.test.tsx +++ b/x-pack/plugins/siem/public/common/components/exceptions/helpers.test.tsx @@ -437,7 +437,7 @@ describe('Exception helpers', () => { }, { description: 'April 22nd 2020 @ 20:19:13', - title: 'Date Created', + title: 'Date created', }, { description: 'user_name', @@ -456,7 +456,7 @@ describe('Exception helpers', () => { const expected: DescriptionListItem[] = [ { description: 'April 22nd 2020 @ 20:19:13', - title: 'Date Created', + title: 'Date created', }, { description: 'user_name', @@ -479,7 +479,7 @@ describe('Exception helpers', () => { const expected: DescriptionListItem[] = [ { description: 'April 22nd 2020 @ 20:19:13', - title: 'Date Created', + title: 'Date created', }, { description: 'user_name', diff --git a/x-pack/plugins/siem/public/common/components/exceptions/mocks.ts b/x-pack/plugins/siem/public/common/components/exceptions/mocks.ts new file mode 100644 index 0000000000000..4135840e63d10 --- /dev/null +++ b/x-pack/plugins/siem/public/common/components/exceptions/mocks.ts @@ -0,0 +1,63 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { Operator } from './types'; + +export const getExceptionItemMock = (): ExceptionListItemSchema => ({ + id: 'uuid_here', + item_id: 'item-id', + created_at: '2020-04-23T00:19:13.289Z', + created_by: 'user_name', + list_id: 'test-exception', + tie_breaker_id: '77fd1909-6786-428a-a671-30229a719c1f', + updated_at: '2020-04-23T00:19:13.289Z', + updated_by: 'user_name', + namespace_type: 'single', + name: '', + description: 'This is a description', + comments: [ + { + user: 'user_name', + timestamp: '2020-04-23T00:19:13.289Z', + comment: 'Comment goes here', + }, + ], + _tags: ['os:windows'], + tags: [], + type: 'simple', + entries: [ + { + field: 'actingProcess.file.signer', + type: 'match', + operator: Operator.INCLUSION, + value: 'Elastic, N.V.', + }, + { + field: 'host.name', + type: 'match', + operator: Operator.EXCLUSION, + value: 'Global Signer', + }, + { + field: 'file.signature', + type: 'nested', + entries: [ + { + field: 'signer', + type: 'match', + operator: Operator.INCLUSION, + value: 'Evil', + }, + { + field: 'trusted', + type: 'match', + operator: Operator.INCLUSION, + value: 'true', + }, + ], + }, + ], +}); diff --git a/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_details.test.tsx b/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_details.test.tsx new file mode 100644 index 0000000000000..b104e7806f9fc --- /dev/null +++ b/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_details.test.tsx @@ -0,0 +1,221 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { ThemeProvider } from 'styled-components'; +import { mount } from 'enzyme'; +import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; + +import { ExceptionDetails } from './exception_details'; +import { getExceptionItemMock } from '../mocks'; + +describe('ExceptionDetails', () => { + test('it renders no comments button if no comments exist', () => { + const exceptionItem = getExceptionItemMock(); + exceptionItem.comments = []; + + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + + expect( + wrapper.find('EuiButtonEmpty[data-test-subj="exceptionsViewerItemCommentsBtn"]') + ).toHaveLength(0); + }); + + test('it renders comments button if comments exist', () => { + const exceptionItem = getExceptionItemMock(); + + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + + expect( + wrapper.find('EuiButtonEmpty[data-test-subj="exceptionsViewerItemCommentsBtn"]') + ).toHaveLength(1); + }); + + test('it renders correct number of comments', () => { + const exceptionItem = getExceptionItemMock(); + + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + + expect( + wrapper.find('EuiButtonEmpty[data-test-subj="exceptionsViewerItemCommentsBtn"]').at(0).text() + ).toEqual('Show (1) Comment'); + }); + + test('it renders comments plural if more than one', () => { + const exceptionItem = getExceptionItemMock(); + exceptionItem.comments = [ + { + user: 'user_1', + timestamp: '2020-04-23T00:19:13.289Z', + comment: 'Comment goes here', + }, + { + user: 'user_2', + timestamp: '2020-04-23T00:19:13.289Z', + comment: 'Comment goes here', + }, + ]; + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + + expect( + wrapper.find('EuiButtonEmpty[data-test-subj="exceptionsViewerItemCommentsBtn"]').at(0).text() + ).toEqual('Show (2) Comments'); + }); + + test('it renders comments show text if "showComments" is false', () => { + const exceptionItem = getExceptionItemMock(); + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + + expect( + wrapper.find('EuiButtonEmpty[data-test-subj="exceptionsViewerItemCommentsBtn"]').at(0).text() + ).toEqual('Show (1) Comment'); + }); + + test('it renders comments hide text if "showComments" is true', () => { + const exceptionItem = getExceptionItemMock(); + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + + expect( + wrapper.find('EuiButtonEmpty[data-test-subj="exceptionsViewerItemCommentsBtn"]').at(0).text() + ).toEqual('Hide (1) Comment'); + }); + + test('it invokes "onCommentsClick" when comments button clicked', () => { + const mockOnCommentsClick = jest.fn(); + const exceptionItem = getExceptionItemMock(); + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + const commentsBtn = wrapper + .find('EuiButtonEmpty[data-test-subj="exceptionsViewerItemCommentsBtn"]') + .at(0); + commentsBtn.simulate('click'); + + expect(mockOnCommentsClick).toHaveBeenCalledTimes(1); + }); + + test('it renders the operating system if one is specified in the exception item', () => { + const exceptionItem = getExceptionItemMock(); + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + + expect(wrapper.find('EuiDescriptionListTitle').at(0).text()).toEqual('OS'); + expect(wrapper.find('EuiDescriptionListDescription').at(0).text()).toEqual('Windows'); + }); + + test('it renders the exception item creator', () => { + const exceptionItem = getExceptionItemMock(); + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + + expect(wrapper.find('EuiDescriptionListTitle').at(1).text()).toEqual('Date created'); + expect(wrapper.find('EuiDescriptionListDescription').at(1).text()).toEqual( + 'April 22nd 2020 @ 20:19:13' + ); + }); + + test('it renders the exception item creation timestamp', () => { + const exceptionItem = getExceptionItemMock(); + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + + expect(wrapper.find('EuiDescriptionListTitle').at(2).text()).toEqual('Created by'); + expect(wrapper.find('EuiDescriptionListDescription').at(2).text()).toEqual('user_name'); + }); + + test('it renders the description if one is included on the exception item', () => { + const exceptionItem = getExceptionItemMock(); + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + + expect(wrapper.find('EuiDescriptionListTitle').at(3).text()).toEqual('Comment'); + expect(wrapper.find('EuiDescriptionListDescription').at(3).text()).toEqual( + 'This is a description' + ); + }); +}); diff --git a/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_details.tsx b/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_details.tsx index c3edccba5a660..15b6425956c34 100644 --- a/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_details.tsx +++ b/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_details.tsx @@ -43,7 +43,12 @@ const ExceptionDetailsComponent = ({ const { comments } = exceptionItem; if (comments !== null && comments && comments.length > 0) { return ( - + {!showComments ? i18n.COMMENTS_SHOW(comments.length) : i18n.COMMENTS_HIDE(comments.length)} @@ -64,6 +69,7 @@ const ExceptionDetailsComponent = ({ listItems={descriptionList} titleProps={{ className: 'listTitle--width' }} descriptionProps={{ className: 'listDescription--width' }} + data-test-subj="exceptionsViewerItemDetails" /> {commentsSection} From 94960850386ded56ebb7986be953d0f321e4d63b Mon Sep 17 00:00:00 2001 From: Yara Tercero Date: Tue, 2 Jun 2020 22:22:46 -0400 Subject: [PATCH 07/15] finished adding tests and fixing lint issue --- .../components/exceptions/helpers.test.tsx | 81 ++-------- .../common/components/exceptions/mocks.ts | 28 +++- .../components/exceptions/translations.ts | 4 + .../viewer/exception_entries.test.tsx | 149 ++++++++++++++++++ .../exceptions/viewer/exception_entries.tsx | 24 ++- .../exceptions/viewer/index.test.tsx | 111 +++++++++++++ .../components/exceptions/viewer/index.tsx | 1 + x-pack/plugins/siem/public/graphql/types.ts | 2 + 8 files changed, 323 insertions(+), 77 deletions(-) create mode 100644 x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_entries.test.tsx create mode 100644 x-pack/plugins/siem/public/common/components/exceptions/viewer/index.test.tsx diff --git a/x-pack/plugins/siem/public/common/components/exceptions/helpers.test.tsx b/x-pack/plugins/siem/public/common/components/exceptions/helpers.test.tsx index 4b74b47d8e433..85221b9da0803 100644 --- a/x-pack/plugins/siem/public/common/components/exceptions/helpers.test.tsx +++ b/x-pack/plugins/siem/public/common/components/exceptions/helpers.test.tsx @@ -21,10 +21,8 @@ import { OperatorType, Operator, NestedExceptionEntry, - ExceptionEntry, FormattedEntry, DescriptionListItem, - ExceptionListItemSchema, } from './types'; import { isOperator, @@ -36,69 +34,7 @@ import { existsOperator, doesNotExistOperator, } from './operators'; - -const getExceptionItemMock = (): ExceptionListItemSchema => ({ - id: 'uuid_here', - item_id: 'item-id', - created_at: '2020-04-23T00:19:13.289Z', - created_by: 'user_name', - list_id: 'test-exception', - tie_breaker_id: '77fd1909-6786-428a-a671-30229a719c1f', - updated_at: '2020-04-23T00:19:13.289Z', - updated_by: 'user_name', - namespace_type: 'single', - name: '', - description: '', - comments: [ - { - user: 'user_name', - timestamp: '2020-04-23T00:19:13.289Z', - comment: 'Comment goes here', - }, - ], - _tags: ['os:windows'], - tags: [], - type: 'simple', - entries: [ - { - field: 'actingProcess.file.signer', - type: 'match', - operator: Operator.INCLUSION, - value: 'Elastic, N.V.', - }, - { - field: 'host.name', - type: 'match', - operator: Operator.EXCLUSION, - value: 'Global Signer', - }, - { - field: 'file.signature', - type: 'nested', - entries: [ - { - field: 'signer', - type: 'match', - operator: Operator.INCLUSION, - value: 'Evil', - }, - { - field: 'trusted', - type: 'match', - operator: Operator.INCLUSION, - value: 'true', - }, - ], - }, - ], -}); - -const getExceptionItemEntryMock = (): ExceptionEntry => ({ - field: 'host.name', - type: 'match', - operator: Operator.INCLUSION, - value: 'jibberjabber', -}); +import { getExceptionItemEntryMock, getExceptionItemMock } from './mocks'; describe('Exception helpers', () => { describe('#getOperatorType', () => { @@ -217,7 +153,7 @@ describe('Exception helpers', () => { describe('#determineIfIsNested', () => { test('it returns true if type NestedExceptionEntry', () => { const payload: NestedExceptionEntry = { - field: 'host.name', + field: 'actingProcess.file.signer', type: 'nested', entries: [], }; @@ -295,7 +231,7 @@ describe('Exception helpers', () => { value: 'Elastic, N.V.', }, { - field: 'host.name', + field: 'actingProcess.file.signer', type: 'match', operator: Operator.EXCLUSION, value: 'Global Signer', @@ -310,7 +246,7 @@ describe('Exception helpers', () => { value: 'Elastic, N.V.', }, { - fieldName: 'host.name', + fieldName: 'actingProcess.file.signer', isNested: false, operator: 'is not', value: 'Global Signer', @@ -363,10 +299,10 @@ describe('Exception helpers', () => { const payload = getExceptionItemEntryMock(); const formattedEntry = formatEntry({ isNested: false, item: payload }); const expected: FormattedEntry = { - fieldName: 'host.name', + fieldName: 'actingProcess.file.signer', isNested: false, operator: 'is', - value: 'jibberjabber', + value: 'Elastic, N.V.', }; expect(formattedEntry).toEqual(expected); @@ -376,10 +312,10 @@ describe('Exception helpers', () => { const payload = getExceptionItemEntryMock(); const formattedEntry = formatEntry({ isNested: true, parent: 'parent', item: payload }); const expected: FormattedEntry = { - fieldName: 'parent.host.name', + fieldName: 'parent.actingProcess.file.signer', isNested: true, operator: 'is', - value: 'jibberjabber', + value: 'Elastic, N.V.', }; expect(formattedEntry).toEqual(expected); @@ -429,6 +365,7 @@ describe('Exception helpers', () => { describe('#getDescriptionListContent', () => { test('it returns formatted description list with os if one is specified', () => { const payload = getExceptionItemMock(); + payload.description = ''; const result = getDescriptionListContent(payload); const expected: DescriptionListItem[] = [ { diff --git a/x-pack/plugins/siem/public/common/components/exceptions/mocks.ts b/x-pack/plugins/siem/public/common/components/exceptions/mocks.ts index 4135840e63d10..15aec3533b325 100644 --- a/x-pack/plugins/siem/public/common/components/exceptions/mocks.ts +++ b/x-pack/plugins/siem/public/common/components/exceptions/mocks.ts @@ -4,7 +4,33 @@ * you may not use this file except in compliance with the Elastic License. */ -import { Operator } from './types'; +import { + Operator, + ExceptionListItemSchema, + ExceptionEntry, + NestedExceptionEntry, + FormattedEntry, +} from './types'; + +export const getExceptionItemEntryMock = (): ExceptionEntry => ({ + field: 'actingProcess.file.signer', + type: 'match', + operator: Operator.INCLUSION, + value: 'Elastic, N.V.', +}); + +export const getNestedExceptionItemEntryMock = (): NestedExceptionEntry => ({ + field: 'actingProcess.file.signer', + type: 'nested', + entries: [{ ...getExceptionItemEntryMock() }], +}); + +export const getFormattedEntryMock = (isNested = false): FormattedEntry => ({ + fieldName: 'host.name', + operator: 'is', + value: 'some name', + isNested, +}); export const getExceptionItemMock = (): ExceptionListItemSchema => ({ id: 'uuid_here', diff --git a/x-pack/plugins/siem/public/common/components/exceptions/translations.ts b/x-pack/plugins/siem/public/common/components/exceptions/translations.ts index 5f7f5b2811921..b60b87d98de02 100644 --- a/x-pack/plugins/siem/public/common/components/exceptions/translations.ts +++ b/x-pack/plugins/siem/public/common/components/exceptions/translations.ts @@ -37,6 +37,10 @@ export const COMMENT = i18n.translate('xpack.siem.exceptions.commentLabel', { defaultMessage: 'Comment', }); +export const COMMENT_EVENT = i18n.translate('xpack.siem.exceptions.commentEventLabel', { + defaultMessage: 'added a comment', +}); + export const OPERATING_SYSTEM = i18n.translate('xpack.siem.exceptions.operatingSystemLabel', { defaultMessage: 'OS', }); diff --git a/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_entries.test.tsx b/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_entries.test.tsx new file mode 100644 index 0000000000000..05d31d99c90cf --- /dev/null +++ b/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_entries.test.tsx @@ -0,0 +1,149 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { ThemeProvider } from 'styled-components'; +import { mount } from 'enzyme'; +import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; + +import { ExceptionEntries } from './exception_entries'; +import { getFormattedEntryMock } from '../mocks'; + +describe('ExceptionEntries', () => { + test('it does NOT render the and badge if only one exception item entry exists', () => { + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + + expect(wrapper.find('AndOrBadge[data-test-subj="exceptionsViewerAndBadge"]')).toHaveLength(0); + }); + + test('it renders the and badge if more than one exception item exists', () => { + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + + expect(wrapper.find('AndOrBadge[data-test-subj="exceptionsViewerAndBadge"]')).toHaveLength(1); + }); + + test('it invokes "handlEdit" when edit button clicked', () => { + const mockHandleEdit = jest.fn(); + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + const editBtn = wrapper.find('[data-test-subj="exceptionsViewerEditBtn"] button').at(0); + editBtn.simulate('click'); + + expect(mockHandleEdit).toHaveBeenCalledTimes(1); + }); + + test('it invokes "handleDelete" when delete button clicked', () => { + const mockHandleDelete = jest.fn(); + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + const deleteBtn = wrapper.find('[data-test-subj="exceptionsViewerDeleteBtn"] button').at(0); + deleteBtn.simulate('click'); + + expect(mockHandleDelete).toHaveBeenCalledTimes(1); + }); + + test('it renders nested entry', () => { + const parentEntry = getFormattedEntryMock(); + parentEntry.operator = null; + parentEntry.value = null; + + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + + const parentField = wrapper + .find('EuiTableRowCell[data-test-subj="exceptionFieldNameCell"] .euiTableCellContent') + .at(0); + const parentOperator = wrapper + .find('EuiTableRowCell[data-test-subj="exceptionFieldOperatorCell"] .euiTableCellContent') + .at(0); + const parentValue = wrapper + .find('EuiTableRowCell[data-test-subj="exceptionFieldValueCell"] .euiTableCellContent') + .at(0); + + const nestedField = wrapper + .find('EuiTableRowCell[data-test-subj="exceptionFieldNameCell"] .euiTableCellContent') + .at(1); + const nestedOperator = wrapper + .find('EuiTableRowCell[data-test-subj="exceptionFieldOperatorCell"] .euiTableCellContent') + .at(1); + const nestedValue = wrapper + .find('EuiTableRowCell[data-test-subj="exceptionFieldValueCell"] .euiTableCellContent') + .at(1); + + expect(parentField.text()).toEqual('host.name'); + expect(parentOperator.text()).toEqual('—'); + expect(parentValue.text()).toEqual('—'); + + expect(nestedField.exists('EuiToolTip')).toBeTruthy(); + expect(nestedField.text()).toEqual('host.name'); + expect(nestedOperator.text()).toEqual('is'); + expect(nestedValue.text()).toEqual('some name'); + }); + + test('it renders non-nested entries', () => { + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + + const field = wrapper + .find('EuiTableRowCell[data-test-subj="exceptionFieldNameCell"] .euiTableCellContent') + .at(0); + const operator = wrapper + .find('EuiTableRowCell[data-test-subj="exceptionFieldOperatorCell"] .euiTableCellContent') + .at(0); + const value = wrapper + .find('EuiTableRowCell[data-test-subj="exceptionFieldValueCell"] .euiTableCellContent') + .at(0); + + expect(field.exists('EuiToolTip')).toBeFalsy(); + expect(field.text()).toEqual('host.name'); + expect(operator.text()).toEqual('is'); + expect(value.text()).toEqual('some name'); + }); +}); diff --git a/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_entries.tsx b/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_entries.tsx index 373ecedc95441..896d27088df7e 100644 --- a/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_entries.tsx +++ b/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_entries.tsx @@ -114,23 +114,39 @@ const ExceptionEntriesComponent = ({ {entries.length > 1 && ( - + )} - + - + {i18n.EDIT} - handleDelete()}> + {i18n.REMOVE} diff --git a/x-pack/plugins/siem/public/common/components/exceptions/viewer/index.test.tsx b/x-pack/plugins/siem/public/common/components/exceptions/viewer/index.test.tsx new file mode 100644 index 0000000000000..43c326f6c5314 --- /dev/null +++ b/x-pack/plugins/siem/public/common/components/exceptions/viewer/index.test.tsx @@ -0,0 +1,111 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { ThemeProvider } from 'styled-components'; +import { mount } from 'enzyme'; +import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; + +import { ExceptionItem } from './'; +import { getExceptionItemMock } from '../mocks'; + +describe('ExceptionItem', () => { + it('it renders ExceptionDetails and ExceptionEntries', () => { + const exceptionItem = getExceptionItemMock(); + + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + + expect(wrapper.find('ExceptionDetails')).toHaveLength(1); + expect(wrapper.find('ExceptionEntries')).toHaveLength(1); + }); + + it('it invokes "handleEdit" when edit button clicked', () => { + const mockHandleEdit = jest.fn(); + const exceptionItem = getExceptionItemMock(); + + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + + const editBtn = wrapper.find('[data-test-subj="exceptionsViewerEditBtn"] button').at(0); + editBtn.simulate('click'); + + expect(mockHandleEdit).toHaveBeenCalledTimes(1); + }); + + it('it invokes "handleDelete" when delete button clicked', () => { + const mockHandleDelete = jest.fn(); + const exceptionItem = getExceptionItemMock(); + + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + + const editBtn = wrapper.find('[data-test-subj="exceptionsViewerDeleteBtn"] button').at(0); + editBtn.simulate('click'); + + expect(mockHandleDelete).toHaveBeenCalledTimes(1); + }); + + it('it renders comment accordion closed to begin with', () => { + const mockHandleDelete = jest.fn(); + const exceptionItem = getExceptionItemMock(); + + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + + expect(wrapper.find('.euiAccordion-isOpen')).toHaveLength(0); + }); + + it('it renders comment accordion open when showComments is true', () => { + const mockHandleDelete = jest.fn(); + const exceptionItem = getExceptionItemMock(); + + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + + const commentsBtn = wrapper + .find('EuiButtonEmpty[data-test-subj="exceptionsViewerItemCommentsBtn"]') + .at(0); + commentsBtn.simulate('click'); + + expect(wrapper.find('.euiAccordion-isOpen')).toHaveLength(1); + }); +}); diff --git a/x-pack/plugins/siem/public/common/components/exceptions/viewer/index.tsx b/x-pack/plugins/siem/public/common/components/exceptions/viewer/index.tsx index a35ec3521e84c..0599d5dd93b7f 100644 --- a/x-pack/plugins/siem/public/common/components/exceptions/viewer/index.tsx +++ b/x-pack/plugins/siem/public/common/components/exceptions/viewer/index.tsx @@ -73,6 +73,7 @@ const ExceptionItemComponent = ({ id="accordion--comments" arrowDisplay="none" forceState={showComments ? 'open' : 'closed'} + data-test-subj="exceptionsViewerCommentAccordion" > diff --git a/x-pack/plugins/siem/public/graphql/types.ts b/x-pack/plugins/siem/public/graphql/types.ts index eae3887ec0636..628d56ebb647c 100644 --- a/x-pack/plugins/siem/public/graphql/types.ts +++ b/x-pack/plugins/siem/public/graphql/types.ts @@ -5405,6 +5405,8 @@ export namespace GetOneTimeline { pinnedEventsSaveObject: Maybe; + status: Maybe; + title: Maybe; timelineType: Maybe; From f3a1fba60ddb4f6e703d87cc7c98772cccdb5386 Mon Sep 17 00:00:00 2001 From: Yara Tercero Date: Wed, 3 Jun 2020 07:53:42 -0400 Subject: [PATCH 08/15] fixed test timestamps to be UTC --- .../components/exceptions/helpers.test.tsx | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/siem/public/common/components/exceptions/helpers.test.tsx b/x-pack/plugins/siem/public/common/components/exceptions/helpers.test.tsx index 85221b9da0803..2b59b758b43ad 100644 --- a/x-pack/plugins/siem/public/common/components/exceptions/helpers.test.tsx +++ b/x-pack/plugins/siem/public/common/components/exceptions/helpers.test.tsx @@ -5,6 +5,7 @@ */ import React from 'react'; import { mount } from 'enzyme'; +import moment from 'moment-timezone'; import { getOperatorType, @@ -37,6 +38,14 @@ import { import { getExceptionItemEntryMock, getExceptionItemMock } from './mocks'; describe('Exception helpers', () => { + beforeEach(() => { + moment.tz.setDefault('UTC'); + }); + + afterEach(() => { + moment.tz.setDefault('Browser'); + }); + describe('#getOperatorType', () => { test('returns operator type "match" if entry.type is "match"', () => { const payload = getExceptionItemEntryMock(); @@ -373,7 +382,7 @@ describe('Exception helpers', () => { title: 'OS', }, { - description: 'April 22nd 2020 @ 20:19:13', + description: 'April 23rd 2020 @ 00:19:13', title: 'Date created', }, { @@ -392,7 +401,7 @@ describe('Exception helpers', () => { const result = getDescriptionListContent(payload); const expected: DescriptionListItem[] = [ { - description: 'April 22nd 2020 @ 20:19:13', + description: 'April 23rd 2020 @ 00:19:13', title: 'Date created', }, { @@ -415,7 +424,7 @@ describe('Exception helpers', () => { const result = getDescriptionListContent(payload); const expected: DescriptionListItem[] = [ { - description: 'April 22nd 2020 @ 20:19:13', + description: 'April 23rd 2020 @ 00:19:13', title: 'Date created', }, { @@ -434,7 +443,7 @@ describe('Exception helpers', () => { const result = getFormattedComments(payload); expect(result[0].username).toEqual('user_name'); - expect(result[0].timestamp).toEqual('on Apr 22nd 2020 @ 20:19:13'); + expect(result[0].timestamp).toEqual('on Apr 23rd 2020 @ 00:19:13'); }); test('it returns formatted timeline icon with comment users initial', () => { From a8a68fabc074f41ecf3d6abf59f25db1a2d8fa26 Mon Sep 17 00:00:00 2001 From: Yara Tercero Date: Wed, 3 Jun 2020 09:46:01 -0400 Subject: [PATCH 09/15] fix failing test that was passing locally --- .../exception_item/exception_details.test.tsx | 230 ++++++++++++++++++ 1 file changed, 230 insertions(+) create mode 100644 x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_item/exception_details.test.tsx diff --git a/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_item/exception_details.test.tsx b/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_item/exception_details.test.tsx new file mode 100644 index 0000000000000..e468a5330c286 --- /dev/null +++ b/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_item/exception_details.test.tsx @@ -0,0 +1,230 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { ThemeProvider } from 'styled-components'; +import { mount } from 'enzyme'; +import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; +import moment from 'moment-timezone'; + +import { ExceptionDetails } from './exception_details'; +import { getExceptionItemMock } from '../../mocks'; + +describe('ExceptionDetails', () => { + beforeEach(() => { + moment.tz.setDefault('UTC'); + }); + + afterEach(() => { + moment.tz.setDefault('Browser'); + }); + + test('it renders no comments button if no comments exist', () => { + const exceptionItem = getExceptionItemMock(); + exceptionItem.comments = []; + + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + + expect( + wrapper.find('EuiButtonEmpty[data-test-subj="exceptionsViewerItemCommentsBtn"]') + ).toHaveLength(0); + }); + + test('it renders comments button if comments exist', () => { + const exceptionItem = getExceptionItemMock(); + + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + + expect( + wrapper.find('EuiButtonEmpty[data-test-subj="exceptionsViewerItemCommentsBtn"]') + ).toHaveLength(1); + }); + + test('it renders correct number of comments', () => { + const exceptionItem = getExceptionItemMock(); + + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + + expect( + wrapper.find('EuiButtonEmpty[data-test-subj="exceptionsViewerItemCommentsBtn"]').at(0).text() + ).toEqual('Show (1) Comment'); + }); + + test('it renders comments plural if more than one', () => { + const exceptionItem = getExceptionItemMock(); + exceptionItem.comments = [ + { + user: 'user_1', + timestamp: '2020-04-23T00:19:13.289Z', + comment: 'Comment goes here', + }, + { + user: 'user_2', + timestamp: '2020-04-23T00:19:13.289Z', + comment: 'Comment goes here', + }, + ]; + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + + expect( + wrapper.find('EuiButtonEmpty[data-test-subj="exceptionsViewerItemCommentsBtn"]').at(0).text() + ).toEqual('Show (2) Comments'); + }); + + test('it renders comments show text if "showComments" is false', () => { + const exceptionItem = getExceptionItemMock(); + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + + expect( + wrapper.find('EuiButtonEmpty[data-test-subj="exceptionsViewerItemCommentsBtn"]').at(0).text() + ).toEqual('Show (1) Comment'); + }); + + test('it renders comments hide text if "showComments" is true', () => { + const exceptionItem = getExceptionItemMock(); + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + + expect( + wrapper.find('EuiButtonEmpty[data-test-subj="exceptionsViewerItemCommentsBtn"]').at(0).text() + ).toEqual('Hide (1) Comment'); + }); + + test('it invokes "onCommentsClick" when comments button clicked', () => { + const mockOnCommentsClick = jest.fn(); + const exceptionItem = getExceptionItemMock(); + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + const commentsBtn = wrapper + .find('EuiButtonEmpty[data-test-subj="exceptionsViewerItemCommentsBtn"]') + .at(0); + commentsBtn.simulate('click'); + + expect(mockOnCommentsClick).toHaveBeenCalledTimes(1); + }); + + test('it renders the operating system if one is specified in the exception item', () => { + const exceptionItem = getExceptionItemMock(); + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + + expect(wrapper.find('EuiDescriptionListTitle').at(0).text()).toEqual('OS'); + expect(wrapper.find('EuiDescriptionListDescription').at(0).text()).toEqual('Windows'); + }); + + test('it renders the exception item creator', () => { + const exceptionItem = getExceptionItemMock(); + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + + expect(wrapper.find('EuiDescriptionListTitle').at(1).text()).toEqual('Date created'); + expect(wrapper.find('EuiDescriptionListDescription').at(1).text()).toEqual( + 'April 23rd 2020 @ 00:19:13' + ); + }); + + test('it renders the exception item creation timestamp', () => { + const exceptionItem = getExceptionItemMock(); + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + + expect(wrapper.find('EuiDescriptionListTitle').at(2).text()).toEqual('Created by'); + expect(wrapper.find('EuiDescriptionListDescription').at(2).text()).toEqual('user_name'); + }); + + test('it renders the description if one is included on the exception item', () => { + const exceptionItem = getExceptionItemMock(); + const wrapper = mount( + ({ eui: euiLightVars, darkMode: false })}> + + + ); + + expect(wrapper.find('EuiDescriptionListTitle').at(3).text()).toEqual('Comment'); + expect(wrapper.find('EuiDescriptionListDescription').at(3).text()).toEqual( + 'This is a description' + ); + }); +}); From f0aeda863c695580ae0d49346d69f3b36e3aa45a Mon Sep 17 00:00:00 2001 From: Yara Tercero Date: Wed, 3 Jun 2020 11:00:02 -0400 Subject: [PATCH 10/15] tests --- .../exception_item/exception_details.test.tsx | 230 ------------------ 1 file changed, 230 deletions(-) delete mode 100644 x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_item/exception_details.test.tsx diff --git a/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_item/exception_details.test.tsx b/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_item/exception_details.test.tsx deleted file mode 100644 index e468a5330c286..0000000000000 --- a/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_item/exception_details.test.tsx +++ /dev/null @@ -1,230 +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; - * you may not use this file except in compliance with the Elastic License. - */ - -import React from 'react'; -import { ThemeProvider } from 'styled-components'; -import { mount } from 'enzyme'; -import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; -import moment from 'moment-timezone'; - -import { ExceptionDetails } from './exception_details'; -import { getExceptionItemMock } from '../../mocks'; - -describe('ExceptionDetails', () => { - beforeEach(() => { - moment.tz.setDefault('UTC'); - }); - - afterEach(() => { - moment.tz.setDefault('Browser'); - }); - - test('it renders no comments button if no comments exist', () => { - const exceptionItem = getExceptionItemMock(); - exceptionItem.comments = []; - - const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - - ); - - expect( - wrapper.find('EuiButtonEmpty[data-test-subj="exceptionsViewerItemCommentsBtn"]') - ).toHaveLength(0); - }); - - test('it renders comments button if comments exist', () => { - const exceptionItem = getExceptionItemMock(); - - const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - - ); - - expect( - wrapper.find('EuiButtonEmpty[data-test-subj="exceptionsViewerItemCommentsBtn"]') - ).toHaveLength(1); - }); - - test('it renders correct number of comments', () => { - const exceptionItem = getExceptionItemMock(); - - const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - - ); - - expect( - wrapper.find('EuiButtonEmpty[data-test-subj="exceptionsViewerItemCommentsBtn"]').at(0).text() - ).toEqual('Show (1) Comment'); - }); - - test('it renders comments plural if more than one', () => { - const exceptionItem = getExceptionItemMock(); - exceptionItem.comments = [ - { - user: 'user_1', - timestamp: '2020-04-23T00:19:13.289Z', - comment: 'Comment goes here', - }, - { - user: 'user_2', - timestamp: '2020-04-23T00:19:13.289Z', - comment: 'Comment goes here', - }, - ]; - const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - - ); - - expect( - wrapper.find('EuiButtonEmpty[data-test-subj="exceptionsViewerItemCommentsBtn"]').at(0).text() - ).toEqual('Show (2) Comments'); - }); - - test('it renders comments show text if "showComments" is false', () => { - const exceptionItem = getExceptionItemMock(); - const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - - ); - - expect( - wrapper.find('EuiButtonEmpty[data-test-subj="exceptionsViewerItemCommentsBtn"]').at(0).text() - ).toEqual('Show (1) Comment'); - }); - - test('it renders comments hide text if "showComments" is true', () => { - const exceptionItem = getExceptionItemMock(); - const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - - ); - - expect( - wrapper.find('EuiButtonEmpty[data-test-subj="exceptionsViewerItemCommentsBtn"]').at(0).text() - ).toEqual('Hide (1) Comment'); - }); - - test('it invokes "onCommentsClick" when comments button clicked', () => { - const mockOnCommentsClick = jest.fn(); - const exceptionItem = getExceptionItemMock(); - const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - - ); - const commentsBtn = wrapper - .find('EuiButtonEmpty[data-test-subj="exceptionsViewerItemCommentsBtn"]') - .at(0); - commentsBtn.simulate('click'); - - expect(mockOnCommentsClick).toHaveBeenCalledTimes(1); - }); - - test('it renders the operating system if one is specified in the exception item', () => { - const exceptionItem = getExceptionItemMock(); - const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - - ); - - expect(wrapper.find('EuiDescriptionListTitle').at(0).text()).toEqual('OS'); - expect(wrapper.find('EuiDescriptionListDescription').at(0).text()).toEqual('Windows'); - }); - - test('it renders the exception item creator', () => { - const exceptionItem = getExceptionItemMock(); - const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - - ); - - expect(wrapper.find('EuiDescriptionListTitle').at(1).text()).toEqual('Date created'); - expect(wrapper.find('EuiDescriptionListDescription').at(1).text()).toEqual( - 'April 23rd 2020 @ 00:19:13' - ); - }); - - test('it renders the exception item creation timestamp', () => { - const exceptionItem = getExceptionItemMock(); - const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - - ); - - expect(wrapper.find('EuiDescriptionListTitle').at(2).text()).toEqual('Created by'); - expect(wrapper.find('EuiDescriptionListDescription').at(2).text()).toEqual('user_name'); - }); - - test('it renders the description if one is included on the exception item', () => { - const exceptionItem = getExceptionItemMock(); - const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - - ); - - expect(wrapper.find('EuiDescriptionListTitle').at(3).text()).toEqual('Comment'); - expect(wrapper.find('EuiDescriptionListDescription').at(3).text()).toEqual( - 'This is a description' - ); - }); -}); From b19237f4a5c5d221e79c6378ab754de3d9e798fc Mon Sep 17 00:00:00 2001 From: Yara Tercero Date: Wed, 3 Jun 2020 11:28:35 -0400 Subject: [PATCH 11/15] fix dates --- .../components/exceptions/viewer/exception_details.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_details.test.tsx b/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_details.test.tsx index b104e7806f9fc..02a8e5c96de6f 100644 --- a/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_details.test.tsx +++ b/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_details.test.tsx @@ -181,7 +181,7 @@ describe('ExceptionDetails', () => { expect(wrapper.find('EuiDescriptionListTitle').at(1).text()).toEqual('Date created'); expect(wrapper.find('EuiDescriptionListDescription').at(1).text()).toEqual( - 'April 22nd 2020 @ 20:19:13' + 'April 23rd 2020 @ 00:19:13' ); }); From 3a314522e7e9115eb41bb91fbe747cc5e4306f8c Mon Sep 17 00:00:00 2001 From: Yara Tercero Date: Wed, 3 Jun 2020 15:52:31 -0400 Subject: [PATCH 12/15] fixes per feedback --- .../__examples__/index.stories.tsx | 2 +- .../components/and_or_badge/index.test.tsx | 11 +- .../common/components/and_or_badge/index.tsx | 14 +- .../exceptions/__examples__/index.stories.tsx | 220 ++++++------------ .../components/exceptions/helpers.test.tsx | 14 +- .../common/components/exceptions/helpers.tsx | 30 +-- .../viewer/exception_details.test.tsx | 43 ++-- .../exceptions/viewer/exception_details.tsx | 6 +- .../viewer/exception_entries.test.tsx | 31 +-- .../exceptions/viewer/exception_entries.tsx | 18 +- .../exceptions/viewer/index.test.tsx | 7 +- .../components/exceptions/viewer/index.tsx | 22 +- 12 files changed, 179 insertions(+), 239 deletions(-) diff --git a/x-pack/plugins/siem/public/common/components/and_or_badge/__examples__/index.stories.tsx b/x-pack/plugins/siem/public/common/components/and_or_badge/__examples__/index.stories.tsx index 27ca464404445..f939cf81d1bd3 100644 --- a/x-pack/plugins/siem/public/common/components/and_or_badge/__examples__/index.stories.tsx +++ b/x-pack/plugins/siem/public/common/components/and_or_badge/__examples__/index.stories.tsx @@ -29,7 +29,7 @@ storiesOf('components/AndOrBadge', module) ({ eui: euiLightVars, darkMode: true })}> - +

{sampleText}

diff --git a/x-pack/plugins/siem/public/common/components/and_or_badge/index.test.tsx b/x-pack/plugins/siem/public/common/components/and_or_badge/index.test.tsx index 9df865193a791..3c92e06810c8e 100644 --- a/x-pack/plugins/siem/public/common/components/and_or_badge/index.test.tsx +++ b/x-pack/plugins/siem/public/common/components/and_or_badge/index.test.tsx @@ -12,15 +12,20 @@ import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; import { AndOrBadge } from './'; describe('AndOrBadge', () => { - test('it renders top and bottom antenna bars when "includeAntenas" is true', () => { + test('it renders top and bottom antenna bars when "includeAntennas" is true', () => { const wrapper = mount( ({ eui: euiLightVars, darkMode: false })}> - + ); expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('AND'); - expect(wrapper.find('EuiFlexItem[data-test-subj="and-or-badge-bar"]')).toHaveLength(2); + expect(wrapper.find('.topAndOrBadgeAntenna[data-test-subj="and-or-badge-bar"]')).toHaveLength( + 1 + ); + expect( + wrapper.find('.bottomAndOrBadgeAntenna[data-test-subj="and-or-badge-bar"]') + ).toHaveLength(1); }); test('it renders "and" when "type" is "and"', () => { diff --git a/x-pack/plugins/siem/public/common/components/and_or_badge/index.tsx b/x-pack/plugins/siem/public/common/components/and_or_badge/index.tsx index 095a151a5c283..bed1412dda28b 100644 --- a/x-pack/plugins/siem/public/common/components/and_or_badge/index.tsx +++ b/x-pack/plugins/siem/public/common/components/and_or_badge/index.tsx @@ -10,7 +10,7 @@ import styled, { css } from 'styled-components'; import * as i18n from './translations'; -const AndOrBadgeAntena = styled(EuiFlexItem)` +const AndOrBadgeAntenna = styled(EuiFlexItem)` ${({ theme }) => css` background: ${theme.eui.euiColorLightShade}; position: relative; @@ -72,28 +72,28 @@ export type AndOr = 'and' | 'or'; /** Displays AND / OR in a round badge */ // Ref: https://github.com/elastic/eui/issues/1655 -export const AndOrBadge = React.memo<{ type: AndOr; includeAntenas?: boolean }>( - ({ type, includeAntenas = false }) => { +export const AndOrBadge = React.memo<{ type: AndOr; includeAntennas?: boolean }>( + ({ type, includeAntennas = false }) => { const getBadge = () => ( {type === 'and' ? i18n.AND : i18n.OR} ); - const getBadgeWithAntenas = () => ( + const getBadgeWithAntennas = () => ( - {getBadge()} - ( ); - return includeAntenas ? getBadgeWithAntenas() : getBadge(); + return includeAntennas ? getBadgeWithAntennas() : getBadge(); } ); diff --git a/x-pack/plugins/siem/public/common/components/exceptions/__examples__/index.stories.tsx b/x-pack/plugins/siem/public/common/components/exceptions/__examples__/index.stories.tsx index 9f3ba4341c5eb..b6620ed103bc8 100644 --- a/x-pack/plugins/siem/public/common/components/exceptions/__examples__/index.stories.tsx +++ b/x-pack/plugins/siem/public/common/components/exceptions/__examples__/index.stories.tsx @@ -6,93 +6,41 @@ import { storiesOf } from '@storybook/react'; import React from 'react'; import { ThemeProvider } from 'styled-components'; -import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; +import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; import { ExceptionItem } from '../viewer'; -import { ExceptionListItemSchema, Operator } from '../types'; - -const getMockExceptionItem = (): ExceptionListItemSchema => ({ - id: '[insert_uuid_here]', - item_id: 'item-id', - created_at: '2020-04-23T00:19:13.289Z', - created_by: 'user_name', - list_id: 'test-exception', - tie_breaker_id: '77fd1909-6786-428a-a671-30229a719c1f', - updated_at: '2020-04-23T00:19:13.289Z', - updated_by: 'user_name', - name: '', - description: '', - comments: [], - tags: [], - _tags: [], - type: 'simple', - namespace_type: 'single', - entries: [ - { - field: 'actingProcess.file.signer', - type: 'match', - operator: Operator.INCLUSION, - value: 'Elastic, N.V.', - }, - { - field: 'host.name', - type: 'match', - operator: Operator.EXCLUSION, - value: 'Global Signer', - }, - ], -}); +import { Operator } from '../types'; +import { getExceptionItemMock } from '../mocks'; storiesOf('components/exceptions', module) - .add('ExceptionItem', () => { - const payload = getMockExceptionItem(); - return ( - ({ eui: euiDarkVars, darkMode: true })}> - {}} handleEdit={() => {}} /> - - ); - }) - .add('with os', () => { - const payload = getMockExceptionItem(); - payload._tags = ['os:mac,windows']; - return ( - ({ eui: euiDarkVars, darkMode: true })}> - {}} handleEdit={() => {}} /> - - ); - }) - .add('with description', () => { - const payload = getMockExceptionItem(); - payload.description = 'This is my description'; - return ( - ({ eui: euiDarkVars, darkMode: true })}> - {}} handleEdit={() => {}} /> - - ); - }) - .add('with comments', () => { - const payload = getMockExceptionItem(); - payload.comments = [ - { - user: 'yoshi', - timestamp: '2020-04-23T00:19:13.289Z', - comment: 'Comment goes here', - }, + .add('ExceptionItem/with os', () => { + const payload = getExceptionItemMock(); + payload.description = ''; + payload.comments = []; + payload.entries = [ { - user: 'elastic', - timestamp: '2020-04-23T00:19:13.289Z', - comment: - 'Doggo ipsum he made many woofs fluffer pats fat boi you are doing me a frighten very good spot, doggo super chub tungg most angery pupper I have ever seen. Porgo the neighborhood pupper such treat puggorino thicc, wrinkler big ol. Very good spot big ol adorable doggo, borking doggo. Wrinkler long doggo ur givin me a spook pupperino floofs most angery pupper I have ever seen boof many pats doge, porgo long doggo doing me a frighten smol mlem maximum borkdrive super chub. Mlem clouds many pats pats what a nice floof, heckin noodle horse.', + field: 'actingProcess.file.signer', + type: 'match', + operator: Operator.INCLUSION, + value: 'Elastic, N.V.', }, ]; + return ( - ({ eui: euiDarkVars, darkMode: true })}> - {}} handleEdit={() => {}} /> + ({ eui: euiLightVars, darkMode: false })}> + {}} + handleEdit={() => {}} + /> ); }) - .add('with nested entries', () => { - const payload = getMockExceptionItem(); + .add('ExceptionItem/with description', () => { + const payload = getExceptionItemMock(); + payload._tags = []; + payload.comments = []; payload.entries = [ { field: 'actingProcess.file.signer', @@ -100,54 +48,23 @@ storiesOf('components/exceptions', module) operator: Operator.INCLUSION, value: 'Elastic, N.V.', }, - { - field: 'host.name', - type: 'match', - operator: Operator.EXCLUSION, - value: 'Global Signer', - }, - { - field: 'file.signature', - type: 'nested', - entries: [ - { - field: 'signer', - type: 'match', - operator: Operator.INCLUSION, - value: 'Evil', - }, - { - field: 'trusted', - type: 'match', - operator: Operator.INCLUSION, - value: 'true', - }, - ], - }, ]; + return ( - ({ eui: euiDarkVars, darkMode: true })}> - {}} handleEdit={() => {}} /> + ({ eui: euiLightVars, darkMode: false })}> + {}} + handleEdit={() => {}} + /> ); }) - .add('with everything', () => { - const payload = getMockExceptionItem(); - payload._tags = ['os:mac,windows']; - payload.description = 'This is my description'; - payload.comments = [ - { - user: 'yoshi', - timestamp: '2020-04-23T00:19:13.289Z', - comment: 'Comment goes here', - }, - { - user: 'elastic', - timestamp: '2020-04-23T00:19:13.289Z', - comment: - 'Doggo ipsum he made many woofs fluffer pats fat boi you are doing me a frighten very good spot, doggo super chub tungg most angery pupper I have ever seen. Porgo the neighborhood pupper such treat puggorino thicc, wrinkler big ol. Very good spot big ol adorable doggo, borking doggo. Wrinkler long doggo ur givin me a spook pupperino floofs most angery pupper I have ever seen boof many pats doge, porgo long doggo doing me a frighten smol mlem maximum borkdrive super chub. Mlem clouds many pats pats what a nice floof, heckin noodle horse.', - }, - ]; + .add('ExceptionItem/with comments', () => { + const payload = getExceptionItemMock(); + payload._tags = []; + payload.description = ''; payload.entries = [ { field: 'actingProcess.file.signer', @@ -155,34 +72,47 @@ storiesOf('components/exceptions', module) operator: Operator.INCLUSION, value: 'Elastic, N.V.', }, - { - field: 'host.name', - type: 'match', - operator: Operator.EXCLUSION, - value: 'Global Signer', - }, - { - field: 'file.signature', - type: 'nested', - entries: [ - { - field: 'signer', - type: 'match', - operator: Operator.INCLUSION, - value: 'Evil', - }, - { - field: 'trusted', - type: 'match', - operator: Operator.INCLUSION, - value: 'true', - }, - ], - }, ]; + + return ( + ({ eui: euiLightVars, darkMode: false })}> + {}} + handleEdit={() => {}} + /> + + ); + }) + .add('ExceptionItem/with nested entries', () => { + const payload = getExceptionItemMock(); + payload._tags = []; + payload.description = ''; + payload.comments = []; + + return ( + ({ eui: euiLightVars, darkMode: false })}> + {}} + handleEdit={() => {}} + /> + + ); + }) + .add('ExceptionItem/with everything', () => { + const payload = getExceptionItemMock(); + return ( - ({ eui: euiDarkVars, darkMode: true })}> - {}} handleEdit={() => {}} /> + ({ eui: euiLightVars, darkMode: false })}> + {}} + handleEdit={() => {}} + /> ); }); diff --git a/x-pack/plugins/siem/public/common/components/exceptions/helpers.test.tsx b/x-pack/plugins/siem/public/common/components/exceptions/helpers.test.tsx index 2b59b758b43ad..223eabb0ea4ee 100644 --- a/x-pack/plugins/siem/public/common/components/exceptions/helpers.test.tsx +++ b/x-pack/plugins/siem/public/common/components/exceptions/helpers.test.tsx @@ -335,23 +335,23 @@ describe('Exception helpers', () => { test('it returns null if no operating system tag specified', () => { const result = getOperatingSystems(['some tag', 'some other tag']); - expect(result).toBeNull(); + expect(result).toEqual(''); }); test('it returns null if operating system tag malformed', () => { const result = getOperatingSystems(['some tag', 'jibberos:mac,windows', 'some other tag']); - expect(result).toBeNull(); + expect(result).toEqual(''); }); - test('it returns formatted operating systems if specified in tags', () => { - const result = getOperatingSystems(['some tag', 'os:mac,windows', 'some other tag']); + test('it returns formatted operating systems if space included in os tag', () => { + const result = getOperatingSystems(['some tag', 'os: mac', 'some other tag']); - expect(result).toEqual('Mac, Windows'); + expect(result).toEqual('Mac'); }); - test('it returns formatted operating systems if space included in os tag', () => { - const result = getOperatingSystems(['some tag', 'os: mac, windows', 'some other tag']); + test('it returns formatted operating systems if multiple os tags specified', () => { + const result = getOperatingSystems(['some tag', 'os: mac', 'some other tag', 'os:windows']); expect(result).toEqual('Mac, Windows'); }); diff --git a/x-pack/plugins/siem/public/common/components/exceptions/helpers.tsx b/x-pack/plugins/siem/public/common/components/exceptions/helpers.tsx index 2182b6cf79925..41d9ed39a326c 100644 --- a/x-pack/plugins/siem/public/common/components/exceptions/helpers.tsx +++ b/x-pack/plugins/siem/public/common/components/exceptions/helpers.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { EuiText, EuiCommentProps, EuiAvatar } from '@elastic/eui'; -import { flatten, capitalize } from 'lodash'; +import { capitalize } from 'lodash'; import moment from 'moment'; import * as i18n from './translations'; @@ -22,8 +22,6 @@ import { } from './types'; import { EXCEPTION_OPERATORS, isOperator } from './operators'; -export const getEmptyValue = () => '—'; - /** * Returns the operator type, may not need this if using io-ts types * @@ -95,7 +93,7 @@ export const getFormattedEntries = ( } }); - return flatten(formattedEntries); + return formattedEntries.flat(); }; /** @@ -122,17 +120,13 @@ export const formatEntry = ({ }; }; -export const getOperatingSystems = (tags: string[]): string | null => { - const [includesOs, osMatch] = getTagsInclude({ tags, regex: /(?<=\b)(os:[^;]*)(?=\b)/ }); - if (includesOs && osMatch !== null) { - const os = osMatch.split(':')[1]; - const items = os.split(',').map((item) => { - return capitalize(item.trim()); - }); - return items.join(', '); - } else { - return null; - } +export const getOperatingSystems = (tags: string[]): string => { + const osMatches = tags + .filter((tag) => tag.startsWith('os:')) + .map((os) => capitalize(os.substring(3).trim())) + .join(', '); + + return osMatches; }; export const getTagsInclude = ({ @@ -143,8 +137,8 @@ export const getTagsInclude = ({ regex: RegExp; }): [boolean, string | null] => { const matches: string[] | null = tags.join(';').match(regex); - const match = matches !== null ? matches[1] : null; - return [matches !== null, match]; + const match = matches != null ? matches[1] : null; + return [matches != null, match]; }; /** @@ -175,7 +169,7 @@ export const getDescriptionListContent = ( ]; return details.reduce((acc, { value, title }) => { - if (value !== null && value) { + if (value != null && value.trim() !== '') { return [...acc, { title, description: value }]; } else { return acc; diff --git a/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_details.test.tsx b/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_details.test.tsx index 02a8e5c96de6f..536d005c57b6e 100644 --- a/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_details.test.tsx +++ b/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_details.test.tsx @@ -8,11 +8,20 @@ import React from 'react'; import { ThemeProvider } from 'styled-components'; import { mount } from 'enzyme'; import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; +import moment from 'moment-timezone'; import { ExceptionDetails } from './exception_details'; import { getExceptionItemMock } from '../mocks'; describe('ExceptionDetails', () => { + beforeEach(() => { + moment.tz.setDefault('UTC'); + }); + + afterEach(() => { + moment.tz.setDefault('Browser'); + }); + test('it renders no comments button if no comments exist', () => { const exceptionItem = getExceptionItemMock(); exceptionItem.comments = []; @@ -27,9 +36,7 @@ describe('ExceptionDetails', () => { ); - expect( - wrapper.find('EuiButtonEmpty[data-test-subj="exceptionsViewerItemCommentsBtn"]') - ).toHaveLength(0); + expect(wrapper.find('[data-test-subj="exceptionsViewerItemCommentsBtn"]')).toHaveLength(0); }); test('it renders comments button if comments exist', () => { @@ -46,7 +53,7 @@ describe('ExceptionDetails', () => { ); expect( - wrapper.find('EuiButtonEmpty[data-test-subj="exceptionsViewerItemCommentsBtn"]') + wrapper.find('.euiButtonEmpty[data-test-subj="exceptionsViewerItemCommentsBtn"]') ).toHaveLength(1); }); @@ -63,9 +70,9 @@ describe('ExceptionDetails', () => { ); - expect( - wrapper.find('EuiButtonEmpty[data-test-subj="exceptionsViewerItemCommentsBtn"]').at(0).text() - ).toEqual('Show (1) Comment'); + expect(wrapper.find('[data-test-subj="exceptionsViewerItemCommentsBtn"]').at(0).text()).toEqual( + 'Show (1) Comment' + ); }); test('it renders comments plural if more than one', () => { @@ -92,9 +99,9 @@ describe('ExceptionDetails', () => { ); - expect( - wrapper.find('EuiButtonEmpty[data-test-subj="exceptionsViewerItemCommentsBtn"]').at(0).text() - ).toEqual('Show (2) Comments'); + expect(wrapper.find('[data-test-subj="exceptionsViewerItemCommentsBtn"]').at(0).text()).toEqual( + 'Show (2) Comments' + ); }); test('it renders comments show text if "showComments" is false', () => { @@ -109,9 +116,9 @@ describe('ExceptionDetails', () => { ); - expect( - wrapper.find('EuiButtonEmpty[data-test-subj="exceptionsViewerItemCommentsBtn"]').at(0).text() - ).toEqual('Show (1) Comment'); + expect(wrapper.find('[data-test-subj="exceptionsViewerItemCommentsBtn"]').at(0).text()).toEqual( + 'Show (1) Comment' + ); }); test('it renders comments hide text if "showComments" is true', () => { @@ -126,9 +133,9 @@ describe('ExceptionDetails', () => { ); - expect( - wrapper.find('EuiButtonEmpty[data-test-subj="exceptionsViewerItemCommentsBtn"]').at(0).text() - ).toEqual('Hide (1) Comment'); + expect(wrapper.find('[data-test-subj="exceptionsViewerItemCommentsBtn"]').at(0).text()).toEqual( + 'Hide (1) Comment' + ); }); test('it invokes "onCommentsClick" when comments button clicked', () => { @@ -143,9 +150,7 @@ describe('ExceptionDetails', () => { /> ); - const commentsBtn = wrapper - .find('EuiButtonEmpty[data-test-subj="exceptionsViewerItemCommentsBtn"]') - .at(0); + const commentsBtn = wrapper.find('[data-test-subj="exceptionsViewerItemCommentsBtn"]').at(0); commentsBtn.simulate('click'); expect(mockOnCommentsClick).toHaveBeenCalledTimes(1); diff --git a/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_details.tsx b/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_details.tsx index 15b6425956c34..bcaa1abb23727 100644 --- a/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_details.tsx +++ b/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_details.tsx @@ -16,7 +16,7 @@ import * as i18n from '../translations'; const StyledExceptionDetails = styled(EuiFlexItem)` ${({ theme }) => css` background-color: ${transparentize(0.95, theme.eui.euiColorPrimary)}; - padding: 16px; + padding: ${theme.eui.euiSize}; .euiDescriptionList__title.listTitle--width { width: 40%; @@ -36,12 +36,12 @@ const ExceptionDetailsComponent = ({ showComments: boolean; exceptionItem: ExceptionListItemSchema; onCommentsClick: () => void; -}) => { +}): JSX.Element => { const descriptionList = useMemo(() => getDescriptionListContent(exceptionItem), [exceptionItem]); const commentsSection = useMemo(() => { const { comments } = exceptionItem; - if (comments !== null && comments && comments.length > 0) { + if (comments.length > 0) { return ( { test('it does NOT render the and badge if only one exception item entry exists', () => { @@ -24,7 +25,7 @@ describe('ExceptionEntries', () => { ); - expect(wrapper.find('AndOrBadge[data-test-subj="exceptionsViewerAndBadge"]')).toHaveLength(0); + expect(wrapper.find('[data-test-subj="exceptionsViewerAndBadge"]')).toHaveLength(0); }); test('it renders the and badge if more than one exception item exists', () => { @@ -38,7 +39,7 @@ describe('ExceptionEntries', () => { ); - expect(wrapper.find('AndOrBadge[data-test-subj="exceptionsViewerAndBadge"]')).toHaveLength(1); + expect(wrapper.find('[data-test-subj="exceptionsViewerAndBadge"]')).toHaveLength(1); }); test('it invokes "handlEdit" when edit button clicked', () => { @@ -91,30 +92,30 @@ describe('ExceptionEntries', () => { ); const parentField = wrapper - .find('EuiTableRowCell[data-test-subj="exceptionFieldNameCell"] .euiTableCellContent') + .find('[data-test-subj="exceptionFieldNameCell"] .euiTableCellContent') .at(0); const parentOperator = wrapper - .find('EuiTableRowCell[data-test-subj="exceptionFieldOperatorCell"] .euiTableCellContent') + .find('[data-test-subj="exceptionFieldOperatorCell"] .euiTableCellContent') .at(0); const parentValue = wrapper - .find('EuiTableRowCell[data-test-subj="exceptionFieldValueCell"] .euiTableCellContent') + .find('[data-test-subj="exceptionFieldValueCell"] .euiTableCellContent') .at(0); const nestedField = wrapper - .find('EuiTableRowCell[data-test-subj="exceptionFieldNameCell"] .euiTableCellContent') + .find('[data-test-subj="exceptionFieldNameCell"] .euiTableCellContent') .at(1); const nestedOperator = wrapper - .find('EuiTableRowCell[data-test-subj="exceptionFieldOperatorCell"] .euiTableCellContent') + .find('[data-test-subj="exceptionFieldOperatorCell"] .euiTableCellContent') .at(1); const nestedValue = wrapper - .find('EuiTableRowCell[data-test-subj="exceptionFieldValueCell"] .euiTableCellContent') + .find('[data-test-subj="exceptionFieldValueCell"] .euiTableCellContent') .at(1); expect(parentField.text()).toEqual('host.name'); - expect(parentOperator.text()).toEqual('—'); - expect(parentValue.text()).toEqual('—'); + expect(parentOperator.text()).toEqual(getEmptyValue()); + expect(parentValue.text()).toEqual(getEmptyValue()); - expect(nestedField.exists('EuiToolTip')).toBeTruthy(); + expect(nestedField.exists('.euiToolTipAnchor')).toBeTruthy(); expect(nestedField.text()).toEqual('host.name'); expect(nestedOperator.text()).toEqual('is'); expect(nestedValue.text()).toEqual('some name'); @@ -132,16 +133,16 @@ describe('ExceptionEntries', () => { ); const field = wrapper - .find('EuiTableRowCell[data-test-subj="exceptionFieldNameCell"] .euiTableCellContent') + .find('[data-test-subj="exceptionFieldNameCell"] .euiTableCellContent') .at(0); const operator = wrapper - .find('EuiTableRowCell[data-test-subj="exceptionFieldOperatorCell"] .euiTableCellContent') + .find('[data-test-subj="exceptionFieldOperatorCell"] .euiTableCellContent') .at(0); const value = wrapper - .find('EuiTableRowCell[data-test-subj="exceptionFieldValueCell"] .euiTableCellContent') + .find('[data-test-subj="exceptionFieldValueCell"] .euiTableCellContent') .at(0); - expect(field.exists('EuiToolTip')).toBeFalsy(); + expect(field.exists('.euiToolTipAnchor')).toBeFalsy(); expect(field.text()).toEqual('host.name'); expect(operator.text()).toEqual('is'); expect(value.text()).toEqual('some name'); diff --git a/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_entries.tsx b/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_entries.tsx index 896d27088df7e..63bba06a03ccf 100644 --- a/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_entries.tsx +++ b/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_entries.tsx @@ -10,34 +10,32 @@ import styled, { css } from 'styled-components'; import { transparentize } from 'polished'; import { AndOrBadge } from '../../and_or_badge'; -import { getEmptyValue } from '../helpers'; +import { getEmptyValue } from '../../empty_value'; import * as i18n from '../translations'; import { FormattedEntry } from '../types'; const EntriesDetails = styled(EuiFlexItem)` - padding: 16px; + padding: ${({ theme }) => theme.eui.euiSize}; `; const StyledEditButton = styled(EuiButton)` ${({ theme }) => css` background-color: ${transparentize(0.9, theme.eui.euiColorPrimary)}; - width: 111px; border: none; - font-weight: 600; + font-weight: ${theme.eui.euiFontWeightSemiBold}; `} `; const StyledRemoveButton = styled(EuiButton)` ${({ theme }) => css` background-color: ${transparentize(0.9, theme.eui.euiColorDanger)}; - width: 111px; border: none; - font-weight: 600; + font-weight: ${theme.eui.euiFontWeightSemiBold}; `} `; const AndOrBadgeContainer = styled(EuiFlexItem)` - padding-top: 32px; + padding-top: ${({ theme }) => theme.eui.euiSizeXL}; `; interface ExceptionEntriesComponentProps { @@ -50,7 +48,7 @@ const ExceptionEntriesComponent = ({ entries, handleDelete, handleEdit, -}: ExceptionEntriesComponentProps) => { +}: ExceptionEntriesComponentProps): JSX.Element => { const columns = useMemo( () => [ { @@ -61,7 +59,7 @@ const ExceptionEntriesComponent = ({ 'data-test-subj': 'exceptionFieldNameCell', width: '30%', render: (value: string | null, data: FormattedEntry) => { - if (value !== null && data.isNested) { + if (value != null && data.isNested) { return ( <> @@ -114,7 +112,7 @@ const ExceptionEntriesComponent = ({ {entries.length > 1 && ( - + )} diff --git a/x-pack/plugins/siem/public/common/components/exceptions/viewer/index.test.tsx b/x-pack/plugins/siem/public/common/components/exceptions/viewer/index.test.tsx index 43c326f6c5314..7d3b7195def80 100644 --- a/x-pack/plugins/siem/public/common/components/exceptions/viewer/index.test.tsx +++ b/x-pack/plugins/siem/public/common/components/exceptions/viewer/index.test.tsx @@ -19,6 +19,7 @@ describe('ExceptionItem', () => { const wrapper = mount( ({ eui: euiLightVars, darkMode: false })}> { const wrapper = mount( ({ eui: euiLightVars, darkMode: false })}> { const wrapper = mount( ({ eui: euiLightVars, darkMode: false })}> { const wrapper = mount( ({ eui: euiLightVars, darkMode: false })}> { const wrapper = mount( ({ eui: euiLightVars, darkMode: false })}> { ); const commentsBtn = wrapper - .find('EuiButtonEmpty[data-test-subj="exceptionsViewerItemCommentsBtn"]') + .find('.euiButtonEmpty[data-test-subj="exceptionsViewerItemCommentsBtn"]') .at(0); commentsBtn.simulate('click'); diff --git a/x-pack/plugins/siem/public/common/components/exceptions/viewer/index.tsx b/x-pack/plugins/siem/public/common/components/exceptions/viewer/index.tsx index 0599d5dd93b7f..ab22cb364c539 100644 --- a/x-pack/plugins/siem/public/common/components/exceptions/viewer/index.tsx +++ b/x-pack/plugins/siem/public/common/components/exceptions/viewer/index.tsx @@ -14,29 +14,31 @@ import { getFormattedEntries, getFormattedComments } from '../helpers'; import { FormattedEntry, ExceptionListItemSchema } from '../types'; const MyFlexItem = styled(EuiFlexItem)` - &.comments--show { - padding: 16px; - border-top: 1px solid #d3dae6; - } + &.comments--show { + padding: ${({ theme }) => theme.eui.euiSize}; + border-top: ${({ theme }) => `${theme.eui.euiBorderThin}`} + `; interface ExceptionItemProps { exceptionItem: ExceptionListItemSchema; + commentsAccordionId: string; handleDelete: ({ id }: { id: string }) => void; handleEdit: (item: ExceptionListItemSchema) => void; } const ExceptionItemComponent = ({ exceptionItem, + commentsAccordionId, handleDelete, handleEdit, -}: ExceptionItemProps) => { +}: ExceptionItemProps): JSX.Element => { const [entryItems, setEntryItems] = useState([]); - const [showComments, setShowComments] = useState(false); + const [showComments, setShowComments] = useState(false); useEffect(() => { - const formattedEntries = getFormattedEntries(exceptionItem.entries ?? []); - setEntryItems([...formattedEntries]); + const formattedEntries = getFormattedEntries(exceptionItem.entries); + setEntryItems(formattedEntries); }, [exceptionItem.entries]); const onDelete = useCallback(() => { @@ -52,7 +54,7 @@ const ExceptionItemComponent = ({ }, [setShowComments, showComments]); const formattedComments = useMemo(() => { - return getFormattedComments(exceptionItem.comments ?? []); + return getFormattedComments(exceptionItem.comments); }, [exceptionItem]); return ( @@ -70,7 +72,7 @@ const ExceptionItemComponent = ({ Date: Wed, 3 Jun 2020 16:19:26 -0400 Subject: [PATCH 13/15] cleanup --- .../common/components/exceptions/helpers.tsx | 2 +- .../exceptions/viewer/exception_details.tsx | 2 +- .../exceptions/viewer/exception_entries.tsx | 11 +++++++++-- .../components/exceptions/viewer/index.tsx | 19 +++++++++++++------ 4 files changed, 24 insertions(+), 10 deletions(-) diff --git a/x-pack/plugins/siem/public/common/components/exceptions/helpers.tsx b/x-pack/plugins/siem/public/common/components/exceptions/helpers.tsx index 41d9ed39a326c..bd22de636bf6c 100644 --- a/x-pack/plugins/siem/public/common/components/exceptions/helpers.tsx +++ b/x-pack/plugins/siem/public/common/components/exceptions/helpers.tsx @@ -107,7 +107,7 @@ export const formatEntry = ({ isNested: boolean; parent?: string; item: ExceptionEntry; -}) => { +}): FormattedEntry => { const operator = getExceptionOperatorSelect(item); const operatorType = getOperatorType(item); const value = operatorType === OperatorType.EXISTS ? null : item.value; diff --git a/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_details.tsx b/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_details.tsx index bcaa1abb23727..8745e80a21548 100644 --- a/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_details.tsx +++ b/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_details.tsx @@ -39,7 +39,7 @@ const ExceptionDetailsComponent = ({ }): JSX.Element => { const descriptionList = useMemo(() => getDescriptionListContent(exceptionItem), [exceptionItem]); - const commentsSection = useMemo(() => { + const commentsSection = useMemo((): JSX.Element => { const { comments } = exceptionItem; if (comments.length > 0) { return ( diff --git a/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_entries.tsx b/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_entries.tsx index 63bba06a03ccf..d0236adc27c6c 100644 --- a/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_entries.tsx +++ b/x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_entries.tsx @@ -4,7 +4,14 @@ * you may not use this file except in compliance with the Elastic License. */ -import { EuiBasicTable, EuiIconTip, EuiFlexItem, EuiFlexGroup, EuiButton } from '@elastic/eui'; +import { + EuiBasicTable, + EuiIconTip, + EuiFlexItem, + EuiFlexGroup, + EuiButton, + EuiTableFieldDataColumnType, +} from '@elastic/eui'; import React, { useMemo } from 'react'; import styled, { css } from 'styled-components'; import { transparentize } from 'polished'; @@ -50,7 +57,7 @@ const ExceptionEntriesComponent = ({ handleEdit, }: ExceptionEntriesComponentProps): JSX.Element => { const columns = useMemo( - () => [ + (): Array> => [ { field: 'fieldName', name: 'Field', diff --git a/x-pack/plugins/siem/public/common/components/exceptions/viewer/index.tsx b/x-pack/plugins/siem/public/common/components/exceptions/viewer/index.tsx index ab22cb364c539..f4cdce62f56b3 100644 --- a/x-pack/plugins/siem/public/common/components/exceptions/viewer/index.tsx +++ b/x-pack/plugins/siem/public/common/components/exceptions/viewer/index.tsx @@ -4,7 +4,14 @@ * you may not use this file except in compliance with the Elastic License. */ -import { EuiPanel, EuiFlexGroup, EuiCommentList, EuiAccordion, EuiFlexItem } from '@elastic/eui'; +import { + EuiPanel, + EuiFlexGroup, + EuiCommentProps, + EuiCommentList, + EuiAccordion, + EuiFlexItem, +} from '@elastic/eui'; import React, { useEffect, useState, useMemo, useCallback } from 'react'; import styled from 'styled-components'; @@ -36,24 +43,24 @@ const ExceptionItemComponent = ({ const [entryItems, setEntryItems] = useState([]); const [showComments, setShowComments] = useState(false); - useEffect(() => { + useEffect((): void => { const formattedEntries = getFormattedEntries(exceptionItem.entries); setEntryItems(formattedEntries); }, [exceptionItem.entries]); - const onDelete = useCallback(() => { + const onDelete = useCallback((): void => { handleDelete({ id: exceptionItem.id }); }, [handleDelete, exceptionItem]); - const onEdit = useCallback(() => { + const onEdit = useCallback((): void => { handleEdit(exceptionItem); }, [handleEdit, exceptionItem]); - const onCommentsClick = useCallback(() => { + const onCommentsClick = useCallback((): void => { setShowComments(!showComments); }, [setShowComments, showComments]); - const formattedComments = useMemo(() => { + const formattedComments = useMemo((): EuiCommentProps[] => { return getFormattedComments(exceptionItem.comments); }, [exceptionItem]); From c24c1ff665cdf76cb1cc34b1393cc9609d29abf7 Mon Sep 17 00:00:00 2001 From: Yara Tercero Date: Wed, 3 Jun 2020 17:26:27 -0400 Subject: [PATCH 14/15] updated tests --- .../public/common/components/and_or_badge/index.test.tsx | 8 ++------ .../siem/public/common/components/and_or_badge/index.tsx | 4 ++-- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/x-pack/plugins/siem/public/common/components/and_or_badge/index.test.tsx b/x-pack/plugins/siem/public/common/components/and_or_badge/index.test.tsx index 3c92e06810c8e..ed918a59a514a 100644 --- a/x-pack/plugins/siem/public/common/components/and_or_badge/index.test.tsx +++ b/x-pack/plugins/siem/public/common/components/and_or_badge/index.test.tsx @@ -20,12 +20,8 @@ describe('AndOrBadge', () => { ); expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('AND'); - expect(wrapper.find('.topAndOrBadgeAntenna[data-test-subj="and-or-badge-bar"]')).toHaveLength( - 1 - ); - expect( - wrapper.find('.bottomAndOrBadgeAntenna[data-test-subj="and-or-badge-bar"]') - ).toHaveLength(1); + expect(wrapper.find('EuiFlexItem[data-test-subj="andOrBadgeBarTop"]')).toHaveLength(1); + expect(wrapper.find('EuiFlexItem[data-test-subj="andOrBadgeBarBottom"]')).toHaveLength(1); }); test('it renders "and" when "type" is "and"', () => { diff --git a/x-pack/plugins/siem/public/common/components/and_or_badge/index.tsx b/x-pack/plugins/siem/public/common/components/and_or_badge/index.tsx index bed1412dda28b..ba3f880d9757e 100644 --- a/x-pack/plugins/siem/public/common/components/and_or_badge/index.tsx +++ b/x-pack/plugins/siem/public/common/components/and_or_badge/index.tsx @@ -89,13 +89,13 @@ export const AndOrBadge = React.memo<{ type: AndOr; includeAntennas?: boolean }> > {getBadge()} From 878547eb39e287b43ca15d69d42ff6ff25ee3485 Mon Sep 17 00:00:00 2001 From: Yara Tercero Date: Thu, 4 Jun 2020 10:23:07 -0400 Subject: [PATCH 15/15] updated translations to use securitySolution after rename --- .../common/components/exceptions/operators.ts | 16 ++++++------ .../components/exceptions/translations.ts | 25 +++++++++++-------- 2 files changed, 22 insertions(+), 19 deletions(-) diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/operators.ts b/x-pack/plugins/security_solution/public/common/components/exceptions/operators.ts index 9b553c5af9bd5..19c726893e682 100644 --- a/x-pack/plugins/security_solution/public/common/components/exceptions/operators.ts +++ b/x-pack/plugins/security_solution/public/common/components/exceptions/operators.ts @@ -8,7 +8,7 @@ import { i18n } from '@kbn/i18n'; import { OperatorOption, OperatorType, Operator } from './types'; export const isOperator: OperatorOption = { - message: i18n.translate('xpack.siem.exceptions.isOperatorLabel', { + message: i18n.translate('xpack.securitySolution.exceptions.isOperatorLabel', { defaultMessage: 'is', }), value: 'is', @@ -17,7 +17,7 @@ export const isOperator: OperatorOption = { }; export const isNotOperator: OperatorOption = { - message: i18n.translate('xpack.siem.exceptions.isNotOperatorLabel', { + message: i18n.translate('xpack.securitySolution.exceptions.isNotOperatorLabel', { defaultMessage: 'is not', }), value: 'is_not', @@ -26,7 +26,7 @@ export const isNotOperator: OperatorOption = { }; export const isOneOfOperator: OperatorOption = { - message: i18n.translate('xpack.siem.exceptions.isOneOfOperatorLabel', { + message: i18n.translate('xpack.securitySolution.exceptions.isOneOfOperatorLabel', { defaultMessage: 'is one of', }), value: 'is_one_of', @@ -35,7 +35,7 @@ export const isOneOfOperator: OperatorOption = { }; export const isNotOneOfOperator: OperatorOption = { - message: i18n.translate('xpack.siem.exceptions.isNotOneOfOperatorLabel', { + message: i18n.translate('xpack.securitySolution.exceptions.isNotOneOfOperatorLabel', { defaultMessage: 'is not one of', }), value: 'is_not_one_of', @@ -44,7 +44,7 @@ export const isNotOneOfOperator: OperatorOption = { }; export const existsOperator: OperatorOption = { - message: i18n.translate('xpack.siem.exceptions.existsOperatorLabel', { + message: i18n.translate('xpack.securitySolution.exceptions.existsOperatorLabel', { defaultMessage: 'exists', }), value: 'exists', @@ -53,7 +53,7 @@ export const existsOperator: OperatorOption = { }; export const doesNotExistOperator: OperatorOption = { - message: i18n.translate('xpack.siem.exceptions.doesNotExistOperatorLabel', { + message: i18n.translate('xpack.securitySolution.exceptions.doesNotExistOperatorLabel', { defaultMessage: 'does not exist', }), value: 'does_not_exist', @@ -62,7 +62,7 @@ export const doesNotExistOperator: OperatorOption = { }; export const isInListOperator: OperatorOption = { - message: i18n.translate('xpack.siem.exceptions.isInListOperatorLabel', { + message: i18n.translate('xpack.securitySolution.exceptions.isInListOperatorLabel', { defaultMessage: 'is in list', }), value: 'is_in_list', @@ -71,7 +71,7 @@ export const isInListOperator: OperatorOption = { }; export const isNotInListOperator: OperatorOption = { - message: i18n.translate('xpack.siem.exceptions.isNotInListOperatorLabel', { + message: i18n.translate('xpack.securitySolution.exceptions.isNotInListOperatorLabel', { defaultMessage: 'is not in list', }), value: 'is_not_in_list', diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/translations.ts b/x-pack/plugins/security_solution/public/common/components/exceptions/translations.ts index b60b87d98de02..704849430daf9 100644 --- a/x-pack/plugins/security_solution/public/common/components/exceptions/translations.ts +++ b/x-pack/plugins/security_solution/public/common/components/exceptions/translations.ts @@ -5,42 +5,45 @@ */ import { i18n } from '@kbn/i18n'; -export const EDIT = i18n.translate('xpack.siem.exceptions.editButtonLabel', { +export const EDIT = i18n.translate('xpack.securitySolution.exceptions.editButtonLabel', { defaultMessage: 'Edit', }); -export const REMOVE = i18n.translate('xpack.siem.exceptions.removeButtonLabel', { +export const REMOVE = i18n.translate('xpack.securitySolution.exceptions.removeButtonLabel', { defaultMessage: 'Remove', }); export const COMMENTS_SHOW = (comments: number) => - i18n.translate('xpack.siem.exceptions.showCommentsLabel', { + i18n.translate('xpack.securitySolution.exceptions.showCommentsLabel', { values: { comments }, defaultMessage: 'Show ({comments}) {comments, plural, =1 {Comment} other {Comments}}', }); export const COMMENTS_HIDE = (comments: number) => - i18n.translate('xpack.siem.exceptions.hideCommentsLabel', { + i18n.translate('xpack.securitySolution.exceptions.hideCommentsLabel', { values: { comments }, defaultMessage: 'Hide ({comments}) {comments, plural, =1 {Comment} other {Comments}}', }); -export const DATE_CREATED = i18n.translate('xpack.siem.exceptions.dateCreatedLabel', { +export const DATE_CREATED = i18n.translate('xpack.securitySolution.exceptions.dateCreatedLabel', { defaultMessage: 'Date created', }); -export const CREATED_BY = i18n.translate('xpack.siem.exceptions.createdByLabel', { +export const CREATED_BY = i18n.translate('xpack.securitySolution.exceptions.createdByLabel', { defaultMessage: 'Created by', }); -export const COMMENT = i18n.translate('xpack.siem.exceptions.commentLabel', { +export const COMMENT = i18n.translate('xpack.securitySolution.exceptions.commentLabel', { defaultMessage: 'Comment', }); -export const COMMENT_EVENT = i18n.translate('xpack.siem.exceptions.commentEventLabel', { +export const COMMENT_EVENT = i18n.translate('xpack.securitySolution.exceptions.commentEventLabel', { defaultMessage: 'added a comment', }); -export const OPERATING_SYSTEM = i18n.translate('xpack.siem.exceptions.operatingSystemLabel', { - defaultMessage: 'OS', -}); +export const OPERATING_SYSTEM = i18n.translate( + 'xpack.securitySolution.exceptions.operatingSystemLabel', + { + defaultMessage: 'OS', + } +);