Skip to content

Commit

Permalink
[SIEM] [Detection Engine] Add edit on rule creation (#51670)
Browse files Browse the repository at this point in the history 
* Add creation rule on Detection Engine

* review + bug fixes

* review II + clean up

* fix persistence saved query

* fix eui prop + add type security to add rule

* fix more bug from review III

* review IV

* add edit on creation on rule

* review

* fix status icon color

* fix filter label translation
  • Loading branch information
@XavierM
XavierM authored Nov 28, 2019
1 parent 3ed18b4 commit 60896e8
Show file tree
Hide file tree
Showing 18 changed files with 634 additions and 127 deletions.
76 changes: 48 additions & 28 deletions ...plugins/siem/public/pages/detection_engine/create_rule/components/add_item_form/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
*/

import { EuiButtonEmpty, EuiButtonIcon, EuiFormRow, EuiFieldText, EuiSpacer } from '@elastic/eui';
import { isEmpty, isEqual } from 'lodash/fp';
import { isEmpty } from 'lodash/fp';
import React, { ChangeEvent, useCallback, useEffect, useState, useRef } from 'react';

import { FieldHook, getFieldValidityAndErrorMessage } from '../shared_imports';
Expand All @@ -21,15 +21,22 @@ interface AddItemProps {

export const AddItem = ({ addText, dataTestSubj, field, idAria, isDisabled }: AddItemProps) => {
const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
const [items, setItems] = useState(['']);
const [haveBeenKeyboardDeleted, setHaveBeenKeyboardDeleted] = useState(false);
// const [items, setItems] = useState(['']);
const [haveBeenKeyboardDeleted, setHaveBeenKeyboardDeleted] = useState(-1);

const lastInputRef = useRef<HTMLInputElement | null>(null);
const inputsRef = useRef<HTMLInputElement[]>([]);

const removeItem = useCallback(
(index: number) => {
const values = field.value as string[];
field.setValue([...values.slice(0, index), ...values.slice(index + 1)]);
inputsRef.current = [
...inputsRef.current.slice(0, index),
...inputsRef.current.slice(index + 1),
];
if (inputsRef.current[index] != null) {
inputsRef.current[index].value = 're-render';
}
},
[field]
);
Expand All @@ -38,16 +45,26 @@ export const AddItem = ({ addText, dataTestSubj, field, idAria, isDisabled }: Ad
const values = field.value as string[];
if (!isEmpty(values[values.length - 1])) {
field.setValue([...values, '']);
} else {
field.setValue(['']);
}
}, [field]);

const updateItem = useCallback(
(event: ChangeEvent<HTMLInputElement>, index: number) => {
event.persist();
const values = field.value as string[];
const value = event.target.value;
if (isEmpty(value)) {
setHaveBeenKeyboardDeleted(true);
field.setValue([...values.slice(0, index), ...values.slice(index + 1)]);
inputsRef.current = [
...inputsRef.current.slice(0, index),
...inputsRef.current.slice(index + 1),
];
setHaveBeenKeyboardDeleted(inputsRef.current.length - 1);
if (inputsRef.current[index] != null) {
inputsRef.current[index].value = 're-render';
}
} else {
field.setValue([...values.slice(0, index), value, ...values.slice(index + 1)]);
}
Expand All @@ -56,31 +73,30 @@ export const AddItem = ({ addText, dataTestSubj, field, idAria, isDisabled }: Ad
);

const handleLastInputRef = useCallback(
(element: HTMLInputElement | null) => {
lastInputRef.current = element;
(index: number, element: HTMLInputElement | null) => {
if (element != null) {
inputsRef.current = [
...inputsRef.current.slice(0, index),
element,
...inputsRef.current.slice(index + 1),
];
}
},
[lastInputRef]
[inputsRef]
);

useEffect(() => {
if (!isEqual(field.value, items)) {
setItems(
isEmpty(field.value)
? ['']
: haveBeenKeyboardDeleted
? [...(field.value as string[]), '']
: (field.value as string[])
);
setHaveBeenKeyboardDeleted(false);
}
}, [field.value]);

useEffect(() => {
if (!haveBeenKeyboardDeleted && lastInputRef != null && lastInputRef.current != null) {
lastInputRef.current.focus();
if (
haveBeenKeyboardDeleted !== -1 &&
!isEmpty(inputsRef.current) &&
inputsRef.current[haveBeenKeyboardDeleted] != null
) {
inputsRef.current[haveBeenKeyboardDeleted].focus();
setHaveBeenKeyboardDeleted(-1);
}
}, [haveBeenKeyboardDeleted, lastInputRef]);
}, [haveBeenKeyboardDeleted, inputsRef.current]);

const values = field.value as string[];
return (
<EuiFormRow
label={field.label}
Expand All @@ -92,10 +108,15 @@ export const AddItem = ({ addText, dataTestSubj, field, idAria, isDisabled }: Ad
describedByIds={idAria ? [idAria] : undefined}
>
<>
{items.map((item, index) => {
{values.map((item, index) => {
const euiFieldProps = {
disabled: isDisabled,
...(index === items.length - 1 ? { inputRef: handleLastInputRef } : {}),
...(index === values.length - 1
? { inputRef: handleLastInputRef.bind(null, index) }
: {}),
...(inputsRef.current[index] != null && inputsRef.current[index].value !== item
? { value: item }
: {}),
};
return (
<div key={index}>
Expand All @@ -109,13 +130,12 @@ export const AddItem = ({ addText, dataTestSubj, field, idAria, isDisabled }: Ad
aria-label={I18n.DELETE}
/>
}
value={item}
onChange={e => updateItem(e, index)}
compressed
fullWidth
{...euiFieldProps}
/>
{items.length - 1 !== index && <EuiSpacer size="s" />}
{values.length - 1 !== index && <EuiSpacer size="s" />}
</div>
);
})}
Expand Down
93 changes: 93 additions & 0 deletions ...em/public/pages/detection_engine/create_rule/components/description_step/filter_label.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
/*
* 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, { memo } from 'react';
import { EuiTextColor } from '@elastic/eui';
import { i18n } from '@kbn/i18n';

import { esFilters } from '../../../../../../../../../../src/plugins/data/public';
import { existsOperator, isOneOfOperator } from './filter_operator';

interface Props {
filter: esFilters.Filter;
valueLabel?: string;
}

export const FilterLabel = memo<Props>(({ filter, valueLabel }) => {
const prefixText = filter.meta.negate
? ` ${i18n.translate('xpack.siem.detectionEngine.createRule.filterLabel.negatedFilterPrefix', {
defaultMessage: 'NOT ',
})}`
: '';
const prefix =
filter.meta.negate && !filter.meta.disabled ? (
<EuiTextColor color="danger">{prefixText}</EuiTextColor>
) : (
prefixText
);

if (filter.meta.alias !== null) {
return (
<>
{prefix}
{filter.meta.alias}
</>
);
}

switch (filter.meta.type) {
case esFilters.FILTERS.EXISTS:
return (
<>
{prefix}
{`${filter.meta.key}: ${existsOperator.message}`}
</>
);
case esFilters.FILTERS.GEO_BOUNDING_BOX:
return (
<>
{prefix}
{`${filter.meta.key}: ${valueLabel}`}
</>
);
case esFilters.FILTERS.GEO_POLYGON:
return (
<>
{prefix}
{`${filter.meta.key}: ${valueLabel}`}
</>
);
case esFilters.FILTERS.PHRASES:
return (
<>
{prefix}
{filter.meta.key} {isOneOfOperator.message} {valueLabel}
</>
);
case esFilters.FILTERS.QUERY_STRING:
return (
<>
{prefix}
{valueLabel}
</>
);
case esFilters.FILTERS.PHRASE:
case esFilters.FILTERS.RANGE:
return (
<>
{prefix}
{`${filter.meta.key}: ${valueLabel}`}
</>
);
default:
return (
<>
{prefix}
{JSON.stringify(filter.query)}
</>
);
}
});
119 changes: 119 additions & 0 deletions ...public/pages/detection_engine/create_rule/components/description_step/filter_operator.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
/*
* 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';

import { esFilters } from '../../../../../../../../../../src/plugins/data/public';

export interface Operator {
message: string;
type: esFilters.FILTERS;
negate: boolean;
fieldTypes?: string[];
}

export const isOperator = {
message: i18n.translate(
'xpack.siem.detectionEngine.createRule.filterLabel.isOperatorOptionLabel',
{
defaultMessage: 'is',
}
),
type: esFilters.FILTERS.PHRASE,
negate: false,
};

export const isNotOperator = {
message: i18n.translate(
'xpack.siem.detectionEngine.createRule.filterLabel.isNotOperatorOptionLabel',
{
defaultMessage: 'is not',
}
),
type: esFilters.FILTERS.PHRASE,
negate: true,
};

export const isOneOfOperator = {
message: i18n.translate(
'xpack.siem.detectionEngine.createRule.filterLabel.isOneOfOperatorOptionLabel',
{
defaultMessage: 'is one of',
}
),
type: esFilters.FILTERS.PHRASES,
negate: false,
fieldTypes: ['string', 'number', 'date', 'ip', 'geo_point', 'geo_shape'],
};

export const isNotOneOfOperator = {
message: i18n.translate(
'xpack.siem.detectionEngine.createRule.filterLabel.isNotOneOfOperatorOptionLabel',
{
defaultMessage: 'is not one of',
}
),
type: esFilters.FILTERS.PHRASES,
negate: true,
fieldTypes: ['string', 'number', 'date', 'ip', 'geo_point', 'geo_shape'],
};

export const isBetweenOperator = {
message: i18n.translate(
'xpack.siem.detectionEngine.createRule.filterLabel.isBetweenOperatorOptionLabel',
{
defaultMessage: 'is between',
}
),
type: esFilters.FILTERS.RANGE,
negate: false,
fieldTypes: ['number', 'date', 'ip'],
};

export const isNotBetweenOperator = {
message: i18n.translate(
'xpack.siem.detectionEngine.createRule.filterLabel.isNotBetweenOperatorOptionLabel',
{
defaultMessage: 'is not between',
}
),
type: esFilters.FILTERS.RANGE,
negate: true,
fieldTypes: ['number', 'date', 'ip'],
};

export const existsOperator = {
message: i18n.translate(
'xpack.siem.detectionEngine.createRule.filterLabel.existsOperatorOptionLabel',
{
defaultMessage: 'exists',
}
),
type: esFilters.FILTERS.EXISTS,
negate: false,
};

export const doesNotExistOperator = {
message: i18n.translate(
'xpack.siem.detectionEngine.createRule.filterLabel.doesNotExistOperatorOptionLabel',
{
defaultMessage: 'does not exist',
}
),
type: esFilters.FILTERS.EXISTS,
negate: true,
};

export const FILTER_OPERATORS: Operator[] = [
isOperator,
isNotOperator,
isOneOfOperator,
isNotOneOfOperator,
isBetweenOperator,
isNotBetweenOperator,
existsOperator,
doesNotExistOperator,
];
Loading

0 comments on commit 60896e8

Please sign in to comment.