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

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', () => (
+    <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: true })}>
+      <AndOrBadge type="and" />
+    </ThemeProvider>
+  ))
+  .add('or', () => (
+    <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: true })}>
+      <AndOrBadge type="or" />
+    </ThemeProvider>
+  ))
+  .add('antennas', () => (
+    <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: true })}>
+      <EuiFlexGroup>
+        <EuiFlexItem grow={false}>
+          <AndOrBadge type="and" includeAntenas />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <p>{sampleText}</p>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </ThemeProvider>
+  ));

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(
+      <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);
+  });
+});

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 = () => (
+      <RoundedBadge data-test-subj="and-or-badge" color="hollow">
+        {type === 'and' ? i18n.AND : i18n.OR}
+      </RoundedBadge>
+    );
+
+    const getBadgeWithAntenas = () => (
+      <EuiFlexGroup
+        className="andBadgeContainer"
+        gutterSize="none"
+        direction="column"
+        alignItems="center"
+      >
+        <AndOrBadgeAntena
+          className="topAndOrBadgeAntenna"
+          data-test-subj="and-or-badge-bar"
+          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';

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 (
+      <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>
+    );
+  });