From d4cf8e27faf6c1218073a5b922601905dfedbdd8 Mon Sep 17 00:00:00 2001 From: Sinisa Andric Date: Mon, 5 Dec 2022 19:43:40 +0100 Subject: [PATCH] Ftr 142 create detector desc text below header (#150) * Add description text below header Signed-off-by: Sinisa Andric * Update subtitles as per design Signed-off-by: Sinisa Andric * Update ContentPanel subtitleText Signed-off-by: Sinisa Andric * Fix PR remarks Signed-off-by: Sinisa Andric * Fix subtitle size Signed-off-by: Sinisa Andric * Cypress test fix Signed-off-by: Sinisa Andric Signed-off-by: Sinisa Andric Co-authored-by: Amardeepsingh Siglani Signed-off-by: Jovan Cvetkovic --- cypress/integration/1_detectors.spec.js | 2 +- public/components/ContentPanel/ContentPanel.tsx | 4 ++-- .../ConfigureAlerts/containers/ConfigureAlerts.tsx | 5 +++++ .../containers/ConfigureFieldMapping.tsx | 13 ++++++++++--- .../components/DetectionRules/DetectionRules.tsx | 13 ++++++++++--- .../components/DetectorType/DetectorType.tsx | 7 +++++-- .../DefineDetector/containers/DefineDetector.tsx | 7 ++++++- .../ReviewAndCreate/containers/ReviewAndCreate.tsx | 3 +++ 8 files changed, 42 insertions(+), 12 deletions(-) diff --git a/cypress/integration/1_detectors.spec.js b/cypress/integration/1_detectors.spec.js index 5455194f7..b58ada0f0 100644 --- a/cypress/integration/1_detectors.spec.js +++ b/cypress/integration/1_detectors.spec.js @@ -56,7 +56,7 @@ describe('Detectors', () => { cy.get(`input[id="windows"]`).click({ force: true }); // Open Detection rules accordion - cy.contains('Detection rules').click({ timeout: 5000 }); + cy.get('[data-test-subj="detection-rules-btn"]').click({ timeout: 5000 }); // find search, type USB cy.get(`[placeholder="Search..."]`).type('USB Device Plugged').trigger('search'); diff --git a/public/components/ContentPanel/ContentPanel.tsx b/public/components/ContentPanel/ContentPanel.tsx index f5cd0eacc..b4f1ea59f 100644 --- a/public/components/ContentPanel/ContentPanel.tsx +++ b/public/components/ContentPanel/ContentPanel.tsx @@ -28,8 +28,8 @@ const renderSubTitleText = (subTitleText: string | JSX.Element): JSX.Element | n if (typeof subTitleText === 'string') { if (!subTitleText) return null; return ( - - {subTitleText} + + {subTitleText} ); } diff --git a/public/pages/CreateDetector/components/ConfigureAlerts/containers/ConfigureAlerts.tsx b/public/pages/CreateDetector/components/ConfigureAlerts/containers/ConfigureAlerts.tsx index 201657f2e..4d3943dce 100644 --- a/public/pages/CreateDetector/components/ConfigureAlerts/containers/ConfigureAlerts.tsx +++ b/public/pages/CreateDetector/components/ConfigureAlerts/containers/ConfigureAlerts.tsx @@ -12,6 +12,7 @@ import { EuiPanel, EuiSpacer, EuiTitle, + EuiText, } from '@elastic/eui'; import { createDetectorSteps } from '../../../utils/constants'; import { EMPTY_DEFAULT_ALERT_CONDITION, MAX_ALERT_CONDITIONS } from '../utils/constants'; @@ -105,6 +106,10 @@ export default class ConfigureAlerts extends Component + + Get notified when specific rule conditions are found by the detector. + + {triggers.map((alertCondition, index) => ( diff --git a/public/pages/CreateDetector/components/ConfigureFieldMapping/containers/ConfigureFieldMapping.tsx b/public/pages/CreateDetector/components/ConfigureFieldMapping/containers/ConfigureFieldMapping.tsx index cdbae0e06..4340d12e8 100644 --- a/public/pages/CreateDetector/components/ConfigureFieldMapping/containers/ConfigureFieldMapping.tsx +++ b/public/pages/CreateDetector/components/ConfigureFieldMapping/containers/ConfigureFieldMapping.tsx @@ -5,7 +5,7 @@ import React, { Component } from 'react'; import { RouteComponentProps } from 'react-router-dom'; -import { EuiSpacer, EuiTitle } from '@elastic/eui'; +import { EuiSpacer, EuiTitle, EuiText } from '@elastic/eui'; import FieldMappingsTable from '../components/RequiredFieldMapping'; import { createDetectorSteps } from '../../../utils/constants'; import { ContentPanel } from '../../../../../components/ContentPanel'; @@ -143,12 +143,19 @@ export default class ConfigureFieldMapping extends Component< return (
{!isEdit && ( -
+ <>

{createDetectorSteps[DetectorCreationStep.CONFIGURE_FIELD_MAPPING].title}

 + + + To perform threat detection, known field names from your log data source are + automatically mapped to rule field names. Additional fields that may require manual + mapping will be shown below. + + -
+ )} {ruleFields.length > 0 && ( diff --git a/public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRules.tsx b/public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRules.tsx index aa77c8829..09e19ef00 100644 --- a/public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRules.tsx +++ b/public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRules.tsx @@ -9,6 +9,7 @@ import { EuiTitle, EuiHorizontalRule, CriteriaWithPagination, + EuiText, } from '@elastic/eui'; import React, { useMemo } from 'react'; import { DetectionRulesTable } from './DetectionRulesTable'; @@ -63,9 +64,15 @@ export const DetectionRules: React.FC = ({ -

{`Detection rules (${enabledRulesCount} selected)`}

- +
+ +

{`Detection rules (${enabledRulesCount} selected)`}

+ + + Detection rules are automatically added based on your chosen log types. Additionally, + you may add or remove detection rules for this detector. + +
} buttonProps={{ style: { paddingLeft: '10px', paddingRight: '10px' } }} id={'detectorRulesAccordion'} diff --git a/public/pages/CreateDetector/components/DefineDetector/components/DetectorType/DetectorType.tsx b/public/pages/CreateDetector/components/DefineDetector/components/DetectorType/DetectorType.tsx index 7ba9e3559..7fb2dc616 100644 --- a/public/pages/CreateDetector/components/DefineDetector/components/DetectorType/DetectorType.tsx +++ b/public/pages/CreateDetector/components/DefineDetector/components/DetectorType/DetectorType.tsx @@ -68,8 +68,11 @@ export default class DetectorType extends Component )); return ( - - + diff --git a/public/pages/CreateDetector/components/DefineDetector/containers/DefineDetector.tsx b/public/pages/CreateDetector/components/DefineDetector/containers/DefineDetector.tsx index 75c15b65a..145504514 100644 --- a/public/pages/CreateDetector/components/DefineDetector/containers/DefineDetector.tsx +++ b/public/pages/CreateDetector/components/DefineDetector/containers/DefineDetector.tsx @@ -5,7 +5,7 @@ import React, { Component } from 'react'; import { RouteComponentProps } from 'react-router-dom'; -import { EuiSpacer, EuiTitle } from '@elastic/eui'; +import { EuiSpacer, EuiTitle, EuiText } from '@elastic/eui'; import { Detector, PeriodSchedule } from '../../../../../../models/interfaces'; import DetectorBasicDetailsForm from '../components/DetectorDetails'; import DetectorDataSource from '../components/DetectorDataSource'; @@ -169,6 +169,11 @@ export default class DefineDetector extends Component{`${isEdit ? 'Edit' : 'Define'} detector`} + + Configure your detector to identify relevant security findings and potential threats from + your log data. + +

Review and create

+ + +