diff --git a/x-pack/plugins/grokdebugger/common/constants/editor.js b/x-pack/plugins/grokdebugger/common/constants/editor.js index a9c74ee18e421..e69ba73be7900 100644 --- a/x-pack/plugins/grokdebugger/common/constants/editor.js +++ b/x-pack/plugins/grokdebugger/common/constants/editor.js @@ -9,6 +9,4 @@ export const EDITOR = { PATTERN_MAX_LINES: 10, SAMPLE_DATA_MIN_LINES: 3, SAMPLE_DATA_MAX_LINES: 50, - SCROLL_MARGIN_TOP_PX: 4, - SCROLL_MARGIN_BOTTOM_PX: 4, }; diff --git a/x-pack/plugins/grokdebugger/public/lib/ace/apply_editor_options.js b/x-pack/plugins/grokdebugger/public/lib/ace/apply_editor_options.js deleted file mode 100644 index fb178711b77ee..0000000000000 --- a/x-pack/plugins/grokdebugger/public/lib/ace/apply_editor_options.js +++ /dev/null @@ -1,32 +0,0 @@ -/* - * 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 { EDITOR } from '../../../common/constants'; - -export function applyEditorOptions(editor, minLines, maxLines) { - editor.getSession().setUseWrapMode(true); - - /* - * This sets the space between the editor's borders and the - * edges of the top/bottom lines to make for a less-crowded - * typing experience. - */ - editor.renderer.setScrollMargin( - EDITOR.SCROLL_MARGIN_TOP_PX, - EDITOR.SCROLL_MARGIN_BOTTOM_PX, - 0, - 0 - ); - - editor.setOptions({ - highlightActiveLine: false, - highlightGutterLine: false, - minLines, - maxLines - }); - - editor.$blockScrolling = Infinity; -} diff --git a/x-pack/plugins/grokdebugger/public/lib/ace/apply_editor_options.test.js b/x-pack/plugins/grokdebugger/public/lib/ace/apply_editor_options.test.js deleted file mode 100644 index 79724369a20a2..0000000000000 --- a/x-pack/plugins/grokdebugger/public/lib/ace/apply_editor_options.test.js +++ /dev/null @@ -1,57 +0,0 @@ -/* - * 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 { applyEditorOptions } from './apply_editor_options'; -import { EDITOR } from '../../../common/constants'; - -describe('applyEditorOptions', () => { - let editor; - let setUseWrapMode; - let setScrollMargin; - let setOptions; - - beforeEach(() => { - setUseWrapMode = jest.fn(); - setScrollMargin = jest.fn(); - setOptions = jest.fn(); - - editor = { - getSession: () => { - return { setUseWrapMode }; - }, - renderer: { - setScrollMargin, - }, - setOptions, - }; - }); - - it('creates default props and given line sizes', () => { - const minLines = 14; - const maxLines = 90; - - applyEditorOptions(editor, minLines, maxLines); - - expect(setUseWrapMode.mock.calls).toHaveLength(1); - expect(setUseWrapMode.mock.calls[0][0]).toBe(true); - - expect(setScrollMargin.mock.calls).toHaveLength(1); - expect(setScrollMargin.mock.calls[0][0]).toEqual(EDITOR.SCROLL_MARGIN_TOP_PX); - expect(setScrollMargin.mock.calls[0][1]).toEqual(EDITOR.SCROLL_MARGIN_BOTTOM_PX); - expect(setScrollMargin.mock.calls[0][2]).toEqual(0); - expect(setScrollMargin.mock.calls[0][3]).toEqual(0); - - expect(setOptions.mock.calls).toHaveLength(1); - expect(setOptions.mock.calls[0][0]).toEqual({ - highlightActiveLine: false, - highlightGutterLine: false, - minLines: 14, - maxLines: 90, - }); - - expect(editor.$blockScrolling).toEqual(Infinity); - }); -}); diff --git a/x-pack/plugins/grokdebugger/public/lib/ace/index.js b/x-pack/plugins/grokdebugger/public/lib/ace/index.js index a34c891bd0d2c..5c118878ee1ae 100644 --- a/x-pack/plugins/grokdebugger/public/lib/ace/index.js +++ b/x-pack/plugins/grokdebugger/public/lib/ace/index.js @@ -5,4 +5,3 @@ */ export { GrokMode } from './grok_mode'; -export { applyEditorOptions } from './apply_editor_options'; diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/custom_patterns_input/custom_patterns_input.html b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/custom_patterns_input/custom_patterns_input.html deleted file mode 100644 index d252743e7a267..0000000000000 --- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/custom_patterns_input/custom_patterns_input.html +++ /dev/null @@ -1,38 +0,0 @@ -
- -
-
-
- - - Enter one custom pattern per line. For example: - -
- -
-
- 
POSTFIX_QUEUEID [0-9A-F]{10,11}
-MSG message-id=<%{GREEDYDATA}>
-
-
-
-
-
-
-
- -
diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/custom_patterns_input/custom_patterns_input.js b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/custom_patterns_input/custom_patterns_input.js index 7f3b3099df7b0..e18af08b8ae66 100644 --- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/custom_patterns_input/custom_patterns_input.js +++ b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/custom_patterns_input/custom_patterns_input.js @@ -4,47 +4,59 @@ * you may not use this file except in compliance with the Elastic License. */ -import { uiModules } from 'ui/modules'; -import { InitAfterBindingsWorkaround } from 'ui/compat'; +import React from 'react'; +import { + EuiAccordion, + EuiCallOut, + EuiCodeBlock, + EuiFormRow, + EuiPanel, + EuiCodeEditor, + EuiSpacer +} from '@elastic/eui'; import { EDITOR } from '../../../../../common/constants'; -import { applyEditorOptions } from '../../../../lib/ace'; -import template from './custom_patterns_input.html'; -import './custom_patterns_input.less'; -import 'ui/toggle_panel'; -import 'ace'; -const app = uiModules.get('xpack/grokdebugger'); +export function CustomPatternsInput({ value, onChange }) { + const sampleCustomPatterns = `POSTFIX_QUEUEID [0-9A-F]{10,11} +MSG message-id=<%{GREEDYDATA}>`; -app.directive('customPatternsInput', function () { - return { - restrict: 'E', - template: template, - scope: { - onChange: '=' - }, - bindToController: true, - controllerAs: 'customPatternsInput', - controller: class CustomPatternsInputController extends InitAfterBindingsWorkaround { - initAfterBindings($scope) { - this.isCollapsed = { - action: true - }; - $scope.$watch('customPatternsInput.customPatterns', () => { - this.onChange(this.customPatterns); - }); - $scope.aceLoaded = (editor) => { - this.editor = editor; - applyEditorOptions(editor, EDITOR.PATTERN_MIN_LINES, EDITOR.PATTERN_MAX_LINES); - }; - } + return ( + - onSectionToggle = (sectionId) => { - this.isCollapsed[sectionId] = !this.isCollapsed[sectionId]; - } + - isSectionCollapsed = (sectionId) => { - return this.isCollapsed[sectionId]; - } - } - }; -}); + + + { sampleCustomPatterns } + + + + + + + + + + + + ); +} diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/custom_patterns_input/custom_patterns_input.less b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/custom_patterns_input/custom_patterns_input.less deleted file mode 100644 index 8c4ab417e0253..0000000000000 --- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/custom_patterns_input/custom_patterns_input.less +++ /dev/null @@ -1,5 +0,0 @@ -custom-patterns-input { - .custom-patterns-input-editor { - height: 51px; - } -} diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/custom_patterns_input/index.js b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/custom_patterns_input/index.js index 425bab35f5d4f..1bde5d2fcfa5d 100644 --- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/custom_patterns_input/index.js +++ b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/custom_patterns_input/index.js @@ -4,4 +4,4 @@ * you may not use this file except in compliance with the Elastic License. */ -import './custom_patterns_input'; +export { CustomPatternsInput } from './custom_patterns_input'; diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_input/event_input.html b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_input/event_input.html deleted file mode 100644 index ab4f97223a03f..0000000000000 --- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_input/event_input.html +++ /dev/null @@ -1,18 +0,0 @@ -
-
- -
-
-
-
-
diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_input/event_input.js b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_input/event_input.js index 24a1fdcbebd5a..2db505f3a3248 100644 --- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_input/event_input.js +++ b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_input/event_input.js @@ -4,34 +4,34 @@ * you may not use this file except in compliance with the Elastic License. */ -import { uiModules } from 'ui/modules'; +import React from 'react'; +import { + EuiFormRow, + EuiPanel, + EuiCodeEditor +} from '@elastic/eui'; import { EDITOR } from '../../../../../common/constants'; -import { applyEditorOptions } from '../../../../lib/ace'; -import template from './event_input.html'; -import './event_input.less'; -import 'ace'; -const app = uiModules.get('xpack/grokdebugger'); - -app.directive('eventInput', function () { - return { - restrict: 'E', - template: template, - scope: { - onChange: '=' - }, - bindToController: true, - controllerAs: 'eventInput', - controller: class EventInputController { - constructor($scope) { - $scope.$watch('eventInput.rawEvent', (newRawEvent) => { - this.onChange(newRawEvent); - }); - $scope.aceLoaded = (editor) => { - this.editor = editor; - applyEditorOptions(editor, EDITOR.SAMPLE_DATA_MIN_LINES, EDITOR.SAMPLE_DATA_MAX_LINES); - }; - } - } - }; -}); +export function EventInput({ value, onChange }) { + return ( + + + + + + ); +} diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_input/event_input.less b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_input/event_input.less deleted file mode 100644 index b637afad41481..0000000000000 --- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_input/event_input.less +++ /dev/null @@ -1,5 +0,0 @@ -event-input { - .event-input-editor { - height: 51px; - } -} diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_input/index.js b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_input/index.js index 7c29f6e2fe3ca..c3d1cbc084102 100644 --- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_input/index.js +++ b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_input/index.js @@ -4,4 +4,4 @@ * you may not use this file except in compliance with the Elastic License. */ -import './event_input'; +export { EventInput } from './event_input'; diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_output/event_output.html b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_output/event_output.html deleted file mode 100644 index 2cde2b5248952..0000000000000 --- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_output/event_output.html +++ /dev/null @@ -1,18 +0,0 @@ -
-
- -
-
-
diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_output/event_output.js b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_output/event_output.js index e2ee1f8c5b2e2..973f3728b5f89 100644 --- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_output/event_output.js +++ b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_output/event_output.js @@ -4,37 +4,33 @@ * you may not use this file except in compliance with the Elastic License. */ -import { uiModules } from 'ui/modules'; -import template from './event_output.html'; -import './event_output.less'; -import 'ace'; +import React from 'react'; +import { + EuiFormRow, + EuiPanel, + EuiCodeEditor +} from '@elastic/eui'; -const app = uiModules.get('xpack/grokdebugger'); - -app.directive('eventOutput', function () { - return { - restrict: 'E', - template: template, - scope: { - structuredEvent: '=' - }, - bindToController: true, - controllerAs: 'eventOutput', - controller: class EventOutputController { - constructor($scope) { - $scope.aceLoaded = (editor) => { - this.editor = editor; - editor.getSession().setUseWrapMode(true); - editor.setOptions({ - readOnly: true, +export function EventOutput({ value }) { + return ( + + + + + + ); +} diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_output/event_output.less b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_output/event_output.less deleted file mode 100644 index f4ee48c3fda30..0000000000000 --- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_output/event_output.less +++ /dev/null @@ -1,6 +0,0 @@ -event-output { - .event-output-editor { - height: 340px; - padding-bottom: 10px; - } -} diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_output/index.js b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_output/index.js index 7014aeab1e7ab..d2c88fbe57509 100644 --- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_output/index.js +++ b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_output/index.js @@ -4,4 +4,4 @@ * you may not use this file except in compliance with the Elastic License. */ -import './event_output'; +export { EventOutput } from './event_output'; diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/grok_debugger/grok_debugger.js b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/grok_debugger/grok_debugger.js new file mode 100644 index 0000000000000..dddb75336edaa --- /dev/null +++ b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/grok_debugger/grok_debugger.js @@ -0,0 +1,137 @@ +/* + * 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 from 'react'; +import { isEmpty } from 'lodash'; +import { + EuiForm, + EuiButton, + EuiPage, + EuiPageBody, + EuiPageContent, + EuiPageContentBody, + EuiSpacer +} from '@elastic/eui'; +import { EventInput } from '../event_input'; +import { PatternInput } from '../pattern_input'; +import { CustomPatternsInput } from '../custom_patterns_input'; +import { EventOutput } from '../event_output'; +import { GrokdebuggerRequest } from '../../../../models/grokdebugger_request'; +import { toastNotifications } from 'ui/notify'; + +export class GrokDebugger extends React.Component { + constructor(props) { + super(props); + this.state = { + rawEvent: '', + pattern: '', + customPatterns: '', + structuredEvent: {} + }; + this.grokdebuggerRequest = new GrokdebuggerRequest(); + } + + onRawEventChange = (rawEvent) => { + this.setState({ rawEvent }); + this.grokdebuggerRequest.rawEvent = rawEvent; + } + + onPatternChange = (pattern) => { + this.setState({ pattern }); + this.grokdebuggerRequest.pattern = pattern; + } + + onCustomPatternsChange = (customPatterns) => { + this.setState({ customPatterns }); + + customPatterns = customPatterns.trim(); + const customPatternsObj = {}; + + if (!customPatterns) { + this.grokdebuggerRequest.customPatterns = customPatternsObj; + return; + } + + customPatterns.split('\n').forEach(customPattern => { + // Patterns are defined like so: + // patternName patternDefinition + // For example: + // POSTGRESQL %{DATESTAMP:timestamp} %{TZ} %{DATA:user_id} %{GREEDYDATA:connection_id} %{POSINT:pid} + const [ , patternName, patternDefinition ] = customPattern.match(/(\S+)\s+(.+)/) || []; + if (patternName && patternDefinition) { + customPatternsObj[patternName] = patternDefinition; + } + }); + + this.grokdebuggerRequest.customPatterns = customPatternsObj; + } + + simulateGrok = async () => { + try { + const simulateResponse = await this.props.grokdebuggerService.simulate(this.grokdebuggerRequest); + this.setState({ + structuredEvent: simulateResponse.structuredEvent + }); + + if (!isEmpty(simulateResponse.error)) { + toastNotifications.addDanger(simulateResponse.error); + } + } catch (e) { + toastNotifications.addDanger(e); + } + } + + onSimulateClick = () => { + this.setState({ + structuredEvent: {} + }, this.simulateGrok); + } + + isSimulateDisabled = () => { + return this.state.rawEvent.trim() === '' + || this.state.pattern.trim() === ''; + } + + render() { + return ( + + + + + + + + + + + Simulate + + + + + + + + + ); + } +} diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/grok_debugger/index.js b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/grok_debugger/index.js new file mode 100644 index 0000000000000..baf144d2be29a --- /dev/null +++ b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/grok_debugger/index.js @@ -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 { GrokDebugger } from './grok_debugger'; diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/grokdebugger/grokdebugger.html b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/grokdebugger/grokdebugger.html deleted file mode 100644 index 2bfafa0baafeb..0000000000000 --- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/grokdebugger/grokdebugger.html +++ /dev/null @@ -1,23 +0,0 @@ - -
-
- - - -
- -
- -
-
- diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/grokdebugger/grokdebugger.js b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/grokdebugger/grokdebugger.js deleted file mode 100644 index 105d835b5f8cb..0000000000000 --- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/grokdebugger/grokdebugger.js +++ /dev/null @@ -1,87 +0,0 @@ -/* - * 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 { uiModules } from 'ui/modules'; -import template from './grokdebugger.html'; -import { Notifier } from 'ui/notify'; -import { GrokdebuggerRequest } from 'plugins/grokdebugger/models/grokdebugger_request'; -import 'plugins/grokdebugger/services/grokdebugger'; -import './grokdebugger.less'; -import '../event_input'; -import '../event_output'; -import '../pattern_input'; -import '../custom_patterns_input'; -import { isEmpty, trim } from 'lodash'; - -const app = uiModules.get('xpack/grokdebugger'); - -app.directive('grokdebugger', function ($injector) { - const grokdebuggerService = $injector.get('grokdebuggerService'); - - return { - restrict: 'E', - template: template, - bindToController: true, - controllerAs: 'grokdebugger', - controller: class GrokdebuggerController { - constructor() { - this.structuredEvent = {}; - this.grokdebuggerRequest = new GrokdebuggerRequest(); - this.notifier = new Notifier({ location: 'GrokDebugger' }); - } - - onSimulateClick = () => { - return grokdebuggerService.simulate(this.grokdebuggerRequest) - .then(simulateResponse => { - this.structuredEvent = simulateResponse.structuredEvent; - // this error block is for responses which are 200, but still contain - // a grok debugger error like pattern not matched. - if (!isEmpty(simulateResponse.error)) { - this.notifier.error(simulateResponse.error); - } - }) - .catch(e => { - // this error is for 4xx and 5xx responses - this.notifier.error(e); - }); - } - - onCustomPatternsChange = (customPatterns = '') => { - customPatterns = customPatterns.trim(); - if (!customPatterns) { - return; - } - - const customPatternsObj = {}; - customPatterns.split('\n').forEach(customPattern => { - // Patterns are defined like so: - // patternName patternDefinition - // For example: - // POSTGRESQL %{DATESTAMP:timestamp} %{TZ} %{DATA:user_id} %{GREEDYDATA:connection_id} %{POSINT:pid} - const [ , patternName, patternDefinition ] = customPattern.match(/(\S+)\s+(.+)/) || []; - if (patternName && patternDefinition) { - customPatternsObj[patternName] = patternDefinition; - } - }); - - this.grokdebuggerRequest.customPatterns = customPatternsObj; - } - - onRawEventChange = (rawEvent) => { - this.grokdebuggerRequest.rawEvent = rawEvent; - } - - onPatternChange = (pattern) => { - this.grokdebuggerRequest.pattern = pattern; - } - - get isSimulateEnabled() { - return !(isEmpty(trim(this.grokdebuggerRequest.rawEvent)) || - isEmpty(trim(this.grokdebuggerRequest.pattern))); - } - } - }; -}); diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/pattern_input/index.js b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/pattern_input/index.js index 6ea29e85b36d1..5feed879355d3 100644 --- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/pattern_input/index.js +++ b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/pattern_input/index.js @@ -4,4 +4,4 @@ * you may not use this file except in compliance with the Elastic License. */ -import './pattern_input'; +export { PatternInput } from './pattern_input'; diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/pattern_input/pattern_input.html b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/pattern_input/pattern_input.html deleted file mode 100644 index 4c6acc5d374b1..0000000000000 --- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/pattern_input/pattern_input.html +++ /dev/null @@ -1,18 +0,0 @@ -
-
- -
-
-
-
-
diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/pattern_input/pattern_input.js b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/pattern_input/pattern_input.js index d3119849dcedc..03411edddd25b 100644 --- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/pattern_input/pattern_input.js +++ b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/pattern_input/pattern_input.js @@ -4,37 +4,36 @@ * you may not use this file except in compliance with the Elastic License. */ -import { uiModules } from 'ui/modules'; -import { EDITOR } from '../../../../../common/constants'; -import template from './pattern_input.html'; -import './pattern_input.less'; +import React from 'react'; import { - applyEditorOptions, - GrokMode -} from '../../../../lib/ace'; - -const app = uiModules.get('xpack/grokdebugger'); + EuiFormRow, + EuiPanel, + EuiCodeEditor +} from '@elastic/eui'; +import { EDITOR } from '../../../../../common/constants'; +import { GrokMode } from '../../../../lib/ace'; -app.directive('patternInput', function () { - return { - restrict: 'E', - template: template, - scope: { - onChange: '=' - }, - bindToController: true, - controllerAs: 'patternInput', - controller: class PatternInputController { - constructor($scope) { - $scope.$watch('patternInput.pattern', (newPattern) => { - this.onChange(newPattern); - }); - $scope.aceLoaded = (editor) => { - this.editor = editor; - applyEditorOptions(editor, EDITOR.PATTERN_MIN_LINES, EDITOR.PATTERN_MAX_LINES); - editor.getSession().setMode(new GrokMode()); - }; - } - } - }; -}); +export function PatternInput({ value, onChange }) { + return ( + + + + + + ); +} diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/pattern_input/pattern_input.less b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/pattern_input/pattern_input.less deleted file mode 100644 index 9a2f3ab3078c6..0000000000000 --- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/pattern_input/pattern_input.less +++ /dev/null @@ -1,5 +0,0 @@ -pattern-input { - .pattern-input-editor { - height: 51px; - } -} diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/directives/grokdebugger/grokdebugger.js b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/directives/grokdebugger/grokdebugger.js new file mode 100644 index 0000000000000..c9f4dab7dd3c2 --- /dev/null +++ b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/directives/grokdebugger/grokdebugger.js @@ -0,0 +1,25 @@ +/* + * 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 { uiModules } from 'ui/modules'; +import 'plugins/grokdebugger/services/grokdebugger'; +import { GrokDebugger } from '../../components/grok_debugger'; +import { render } from 'react-dom'; +import React from 'react'; +import './grokdebugger.less'; + +const app = uiModules.get('xpack/grokdebugger'); + +app.directive('grokdebugger', function ($injector) { + const grokdebuggerService = $injector.get('grokdebuggerService'); + + return { + restrict: 'E', + link: (scope, el) => { + render(, el[0]); + } + }; +}); diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/grokdebugger/grokdebugger.less b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/directives/grokdebugger/grokdebugger.less similarity index 69% rename from x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/grokdebugger/grokdebugger.less rename to x-pack/plugins/grokdebugger/public/sections/grokdebugger/directives/grokdebugger/grokdebugger.less index ac2b1367e20ed..4425b5e87c35d 100644 --- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/grokdebugger/grokdebugger.less +++ b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/directives/grokdebugger/grokdebugger.less @@ -3,22 +3,6 @@ @import (reference) "~ui/styles/theme"; grokdebugger { - .grokdebugger-container { - font-size: 16px; - } - - .ace_editor { - font-size: 13px; - } - - .grokdebugger-ace-editor { - border: 2px solid @kibanaGray5; - } - - .grokdebugger-simulate-button { - margin-bottom: 10px; - } - .ace_grokStart, .ace_grokEnd, .ace_grokSeparator, diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/grokdebugger/index.js b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/directives/grokdebugger/index.js similarity index 100% rename from x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/grokdebugger/index.js rename to x-pack/plugins/grokdebugger/public/sections/grokdebugger/directives/grokdebugger/index.js diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/grokdebugger_route.html b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/grokdebugger_route.html index e081db57e8900..f1de4653ead0a 100644 --- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/grokdebugger_route.html +++ b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/grokdebugger_route.html @@ -1 +1,3 @@ - + + + diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/grokdebugger_route.js b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/grokdebugger_route.js index 7655e5ebfac2e..74530e73f379e 100644 --- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/grokdebugger_route.js +++ b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/grokdebugger_route.js @@ -8,7 +8,7 @@ import routes from 'ui/routes'; import { toastNotifications } from 'ui/notify'; import { XPackInfoProvider } from 'plugins/xpack_main/services/xpack_info'; import template from './grokdebugger_route.html'; -import './components/grokdebugger'; +import './directives/grokdebugger'; routes .when('/dev_tools/grokdebugger', { diff --git a/x-pack/test/functional/services/grok_debugger.js b/x-pack/test/functional/services/grok_debugger.js index b572e455cb651..c8870e534ce55 100644 --- a/x-pack/test/functional/services/grok_debugger.js +++ b/x-pack/test/functional/services/grok_debugger.js @@ -14,10 +14,10 @@ export function GrokDebuggerProvider({ getService }) { // test subject selectors const SUBJ_CONTAINER = 'grokDebugger'; - const SUBJ_UI_ACE_EVENT_INPUT = `${SUBJ_CONTAINER} aceEventInput`; - const SUBJ_UI_ACE_PATTERN_INPUT = `${SUBJ_CONTAINER} acePatternInput`; - const SUBJ_UI_ACE_CUSTOM_PATTERNS_INPUT = `${SUBJ_CONTAINER} aceCustomPatternsInput`; - const SUBJ_UI_ACE_EVENT_OUTPUT = `${SUBJ_CONTAINER} aceEventOutput`; + const SUBJ_UI_ACE_EVENT_INPUT = `${SUBJ_CONTAINER} aceEventInput codeEditorContainer`; + const SUBJ_UI_ACE_PATTERN_INPUT = `${SUBJ_CONTAINER} acePatternInput codeEditorContainer`; + const SUBJ_UI_ACE_CUSTOM_PATTERNS_INPUT = `${SUBJ_CONTAINER} aceCustomPatternsInput codeEditorContainer`; + const SUBJ_UI_ACE_EVENT_OUTPUT = `${SUBJ_CONTAINER} aceEventOutput codeEditorContainer`; const SUBJ_BTN_TOGGLE_CUSTOM_PATTERNS_INPUT = `${SUBJ_CONTAINER} btnToggleCustomPatternsInput`; const SUBJ_BTN_SIMULATE = `${SUBJ_CONTAINER} btnSimulate`;