From 01dc2ee37a9c189f23e6964d322133d3866b73ef Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Wed, 19 Feb 2020 16:22:39 +0200 Subject: [PATCH 01/21] [SIEM][CASE] Init configure cases --- .../public/pages/case/configure_cases.tsx | 21 +++++++++++++++++++ .../plugins/siem/public/pages/case/index.tsx | 5 +++++ 2 files changed, 26 insertions(+) create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/configure_cases.tsx 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 new file mode 100644 index 0000000000000..294d070e4e471 --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/configure_cases.tsx @@ -0,0 +1,21 @@ +/* + * 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 { WrapperPage } from '../../components/wrapper_page'; +import { HeaderPage } from '../../components/header_page'; +import { SpyRoute } from '../../utils/route/spy_routes'; + +const ConfigureCasesPageComponent: React.FC = () => ( + <> + + + + + +); + +export const ConfigureCasesPage = React.memo(ConfigureCasesPageComponent); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/index.tsx b/x-pack/legacy/plugins/siem/public/pages/case/index.tsx index 9bd91b1c6d62d..1bde9de1535b5 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/index.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/index.tsx @@ -11,10 +11,12 @@ import { SiemPageName } from '../home/types'; import { CaseDetailsPage } from './case_details'; import { CasesPage } from './case'; import { CreateCasePage } from './create_case'; +import { ConfigureCasesPage } from './configure_cases'; const casesPagePath = `/:pageName(${SiemPageName.case})`; const caseDetailsPagePath = `${casesPagePath}/:detailName`; const createCasePagePath = `${casesPagePath}/create`; +const configureCasesPagePath = `${casesPagePath}/configure`; const CaseContainerComponent: React.FC = () => ( @@ -24,6 +26,9 @@ const CaseContainerComponent: React.FC = () => ( + + + From 7705ca92e4619c91b51d56ecb88ce1dfcff2ddc3 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Wed, 19 Feb 2020 23:23:56 +0200 Subject: [PATCH 02/21] [SIEM][CASE] Translate header title --- .../legacy/plugins/siem/public/pages/case/configure_cases.tsx | 3 ++- x-pack/legacy/plugins/siem/public/pages/case/translations.ts | 4 ++++ 2 files changed, 6 insertions(+), 1 deletion(-) 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 294d070e4e471..476af6a1973d2 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 @@ -8,11 +8,12 @@ import React from 'react'; import { WrapperPage } from '../../components/wrapper_page'; import { HeaderPage } from '../../components/header_page'; import { SpyRoute } from '../../utils/route/spy_routes'; +import * as i18n from './translations'; const ConfigureCasesPageComponent: React.FC = () => ( <> - + diff --git a/x-pack/legacy/plugins/siem/public/pages/case/translations.ts b/x-pack/legacy/plugins/siem/public/pages/case/translations.ts index 4e878ba58411e..46b10f6268749 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/translations.ts +++ b/x-pack/legacy/plugins/siem/public/pages/case/translations.ts @@ -102,3 +102,7 @@ export const NO_TAGS = i18n.translate('xpack.siem.case.caseView.noTags', { export const TITLE_REQUIRED = i18n.translate('xpack.siem.case.createCase.titleFieldRequiredError', { defaultMessage: 'A title is required.', }); + +export const CONFIGURE_CASES = i18n.translate('xpack.siem.case.configureCases.headerTitle', { + defaultMessage: 'Configure cases', +}); From 559407f0eb86c5fdb46a93442a9456d54d49bdd9 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Wed, 19 Feb 2020 23:25:13 +0200 Subject: [PATCH 03/21] [SIEM][CASE] Add back link --- .../plugins/siem/public/pages/case/configure_cases.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) 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 476af6a1973d2..dd9ce07dcd886 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 @@ -8,12 +8,18 @@ import React from 'react'; import { WrapperPage } from '../../components/wrapper_page'; import { HeaderPage } from '../../components/header_page'; import { SpyRoute } from '../../utils/route/spy_routes'; +import { getCaseUrl } from '../../components/link_to'; import * as i18n from './translations'; +const backOptions = { + href: getCaseUrl(), + text: i18n.BACK_TO_ALL, +}; + const ConfigureCasesPageComponent: React.FC = () => ( <> - + From ff22214bb35105e9196316ccc25f93206196dcfc Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Thu, 20 Feb 2020 12:43:11 +0200 Subject: [PATCH 04/21] [SIEM][CASE] Add default options to header page --- .../plugins/siem/public/pages/case/case.tsx | 12 +++------- .../components/case_header_page/index.tsx | 22 +++++++++++++++++++ .../case_header_page/translations.ts | 16 ++++++++++++++ .../public/pages/case/configure_cases.tsx | 4 ++-- .../siem/public/pages/case/create_case.tsx | 10 +++------ .../siem/public/pages/case/translations.ts | 9 -------- 6 files changed, 46 insertions(+), 27 deletions(-) create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/case_header_page/index.tsx create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/case_header_page/translations.ts diff --git a/x-pack/legacy/plugins/siem/public/pages/case/case.tsx b/x-pack/legacy/plugins/siem/public/pages/case/case.tsx index 1206ec950deed..8dbb7a88cf55d 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/case.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/case.tsx @@ -7,29 +7,23 @@ import React from 'react'; import { EuiButton, EuiFlexGroup } from '@elastic/eui'; -import { HeaderPage } from '../../components/header_page'; +import { CaseHeaderPage } from './components/case_header_page'; import { WrapperPage } from '../../components/wrapper_page'; import { AllCases } from './components/all_cases'; import { SpyRoute } from '../../utils/route/spy_routes'; import * as i18n from './translations'; import { getCreateCaseUrl } from '../../components/link_to'; -const badgeOptions = { - beta: true, - text: i18n.PAGE_BADGE_LABEL, - tooltip: i18n.PAGE_BADGE_TOOLTIP, -}; - export const CasesPage = React.memo(() => ( <> - + {i18n.CREATE_TITLE} - + diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/case_header_page/index.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/case_header_page/index.tsx new file mode 100644 index 0000000000000..ae2664ca6e839 --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/case_header_page/index.tsx @@ -0,0 +1,22 @@ +/* + * 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 { HeaderPage, HeaderPageProps } from '../../../../components/header_page'; +import * as i18n from './translations'; + +const CaseHeaderPageComponent: React.FC = props => ; + +CaseHeaderPageComponent.defaultProps = { + badgeOptions: { + beta: true, + text: i18n.PAGE_BADGE_LABEL, + tooltip: i18n.PAGE_BADGE_TOOLTIP, + }, +}; + +export const CaseHeaderPage = React.memo(CaseHeaderPageComponent); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/case_header_page/translations.ts b/x-pack/legacy/plugins/siem/public/pages/case/components/case_header_page/translations.ts new file mode 100644 index 0000000000000..9fcad926c03b8 --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/case_header_page/translations.ts @@ -0,0 +1,16 @@ +/* + * 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 PAGE_BADGE_LABEL = i18n.translate('xpack.siem.case.caseView.pageBadgeLabel', { + defaultMessage: 'Beta', +}); + +export const PAGE_BADGE_TOOLTIP = i18n.translate('xpack.siem.case.caseView.pageBadgeTooltip', { + defaultMessage: + 'Case Workflow is still in beta. Please help us improve by reporting issues or bugs in the Kibana repo.', +}); 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 dd9ce07dcd886..8439fed42ea1b 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 @@ -6,7 +6,7 @@ import React from 'react'; import { WrapperPage } from '../../components/wrapper_page'; -import { HeaderPage } from '../../components/header_page'; +import { CaseHeaderPage } from './components/case_header_page'; import { SpyRoute } from '../../utils/route/spy_routes'; import { getCaseUrl } from '../../components/link_to'; import * as i18n from './translations'; @@ -19,7 +19,7 @@ const backOptions = { const ConfigureCasesPageComponent: React.FC = () => ( <> - + diff --git a/x-pack/legacy/plugins/siem/public/pages/case/create_case.tsx b/x-pack/legacy/plugins/siem/public/pages/case/create_case.tsx index 9bc356517cc68..2c7525264f71b 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/create_case.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/create_case.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { WrapperPage } from '../../components/wrapper_page'; import { Create } from './components/create'; import { SpyRoute } from '../../utils/route/spy_routes'; -import { HeaderPage } from '../../components/header_page'; +import { CaseHeaderPage } from './components/case_header_page'; import * as i18n from './translations'; import { getCaseUrl } from '../../components/link_to'; @@ -17,15 +17,11 @@ const backOptions = { href: getCaseUrl(), text: i18n.BACK_TO_ALL, }; -const badgeOptions = { - beta: true, - text: i18n.PAGE_BADGE_LABEL, - tooltip: i18n.PAGE_BADGE_TOOLTIP, -}; + export const CreateCasePage = React.memo(() => ( <> - + diff --git a/x-pack/legacy/plugins/siem/public/pages/case/translations.ts b/x-pack/legacy/plugins/siem/public/pages/case/translations.ts index 46b10f6268749..53d7fe168f48a 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/translations.ts +++ b/x-pack/legacy/plugins/siem/public/pages/case/translations.ts @@ -57,15 +57,6 @@ export const LAST_UPDATED = i18n.translate('xpack.siem.case.caseView.updatedAt', defaultMessage: 'Last updated', }); -export const PAGE_BADGE_LABEL = i18n.translate('xpack.siem.case.caseView.pageBadgeLabel', { - defaultMessage: 'Beta', -}); - -export const PAGE_BADGE_TOOLTIP = i18n.translate('xpack.siem.case.caseView.pageBadgeTooltip', { - defaultMessage: - 'Case Workflow is still in beta. Please help us improve by reporting issues or bugs in the Kibana repo.', -}); - export const PAGE_SUBTITLE = i18n.translate('xpack.siem.case.caseView.pageSubtitle', { defaultMessage: 'Case Workflow Management within the Elastic SIEM', }); From bb14de65ca9da0fcd9fe30e81b59999ca29be891 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Thu, 20 Feb 2020 13:16:22 +0200 Subject: [PATCH 05/21] [SIEM][CASE] Create configure cases page redirections and links --- .../plugins/siem/public/components/link_to/index.ts | 2 ++ .../siem/public/components/link_to/link_to.tsx | 11 ++++++++++- .../public/components/link_to/redirect_to_case.tsx | 4 ++++ 3 files changed, 16 insertions(+), 1 deletion(-) diff --git a/x-pack/legacy/plugins/siem/public/components/link_to/index.ts b/x-pack/legacy/plugins/siem/public/components/link_to/index.ts index c93b415e017bb..a1c1f78e398e3 100644 --- a/x-pack/legacy/plugins/siem/public/components/link_to/index.ts +++ b/x-pack/legacy/plugins/siem/public/components/link_to/index.ts @@ -17,6 +17,8 @@ export { getCaseDetailsUrl, getCaseUrl, getCreateCaseUrl, + getConfigureCasesUrl, RedirectToCasePage, RedirectToCreatePage, + RedirectToConfigureCasesPage, } from './redirect_to_case'; diff --git a/x-pack/legacy/plugins/siem/public/components/link_to/link_to.tsx b/x-pack/legacy/plugins/siem/public/components/link_to/link_to.tsx index c08b429dc4625..08e4d1a3494e0 100644 --- a/x-pack/legacy/plugins/siem/public/components/link_to/link_to.tsx +++ b/x-pack/legacy/plugins/siem/public/components/link_to/link_to.tsx @@ -20,7 +20,11 @@ import { RedirectToHostsPage, RedirectToHostDetailsPage } from './redirect_to_ho import { RedirectToNetworkPage } from './redirect_to_network'; import { RedirectToOverviewPage } from './redirect_to_overview'; import { RedirectToTimelinesPage } from './redirect_to_timelines'; -import { RedirectToCasePage, RedirectToCreatePage } from './redirect_to_case'; +import { + RedirectToCasePage, + RedirectToCreatePage, + RedirectToConfigureCasesPage, +} from './redirect_to_case'; import { DetectionEngineTab } from '../../pages/detection_engine/types'; interface LinkToPageProps { @@ -43,6 +47,11 @@ export const LinkToPage = React.memo(({ match }) => ( component={RedirectToCreatePage} path={`${match.url}/:pageName(${SiemPageName.case})/create`} /> + ; +export const RedirectToConfigureCasesPage = () => ( + +); const baseCaseUrl = `#/link-to/${SiemPageName.case}`; export const getCaseUrl = () => baseCaseUrl; export const getCaseDetailsUrl = (detailName: string) => `${baseCaseUrl}/${detailName}`; export const getCreateCaseUrl = () => `${baseCaseUrl}/create`; +export const getConfigureCasesUrl = () => `${baseCaseUrl}/configure`; From 27d220e83f115f86a3011551095bac8cae1e0e8d Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Thu, 20 Feb 2020 13:20:34 +0200 Subject: [PATCH 06/21] [SIEM][CASE] Add configure cases button --- .../plugins/siem/public/pages/case/case.tsx | 17 ++++++++++++----- .../siem/public/pages/case/translations.ts | 4 ++++ 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/x-pack/legacy/plugins/siem/public/pages/case/case.tsx b/x-pack/legacy/plugins/siem/public/pages/case/case.tsx index 8dbb7a88cf55d..c466cfc59c498 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/case.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/case.tsx @@ -6,22 +6,29 @@ import React from 'react'; -import { EuiButton, EuiFlexGroup } from '@elastic/eui'; +import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { CaseHeaderPage } from './components/case_header_page'; import { WrapperPage } from '../../components/wrapper_page'; import { AllCases } from './components/all_cases'; import { SpyRoute } from '../../utils/route/spy_routes'; import * as i18n from './translations'; -import { getCreateCaseUrl } from '../../components/link_to'; +import { getCreateCaseUrl, getConfigureCasesUrl } from '../../components/link_to'; export const CasesPage = React.memo(() => ( <> - - {i18n.CREATE_TITLE} - + + + {i18n.CREATE_TITLE} + + + + + {i18n.CONFIGURE_CASES_BUTTON} + + diff --git a/x-pack/legacy/plugins/siem/public/pages/case/translations.ts b/x-pack/legacy/plugins/siem/public/pages/case/translations.ts index 53d7fe168f48a..b56fadc1bd25b 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/translations.ts +++ b/x-pack/legacy/plugins/siem/public/pages/case/translations.ts @@ -97,3 +97,7 @@ export const TITLE_REQUIRED = i18n.translate('xpack.siem.case.createCase.titleFi export const CONFIGURE_CASES = i18n.translate('xpack.siem.case.configureCases.headerTitle', { defaultMessage: 'Configure cases', }); + +export const CONFIGURE_CASES_BUTTON = i18n.translate('xpack.siem.case.configureCasesButton', { + defaultMessage: 'Configure cases', +}); From 0539575e22e55ff5c4cd97db4364bb1ea61187fc Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Thu, 20 Feb 2020 14:07:34 +0200 Subject: [PATCH 07/21] [SIEM][CASE] Change translation variable --- .../plugins/siem/public/pages/case/configure_cases.tsx | 2 +- .../plugins/siem/public/pages/case/translations.ts | 9 ++++++--- 2 files changed, 7 insertions(+), 4 deletions(-) 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 8439fed42ea1b..4832b9e650fdd 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 @@ -19,7 +19,7 @@ const backOptions = { const ConfigureCasesPageComponent: React.FC = () => ( <> - + diff --git a/x-pack/legacy/plugins/siem/public/pages/case/translations.ts b/x-pack/legacy/plugins/siem/public/pages/case/translations.ts index b56fadc1bd25b..265af0bde547f 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/translations.ts +++ b/x-pack/legacy/plugins/siem/public/pages/case/translations.ts @@ -94,9 +94,12 @@ export const TITLE_REQUIRED = i18n.translate('xpack.siem.case.createCase.titleFi defaultMessage: 'A title is required.', }); -export const CONFIGURE_CASES = i18n.translate('xpack.siem.case.configureCases.headerTitle', { - defaultMessage: 'Configure cases', -}); +export const CONFIGURE_CASES_PAGE_TITLE = i18n.translate( + 'xpack.siem.case.configureCases.headerTitle', + { + defaultMessage: 'Configure cases', + } +); export const CONFIGURE_CASES_BUTTON = i18n.translate('xpack.siem.case.configureCasesButton', { defaultMessage: 'Configure cases', From cc80dc3508bf39e4466c2d5b287f91ad696aa2e7 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Sat, 22 Feb 2020 20:03:30 +0200 Subject: [PATCH 08/21] Create wrappers --- .../pages/case/components/wrappers/index.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/wrappers/index.tsx diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/wrappers/index.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/wrappers/index.tsx new file mode 100644 index 0000000000000..da23a9b59bffe --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/wrappers/index.tsx @@ -0,0 +1,17 @@ +/* + * 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 styled, { css } from 'styled-components'; + +export const WhitePageWrapper = styled.div` + ${({ theme }) => css` + background-color: ${theme.eui.euiColorEmptyShade}; + border-top: ${theme.eui.euiBorderThin}; + height: 100%; + min-height: 100vh; + `} +`; + From 44d9cb936e997814f2f460bffa87b534b6bcaa64 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Sat, 22 Feb 2020 20:03:55 +0200 Subject: [PATCH 09/21] Create section wrapper --- .../siem/public/pages/case/components/wrappers/index.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/wrappers/index.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/wrappers/index.tsx index da23a9b59bffe..772d78f948b79 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/wrappers/index.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/wrappers/index.tsx @@ -15,3 +15,8 @@ export const WhitePageWrapper = styled.div` `} `; +export const SectionWrapper = styled.div` + box-sizing: content-box; + margin: 0 auto; + max-width: 1175px; +`; From f9f042b657ee5caa9fbe4cd01f2f195a75850746 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Sat, 22 Feb 2020 20:04:27 +0200 Subject: [PATCH 10/21] Switch to new wrapper --- .../pages/case/components/case_view/index.tsx | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/case_view/index.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/case_view/index.tsx index 5cd71c5855d34..df3e30a698b56 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/case_view/index.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/case_view/index.tsx @@ -34,6 +34,7 @@ import { UserActionTree } from '../user_action_tree'; import { UserList } from '../user_list'; import { useUpdateCase } from '../../../../containers/case/use_update_case'; import { WrapperPage } from '../../../../components/wrapper_page'; +import { WhitePageWrapper } from '../wrappers'; interface Props { caseId: string; @@ -52,14 +53,6 @@ const MyWrapper = styled(WrapperPage)` padding-bottom: 0; `; -const BackgroundWrapper = styled.div` - ${({ theme }) => css` - background-color: ${theme.eui.euiColorEmptyShade}; - border-top: ${theme.eui.euiBorderThin}; - height: 100%; - `} -`; - export interface CaseProps { caseId: string; initialData: Case; @@ -279,7 +272,7 @@ export const CaseComponent = React.memo(({ caseId, initialData, isLoa - + @@ -305,7 +298,7 @@ export const CaseComponent = React.memo(({ caseId, initialData, isLoa - + ); }); From e7cff399c0177e879d9a8b89211fb436884f7ad5 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Sun, 23 Feb 2020 23:23:57 +0200 Subject: [PATCH 11/21] Add translations --- .../configure_cases/translations.ts | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/translations.ts 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 new file mode 100644 index 0000000000000..e6e9c376f1d83 --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/translations.ts @@ -0,0 +1,33 @@ +/* + * 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 INCIDENT_MANAGEMENT_SYSTEM_TITLE = i18n.translate( + 'xpack.siem.case.configureCases.incidentManagementSystemTitle', + { + defaultMessage: 'Connect to third-party incident management system', + } +); + +export const INCIDENT_MANAGEMENT_SYSTEM_DESC = i18n.translate( + 'xpack.siem.case.configureCases.incidentManagementSystemDesc', + { + defaultMessage: + 'You may optionally connect SIEM cases to a third-party incident management system of your choosing. This will allow you to push case data as an incident in your chosen third-party system.', + } +); + +export const INCIDENT_MANAGEMENT_SYSTEM_LABEL = i18n.translate( + 'xpack.siem.case.configureCases.incidentManagementSystemLabel', + { + defaultMessage: 'Incident management system', + } +); + +export const NO_CONNECTOR = i18n.translate('xpack.siem.case.configureCases.noConnector', { + defaultMessage: 'No connector selected', +}); From 61e7dc3c80365dc94361330156dce12fdfda2ce2 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Sun, 23 Feb 2020 23:27:42 +0200 Subject: [PATCH 12/21] Add connectors dropdown component --- .../connectors_dropdown/index.tsx | 47 +++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown/index.tsx 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/index.tsx new file mode 100644 index 0000000000000..a596651f71b5a --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown/index.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 { EuiSuperSelect, EuiIcon, EuiSuperSelectOption } from '@elastic/eui'; +import styled from 'styled-components'; + +import * as i18n from '../translations'; + +const ICON_SIZE = 'm'; + +const EuiIconExtended = styled(EuiIcon)` + margin-right: 13px; +`; + +const ConnectorsDropdownComponent: React.FC = () => { + const connectors: Array> = [ + { + value: 'no-connector', + inputDisplay: ( + <> + + {i18n.NO_CONNECTOR} + + ), + 'data-test-subj': 'my-servicenow-connector', + disabled: false, + }, + { + value: 'my-servicenow-connector', + inputDisplay: ( + <> + + {'My ServiceNow connector'} + + ), + 'data-test-subj': 'my-servicenow-connector', + disabled: false, + }, + ]; + return ; +}; + +export const ConnectorsDropdown = React.memo(ConnectorsDropdownComponent); From 20f99289d39f68c65dabbd5b4c9e2b2e18f7c78d Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Sun, 23 Feb 2020 23:32:31 +0200 Subject: [PATCH 13/21] Add connectors component --- .../components/configure_cases/connectors.tsx | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.tsx diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.tsx new file mode 100644 index 0000000000000..c79f59d488e39 --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.tsx @@ -0,0 +1,29 @@ +/* + * 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 { ConnectorsDropdown } from './connectors_dropdown'; +import * as i18n from './translations'; + +const ConnectorsComponent: React.FC = () => { + const dropDownLabel =
{i18n.INCIDENT_MANAGEMENT_SYSTEM_LABEL}
; + + return ( + {i18n.INCIDENT_MANAGEMENT_SYSTEM_TITLE}} + description={i18n.INCIDENT_MANAGEMENT_SYSTEM_DESC} + > + + + + + ); +}; + +export const Connectors = React.memo(ConnectorsComponent); From 2e513600d84cfda766a7e2fd7ae1c44e3e490d75 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Sun, 23 Feb 2020 23:34:52 +0200 Subject: [PATCH 14/21] Show connectors --- .../public/pages/case/configure_cases.tsx | 30 +++++++++++++++++-- 1 file changed, 28 insertions(+), 2 deletions(-) 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 4832b9e650fdd..018f9dc9ade52 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 @@ -5,10 +5,14 @@ */ import React from 'react'; +import styled, { css } from 'styled-components'; + import { WrapperPage } from '../../components/wrapper_page'; import { CaseHeaderPage } from './components/case_header_page'; import { SpyRoute } from '../../utils/route/spy_routes'; import { getCaseUrl } from '../../components/link_to'; +import { WhitePageWrapper, SectionWrapper } from './components/wrappers'; +import { Connectors } from './components/configure_cases/connectors'; import * as i18n from './translations'; const backOptions = { @@ -16,10 +20,32 @@ const backOptions = { text: i18n.BACK_TO_ALL, }; +const wrapperPageStyle: Record = { + paddingLeft: '0', + paddingRight: '0', + paddingBottom: '0', +}; + +export const FormWrapper = styled.div` + ${({ theme }) => css` + padding-top: ${theme.eui.paddingSizes.l}; + padding-bottom: ${theme.eui.paddingSizes.l}; + `} +`; + const ConfigureCasesPageComponent: React.FC = () => ( <> - - + + + + + + + + + + + From 2a7cc6dc6af6b6cb1cf1baf3923122fd695ab529 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Mon, 24 Feb 2020 12:24:47 +0200 Subject: [PATCH 15/21] Create add new connector button --- .../components/configure_cases/connectors.tsx | 31 ++++++++++++++++--- .../configure_cases/translations.ts | 4 +++ 2 files changed, 31 insertions(+), 4 deletions(-) diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.tsx index c79f59d488e39..561464e44c703 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.tsx @@ -5,13 +5,36 @@ */ import React from 'react'; -import { EuiDescribedFormGroup, EuiFormRow } from '@elastic/eui'; +import { + EuiDescribedFormGroup, + EuiFormRow, + EuiFlexGroup, + EuiFlexItem, + EuiLink, +} from '@elastic/eui'; + +import styled from 'styled-components'; import { ConnectorsDropdown } from './connectors_dropdown'; import * as i18n from './translations'; +const EuiFormRowExtended = styled(EuiFormRow)` + .euiFormRow__labelWrapper { + .euiFormRow__label { + width: 100%; + } + } +`; + const ConnectorsComponent: React.FC = () => { - const dropDownLabel =
{i18n.INCIDENT_MANAGEMENT_SYSTEM_LABEL}
; + const dropDownLabel = ( + + {i18n.INCIDENT_MANAGEMENT_SYSTEM_LABEL} + + {i18n.ADD_NEW_CONNECTOR} + + + ); return ( { title={

{i18n.INCIDENT_MANAGEMENT_SYSTEM_TITLE}

} description={i18n.INCIDENT_MANAGEMENT_SYSTEM_DESC} > - + - + ); }; 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 e6e9c376f1d83..54d256b143f60 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 @@ -31,3 +31,7 @@ export const INCIDENT_MANAGEMENT_SYSTEM_LABEL = i18n.translate( export const NO_CONNECTOR = i18n.translate('xpack.siem.case.configureCases.noConnector', { defaultMessage: 'No connector selected', }); + +export const ADD_NEW_CONNECTOR = i18n.translate('xpack.siem.case.configureCases.addNewConnector', { + defaultMessage: 'Add new connector option', +}); From fad34bf1e022d3cb5bf8535fa82210cfd77675d0 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Thu, 27 Feb 2020 12:21:18 +0200 Subject: [PATCH 16/21] Change values --- .../configure_cases/connectors_dropdown/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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/index.tsx index a596651f71b5a..95a5f0cbeebd9 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/index.tsx @@ -26,18 +26,18 @@ const ConnectorsDropdownComponent: React.FC = () => { {i18n.NO_CONNECTOR} ), - 'data-test-subj': 'my-servicenow-connector', + 'data-test-subj': 'no-connector', disabled: false, }, { - value: 'my-servicenow-connector', + value: 'servicenow-connector', inputDisplay: ( <> {'My ServiceNow connector'} ), - 'data-test-subj': 'my-servicenow-connector', + 'data-test-subj': 'servicenow-connector', disabled: false, }, ]; From 2678045531856247bf4782ec08f54f15f54d5664 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Thu, 27 Feb 2020 12:52:24 +0200 Subject: [PATCH 17/21] Use state for connectors dropdown --- .../connectors_dropdown/index.tsx | 63 +++++++++++-------- 1 file changed, 37 insertions(+), 26 deletions(-) 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/index.tsx index 95a5f0cbeebd9..603e1f0aecfd1 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/index.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; +import React, { useState, useCallback } from 'react'; import { EuiSuperSelect, EuiIcon, EuiSuperSelectOption } from '@elastic/eui'; import styled from 'styled-components'; @@ -16,32 +16,43 @@ const EuiIconExtended = styled(EuiIcon)` margin-right: 13px; `; +const connectors: Array> = [ + { + value: 'no-connector', + inputDisplay: ( + <> + + {i18n.NO_CONNECTOR} + + ), + 'data-test-subj': 'no-connector', + disabled: false, + }, + { + value: 'servicenow-connector', + inputDisplay: ( + <> + + {'My ServiceNow connector'} + + ), + 'data-test-subj': 'servicenow-connector', + disabled: false, + }, +]; + const ConnectorsDropdownComponent: React.FC = () => { - const connectors: Array> = [ - { - value: 'no-connector', - inputDisplay: ( - <> - - {i18n.NO_CONNECTOR} - - ), - 'data-test-subj': 'no-connector', - disabled: false, - }, - { - value: 'servicenow-connector', - inputDisplay: ( - <> - - {'My ServiceNow connector'} - - ), - 'data-test-subj': 'servicenow-connector', - disabled: false, - }, - ]; - return ; + const [selectedConnector, selectConnector] = useState(connectors[0].value); + const onChange = useCallback(connector => selectConnector(connector), [selectedConnector]); + + return ( + + ); }; export const ConnectorsDropdown = React.memo(ConnectorsDropdownComponent); From e3d3dc75e656a16a80db426a76586cb66377600a Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Thu, 27 Feb 2020 12:54:30 +0200 Subject: [PATCH 18/21] Remove unnecessary attribute --- .../components/configure_cases/connectors_dropdown/index.tsx | 2 -- 1 file changed, 2 deletions(-) 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/index.tsx index 603e1f0aecfd1..c00baa04d78a0 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/index.tsx @@ -26,7 +26,6 @@ const connectors: Array> = [ ), 'data-test-subj': 'no-connector', - disabled: false, }, { value: 'servicenow-connector', @@ -37,7 +36,6 @@ const connectors: Array> = [ ), 'data-test-subj': 'servicenow-connector', - disabled: false, }, ]; From 2ba967917e6fa461fff0617e75198f55d2d27872 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Thu, 27 Feb 2020 13:03:14 +0200 Subject: [PATCH 19/21] Remove timeline in configuration page --- x-pack/legacy/plugins/siem/public/pages/home/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/x-pack/legacy/plugins/siem/public/pages/home/index.tsx b/x-pack/legacy/plugins/siem/public/pages/home/index.tsx index 7c5fd56bf1e91..85a3a40001d33 100644 --- a/x-pack/legacy/plugins/siem/public/pages/home/index.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/home/index.tsx @@ -68,6 +68,8 @@ export const HomePage: React.FC = () => { windowHeight, }); + const currentLocation = useLocation(); + return ( From 5c6407abcac259ae67b3faf292102967dae259fb Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Thu, 27 Feb 2020 13:15:38 +0200 Subject: [PATCH 20/21] Remove text from gear button --- x-pack/legacy/plugins/siem/public/pages/case/case.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/x-pack/legacy/plugins/siem/public/pages/case/case.tsx b/x-pack/legacy/plugins/siem/public/pages/case/case.tsx index c466cfc59c498..15a6d076f1009 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/case.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/case.tsx @@ -6,7 +6,7 @@ import React from 'react'; -import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; +import { EuiButton, EuiButtonIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { CaseHeaderPage } from './components/case_header_page'; import { WrapperPage } from '../../components/wrapper_page'; import { AllCases } from './components/all_cases'; @@ -25,9 +25,7 @@ export const CasesPage = React.memo(() => ( - - {i18n.CONFIGURE_CASES_BUTTON} - + From 3bd2e27cdd6afcb466c78d0dec1925f32f0e39e8 Mon Sep 17 00:00:00 2001 From: Xavier Mouligneau <189600+XavierM@users.noreply.github.com> Date: Thu, 27 Feb 2020 09:27:41 -0500 Subject: [PATCH 21/21] make show timeline more generic so we can re-use if need it --- .../plugins/siem/public/pages/home/index.tsx | 5 +-- .../utils/timeline/use_show_timeline.tsx | 31 +++++++++++++++++++ 2 files changed, 34 insertions(+), 2 deletions(-) create mode 100644 x-pack/legacy/plugins/siem/public/utils/timeline/use_show_timeline.tsx diff --git a/x-pack/legacy/plugins/siem/public/pages/home/index.tsx b/x-pack/legacy/plugins/siem/public/pages/home/index.tsx index 85a3a40001d33..605136a190c54 100644 --- a/x-pack/legacy/plugins/siem/public/pages/home/index.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/home/index.tsx @@ -21,6 +21,7 @@ import { AutoSaveWarningMsg } from '../../components/timeline/auto_save_warning' import { UseUrlState } from '../../components/url_state'; import { WithSource, indicesExistOrDataTemporarilyUnavailable } from '../../containers/source'; import { SpyRoute } from '../../utils/route/spy_routes'; +import { useShowTimeline } from '../../utils/timeline/use_show_timeline'; import { NotFoundPage } from '../404'; import { DetectionEngineContainer } from '../detection_engine'; import { HostsContainer } from '../hosts'; @@ -68,7 +69,7 @@ export const HomePage: React.FC = () => { windowHeight, }); - const currentLocation = useLocation(); + const [showTimeline] = useShowTimeline(); return ( @@ -79,7 +80,7 @@ export const HomePage: React.FC = () => { {({ browserFields, indexPattern, indicesExist }) => ( - {indicesExistOrDataTemporarilyUnavailable(indicesExist) && ( + {indicesExistOrDataTemporarilyUnavailable(indicesExist) && showTimeline && ( <> { + const currentLocation = useLocation(); + const [showTimeline, setShowTimeline] = useState( + !hideTimelineForRoutes.includes(currentLocation.pathname) + ); + + useEffect(() => { + if (hideTimelineForRoutes.includes(currentLocation.pathname)) { + if (showTimeline) { + setShowTimeline(false); + } + } else if (!showTimeline) { + setShowTimeline(true); + } + }, [currentLocation.pathname]); + + return [showTimeline]; +};