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

[Ingest Node Pipelines] New patterns component for Grok processor #76533

Merged
merged 26 commits into from
Sep 24, 2020
Merged

[Ingest Node Pipelines] New patterns component for Grok processor #76533

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
329188d
wip, issues with use fields getting cleared somehow
jloleysens Aug 21, 2020
ca45ac6
New drag and drop text list component
jloleysens Sep 2, 2020
2c87c65
remove box shadow from editor fields
jloleysens Sep 3, 2020
10d1d12
Style grok patterns based on drag and drop in component templates
jloleysens Sep 3, 2020
32228bc
fix i18n
jloleysens Sep 3, 2020
8f365fa
Merge branch 'master' of github.com:elastic/kibana into ingest-node/g…
jloleysens Sep 4, 2020
1be8bfc
update use_array - maintain the same API though
jloleysens Sep 4, 2020
e59e7de
Merge branch 'master' into ingest-node/grok/new-patterns-component-us…
elasticmachine Sep 7, 2020
f4a29c4
Merge branch 'master' into ingest-node/grok/new-patterns-component-us…
elasticmachine Sep 9, 2020
e4489fe
Merge branch 'master' of github.com:elastic/kibana into ingest-node/g…
jloleysens Sep 10, 2020
c8e6f1c
Grok processor should use the new use array interface
jloleysens Sep 10, 2020
8fd740c
fix patterns field validation to check validity of pattern entires
jloleysens Sep 10, 2020
1dd2f78
fix drag item styling
jloleysens Sep 10, 2020
25ff6be
fix use of form in use effect and update behaviour of submit button
jloleysens Sep 10, 2020
cbc94d2
added smoke test for grok component
jloleysens Sep 10, 2020
dec25dc
fix i18n
jloleysens Sep 14, 2020
7a847b0
Merge branch 'master' into ingest-node/grok/new-patterns-component-us…
elasticmachine Sep 14, 2020
9f65205
Merge branch 'master' into ingest-node/grok/new-patterns-component-us…
elasticmachine Sep 14, 2020
6852cb8
Implement PR feedback
jloleysens Sep 14, 2020
6a85bac
Merge branch 'master' of github.com:elastic/kibana into ingest-node/g…
jloleysens Sep 18, 2020
f5c707b
Merge branch 'master' into ingest-node/grok/new-patterns-component-us…
elasticmachine Sep 18, 2020
c4235f9
Implemented design feedback
jloleysens Sep 18, 2020
eb632de
Merge branch 'master' into ingest-node/grok/new-patterns-component-us…
elasticmachine Sep 21, 2020
e856141
Merge branch 'master' into ingest-node/grok/new-patterns-component-us…
elasticmachine Sep 22, 2020
9e72584
Merge branch 'master' into ingest-node/grok/new-patterns-component-us…
elasticmachine Sep 22, 2020
de6f2d6
Merge branch 'master' into ingest-node/grok/new-patterns-component-us…
elasticmachine Sep 24, 2020
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
4 changes: 4 additions & 0 deletions ...ors_editor/components/manage_processor_form/field_components/drag_and_drop_text_list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@
margin-left: $euiSizeS;
}

&__errorIcon {
margin-left: -$euiSizeXL;
}

&__item {
background-color: $euiColorEmptyShade;
padding-top: $euiSizeM;
Expand Down
65 changes: 49 additions & 16 deletions ...sors_editor/components/manage_processor_form/field_components/drag_and_drop_text_list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
EuiPanel,
EuiSpacer,
EuiFieldText,
EuiIconTip,
} from '@elastic/eui';

import {
Expand Down Expand Up @@ -77,7 +78,13 @@ function DragAndDropTextListComponent({
<EuiDroppable droppableId={droppableId}>
{value.map((item, idx) => {
return (
<EuiDraggable spacing="none" draggableId={String(item.id)} index={idx} key={item.id}>
<EuiDraggable
customDragHandle
spacing="none"
draggableId={String(item.id)}
index={idx}
key={item.id}
>
{(provided) => {
return (
<EuiFlexGroup
Expand Down Expand Up @@ -105,27 +112,53 @@ function DragAndDropTextListComponent({
readDefaultValueOnForm={!item.isNew}
>
{(field) => {
const { isInvalid } = getFieldValidityAndErrorMessage(field);
const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(
field
);
return (
<EuiFieldText
isInvalid={isInvalid}
value={field.value}
onChange={field.onChange}
compressed
fullWidth
/>
<EuiFlexGroup gutterSize="none" alignItems="center">
<EuiFlexItem>
<EuiFieldText
isInvalid={isInvalid}
value={field.value}
onChange={field.onChange}
compressed
fullWidth
/>
</EuiFlexItem>
{typeof errorMessage === 'string' && (
<EuiFlexItem grow={false}>
<div className="pipelineProcessorsEditor__form__dragAndDropList__errorIcon">
<EuiIconTip
aria-label={errorMessage}
content={errorMessage}
type="alert"
color="danger"
/>
</div>
</EuiFlexItem>
)}
</EuiFlexGroup>
);
}}
</UseField>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonIcon
aria-label={i18nTexts.removeItemButtonAriaLabel}
className="pipelineProcessorsEditor__form__dragAndDropList__removeButton"
iconType="minusInCircle"
color="danger"
onClick={() => onRemove(item.id)}
/>
{value.length > 1 ? (
<EuiButtonIcon
aria-label={i18nTexts.removeItemButtonAriaLabel}
className="pipelineProcessorsEditor__form__dragAndDropList__removeButton"
iconType="minusInCircle"
color="danger"
onClick={() => onRemove(item.id)}
/>
) : (
// Render a no-op placeholder button
<EuiIcon
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool! I didn't know about the "empty" icon 👍

className="pipelineProcessorsEditor__form__dragAndDropList__removeButton"
type="empty"
/>
)}
</EuiFlexItem>
</EuiFlexGroup>
);
Expand Down
6 changes: 4 additions & 2 deletions ...ne_processors_editor/components/manage_processor_form/manage_processor_form.container.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,12 @@ export const ManageProcessorForm: FunctionComponent<Props> = ({
onSubmit: handleSubmit,
});

const { subscribe } = form;

useEffect(() => {
const subscription = form.subscribe(onFormUpdate);
const subscription = subscribe(onFormUpdate);
return subscription.unsubscribe;
}, [onFormUpdate, form]);
}, [onFormUpdate, subscribe]);

return (
<ViewComponent
Expand Down
13 changes: 10 additions & 3 deletions ...ents/pipeline_processors_editor/components/manage_processor_form/processors/grok.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,6 @@ window.Worker = function () {
(this as any).terminate = () => {};
};

// disable all react-beautiful-dnd development warnings
(window as any)['__react-beautiful-dnd-disable-dev-warnings'] = true;

describe('<Grok/>', () => {
const setup = (props?: { defaultValue: Record<string, any> }) => {
function MyComponent() {
Expand All @@ -43,6 +40,16 @@ describe('<Grok/>', () => {
}
return mount(<MyComponent />);
};

beforeAll(() => {
// disable all react-beautiful-dnd development warnings
(window as any)['__react-beautiful-dnd-disable-dev-warnings'] = true;
});

afterAll(() => {
// enable all react-beautiful-dnd development warnings
(window as any)['__react-beautiful-dnd-disable-dev-warnings'] = false;
});
test('smoke', () => {
setup({ defaultValue: { type: 'grok', fields: { patterns: ['test'] } } });
});
Expand Down