if the editor is not visible
-
- )}
-
+ );
+ }}
+
);
};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout_provider.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout_provider.tsx
index 6dcedca6085af..dd2439433fc41 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout_provider.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_request_flyout/pipeline_request_flyout_provider.tsx
@@ -4,13 +4,24 @@
* you may not use this file except in compliance with the Elastic License.
*/
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, FunctionComponent } from 'react';
import { Pipeline } from '../../../../../common/types';
import { useFormContext } from '../../../../shared_imports';
+
+import { ReadProcessorsFunction } from '../types';
+
import { PipelineRequestFlyout } from './pipeline_request_flyout';
-export const PipelineRequestFlyoutProvider = ({ closeFlyout }: { closeFlyout: () => void }) => {
+interface Props {
+ closeFlyout: () => void;
+ readProcessors: ReadProcessorsFunction;
+}
+
+export const PipelineRequestFlyoutProvider: FunctionComponent
= ({
+ closeFlyout,
+ readProcessors,
+}) => {
const form = useFormContext();
const [formData, setFormData] = useState({} as Pipeline);
@@ -25,5 +36,10 @@ export const PipelineRequestFlyoutProvider = ({ closeFlyout }: { closeFlyout: ()
return subscription.unsubscribe;
}, [form]);
- return ;
+ return (
+
+ );
};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_test_flyout/pipeline_test_flyout_provider.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_test_flyout/pipeline_test_flyout_provider.tsx
index 351478394595a..7f91672d64df4 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_test_flyout/pipeline_test_flyout_provider.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_test_flyout/pipeline_test_flyout_provider.tsx
@@ -8,11 +8,19 @@ import React, { useState, useEffect } from 'react';
import { Pipeline } from '../../../../../common/types';
import { useFormContext } from '../../../../shared_imports';
+
+import { ReadProcessorsFunction } from '../types';
+
import { PipelineTestFlyout, PipelineTestFlyoutProps } from './pipeline_test_flyout';
-type Props = Omit;
+interface Props extends Omit {
+ readProcessors: ReadProcessorsFunction;
+}
-export const PipelineTestFlyoutProvider: React.FunctionComponent = ({ closeFlyout }) => {
+export const PipelineTestFlyoutProvider: React.FunctionComponent = ({
+ closeFlyout,
+ readProcessors,
+}) => {
const form = useFormContext();
const [formData, setFormData] = useState({} as Pipeline);
const [isFormDataValid, setIsFormDataValid] = useState(false);
@@ -31,7 +39,7 @@ export const PipelineTestFlyoutProvider: React.FunctionComponent = ({ clo
return (
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/types.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/types.ts
new file mode 100644
index 0000000000000..bd74f09546ff4
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/types.ts
@@ -0,0 +1,9 @@
+/*
+ * 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 { Pipeline } from '../../../../common/types';
+
+export type ReadProcessorsFunction = () => Pick;
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.ts
new file mode 100644
index 0000000000000..acd61a9bbd01e
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.helpers.ts
@@ -0,0 +1,36 @@
+/*
+ * 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 { registerTestBed, TestBed } from '../../../../../../../test_utils';
+import { PipelineProcessorsEditor, Props } from '../pipeline_processors_editor.container';
+
+const testBedSetup = registerTestBed(PipelineProcessorsEditor, {
+ doMountAsync: false,
+});
+
+export interface SetupResult extends TestBed {
+ actions: {
+ toggleOnFailure: () => void;
+ };
+}
+
+export const setup = async (props: Props): Promise => {
+ const testBed = await testBedSetup(props);
+ const toggleOnFailure = () => {
+ const { find } = testBed;
+ find('pipelineEditorOnFailureToggle').simulate('click');
+ };
+
+ return {
+ ...testBed,
+ actions: { toggleOnFailure },
+ };
+};
+
+type TestSubject =
+ | 'pipelineEditorDoneButton'
+ | 'pipelineEditorOnFailureToggle'
+ | 'pipelineEditorOnFailureTree';
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.test.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.test.tsx
new file mode 100644
index 0000000000000..758d6f5e620ce
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.test.tsx
@@ -0,0 +1,67 @@
+/*
+ * 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 { setup } from './pipeline_processors_editor.helpers';
+import { Pipeline } from '../../../../../common/types';
+
+const testProcessors: Pick = {
+ processors: [
+ {
+ script: {
+ source: 'ctx._type = null',
+ },
+ },
+ {
+ gsub: {
+ field: '_index',
+ pattern: '(.monitoring-\\w+-)6(-.+)',
+ replacement: '$17$2',
+ },
+ },
+ ],
+};
+
+describe('Pipeline Editor', () => {
+ it('provides the same data out it got in if nothing changes', async () => {
+ const onUpdate = jest.fn();
+
+ await setup({
+ value: {
+ ...testProcessors,
+ },
+ onFlyoutOpen: jest.fn(),
+ onUpdate,
+ isTestButtonDisabled: false,
+ onTestPipelineClick: jest.fn(),
+ learnMoreAboutProcessorsUrl: 'test',
+ learnMoreAboutOnFailureProcessorsUrl: 'test',
+ });
+
+ const {
+ calls: [[arg]],
+ } = onUpdate.mock;
+
+ expect(arg.getData()).toEqual(testProcessors);
+ });
+
+ it('toggles the on-failure processors', async () => {
+ const { actions, exists } = await setup({
+ value: {
+ ...testProcessors,
+ },
+ onFlyoutOpen: jest.fn(),
+ onUpdate: jest.fn(),
+ isTestButtonDisabled: false,
+ onTestPipelineClick: jest.fn(),
+ learnMoreAboutProcessorsUrl: 'test',
+ learnMoreAboutOnFailureProcessorsUrl: 'test',
+ });
+
+ expect(exists('pipelineEditorOnFailureTree')).toBe(false);
+ actions.toggleOnFailure();
+ expect(exists('pipelineEditorOnFailureTree')).toBe(true);
+ });
+});
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/add_processor_button.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/add_processor_button.tsx
new file mode 100644
index 0000000000000..5f9bf87ceca1e
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/add_processor_button.tsx
@@ -0,0 +1,32 @@
+/*
+ * 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, { FunctionComponent } from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiButtonEmpty } from '@elastic/eui';
+import { usePipelineProcessorsContext } from '../context';
+
+export interface Props {
+ onClick: () => void;
+}
+
+export const AddProcessorButton: FunctionComponent = ({ onClick }) => {
+ const {
+ state: { editor },
+ } = usePipelineProcessorsContext();
+ return (
+
+ {i18n.translate('xpack.ingestPipelines.pipelineEditor.addProcessorButtonLabel', {
+ defaultMessage: 'Add a processor',
+ })}
+
+ );
+};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/index.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/index.ts
new file mode 100644
index 0000000000000..cb5d5a10e9f42
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/index.ts
@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+
+export { SettingsFormFlyout, OnSubmitHandler } from './settings_form_flyout';
+
+export { ProcessorSettingsForm, ProcessorSettingsFromOnSubmitArg } from './processor_settings_form';
+
+export { ProcessorsTree, ProcessorInfo, OnActionHandler } from './processors_tree';
+
+export { PipelineProcessorsEditorItem } from './pipeline_processors_editor_item/pipeline_processors_editor_item';
+
+export { ProcessorRemoveModal } from './processor_remove_modal';
+
+export { ProcessorsTitleAndTestButton } from './processors_title_and_test_button';
+
+export { OnFailureProcessorsTitle } from './on_failure_processors_title';
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/on_failure_processors_title.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/on_failure_processors_title.tsx
new file mode 100644
index 0000000000000..1c8edac7cfd64
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/on_failure_processors_title.tsx
@@ -0,0 +1,52 @@
+/*
+ * 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 { EuiFlexGroup, EuiFlexItem, EuiLink, EuiText, EuiTitle } from '@elastic/eui';
+import React, { FunctionComponent } from 'react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+import { usePipelineProcessorsContext } from '../context';
+
+export const OnFailureProcessorsTitle: FunctionComponent = () => {
+ const { links } = usePipelineProcessorsContext();
+ return (
+
+
+
+
+
+
+
+
+
+ {i18n.translate(
+ 'xpack.ingestPipelines.pipelineEditor.onFailureProcessorsDocumentationLink',
+ {
+ defaultMessage: 'Learn more.',
+ }
+ )}
+
+ ),
+ }}
+ />
+
+
+
+ );
+};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/context_menu.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/context_menu.tsx
new file mode 100644
index 0000000000000..bc7d6fdcff357
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/context_menu.tsx
@@ -0,0 +1,84 @@
+/*
+ * 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, { FunctionComponent, useState } from 'react';
+
+import { EuiContextMenuItem, EuiContextMenuPanel, EuiPopover, EuiButtonIcon } from '@elastic/eui';
+
+import { editorItemMessages } from './messages';
+
+interface Props {
+ disabled: boolean;
+ showAddOnFailure: boolean;
+ onDuplicate: () => void;
+ onDelete: () => void;
+ onAddOnFailure: () => void;
+}
+
+export const ContextMenu: FunctionComponent = ({
+ showAddOnFailure,
+ onDuplicate,
+ onAddOnFailure,
+ onDelete,
+ disabled,
+}) => {
+ const [isOpen, setIsOpen] = useState(false);
+
+ const contextMenuItems = [
+ {
+ setIsOpen(false);
+ onDuplicate();
+ }}
+ >
+ {editorItemMessages.duplicateButtonLabel}
+ ,
+ showAddOnFailure ? (
+ {
+ setIsOpen(false);
+ onAddOnFailure();
+ }}
+ >
+ {editorItemMessages.addOnFailureButtonLabel}
+
+ ) : undefined,
+ {
+ setIsOpen(false);
+ onDelete();
+ }}
+ >
+ {editorItemMessages.deleteButtonLabel}
+ ,
+ ].filter(Boolean) as JSX.Element[];
+
+ return (
+ setIsOpen(false)}
+ button={
+ setIsOpen((v) => !v)}
+ iconType="boxesHorizontal"
+ aria-label={editorItemMessages.moreButtonAriaLabel}
+ />
+ }
+ >
+
+
+ );
+};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/index.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/index.ts
new file mode 100644
index 0000000000000..02bafdb326024
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/index.ts
@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export { PipelineProcessorsEditorItem, Handlers } from './pipeline_processors_editor_item';
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/inline_text_input.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/inline_text_input.tsx
new file mode 100644
index 0000000000000..e0b67bc907ca9
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/inline_text_input.tsx
@@ -0,0 +1,75 @@
+/*
+ * 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, { FunctionComponent, useState, useEffect, useCallback } from 'react';
+import { EuiFieldText, EuiText, keyCodes } from '@elastic/eui';
+
+export interface Props {
+ placeholder: string;
+ ariaLabel: string;
+ onChange: (value: string) => void;
+ text?: string;
+}
+
+export const InlineTextInput: FunctionComponent = ({
+ placeholder,
+ text,
+ ariaLabel,
+ onChange,
+}) => {
+ const [isShowingTextInput, setIsShowingTextInput] = useState(false);
+ const [textValue, setTextValue] = useState(text ?? '');
+
+ const content = isShowingTextInput ? (
+ el?.focus()}
+ onChange={(event) => setTextValue(event.target.value)}
+ />
+ ) : (
+
+ {text || {placeholder}}
+
+ );
+
+ const submitChange = useCallback(() => {
+ setIsShowingTextInput(false);
+ onChange(textValue);
+ }, [setIsShowingTextInput, onChange, textValue]);
+
+ useEffect(() => {
+ const keyboardListener = (event: KeyboardEvent) => {
+ if (event.keyCode === keyCodes.ESCAPE || event.code === 'Escape') {
+ setIsShowingTextInput(false);
+ }
+ if (event.keyCode === keyCodes.ENTER || event.code === 'Enter') {
+ submitChange();
+ }
+ };
+ if (isShowingTextInput) {
+ window.addEventListener('keyup', keyboardListener);
+ }
+ return () => {
+ window.removeEventListener('keyup', keyboardListener);
+ };
+ }, [isShowingTextInput, submitChange, setIsShowingTextInput]);
+
+ return (
+ setIsShowingTextInput(true)}
+ onBlur={submitChange}
+ >
+ {content}
+
+ );
+};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/messages.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/messages.ts
new file mode 100644
index 0000000000000..67dbf2708d665
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/messages.ts
@@ -0,0 +1,58 @@
+/*
+ * 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';
+
+export const editorItemMessages = {
+ moveButtonLabel: i18n.translate('xpack.ingestPipelines.pipelineEditor.item.moveButtonLabel', {
+ defaultMessage: 'Move this processor',
+ }),
+ editorButtonLabel: i18n.translate(
+ 'xpack.ingestPipelines.pipelineEditor.item.editButtonAriaLabel',
+ {
+ defaultMessage: 'Edit this processor',
+ }
+ ),
+ duplicateButtonLabel: i18n.translate(
+ 'xpack.ingestPipelines.pipelineEditor.item.moreMenu.duplicateButtonLabel',
+ {
+ defaultMessage: 'Duplicate this processor',
+ }
+ ),
+ addOnFailureButtonLabel: i18n.translate(
+ 'xpack.ingestPipelines.pipelineEditor.item.moreMenu.addOnFailureHandlerButtonLabel',
+ {
+ defaultMessage: 'Add on failure handler',
+ }
+ ),
+ cancelMoveButtonLabel: i18n.translate(
+ 'xpack.ingestPipelines.pipelineEditor.item.cancelMoveButtonAriaLabel',
+ {
+ defaultMessage: 'Cancel moving this processor',
+ }
+ ),
+ deleteButtonLabel: i18n.translate(
+ 'xpack.ingestPipelines.pipelineEditor.item.moreMenu.deleteButtonLabel',
+ {
+ defaultMessage: 'Delete',
+ }
+ ),
+ moreButtonAriaLabel: i18n.translate(
+ 'xpack.ingestPipelines.pipelineEditor.item.moreButtonAriaLabel',
+ {
+ defaultMessage: 'Show more actions for this processor',
+ }
+ ),
+ processorTypeLabel: ({ type }: { type: string }) =>
+ i18n.translate('xpack.ingestPipelines.pipelineEditor.item.textInputAriaLabel', {
+ defaultMessage: 'Provide a description for this {type} processor',
+ values: { type },
+ }),
+ descriptionPlaceholder: i18n.translate(
+ 'xpack.ingestPipelines.pipelineEditor.item.descriptionPlaceholder',
+ { defaultMessage: 'No description' }
+ ),
+};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.scss b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.scss
new file mode 100644
index 0000000000000..a17e644853847
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.scss
@@ -0,0 +1,17 @@
+.pipelineProcessorsEditor__item {
+ &__textContainer {
+ padding: 4px;
+ border-radius: 2px;
+
+ transition: border-color .3s;
+ border: 2px solid #FFF;
+
+ &:hover {
+ border: 2px solid $euiColorLightShade;
+ }
+ }
+ &__textInput {
+ height: 21px;
+ min-width: 100px;
+ }
+}
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx
new file mode 100644
index 0000000000000..0e47b3ef7cf88
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx
@@ -0,0 +1,145 @@
+/*
+ * 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, { FunctionComponent, memo } from 'react';
+import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiText, EuiToolTip } from '@elastic/eui';
+
+import { ProcessorInternal, ProcessorSelector } from '../../types';
+
+import { usePipelineProcessorsContext } from '../../context';
+
+import './pipeline_processors_editor_item.scss';
+
+import { InlineTextInput } from './inline_text_input';
+import { ContextMenu } from './context_menu';
+import { editorItemMessages } from './messages';
+
+export interface Handlers {
+ onMove: () => void;
+ onCancelMove: () => void;
+}
+
+export interface Props {
+ processor: ProcessorInternal;
+ selected: boolean;
+ handlers: Handlers;
+ selector: ProcessorSelector;
+ description?: string;
+}
+
+export const PipelineProcessorsEditorItem: FunctionComponent = memo(
+ ({ processor, description, handlers: { onCancelMove, onMove }, selector, selected }) => {
+ const {
+ state: { editor, processorsDispatch },
+ } = usePipelineProcessorsContext();
+
+ const disabled = editor.mode.id !== 'idle';
+ const isDarkBold =
+ editor.mode.id !== 'editingProcessor' || processor.id === editor.mode.arg.processor.id;
+
+ return (
+
+
+
+
+
+ {processor.type}
+
+
+
+ {
+ let nextOptions: Record;
+ if (!nextDescription) {
+ const { description: __, ...restOptions } = processor.options;
+ nextOptions = restOptions;
+ } else {
+ nextOptions = {
+ ...processor.options,
+ description: nextDescription,
+ };
+ }
+ processorsDispatch({
+ type: 'updateProcessor',
+ payload: {
+ processor: {
+ ...processor,
+ options: nextOptions,
+ },
+ selector,
+ },
+ });
+ }}
+ ariaLabel={editorItemMessages.processorTypeLabel({ type: processor.type })}
+ text={description}
+ placeholder={editorItemMessages.descriptionPlaceholder}
+ />
+
+
+ {
+ editor.setMode({
+ id: 'editingProcessor',
+ arg: { processor, selector },
+ });
+ }}
+ />
+
+
+ {selected ? (
+
+ ) : (
+
+
+
+ )}
+
+
+
+
+ {
+ editor.setMode({ id: 'creatingProcessor', arg: { selector } });
+ }}
+ onDelete={() => {
+ editor.setMode({ id: 'removingProcessor', arg: { selector } });
+ }}
+ onDuplicate={() => {
+ processorsDispatch({
+ type: 'duplicateProcessor',
+ payload: {
+ source: selector,
+ },
+ });
+ }}
+ />
+
+
+ );
+ }
+);
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_remove_modal.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_remove_modal.tsx
new file mode 100644
index 0000000000000..c38e470b36699
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_remove_modal.tsx
@@ -0,0 +1,54 @@
+/*
+ * 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 { FormattedMessage } from '@kbn/i18n/react';
+import React from 'react';
+import { EuiConfirmModal, EuiOverlayMask } from '@elastic/eui';
+import { ProcessorInternal, ProcessorSelector } from '../types';
+
+interface Props {
+ processor: ProcessorInternal;
+ selector: ProcessorSelector;
+ onResult: (arg: { confirmed: boolean; selector: ProcessorSelector }) => void;
+}
+
+export const ProcessorRemoveModal = ({ processor, onResult, selector }: Props) => {
+ return (
+
+
+ }
+ onCancel={() => onResult({ confirmed: false, selector })}
+ onConfirm={() => onResult({ confirmed: true, selector })}
+ cancelButtonText={
+
+ }
+ confirmButtonText={
+
+ }
+ >
+
+
+
+
+
+ );
+};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/index.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/index.ts
new file mode 100644
index 0000000000000..60a1aa0a96fb1
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/index.ts
@@ -0,0 +1,10 @@
+/*
+ * 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.
+ */
+
+export {
+ ProcessorSettingsForm,
+ ProcessorSettingsFromOnSubmitArg,
+} from './processor_settings_form.container';
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/map_processor_type_to_form.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/map_processor_type_to_form.tsx
new file mode 100644
index 0000000000000..e8164a0057d39
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/map_processor_type_to_form.tsx
@@ -0,0 +1,56 @@
+/*
+ * 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 { FunctionComponent } from 'react';
+
+// import { SetProcessor } from './processors/set';
+// import { Gsub } from './processors/gsub';
+
+const mapProcessorTypeToForm = {
+ append: undefined, // TODO: Implement
+ bytes: undefined, // TODO: Implement
+ circle: undefined, // TODO: Implement
+ convert: undefined, // TODO: Implement
+ csv: undefined, // TODO: Implement
+ date: undefined, // TODO: Implement
+ date_index_name: undefined, // TODO: Implement
+ dissect: undefined, // TODO: Implement
+ dot_expander: undefined, // TODO: Implement
+ drop: undefined, // TODO: Implement
+ enrich: undefined, // TODO: Implement
+ fail: undefined, // TODO: Implement
+ foreach: undefined, // TODO: Implement
+ geoip: undefined, // TODO: Implement
+ grok: undefined, // TODO: Implement
+ html_strip: undefined, // TODO: Implement
+ inference: undefined, // TODO: Implement
+ join: undefined, // TODO: Implement
+ json: undefined, // TODO: Implement
+ kv: undefined, // TODO: Implement
+ lowercase: undefined, // TODO: Implement
+ pipeline: undefined, // TODO: Implement
+ remove: undefined, // TODO: Implement
+ rename: undefined, // TODO: Implement
+ script: undefined, // TODO: Implement
+ set_security_user: undefined, // TODO: Implement
+ split: undefined, // TODO: Implement
+ sort: undefined, // TODO: Implement
+ trim: undefined, // TODO: Implement
+ uppercase: undefined, // TODO: Implement
+ urldecode: undefined, // TODO: Implement
+ user_agent: undefined, // TODO: Implement
+
+ gsub: undefined,
+ set: undefined,
+};
+
+export const types = Object.keys(mapProcessorTypeToForm);
+
+export type ProcessorType = keyof typeof mapProcessorTypeToForm;
+
+export const getProcessorForm = (type: ProcessorType | string): FunctionComponent | undefined => {
+ return mapProcessorTypeToForm[type as ProcessorType];
+};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.container.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.container.tsx
new file mode 100644
index 0000000000000..29b52ef84600a
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.container.tsx
@@ -0,0 +1,56 @@
+/*
+ * 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, { FunctionComponent, useCallback, useEffect } from 'react';
+
+import { useForm, OnFormUpdateArg, FormData } from '../../../../../shared_imports';
+import { ProcessorInternal } from '../../types';
+
+import { ProcessorSettingsForm as ViewComponent } from './processor_settings_form';
+
+export type ProcessorSettingsFromOnSubmitArg = Omit;
+
+interface Props {
+ onFormUpdate: (form: OnFormUpdateArg) => void;
+ onSubmit: (processor: ProcessorSettingsFromOnSubmitArg) => void;
+ processor?: ProcessorInternal;
+}
+
+export const ProcessorSettingsForm: FunctionComponent = ({
+ processor,
+ onFormUpdate,
+ onSubmit,
+}) => {
+ const handleSubmit = useCallback(
+ async (data: FormData, isValid: boolean) => {
+ if (isValid) {
+ const { type, customOptions, ...options } = data;
+ onSubmit({
+ type,
+ options: customOptions ? customOptions : options,
+ });
+ }
+ },
+ [onSubmit]
+ );
+
+ const { form } = useForm({
+ defaultValue: processor?.options,
+ onSubmit: handleSubmit,
+ });
+
+ useEffect(() => {
+ const subscription = form.subscribe(onFormUpdate);
+ return subscription.unsubscribe;
+
+ // TODO: Address this issue
+ // For some reason adding `form` object to the dependencies array here is causing an
+ // infinite update loop.
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [onFormUpdate]);
+
+ return ;
+};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.tsx
new file mode 100644
index 0000000000000..49bde2129aab6
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processor_settings_form.tsx
@@ -0,0 +1,73 @@
+/*
+ * 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 React, { FunctionComponent, memo } from 'react';
+import { EuiButton, EuiHorizontalRule } from '@elastic/eui';
+
+import { Form, useForm, FormDataProvider } from '../../../../../shared_imports';
+
+import { ProcessorInternal } from '../../types';
+
+import { getProcessorForm } from './map_processor_type_to_form';
+import { CommonProcessorFields, ProcessorTypeField } from './processors/common_fields';
+import { Custom } from './processors/custom';
+
+export interface Props {
+ processor?: ProcessorInternal;
+ form: ReturnType['form'];
+}
+
+export const ProcessorSettingsForm: FunctionComponent = memo(
+ ({ processor, form }) => {
+ return (
+
+ );
+ },
+ (previous, current) => {
+ return previous.processor === current.processor;
+ }
+);
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/common_processor_fields.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/common_processor_fields.tsx
new file mode 100644
index 0000000000000..4802653f9e680
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/common_processor_fields.tsx
@@ -0,0 +1,55 @@
+/*
+ * 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, { FunctionComponent } from 'react';
+import { i18n } from '@kbn/i18n';
+
+import {
+ FieldConfig,
+ UseField,
+ FIELD_TYPES,
+ Field,
+ ToggleField,
+} from '../../../../../../../shared_imports';
+
+const ignoreFailureConfig: FieldConfig = {
+ defaultValue: false,
+ label: i18n.translate(
+ 'xpack.ingestPipelines.pipelineEditor.commonFields.ignoreFailureFieldLabel',
+ {
+ defaultMessage: 'Ignore failure',
+ }
+ ),
+ type: FIELD_TYPES.TOGGLE,
+};
+
+const ifConfig: FieldConfig = {
+ defaultValue: undefined,
+ label: i18n.translate('xpack.ingestPipelines.pipelineEditor.commonFields.ifFieldLabel', {
+ defaultMessage: 'Condition (optional)',
+ }),
+ type: FIELD_TYPES.TEXT,
+};
+
+const tagConfig: FieldConfig = {
+ defaultValue: undefined,
+ label: i18n.translate('xpack.ingestPipelines.pipelineEditor.commonFields.tagFieldLabel', {
+ defaultMessage: 'Tag (optional)',
+ }),
+ type: FIELD_TYPES.TEXT,
+};
+
+export const CommonProcessorFields: FunctionComponent = () => {
+ return (
+ <>
+
+
+
+
+
+
+ );
+};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/index.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/index.ts
new file mode 100644
index 0000000000000..f3fa0e028faaa
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/index.ts
@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export { ProcessorTypeField } from './processor_type_field';
+
+export { CommonProcessorFields } from './common_processor_fields';
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/processor_type_field.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/processor_type_field.tsx
new file mode 100644
index 0000000000000..6c86fc16bcdd0
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/common_fields/processor_type_field.tsx
@@ -0,0 +1,67 @@
+/*
+ * 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 React, { FunctionComponent } from 'react';
+import {
+ FIELD_TYPES,
+ FieldConfig,
+ UseField,
+ fieldValidators,
+ ComboBoxField,
+} from '../../../../../../../shared_imports';
+import { types } from '../../map_processor_type_to_form';
+
+interface Props {
+ initialType?: string;
+}
+
+const { emptyField } = fieldValidators;
+
+const typeConfig: FieldConfig = {
+ type: FIELD_TYPES.COMBO_BOX,
+ label: i18n.translate('xpack.ingestPipelines.pipelineEditor.typeField.typeFieldLabel', {
+ defaultMessage: 'Processor',
+ }),
+ deserializer: (value: string | undefined) => {
+ if (value) {
+ return [value];
+ }
+ return [];
+ },
+ serializer: (value: string[]) => {
+ return value[0];
+ },
+ validations: [
+ {
+ validator: emptyField(
+ i18n.translate('xpack.ingestPipelines.pipelineEditor.typeField.fieldRequiredError', {
+ defaultMessage: 'A type is required.',
+ })
+ ),
+ },
+ ],
+};
+
+export const ProcessorTypeField: FunctionComponent = ({ initialType }) => {
+ return (
+ ({ label: type, value: type })),
+ noSuggestions: false,
+ singleSelection: {
+ asPlainText: true,
+ },
+ },
+ }}
+ />
+ );
+};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/custom.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/custom.tsx
new file mode 100644
index 0000000000000..61fc31a7b472a
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/custom.tsx
@@ -0,0 +1,90 @@
+/*
+ * 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, { FunctionComponent } from 'react';
+import { i18n } from '@kbn/i18n';
+
+import {
+ FieldConfig,
+ FIELD_TYPES,
+ fieldValidators,
+ UseField,
+ JsonEditorField,
+} from '../../../../../../shared_imports';
+
+const { emptyField, isJsonField } = fieldValidators;
+
+const customConfig: FieldConfig = {
+ type: FIELD_TYPES.TEXT,
+ label: i18n.translate('xpack.ingestPipelines.pipelineEditor.customForm.optionsFieldLabel', {
+ defaultMessage: 'Configuration options',
+ }),
+ serializer: (value: string) => {
+ try {
+ return JSON.parse(value);
+ } catch (error) {
+ // swallow error and return non-parsed value;
+ return value;
+ }
+ },
+ deserializer: (value: any) => {
+ if (value === '') {
+ return '{\n\n}';
+ }
+ return JSON.stringify(value, null, 2);
+ },
+ validations: [
+ {
+ validator: emptyField(
+ i18n.translate(
+ 'xpack.ingestPipelines.pipelineEditor.customForm.configurationRequiredError',
+ {
+ defaultMessage: 'Configuration options are required.',
+ }
+ )
+ ),
+ },
+ {
+ validator: isJsonField(
+ i18n.translate('xpack.ingestPipelines.pipelineEditor.customForm.invalidJsonError', {
+ defaultMessage: 'The input is not valid.',
+ })
+ ),
+ },
+ ],
+};
+
+interface Props {
+ defaultOptions?: any;
+}
+
+/**
+ * This is a catch-all component to support settings for custom processors
+ * or existing processors not yet supported by the UI.
+ *
+ * We store the settings in a field called "customOptions"
+ **/
+export const Custom: FunctionComponent = ({ defaultOptions }) => {
+ return (
+
+ );
+};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/gsub.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/gsub.tsx
new file mode 100644
index 0000000000000..77f85e61eff6b
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/gsub.tsx
@@ -0,0 +1,98 @@
+/*
+ * 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, { FunctionComponent } from 'react';
+import { i18n } from '@kbn/i18n';
+
+import {
+ FieldConfig,
+ FIELD_TYPES,
+ fieldValidators,
+ ToggleField,
+ UseField,
+ Field,
+} from '../../../../../../shared_imports';
+
+const { emptyField } = fieldValidators;
+
+const fieldConfig: FieldConfig = {
+ type: FIELD_TYPES.TEXT,
+ label: i18n.translate('xpack.ingestPipelines.pipelineEditor.gsubForm.fieldFieldLabel', {
+ defaultMessage: 'Field',
+ }),
+ validations: [
+ {
+ validator: emptyField(
+ i18n.translate('xpack.ingestPipelines.pipelineEditor.gsubForm.fieldRequiredError', {
+ defaultMessage: 'A field value is required.',
+ })
+ ),
+ },
+ ],
+};
+
+const patternConfig: FieldConfig = {
+ type: FIELD_TYPES.TEXT,
+ label: i18n.translate('xpack.ingestPipelines.pipelineEditor.gsubForm.patternFieldLabel', {
+ defaultMessage: 'Pattern',
+ }),
+ validations: [
+ {
+ validator: emptyField(
+ i18n.translate('xpack.ingestPipelines.pipelineEditor.gsubForm.patternRequiredError', {
+ defaultMessage: 'A pattern value is required.',
+ })
+ ),
+ },
+ ],
+};
+
+const replacementConfig: FieldConfig = {
+ type: FIELD_TYPES.TEXT,
+ label: i18n.translate('xpack.ingestPipelines.pipelineEditor.gsubForm.replacementFieldLabel', {
+ defaultMessage: 'Replacement',
+ }),
+ validations: [
+ {
+ validator: emptyField(
+ i18n.translate('xpack.ingestPipelines.pipelineEditor.gsubForm.replacementRequiredError', {
+ defaultMessage: 'A replacement value is required.',
+ })
+ ),
+ },
+ ],
+};
+
+const targetConfig: FieldConfig = {
+ type: FIELD_TYPES.TEXT,
+ label: i18n.translate('xpack.ingestPipelines.pipelineEditor.gsubForm.targetFieldLabel', {
+ defaultMessage: 'Target field (optional)',
+ }),
+};
+
+const ignoreMissingConfig: FieldConfig = {
+ defaultValue: false,
+ label: i18n.translate('xpack.ingestPipelines.pipelineEditor.gsubForm.ignoreMissingFieldLabel', {
+ defaultMessage: 'Ignore missing',
+ }),
+ type: FIELD_TYPES.TOGGLE,
+};
+
+export const Gsub: FunctionComponent = () => {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/set.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/set.tsx
new file mode 100644
index 0000000000000..1ba6a14d0448d
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processor_settings_form/processors/set.tsx
@@ -0,0 +1,74 @@
+/*
+ * 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, { FunctionComponent } from 'react';
+import { i18n } from '@kbn/i18n';
+
+import {
+ FieldConfig,
+ FIELD_TYPES,
+ fieldValidators,
+ ToggleField,
+ UseField,
+ Field,
+} from '../../../../../../shared_imports';
+
+const { emptyField } = fieldValidators;
+
+const fieldConfig: FieldConfig = {
+ type: FIELD_TYPES.TEXT,
+ label: i18n.translate('xpack.ingestPipelines.pipelineEditor.setForm.fieldFieldLabel', {
+ defaultMessage: 'Field',
+ }),
+ validations: [
+ {
+ validator: emptyField(
+ i18n.translate('xpack.ingestPipelines.pipelineEditor.setForm.fieldRequiredError', {
+ defaultMessage: 'A field value is required.',
+ })
+ ),
+ },
+ ],
+};
+
+const valueConfig: FieldConfig = {
+ type: FIELD_TYPES.TEXT,
+ label: i18n.translate('xpack.ingestPipelines.pipelineEditor.setForm.valueFieldLabel', {
+ defaultMessage: 'Value',
+ }),
+ validations: [
+ {
+ validator: emptyField(
+ i18n.translate('xpack.ingestPipelines.pipelineEditor.setForm.valueRequiredError', {
+ defaultMessage: 'A value to set is required.',
+ })
+ ),
+ },
+ ],
+};
+
+const overrideConfig: FieldConfig = {
+ defaultValue: false,
+ label: i18n.translate('xpack.ingestPipelines.pipelineEditor.setForm.overrideFieldLabel', {
+ defaultMessage: 'Override',
+ }),
+ type: FIELD_TYPES.TOGGLE,
+};
+
+/**
+ * Disambiguate name from the Set data structure
+ */
+export const SetProcessor: FunctionComponent = () => {
+ return (
+ <>
+
+
+
+
+
+
+ );
+};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_title_and_test_button.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_title_and_test_button.tsx
new file mode 100644
index 0000000000000..bc646c9eefa55
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_title_and_test_button.tsx
@@ -0,0 +1,73 @@
+/*
+ * 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, { FunctionComponent } from 'react';
+import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiLink, EuiText, EuiTitle } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+import { usePipelineProcessorsContext } from '../context';
+
+export interface Props {
+ onTestPipelineClick: () => void;
+ isTestButtonDisabled: boolean;
+}
+
+export const ProcessorsTitleAndTestButton: FunctionComponent = ({
+ onTestPipelineClick,
+ isTestButtonDisabled,
+}) => {
+ const { links } = usePipelineProcessorsContext();
+ return (
+
+
+
+
+ {i18n.translate('xpack.ingestPipelines.pipelineEditor.processorsTreeTitle', {
+ defaultMessage: 'Processors',
+ })}
+
+
+
+
+ {i18n.translate(
+ 'xpack.ingestPipelines.pipelineEditor.processorsDocumentationLink',
+ {
+ defaultMessage: 'Learn more.',
+ }
+ )}
+
+ ),
+ }}
+ />
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/drop_zone_button.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/drop_zone_button.tsx
new file mode 100644
index 0000000000000..a47886292cf32
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/drop_zone_button.tsx
@@ -0,0 +1,42 @@
+/*
+ * 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 React, { FunctionComponent } from 'react';
+import classNames from 'classnames';
+import { EuiButtonIcon, EuiFlexItem } from '@elastic/eui';
+
+export interface Props {
+ isDisabled: boolean;
+ onClick: (event: React.MouseEvent) => void;
+}
+
+const MOVE_HERE_LABEL = i18n.translate('xpack.ingestPipelines.pipelineEditor.moveTargetLabel', {
+ defaultMessage: 'Move here',
+});
+
+export const DropZoneButton: FunctionComponent = ({ onClick, isDisabled }) => {
+ const containerClasses = classNames({
+ 'pipelineProcessorsEditor__tree__dropZoneContainer--active': !isDisabled,
+ });
+ const buttonClasses = classNames({
+ 'pipelineProcessorsEditor__tree__dropZoneButton--active': !isDisabled,
+ });
+
+ return (
+
+
+
+ );
+};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/index.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/index.ts
new file mode 100644
index 0000000000000..e9548624d2cef
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/index.ts
@@ -0,0 +1,11 @@
+/*
+ * 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.
+ */
+
+export { DropZoneButton } from './drop_zone_button';
+
+export { PrivateTree } from './private_tree';
+
+export { TreeNode } from './tree_node';
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/private_tree.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/private_tree.tsx
new file mode 100644
index 0000000000000..bdc6b2eb44e2d
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/private_tree.tsx
@@ -0,0 +1,210 @@
+/*
+ * 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, { FunctionComponent, MutableRefObject, useEffect } from 'react';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { AutoSizer, List, WindowScroller } from 'react-virtualized';
+
+import { DropSpecialLocations } from '../../../constants';
+import { ProcessorInternal, ProcessorSelector } from '../../../types';
+import { isChildPath } from '../../../processors_reducer';
+
+import { DropZoneButton } from '.';
+import { TreeNode } from '.';
+import { calculateItemHeight } from '../utils';
+import { OnActionHandler, ProcessorInfo } from '../processors_tree';
+
+export interface PrivateProps {
+ processors: ProcessorInternal[];
+ selector: ProcessorSelector;
+ onAction: OnActionHandler;
+ level: number;
+ movingProcessor?: ProcessorInfo;
+ // Only passed into the top level list
+ windowScrollerRef?: MutableRefObject;
+ listRef?: MutableRefObject;
+}
+
+const isDropZoneAboveDisabled = (processor: ProcessorInfo, selectedProcessor: ProcessorInfo) => {
+ return Boolean(
+ // Is the selected node first in a list?
+ (!selectedProcessor.aboveId && selectedProcessor.id === processor.id) ||
+ isChildPath(selectedProcessor.selector, processor.selector)
+ );
+};
+
+const isDropZoneBelowDisabled = (processor: ProcessorInfo, selectedProcessor: ProcessorInfo) => {
+ return (
+ processor.id === selectedProcessor.id ||
+ processor.belowId === selectedProcessor.id ||
+ isChildPath(selectedProcessor.selector, processor.selector)
+ );
+};
+
+/**
+ * Recursively rendering tree component for ingest pipeline processors.
+ *
+ * Note: this tree should start at level 1. It is the only level at
+ * which we render the optimised virtual component. This gives a
+ * massive performance boost to this component which can get very tall.
+ *
+ * The first level list also contains the outside click listener which
+ * enables users to click outside of the tree and cancel moving a
+ * processor.
+ */
+export const PrivateTree: FunctionComponent = ({
+ processors,
+ selector,
+ movingProcessor,
+ onAction,
+ level,
+ windowScrollerRef,
+ listRef,
+}) => {
+ const renderRow = ({
+ idx,
+ info,
+ processor,
+ }: {
+ idx: number;
+ info: ProcessorInfo;
+ processor: ProcessorInternal;
+ }) => {
+ return (
+ <>
+ {idx === 0 ? (
+ {
+ event.preventDefault();
+ onAction({
+ type: 'move',
+ payload: {
+ destination: selector.concat(DropSpecialLocations.top),
+ source: movingProcessor!.selector,
+ },
+ });
+ }}
+ isDisabled={Boolean(
+ !movingProcessor || isDropZoneAboveDisabled(info, movingProcessor!)
+ )}
+ />
+ ) : undefined}
+
+
+
+ {
+ event.preventDefault();
+ onAction({
+ type: 'move',
+ payload: {
+ destination: selector.concat(String(idx + 1)),
+ source: movingProcessor!.selector,
+ },
+ });
+ }}
+ />
+
+ );
+ };
+
+ useEffect(() => {
+ if (windowScrollerRef && windowScrollerRef.current) {
+ windowScrollerRef.current.updatePosition();
+ }
+ if (listRef && listRef.current) {
+ listRef.current.recomputeRowHeights();
+ }
+ }, [processors, listRef, windowScrollerRef, movingProcessor]);
+
+ // A list optimized to handle very many items.
+ const renderVirtualList = () => {
+ return (
+
+ {({ height, registerChild, isScrolling, onChildScroll, scrollTop }: any) => {
+ return (
+
+
+ {({ width }) => {
+ return (
+
+
{
+ const processor = processors[index];
+ return calculateItemHeight({
+ processor,
+ isFirstInArray: index === 0,
+ });
+ }}
+ rowRenderer={({ index: idx, style }) => {
+ const processor = processors[idx];
+ const above = processors[idx - 1];
+ const below = processors[idx + 1];
+ const info: ProcessorInfo = {
+ id: processor.id,
+ selector: selector.concat(String(idx)),
+ aboveId: above?.id,
+ belowId: below?.id,
+ };
+
+ return (
+
+ {renderRow({ processor, info, idx })}
+
+ );
+ }}
+ processors={processors}
+ />
+
{renderRow({ processor, idx, info })}
;
+ })}
+
+ );
+};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/tree_node.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/tree_node.tsx
new file mode 100644
index 0000000000000..ebe4ca4962b4c
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/tree_node.tsx
@@ -0,0 +1,115 @@
+/*
+ * 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, { FunctionComponent, useMemo } from 'react';
+import classNames from 'classnames';
+import { i18n } from '@kbn/i18n';
+import { EuiPanel, EuiText } from '@elastic/eui';
+
+import { ProcessorInternal } from '../../../types';
+
+import { ProcessorInfo, OnActionHandler } from '../processors_tree';
+
+import { PipelineProcessorsEditorItem, Handlers } from '../../pipeline_processors_editor_item';
+import { AddProcessorButton } from '../../add_processor_button';
+
+import { PrivateTree } from './private_tree';
+
+export interface Props {
+ processor: ProcessorInternal;
+ processorInfo: ProcessorInfo;
+ onAction: OnActionHandler;
+ level: number;
+ movingProcessor?: ProcessorInfo;
+}
+
+const INDENTATION_PX = 34;
+
+export const TreeNode: FunctionComponent = ({
+ processor,
+ processorInfo,
+ onAction,
+ movingProcessor,
+ level,
+}) => {
+ const stringSelector = processorInfo.selector.join('.');
+ const handlers = useMemo((): Handlers => {
+ return {
+ onMove: () => {
+ onAction({ type: 'selectToMove', payload: { info: processorInfo } });
+ },
+ onCancelMove: () => {
+ onAction({ type: 'cancelMove' });
+ },
+ };
+ }, [onAction, stringSelector, processor]); // eslint-disable-line react-hooks/exhaustive-deps
+
+ const selected = movingProcessor?.id === processor.id;
+
+ const panelClasses = classNames({
+ 'pipelineProcessorsEditor__tree__item--selected': selected,
+ });
+
+ const renderOnFailureHandlersTree = () => {
+ if (!processor.onFailure?.length) {
+ return;
+ }
+
+ const onFailureHandlerLabelClasses = classNames({
+ 'pipelineProcessorsEditor__tree__onFailureHandlerLabel--withDropZone':
+ movingProcessor != null &&
+ movingProcessor.id !== processor.onFailure[0].id &&
+ movingProcessor.id !== processor.id,
+ });
+
+ return (
+
+
+
+ {i18n.translate('xpack.ingestPipelines.pipelineEditor.onFailureProcessorsLabel', {
+ defaultMessage: 'Failure handlers',
+ })}
+
+
+
+
+ onAction({
+ type: 'addProcessor',
+ payload: { target: processorInfo.selector.concat('onFailure') },
+ })
+ }
+ />
+ (null);
+
+ useEffect(() => {
+ const cancelMoveKbListener = (event: KeyboardEvent) => {
+ // x-browser support per https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
+ if (event.keyCode === keyCodes.ESCAPE || event.code === 'Escape') {
+ onAction({ type: 'cancelMove' });
+ }
+ };
+ const cancelMoveClickListener = (ev: any) => {
+ onAction({ type: 'cancelMove' });
+ };
+ // Give the browser a chance to flush any click events including the click
+ // event that triggered any state transition into selecting a processor to move
+ setTimeout(() => {
+ if (movingProcessor) {
+ window.addEventListener('keyup', cancelMoveKbListener);
+ window.addEventListener('click', cancelMoveClickListener);
+ } else {
+ window.removeEventListener('keyup', cancelMoveKbListener);
+ window.removeEventListener('click', cancelMoveClickListener);
+ }
+ });
+ return () => {
+ window.removeEventListener('keyup', cancelMoveKbListener);
+ window.removeEventListener('click', cancelMoveClickListener);
+ };
+ }, [movingProcessor, onAction]);
+
+ return (
+
+
+
+
+
+
+
+ {
+ onAction({ type: 'addProcessor', payload: { target: baseSelector } });
+ }}
+ />
+
+
+
+
+ );
+});
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/utils.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/utils.ts
new file mode 100644
index 0000000000000..457e335602b9b
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/utils.ts
@@ -0,0 +1,41 @@
+/*
+ * 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 { ProcessorInternal } from '../../types';
+
+// These values are tied to the style and heights following components:
+// Do not change these numbers without testing the component for visual
+// regressions!
+// - ./components/tree_node.tsx
+// - ./components/drop_zone_button.tsx
+// - ./components/pipeline_processors_editor_item.tsx
+const itemHeightsPx = {
+ WITHOUT_NESTED_ITEMS: 67,
+ WITH_NESTED_ITEMS: 137,
+ TOP_PADDING: 16,
+};
+
+export const calculateItemHeight = ({
+ processor,
+ isFirstInArray,
+}: {
+ processor: ProcessorInternal;
+ isFirstInArray: boolean;
+}): number => {
+ const padding = isFirstInArray ? itemHeightsPx.TOP_PADDING : 0;
+
+ if (!processor.onFailure?.length) {
+ return padding + itemHeightsPx.WITHOUT_NESTED_ITEMS;
+ }
+
+ return (
+ padding +
+ itemHeightsPx.WITH_NESTED_ITEMS +
+ processor.onFailure.reduce((acc, p, idx) => {
+ return acc + calculateItemHeight({ processor: p, isFirstInArray: idx === 0 });
+ }, 0)
+ );
+};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/settings_form_flyout.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/settings_form_flyout.tsx
new file mode 100644
index 0000000000000..94d5f0eda6454
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/settings_form_flyout.tsx
@@ -0,0 +1,67 @@
+/*
+ * 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 { EuiFlyout, EuiFlyoutBody, EuiFlyoutHeader, EuiTitle } from '@elastic/eui';
+
+import React, { FunctionComponent, memo, useEffect } from 'react';
+
+import { FormattedMessage } from '@kbn/i18n/react';
+
+import { OnFormUpdateArg } from '../../../../shared_imports';
+
+import { ProcessorInternal } from '../types';
+
+import { ProcessorSettingsForm, ProcessorSettingsFromOnSubmitArg } from '.';
+
+export type OnSubmitHandler = (processor: ProcessorSettingsFromOnSubmitArg) => void;
+
+export interface Props {
+ processor: ProcessorInternal | undefined;
+ onFormUpdate: (form: OnFormUpdateArg) => void;
+ onSubmit: OnSubmitHandler;
+ isOnFailureProcessor: boolean;
+ onOpen: () => void;
+ onClose: () => void;
+}
+
+export const SettingsFormFlyout: FunctionComponent = memo(
+ ({ onClose, processor, onSubmit, onFormUpdate, onOpen, isOnFailureProcessor }) => {
+ useEffect(
+ () => {
+ onOpen();
+ },
+ [] /* eslint-disable-line react-hooks/exhaustive-deps */
+ );
+ const flyoutTitleContent = isOnFailureProcessor ? (
+
+ ) : (
+
+ );
+
+ return (
+
+
+
+ {flyoutTitleContent}
+
+
+
+
+
+
+ );
+ }
+);
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/constants.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/constants.ts
new file mode 100644
index 0000000000000..46e3d1c803fd5
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/constants.ts
@@ -0,0 +1,10 @@
+/*
+ * 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.
+ */
+
+export enum DropSpecialLocations {
+ top = 'TOP',
+ bottom = 'BOTTOM',
+}
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/context.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/context.tsx
new file mode 100644
index 0000000000000..150a52f1a5fe0
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/context.tsx
@@ -0,0 +1,55 @@
+/*
+ * 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, { createContext, Dispatch, FunctionComponent, useContext, useState } from 'react';
+import { EditorMode } from './types';
+import { ProcessorsDispatch } from './processors_reducer';
+
+interface Links {
+ learnMoreAboutProcessorsUrl: string;
+ learnMoreAboutOnFailureProcessorsUrl: string;
+}
+
+const PipelineProcessorsContext = createContext<{
+ links: Links;
+ state: {
+ processorsDispatch: ProcessorsDispatch;
+ editor: {
+ mode: EditorMode;
+ setMode: Dispatch;
+ };
+ };
+}>({} as any);
+
+interface Props {
+ links: Links;
+ processorsDispatch: ProcessorsDispatch;
+}
+
+export const PipelineProcessorsContextProvider: FunctionComponent = ({
+ links,
+ children,
+ processorsDispatch,
+}) => {
+ const [mode, setMode] = useState({ id: 'idle' });
+ return (
+
+ {children}
+
+ );
+};
+
+export const usePipelineProcessorsContext = () => {
+ const ctx = useContext(PipelineProcessorsContext);
+ if (!ctx) {
+ throw new Error(
+ 'usePipelineProcessorsContext can only be used inside of PipelineProcessorsContextProvider'
+ );
+ }
+ return ctx;
+};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/deserialize.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/deserialize.ts
new file mode 100644
index 0000000000000..fa1d041bdaba3
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/deserialize.ts
@@ -0,0 +1,56 @@
+/*
+ * 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 uuid from 'uuid';
+import { Processor } from '../../../../common/types';
+import { ProcessorInternal } from './types';
+
+export interface DeserializeArgs {
+ processors: Processor[];
+ onFailure?: Processor[];
+}
+
+export interface DeserializeResult {
+ processors: ProcessorInternal[];
+ onFailure?: ProcessorInternal[];
+}
+
+const getProcessorType = (processor: Processor): string => {
+ /**
+ * See the definition of {@link ProcessorInternal} for why this works to extract the
+ * processor type.
+ */
+ return Object.keys(processor)[0]!;
+};
+
+const convertToPipelineInternalProcessor = (processor: Processor): ProcessorInternal => {
+ const type = getProcessorType(processor);
+ const { on_failure: originalOnFailure, ...options } = processor[type];
+ const onFailure = originalOnFailure?.length
+ ? convertProcessors(originalOnFailure)
+ : (originalOnFailure as ProcessorInternal[] | undefined);
+ return {
+ id: uuid.v4(),
+ type,
+ onFailure,
+ options,
+ };
+};
+
+const convertProcessors = (processors: Processor[]) => {
+ const convertedProcessors = [];
+
+ for (const processor of processors) {
+ convertedProcessors.push(convertToPipelineInternalProcessor(processor));
+ }
+ return convertedProcessors;
+};
+
+export const deserialize = ({ processors, onFailure }: DeserializeArgs): DeserializeResult => {
+ return {
+ processors: convertProcessors(processors),
+ onFailure: onFailure ? convertProcessors(onFailure) : undefined,
+ };
+};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/index.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/index.ts
new file mode 100644
index 0000000000000..58d6e492b85e5
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/index.ts
@@ -0,0 +1,11 @@
+/*
+ * 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.
+ */
+
+export { PipelineProcessorsEditor, OnUpdateHandler } from './pipeline_processors_editor.container';
+
+export { OnUpdateHandlerArg } from './types';
+
+export { SerializeResult } from './serialize';
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.container.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.container.tsx
new file mode 100644
index 0000000000000..057f8638700a4
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.container.tsx
@@ -0,0 +1,76 @@
+/*
+ * 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, { FunctionComponent, useMemo } from 'react';
+
+import { Processor } from '../../../../common/types';
+
+import { deserialize } from './deserialize';
+
+import { useProcessorsState } from './processors_reducer';
+
+import { PipelineProcessorsContextProvider } from './context';
+
+import { OnUpdateHandlerArg } from './types';
+
+import { PipelineProcessorsEditor as PipelineProcessorsEditorUI } from './pipeline_processors_editor';
+
+export interface Props {
+ value: {
+ processors: Processor[];
+ onFailure?: Processor[];
+ };
+ onUpdate: (arg: OnUpdateHandlerArg) => void;
+ isTestButtonDisabled: boolean;
+ onTestPipelineClick: () => void;
+ learnMoreAboutProcessorsUrl: string;
+ learnMoreAboutOnFailureProcessorsUrl: string;
+ /**
+ * Give users a way to react to this component opening a flyout
+ */
+ onFlyoutOpen: () => void;
+}
+
+export type OnUpdateHandler = (arg: OnUpdateHandlerArg) => void;
+
+export const PipelineProcessorsEditor: FunctionComponent = ({
+ value: { processors: originalProcessors, onFailure: originalOnFailureProcessors },
+ onFlyoutOpen,
+ onUpdate,
+ isTestButtonDisabled,
+ learnMoreAboutOnFailureProcessorsUrl,
+ learnMoreAboutProcessorsUrl,
+ onTestPipelineClick,
+}) => {
+ const deserializedResult = useMemo(
+ () =>
+ deserialize({
+ processors: originalProcessors,
+ onFailure: originalOnFailureProcessors,
+ }),
+ // TODO: Re-add the dependency on the props and make the state set-able
+ // when new props come in so that this component will be controllable
+ [] // eslint-disable-line react-hooks/exhaustive-deps
+ );
+ const [processorsState, processorsDispatch] = useProcessorsState(deserializedResult);
+ const { processors, onFailure } = processorsState;
+
+ return (
+
+
+
+ );
+};
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.scss b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.scss
new file mode 100644
index 0000000000000..ee7421d7dbfa8
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.scss
@@ -0,0 +1,3 @@
+.pipelineProcessorsEditor {
+ margin-bottom: $euiSize;
+}
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.tsx
new file mode 100644
index 0000000000000..24b9598a74d47
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/pipeline_processors_editor.tsx
@@ -0,0 +1,239 @@
+/*
+ * 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 { FormattedMessage } from '@kbn/i18n/react';
+import React, { FunctionComponent, useCallback, memo, useState, useEffect } from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiSwitch } from '@elastic/eui';
+
+import './pipeline_processors_editor.scss';
+
+import {
+ ProcessorsTitleAndTestButton,
+ OnFailureProcessorsTitle,
+ ProcessorsTree,
+ SettingsFormFlyout,
+ ProcessorRemoveModal,
+ OnActionHandler,
+ OnSubmitHandler,
+} from './components';
+
+import {
+ ProcessorInternal,
+ ProcessorSelector,
+ OnUpdateHandlerArg,
+ FormValidityState,
+ OnFormUpdateArg,
+} from './types';
+
+import { serialize } from './serialize';
+import { getValue } from './utils';
+import { usePipelineProcessorsContext } from './context';
+
+export interface Props {
+ processors: ProcessorInternal[];
+ onFailureProcessors: ProcessorInternal[];
+ onUpdate: (arg: OnUpdateHandlerArg) => void;
+ isTestButtonDisabled: boolean;
+ onTestPipelineClick: () => void;
+ onFlyoutOpen: () => void;
+}
+
+const PROCESSOR_STATE_SCOPE: ProcessorSelector = ['processors'];
+const ON_FAILURE_STATE_SCOPE: ProcessorSelector = ['onFailure'];
+
+export const PipelineProcessorsEditor: FunctionComponent = memo(
+ function PipelineProcessorsEditor({
+ processors,
+ onFailureProcessors,
+ onTestPipelineClick,
+ isTestButtonDisabled,
+ onUpdate,
+ onFlyoutOpen,
+ }) {
+ const {
+ state: { editor, processorsDispatch },
+ } = usePipelineProcessorsContext();
+
+ const { mode: editorMode, setMode: setEditorMode } = editor;
+
+ const [formState, setFormState] = useState({
+ validate: () => Promise.resolve(true),
+ });
+
+ const onFormUpdate = useCallback<(arg: OnFormUpdateArg) => void>(
+ ({ isValid, validate }) => {
+ setFormState({
+ validate: async () => {
+ if (isValid === undefined) {
+ return validate();
+ }
+ return isValid;
+ },
+ });
+ },
+ [setFormState]
+ );
+
+ const [showGlobalOnFailure, setShowGlobalOnFailure] = useState(
+ Boolean(onFailureProcessors.length)
+ );
+
+ useEffect(() => {
+ onUpdate({
+ validate: async () => {
+ const formValid = await formState.validate();
+ return formValid && editorMode.id === 'idle';
+ },
+ getData: () =>
+ serialize({
+ onFailure: showGlobalOnFailure ? onFailureProcessors : undefined,
+ processors,
+ }),
+ });
+ }, [processors, onFailureProcessors, onUpdate, formState, editorMode, showGlobalOnFailure]);
+
+ const onSubmit = useCallback(
+ (processorTypeAndOptions) => {
+ switch (editorMode.id) {
+ case 'creatingProcessor':
+ processorsDispatch({
+ type: 'addProcessor',
+ payload: {
+ processor: { ...processorTypeAndOptions },
+ targetSelector: editorMode.arg.selector,
+ },
+ });
+ break;
+ case 'editingProcessor':
+ processorsDispatch({
+ type: 'updateProcessor',
+ payload: {
+ processor: {
+ ...editorMode.arg.processor,
+ ...processorTypeAndOptions,
+ },
+ selector: editorMode.arg.selector,
+ },
+ });
+ break;
+ default:
+ }
+ setEditorMode({ id: 'idle' });
+ },
+ [processorsDispatch, editorMode, setEditorMode]
+ );
+
+ const onCloseSettingsForm = useCallback(() => {
+ setEditorMode({ id: 'idle' });
+ setFormState({ validate: () => Promise.resolve(true) });
+ }, [setFormState, setEditorMode]);
+
+ const onTreeAction = useCallback(
+ (action) => {
+ switch (action.type) {
+ case 'addProcessor':
+ setEditorMode({ id: 'creatingProcessor', arg: { selector: action.payload.target } });
+ break;
+ case 'move':
+ setEditorMode({ id: 'idle' });
+ processorsDispatch({
+ type: 'moveProcessor',
+ payload: action.payload,
+ });
+ break;
+ case 'selectToMove':
+ setEditorMode({ id: 'movingProcessor', arg: action.payload.info });
+ break;
+ case 'cancelMove':
+ setEditorMode({ id: 'idle' });
+ break;
+ }
+ },
+ [processorsDispatch, setEditorMode]
+ );
+
+ const movingProcessor = editorMode.id === 'movingProcessor' ? editorMode.arg : undefined;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+ checked={showGlobalOnFailure}
+ onChange={(e) => setShowGlobalOnFailure(e.target.checked)}
+ data-test-subj="pipelineEditorOnFailureToggle"
+ />
+
+ {showGlobalOnFailure ? (
+
+
+
+ ) : undefined}
+
+ {editorMode.id === 'editingProcessor' || editorMode.id === 'creatingProcessor' ? (
+
1}
+ processor={editorMode.id === 'editingProcessor' ? editorMode.arg.processor : undefined}
+ onOpen={onFlyoutOpen}
+ onFormUpdate={onFormUpdate}
+ onSubmit={onSubmit}
+ onClose={onCloseSettingsForm}
+ />
+ ) : undefined}
+ {editorMode.id === 'removingProcessor' && (
+ {
+ if (confirmed) {
+ processorsDispatch({
+ type: 'removeProcessor',
+ payload: { selector },
+ });
+ }
+ setEditorMode({ id: 'idle' });
+ }}
+ />
+ )}
+
+ } layout="horizontal" />
+
+ );
+ }
return this.state.layerWizards.map((layerWizard: LayerWizard) => {
const icon = layerWizard.icon ? : undefined;
diff --git a/x-pack/plugins/maps/public/index.ts b/x-pack/plugins/maps/public/index.ts
index 9428946bb62e0..6a144e84b05e0 100644
--- a/x-pack/plugins/maps/public/index.ts
+++ b/x-pack/plugins/maps/public/index.ts
@@ -18,3 +18,4 @@ export const plugin: PluginInitializer = (
export { MAP_SAVED_OBJECT_TYPE } from '../common/constants';
export { ITooltipProperty } from './classes/tooltips/tooltip_property';
+export { MapsPluginStart } from './plugin';
diff --git a/x-pack/plugins/maps/public/lazy_load_bundle/index.ts b/x-pack/plugins/maps/public/lazy_load_bundle/index.ts
index 92cefd76aa047..152412376fb09 100644
--- a/x-pack/plugins/maps/public/lazy_load_bundle/index.ts
+++ b/x-pack/plugins/maps/public/lazy_load_bundle/index.ts
@@ -36,6 +36,10 @@ interface LazyLoadedMapModules {
initialLayers?: LayerDescriptor[]
) => LayerDescriptor[];
mergeInputWithSavedMap: any;
+ createSecurityLayerDescriptors: (
+ indexPatternId: string,
+ indexPatternTitle: string
+ ) => LayerDescriptor[];
}
export async function lazyLoadMapModules(): Promise {
@@ -56,6 +60,7 @@ export async function lazyLoadMapModules(): Promise {
addLayerWithoutDataSync,
getInitialLayers,
mergeInputWithSavedMap,
+ createSecurityLayerDescriptors,
} = await import('./lazy');
resolve({
@@ -69,6 +74,7 @@ export async function lazyLoadMapModules(): Promise {
addLayerWithoutDataSync,
getInitialLayers,
mergeInputWithSavedMap,
+ createSecurityLayerDescriptors,
});
});
return loadModulesPromise;
diff --git a/x-pack/plugins/maps/public/lazy_load_bundle/lazy/index.ts b/x-pack/plugins/maps/public/lazy_load_bundle/lazy/index.ts
index b650678b3105c..0600b8d5073c6 100644
--- a/x-pack/plugins/maps/public/lazy_load_bundle/lazy/index.ts
+++ b/x-pack/plugins/maps/public/lazy_load_bundle/lazy/index.ts
@@ -16,3 +16,4 @@ export * from '../../actions';
export * from '../../selectors/map_selectors';
export * from '../../angular/get_initial_layers';
export * from '../../embeddable/merge_input_with_saved_map';
+export * from '../../classes/layers/solution_layers/security';
diff --git a/x-pack/plugins/maps/public/plugin.ts b/x-pack/plugins/maps/public/plugin.ts
index 319be46870ebc..e0639c9d0f365 100644
--- a/x-pack/plugins/maps/public/plugin.ts
+++ b/x-pack/plugins/maps/public/plugin.ts
@@ -46,6 +46,8 @@ import { MapEmbeddableFactory } from './embeddable/map_embeddable_factory';
import { EmbeddableSetup } from '../../../../src/plugins/embeddable/public';
import { MapsConfigType, MapsXPackConfig } from '../config';
import { ILicense } from '../../licensing/common/types';
+import { MapsStartApi } from './api';
+import { createSecurityLayerDescriptors } from './api/create_security_layer_descriptors';
export interface MapsPluginSetupDependencies {
inspector: InspectorSetupContract;
@@ -143,7 +145,10 @@ export class MapsPlugin
};
}
- public start(core: CoreStart, plugins: any) {
+ public start(core: CoreStart, plugins: any): MapsStartApi {
bindStartCoreAndPlugins(core, plugins);
+ return {
+ createSecurityLayerDescriptors,
+ };
}
}
diff --git a/x-pack/plugins/ml/common/constants/time_format.ts b/x-pack/plugins/ml/common/constants/time_format.ts
new file mode 100644
index 0000000000000..109dad2d40ac8
--- /dev/null
+++ b/x-pack/plugins/ml/common/constants/time_format.ts
@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export const TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
diff --git a/x-pack/plugins/ml/common/types/anomaly_detection_jobs/index.ts b/x-pack/plugins/ml/common/types/anomaly_detection_jobs/index.ts
index 9c299c628426a..deb41fbb832cd 100644
--- a/x-pack/plugins/ml/common/types/anomaly_detection_jobs/index.ts
+++ b/x-pack/plugins/ml/common/types/anomaly_detection_jobs/index.ts
@@ -10,3 +10,4 @@ export * from './datafeed';
export * from './datafeed_stats';
export * from './combined_job';
export * from './summary_job';
+export * from './model_snapshot';
diff --git a/x-pack/plugins/ml/common/types/anomaly_detection_jobs/model_snapshot.ts b/x-pack/plugins/ml/common/types/anomaly_detection_jobs/model_snapshot.ts
new file mode 100644
index 0000000000000..367a16965a90b
--- /dev/null
+++ b/x-pack/plugins/ml/common/types/anomaly_detection_jobs/model_snapshot.ts
@@ -0,0 +1,21 @@
+/*
+ * 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 { JobId } from './job';
+import { ModelSizeStats } from './job_stats';
+
+export interface ModelSnapshot {
+ job_id: JobId;
+ min_version: string;
+ timestamp: number;
+ description: string;
+ snapshot_id: string;
+ snapshot_doc_count: number;
+ model_size_stats: ModelSizeStats;
+ latest_record_time_stamp: number;
+ latest_result_time_stamp: number;
+ retain: boolean;
+}
diff --git a/x-pack/plugins/ml/public/application/components/annotations/annotations_table/annotations_table.js b/x-pack/plugins/ml/public/application/components/annotations/annotations_table/annotations_table.js
index 52d266cde1a2c..a091da6c359d1 100644
--- a/x-pack/plugins/ml/public/application/components/annotations/annotations_table/annotations_table.js
+++ b/x-pack/plugins/ml/public/application/components/annotations/annotations_table/annotations_table.js
@@ -43,6 +43,7 @@ import {
getLatestDataOrBucketTimestamp,
isTimeSeriesViewJob,
} from '../../../../../common/util/job_utils';
+import { TIME_FORMAT } from '../../../../../common/constants/time_format';
import {
annotation$,
@@ -50,8 +51,6 @@ import {
annotationsRefreshed,
} from '../../../services/annotations_service';
-const TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
-
/**
* Table component for rendering the lists of annotations for an ML job.
*/
diff --git a/x-pack/plugins/ml/public/application/components/color_range_legend/index.ts b/x-pack/plugins/ml/public/application/components/color_range_legend/index.ts
index 93a1ec40f1d5e..8c92f47e5aa07 100644
--- a/x-pack/plugins/ml/public/application/components/color_range_legend/index.ts
+++ b/x-pack/plugins/ml/public/application/components/color_range_legend/index.ts
@@ -11,4 +11,5 @@ export {
useColorRange,
COLOR_RANGE,
COLOR_RANGE_SCALE,
+ useCurrentEuiTheme,
} from './use_color_range';
diff --git a/x-pack/plugins/ml/public/application/components/color_range_legend/use_color_range.ts b/x-pack/plugins/ml/public/application/components/color_range_legend/use_color_range.ts
index 1d5f5cf3a0309..f674372da6785 100644
--- a/x-pack/plugins/ml/public/application/components/color_range_legend/use_color_range.ts
+++ b/x-pack/plugins/ml/public/application/components/color_range_legend/use_color_range.ts
@@ -5,7 +5,7 @@
*/
import d3 from 'd3';
-
+import { useMemo } from 'react';
import euiThemeLight from '@elastic/eui/dist/eui_theme_light.json';
import euiThemeDark from '@elastic/eui/dist/eui_theme_dark.json';
@@ -150,7 +150,7 @@ export const useColorRange = (
colorRangeScale = COLOR_RANGE_SCALE.LINEAR,
featureCount = 1
) => {
- const euiTheme = useUiSettings().get('theme:darkMode') ? euiThemeDark : euiThemeLight;
+ const { euiTheme } = useCurrentEuiTheme();
const colorRanges: Record = {
[COLOR_RANGE.BLUE]: [
@@ -186,3 +186,11 @@ export const useColorRange = (
return scaleTypes[colorRangeScale];
};
+
+export function useCurrentEuiTheme() {
+ const uiSettings = useUiSettings();
+ return useMemo(
+ () => ({ euiTheme: uiSettings.get('theme:darkMode') ? euiThemeDark : euiThemeLight }),
+ [uiSettings]
+ );
+}
diff --git a/x-pack/plugins/ml/public/application/components/job_messages/job_messages.tsx b/x-pack/plugins/ml/public/application/components/job_messages/job_messages.tsx
index fd2b7902833a6..798ceae0f0732 100644
--- a/x-pack/plugins/ml/public/application/components/job_messages/job_messages.tsx
+++ b/x-pack/plugins/ml/public/application/components/job_messages/job_messages.tsx
@@ -13,10 +13,9 @@ import { i18n } from '@kbn/i18n';
import theme from '@elastic/eui/dist/eui_theme_light.json';
import { JobMessage } from '../../../../common/types/audit_message';
+import { TIME_FORMAT } from '../../../../common/constants/time_format';
import { JobIcon } from '../job_message_icon';
-const TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
-
interface JobMessagesProps {
messages: JobMessage[];
loading: boolean;
diff --git a/x-pack/plugins/ml/public/application/components/model_snapshots/close_job_confirm/close_job_confirm.tsx b/x-pack/plugins/ml/public/application/components/model_snapshots/close_job_confirm/close_job_confirm.tsx
new file mode 100644
index 0000000000000..8716f8c85f208
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/components/model_snapshots/close_job_confirm/close_job_confirm.tsx
@@ -0,0 +1,79 @@
+/*
+ * 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, { FC } from 'react';
+import { i18n } from '@kbn/i18n';
+
+import { FormattedMessage } from '@kbn/i18n/react';
+
+import { EuiOverlayMask, EuiConfirmModal } from '@elastic/eui';
+
+import { COMBINED_JOB_STATE } from '../model_snapshots_table';
+
+interface Props {
+ combinedJobState: COMBINED_JOB_STATE;
+ hideCloseJobModalVisible(): void;
+ forceCloseJob(): void;
+}
+export const CloseJobConfirm: FC = ({
+ combinedJobState,
+ hideCloseJobModalVisible,
+ forceCloseJob,
+}) => {
+ return (
+
+
+
+ {combinedJobState === COMBINED_JOB_STATE.OPEN_AND_RUNNING && (
+
+ )}
+ {combinedJobState === COMBINED_JOB_STATE.OPEN_AND_STOPPED && (
+
+ )}
+
+
+
+
+
+ );
+};
diff --git a/x-pack/plugins/ml/public/application/components/model_snapshots/close_job_confirm/index.ts b/x-pack/plugins/ml/public/application/components/model_snapshots/close_job_confirm/index.ts
new file mode 100644
index 0000000000000..195d14160b5e6
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/components/model_snapshots/close_job_confirm/index.ts
@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export { CloseJobConfirm } from './close_job_confirm';
diff --git a/x-pack/plugins/ml/public/application/components/model_snapshots/edit_model_snapshot_flyout/edit_model_snapshot_flyout.tsx b/x-pack/plugins/ml/public/application/components/model_snapshots/edit_model_snapshot_flyout/edit_model_snapshot_flyout.tsx
new file mode 100644
index 0000000000000..1e99fd12a9fa6
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/components/model_snapshots/edit_model_snapshot_flyout/edit_model_snapshot_flyout.tsx
@@ -0,0 +1,218 @@
+/*
+ * 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.
+ */
+
+/*
+ * 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, { FC, useCallback, useState, useEffect } from 'react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import {
+ EuiFlyout,
+ EuiFlyoutFooter,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiButton,
+ EuiButtonEmpty,
+ EuiTitle,
+ EuiFlyoutBody,
+ EuiSpacer,
+ EuiTextArea,
+ EuiFormRow,
+ EuiSwitch,
+ EuiConfirmModal,
+ EuiOverlayMask,
+ EuiCallOut,
+} from '@elastic/eui';
+
+import {
+ ModelSnapshot,
+ CombinedJobWithStats,
+} from '../../../../../common/types/anomaly_detection_jobs';
+import { ml } from '../../../services/ml_api_service';
+import { useNotifications } from '../../../contexts/kibana';
+
+interface Props {
+ snapshot: ModelSnapshot;
+ job: CombinedJobWithStats;
+ closeFlyout(reload: boolean): void;
+}
+
+export const EditModelSnapshotFlyout: FC = ({ snapshot, job, closeFlyout }) => {
+ const { toasts } = useNotifications();
+ const [description, setDescription] = useState(snapshot.description);
+ const [retain, setRetain] = useState(snapshot.retain);
+ const [deleteModalVisible, setDeleteModalVisible] = useState(false);
+ const [isCurrentSnapshot, setIsCurrentSnapshot] = useState(
+ snapshot.snapshot_id === job.model_snapshot_id
+ );
+
+ useEffect(() => {
+ setIsCurrentSnapshot(snapshot.snapshot_id === job.model_snapshot_id);
+ }, [snapshot]);
+
+ const updateSnapshot = useCallback(async () => {
+ try {
+ await ml.updateModelSnapshot(snapshot.job_id, snapshot.snapshot_id, {
+ description,
+ retain,
+ });
+ closeWithReload();
+ } catch (error) {
+ toasts.addError(new Error(error.body.message), {
+ title: i18n.translate('xpack.ml.editModelSnapshotFlyout.saveErrorTitle', {
+ defaultMessage: 'Model snapshot update failed',
+ }),
+ });
+ }
+ }, [retain, description, snapshot]);
+
+ const deleteSnapshot = useCallback(async () => {
+ try {
+ await ml.deleteModelSnapshot(snapshot.job_id, snapshot.snapshot_id);
+ hideDeleteModal();
+ closeWithReload();
+ } catch (error) {
+ toasts.addError(new Error(error.body.message), {
+ title: i18n.translate('xpack.ml.editModelSnapshotFlyout.deleteErrorTitle', {
+ defaultMessage: 'Model snapshot deletion failed',
+ }),
+ });
+ }
+ }, [snapshot]);
+
+ function closeWithReload() {
+ closeFlyout(true);
+ }
+ function closeWithoutReload() {
+ closeFlyout(false);
+ }
+ function showDeleteModal() {
+ setDeleteModalVisible(true);
+ }
+ function hideDeleteModal() {
+ setDeleteModalVisible(false);
+ }
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ {isCurrentSnapshot && (
+ <>
+
+
+
+
+
+ )}
+
+
+
+
+ setDescription(e.target.value)}
+ />
+
+
+
+ setRetain(e.target.checked)}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {deleteModalVisible && (
+
+
+
+ )}
+
+ );
+};
diff --git a/x-pack/plugins/ml/public/application/components/model_snapshots/edit_model_snapshot_flyout/index.ts b/x-pack/plugins/ml/public/application/components/model_snapshots/edit_model_snapshot_flyout/index.ts
new file mode 100644
index 0000000000000..fcb534620e438
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/components/model_snapshots/edit_model_snapshot_flyout/index.ts
@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export { EditModelSnapshotFlyout } from './edit_model_snapshot_flyout';
diff --git a/x-pack/plugins/ml/public/application/components/model_snapshots/index.ts b/x-pack/plugins/ml/public/application/components/model_snapshots/index.ts
new file mode 100644
index 0000000000000..e16d69ea3eb83
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/components/model_snapshots/index.ts
@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export { ModelSnapshotTable } from './model_snapshots_table';
diff --git a/x-pack/plugins/ml/public/application/components/model_snapshots/model_snapshots_table.tsx b/x-pack/plugins/ml/public/application/components/model_snapshots/model_snapshots_table.tsx
new file mode 100644
index 0000000000000..64fdd97903b60
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/components/model_snapshots/model_snapshots_table.tsx
@@ -0,0 +1,267 @@
+/*
+ * 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, { FC, useEffect, useCallback, useState } from 'react';
+import { i18n } from '@kbn/i18n';
+
+import {
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiInMemoryTable,
+ EuiLoadingSpinner,
+ EuiBasicTableColumn,
+ formatDate,
+} from '@elastic/eui';
+
+import { checkPermission } from '../../capabilities/check_capabilities';
+import { EditModelSnapshotFlyout } from './edit_model_snapshot_flyout';
+import { RevertModelSnapshotFlyout } from './revert_model_snapshot_flyout';
+import { ml } from '../../services/ml_api_service';
+import { JOB_STATE, DATAFEED_STATE } from '../../../../common/constants/states';
+import { TIME_FORMAT } from '../../../../common/constants/time_format';
+import { CloseJobConfirm } from './close_job_confirm';
+import {
+ ModelSnapshot,
+ CombinedJobWithStats,
+} from '../../../../common/types/anomaly_detection_jobs';
+
+interface Props {
+ job: CombinedJobWithStats;
+ refreshJobList: () => void;
+}
+
+export enum COMBINED_JOB_STATE {
+ OPEN_AND_RUNNING,
+ OPEN_AND_STOPPED,
+ CLOSED,
+ UNKNOWN,
+}
+
+export const ModelSnapshotTable: FC = ({ job, refreshJobList }) => {
+ const canCreateJob = checkPermission('canCreateJob');
+ const canStartStopDatafeed = checkPermission('canStartStopDatafeed');
+
+ const [snapshots, setSnapshots] = useState([]);
+ const [snapshotsLoaded, setSnapshotsLoaded] = useState(false);
+ const [editSnapshot, setEditSnapshot] = useState(null);
+ const [revertSnapshot, setRevertSnapshot] = useState(null);
+ const [closeJobModalVisible, setCloseJobModalVisible] = useState(null);
+ const [combinedJobState, setCombinedJobState] = useState(null);
+
+ useEffect(() => {
+ loadModelSnapshots();
+ }, []);
+
+ const loadModelSnapshots = useCallback(async () => {
+ const { model_snapshots: ms } = await ml.getModelSnapshots(job.job_id);
+ setSnapshots(ms);
+ setSnapshotsLoaded(true);
+ }, [job]);
+
+ const checkJobIsClosed = useCallback(
+ async (snapshot: ModelSnapshot) => {
+ const state = await getCombinedJobState(job.job_id);
+ if (state === COMBINED_JOB_STATE.UNKNOWN) {
+ // this will only happen if the job has been deleted by another user
+ // between the time the row has been expended and now
+ // eslint-disable-next-line no-console
+ console.error(`Error retrieving state for job ${job.job_id}`);
+ return;
+ }
+
+ setCombinedJobState(state);
+
+ if (state === COMBINED_JOB_STATE.CLOSED) {
+ // show flyout
+ setRevertSnapshot(snapshot);
+ } else {
+ // show close job modal
+ setCloseJobModalVisible(snapshot);
+ }
+ },
+ [job]
+ );
+
+ function hideCloseJobModalVisible() {
+ setCombinedJobState(null);
+ setCloseJobModalVisible(null);
+ }
+
+ const forceCloseJob = useCallback(async () => {
+ await ml.jobs.forceStopAndCloseJob(job.job_id);
+ if (closeJobModalVisible !== null) {
+ const state = await getCombinedJobState(job.job_id);
+ if (state === COMBINED_JOB_STATE.CLOSED) {
+ setRevertSnapshot(closeJobModalVisible);
+ }
+ }
+ hideCloseJobModalVisible();
+ }, [job, closeJobModalVisible]);
+
+ const closeEditFlyout = useCallback((reload: boolean) => {
+ setEditSnapshot(null);
+ if (reload) {
+ loadModelSnapshots();
+ }
+ }, []);
+
+ const closeRevertFlyout = useCallback((reload: boolean) => {
+ setRevertSnapshot(null);
+ if (reload) {
+ loadModelSnapshots();
+ // wait half a second before refreshing the jobs list
+ setTimeout(refreshJobList, 500);
+ }
+ }, []);
+
+ const columns: Array> = [
+ {
+ field: 'snapshot_id',
+ name: i18n.translate('xpack.ml.modelSnapshotTable.id', {
+ defaultMessage: 'ID',
+ }),
+ sortable: true,
+ },
+ {
+ field: 'description',
+ name: i18n.translate('xpack.ml.modelSnapshotTable.description', {
+ defaultMessage: 'Description',
+ }),
+ sortable: true,
+ },
+ {
+ field: 'timestamp',
+ name: i18n.translate('xpack.ml.modelSnapshotTable.time', {
+ defaultMessage: 'Date created',
+ }),
+ dataType: 'date',
+ render: renderDate,
+ sortable: true,
+ },
+ {
+ field: 'latest_record_time_stamp',
+ name: i18n.translate('xpack.ml.modelSnapshotTable.latestTimestamp', {
+ defaultMessage: 'Latest timestamp',
+ }),
+ dataType: 'date',
+ render: renderDate,
+ sortable: true,
+ },
+ {
+ field: 'retain',
+ name: i18n.translate('xpack.ml.modelSnapshotTable.retain', {
+ defaultMessage: 'Retain',
+ }),
+ width: '100px',
+ sortable: true,
+ },
+ {
+ field: '',
+ width: '100px',
+ name: i18n.translate('xpack.ml.modelSnapshotTable.actions', {
+ defaultMessage: 'Actions',
+ }),
+ actions: [
+ {
+ name: i18n.translate('xpack.ml.modelSnapshotTable.actions.revert.name', {
+ defaultMessage: 'Revert',
+ }),
+ description: i18n.translate('xpack.ml.modelSnapshotTable.actions.revert.description', {
+ defaultMessage: 'Revert to this snapshot',
+ }),
+ enabled: () => canCreateJob && canStartStopDatafeed,
+ type: 'icon',
+ icon: 'crosshairs',
+ onClick: checkJobIsClosed,
+ },
+ {
+ name: i18n.translate('xpack.ml.modelSnapshotTable.actions.edit.name', {
+ defaultMessage: 'Edit',
+ }),
+ description: i18n.translate('xpack.ml.modelSnapshotTable.actions.edit.description', {
+ defaultMessage: 'Edit this snapshot',
+ }),
+ enabled: () => canCreateJob,
+ type: 'icon',
+ icon: 'pencil',
+ onClick: setEditSnapshot,
+ },
+ ],
+ },
+ ];
+
+ if (snapshotsLoaded === false) {
+ return (
+ <>
+
+
+
+
+
+
+ );
+ }
+
+ return (
+ <>
+
+ {editSnapshot !== null && (
+
+ )}
+
+ {revertSnapshot !== null && (
+
+ )}
+
+ {closeJobModalVisible !== null && combinedJobState !== null && (
+
+ )}
+
+ );
+};
+
+function renderDate(date: number) {
+ return formatDate(date, TIME_FORMAT);
+}
+
+async function getCombinedJobState(jobId: string) {
+ const jobs = await ml.jobs.jobs([jobId]);
+
+ if (jobs.length !== 1) {
+ return COMBINED_JOB_STATE.UNKNOWN;
+ }
+
+ if (jobs[0].state !== JOB_STATE.CLOSED) {
+ if (jobs[0].datafeed_config.state !== DATAFEED_STATE.STOPPED) {
+ return COMBINED_JOB_STATE.OPEN_AND_RUNNING;
+ }
+ return COMBINED_JOB_STATE.OPEN_AND_STOPPED;
+ }
+ return COMBINED_JOB_STATE.CLOSED;
+}
diff --git a/x-pack/plugins/ml/public/application/components/model_snapshots/revert_model_snapshot_flyout/chart_loader.ts b/x-pack/plugins/ml/public/application/components/model_snapshots/revert_model_snapshot_flyout/chart_loader.ts
new file mode 100644
index 0000000000000..2da1e914b8139
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/components/model_snapshots/revert_model_snapshot_flyout/chart_loader.ts
@@ -0,0 +1,87 @@
+/*
+ * 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 { MlResultsService } from '../../../services/results_service';
+import { CombinedJobWithStats } from '../../../../../common/types/anomaly_detection_jobs';
+import { getSeverityType } from '../../../../../common/util/anomaly_utils';
+import { Anomaly } from '../../../jobs/new_job/common/results_loader/results_loader';
+import { LineChartPoint } from '../../../jobs/new_job/common/chart_loader/chart_loader';
+
+export function chartLoaderProvider(mlResultsService: MlResultsService) {
+ async function loadEventRateForJob(
+ job: CombinedJobWithStats,
+ bucketSpanMs: number,
+ bars: number
+ ): Promise {
+ const intervalMs = Math.max(
+ Math.floor(
+ (job.data_counts.latest_record_timestamp - job.data_counts.earliest_record_timestamp) / bars
+ ),
+ bucketSpanMs
+ );
+ const resp = await mlResultsService.getEventRateData(
+ job.datafeed_config.indices.join(),
+ job.datafeed_config.query,
+ job.data_description.time_field,
+ job.data_counts.earliest_record_timestamp,
+ job.data_counts.latest_record_timestamp,
+ intervalMs
+ );
+ if (resp.error !== undefined) {
+ throw resp.error;
+ }
+
+ const events = Object.entries(resp.results).map(([time, value]) => ({
+ time: +time,
+ value: value as number,
+ }));
+
+ if (events.length) {
+ // add one extra bucket with a value of 0
+ // so that an extra blank bar gets drawn at the end of the chart
+ // this solves an issue with elastic charts where the rect annotation
+ // never covers the last bar.
+ events.push({ time: events[events.length - 1].time + intervalMs, value: 0 });
+ }
+
+ return events;
+ }
+
+ async function loadAnomalyDataForJob(
+ job: CombinedJobWithStats,
+ bucketSpanMs: number,
+ bars: number
+ ) {
+ const intervalMs = Math.max(
+ Math.floor(
+ (job.data_counts.latest_record_timestamp - job.data_counts.earliest_record_timestamp) / bars
+ ),
+ bucketSpanMs
+ );
+
+ const resp = await mlResultsService.getScoresByBucket(
+ [job.job_id],
+ job.data_counts.earliest_record_timestamp,
+ job.data_counts.latest_record_timestamp,
+ intervalMs,
+ 1
+ );
+
+ const results = resp.results[job.job_id];
+ if (results === undefined) {
+ return [];
+ }
+
+ const anomalies: Record = {};
+ anomalies[0] = Object.entries(results).map(
+ ([time, value]) =>
+ ({ time: +time, value, severity: getSeverityType(value as number) } as Anomaly)
+ );
+ return anomalies;
+ }
+
+ return { loadEventRateForJob, loadAnomalyDataForJob };
+}
diff --git a/x-pack/plugins/ml/public/application/components/model_snapshots/revert_model_snapshot_flyout/create_calendar.tsx b/x-pack/plugins/ml/public/application/components/model_snapshots/revert_model_snapshot_flyout/create_calendar.tsx
new file mode 100644
index 0000000000000..937c394e35bc1
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/components/model_snapshots/revert_model_snapshot_flyout/create_calendar.tsx
@@ -0,0 +1,310 @@
+/*
+ * 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.
+ */
+
+/*
+ * 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.
+ */
+
+/*
+ * 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, { FC, Fragment, useCallback, memo } from 'react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import moment from 'moment';
+import { XYBrushArea } from '@elastic/charts';
+import {
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiSpacer,
+ EuiFormRow,
+ EuiFieldText,
+ EuiDatePicker,
+ EuiButtonIcon,
+ EuiPanel,
+} from '@elastic/eui';
+
+import { EventRateChart } from '../../../jobs/new_job/pages/components/charts/event_rate_chart/event_rate_chart';
+import { Anomaly } from '../../../jobs/new_job/common/results_loader/results_loader';
+import { useCurrentEuiTheme } from '../../../components/color_range_legend';
+import { LineChartPoint } from '../../../jobs/new_job/common/chart_loader/chart_loader';
+
+export interface CalendarEvent {
+ start: moment.Moment | null;
+ end: moment.Moment | null;
+ description: string;
+}
+
+interface Props {
+ calendarEvents: CalendarEvent[];
+ setCalendarEvents: (calendars: CalendarEvent[]) => void;
+ minSelectableTimeStamp: number;
+ maxSelectableTimeStamp: number;
+ eventRateData: LineChartPoint[];
+ anomalies: Anomaly[];
+ chartReady: boolean;
+}
+
+export const CreateCalendar: FC = ({
+ calendarEvents,
+ setCalendarEvents,
+ minSelectableTimeStamp,
+ maxSelectableTimeStamp,
+ eventRateData,
+ anomalies,
+ chartReady,
+}) => {
+ const maxSelectableTimeMoment = moment(maxSelectableTimeStamp);
+ const minSelectableTimeMoment = moment(minSelectableTimeStamp);
+
+ const { euiTheme } = useCurrentEuiTheme();
+
+ const onBrushEnd = useCallback(
+ ({ x }: XYBrushArea) => {
+ if (x && x.length === 2) {
+ const end = x[1] < minSelectableTimeStamp ? null : x[1];
+ if (end !== null) {
+ const start = x[0] < minSelectableTimeStamp ? minSelectableTimeStamp : x[0];
+
+ setCalendarEvents([
+ ...calendarEvents,
+ {
+ start: moment(start),
+ end: moment(end),
+ description: createDefaultEventDescription(calendarEvents.length + 1),
+ },
+ ]);
+ }
+ }
+ },
+ [calendarEvents]
+ );
+
+ const setStartDate = useCallback(
+ (start: moment.Moment | null, index: number) => {
+ const event = calendarEvents[index];
+ if (event === undefined) {
+ setCalendarEvents([
+ ...calendarEvents,
+ { start, end: null, description: createDefaultEventDescription(index) },
+ ]);
+ } else {
+ event.start = start;
+ setCalendarEvents([...calendarEvents]);
+ }
+ },
+ [calendarEvents]
+ );
+
+ const setEndDate = useCallback(
+ (end: moment.Moment | null, index: number) => {
+ const event = calendarEvents[index];
+ if (event === undefined) {
+ setCalendarEvents([
+ ...calendarEvents,
+ { start: null, end, description: createDefaultEventDescription(index) },
+ ]);
+ } else {
+ event.end = end;
+ setCalendarEvents([...calendarEvents]);
+ }
+ },
+ [calendarEvents]
+ );
+
+ const setDescription = useCallback(
+ (description: string, index: number) => {
+ const event = calendarEvents[index];
+ if (event !== undefined) {
+ event.description = description;
+ setCalendarEvents([...calendarEvents]);
+ }
+ },
+ [calendarEvents]
+ );
+
+ const removeCalendarEvent = useCallback(
+ (index: number) => {
+ if (calendarEvents[index] !== undefined) {
+ const ce = [...calendarEvents];
+ ce.splice(index, 1);
+ setCalendarEvents(ce);
+ }
+ },
+ [calendarEvents]
+ );
+
+ return (
+ <>
+
+
+
+
+
+ ({
+ start: c.start!.valueOf(),
+ end: c.end!.valueOf(),
+ }))}
+ onBrushEnd={onBrushEnd}
+ overlayColor={euiTheme.euiColorPrimary}
+ />
+
+
+ {calendarEvents.map((c, i) => (
+
+
+
+
+
+
+
+ setStartDate(d, i)}
+ />
+
+
+
+
+ setEndDate(d, i)}
+ />
+
+
+
+
+
+
+
+ setDescription(e.target.value, i)}
+ />
+
+
+
+
+
+
+ removeCalendarEvent(i)}
+ iconType="trash"
+ aria-label={i18n.translate(
+ 'xpack.ml.revertModelSnapshotFlyout.createCalendar.deleteLabel',
+ {
+ defaultMessage: 'Delete event',
+ }
+ )}
+ />
+
+
+
+
+
+ ))}
+
+ );
+};
+
+interface ChartProps {
+ eventRateData: LineChartPoint[];
+ anomalies: Anomaly[];
+ loading: boolean;
+ onBrushEnd(area: XYBrushArea): void;
+ overlayRanges: Array<{ start: number; end: number }>;
+ overlayColor: string;
+}
+
+const Chart: FC = memo(
+ ({ eventRateData, anomalies, loading, onBrushEnd, overlayRanges, overlayColor }) => (
+ ({
+ start: c.start,
+ end: c.end,
+ color: overlayColor,
+ showMarker: false,
+ }))}
+ onBrushEnd={onBrushEnd}
+ />
+ ),
+ (prev: ChartProps, next: ChartProps) => {
+ // only redraw if the calendar ranges have changes
+ return (
+ prev.overlayRanges.length === next.overlayRanges.length &&
+ JSON.stringify(prev.overlayRanges) === JSON.stringify(next.overlayRanges)
+ );
+ }
+);
+
+function filterIncompleteEvents(event: CalendarEvent): event is CalendarEvent {
+ return event.start !== null && event.end !== null;
+}
+
+function createDefaultEventDescription(index: number) {
+ return i18n.translate(
+ 'xpack.ml.revertModelSnapshotFlyout.createCalendar.defaultEventDescription',
+ {
+ defaultMessage: 'Auto created event {index}',
+ values: { index },
+ }
+ );
+}
diff --git a/x-pack/plugins/ml/public/application/components/model_snapshots/revert_model_snapshot_flyout/index.ts b/x-pack/plugins/ml/public/application/components/model_snapshots/revert_model_snapshot_flyout/index.ts
new file mode 100644
index 0000000000000..33adc65a9e327
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/components/model_snapshots/revert_model_snapshot_flyout/index.ts
@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export { RevertModelSnapshotFlyout } from './revert_model_snapshot_flyout';
diff --git a/x-pack/plugins/ml/public/application/components/model_snapshots/revert_model_snapshot_flyout/revert_model_snapshot_flyout.tsx b/x-pack/plugins/ml/public/application/components/model_snapshots/revert_model_snapshot_flyout/revert_model_snapshot_flyout.tsx
new file mode 100644
index 0000000000000..ad5915b39d521
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/components/model_snapshots/revert_model_snapshot_flyout/revert_model_snapshot_flyout.tsx
@@ -0,0 +1,409 @@
+/*
+ * 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.
+ */
+
+/*
+ * 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, { FC, useState, useCallback, useMemo, useEffect } from 'react';
+import { i18n } from '@kbn/i18n';
+import {} from 'lodash';
+import { FormattedMessage } from '@kbn/i18n/react';
+import {
+ EuiFlyout,
+ EuiFlyoutHeader,
+ EuiFlyoutFooter,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiButton,
+ EuiButtonEmpty,
+ EuiTitle,
+ EuiFlyoutBody,
+ EuiSpacer,
+ EuiFormRow,
+ EuiSwitch,
+ EuiConfirmModal,
+ EuiOverlayMask,
+ EuiCallOut,
+ EuiHorizontalRule,
+ EuiSuperSelect,
+ EuiText,
+ formatDate,
+} from '@elastic/eui';
+
+import {
+ ModelSnapshot,
+ CombinedJobWithStats,
+} from '../../../../../common/types/anomaly_detection_jobs';
+import { ml } from '../../../services/ml_api_service';
+import { useNotifications } from '../../../contexts/kibana';
+import { chartLoaderProvider } from './chart_loader';
+import { mlResultsService } from '../../../services/results_service';
+import { LineChartPoint } from '../../../jobs/new_job/common/chart_loader';
+import { EventRateChart } from '../../../jobs/new_job/pages/components/charts/event_rate_chart/event_rate_chart';
+import { Anomaly } from '../../../jobs/new_job/common/results_loader/results_loader';
+import { parseInterval } from '../../../../../common/util/parse_interval';
+import { TIME_FORMAT } from '../../../../../common/constants/time_format';
+import { CreateCalendar, CalendarEvent } from './create_calendar';
+
+interface Props {
+ snapshot: ModelSnapshot;
+ snapshots: ModelSnapshot[];
+ job: CombinedJobWithStats;
+ closeFlyout(reload: boolean): void;
+}
+
+export const RevertModelSnapshotFlyout: FC = ({ snapshot, snapshots, job, closeFlyout }) => {
+ const { toasts } = useNotifications();
+ const { loadAnomalyDataForJob, loadEventRateForJob } = useMemo(
+ () => chartLoaderProvider(mlResultsService),
+ []
+ );
+ const [currentSnapshot, setCurrentSnapshot] = useState(snapshot);
+ const [revertModalVisible, setRevertModalVisible] = useState(false);
+ const [replay, setReplay] = useState(false);
+ const [runInRealTime, setRunInRealTime] = useState(false);
+ const [createCalendar, setCreateCalendar] = useState(false);
+ const [calendarEvents, setCalendarEvents] = useState([]);
+ const [calendarEventsValid, setCalendarEventsValid] = useState(true);
+
+ const [eventRateData, setEventRateData] = useState([]);
+ const [anomalies, setAnomalies] = useState([]);
+ const [chartReady, setChartReady] = useState(false);
+ const [applying, setApplying] = useState(false);
+
+ useEffect(() => {
+ createChartData();
+ }, [currentSnapshot]);
+
+ useEffect(() => {
+ const invalid = calendarEvents.some(
+ (c) => c.description === '' || c.end === null || c.start === null
+ );
+ setCalendarEventsValid(invalid === false);
+
+ // a bug in elastic charts selection can
+ // cause duplicate selected areas to be added
+ // dedupe the calendars based on start and end times
+ const calMap = new Map(
+ calendarEvents.map((c) => [`${c.start?.valueOf()}${c.end?.valueOf()}`, c])
+ );
+ const dedupedCalendarEvents = [...calMap.values()];
+
+ if (dedupedCalendarEvents.length < calendarEvents.length) {
+ // deduped list is shorter, we must have removed something.
+ setCalendarEvents(dedupedCalendarEvents);
+ }
+ }, [calendarEvents]);
+
+ const createChartData = useCallback(async () => {
+ const bucketSpanMs = parseInterval(job.analysis_config.bucket_span)!.asMilliseconds();
+ const eventRate = await loadEventRateForJob(job, bucketSpanMs, 100);
+ const anomalyData = await loadAnomalyDataForJob(job, bucketSpanMs, 100);
+ setEventRateData(eventRate);
+ if (anomalyData[0] !== undefined) {
+ setAnomalies(anomalyData[0]);
+ }
+ setChartReady(true);
+ }, [job]);
+
+ function closeWithReload() {
+ closeFlyout(true);
+ }
+ function closeWithoutReload() {
+ closeFlyout(false);
+ }
+
+ function showRevertModal() {
+ setRevertModalVisible(true);
+ }
+ function hideRevertModal() {
+ setRevertModalVisible(false);
+ }
+
+ async function applyRevert() {
+ setApplying(true);
+ const end =
+ replay && runInRealTime === false ? job.data_counts.latest_record_timestamp : undefined;
+ try {
+ const events =
+ replay && createCalendar
+ ? calendarEvents.filter(filterIncompleteEvents).map((c) => ({
+ start: c.start!.valueOf(),
+ end: c.end!.valueOf(),
+ description: c.description,
+ }))
+ : undefined;
+
+ await ml.jobs.revertModelSnapshot(
+ job.job_id,
+ currentSnapshot.snapshot_id,
+ replay,
+ end,
+ events
+ );
+ hideRevertModal();
+ closeWithReload();
+ } catch (error) {
+ setApplying(false);
+ toasts.addError(new Error(error.body.message), {
+ title: i18n.translate('xpack.ml.revertModelSnapshotFlyout.revertErrorTitle', {
+ defaultMessage: 'Model snapshot revert failed',
+ }),
+ });
+ }
+ }
+
+ function onSnapshotChange(ssId: string) {
+ const ss = snapshots.find((s) => s.snapshot_id === ssId);
+ if (ss !== undefined) {
+ setCurrentSnapshot(ss);
+ }
+ }
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ {currentSnapshot.description}
+
+
+
+ {false && ( // disabled for now
+ <>
+
+
+
+ ({
+ value: s.snapshot_id,
+ inputDisplay: s.snapshot_id,
+ dropdownDisplay: (
+ <>
+ {s.snapshot_id}
+
+ {s.description}
+
+
+ ),
+ }))
+ .reverse()}
+ valueOfSelected={currentSnapshot.snapshot_id}
+ onChange={onSnapshotChange}
+ itemLayoutAlign="top"
+ hasDividers
+ />
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ setReplay(e.target.checked)}
+ />
+
+
+ {replay && (
+ <>
+
+ setRunInRealTime(e.target.checked)}
+ />
+
+
+
+ setCreateCalendar(e.target.checked)}
+ />
+
+
+ {createCalendar && (
+
+ )}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {revertModalVisible && (
+
+
+
+ )}
+
+ );
+};
+
+function filterIncompleteEvents(event: CalendarEvent): event is CalendarEvent {
+ return event.start !== null && event.end !== null;
+}
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/back_to_list_panel/back_to_list_panel.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/back_to_list_panel/back_to_list_panel.tsx
index e437d27372a3e..b6b335afa53f5 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/back_to_list_panel/back_to_list_panel.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/back_to_list_panel/back_to_list_panel.tsx
@@ -7,29 +7,38 @@
import React, { FC, Fragment } from 'react';
import { EuiCard, EuiHorizontalRule, EuiIcon } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
+import { useMlKibana } from '../../../../../contexts/kibana';
-function redirectToAnalyticsManagementPage() {
- window.location.href = '#/data_frame_analytics?';
-}
+export const BackToListPanel: FC = () => {
+ const {
+ services: {
+ application: { navigateToUrl },
+ },
+ } = useMlKibana();
-export const BackToListPanel: FC = () => (
-
-
- }
- title={i18n.translate('xpack.ml.dataframe.analytics.create.analyticsListCardTitle', {
- defaultMessage: 'Data Frame Analytics',
- })}
- description={i18n.translate(
- 'xpack.ml.dataframe.analytics.create.analyticsListCardDescription',
- {
- defaultMessage: 'Return to the analytics management page.',
- }
- )}
- onClick={redirectToAnalyticsManagementPage}
- data-test-subj="analyticsWizardCardManagement"
- />
-
-);
+ const redirectToAnalyticsManagementPage = async () => {
+ await navigateToUrl('#/data_frame_analytics?');
+ };
+
+ return (
+
+
+ }
+ title={i18n.translate('xpack.ml.dataframe.analytics.create.analyticsListCardTitle', {
+ defaultMessage: 'Data Frame Analytics',
+ })}
+ description={i18n.translate(
+ 'xpack.ml.dataframe.analytics.create.analyticsListCardDescription',
+ {
+ defaultMessage: 'Return to the analytics management page.',
+ }
+ )}
+ onClick={redirectToAnalyticsManagementPage}
+ data-test-subj="analyticsWizardCardManagement"
+ />
+
+ );
+};
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/exploration_results_table/exploration_results_table.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/exploration_results_table/exploration_results_table.tsx
index 24e5785c6e808..105eb9f73804d 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/exploration_results_table/exploration_results_table.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/exploration_results_table/exploration_results_table.tsx
@@ -74,8 +74,9 @@ export const ExplorationResultsTable: FC = React.memo(
if (jobConfig === undefined || classificationData === undefined) {
return null;
}
+
// if it's a searchBar syntax error leave the table visible so they can try again
- if (status === INDEX_STATUS.ERROR && !errorMessage.includes('parsing_exception')) {
+ if (status === INDEX_STATUS.ERROR && !errorMessage.includes('failed to create query')) {
return (
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.tsx
index 58f8528236bb9..917ab1b0ed1dd 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.tsx
@@ -56,7 +56,7 @@ export const OutlierExploration: FC = React.memo(({ jobId }) =
const { columns, errorMessage, status, tableItems } = outlierData;
// if it's a searchBar syntax error leave the table visible so they can try again
- if (status === INDEX_STATUS.ERROR && !errorMessage.includes('parsing_exception')) {
+ if (status === INDEX_STATUS.ERROR && !errorMessage.includes('failed to create query')) {
return (
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/action_clone.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/action_clone.tsx
index e8b1cd1a5696a..df7dce7217fd4 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/action_clone.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/action_clone.tsx
@@ -360,7 +360,14 @@ export const CloneAction: FC = ({ createAnalyticsForm, item })
defaultMessage: 'Clone job',
});
- const { notifications, savedObjects } = useMlKibana().services;
+ const {
+ services: {
+ application: { navigateToUrl },
+ notifications: { toasts },
+ savedObjects,
+ },
+ } = useMlKibana();
+
const savedObjectsClient = savedObjects.client;
const onClick = async () => {
@@ -385,7 +392,6 @@ export const CloneAction: FC = ({ createAnalyticsForm, item })
sourceIndexId = ip.id;
}
} catch (e) {
- const { toasts } = notifications;
const error = extractErrorMessage(e);
toasts.addDanger(
@@ -401,9 +407,11 @@ export const CloneAction: FC = ({ createAnalyticsForm, item })
}
if (sourceIndexId) {
- window.location.href = `ml#/data_frame_analytics/new_job?index=${encodeURIComponent(
- sourceIndexId
- )}&jobId=${item.config.id}`;
+ await navigateToUrl(
+ `ml#/data_frame_analytics/new_job?index=${encodeURIComponent(sourceIndexId)}&jobId=${
+ item.config.id
+ }`
+ );
}
};
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/source_selection/source_selection.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/source_selection/source_selection.tsx
index d20afe93d2b9d..b03a58a02309d 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/source_selection/source_selection.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/source_selection/source_selection.tsx
@@ -26,12 +26,20 @@ interface Props {
}
export const SourceSelection: FC = ({ onClose }) => {
- const { uiSettings, savedObjects } = useMlKibana().services;
+ const {
+ services: {
+ application: { navigateToUrl },
+ savedObjects,
+ uiSettings,
+ },
+ } = useMlKibana();
- const onSearchSelected = (id: string, type: string) => {
- window.location.href = `ml#/data_frame_analytics/new_job?${
- type === 'index-pattern' ? 'index' : 'savedSearchId'
- }=${encodeURIComponent(id)}`;
+ const onSearchSelected = async (id: string, type: string) => {
+ await navigateToUrl(
+ `ml#/data_frame_analytics/new_job?${
+ type === 'index-pattern' ? 'index' : 'savedSearchId'
+ }=${encodeURIComponent(id)}`
+ );
};
return (
diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/forecasts_table/forecasts_table.js b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/forecasts_table/forecasts_table.js
index 817715dbf6413..2f40941fd20fe 100644
--- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/forecasts_table/forecasts_table.js
+++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/forecasts_table/forecasts_table.js
@@ -21,6 +21,7 @@ import {
import { formatDate, formatNumber } from '@elastic/eui/lib/services/format';
import { FORECAST_REQUEST_STATE } from '../../../../../../../common/constants/states';
+import { TIME_FORMAT } from '../../../../../../../common/constants/time_format';
import { addItemToRecentlyAccessed } from '../../../../../util/recently_accessed';
import { mlForecastService } from '../../../../../services/forecast_service';
import { i18n } from '@kbn/i18n';
@@ -31,7 +32,6 @@ import {
} from '../../../../../../../common/util/job_utils';
const MAX_FORECASTS = 500;
-const TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
/**
* Table component for rendering the lists of forecasts run on an ML job.
diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/format_values.js b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/format_values.js
index 9194f7537cf3d..883ddfca70cd7 100644
--- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/format_values.js
+++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/format_values.js
@@ -8,8 +8,8 @@ import numeral from '@elastic/numeral';
import { formatDate } from '@elastic/eui/lib/services/format';
import { roundToDecimalPlace } from '../../../../formatters/round_to_decimal_place';
import { toLocaleString } from '../../../../util/string_utils';
+import { TIME_FORMAT } from '../../../../../../common/constants/time_format';
-const TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
const DATA_FORMAT = '0.0 b';
function formatData(txt) {
diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_details.js b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_details.js
index 56da4f1e0ff84..9a5cea62cf6ff 100644
--- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_details.js
+++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_details.js
@@ -14,6 +14,7 @@ import { JsonPane } from './json_tab';
import { DatafeedPreviewPane } from './datafeed_preview_tab';
import { AnnotationsTable } from '../../../../components/annotations/annotations_table';
import { AnnotationFlyout } from '../../../../components/annotations/annotation_flyout';
+import { ModelSnapshotTable } from '../../../../components/model_snapshots';
import { ForecastsTable } from './forecasts_table';
import { JobDetailsPane } from './job_details_pane';
import { JobMessagesPane } from './job_messages_pane';
@@ -25,7 +26,7 @@ export class JobDetails extends Component {
this.state = {};
if (this.props.addYourself) {
- this.props.addYourself(props.jobId, this);
+ this.props.addYourself(props.jobId, (j) => this.updateJob(j));
}
}
@@ -33,9 +34,8 @@ export class JobDetails extends Component {
this.props.removeYourself(this.props.jobId);
}
- static getDerivedStateFromProps(props) {
- const { job, loading } = props;
- return { job, loading };
+ updateJob(job) {
+ this.setState({ job });
}
render() {
@@ -64,8 +64,7 @@ export class JobDetails extends Component {
datafeedTimingStats,
} = extractJobDetails(job);
- const { showFullDetails } = this.props;
-
+ const { showFullDetails, refreshJobList } = this.props;
const tabs = [
{
id: 'job-settings',
@@ -175,6 +174,19 @@ export class JobDetails extends Component {
),
});
+
+ tabs.push({
+ id: 'modelSnapshots',
+ 'data-test-subj': 'mlJobListTab-modelSnapshots',
+ name: i18n.translate('xpack.ml.jobsList.jobDetails.tabs.modelSnapshotsLabel', {
+ defaultMessage: 'Model snapshots',
+ }),
+ content: (
+
+
+
+ ),
+ });
}
return (
@@ -191,4 +203,5 @@ JobDetails.propTypes = {
addYourself: PropTypes.func.isRequired,
removeYourself: PropTypes.func.isRequired,
showFullDetails: PropTypes.bool,
+ refreshJobList: PropTypes.func,
};
diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list/jobs_list.js b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list/jobs_list.js
index 0afaca3ec12e1..23b68551ca0f5 100644
--- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list/jobs_list.js
+++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list/jobs_list.js
@@ -15,6 +15,7 @@ import { ResultLinks, actionsMenuContent } from '../job_actions';
import { JobDescription } from './job_description';
import { JobIcon } from '../../../../components/job_message_icon';
import { getJobIdUrl } from '../../../../util/get_job_id_url';
+import { TIME_FORMAT } from '../../../../../../common/constants/time_format';
import { EuiBadge, EuiBasicTable, EuiButtonIcon, EuiLink, EuiScreenReaderOnly } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
@@ -22,7 +23,6 @@ import { FormattedMessage } from '@kbn/i18n/react';
const PAGE_SIZE = 10;
const PAGE_SIZE_OPTIONS = [10, 25, 50];
-const TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
// 'isManagementTable' bool prop to determine when to configure table for use in Kibana management page
export class JobsList extends Component {
diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list_view/jobs_list_view.js b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list_view/jobs_list_view.js
index bb9e532245d6d..a3b6cb39815a3 100644
--- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list_view/jobs_list_view.js
+++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list_view/jobs_list_view.js
@@ -112,6 +112,7 @@ export class JobsListView extends Component {
addYourself={this.addUpdateFunction}
removeYourself={this.removeUpdateFunction}
showFullDetails={this.props.isManagementTable !== true}
+ refreshJobList={this.onRefreshClick}
/>
);
} else {
@@ -121,6 +122,7 @@ export class JobsListView extends Component {
addYourself={this.addUpdateFunction}
removeYourself={this.removeUpdateFunction}
showFullDetails={this.props.isManagementTable !== true}
+ refreshJobList={this.onRefreshClick}
/>
);
}
@@ -143,10 +145,13 @@ export class JobsListView extends Component {
addYourself={this.addUpdateFunction}
removeYourself={this.removeUpdateFunction}
showFullDetails={this.props.isManagementTable !== true}
+ refreshJobList={this.onRefreshClick}
/>
);
}
- this.setState({ itemIdToExpandedRowMap });
+ this.setState({ itemIdToExpandedRowMap }, () => {
+ this.updateFunctions[jobId](job);
+ });
});
})
.catch((error) => {
@@ -254,7 +259,7 @@ export class JobsListView extends Component {
);
Object.keys(this.updateFunctions).forEach((j) => {
- this.updateFunctions[j].setState({ job: fullJobsList[j] });
+ this.updateFunctions[j](fullJobsList[j]);
});
jobs.forEach((job) => {
diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/start_datafeed_modal/time_range_selector/time_range_selector.js b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/start_datafeed_modal/time_range_selector/time_range_selector.js
index 55c87bbc90b10..8cf244c3c7d8a 100644
--- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/start_datafeed_modal/time_range_selector/time_range_selector.js
+++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/start_datafeed_modal/time_range_selector/time_range_selector.js
@@ -13,8 +13,7 @@ import { EuiDatePicker, EuiFieldText } from '@elastic/eui';
import moment from 'moment';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
-
-const TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
+import { TIME_FORMAT } from '../../../../../../../common/constants/time_format';
export class TimeRangeSelector extends Component {
constructor(props) {
diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/event_rate_chart.tsx b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/event_rate_chart.tsx
index 2fb8ea2820b29..bd6fedd4ba21c 100644
--- a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/event_rate_chart.tsx
+++ b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/event_rate_chart.tsx
@@ -5,13 +5,22 @@
*/
import React, { FC } from 'react';
-import { BarSeries, Chart, ScaleType, Settings, TooltipType } from '@elastic/charts';
+import {
+ HistogramBarSeries,
+ Chart,
+ ScaleType,
+ Settings,
+ TooltipType,
+ BrushEndListener,
+ PartialTheme,
+} from '@elastic/charts';
import { Axes } from '../common/axes';
import { LineChartPoint } from '../../../../common/chart_loader';
import { Anomaly } from '../../../../common/results_loader';
import { useChartColors } from '../common/settings';
import { LoadingWrapper } from '../loading_wrapper';
import { Anomalies } from '../common/anomalies';
+import { OverlayRange } from './overlay_range';
interface Props {
eventRateChartData: LineChartPoint[];
@@ -21,6 +30,13 @@ interface Props {
showAxis?: boolean;
loading?: boolean;
fadeChart?: boolean;
+ overlayRanges?: Array<{
+ start: number;
+ end: number;
+ color: string;
+ showMarker?: boolean;
+ }>;
+ onBrushEnd?: BrushEndListener;
}
export const EventRateChart: FC = ({
@@ -31,10 +47,16 @@ export const EventRateChart: FC = ({
showAxis,
loading = false,
fadeChart,
+ overlayRanges,
+ onBrushEnd,
}) => {
const { EVENT_RATE_COLOR_WITH_ANOMALIES, EVENT_RATE_COLOR } = useChartColors();
const barColor = fadeChart ? EVENT_RATE_COLOR_WITH_ANOMALIES : EVENT_RATE_COLOR;
+ const theme: PartialTheme = {
+ scales: { histogramPadding: 0.2 },
+ };
+
return (
= ({
{showAxis === true && }
-
+ {onBrushEnd === undefined ? (
+
+ ) : (
+
+ )}
+
+ {overlayRanges &&
+ overlayRanges.map((range, i) => (
+
+ ))}
+
- = ({
+ overlayKey,
+ eventRateChartData,
+ start,
+ end,
+ color,
+ showMarker = true,
+}) => {
+ const maxHeight = Math.max(...eventRateChartData.map((e) => e.value));
+
+ return (
+ <>
+
+
+
+
+
+
+
+ {formatDate(start, TIME_FORMAT)}
+
+