Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ftr 142 create detector desc text below header #150

Merged
merged 7 commits into from
Dec 5, 2022
Merged

Ftr 142 create detector desc text below header #150

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ced9d09
Add description text below header
paladin-tech Nov 21, 2022
0b8162c
Update subtitles as per design
paladin-tech Nov 21, 2022
20a5a38
Update ContentPanel subtitleText
paladin-tech Nov 22, 2022
f75e838
Fix PR remarks
paladin-tech Nov 22, 2022
7335015
Fix subtitle size
paladin-tech Nov 22, 2022
1d3dd90
Merge branch 'main' into FTR_142_CreateDetector_desc_text_below_header
amsiglan Nov 23, 2022
69e747f
Cypress test fix
paladin-tech Dec 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions public/components/ContentPanel/ContentPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
EuiPanel,
EuiTitle,
EuiText,
EuiTextColor,
} from '@elastic/eui';

interface ContentPanelProps {
Expand All @@ -28,8 +29,10 @@ const renderSubTitleText = (subTitleText: string | JSX.Element): JSX.Element | n
if (typeof subTitleText === 'string') {
if (!subTitleText) return null;
return (
<EuiText size="s">
<span style={{ color: 'grey', fontWeight: 200, fontSize: '15px' }}>{subTitleText}</span>
<EuiText>
<p>
<EuiTextColor color="subdued">{subTitleText}</EuiTextColor>
</p>
</EuiText>
);
}
Expand Down
10 changes: 10 additions & 0 deletions public/pages/CreateDetector/components/ConfigureAlerts/containers/ConfigureAlerts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import {
EuiPanel,
EuiSpacer,
EuiTitle,
EuiText,
EuiTextColor,
} from '@elastic/eui';
import { createDetectorSteps } from '../../../utils/constants';
import { EMPTY_DEFAULT_ALERT_CONDITION, MAX_ALERT_CONDITIONS } from '../utils/constants';
Expand Down Expand Up @@ -104,6 +106,14 @@ export default class ConfigureAlerts extends Component<ConfigureAlertsProps, Con
</h3>
</EuiTitle>

<EuiText>
<p>
<EuiTextColor color="subdued">
Get notified when specific rule conditions are found by the detector.
</EuiTextColor>
</p>
</EuiText>

<EuiSpacer size={'m'} />

{triggers.map((alertCondition, index) => (
Expand Down
17 changes: 14 additions & 3 deletions ...ages/CreateDetector/components/ConfigureFieldMapping/containers/ConfigureFieldMapping.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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, EuiTextColor } from '@elastic/eui';
import FieldMappingsTable from '../components/RequiredFieldMapping';
import { createDetectorSteps } from '../../../utils/constants';
import { ContentPanel } from '../../../../../components/ContentPanel';
Expand Down Expand Up @@ -143,12 +143,23 @@ export default class ConfigureFieldMapping extends Component<
return (
<div>
{!isEdit && (
<div>
<>
<EuiTitle size={'l'}>
<h3>{createDetectorSteps[DetectorCreationStep.CONFIGURE_FIELD_MAPPING].title}</h3>
</EuiTitle>

<EuiText>
<p>
<EuiTextColor color="subdued">
amsiglan marked this conversation as resolved.
Show resolved Hide resolved
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.
</EuiTextColor>
</p>
</EuiText>

<EuiSpacer size={'m'} />
</div>
</>
)}

{ruleFields.length > 0 && (
Expand Down
18 changes: 15 additions & 3 deletions ...ges/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRules.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import {
EuiTitle,
EuiHorizontalRule,
CriteriaWithPagination,
EuiText,
EuiTextColor,
} from '@elastic/eui';
import React, { useMemo } from 'react';
import { DetectionRulesTable } from './DetectionRulesTable';
Expand Down Expand Up @@ -63,9 +65,19 @@ export const DetectionRules: React.FC<DetectionRulesProps> = ({
<EuiPanel style={{ paddingLeft: '0px', paddingRight: '0px' }}>
<EuiAccordion
buttonContent={
<EuiTitle>
<h4>{`Detection rules (${enabledRulesCount} selected)`}</h4>
</EuiTitle>
<>
<EuiTitle>
<h4>{`Detection rules (${enabledRulesCount} selected)`}</h4>
</EuiTitle>
<EuiText>
amsiglan marked this conversation as resolved.
Show resolved Hide resolved
<p>
<EuiTextColor color="subdued">
Detection rules are automatically added based on your chosen log types.
Additionally, you may add or remove detection rules for this detector.
</EuiTextColor>
</p>
</EuiText>
</>
}
buttonProps={{ style: { paddingLeft: '10px', paddingRight: '10px' } }}
id={'detectorRulesAccordion'}
Expand Down
7 changes: 5 additions & 2 deletions ...c/pages/CreateDetector/components/DefineDetector/components/DetectorType/DetectorType.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,11 @@ export default class DetectorType extends Component<DetectorTypeProps, DetectorT
</EuiFlexItem>
));
return (
<ContentPanel title={'Threat detector type'} titleSize={'m'}>
<EuiSpacer size={'m'} />
<ContentPanel
title={'Log types and rules'}
titleSize={'m'}
subTitleText="Choose the log types that correspond to your data source. Detection rules are automatically added based on your chosen log types."
>
<EuiFormRow
label={
<div>
Expand Down
11 changes: 10 additions & 1 deletion public/pages/CreateDetector/components/DefineDetector/containers/DefineDetector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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, EuiTextColor } from '@elastic/eui';
import { Detector, PeriodSchedule } from '../../../../../../models/interfaces';
import DetectorBasicDetailsForm from '../components/DetectorDetails';
import DetectorDataSource from '../components/DetectorDataSource';
Expand Down Expand Up @@ -169,6 +169,15 @@ export default class DefineDetector extends Component<DefineDetectorProps, Defin
<h3>{`${isEdit ? 'Edit' : 'Define'} detector`}</h3>
</EuiTitle>

<EuiText>
amsiglan marked this conversation as resolved.
Show resolved Hide resolved
<p>
<EuiTextColor color="subdued">
Configure your detector to identify relevant security findings and potential threats
from your log data.
</EuiTextColor>
</p>
</EuiText>

<EuiSpacer size={'m'} />

<DetectorBasicDetailsForm
Expand Down
5 changes: 4 additions & 1 deletion public/pages/CreateDetector/components/ReviewAndCreate/containers/ReviewAndCreate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*/

import React from 'react';
import { EuiSpacer, EuiTitle } from '@elastic/eui';
import { EuiSpacer, EuiTitle, EuiText, EuiTextColor } from '@elastic/eui';
import { DetectorDetailsView } from '../../../../Detectors/containers/DetectorDetailsView/DetectorDetailsView';
import { FieldMappingsView } from '../../../../Detectors/components/FieldMappingsView/FieldMappingsView';
import { AlertTriggersView } from '../../../../Detectors/containers/AlertTriggersView/AlertTriggersView';
Expand Down Expand Up @@ -41,6 +41,9 @@ export class ReviewAndCreate extends React.Component<ReviewAndCreateProps, Revie
<EuiTitle size={'l'}>
<h3>Review and create</h3>
</EuiTitle>

<EuiSpacer size={'m'} />

<DetectorDetailsView
{...this.props}
detector={this.props.detector}
Expand Down
11 changes: 10 additions & 1 deletion public/pages/CreateDetector/containers/CreateDetector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,16 @@

import React, { Component } from 'react';
import { RouteComponentProps } from 'react-router-dom';
import { EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiSteps } from '@elastic/eui';
import {
EuiButton,
EuiButtonEmpty,
EuiFlexGroup,
EuiFlexItem,
EuiSteps,
EuiSpacer,
EuiText,
EuiTextColor,
amsiglan marked this conversation as resolved.
Show resolved Hide resolved
} from '@elastic/eui';
import DefineDetector from '../components/DefineDetector/containers/DefineDetector';
import { createDetectorSteps } from '../utils/constants';
import { BREADCRUMBS, EMPTY_DEFAULT_DETECTOR, PLUGIN_NAME, ROUTES } from '../../../utils/constants';
Expand Down