From aea4811750b4db78c54e3ab4755f2dbdb6f8ad35 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Wed, 4 Mar 2020 17:06:33 +0200 Subject: [PATCH] [SIEM][CASE] Configure cases: Closure Options & Field Mappings UI (#59062) * Create closure options radio group * Create closure options component * Refactor structure * Create field mapping row * Create field component * Show closure options * Show field mapping * Translate editUpdate options * Add more siem fields * Remove unnecessary export * Leave spaces between sections * Fix callbacks * Better return * Fix callback * Move thirdPartyFields to parent component * Rename constant Co-authored-by: Elastic Machine --- .../configure_cases/closure_options.tsx | 27 +++++ .../configure_cases/closure_options_radio.tsx | 43 ++++++++ .../index.tsx => connectors_dropdown.tsx} | 9 +- .../configure_cases/field_mapping.tsx | 66 ++++++++++++ .../configure_cases/field_mapping_row.tsx | 73 +++++++++++++ .../configure_cases/translations.ts | 100 ++++++++++++++++++ .../public/pages/case/configure_cases.tsx | 14 ++- 7 files changed, 326 insertions(+), 6 deletions(-) create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options.tsx create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options_radio.tsx rename x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/{connectors_dropdown/index.tsx => connectors_dropdown.tsx} (81%) create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping.tsx create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping_row.tsx diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options.tsx new file mode 100644 index 0000000000000..3a2ef3bc21721 --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options.tsx @@ -0,0 +1,27 @@ +/* + * 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 { EuiDescribedFormGroup, EuiFormRow } from '@elastic/eui'; + +import * as i18n from './translations'; +import { ClosureOptionsRadio } from './closure_options_radio'; + +const ClosureOptionsComponent: React.FC = () => { + return ( + {i18n.CASE_CLOSURE_OPTIONS_TITLE}} + description={i18n.CASE_CLOSURE_OPTIONS_DESC} + > + + + + + ); +}; + +export const ClosureOptions = React.memo(ClosureOptionsComponent); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options_radio.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options_radio.tsx new file mode 100644 index 0000000000000..5d1476acee5b1 --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options_radio.tsx @@ -0,0 +1,43 @@ +/* + * 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, { useState } from 'react'; +import { EuiRadioGroup } from '@elastic/eui'; + +import * as i18n from './translations'; + +const ID_PREFIX = 'closure_options'; +const DEFAULT_RADIO = `${ID_PREFIX}_manual`; + +const radios = [ + { + id: DEFAULT_RADIO, + label: i18n.CASE_CLOSURE_OPTIONS_MANUAL, + }, + { + id: `${ID_PREFIX}_new_incident`, + label: i18n.CASE_CLOSURE_OPTIONS_NEW_INCIDENT, + }, + { + id: `${ID_PREFIX}_closed_incident`, + label: i18n.CASE_CLOSURE_OPTIONS_CLOSED_INCIDENT, + }, +]; + +const ClosureOptionsRadioComponent: React.FC = () => { + const [selectedClosure, setSelectedClosure] = useState(DEFAULT_RADIO); + + return ( + + ); +}; + +export const ClosureOptionsRadio = React.memo(ClosureOptionsRadioComponent); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown/index.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.tsx similarity index 81% rename from x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown/index.tsx rename to x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.tsx index c00baa04d78a0..d43935deda395 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown/index.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.tsx @@ -4,11 +4,11 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { useState, useCallback } from 'react'; +import React, { useState } from 'react'; import { EuiSuperSelect, EuiIcon, EuiSuperSelectOption } from '@elastic/eui'; import styled from 'styled-components'; -import * as i18n from '../translations'; +import * as i18n from './translations'; const ICON_SIZE = 'm'; @@ -40,15 +40,14 @@ const connectors: Array> = [ ]; const ConnectorsDropdownComponent: React.FC = () => { - const [selectedConnector, selectConnector] = useState(connectors[0].value); - const onChange = useCallback(connector => selectConnector(connector), [selectedConnector]); + const [selectedConnector, setSelectedConnector] = useState(connectors[0].value); return ( ); }; diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping.tsx new file mode 100644 index 0000000000000..814f1bfd75ae4 --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping.tsx @@ -0,0 +1,66 @@ +/* + * 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 { EuiDescribedFormGroup, EuiFormRow, EuiFlexItem, EuiFlexGroup } from '@elastic/eui'; +import styled from 'styled-components'; + +import * as i18n from './translations'; +import { FieldMappingRow } from './field_mapping_row'; + +const FieldRowWrapper = styled.div` + margin-top: 8px; + font-size: 14px; +`; + +const supportedThirdPartyFields = [ + { + value: 'short_description', + inputDisplay: {'Short Description'}, + }, + { + value: 'comment', + inputDisplay: {'Comment'}, + }, + { + value: 'tags', + inputDisplay: {'Tags'}, + }, + { + value: 'description', + inputDisplay: {'Description'}, + }, +]; + +const FieldMappingComponent: React.FC = () => ( + {i18n.FIELD_MAPPING_TITLE}} + description={i18n.FIELD_MAPPING_DESC} + > + + + + {i18n.FIELD_MAPPING_FIRST_COL} + + + {i18n.FIELD_MAPPING_SECOND_COL} + + + {i18n.FIELD_MAPPING_THIRD_COL} + + + + + + + + + + +); + +export const FieldMapping = React.memo(FieldMappingComponent); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping_row.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping_row.tsx new file mode 100644 index 0000000000000..0e446ad9bbe89 --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping_row.tsx @@ -0,0 +1,73 @@ +/* + * 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, { useState } from 'react'; +import { EuiFlexItem, EuiFlexGroup, EuiSuperSelect, EuiIcon } from '@elastic/eui'; + +import * as i18n from './translations'; + +interface ThirdPartyField { + value: string; + inputDisplay: JSX.Element; +} +interface RowProps { + siemField: string; + thirdPartyOptions: ThirdPartyField[]; +} + +const editUpdateOptions = [ + { + value: 'nothing', + inputDisplay: {i18n.FIELD_MAPPING_EDIT_NOTHING}, + 'data-test-subj': 'edit-update-option-nothing', + }, + { + value: 'overwrite', + inputDisplay: {i18n.FIELD_MAPPING_EDIT_OVERWRITE}, + 'data-test-subj': 'edit-update-option-overwrite', + }, + { + value: 'append', + inputDisplay: {i18n.FIELD_MAPPING_EDIT_APPEND}, + 'data-test-subj': 'edit-update-option-append', + }, +]; + +const FieldMappingRowComponent: React.FC = ({ siemField, thirdPartyOptions }) => { + const [selectedEditUpdate, setSelectedEditUpdate] = useState(editUpdateOptions[0].value); + const [selectedThirdParty, setSelectedThirdParty] = useState(thirdPartyOptions[0].value); + + return ( + + + + + {siemField} + + + + + + + + + + + + + + ); +}; + +export const FieldMappingRow = React.memo(FieldMappingRowComponent); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/translations.ts b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/translations.ts index 54d256b143f60..ca2d878c58ee3 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/translations.ts +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/translations.ts @@ -35,3 +35,103 @@ export const NO_CONNECTOR = i18n.translate('xpack.siem.case.configureCases.noCon export const ADD_NEW_CONNECTOR = i18n.translate('xpack.siem.case.configureCases.addNewConnector', { defaultMessage: 'Add new connector option', }); + +export const CASE_CLOSURE_OPTIONS_TITLE = i18n.translate( + 'xpack.siem.case.configureCases.caseClosureOptionsTitle', + { + defaultMessage: 'Cases Closures', + } +); + +export const CASE_CLOSURE_OPTIONS_DESC = i18n.translate( + 'xpack.siem.case.configureCases.caseClosureOptionsDesc', + { + defaultMessage: + 'Define how you wish SIEM cases to be closed. Automated case closures require an established connection to a third-party incident management system.', + } +); + +export const CASE_CLOSURE_OPTIONS_LABEL = i18n.translate( + 'xpack.siem.case.configureCases.caseClosureOptionsLabel', + { + defaultMessage: 'Case closure options', + } +); + +export const CASE_CLOSURE_OPTIONS_MANUAL = i18n.translate( + 'xpack.siem.case.configureCases.caseClosureOptionsManual', + { + defaultMessage: 'Manually close SIEM cases', + } +); + +export const CASE_CLOSURE_OPTIONS_NEW_INCIDENT = i18n.translate( + 'xpack.siem.case.configureCases.caseClosureOptionsNewIncident', + { + defaultMessage: 'Automatically close SIEM cases when pushing new incident to third-party', + } +); + +export const CASE_CLOSURE_OPTIONS_CLOSED_INCIDENT = i18n.translate( + 'xpack.siem.case.configureCases.caseClosureOptionsClosedIncident', + { + defaultMessage: 'Automatically close SIEM cases when incident is closed in third-party', + } +); + +export const FIELD_MAPPING_TITLE = i18n.translate( + 'xpack.siem.case.configureCases.fieldMappingTitle', + { + defaultMessage: 'Field mappings', + } +); + +export const FIELD_MAPPING_DESC = i18n.translate( + 'xpack.siem.case.configureCases.fieldMappingDesc', + { + defaultMessage: + 'Map SIEM case fields when pushing data to a third-party. Field mappings require an established connection to a third-party incident management system.', + } +); + +export const FIELD_MAPPING_FIRST_COL = i18n.translate( + 'xpack.siem.case.configureCases.fieldMappingFirstCol', + { + defaultMessage: 'SIEM case field', + } +); + +export const FIELD_MAPPING_SECOND_COL = i18n.translate( + 'xpack.siem.case.configureCases.fieldMappingSecondCol', + { + defaultMessage: 'Third-party incident field', + } +); + +export const FIELD_MAPPING_THIRD_COL = i18n.translate( + 'xpack.siem.case.configureCases.fieldMappingThirdCol', + { + defaultMessage: 'On edit and update', + } +); + +export const FIELD_MAPPING_EDIT_NOTHING = i18n.translate( + 'xpack.siem.case.configureCases.fieldMappingEditNothing', + { + defaultMessage: 'Nothing', + } +); + +export const FIELD_MAPPING_EDIT_OVERWRITE = i18n.translate( + 'xpack.siem.case.configureCases.fieldMappingEditOverwrite', + { + defaultMessage: 'Overwrite', + } +); + +export const FIELD_MAPPING_EDIT_APPEND = i18n.translate( + 'xpack.siem.case.configureCases.fieldMappingEditAppend', + { + defaultMessage: 'Append', + } +); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/configure_cases.tsx b/x-pack/legacy/plugins/siem/public/pages/case/configure_cases.tsx index 018f9dc9ade52..556d7779c664f 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/configure_cases.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/configure_cases.tsx @@ -14,6 +14,8 @@ import { getCaseUrl } from '../../components/link_to'; import { WhitePageWrapper, SectionWrapper } from './components/wrappers'; import { Connectors } from './components/configure_cases/connectors'; import * as i18n from './translations'; +import { ClosureOptions } from './components/configure_cases/closure_options'; +import { FieldMapping } from './components/configure_cases/field_mapping'; const backOptions = { href: getCaseUrl(), @@ -26,8 +28,12 @@ const wrapperPageStyle: Record = { paddingBottom: '0', }; -export const FormWrapper = styled.div` +const FormWrapper = styled.div` ${({ theme }) => css` + & > * { + margin-top 40px; + } + padding-top: ${theme.eui.paddingSizes.l}; padding-bottom: ${theme.eui.paddingSizes.l}; `} @@ -44,6 +50,12 @@ const ConfigureCasesPageComponent: React.FC = () => ( + + + + + +