From 8c065db5416078c87ec7d23aa5fa64d42c28e86f Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Fri, 28 Feb 2020 13:59:43 +0200 Subject: [PATCH] [SIEM][CASE] Init Configure Case Page (#58121) * [SIEM][CASE] Init configure cases * [SIEM][CASE] Translate header title * [SIEM][CASE] Add back link * [SIEM][CASE] Add default options to header page * [SIEM][CASE] Create configure cases page redirections and links * [SIEM][CASE] Add configure cases button * [SIEM][CASE] Change translation variable * [SIEM][CASE] Create wrappers * [SIEM][CASE]Create section wrapper * [SIEM][CASE] Switch to new wrapper * [SIEM][CASE] Add translations * [SIEM][CASE] Add connectors dropdown component * [SIEM][CASE] Add connectors component * [SIEM][CASE] Show connectors * [SIEM][CASE] Create add new connector button * [SIEM][CASE] Change values * [SIEM][CASE] Use state for connectors dropdown * [SIEM][CASE] Remove unnecessary attribute * [SIEM][CASE] Remove timeline in configuration page * [SIEM][CASE] Remove text from gear button * [SIEM][CASE] make show timeline more generic so we can re-use if need it Co-authored-by: Xavier Mouligneau <189600+XavierM@users.noreply.github.com> Co-authored-by: Elastic Machine --- .../siem/public/components/link_to/index.ts | 2 + .../public/components/link_to/link_to.tsx | 11 +++- .../components/link_to/redirect_to_case.tsx | 4 ++ .../plugins/siem/public/pages/case/case.tsx | 27 +++++---- .../components/case_header_page/index.tsx | 22 ++++++++ .../case_header_page/translations.ts | 16 ++++++ .../pages/case/components/case_view/index.tsx | 13 +---- .../components/configure_cases/connectors.tsx | 52 +++++++++++++++++ .../connectors_dropdown/index.tsx | 56 +++++++++++++++++++ .../configure_cases/translations.ts | 37 ++++++++++++ .../pages/case/components/wrappers/index.tsx | 22 ++++++++ .../public/pages/case/configure_cases.tsx | 54 ++++++++++++++++++ .../siem/public/pages/case/create_case.tsx | 10 +--- .../plugins/siem/public/pages/case/index.tsx | 5 ++ .../siem/public/pages/case/translations.ts | 20 ++++--- .../plugins/siem/public/pages/home/index.tsx | 5 +- .../utils/timeline/use_show_timeline.tsx | 31 ++++++++++ 17 files changed, 345 insertions(+), 42 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 create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.tsx create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown/index.tsx create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/translations.ts create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/wrappers/index.tsx create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/configure_cases.tsx create mode 100644 x-pack/legacy/plugins/siem/public/utils/timeline/use_show_timeline.tsx 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`; 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..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,30 +6,29 @@ import React from 'react'; -import { EuiButton, EuiFlexGroup } from '@elastic/eui'; -import { HeaderPage } from '../../components/header_page'; +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'; 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, -}; +import { getCreateCaseUrl, getConfigureCasesUrl } from '../../components/link_to'; export const CasesPage = React.memo(() => ( <> - + - - {i18n.CREATE_TITLE} - + + + {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/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 - + ); }); 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..561464e44c703 --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.tsx @@ -0,0 +1,52 @@ +/* + * 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, + 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} + + {i18n.ADD_NEW_CONNECTOR} + + + ); + + return ( + {i18n.INCIDENT_MANAGEMENT_SYSTEM_TITLE}} + description={i18n.INCIDENT_MANAGEMENT_SYSTEM_DESC} + > + + + + + ); +}; + +export const Connectors = React.memo(ConnectorsComponent); 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..c00baa04d78a0 --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown/index.tsx @@ -0,0 +1,56 @@ +/* + * 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, useCallback } 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 connectors: Array> = [ + { + value: 'no-connector', + inputDisplay: ( + <> + + {i18n.NO_CONNECTOR} + + ), + 'data-test-subj': 'no-connector', + }, + { + value: 'servicenow-connector', + inputDisplay: ( + <> + + {'My ServiceNow connector'} + + ), + 'data-test-subj': 'servicenow-connector', + }, +]; + +const ConnectorsDropdownComponent: React.FC = () => { + const [selectedConnector, selectConnector] = useState(connectors[0].value); + const onChange = useCallback(connector => selectConnector(connector), [selectedConnector]); + + return ( + + ); +}; + +export const ConnectorsDropdown = React.memo(ConnectorsDropdownComponent); 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..54d256b143f60 --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/translations.ts @@ -0,0 +1,37 @@ +/* + * 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', +}); + +export const ADD_NEW_CONNECTOR = i18n.translate('xpack.siem.case.configureCases.addNewConnector', { + defaultMessage: 'Add new connector option', +}); 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..772d78f948b79 --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/wrappers/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 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; + `} +`; + +export const SectionWrapper = styled.div` + box-sizing: content-box; + margin: 0 auto; + max-width: 1175px; +`; 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..018f9dc9ade52 --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/configure_cases.tsx @@ -0,0 +1,54 @@ +/* + * 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 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 = { + href: getCaseUrl(), + 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 = () => ( + <> + + + + + + + + + + + + + + +); + +export const ConfigureCasesPage = React.memo(ConfigureCasesPageComponent); 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/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 = () => ( + + + 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..265af0bde547f 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', }); @@ -102,3 +93,14 @@ 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_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', +}); 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 806f6c7937077..5d20993144af9 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 { useWithSource } 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'; @@ -74,6 +75,8 @@ export const HomePageComponent = () => { const { browserFields, indexPattern, contentAvailable } = useWithSource(); + const [showTimeline] = useShowTimeline(); + return ( @@ -81,7 +84,7 @@ export const HomePageComponent = () => {
- {contentAvailable && ( + {contentAvailable && 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]; +};