Skip to content

Commit

Permalink
Create detector refactor alert triggers per mocks (#503) (#514)
Browse files Browse the repository at this point in the history 
* [FEATURE] Create detector \ Refactor and move field mapping to first the page of create detector feature #495



* [FEATURE] Create global state object for async requests #493



* [FEATURE] Create detector \ Refactor alert triggers per mocks #498



* [FEATURE] Create detector \ Refactor alert triggers per mocks #498



* [FEATURE] Create detector \ Refactor alert triggers per mocks #498



* Create detector refactor alert triggers per mocks
#503



* Update detector details component #504



---------

Signed-off-by: Jovan Cvetkovic <[email protected]>
Co-authored-by: Jovan Cvetkovic <[email protected]>
  • Loading branch information
@amsiglan @jovancvetkovic3006
amsiglan and jovancvetkovic3006 authored Apr 17, 2023
1 parent 0faf5e6 commit c8c288a
Show file tree
Hide file tree
Showing 12 changed files with 131 additions and 103 deletions.
17 changes: 9 additions & 8 deletions cypress/integration/1_detectors.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@ const testMappings = {

const cypressDNSRule = dns_rule_data.title;

const cypressIndexDns = 'cypress-index-dns';
const cypressIndexWindows = 'cypress-index-windows';
const detectorName = 'test detector';

const createDetector = (detectorName, dataSource, expectFailure) => {
// Locate Create detector button click to start
cy.get('.euiButton').filter(':contains("Create detector")').click({ force: true });
Expand Down Expand Up @@ -73,10 +77,10 @@ const createDetector = (detectorName, dataSource, expectFailure) => {
cy.get('button').contains('Next').click({ force: true });

// Check that correct page now showing
cy.contains('Set up alerts');
cy.contains('Set up alert triggers');

// Type name of new trigger
cy.get(`input[placeholder="Enter a name for the alert condition."]`)
cy.get(`input[placeholder="Enter a name to describe the alert condition"]`)
.focus()
.realType('test_trigger');

Expand Down Expand Up @@ -113,8 +117,7 @@ const createDetector = (detectorName, dataSource, expectFailure) => {
cy.contains('Detector details');
cy.contains(detectorName);
cy.contains('dns');
cy.contains(dataSource);
cy.contains('Alert on test_trigger');
cy.contains('test_trigger');

// Create the detector
cy.get('button').contains('Create').click({ force: true });
Expand All @@ -141,10 +144,6 @@ const createDetector = (detectorName, dataSource, expectFailure) => {
};

describe('Detectors', () => {
const cypressIndexDns = 'cypress-index-dns';
const cypressIndexWindows = 'cypress-index-windows';
const detectorName = 'test detector';

before(() => {
cy.cleanUpTests();

Expand Down Expand Up @@ -362,6 +361,8 @@ describe('Detectors', () => {
cy.get(`[data-test-subj="define-detector-select-data-source"]`).type(
`${cypressIndexWindows}{enter}`
);

cy.get('.reviewFieldMappings').should('be.visible');
});

it('...should show field mappings if rule selection is changed', () => {
Expand Down
2 changes: 1 addition & 1 deletion ...eateDetector/components/ConfigureAlerts/components/AlertCondition/AlertConditionPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -311,7 +311,7 @@ export default class AlertConditionPanel extends Component<
error={getNameErrorMessage(name, nameIsInvalid, nameFieldTouched)}
>
<EuiFieldText
placeholder={'Enter a name for the alert condition.'}
placeholder={'Enter a name to describe the alert condition'}
readOnly={false}
value={name}
onBlur={this.onNameBlur}
Expand Down
4 changes: 2 additions & 2 deletions ...ConfigureAlerts/components/AlertCondition/__snapshots__/AlertConditionPanel.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ Object {
class="euiFieldText"
data-test-subj="alert-condition-name-0"
id="some_html_id"
placeholder="Enter a name for the alert condition."
placeholder="Enter a name to describe the alert condition"
type="text"
value="alert_name"
/>
Expand Down Expand Up @@ -779,7 +779,7 @@ Object {
class="euiFieldText"
data-test-subj="alert-condition-name-0"
id="some_html_id"
placeholder="Enter a name for the alert condition."
placeholder="Enter a name to describe the alert condition"
type="text"
value="alert_name"
/>
Expand Down
97 changes: 67 additions & 30 deletions public/pages/CreateDetector/components/ConfigureAlerts/containers/ConfigureAlerts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,17 @@ import { RouteComponentProps } from 'react-router-dom';
import {
EuiAccordion,
EuiButton,
EuiCallOut,
EuiFlexGroup,
EuiFlexItem,
EuiHorizontalRule,
EuiPanel,
EuiSpacer,
EuiTitle,
EuiText,
EuiTitle,
} from '@elastic/eui';
import { createDetectorSteps } from '../../../utils/constants';
import { MAX_ALERT_CONDITIONS } from '../utils/constants';
import AlertConditionPanel from '../components/AlertCondition';
import { Detector } from '../../../../../../models/interfaces';
import { DetectorCreationStep } from '../../../models/types';
import { CreateDetectorRulesOptions } from '../../../../../models/types';
import { NotificationChannelTypeOptions } from '../models/interfaces';
Expand All @@ -30,6 +31,7 @@ import { NotificationsService } from '../../../../../services';
import { validateName } from '../../../../../utils/validation';
import { CoreServicesContext } from '../../../../../components/core_services';
import { BREADCRUMBS } from '../../../../../utils/constants';
import { Detector } from '../../../../../../types';

interface ConfigureAlertsProps extends RouteComponentProps {
detector: Detector;
Expand All @@ -39,6 +41,7 @@ interface ConfigureAlertsProps extends RouteComponentProps {
updateDataValidState: (step: DetectorCreationStep, isValid: boolean) => void;
notificationsService: NotificationsService;
hasNotificationPlugin: boolean;
skipAndConfigureHandler: () => void;
}

interface ConfigureAlertsState {
Expand Down Expand Up @@ -77,12 +80,10 @@ export default class ConfigureAlerts extends Component<ConfigureAlertsProps, Con
componentDidMount = async () => {
this.updateBreadcrumbs();
const {
isEdit,
detector,
detector: { triggers },
} = this.props;
this.getNotificationChannels();

if (triggers.length === 0) {
this.addCondition();
}
Expand Down Expand Up @@ -114,9 +115,11 @@ export default class ConfigureAlerts extends Component<ConfigureAlertsProps, Con
};

onAlertTriggerChanged = (newDetector: Detector): void => {
const isTriggerDataValid = newDetector.triggers.every((trigger) => {
return !!trigger.name && validateName(trigger.name) && trigger.severity;
});
const isTriggerDataValid =
!newDetector.triggers.length ||
newDetector.triggers.every((trigger) => {
return !!trigger.name && validateName(trigger.name) && trigger.severity;
});

this.props.changeDetector(newDetector);
this.props.updateDataValidState(DetectorCreationStep.CONFIGURE_ALERTS, isTriggerDataValid);
Expand All @@ -135,22 +138,45 @@ export default class ConfigureAlerts extends Component<ConfigureAlertsProps, Con
const {
isEdit,
detector: { triggers },
skipAndConfigureHandler,
} = this.props;

let getPageTitle = (): string | JSX.Element => {
if (isEdit) {
return <>Alert triggers (${triggers.length})</>;
}

return (
<EuiFlexGroup alignItems={'center'}>
<EuiFlexItem grow={true}>
<EuiTitle size={'m'}>
<h3>Set up alert triggers</h3>
</EuiTitle>
<EuiText size="s" color="subdued">
Get notified when specific rule conditions are found by the detector.
</EuiText>
</EuiFlexItem>
{triggers?.length && (
<EuiFlexItem grow={false}>
<EuiButton
onClick={() => {
const { changeDetector, detector } = this.props;
changeDetector({ ...detector, triggers: [] });
skipAndConfigureHandler();
}}
>
Skip and configure later
</EuiButton>
</EuiFlexItem>
)}
</EuiFlexGroup>
);
};

const { loading, notificationChannels } = this.state;
return (
<div>
<EuiTitle size={'m'}>
<h3>
{isEdit
? 'Edit alert triggers'
: createDetectorSteps[DetectorCreationStep.CONFIGURE_ALERTS].title +
` (${triggers.length})`}
</h3>
</EuiTitle>

<EuiText size="s" color="subdued">
Get notified when specific rule conditions are found by the detector.
</EuiText>
{getPageTitle()}

<EuiSpacer size={'m'} />

Expand All @@ -162,19 +188,15 @@ export default class ConfigureAlerts extends Component<ConfigureAlertsProps, Con
id={`alert-condition-${index}`}
buttonContent={
<EuiTitle>
<h4>{alertCondition.name}</h4>
<h4>{isEdit ? alertCondition.name : 'Alert trigger'}</h4>
</EuiTitle>
}
paddingSize={'none'}
initialIsOpen={true}
extraAction={
triggers.length > 1 ? (
<EuiButton color="danger" onClick={() => this.onDelete(index)}>
Remove alert trigger
</EuiButton>
) : (
<></>
)
<EuiButton color="danger" onClick={() => this.onDelete(index)}>
Remove
</EuiButton>
}
>
<EuiHorizontalRule margin={'xs'} />
Expand All @@ -193,11 +215,26 @@ export default class ConfigureAlerts extends Component<ConfigureAlertsProps, Con
</EuiPanel>
</div>
))}
{!triggers?.length && (
<EuiCallOut
color={'primary'}
iconType={'iInCircle'}
title={
<>
<p>
We recommend creating alert triggers to get notified when specific conditions are
found by the detector.
</p>
<p>You can also configure alert triggers after the detector is created.</p>
</>
}
/>
)}

<EuiSpacer size={'m'} />

<EuiButton disabled={triggers.length >= MAX_ALERT_CONDITIONS} onClick={this.addCondition}>
{`Add ${triggers.length > 0 ? 'another' : 'an'} alert condition`}
{triggers.length > 0 ? 'Add another alert trigger' : 'Add alert triggers'}
</EuiButton>
</div>
);
Expand Down
5 changes: 3 additions & 2 deletions public/pages/CreateDetector/containers/CreateDetector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -312,6 +312,7 @@ export default class CreateDetector extends Component<CreateDetectorProps, Creat
updateDataValidState={this.updateDataValidState}
notificationsService={services.notificationsService}
hasNotificationPlugin={this.state.plugins.includes(OS_NOTIFICATION_PLUGIN)}
skipAndConfigureHandler={this.onNextClick}
/>
);
case DetectorCreationStep.REVIEW_CREATE:
Expand Down Expand Up @@ -355,7 +356,7 @@ export default class CreateDetector extends Component<CreateDetectorProps, Creat
{currentStep > DetectorCreationStep.DEFINE_DETECTOR && (
<EuiFlexItem grow={false}>
<EuiButton disabled={creatingDetector} onClick={this.onPreviousClick}>
Previous
Back
</EuiButton>
</EuiFlexItem>
)}
Expand All @@ -380,7 +381,7 @@ export default class CreateDetector extends Component<CreateDetectorProps, Creat
fill={true}
onClick={this.onCreateClick}
>
Create
Create detector
</EuiButton>
</EuiFlexItem>
)}
Expand Down
2 changes: 1 addition & 1 deletion public/pages/CreateDetector/utils/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export const createDetectorSteps: Record<DetectorCreationStep, DetectorCreationS
step: 1,
},
[DetectorCreationStep.CONFIGURE_ALERTS]: {
title: 'Set up alerts',
title: 'Set up alert triggers',
step: 2,
},
[DetectorCreationStep.REVIEW_CREATE]: {
Expand Down
7 changes: 3 additions & 4 deletions public/pages/Detectors/components/AlertTriggerView/AlertTriggerView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,15 +44,15 @@ export const AlertTriggerView: React.FC<AlertTriggerViewProps> = ({
const conditionRuleNames = ids.map((ruleId) => rules[ruleId]?._source.title);
return (
<div>
{orderPosition > 0 && <EuiHorizontalRule />}
<EuiSpacer size={'l'} />
{orderPosition > 0 && <EuiHorizontalRule margin={'m'} />}
{orderPosition === 0 && <EuiSpacer size={'s'} />}
<EuiAccordion
id={`alert-trigger-${orderPosition}`}
paddingSize={'m'}
initialIsOpen={false}
buttonContent={
<EuiText size="m">
<p>{`Alert on ${name}`}</p>
<p>{name}</p>
</EuiText>
}
>
Expand Down Expand Up @@ -104,7 +104,6 @@ export const AlertTriggerView: React.FC<AlertTriggerViewProps> = ({
},
])}
</EuiAccordion>
<EuiSpacer size={'m'} />
</div>
);
};
20 changes: 4 additions & 16 deletions .../pages/Detectors/components/AlertTriggerView/__snapshots__/AlertTriggerView.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,7 @@ Object {
<div>
<div>
<hr
class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
/>
<div
class="euiSpacer euiSpacer--l"
class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
/>
<div
class="euiAccordion"
Expand All @@ -37,7 +34,7 @@ Object {
class="euiText euiText--medium"
>
<p>
Alert on alert_name
alert_name
</p>
</div>
</span>
Expand Down Expand Up @@ -362,19 +359,13 @@ Object {
</div>
</div>
</div>
<div
class="euiSpacer euiSpacer--m"
/>
</div>
</div>
</body>,
"container": <div>
<div>
<hr
class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
/>
<div
class="euiSpacer euiSpacer--l"
class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
/>
<div
class="euiAccordion"
Expand All @@ -401,7 +392,7 @@ Object {
class="euiText euiText--medium"
>
<p>
Alert on alert_name
alert_name
</p>
</div>
</span>
Expand Down Expand Up @@ -726,9 +717,6 @@ Object {
</div>
</div>
</div>
<div
class="euiSpacer euiSpacer--m"
/>
</div>
</div>,
"debug": [Function],
Expand Down
2 changes: 1 addition & 1 deletion public/pages/Detectors/components/FieldMappingsView/FieldMappingsView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const columns: EuiBasicTableColumn<FieldMappingsTableItem>[] = [
},
{
field: 'logFieldName',
name: 'Mapped index field name',
name: 'Mapped log field name',
},
];

Expand Down
Loading

0 comments on commit c8c288a

Please sign in to comment.