Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[SIEM][Exceptions] - Part 1 of ExceptionViewer UI #68027

Merged
merged 17 commits into from
Jun 4, 2020
Merged
Show file tree
Hide file tree
Changes from 8 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -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', () => (
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: true })}>
<AndOrBadge type="and" />
</ThemeProvider>
))
.add('or', () => (
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: true })}>
<AndOrBadge type="or" />
</ThemeProvider>
))
yctercero marked this conversation as resolved.
Show resolved Hide resolved
.add('antennas', () => (
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: true })}>
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<AndOrBadge type="and" includeAntenas />
</EuiFlexItem>
<EuiFlexItem>
<p>{sampleText}</p>
</EuiFlexItem>
</EuiFlexGroup>
</ThemeProvider>
));
Original file line number Diff line number Diff line change
@@ -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', () => {
yctercero marked this conversation as resolved.
Show resolved Hide resolved
const wrapper = mount(
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
<AndOrBadge includeAntenas type="and" />
</ThemeProvider>
);

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(
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
<AndOrBadge type="and" />
</ThemeProvider>
);

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(
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
<AndOrBadge type="or" />
</ThemeProvider>
);

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);
});
});
108 changes: 108 additions & 0 deletions x-pack/plugins/siem/public/common/components/and_or_badge/index.tsx
Original file line number Diff line number Diff line change
@@ -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)`
yctercero marked this conversation as resolved.
Show resolved Hide resolved
yctercero marked this conversation as resolved.
Show resolved Hide resolved
${({ theme }) => css`
background: ${theme.eui.euiColorLightShade};
position: relative;
width: 2px;
&:after {
background: ${theme.eui.euiColorLightShade};
content: '';
height: 8px;
right: -4px;
position: absolute;
width: 9px;
yctercero marked this conversation as resolved.
Show resolved Hide resolved
clip-path: circle();
}
&.topAndOrBadgeAntenna {
yctercero marked this conversation as resolved.
Show resolved Hide resolved
&:after {
top: -1px;
}
}
&.bottomAndOrBadgeAntenna {
&:after {
bottom: -1px;
}
}
&.euiFlexItem {
yctercero marked this conversation as resolved.
Show resolved Hide resolved
margin: 0 12px 0 0;
}
`}
`;

const EuiFlexItemWrapper = styled(EuiFlexItem)`
&.euiFlexItem {
yctercero marked this conversation as resolved.
Show resolved Hide resolved
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 = () => (
yctercero marked this conversation as resolved.
Show resolved Hide resolved
<RoundedBadge data-test-subj="and-or-badge" color="hollow">
{type === 'and' ? i18n.AND : i18n.OR}
</RoundedBadge>
);

const getBadgeWithAntenas = () => (
yctercero marked this conversation as resolved.
Show resolved Hide resolved
<EuiFlexGroup
className="andBadgeContainer"
gutterSize="none"
direction="column"
alignItems="center"
>
<AndOrBadgeAntena
className="topAndOrBadgeAntenna"
data-test-subj="and-or-badge-bar"
yctercero marked this conversation as resolved.
Show resolved Hide resolved
grow={1}
/>
<EuiFlexItemWrapper grow={false}>{getBadge()}</EuiFlexItemWrapper>
<AndOrBadgeAntena
className="bottomAndOrBadgeAntenna"
data-test-subj="and-or-badge-bar"
grow={1}
/>
</EuiFlexGroup>
);

return includeAntenas ? getBadgeWithAntenas() : getBadge();
}
);

AndOrBadge.displayName = 'AndOrBadge';
Original file line number Diff line number Diff line change
@@ -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',
},
],
});
Copy link
Contributor

@FrankHassanabad FrankHassanabad Jun 2, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You might be able to pull the mock items from the lists plugin since they live within the common section and be able to avoid adding another mock item here. The less mock data items we have, the less areas we have to update when we change structures.

If you have to expand that mock to include entries which it might not have:

x-pack/plugins/lists/common/schemas/response/exception_list_schema.mock.ts

I think that is ok, as well. Otherwise if this is just very specific for here, it is ok to leave IMHO.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yea, I should've added a to do there. This was just temporary until the structures are updated in the lists plugin. But def, will remove these then.


storiesOf('components/exceptions', module)
.add('ExceptionItem', () => {
const payload = getMockExceptionItem();
return (
<ThemeProvider theme={() => ({ eui: euiDarkVars, darkMode: true })}>
<ExceptionItem exceptionItem={payload} handleDelete={() => {}} handleEdit={() => {}} />
</ThemeProvider>
);
})
.add('with os', () => {
const payload = getMockExceptionItem();
payload._tags = ['os:mac,windows'];
return (
<ThemeProvider theme={() => ({ eui: euiDarkVars, darkMode: true })}>
<ExceptionItem exceptionItem={payload} handleDelete={() => {}} handleEdit={() => {}} />
</ThemeProvider>
);
})
.add('with description', () => {
const payload = getMockExceptionItem();
payload.description = 'This is my description';
return (
<ThemeProvider theme={() => ({ eui: euiDarkVars, darkMode: true })}>
<ExceptionItem exceptionItem={payload} handleDelete={() => {}} handleEdit={() => {}} />
</ThemeProvider>
);
})
.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 (
<ThemeProvider theme={() => ({ eui: euiDarkVars, darkMode: true })}>
<ExceptionItem exceptionItem={payload} handleDelete={() => {}} handleEdit={() => {}} />
</ThemeProvider>
);
})
.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 (
<ThemeProvider theme={() => ({ eui: euiDarkVars, darkMode: true })}>
<ExceptionItem exceptionItem={payload} handleDelete={() => {}} handleEdit={() => {}} />
</ThemeProvider>
);
})
.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 (
<ThemeProvider theme={() => ({ eui: euiDarkVars, darkMode: true })}>
<ExceptionItem exceptionItem={payload} handleDelete={() => {}} handleEdit={() => {}} />
</ThemeProvider>
);
});
Loading